/* =========================================================
   RankMySalon Global Light / Dark Theme System
   Safe version: keeps original header layout + adds theme cards
========================================================= */

/* ================================
   1. Theme Variables
================================ */

html[data-theme="dark"] {
  --rms-site-max-width: 1192px;
  --rms-site-side-padding: 32px;

  /* Refined deep purple-black base */
  --rms-bg: #0d0b1f;
  --rms-bg-soft: #14102e;
  --rms-bg-panel: #1a1338;
  --rms-bg-card: #1a1338;
  --rms-bg-card-2: #211a45;

  --rms-text: #f5f0fa;
  --rms-text-soft: #c9c0d8;
  --rms-text-muted: #8a82a0;

  --rms-border: rgba(232, 160, 213, 0.16);
  --rms-border-strong: rgba(232, 160, 213, 0.28);

  /* Brand: pink-purple (refined) replaces gold */
  --rms-gold: #e8a0d5;
  --rms-gold-soft: rgba(232, 160, 213, 0.16);

  /* Header keeps a dark gradient, now with purple tint */
  --rms-header-bg: linear-gradient(135deg, rgba(26, 19, 56, 0.98), rgba(13, 11, 31, 0.98));
  --rms-header-border: rgba(123, 110, 246, 0.38);

  --rms-shadow-soft: 0 22px 70px rgba(13, 5, 35, 0.5);
  --rms-shadow-card: 0 18px 45px rgba(13, 5, 35, 0.42);

  /* Marketing surfaces (leaderboard, analysis, about, legal, pricing) */
  --rms-mkt-page-bg:
    radial-gradient(ellipse 120% 70% at 50% -15%, rgba(107, 47, 160, 0.32), transparent 52%),
    radial-gradient(ellipse 80% 50% at 85% 20%, rgba(232, 160, 213, 0.18), transparent 55%),
    linear-gradient(180deg, #0d0b1f 0%, #14102e 38%, #0b0919 100%);
  --rms-mkt-card-bg: linear-gradient(145deg, #1a1338 0%, #251a4d 42%, #150f30 100%);
  --rms-mkt-card-border: rgba(232, 160, 213, 0.18);
  --rms-mkt-card-shadow:
    0 24px 64px rgba(8, 4, 25, 0.55),
    inset 0 1px 0 rgba(232, 160, 213, 0.08);
  --rms-mkt-inset: rgba(255, 255, 255, 0.05);
  --rms-kicker: #f4a8c7;
  --rms-link: #c89fe0;
  --rms-link-hover: #f4a8c7;
  --rms-input-bg: rgba(20, 16, 46, 0.82);
  --rms-input-border: rgba(232, 160, 213, 0.24);
  --rms-input-text: rgba(245, 240, 250, 0.95);
  --rms-input-placeholder: rgba(200, 192, 216, 0.42);
  --rms-ghost-bg: rgba(255, 255, 255, 0.05);
  --rms-ghost-border: rgba(232, 160, 213, 0.28);
  --rms-ghost-text: rgba(245, 240, 250, 0.92);
  --rms-ghost-hover-bg: rgba(232, 160, 213, 0.1);
  --rms-pill-bg: rgba(255, 255, 255, 0.05);
  --rms-pill-border: rgba(232, 160, 213, 0.2);
  --rms-pill-text: rgba(245, 240, 250, 0.88);
  --rms-pill-active-bg: linear-gradient(135deg, #f4a8c7 0%, #d98be0 100%);
  --rms-pill-active-text: #1a0f30;
  --rms-tab-muted: rgba(200, 192, 216, 0.45);
  --rms-tab-active: #f4a8c7;
  --rms-tab-active-border: #f4a8c7;
  --rms-cta-pay-bg: linear-gradient(135deg, #f4a8c7 0%, #d98be0 100%);
  --rms-cta-pay-text: #1a0f30;
  --rms-success: #86efac;
  --rms-danger: #fca5a5;
  --rms-score-good: #34d399;
  --rms-score-fair: #f4a8c7;
  --rms-score-weak: #f87171;
}

:root,
html[data-theme="light"] {
  --rms-site-max-width: 1192px;
  --rms-site-side-padding: 32px;

  /* Light variant of refined palette: soft lavender/lilac base, same pink-purple accent */
  --rms-bg: #faf7fc;
  --rms-bg-soft: #f3edf8;
  --rms-bg-panel: #ffffff;
  --rms-bg-card: #ffffff;
  --rms-bg-card-2: #fbf7fd;

  --rms-text: #1a1430;
  --rms-text-soft: #3d3358;
  --rms-text-muted: #6b6188;

  --rms-border: rgba(123, 110, 246, 0.16);
  --rms-border-strong: rgba(123, 110, 246, 0.28);

  --rms-gold: #b15cc7;
  --rms-gold-soft: rgba(177, 92, 199, 0.14);

  /* Header keeps dark purple tint in light mode for hero contrast */
  --rms-header-bg: linear-gradient(135deg, rgba(26, 19, 56, 0.98), rgba(13, 11, 31, 0.98));
  --rms-header-border: rgba(123, 110, 246, 0.38);

  --rms-shadow-soft: 0 22px 70px rgba(75, 47, 130, 0.16);
  --rms-shadow-card: 0 18px 45px rgba(75, 47, 130, 0.14);

  --rms-mkt-page-bg: transparent;
  --rms-mkt-card-bg: linear-gradient(145deg, var(--rms-bg-card) 0%, var(--rms-bg-soft) 55%, var(--rms-bg-card-2) 100%);
  --rms-mkt-card-border: var(--rms-border);
  --rms-mkt-card-shadow: var(--rms-shadow-card);
  --rms-mkt-inset: var(--rms-bg-soft);
  --rms-kicker: #b15cc7;
  --rms-link: #b15cc7;
  --rms-link-hover: #8c3aad;
  --rms-input-bg: var(--rms-bg-card-2);
  --rms-input-border: var(--rms-border-strong);
  --rms-input-text: var(--rms-text);
  --rms-input-placeholder: var(--rms-text-muted);
  --rms-ghost-bg: var(--rms-bg-card);
  --rms-ghost-border: var(--rms-border-strong);
  --rms-ghost-text: var(--rms-text);
  --rms-ghost-hover-bg: var(--rms-gold-soft);
  --rms-pill-bg: var(--rms-bg-card-2);
  --rms-pill-border: var(--rms-border);
  --rms-pill-text: var(--rms-text-soft);
  --rms-pill-active-bg: linear-gradient(135deg, #f4a8c7 0%, #d98be0 100%);
  --rms-pill-active-text: #1a0f30;
  --rms-tab-muted: var(--rms-text-muted);
  --rms-tab-active: var(--rms-text);
  --rms-tab-active-border: var(--rms-gold);
  --rms-cta-pay-bg: linear-gradient(135deg, #f4a8c7 0%, #d98be0 100%);
  --rms-cta-pay-text: #1a0f30;
  --rms-success: #047857;
  --rms-danger: #b91c1c;
  --rms-score-good: #0f6e56;
  --rms-score-fair: #b45309;
  --rms-score-weak: #a32d2d;
}

/* ================================
   2. Global Page Background
================================ */

html,
body {
  min-height: 100%;
  background: var(--rms-bg);
  color: var(--rms-text);
}

html[data-theme="dark"] body {
  background:
    radial-gradient(circle at 12% 0%, rgba(212, 175, 55, 0.07), transparent 30%),
    radial-gradient(circle at 85% 20%, rgba(31, 90, 160, 0.12), transparent 32%),
    linear-gradient(180deg, #05070d 0%, #07101d 48%, #05070d 100%) !important;
}

html[data-theme="light"] body {
  background:
    radial-gradient(circle at 12% 0%, rgba(212, 175, 55, 0.22), transparent 30%),
    radial-gradient(circle at 85% 20%, rgba(212, 175, 55, 0.12), transparent 32%),
    linear-gradient(180deg, #f7f1e3 0%, #eee6d6 48%, #f7f1e3 100%) !important;
}

/* Smooth change */
body,
main,
section,
article,
div,
a,
button,
p,
span,
h1,
h2,
h3,
h4,
h5,
h6 {
  transition:
    background-color 0.22s ease,
    color 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease;
}

/* ================================
   3. Site Width Control
   Make services page match your original site width
================================ */

/* Header width */
.marketing-header {
  width: calc(100% - 96px) !important;
  max-width: var(--rms-site-max-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* Main content width */
.marketing-main,
main.marketing-main,
.services-main,
.page-main {
  width: calc(100% - 96px) !important;
  max-width: var(--rms-site-max-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* If your service sections are direct children and already centered, keep them aligned */
.marketing-main > *,
.services-main > *,
.page-main > * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ================================
   4. Header Layout Fix
   Same feeling as homepage, one row only
================================ */

.marketing-header {
  background: var(--rms-header-bg) !important;
  border: 1px solid var(--rms-header-border) !important;
  border-radius: 24px !important;
  min-height: 92px !important;
  padding: 0 24px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  flex-wrap: nowrap !important;

  box-shadow: none !important;
}

/* Logo */
.marketing-logo,
.marketing-brand,
.marketing-logo-link {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

/* Nav */
.marketing-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;

  gap: 18px !important;
  margin-left: 10px !important;
  margin-right: auto !important;

  min-width: 0 !important;
  white-space: nowrap !important;
}

/* Nav links */
.marketing-nav-link {
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;

  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 700 !important;

  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Right actions */
.marketing-auth-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 14px !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

/* Keep original action button sizes */
.marketing-contact-nav-btn,
.marketing-auth-link,
.marketing-lang-toggle {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

/* ================================
   5. Theme Toggle Button
   Small button, does not resize header
================================ */

.theme-toggle {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;

  padding: 0 !important;
  margin: 0 !important;

  border-radius: 999px !important;
  border: 1px solid #2f8cff !important;
  background: rgba(47, 140, 255, 0.08) !important;
  color: #f8fafc !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-size: 15px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  flex: 0 0 36px !important;

  box-shadow: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.theme-toggle:hover {
  background: rgba(47, 140, 255, 0.18) !important;
  color: #ffffff !important;
}

.theme-toggle span {
  color: inherit !important;
  line-height: 1 !important;
}

/* ================================
   6. Text Colors
================================ */

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 {
  color: #f8fafc !important;
}

html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] h5,
html[data-theme="light"] h6 {
  color: #151515 !important;
}

html[data-theme="dark"] p,
html[data-theme="dark"] li {
  color: var(--rms-text-soft) !important;
}

html[data-theme="light"] p,
html[data-theme="light"] li {
  color: var(--rms-text-soft) !important;
}

/* Header text should always stay like original dark header */
.marketing-header,
.marketing-header h1,
.marketing-header h2,
.marketing-header h3,
.marketing-header p,
.marketing-header span,
.marketing-header a,
.marketing-header button {
  color: inherit;
}

.marketing-header .marketing-nav-link {
  color: rgba(226, 232, 240, 0.62) !important;
}

.marketing-header .marketing-nav-link:hover,
.marketing-header .marketing-nav-link.is-active {
  color: #f6d96b !important;
}

/* Logo gold stays same */
.marketing-logo span,
.marketing-brand span,
.logo span,
.gold,
.text-gold,
.accent,
.highlight,
.marketing-accent {
  color: var(--rms-gold) !important;
}

/* ================================
   7. Hero / Intro Section Theme
================================ */

html[data-theme="dark"] .marketing-hero,
html[data-theme="dark"] .services-hero,
html[data-theme="dark"] .service-hero,
html[data-theme="dark"] .hero-card,
html[data-theme="dark"] .hero-panel,
html[data-theme="dark"] .services-intro,
html[data-theme="dark"] .marketing-intro {
  background:
    radial-gradient(circle at 55% 70%, rgba(212, 175, 55, 0.06), transparent 42%),
    linear-gradient(135deg, rgba(16, 29, 50, 0.98), rgba(8, 15, 28, 0.98)) !important;
  border-color: var(--rms-border) !important;
  color: #f8fafc !important;
  box-shadow: var(--rms-shadow-soft) !important;
}

html[data-theme="light"] .marketing-hero,
html[data-theme="light"] .services-hero,
html[data-theme="light"] .service-hero,
html[data-theme="light"] .hero-card,
html[data-theme="light"] .hero-panel,
html[data-theme="light"] .services-intro,
html[data-theme="light"] .marketing-intro {
  background:
    radial-gradient(circle at 55% 70%, rgba(212, 175, 55, 0.18), transparent 42%),
    linear-gradient(135deg, #fffaf0, #f4edde) !important;
  border-color: rgba(21, 21, 21, 0.1) !important;
  color: #151515 !important;
  box-shadow: var(--rms-shadow-soft) !important;
}

/* ================================
   8. Cards Theme
   Covers service cards, tier cards, report cards, pricing cards
================================ */

html[data-theme="dark"] .service-card,
html[data-theme="dark"] .tier-card,
html[data-theme="dark"] .pricing-card,
html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .marketing-card,
html[data-theme="dark"] .report-card,
html[data-theme="dark"] .analysis-card,
html[data-theme="dark"] .score-card,
html[data-theme="dark"] .growth-card,
html[data-theme="dark"] .card {
  background:
    linear-gradient(180deg, rgba(17, 30, 50, 0.98), rgba(9, 17, 31, 0.98)) !important;
  border-color: var(--rms-border) !important;
  color: #f8fafc !important;
  box-shadow: var(--rms-shadow-card) !important;
}

html[data-theme="light"] .service-card,
html[data-theme="light"] .tier-card,
html[data-theme="light"] .pricing-card,
html[data-theme="light"] .feature-card,
html[data-theme="light"] .marketing-card,
html[data-theme="light"] .report-card,
html[data-theme="light"] .analysis-card,
html[data-theme="light"] .score-card,
html[data-theme="light"] .growth-card,
html[data-theme="light"] .card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(250, 246, 235, 0.98)) !important;
  border-color: rgba(21, 21, 21, 0.1) !important;
  color: #151515 !important;
  box-shadow: var(--rms-shadow-card) !important;
}

/* Card text */
html[data-theme="dark"] .service-card h1,
html[data-theme="dark"] .service-card h2,
html[data-theme="dark"] .service-card h3,
html[data-theme="dark"] .tier-card h1,
html[data-theme="dark"] .tier-card h2,
html[data-theme="dark"] .tier-card h3,
html[data-theme="dark"] .pricing-card h1,
html[data-theme="dark"] .pricing-card h2,
html[data-theme="dark"] .pricing-card h3,
html[data-theme="dark"] .feature-card h1,
html[data-theme="dark"] .feature-card h2,
html[data-theme="dark"] .feature-card h3,
html[data-theme="dark"] .marketing-card h1,
html[data-theme="dark"] .marketing-card h2,
html[data-theme="dark"] .marketing-card h3,
html[data-theme="dark"] .card h1,
html[data-theme="dark"] .card h2,
html[data-theme="dark"] .card h3 {
  color: #f8fafc !important;
}

html[data-theme="light"] .service-card h1,
html[data-theme="light"] .service-card h2,
html[data-theme="light"] .service-card h3,
html[data-theme="light"] .tier-card h1,
html[data-theme="light"] .tier-card h2,
html[data-theme="light"] .tier-card h3,
html[data-theme="light"] .pricing-card h1,
html[data-theme="light"] .pricing-card h2,
html[data-theme="light"] .pricing-card h3,
html[data-theme="light"] .feature-card h1,
html[data-theme="light"] .feature-card h2,
html[data-theme="light"] .feature-card h3,
html[data-theme="light"] .marketing-card h1,
html[data-theme="light"] .marketing-card h2,
html[data-theme="light"] .marketing-card h3,
html[data-theme="light"] .card h1,
html[data-theme="light"] .card h2,
html[data-theme="light"] .card h3 {
  color: #151515 !important;
}

html[data-theme="dark"] .service-card p,
html[data-theme="dark"] .tier-card p,
html[data-theme="dark"] .pricing-card p,
html[data-theme="dark"] .feature-card p,
html[data-theme="dark"] .marketing-card p,
html[data-theme="dark"] .card p {
  color: #c3d0e4 !important;
}

html[data-theme="light"] .service-card p,
html[data-theme="light"] .tier-card p,
html[data-theme="light"] .pricing-card p,
html[data-theme="light"] .feature-card p,
html[data-theme="light"] .marketing-card p,
html[data-theme="light"] .card p {
  color: #374151 !important;
}

/* ================================
   9. Generic Panel / Section Theme
================================ */

html[data-theme="dark"] section:not(.marketing-header section) {
  color: #f8fafc;
}

html[data-theme="light"] section:not(.marketing-header section) {
  color: #151515;
}

/* If a section uses common panel naming */
html[data-theme="dark"] .panel,
html[data-theme="dark"] .section-panel,
html[data-theme="dark"] .content-panel,
html[data-theme="dark"] .service-section,
html[data-theme="dark"] .tier-section {
  background:
    linear-gradient(180deg, rgba(17, 30, 50, 0.98), rgba(9, 17, 31, 0.98)) !important;
  border-color: var(--rms-border) !important;
  color: #f8fafc !important;
}

html[data-theme="light"] .panel,
html[data-theme="light"] .section-panel,
html[data-theme="light"] .content-panel,
html[data-theme="light"] .service-section,
html[data-theme="light"] .tier-section {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(250, 246, 235, 0.98)) !important;
  border-color: rgba(21, 21, 21, 0.1) !important;
  color: #151515 !important;
}

/* ================================
   10. Price / Tags / Pills
================================ */

html[data-theme="dark"] .price,
html[data-theme="dark"] .amount,
html[data-theme="dark"] .tier-price,
html[data-theme="dark"] .service-price,
html[data-theme="light"] .price,
html[data-theme="light"] .amount,
html[data-theme="light"] .tier-price,
html[data-theme="light"] .service-price {
  color: var(--rms-gold) !important;
}

html[data-theme="dark"] .badge,
html[data-theme="dark"] .pill,
html[data-theme="dark"] .tag {
  background: rgba(148, 163, 184, 0.14) !important;
  color: #bfdbfe !important;
  border-color: rgba(148, 163, 184, 0.16) !important;
}

html[data-theme="light"] .badge,
html[data-theme="light"] .pill,
html[data-theme="light"] .tag {
  background: rgba(212, 175, 55, 0.16) !important;
  color: #4b3a0a !important;
  border-color: rgba(212, 175, 55, 0.24) !important;
}

/* ================================
   11. Mobile
================================ */

@media (max-width: 1100px) {
  .marketing-header {
    width: calc(100% - 40px) !important;
    padding: 18px 20px !important;
    flex-wrap: wrap !important;
    min-height: auto !important;
  }

  .marketing-nav {
    order: 3 !important;
    width: 100% !important;
    margin-left: 0 !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
  }

  .marketing-auth-actions {
    margin-left: auto !important;
  }

  .marketing-main,
  main.marketing-main,
  .services-main,
  .page-main {
    width: calc(100% - 40px) !important;
  }
}

@media (max-width: 768px) {
  .theme-toggle {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    flex-basis: 32px !important;
    font-size: 14px !important;
  }

  .marketing-nav-link {
    font-size: 14px !important;
  }
}

/* =========================================================
   FORCE FULL LIGHT / DARK PAGE CONVERSION
   Add this at the very bottom of theme.css
   Goal: all main page sections/cards/panels change with theme
========================================================= */

/* ---------- Keep header always dark and untouched ---------- */

.marketing-header,
.marketing-header *,
.marketing-auth-actions,
.marketing-auth-actions *,
.marketing-nav,
.marketing-nav * {
  box-shadow: inherit;
}

/* ---------- Main page shell ---------- */

html[data-theme="light"] .marketing-main,
html[data-theme="light"] main,
html[data-theme="light"] .page,
html[data-theme="light"] .page-shell,
html[data-theme="light"] .page-wrapper,
html[data-theme="light"] .services-page,
html[data-theme="light"] .services-main {
  background: transparent !important;
  color: #151515 !important;
}

html[data-theme="dark"] .marketing-main,
html[data-theme="dark"] main,
html[data-theme="dark"] .page,
html[data-theme="dark"] .page-shell,
html[data-theme="dark"] .page-wrapper,
html[data-theme="dark"] .services-page,
html[data-theme="dark"] .services-main {
  background: transparent !important;
  color: #f8fafc !important;
}

/* ---------- Light mode: force all visible service blocks/cards to light ---------- */

html[data-theme="light"] .marketing-main section,
html[data-theme="light"] .marketing-main article,
html[data-theme="light"] .marketing-main aside,
html[data-theme="light"] .marketing-main [class*="hero"],
html[data-theme="light"] .marketing-main [class*="intro"],
html[data-theme="light"] .marketing-main [class*="panel"],
html[data-theme="light"] .marketing-main [class*="card"],
html[data-theme="light"] .marketing-main [class*="tile"],
html[data-theme="light"] .marketing-main [class*="tier"],
html[data-theme="light"] .marketing-main [class*="service"],
html[data-theme="light"] .marketing-main [class*="pricing"],
html[data-theme="light"] .marketing-main [class*="feature"],
html[data-theme="light"] .marketing-main [class*="growth"],
html[data-theme="light"] .marketing-main [class*="report"],
html[data-theme="light"] .marketing-main [class*="analysis"],
html[data-theme="light"] .marketing-main [class*="score"],
html[data-theme="light"] .marketing-main [class*="diagnosis"],
html[data-theme="light"] .marketing-main [class*="content"],
html[data-theme="light"] .marketing-main [class*="block"] {
  background:
    radial-gradient(circle at 55% 0%, rgba(212, 175, 55, 0.13), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(249, 244, 232, 0.98)) !important;
  color: #151515 !important;
  border-color: rgba(21, 21, 21, 0.12) !important;
  box-shadow: 0 18px 48px rgba(80, 66, 35, 0.13) !important;
}

/* ---------- Dark mode: keep all visible service blocks/cards dark blue, not pure black ---------- */

html[data-theme="dark"] .marketing-main section,
html[data-theme="dark"] .marketing-main article,
html[data-theme="dark"] .marketing-main aside,
html[data-theme="dark"] .marketing-main [class*="hero"],
html[data-theme="dark"] .marketing-main [class*="intro"],
html[data-theme="dark"] .marketing-main [class*="panel"],
html[data-theme="dark"] .marketing-main [class*="card"],
html[data-theme="dark"] .marketing-main [class*="tile"],
html[data-theme="dark"] .marketing-main [class*="tier"],
html[data-theme="dark"] .marketing-main [class*="service"],
html[data-theme="dark"] .marketing-main [class*="pricing"],
html[data-theme="dark"] .marketing-main [class*="feature"],
html[data-theme="dark"] .marketing-main [class*="growth"],
html[data-theme="dark"] .marketing-main [class*="report"],
html[data-theme="dark"] .marketing-main [class*="analysis"],
html[data-theme="dark"] .marketing-main [class*="score"],
html[data-theme="dark"] .marketing-main [class*="diagnosis"],
html[data-theme="dark"] .marketing-main [class*="content"],
html[data-theme="dark"] .marketing-main [class*="block"] {
  background:
    radial-gradient(circle at 55% 0%, rgba(212, 175, 55, 0.05), transparent 42%),
    linear-gradient(180deg, rgba(17, 30, 50, 0.98), rgba(9, 17, 31, 0.98)) !important;
  color: #f8fafc !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28) !important;
}

/* ---------- Do not accidentally recolor header, nav, language menu, or buttons ---------- */

html[data-theme="light"] .marketing-header,
html[data-theme="light"] .marketing-header *,
html[data-theme="dark"] .marketing-header,
html[data-theme="dark"] .marketing-header * {
  background-image: initial;
}

html[data-theme="light"] .marketing-header,
html[data-theme="dark"] .marketing-header {
  background: var(--rms-header-bg) !important;
  border-color: var(--rms-header-border) !important;
}

html[data-theme="light"] .marketing-nav,
html[data-theme="light"] .marketing-nav *,
html[data-theme="light"] .marketing-auth-actions,
html[data-theme="light"] .marketing-auth-actions *,
html[data-theme="dark"] .marketing-nav,
html[data-theme="dark"] .marketing-nav *,
html[data-theme="dark"] .marketing-auth-actions,
html[data-theme="dark"] .marketing-auth-actions * {
  box-shadow: none;
}

/* Restore original header action buttons */
html[data-theme="light"] .marketing-contact-nav-btn,
html[data-theme="dark"] .marketing-contact-nav-btn {
  background: linear-gradient(135deg, #8f0f17, #dc1f2d) !important;
  color: #ffffff !important;
}

html[data-theme="light"] .marketing-auth-link,
html[data-theme="dark"] .marketing-auth-link,
html[data-theme="light"] .marketing-lang-toggle,
html[data-theme="dark"] .marketing-lang-toggle {
  background: rgba(255, 255, 255, 0.04) !important;
  color: #f8fafc !important;
  border-color: rgba(148, 163, 184, 0.28) !important;
}

/* Keep theme toggle itself unchanged */
html[data-theme="light"] .theme-toggle,
html[data-theme="dark"] .theme-toggle {
  background: rgba(47, 140, 255, 0.08) !important;
  border-color: #2f8cff !important;
  color: #f8fafc !important;
  box-shadow: none !important;
}

/* ---------- Text conversion inside main page ---------- */

html[data-theme="light"] .marketing-main h1,
html[data-theme="light"] .marketing-main h2,
html[data-theme="light"] .marketing-main h3,
html[data-theme="light"] .marketing-main h4,
html[data-theme="light"] .marketing-main h5,
html[data-theme="light"] .marketing-main h6,
html[data-theme="light"] main h1,
html[data-theme="light"] main h2,
html[data-theme="light"] main h3,
html[data-theme="light"] main h4,
html[data-theme="light"] main h5,
html[data-theme="light"] main h6 {
  color: #151515 !important;
}

html[data-theme="dark"] .marketing-main h1,
html[data-theme="dark"] .marketing-main h2,
html[data-theme="dark"] .marketing-main h3,
html[data-theme="dark"] .marketing-main h4,
html[data-theme="dark"] .marketing-main h5,
html[data-theme="dark"] .marketing-main h6,
html[data-theme="dark"] main h1,
html[data-theme="dark"] main h2,
html[data-theme="dark"] main h3,
html[data-theme="dark"] main h4,
html[data-theme="dark"] main h5,
html[data-theme="dark"] main h6 {
  color: #f8fafc !important;
}

html[data-theme="light"] .marketing-main p,
html[data-theme="light"] .marketing-main li,
html[data-theme="light"] .marketing-main span:not(.marketing-lang-btn-label):not(.marketing-lang-btn-caret),
html[data-theme="light"] main p,
html[data-theme="light"] main li,
html[data-theme="light"] main span:not(.marketing-lang-btn-label):not(.marketing-lang-btn-caret) {
  color: #374151 !important;
}

html[data-theme="dark"] .marketing-main p,
html[data-theme="dark"] .marketing-main li,
html[data-theme="dark"] .marketing-main span:not(.marketing-lang-btn-label):not(.marketing-lang-btn-caret),
html[data-theme="dark"] main p,
html[data-theme="dark"] main li,
html[data-theme="dark"] main span:not(.marketing-lang-btn-label):not(.marketing-lang-btn-caret) {
  color: #c3d0e4 !important;
}

/* ---------- Keep gold exactly the same in both modes ---------- */

html[data-theme="light"] .marketing-main .price,
html[data-theme="light"] .marketing-main .amount,
html[data-theme="light"] .marketing-main .tier-price,
html[data-theme="light"] .marketing-main .service-price,
html[data-theme="light"] .marketing-main .gold,
html[data-theme="light"] .marketing-main .text-gold,
html[data-theme="light"] .marketing-main .accent,
html[data-theme="light"] .marketing-main .highlight,
html[data-theme="dark"] .marketing-main .price,
html[data-theme="dark"] .marketing-main .amount,
html[data-theme="dark"] .marketing-main .tier-price,
html[data-theme="dark"] .marketing-main .service-price,
html[data-theme="dark"] .marketing-main .gold,
html[data-theme="dark"] .marketing-main .text-gold,
html[data-theme="dark"] .marketing-main .accent,
html[data-theme="dark"] .marketing-main .highlight {
  color: #e8a0d5 !important;
}

/* ---------- Badges / pills / tier labels ---------- */

html[data-theme="light"] .marketing-main .badge,
html[data-theme="light"] .marketing-main .pill,
html[data-theme="light"] .marketing-main .tag,
html[data-theme="light"] .marketing-main [class*="badge"],
html[data-theme="light"] .marketing-main [class*="pill"],
html[data-theme="light"] .marketing-main [class*="tag"],
html[data-theme="light"] .marketing-main [class*="label"] {
  background: rgba(212, 175, 55, 0.16) !important;
  color: #4b3a0a !important;
  border-color: rgba(212, 175, 55, 0.28) !important;
}

html[data-theme="dark"] .marketing-main .badge,
html[data-theme="dark"] .marketing-main .pill,
html[data-theme="dark"] .marketing-main .tag,
html[data-theme="dark"] .marketing-main [class*="badge"],
html[data-theme="dark"] .marketing-main [class*="pill"],
html[data-theme="dark"] .marketing-main [class*="tag"],
html[data-theme="dark"] .marketing-main [class*="label"] {
  background: rgba(148, 163, 184, 0.14) !important;
  color: #bfdbfe !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
}

/* ---------- Images inside cards: keep visible in light mode ---------- */

html[data-theme="light"] .marketing-main img {
  opacity: 0.92 !important;
  filter: none !important;
}

html[data-theme="dark"] .marketing-main img {
  opacity: 0.72 !important;
}

/* ---------- Dark overlays / pseudo layers inside cards ---------- */

html[data-theme="light"] .marketing-main [class*="overlay"],
html[data-theme="light"] .marketing-main [class*="shade"],
html[data-theme="light"] .marketing-main [class*="scrim"] {
  background: rgba(255, 250, 240, 0.54) !important;
}

html[data-theme="dark"] .marketing-main [class*="overlay"],
html[data-theme="dark"] .marketing-main [class*="shade"],
html[data-theme="dark"] .marketing-main [class*="scrim"] {
  background: rgba(5, 7, 13, 0.58) !important;
}

/* ---------- Inputs / select / textarea if any ---------- */

html[data-theme="light"] .marketing-main input,
html[data-theme="light"] .marketing-main textarea,
html[data-theme="light"] .marketing-main select {
  background: rgba(255, 255, 255, 0.9) !important;
  color: #151515 !important;
  border-color: rgba(21, 21, 21, 0.16) !important;
}

html[data-theme="dark"] .marketing-main input,
html[data-theme="dark"] .marketing-main textarea,
html[data-theme="dark"] .marketing-main select {
  background: rgba(15, 23, 42, 0.92) !important;
  color: #f8fafc !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
}

/* =========================================================
   SERVICES PAGE EXACT LIGHT / DARK THEME FIX
   Put this at the very bottom of theme.css
========================================================= */

/* ---------- Services page width: keep original layout ---------- */

.services-page {
  width: 1180px !important;
  max-width: calc(100vw - 72px) !important;
  margin: 95px auto 48px !important;
  box-sizing: border-box !important;
}

/* Header should follow the original services page width */
.services-page .marketing-nav-shell,
.services-page .marketing-nav-main {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Keep header one row */
.services-page .marketing-nav-main {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: 18px !important;
}

/* Logo fixed */
.services-page .marketing-brand {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

/* Menu slightly tighter, still one row */
.services-page .marketing-nav {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 18px !important;
  margin-left: 8px !important;
  margin-right: auto !important;
  min-width: 0 !important;
  white-space: nowrap !important;
}

.services-page .marketing-nav-link {
  white-space: nowrap !important;
  font-size: 15px !important;
  line-height: 1 !important;
}

/* Right buttons one row */
.services-page .marketing-auth-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 14px !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

/* Small theme button */
.services-page .theme-toggle {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  flex: 0 0 36px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 999px !important;
  border: 1px solid #2f8cff !important;
  background: rgba(47, 140, 255, 0.08) !important;
  color: #f8fafc !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

/* Keep header dark in both modes */
html[data-theme="light"] .services-page .marketing-nav-shell,
html[data-theme="dark"] .services-page .marketing-nav-shell {
  background: linear-gradient(135deg, rgba(13, 27, 49, 0.98), rgba(9, 18, 34, 0.98)) !important;
  border-color: rgba(69, 91, 128, 0.38) !important;
}

html[data-theme="light"] .services-page .marketing-nav-shell *,
html[data-theme="dark"] .services-page .marketing-nav-shell * {
  box-shadow: none;
}

/* Restore header text/buttons */
html[data-theme="light"] .services-page .marketing-nav-link,
html[data-theme="dark"] .services-page .marketing-nav-link {
  color: rgba(226, 232, 240, 0.62) !important;
}

html[data-theme="light"] .services-page .marketing-nav-link.is-active,
html[data-theme="dark"] .services-page .marketing-nav-link.is-active,
html[data-theme="light"] .services-page .marketing-nav-link:hover,
html[data-theme="dark"] .services-page .marketing-nav-link:hover {
  color: #f6d96b !important;
}

html[data-theme="light"] .services-page .marketing-contact-nav-btn,
html[data-theme="dark"] .services-page .marketing-contact-nav-btn {
  background: linear-gradient(135deg, #8f0f17, #dc1f2d) !important;
  color: #ffffff !important;
}

html[data-theme="light"] .services-page .marketing-auth-link,
html[data-theme="dark"] .services-page .marketing-auth-link,
html[data-theme="light"] .services-page .marketing-lang-toggle,
html[data-theme="dark"] .services-page .marketing-lang-toggle {
  background: rgba(255, 255, 255, 0.04) !important;
  color: #f8fafc !important;
  border-color: rgba(148, 163, 184, 0.28) !important;
}

/* =========================================================
   PAGE BACKGROUND
========================================================= */

html[data-theme="dark"] body {
  background:
    radial-gradient(circle at top, rgba(31, 57, 108, 0.16), transparent 28%),
    linear-gradient(180deg, #040b16 0%, #08111d 100%) !important;
  color: #f4f8ff !important;
}

html[data-theme="light"] body {
  background:
    radial-gradient(circle at 12% 0%, rgba(212, 175, 55, 0.22), transparent 30%),
    radial-gradient(circle at 85% 20%, rgba(212, 175, 55, 0.12), transparent 32%),
    linear-gradient(180deg, #f7f1e3 0%, #eee6d6 48%, #f7f1e3 100%) !important;
  color: #151515 !important;
}

html[data-theme="dark"] .services-content {
  color: #f4f8ff !important;
}

html[data-theme="light"] .services-content {
  color: #151515 !important;
}

/* =========================================================
   HERO SECTION
========================================================= */

html[data-theme="dark"] .services-hero {
  background:
    radial-gradient(circle at top right, rgba(86, 122, 204, 0.14), transparent 30%),
    linear-gradient(135deg, #0b1322 0%, #101b2d 100%) !important;
  border-color: rgba(141, 171, 224, 0.16) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32) !important;
}

html[data-theme="light"] .services-hero {
  background:
    radial-gradient(circle at 56% 68%, rgba(212, 175, 55, 0.18), transparent 44%),
    linear-gradient(135deg, #fffaf0 0%, #f4edde 100%) !important;
  border-color: rgba(21, 21, 21, 0.1) !important;
  box-shadow: 0 22px 60px rgba(80, 66, 35, 0.13) !important;
}

html[data-theme="dark"] .services-hero h1 {
  color: #f7faff !important;
}

html[data-theme="light"] .services-hero h1 {
  color: #151515 !important;
}

html[data-theme="dark"] .services-hero p {
  color: #98aabe !important;
}

html[data-theme="light"] .services-hero p {
  color: #374151 !important;
}

html[data-theme="dark"] .services-kicker {
  color: #8fb6e6 !important;
}

html[data-theme="light"] .services-kicker {
  color: #334155 !important;
}

/* =========================================================
   TOP FOUR TIER CARDS
========================================================= */

html[data-theme="dark"] .tier-tab-card {
  background: linear-gradient(180deg, #111c2d, #0b1322) !important;
  color: #ffffff !important;
  border-color: rgba(117, 149, 208, 0.14) !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.22) !important;
}

html[data-theme="light"] .tier-tab-card {
  background:
    radial-gradient(circle at top right, rgba(212, 175, 55, 0.12), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 244, 232, 0.98)) !important;
  color: #151515 !important;
  border-color: rgba(21, 21, 21, 0.12) !important;
  box-shadow: 0 16px 42px rgba(80, 66, 35, 0.14) !important;
}

html[data-theme="dark"] .tier-tab-card.popular {
  background:
    radial-gradient(circle at top right, rgba(230, 195, 95, 0.13), transparent 38%),
    linear-gradient(180deg, #142238, #0b1322) !important;
  border-color: rgba(230, 195, 95, 0.36) !important;
}

html[data-theme="light"] .tier-tab-card.popular {
  background:
    radial-gradient(circle at top right, rgba(230, 195, 95, 0.2), transparent 38%),
    linear-gradient(180deg, #fffdf6, #f6eddb) !important;
  border-color: rgba(212, 175, 55, 0.5) !important;
  box-shadow: 0 18px 50px rgba(212, 175, 55, 0.16) !important;
}

/* Card text */
html[data-theme="dark"] .tier-tab-card h2 {
  color: #ffffff !important;
}

html[data-theme="light"] .tier-tab-card h2 {
  color: #151515 !important;
}

html[data-theme="dark"] .tier-tab-card p {
  color: #9fb3cb !important;
}

html[data-theme="light"] .tier-tab-card p {
  color: #374151 !important;
}

html[data-theme="dark"] .tab-price {
  color: #879bb1 !important;
}

html[data-theme="light"] .tab-price {
  color: #4b5563 !important;
}

html[data-theme="dark"] .tab-price strong,
html[data-theme="light"] .tab-price strong {
  color: #e6c35f !important;
}

/* Tier label */
html[data-theme="dark"] .tab-tier {
  background: rgba(143, 182, 230, 0.13) !important;
  color: #a8c9f0 !important;
}

html[data-theme="light"] .tab-tier {
  background: rgba(212, 175, 55, 0.16) !important;
  color: #4b3a0a !important;
}

/* Popular label remains gold */
html[data-theme="dark"] .popular-badge,
html[data-theme="light"] .popular-badge {
  background: linear-gradient(135deg, #e6c35f, #f2dfa1) !important;
  color: #07101c !important;
}

/* Images / dark overlay inside tier cards */
html[data-theme="dark"] .tab-bg {
  opacity: 0.22 !important;
}

html[data-theme="light"] .tab-bg {
  opacity: 0.2 !important;
}

html[data-theme="dark"] .tier-tab-card.popular .tab-bg {
  opacity: 0.34 !important;
}

html[data-theme="light"] .tier-tab-card.popular .tab-bg {
  opacity: 0.22 !important;
}

html[data-theme="dark"] .tab-bg::after {
  background: linear-gradient(90deg, #111c2d, transparent) !important;
}

html[data-theme="light"] .tab-bg::after {
  background:
    linear-gradient(90deg, rgba(255, 250, 240, 0.96), rgba(255, 250, 240, 0.36)),
    linear-gradient(180deg, transparent, rgba(255, 250, 240, 0.48)) !important;
}

html[data-theme="dark"] .tier-tab-card.popular .tab-bg::after {
  background:
    linear-gradient(90deg, #142238, rgba(20, 34, 56, 0.2)),
    linear-gradient(180deg, transparent, rgba(5, 11, 20, 0.28)) !important;
}

html[data-theme="light"] .tier-tab-card.popular .tab-bg::after {
  background:
    linear-gradient(90deg, rgba(255, 250, 240, 0.96), rgba(255, 250, 240, 0.28)),
    linear-gradient(180deg, transparent, rgba(255, 250, 240, 0.42)) !important;
}

/* =========================================================
   DETAIL PANEL
========================================================= */

html[data-theme="dark"] .tier-detail-panel {
  background:
    radial-gradient(circle at top right, rgba(230, 195, 95, 0.08), transparent 28%),
    linear-gradient(135deg, #101a2b, #0b1322) !important;
  border-color: rgba(117, 149, 208, 0.14) !important;
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.24) !important;
  color: #ffffff !important;
}

html[data-theme="light"] .tier-detail-panel {
  background:
    radial-gradient(circle at top right, rgba(212, 175, 55, 0.16), transparent 30%),
    linear-gradient(135deg, #fffaf0, #f6eddb) !important;
  border-color: rgba(21, 21, 21, 0.12) !important;
  box-shadow: 0 18px 48px rgba(80, 66, 35, 0.14) !important;
  color: #151515 !important;
}

html[data-theme="dark"] .detail-title {
  color: #ffffff !important;
}

html[data-theme="light"] .detail-title {
  color: #151515 !important;
}

html[data-theme="dark"] .detail-text {
  color: #9fb3cb !important;
}

html[data-theme="light"] .detail-text {
  color: #374151 !important;
}

html[data-theme="dark"] .detail-products a {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
  color: #e8f0fb !important;
}

html[data-theme="light"] .detail-products a {
  background: rgba(255, 255, 255, 0.78) !important;
  border-color: rgba(21, 21, 21, 0.1) !important;
  color: #151515 !important;
  box-shadow: 0 10px 24px rgba(80, 66, 35, 0.08) !important;
}

html[data-theme="dark"] .detail-cta,
html[data-theme="light"] .detail-cta {
  background: linear-gradient(135deg, #e8a0d5, #d98be0) !important;
  color: #07101c !important;
}

/* =========================================================
   FOOTER LIGHT / DARK
========================================================= */

html[data-theme="dark"] .marketing-footer {
  background:
    linear-gradient(180deg, rgba(17, 30, 50, 0.98), rgba(8, 15, 28, 0.98)) !important;
  border-color: rgba(117, 149, 208, 0.14) !important;
  color: #f4f8ff !important;
}

html[data-theme="light"] .marketing-footer {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(249, 244, 232, 0.98)) !important;
  border-color: rgba(21, 21, 21, 0.1) !important;
  color: #151515 !important;
  box-shadow: 0 18px 48px rgba(80, 66, 35, 0.12) !important;
}

html[data-theme="dark"] .marketing-footer p,
html[data-theme="dark"] .marketing-footer li,
html[data-theme="dark"] .marketing-footer a {
  color: #c3d0e4 !important;
}

html[data-theme="light"] .marketing-footer p,
html[data-theme="light"] .marketing-footer li,
html[data-theme="light"] .marketing-footer a {
  color: #374151 !important;
}

html[data-theme="dark"] .footer-column-title,
html[data-theme="light"] .footer-column-title {
  color: #e6c35f !important;
}

/* =========================================================
   RESPONSIVE PROTECTION
========================================================= */

@media (max-width: 1120px) {
  .services-page {
    max-width: calc(100vw - 28px) !important;
  }
}

@media (max-width: 860px) {
  .services-page {
    width: auto !important;
    max-width: none !important;
    margin: 16px !important;
  }

  .services-page .marketing-nav-main {
    flex-wrap: wrap !important;
  }

  .services-page .marketing-nav {
    width: 100% !important;
    order: 3 !important;
    margin-left: 0 !important;
    flex-wrap: wrap !important;
  }
}

/* =========================================================
   HEADER LIGHT / DARK CONVERSION
   Put this at the very bottom of theme.css
========================================================= */

/* Header shell changes with theme */
html[data-theme="dark"] .services-page .marketing-nav-shell {
  background:
    linear-gradient(135deg, rgba(13, 27, 49, 0.98), rgba(9, 18, 34, 0.98)) !important;
  border-color: rgba(69, 91, 128, 0.38) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22) !important;
}

html[data-theme="light"] .services-page .marketing-nav-shell {
  background:
    linear-gradient(135deg, rgba(255, 250, 240, 0.96), rgba(246, 237, 219, 0.98)) !important;
  border-color: rgba(21, 21, 21, 0.12) !important;
  box-shadow: 0 18px 44px rgba(80, 66, 35, 0.14) !important;
}

/* Logo */
html[data-theme="dark"] .services-page .brand-part-rank {
  color: #f8fafc !important;
}

html[data-theme="light"] .services-page .brand-part-rank {
  color: #151515 !important;
}

html[data-theme="dark"] .services-page .brand-part-mysalon,
html[data-theme="light"] .services-page .brand-part-mysalon {
  background: linear-gradient(118deg, #f4a8c7 0%, #e8a0d5 40%, #b15cc7 88%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

/* Nav links */
html[data-theme="dark"] .services-page .marketing-nav-link {
  color: rgba(226, 232, 240, 0.62) !important;
}

html[data-theme="light"] .services-page .marketing-nav-link {
  color: rgba(21, 21, 21, 0.58) !important;
}

html[data-theme="dark"] .services-page .marketing-nav-link:hover,
html[data-theme="dark"] .services-page .marketing-nav-link.is-active,
html[data-theme="light"] .services-page .marketing-nav-link:hover,
html[data-theme="light"] .services-page .marketing-nav-link.is-active {
  color: #e8a0d5 !important;
}

/* Theme toggle button */
html[data-theme="dark"] .services-page .theme-toggle {
  background: rgba(47, 140, 255, 0.08) !important;
  border-color: #2f8cff !important;
  color: #f8fafc !important;
}

html[data-theme="light"] .services-page .theme-toggle {
  background: rgba(212, 175, 55, 0.14) !important;
  border-color: rgba(212, 175, 55, 0.5) !important;
  color: #151515 !important;
}

/* Contact Us button stays red in both modes */
html[data-theme="dark"] .services-page .marketing-contact-nav-btn,
html[data-theme="light"] .services-page .marketing-contact-nav-btn {
  background: linear-gradient(135deg, #8f0f17, #dc1f2d) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 14px 34px rgba(220, 31, 45, 0.22) !important;
}

/* Sign in + Language buttons */
html[data-theme="dark"] .services-page .marketing-auth-link,
html[data-theme="dark"] .services-page .marketing-lang-toggle {
  background: rgba(255, 255, 255, 0.04) !important;
  color: #f8fafc !important;
  border-color: rgba(148, 163, 184, 0.28) !important;
}

html[data-theme="light"] .services-page .marketing-auth-link,
html[data-theme="light"] .services-page .marketing-lang-toggle {
  background: rgba(255, 255, 255, 0.72) !important;
  color: #151515 !important;
  border-color: rgba(21, 21, 21, 0.16) !important;
  box-shadow: 0 8px 22px rgba(80, 66, 35, 0.08) !important;
}

/* Language label and caret */
html[data-theme="dark"] .services-page .marketing-lang-btn-label,
html[data-theme="dark"] .services-page .marketing-lang-btn-caret {
  color: #f8fafc !important;
}

html[data-theme="light"] .services-page .marketing-lang-btn-label,
html[data-theme="light"] .services-page .marketing-lang-btn-caret {
  color: #151515 !important;
}

/* Language dropdown menu */
html[data-theme="dark"] .services-page .marketing-lang-menu {
  background: #0d1624 !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
}

html[data-theme="light"] .services-page .marketing-lang-menu {
  background: #fffaf0 !important;
  border-color: rgba(21, 21, 21, 0.12) !important;
  box-shadow: 0 16px 40px rgba(80, 66, 35, 0.14) !important;
}

html[data-theme="dark"] .services-page .marketing-lang-option {
  color: #f8fafc !important;
}

html[data-theme="light"] .services-page .marketing-lang-option {
  color: #151515 !important;
}

html[data-theme="light"] .services-page .marketing-lang-option:hover,
html[data-theme="light"] .services-page .marketing-lang-option.is-active {
  background: rgba(212, 175, 55, 0.14) !important;
  color: #151515 !important;
}

html[data-theme="dark"] .services-page .marketing-lang-option:hover,
html[data-theme="dark"] .services-page .marketing-lang-option.is-active {
  background: rgba(212, 175, 55, 0.14) !important;
  color: #f8fafc !important;
}

/* =========================================================
   TIER PAGE EXACT LIGHT / DARK THEME FIX
   Works for tier-1.html / tier pages using .tier-page
   Put this at the very bottom of theme.css
========================================================= */

/* ---------- Tier page width: keep original layout ---------- */

.tier-page {
  width: 100% !important;
  max-width: 1120px !important;
  margin: 95px auto 48px !important;
  box-sizing: border-box !important;
}

/* Header and footer follow tier page width */
.tier-page .marketing-nav-shell,
.tier-page .marketing-footer {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

/* Keep header one row */
.tier-page .marketing-nav-shell {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: 18px !important;
}

/* Left header area */
.tier-page .marketing-nav-main {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 18px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

/* Logo fixed */
.tier-page .marketing-brand {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

/* Menu slightly tighter, one row */
.tier-page .marketing-nav {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 18px !important;
  margin-left: 4px !important;
  margin-right: auto !important;
  min-width: 0 !important;
  white-space: nowrap !important;
}

.tier-page .marketing-nav-link {
  white-space: nowrap !important;
  font-size: 15px !important;
  line-height: 1 !important;
}

/* Right action buttons one row */
.tier-page .marketing-auth-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 14px !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

/* Small theme button */
.tier-page .theme-toggle {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  flex: 0 0 36px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 999px !important;
  border: 1px solid #2f8cff !important;
  background: rgba(47, 140, 255, 0.08) !important;
  color: #f8fafc !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

/* =========================================================
   PAGE BACKGROUND
========================================================= */

html[data-theme="dark"] body {
  background:
    radial-gradient(circle at top, rgba(31, 57, 108, 0.14), transparent 28%),
    linear-gradient(180deg, #040b16 0%, #08111d 100%) !important;
  color: #edf4ff !important;
}

html[data-theme="light"] body {
  background:
    radial-gradient(circle at 12% 0%, rgba(212, 175, 55, 0.22), transparent 30%),
    radial-gradient(circle at 85% 20%, rgba(212, 175, 55, 0.12), transparent 32%),
    linear-gradient(180deg, #f7f1e3 0%, #eee6d6 48%, #f7f1e3 100%) !important;
  color: #151515 !important;
}

html[data-theme="dark"] .tier-content {
  color: #edf4ff !important;
}

html[data-theme="light"] .tier-content {
  color: #151515 !important;
}

/* =========================================================
   HEADER LIGHT / DARK
========================================================= */

html[data-theme="dark"] .tier-page .marketing-nav-shell {
  background:
    linear-gradient(180deg, #0b1322 0%, #101b2d 100%) !important;
  border: 1px solid rgba(117, 149, 208, 0.16) !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24) !important;
}

html[data-theme="light"] .tier-page .marketing-nav-shell {
  background:
    linear-gradient(135deg, rgba(255, 250, 240, 0.96), rgba(246, 237, 219, 0.98)) !important;
  border: 1px solid rgba(21, 21, 21, 0.12) !important;
  box-shadow: 0 18px 44px rgba(80, 66, 35, 0.14) !important;
}

/* Logo */
html[data-theme="dark"] .tier-page .brand-part-rank {
  color: #f5f8ff !important;
}

html[data-theme="light"] .tier-page .brand-part-rank {
  color: #151515 !important;
}

html[data-theme="dark"] .tier-page .brand-part-mysalon,
html[data-theme="light"] .tier-page .brand-part-mysalon {
  background: linear-gradient(118deg, #f4a8c7 0%, #e8a0d5 40%, #b15cc7 88%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

/* Nav links */
html[data-theme="dark"] .tier-page .marketing-nav-link {
  color: #9daabe !important;
}

html[data-theme="light"] .tier-page .marketing-nav-link {
  color: rgba(21, 21, 21, 0.58) !important;
}

html[data-theme="dark"] .tier-page .marketing-nav-link:hover,
html[data-theme="dark"] .tier-page .marketing-nav-link.is-active,
html[data-theme="light"] .tier-page .marketing-nav-link:hover,
html[data-theme="light"] .tier-page .marketing-nav-link.is-active {
  color: #e8a0d5 !important;
}

/* Contact button keeps red */
html[data-theme="dark"] .tier-page .marketing-contact-nav-btn,
html[data-theme="light"] .tier-page .marketing-contact-nav-btn {
  background: linear-gradient(135deg, #9f1118 0%, #d31b25 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 34px rgba(211, 27, 37, 0.28) !important;
}

/* Sign in + Language */
html[data-theme="dark"] .tier-page .marketing-auth-link,
html[data-theme="dark"] .tier-page .marketing-lang-toggle {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #edf4ff !important;
}

html[data-theme="light"] .tier-page .marketing-auth-link,
html[data-theme="light"] .tier-page .marketing-lang-toggle {
  background: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(21, 21, 21, 0.16) !important;
  color: #151515 !important;
  box-shadow: 0 8px 22px rgba(80, 66, 35, 0.08) !important;
}

/* Language label */
html[data-theme="dark"] .tier-page .marketing-lang-btn-label,
html[data-theme="dark"] .tier-page .marketing-lang-btn-caret {
  color: #edf4ff !important;
}

html[data-theme="light"] .tier-page .marketing-lang-btn-label,
html[data-theme="light"] .tier-page .marketing-lang-btn-caret {
  color: #151515 !important;
}

/* Theme button follows header */
html[data-theme="dark"] .tier-page .theme-toggle {
  background: rgba(47, 140, 255, 0.08) !important;
  border-color: #2f8cff !important;
  color: #f8fafc !important;
}

html[data-theme="light"] .tier-page .theme-toggle {
  background: rgba(212, 175, 55, 0.14) !important;
  border-color: rgba(212, 175, 55, 0.5) !important;
  color: #151515 !important;
}

/* =========================================================
   HERO SECTION
========================================================= */

html[data-theme="dark"] .tier-hero {
  background:
    radial-gradient(circle at top right, rgba(86, 122, 204, 0.18), transparent 26%),
    linear-gradient(180deg, #0b1322 0%, #101b2d 100%) !important;
  border-color: rgba(117, 149, 208, 0.12) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34) !important;
}

html[data-theme="light"] .tier-hero {
  background:
    radial-gradient(circle at 56% 68%, rgba(212, 175, 55, 0.18), transparent 44%),
    linear-gradient(135deg, #fffaf0 0%, #f4edde 100%) !important;
  border-color: rgba(21, 21, 21, 0.1) !important;
  box-shadow: 0 22px 60px rgba(80, 66, 35, 0.13) !important;
}

html[data-theme="dark"] .tier-hero-label {
  background: rgba(126, 164, 214, 0.12) !important;
  color: #8fb6e6 !important;
}

html[data-theme="light"] .tier-hero-label {
  background: rgba(212, 175, 55, 0.16) !important;
  color: #4b3a0a !important;
}

html[data-theme="dark"] .tier-hero h1 {
  color: #f5f8ff !important;
}

html[data-theme="light"] .tier-hero h1 {
  color: #151515 !important;
}

html[data-theme="dark"] .tier-hero p {
  color: #9db0c8 !important;
}

html[data-theme="light"] .tier-hero p {
  color: #374151 !important;
}

/* =========================================================
   SERVICE CARDS
========================================================= */

html[data-theme="dark"] .service-card {
  background:
    linear-gradient(180deg, #111a2b 0%, #17243a 100%) !important;
  border-color: rgba(117, 149, 208, 0.1) !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24) !important;
}

html[data-theme="light"] .service-card {
  background:
    radial-gradient(circle at top right, rgba(212, 175, 55, 0.12), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 244, 232, 0.98)) !important;
  border-color: rgba(21, 21, 21, 0.12) !important;
  box-shadow: 0 16px 42px rgba(80, 66, 35, 0.14) !important;
}

html[data-theme="dark"] .service-label,
html[data-theme="light"] .service-label {
  color: #e6c35f !important;
}

html[data-theme="dark"] .service-title {
  color: #f4f8ff !important;
}

html[data-theme="light"] .service-title {
  color: #151515 !important;
}

html[data-theme="dark"] .service-description,
html[data-theme="dark"] .service-feature {
  color: #9fb3cb !important;
}

html[data-theme="light"] .service-description,
html[data-theme="light"] .service-feature {
  color: #374151 !important;
}

/* Buttons */
html[data-theme="dark"] .primary-btn,
html[data-theme="light"] .primary-btn {
  background: linear-gradient(135deg, #e8a0d5 0%, #d98be0 100%) !important;
  color: #08111d !important;
  box-shadow: 0 14px 28px rgba(227, 196, 101, 0.18) !important;
}

html[data-theme="dark"] .secondary-btn {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #edf4ff !important;
}

html[data-theme="light"] .secondary-btn {
  background: rgba(255, 255, 255, 0.78) !important;
  border-color: rgba(21, 21, 21, 0.12) !important;
  color: #151515 !important;
  box-shadow: 0 10px 24px rgba(80, 66, 35, 0.08) !important;
}

/* Service image box */
html[data-theme="dark"] .service-image {
  background:
    radial-gradient(circle at top left, rgba(104, 140, 219, 0.18), transparent 30%),
    linear-gradient(135deg, #101a2c 0%, #17263f 100%) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="light"] .service-image {
  background:
    radial-gradient(circle at top left, rgba(212, 175, 55, 0.16), transparent 30%),
    linear-gradient(135deg, #fffaf0 0%, #f6eddb 100%) !important;
  border-color: rgba(21, 21, 21, 0.1) !important;
  box-shadow: 0 12px 30px rgba(80, 66, 35, 0.1) !important;
}

html[data-theme="dark"] .service-image img {
  opacity: 0.92 !important;
}

html[data-theme="light"] .service-image img {
  opacity: 0.96 !important;
}

/* =========================================================
   BOTTOM CTA
========================================================= */

html[data-theme="dark"] .tier-footer-cta {
  background:
    radial-gradient(circle at top right, rgba(230, 195, 95, 0.14), transparent 28%),
    linear-gradient(180deg, #0b1322 0%, #101b2d 100%) !important;
  border-color: rgba(230, 195, 95, 0.16) !important;
  color: #f5f8ff !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34) !important;
}

html[data-theme="light"] .tier-footer-cta {
  background:
    radial-gradient(circle at top right, rgba(212, 175, 55, 0.18), transparent 30%),
    linear-gradient(135deg, #fffaf0, #f6eddb) !important;
  border-color: rgba(212, 175, 55, 0.24) !important;
  color: #151515 !important;
  box-shadow: 0 18px 48px rgba(80, 66, 35, 0.14) !important;
}

html[data-theme="dark"] .tier-footer-cta h2 {
  color: #f5f8ff !important;
}

html[data-theme="light"] .tier-footer-cta h2 {
  color: #151515 !important;
}

html[data-theme="dark"] .tier-footer-cta p {
  color: #9db0c8 !important;
}

html[data-theme="light"] .tier-footer-cta p {
  color: #374151 !important;
}

/* =========================================================
   FOOTER LIGHT / DARK
========================================================= */

html[data-theme="dark"] .tier-page .marketing-footer {
  background:
    linear-gradient(180deg, #0b1322 0%, #101b2d 100%) !important;
  border-color: rgba(117, 149, 208, 0.16) !important;
  color: #edf4ff !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24) !important;
}

html[data-theme="light"] .tier-page .marketing-footer {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(249, 244, 232, 0.98)) !important;
  border-color: rgba(21, 21, 21, 0.1) !important;
  color: #151515 !important;
  box-shadow: 0 18px 48px rgba(80, 66, 35, 0.12) !important;
}

html[data-theme="dark"] .tier-page .footer-logo-360,
html[data-theme="dark"] .tier-page .footer-logo-media,
html[data-theme="dark"] .tier-page .footer-company-name,
html[data-theme="dark"] .tier-page .footer-column-header {
  color: #f5f8ff !important;
}

html[data-theme="light"] .tier-page .footer-logo-360,
html[data-theme="light"] .tier-page .footer-logo-media,
html[data-theme="light"] .tier-page .footer-company-name,
html[data-theme="light"] .tier-page .footer-column-header {
  color: #151515 !important;
}

html[data-theme="dark"] .tier-page .footer-logo-ai,
html[data-theme="light"] .tier-page .footer-logo-ai {
  color: #20e686 !important;
}

html[data-theme="dark"] .tier-page .footer-column-title {
  color: #c7d2e6 !important;
}

html[data-theme="light"] .tier-page .footer-column-title {
  color: #e8a0d5 !important;
}

html[data-theme="dark"] .tier-page .footer-address,
html[data-theme="dark"] .tier-page .footer-link,
html[data-theme="dark"] .tier-page .footer-copyright {
  color: #8d9aad !important;
}

html[data-theme="light"] .tier-page .footer-address,
html[data-theme="light"] .tier-page .footer-link,
html[data-theme="light"] .tier-page .footer-copyright {
  color: #374151 !important;
}

html[data-theme="dark"] .tier-page .footer-link:hover,
html[data-theme="light"] .tier-page .footer-link:hover {
  color: #e6c35f !important;
}

html[data-theme="dark"] .tier-page .marketing-footer-bottom {
  border-top-color: rgba(117, 149, 208, 0.22) !important;
}

html[data-theme="light"] .tier-page .marketing-footer-bottom {
  border-top-color: rgba(21, 21, 21, 0.1) !important;
}

/* =========================================================
   LANGUAGE DROPDOWN
========================================================= */

html[data-theme="dark"] .tier-page .marketing-lang-menu {
  background: #0d1624 !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
}

html[data-theme="light"] .tier-page .marketing-lang-menu {
  background: #fffaf0 !important;
  border-color: rgba(21, 21, 21, 0.12) !important;
  box-shadow: 0 16px 40px rgba(80, 66, 35, 0.14) !important;
}

html[data-theme="dark"] .tier-page .marketing-lang-option {
  color: #f8fafc !important;
}

html[data-theme="light"] .tier-page .marketing-lang-option {
  color: #151515 !important;
}

/* =========================================================
   RESPONSIVE PROTECTION
========================================================= */

@media (max-width: 1100px) {
  .tier-page {
    width: auto !important;
    max-width: none !important;
    margin: 16px !important;
  }

  .tier-page .marketing-nav-shell {
    flex-wrap: wrap !important;
  }

  .tier-page .marketing-nav-main {
    width: 100% !important;
    flex-wrap: wrap !important;
  }

  .tier-page .marketing-nav {
    width: 100% !important;
    order: 3 !important;
    margin-left: 0 !important;
    flex-wrap: wrap !important;
  }

  .tier-page .marketing-auth-actions {
    margin-left: auto !important;
  }
}

@media (max-width: 768px) {
  .tier-page .theme-toggle {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    flex-basis: 32px !important;
    font-size: 14px !important;
  }
}

/* =========================================================
   PRODUCT DETAIL PAGE LIGHT / DARK THEME FIX
   Works for pages using .product-page
   Put this at the very bottom of theme.css
========================================================= */

/* ---------- Product page width ---------- */

.product-page {
  width: 100% !important;
  max-width: 1120px !important;
  margin: 24px auto 48px !important;
  box-sizing: border-box !important;
}

.product-page .marketing-nav-shell,
.product-page .marketing-footer {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

/* ---------- Header layout ---------- */

.product-page .marketing-nav-shell {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  gap: 12px !important;
  overflow: visible !important;
}

.product-page .marketing-nav-main {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  gap: 20px !important;
}

.product-page .marketing-brand {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

.product-page .marketing-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  gap: 13px !important;
}

.product-page .marketing-nav-link {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

.product-page .marketing-auth-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
  gap: 12px !important;
}

.product-page .theme-toggle {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  flex: 0 0 36px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 999px !important;
  border: 1px solid #2f8cff !important;
  background: rgba(47, 140, 255, 0.08) !important;
  color: #f8fafc !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

/* =========================================================
   PAGE BACKGROUND
========================================================= */

html[data-theme="dark"] body {
  background:
    radial-gradient(circle at top, rgba(31, 57, 108, 0.14), transparent 28%),
    linear-gradient(180deg, #040b16 0%, #08111d 100%) !important;
  color: #edf4ff !important;
}

html[data-theme="light"] body {
  background:
    radial-gradient(circle at 12% 0%, rgba(212, 175, 55, 0.22), transparent 30%),
    radial-gradient(circle at 85% 20%, rgba(212, 175, 55, 0.12), transparent 32%),
    linear-gradient(180deg, #f7f1e3 0%, #eee6d6 48%, #f7f1e3 100%) !important;
  color: #151515 !important;
}

/* =========================================================
   HEADER LIGHT / DARK
========================================================= */

html[data-theme="dark"] .product-page .marketing-nav-shell {
  background: linear-gradient(180deg, #0b1322 0%, #101b2d 100%) !important;
  border: 1px solid rgba(117, 149, 208, 0.16) !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24) !important;
}

html[data-theme="light"] .product-page .marketing-nav-shell {
  background: linear-gradient(135deg, rgba(255, 250, 240, 0.96), rgba(246, 237, 219, 0.98)) !important;
  border: 1px solid rgba(21, 21, 21, 0.12) !important;
  box-shadow: 0 18px 44px rgba(80, 66, 35, 0.14) !important;
}

html[data-theme="dark"] .product-page .brand-part-rank {
  color: #f5f8ff !important;
}

html[data-theme="light"] .product-page .brand-part-rank {
  color: #151515 !important;
}

html[data-theme="dark"] .product-page .brand-part-mysalon,
html[data-theme="light"] .product-page .brand-part-mysalon {
  background: linear-gradient(118deg, #f4a8c7 0%, #e8a0d5 40%, #b15cc7 88%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

html[data-theme="dark"] .product-page .marketing-nav-link {
  color: #9daabe !important;
}

html[data-theme="light"] .product-page .marketing-nav-link {
  color: rgba(21, 21, 21, 0.58) !important;
}

html[data-theme="dark"] .product-page .marketing-nav-link:hover,
html[data-theme="dark"] .product-page .marketing-nav-link.is-active,
html[data-theme="light"] .product-page .marketing-nav-link:hover,
html[data-theme="light"] .product-page .marketing-nav-link.is-active {
  color: #e8a0d5 !important;
}

html[data-theme="dark"] .product-page .marketing-contact-nav-btn,
html[data-theme="light"] .product-page .marketing-contact-nav-btn {
  background: linear-gradient(135deg, #9f1118 0%, #d31b25 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 34px rgba(211, 27, 37, 0.28) !important;
}

html[data-theme="dark"] .product-page .marketing-auth-link,
html[data-theme="dark"] .product-page .marketing-lang-toggle {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #edf4ff !important;
}

html[data-theme="light"] .product-page .marketing-auth-link,
html[data-theme="light"] .product-page .marketing-lang-toggle {
  background: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(21, 21, 21, 0.16) !important;
  color: #151515 !important;
  box-shadow: 0 8px 22px rgba(80, 66, 35, 0.08) !important;
}

html[data-theme="dark"] .product-page .marketing-lang-btn-label,
html[data-theme="dark"] .product-page .marketing-lang-btn-caret {
  color: #edf4ff !important;
}

html[data-theme="light"] .product-page .marketing-lang-btn-label,
html[data-theme="light"] .product-page .marketing-lang-btn-caret {
  color: #151515 !important;
}

html[data-theme="dark"] .product-page .theme-toggle {
  background: rgba(47, 140, 255, 0.08) !important;
  border-color: #2f8cff !important;
  color: #f8fafc !important;
}

html[data-theme="light"] .product-page .theme-toggle {
  background: rgba(212, 175, 55, 0.14) !important;
  border-color: rgba(212, 175, 55, 0.5) !important;
  color: #151515 !important;
}

/* =========================================================
   PRODUCT MAIN SHELL
========================================================= */

html[data-theme="dark"] .product-shell {
  background: linear-gradient(180deg, #111a2b 0%, #17243a 100%) !important;
  border-color: rgba(117, 149, 208, 0.1) !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24) !important;
  color: #edf4ff !important;
}

html[data-theme="light"] .product-shell {
  background:
    radial-gradient(circle at top right, rgba(212, 175, 55, 0.12), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 244, 232, 0.98)) !important;
  border: 1px solid rgba(21, 21, 21, 0.12) !important;
  box-shadow: 0 16px 42px rgba(80, 66, 35, 0.14) !important;
  color: #151515 !important;
}

/* =========================================================
   HERO
========================================================= */

html[data-theme="dark"] .hero-label {
  background: rgba(126, 164, 214, 0.12) !important;
  color: #8fb6e6 !important;
}

html[data-theme="light"] .hero-label {
  background: rgba(212, 175, 55, 0.16) !important;
  color: #4b3a0a !important;
}

html[data-theme="dark"] .hero-title {
  color: #f5f8ff !important;
}

html[data-theme="light"] .hero-title {
  color: #151515 !important;
}

html[data-theme="dark"] .hero-description {
  color: #9db0c8 !important;
}

html[data-theme="light"] .hero-description {
  color: #374151 !important;
}

html[data-theme="dark"] .hero-description strong {
  color: #edf4ff !important;
}

html[data-theme="light"] .hero-description strong {
  color: #151515 !important;
}

html[data-theme="dark"] .hero-image {
  background:
    radial-gradient(circle at top left, rgba(104, 140, 219, 0.18), transparent 30%),
    linear-gradient(135deg, #101a2c 0%, #17263f 100%) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="light"] .hero-image {
  background:
    radial-gradient(circle at top left, rgba(212, 175, 55, 0.16), transparent 30%),
    linear-gradient(135deg, #fffaf0 0%, #f6eddb 100%) !important;
  border-color: rgba(21, 21, 21, 0.1) !important;
  box-shadow: 0 12px 30px rgba(80, 66, 35, 0.1) !important;
}

/* =========================================================
   FEATURE + BOTTOM CARDS
========================================================= */

html[data-theme="dark"] .feature-item,
html[data-theme="dark"] .bottom-card {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="light"] .feature-item,
html[data-theme="light"] .bottom-card {
  background: rgba(255, 255, 255, 0.78) !important;
  border-color: rgba(21, 21, 21, 0.1) !important;
  box-shadow: 0 10px 24px rgba(80, 66, 35, 0.08) !important;
}

html[data-theme="dark"] .feature-title,
html[data-theme="dark"] .bottom-title {
  color: #f4f8ff !important;
}

html[data-theme="light"] .feature-title,
html[data-theme="light"] .bottom-title {
  color: #151515 !important;
}

html[data-theme="dark"] .feature-text,
html[data-theme="dark"] .bottom-text {
  color: #9fb3cb !important;
}

html[data-theme="light"] .feature-text,
html[data-theme="light"] .bottom-text {
  color: #374151 !important;
}

/* =========================================================
   PRICING
========================================================= */

html[data-theme="dark"] .pricing-heading {
  color: #f5f8ff !important;
}

html[data-theme="light"] .pricing-heading {
  color: #151515 !important;
}

html[data-theme="dark"] .plan-card {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="light"] .plan-card {
  background: rgba(255, 255, 255, 0.82) !important;
  border-color: rgba(21, 21, 21, 0.1) !important;
  box-shadow: 0 10px 24px rgba(80, 66, 35, 0.08) !important;
}

html[data-theme="dark"] .plan-card.featured {
  background:
    radial-gradient(circle at top right, rgba(230, 195, 95, 0.14), transparent 28%),
    linear-gradient(180deg, #0b1322 0%, #101b2d 100%) !important;
  border-color: rgba(230, 195, 95, 0.16) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34) !important;
}

html[data-theme="light"] .plan-card.featured {
  background:
    radial-gradient(circle at top right, rgba(212, 175, 55, 0.18), transparent 30%),
    linear-gradient(135deg, #fffaf0, #f6eddb) !important;
  border-color: rgba(212, 175, 55, 0.28) !important;
  box-shadow: 0 18px 48px rgba(80, 66, 35, 0.14) !important;
}

html[data-theme="dark"] .plan-label,
html[data-theme="light"] .plan-label,
html[data-theme="dark"] .plan-save,
html[data-theme="light"] .plan-save {
  color: #e6c35f !important;
}

html[data-theme="dark"] .plan-save {
  background: rgba(230, 195, 95, 0.12) !important;
}

html[data-theme="light"] .plan-save {
  background: rgba(212, 175, 55, 0.16) !important;
}

html[data-theme="dark"] .plan-price-main {
  color: #f5f8ff !important;
}

html[data-theme="light"] .plan-price-main {
  color: #151515 !important;
}

html[data-theme="dark"] .plan-price-sub,
html[data-theme="dark"] .plan-description,
html[data-theme="dark"] .plan-point,
html[data-theme="dark"] .setup-note {
  color: #9fb3cb !important;
}

html[data-theme="light"] .plan-price-sub,
html[data-theme="light"] .plan-description,
html[data-theme="light"] .plan-point,
html[data-theme="light"] .setup-note {
  color: #374151 !important;
}

html[data-theme="dark"] .popular-badge,
html[data-theme="light"] .popular-badge {
  background: linear-gradient(135deg, #e8a0d5 0%, #d98be0 100%) !important;
  color: #08111d !important;
}

/* =========================================================
   PRODUCT BUTTONS
========================================================= */

html[data-theme="dark"] .primary-btn,
html[data-theme="light"] .primary-btn {
  background: linear-gradient(135deg, #e8a0d5 0%, #d98be0 100%) !important;
  color: #08111d !important;
  box-shadow: 0 14px 28px rgba(227, 196, 101, 0.18) !important;
}

html[data-theme="dark"] .secondary-btn {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #edf4ff !important;
}

html[data-theme="light"] .secondary-btn {
  background: rgba(255, 255, 255, 0.78) !important;
  border-color: rgba(21, 21, 21, 0.12) !important;
  color: #151515 !important;
  box-shadow: 0 10px 24px rgba(80, 66, 35, 0.08) !important;
}

/* =========================================================
   FOOTER LIGHT / DARK
========================================================= */

html[data-theme="dark"] .product-page .marketing-footer {
  background: linear-gradient(180deg, #0b1322 0%, #101b2d 100%) !important;
  border-color: rgba(117, 149, 208, 0.16) !important;
  color: #edf4ff !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24) !important;
}

html[data-theme="light"] .product-page .marketing-footer {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(249, 244, 232, 0.98)) !important;
  border-color: rgba(21, 21, 21, 0.1) !important;
  color: #151515 !important;
  box-shadow: 0 18px 48px rgba(80, 66, 35, 0.12) !important;
}

html[data-theme="dark"] .product-page .footer-logo-360,
html[data-theme="dark"] .product-page .footer-logo-media,
html[data-theme="dark"] .product-page .footer-company-name,
html[data-theme="dark"] .product-page .footer-column-header {
  color: #f5f8ff !important;
}

html[data-theme="light"] .product-page .footer-logo-360,
html[data-theme="light"] .product-page .footer-logo-media,
html[data-theme="light"] .product-page .footer-company-name,
html[data-theme="light"] .product-page .footer-column-header {
  color: #151515 !important;
}

html[data-theme="dark"] .product-page .footer-logo-ai,
html[data-theme="light"] .product-page .footer-logo-ai {
  color: #20e686 !important;
}

html[data-theme="dark"] .product-page .footer-column-title {
  color: #c7d2e6 !important;
}

html[data-theme="light"] .product-page .footer-column-title {
  color: #e8a0d5 !important;
}

html[data-theme="dark"] .product-page .footer-address,
html[data-theme="dark"] .product-page .footer-link,
html[data-theme="dark"] .product-page .footer-copyright {
  color: #8d9aad !important;
}

html[data-theme="light"] .product-page .footer-address,
html[data-theme="light"] .product-page .footer-link,
html[data-theme="light"] .product-page .footer-copyright {
  color: #374151 !important;
}

html[data-theme="dark"] .product-page .footer-link:hover,
html[data-theme="light"] .product-page .footer-link:hover {
  color: #e6c35f !important;
}

/* =========================================================
   LANGUAGE DROPDOWN
========================================================= */

html[data-theme="dark"] .product-page .marketing-lang-menu {
  background: #0d1624 !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
}

html[data-theme="light"] .product-page .marketing-lang-menu {
  background: #fffaf0 !important;
  border-color: rgba(21, 21, 21, 0.12) !important;
  box-shadow: 0 16px 40px rgba(80, 66, 35, 0.14) !important;
}

html[data-theme="dark"] .product-page .marketing-lang-option {
  color: #f8fafc !important;
}

html[data-theme="light"] .product-page .marketing-lang-option {
  color: #151515 !important;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {
  .product-page {
    width: auto !important;
    max-width: none !important;
    margin: 16px !important;
  }

  .product-page .marketing-nav-shell,
  .product-page .marketing-nav-main,
  .product-page .marketing-nav,
  .product-page .marketing-auth-actions {
    flex-wrap: wrap !important;
    white-space: normal !important;
  }

  .product-page .theme-toggle {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    flex-basis: 32px !important;
    font-size: 14px !important;
  }
}

/* =========================================================
   SERVICE DETAIL PAGE LIGHT / DARK THEME FIX
   Works for pages using .service-page
   Put this at the very bottom of theme.css
========================================================= */

/* ---------- Service page width ---------- */

.service-page {
  width: 100% !important;
  max-width: 1120px !important;
  margin: 24px auto 48px !important;
  box-sizing: border-box !important;
}

.service-page .marketing-nav-shell,
.service-page .marketing-footer {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

/* ---------- Header layout ---------- */

.service-page .marketing-nav-shell {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  gap: 12px !important;
  overflow: visible !important;
}

.service-page .marketing-nav-main {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  gap: 20px !important;
}

.service-page .marketing-brand {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

.service-page .marketing-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  gap: 13px !important;
}

.service-page .marketing-nav-link {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

.service-page .marketing-auth-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
  gap: 12px !important;
}

.service-page .theme-toggle {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  flex: 0 0 36px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 999px !important;
  border: 1px solid #2f8cff !important;
  background: rgba(47, 140, 255, 0.08) !important;
  color: #f8fafc !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

/* =========================================================
   PAGE BACKGROUND
========================================================= */

html[data-theme="dark"] body {
  background:
    radial-gradient(circle at top, rgba(31, 57, 108, 0.14), transparent 28%),
    linear-gradient(180deg, #040b16 0%, #08111d 100%) !important;
  color: #edf4ff !important;
}

html[data-theme="light"] body {
  background:
    radial-gradient(circle at 12% 0%, rgba(212, 175, 55, 0.22), transparent 30%),
    radial-gradient(circle at 85% 20%, rgba(212, 175, 55, 0.12), transparent 32%),
    linear-gradient(180deg, #f7f1e3 0%, #eee6d6 48%, #f7f1e3 100%) !important;
  color: #151515 !important;
}

/* =========================================================
   HEADER LIGHT / DARK
========================================================= */

html[data-theme="dark"] .service-page .marketing-nav-shell {
  background: linear-gradient(180deg, #0b1322 0%, #101b2d 100%) !important;
  border: 1px solid rgba(117, 149, 208, 0.16) !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24) !important;
}

html[data-theme="light"] .service-page .marketing-nav-shell {
  background: linear-gradient(135deg, rgba(255, 250, 240, 0.96), rgba(246, 237, 219, 0.98)) !important;
  border: 1px solid rgba(21, 21, 21, 0.12) !important;
  box-shadow: 0 18px 44px rgba(80, 66, 35, 0.14) !important;
}

html[data-theme="dark"] .service-page .brand-part-rank {
  color: #f5f8ff !important;
}

html[data-theme="light"] .service-page .brand-part-rank {
  color: #151515 !important;
}

html[data-theme="dark"] .service-page .brand-part-mysalon,
html[data-theme="light"] .service-page .brand-part-mysalon {
  background: linear-gradient(135deg, #fff0b6 0%, #e6c35f 42%, #cfa83d 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  text-shadow: 0 0 18px rgba(230, 195, 95, 0.18) !important;
}

html[data-theme="dark"] .service-page .marketing-nav-link {
  color: #9daabe !important;
}

html[data-theme="light"] .service-page .marketing-nav-link {
  color: rgba(21, 21, 21, 0.58) !important;
}

html[data-theme="dark"] .service-page .marketing-nav-link:hover,
html[data-theme="dark"] .service-page .marketing-nav-link.is-active,
html[data-theme="light"] .service-page .marketing-nav-link:hover,
html[data-theme="light"] .service-page .marketing-nav-link.is-active {
  color: #e8a0d5 !important;
}

html[data-theme="dark"] .service-page .marketing-contact-nav-btn,
html[data-theme="light"] .service-page .marketing-contact-nav-btn {
  background: linear-gradient(135deg, #9f1118 0%, #d31b25 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 34px rgba(211, 27, 37, 0.28) !important;
}

html[data-theme="dark"] .service-page .marketing-auth-link,
html[data-theme="dark"] .service-page .marketing-lang-toggle {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #edf4ff !important;
}

html[data-theme="light"] .service-page .marketing-auth-link,
html[data-theme="light"] .service-page .marketing-lang-toggle {
  background: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(21, 21, 21, 0.16) !important;
  color: #151515 !important;
  box-shadow: 0 8px 22px rgba(80, 66, 35, 0.08) !important;
}

html[data-theme="dark"] .service-page .theme-toggle {
  background: rgba(47, 140, 255, 0.08) !important;
  border-color: #2f8cff !important;
  color: #f8fafc !important;
}

html[data-theme="light"] .service-page .theme-toggle {
  background: rgba(212, 175, 55, 0.14) !important;
  border-color: rgba(212, 175, 55, 0.5) !important;
  color: #151515 !important;
}

/* =========================================================
   HERO SECTION
========================================================= */

html[data-theme="dark"] .hero-section {
  background:
    radial-gradient(circle at top right, rgba(86, 122, 204, 0.18), transparent 26%),
    linear-gradient(180deg, #0b1322 0%, #101b2d 100%) !important;
  border-color: rgba(117, 149, 208, 0.12) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34) !important;
}

html[data-theme="light"] .hero-section {
  background:
    radial-gradient(circle at 56% 68%, rgba(212, 175, 55, 0.18), transparent 44%),
    linear-gradient(135deg, #fffaf0 0%, #f4edde 100%) !important;
  border-color: rgba(21, 21, 21, 0.1) !important;
  box-shadow: 0 22px 60px rgba(80, 66, 35, 0.13) !important;
}

html[data-theme="dark"] .hero-badge {
  background: rgba(126, 164, 214, 0.12) !important;
  color: #8fb6e6 !important;
}

html[data-theme="light"] .hero-badge {
  background: rgba(212, 175, 55, 0.16) !important;
  color: #4b3a0a !important;
}

html[data-theme="dark"] .hero-title {
  color: #f5f8ff !important;
}

html[data-theme="light"] .hero-title {
  color: #151515 !important;
}

html[data-theme="dark"] .hero-description {
  color: #9db0c8 !important;
}

html[data-theme="light"] .hero-description {
  color: #374151 !important;
}

html[data-theme="dark"] .hero-image-card {
  background: linear-gradient(180deg, #111a2b 0%, #17243a 100%) !important;
  border-color: rgba(117, 149, 208, 0.1) !important;
}

html[data-theme="light"] .hero-image-card {
  background:
    radial-gradient(circle at top left, rgba(212, 175, 55, 0.16), transparent 30%),
    linear-gradient(135deg, #fffaf0 0%, #f6eddb 100%) !important;
  border-color: rgba(21, 21, 21, 0.1) !important;
  box-shadow: 0 12px 30px rgba(80, 66, 35, 0.1) !important;
}

html[data-theme="dark"] .image-note {
  color: #8d9aad !important;
}

html[data-theme="light"] .image-note {
  color: #6b7280 !important;
}

/* =========================================================
   CONTENT SECTIONS
========================================================= */

html[data-theme="dark"] .content-section {
  background: linear-gradient(180deg, #111a2b 0%, #17243a 100%) !important;
  border-color: rgba(117, 149, 208, 0.1) !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24) !important;
}

html[data-theme="light"] .content-section {
  background:
    radial-gradient(circle at top right, rgba(212, 175, 55, 0.12), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 244, 232, 0.98)) !important;
  border-color: rgba(21, 21, 21, 0.12) !important;
  box-shadow: 0 16px 42px rgba(80, 66, 35, 0.14) !important;
}

html[data-theme="dark"] .section-label,
html[data-theme="light"] .section-label,
html[data-theme="dark"] .feature-number,
html[data-theme="light"] .feature-number {
  color: #e6c35f !important;
}

html[data-theme="dark"] .section-title,
html[data-theme="dark"] .feature-title,
html[data-theme="dark"] .result-title {
  color: #f4f8ff !important;
}

html[data-theme="light"] .section-title,
html[data-theme="light"] .feature-title,
html[data-theme="light"] .result-title {
  color: #151515 !important;
}

html[data-theme="dark"] .section-description,
html[data-theme="dark"] .feature-description,
html[data-theme="dark"] .result-description {
  color: #9fb3cb !important;
}

html[data-theme="light"] .section-description,
html[data-theme="light"] .feature-description,
html[data-theme="light"] .result-description {
  color: #374151 !important;
}

html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .result-card,
html[data-theme="dark"] .pricing-card {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="light"] .feature-card,
html[data-theme="light"] .result-card,
html[data-theme="light"] .pricing-card {
  background: rgba(255, 255, 255, 0.78) !important;
  border-color: rgba(21, 21, 21, 0.1) !important;
  box-shadow: 0 10px 24px rgba(80, 66, 35, 0.08) !important;
}

/* =========================================================
   PRICING + CTA
========================================================= */

html[data-theme="dark"] .pricing-section,
html[data-theme="dark"] .cta-section {
  background:
    radial-gradient(circle at top right, rgba(230, 195, 95, 0.14), transparent 28%),
    linear-gradient(180deg, #0b1322 0%, #101b2d 100%) !important;
  border-color: rgba(230, 195, 95, 0.16) !important;
  color: #f5f8ff !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34) !important;
}

html[data-theme="light"] .pricing-section,
html[data-theme="light"] .cta-section {
  background:
    radial-gradient(circle at top right, rgba(212, 175, 55, 0.18), transparent 30%),
    linear-gradient(135deg, #fffaf0, #f6eddb) !important;
  border-color: rgba(212, 175, 55, 0.24) !important;
  color: #151515 !important;
  box-shadow: 0 18px 48px rgba(80, 66, 35, 0.14) !important;
}

html[data-theme="dark"] .pricing-price,
html[data-theme="dark"] .cta-title {
  color: #f5f8ff !important;
}

html[data-theme="light"] .pricing-price,
html[data-theme="light"] .cta-title {
  color: #151515 !important;
}

html[data-theme="dark"] .pricing-note,
html[data-theme="dark"] .pricing-item,
html[data-theme="dark"] .cta-description {
  color: #9fb3cb !important;
}

html[data-theme="light"] .pricing-note,
html[data-theme="light"] .pricing-item,
html[data-theme="light"] .cta-description {
  color: #374151 !important;
}

/* =========================================================
   BUTTONS
========================================================= */

html[data-theme="dark"] .primary-btn,
html[data-theme="light"] .primary-btn,
html[data-theme="dark"] .pricing-btn,
html[data-theme="light"] .pricing-btn,
html[data-theme="dark"] .cta-btn,
html[data-theme="light"] .cta-btn {
  background: linear-gradient(135deg, #e8a0d5 0%, #d98be0 100%) !important;
  color: #08111d !important;
  box-shadow: 0 14px 28px rgba(227, 196, 101, 0.18) !important;
}

html[data-theme="dark"] .secondary-btn,
html[data-theme="dark"] .outline-btn {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #edf4ff !important;
}

html[data-theme="light"] .secondary-btn,
html[data-theme="light"] .outline-btn {
  background: rgba(255, 255, 255, 0.78) !important;
  border-color: rgba(21, 21, 21, 0.12) !important;
  color: #151515 !important;
  box-shadow: 0 10px 24px rgba(80, 66, 35, 0.08) !important;
}

/* =========================================================
   FOOTER LIGHT / DARK
========================================================= */

html[data-theme="dark"] .service-page .marketing-footer {
  background: linear-gradient(180deg, #0b1322 0%, #101b2d 100%) !important;
  border-color: rgba(117, 149, 208, 0.16) !important;
  color: #edf4ff !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24) !important;
}

html[data-theme="light"] .service-page .marketing-footer {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(249, 244, 232, 0.98)) !important;
  border-color: rgba(21, 21, 21, 0.1) !important;
  color: #151515 !important;
  box-shadow: 0 18px 48px rgba(80, 66, 35, 0.12) !important;
}

html[data-theme="dark"] .service-page .footer-logo-360,
html[data-theme="dark"] .service-page .footer-logo-media,
html[data-theme="dark"] .service-page .footer-company-name,
html[data-theme="dark"] .service-page .footer-column-header {
  color: #f5f8ff !important;
}

html[data-theme="light"] .service-page .footer-logo-360,
html[data-theme="light"] .service-page .footer-logo-media,
html[data-theme="light"] .service-page .footer-company-name,
html[data-theme="light"] .service-page .footer-column-header {
  color: #151515 !important;
}

html[data-theme="dark"] .service-page .footer-logo-ai,
html[data-theme="light"] .service-page .footer-logo-ai {
  color: #20e686 !important;
}

html[data-theme="dark"] .service-page .footer-column-title {
  color: #c7d2e6 !important;
}

html[data-theme="light"] .service-page .footer-column-title {
  color: #e8a0d5 !important;
}

html[data-theme="dark"] .service-page .footer-address,
html[data-theme="dark"] .service-page .footer-link,
html[data-theme="dark"] .service-page .footer-copyright {
  color: #8d9aad !important;
}

html[data-theme="light"] .service-page .footer-address,
html[data-theme="light"] .service-page .footer-link,
html[data-theme="light"] .service-page .footer-copyright {
  color: #374151 !important;
}

html[data-theme="dark"] .service-page .footer-link:hover,
html[data-theme="light"] .service-page .footer-link:hover {
  color: #e6c35f !important;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 768px) {
  .service-page {
    width: auto !important;
    max-width: none !important;
    margin: 16px !important;
  }

  .service-page .marketing-nav-shell,
  .service-page .marketing-nav-main,
  .service-page .marketing-nav,
  .service-page .marketing-auth-actions {
    flex-wrap: wrap !important;
    white-space: normal !important;
  }

  .service-page .theme-toggle {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    flex-basis: 32px !important;
    font-size: 14px !important;
  }
}
/* =========================================================
   APP.JS MARKETING HEADER FIX
   Fix theme button overlap + keep header one row
========================================================= */

.marketing-nav-shell {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: 14px !important;
  overflow: visible !important;
}

.marketing-nav-main {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 18px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.marketing-brand {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

.marketing-nav {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 14px !important;
  white-space: nowrap !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.marketing-nav-link {
  white-space: nowrap !important;
  flex: 0 0 auto !important;
  font-size: 14px !important;
}

.marketing-auth-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
}

.marketing-auth-actions .theme-toggle {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  flex: 0 0 34px !important;

  padding: 0 !important;
  margin: 0 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 999px !important;
  border: 1px solid #2f8cff !important;
  background: rgba(47, 140, 255, 0.08) !important;
  color: #f8fafc !important;

  font-size: 14px !important;
  line-height: 1 !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

.marketing-auth-actions .theme-toggle span {
  color: inherit !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html[data-theme="light"] .marketing-auth-actions .theme-toggle {
  background: rgba(212, 175, 55, 0.14) !important;
  border-color: rgba(212, 175, 55, 0.5) !important;
  color: #151515 !important;
}

html[data-theme="dark"] .marketing-auth-actions .theme-toggle {
  background: rgba(47, 140, 255, 0.08) !important;
  border-color: #2f8cff !important;
  color: #f8fafc !important;
}

/* If the header is still too crowded, make nav slightly tighter */
@media (min-width: 901px) {
  .marketing-nav {
    gap: 12px !important;
  }

  .marketing-auth-actions {
    gap: 9px !important;
  }

  .marketing-nav-link {
    font-size: 13.5px !important;
  }
}

/* Mobile protection */
@media (max-width: 900px) {
  .marketing-nav-shell {
    flex-wrap: wrap !important;
  }

  .marketing-nav-main {
    width: 100% !important;
    flex-wrap: wrap !important;
  }

  .marketing-nav {
    width: 100% !important;
    flex-wrap: wrap !important;
  }

  .marketing-auth-actions {
    margin-left: auto !important;
  }
}

/* =========================================================
   APP.JS HOMEPAGE + MARKETING PAGES LIGHT / DARK FIX
   For app.js pages: overview, price, about, legal, leaderboard, analysis
   Put at the very bottom of theme.css
========================================================= */

/* ---------- Global app.js marketing page shell ---------- */

html[data-theme="dark"] .marketing-page {
  color: #edf4ff !important;
}

html[data-theme="light"] .marketing-page {
  color: #151515 !important;
}

/* ---------- Homepage: hero section ---------- */

html[data-theme="dark"] .marketing-page-overview .marketing-hero-section,
html[data-theme="dark"] .marketing-page-overview .marketing-hero-section.card {
  background:
    radial-gradient(circle at top right, rgba(86, 122, 204, 0.18), transparent 28%),
    linear-gradient(180deg, #0b1322 0%, #101b2d 100%) !important;
  border-color: rgba(117, 149, 208, 0.14) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34) !important;
  color: #f5f8ff !important;
}

html[data-theme="light"] .marketing-page-overview .marketing-hero-section,
html[data-theme="light"] .marketing-page-overview .marketing-hero-section.card {
  background:
    radial-gradient(circle at 56% 68%, rgba(212, 175, 55, 0.18), transparent 44%),
    linear-gradient(135deg, #fffaf0 0%, #f4edde 100%) !important;
  border-color: rgba(21, 21, 21, 0.1) !important;
  box-shadow: 0 22px 60px rgba(80, 66, 35, 0.13) !important;
  color: #151515 !important;
}

/* Homepage title */
html[data-theme="dark"] .marketing-page-overview .marketing-title-hero-brief,
html[data-theme="dark"] .marketing-page-overview .marketing-hero-line {
  color: #f5f8ff !important;
}

html[data-theme="light"] .marketing-page-overview .marketing-title-hero-brief,
html[data-theme="light"] .marketing-page-overview .marketing-hero-line {
  color: #151515 !important;
}

/* Keep Google Maps / gold accents gold */
html[data-theme="dark"] .marketing-page-overview .marketing-hero-line--maps,
html[data-theme="light"] .marketing-page-overview .marketing-hero-line--maps,
html[data-theme="dark"] .marketing-section-kicker,
html[data-theme="light"] .marketing-section-kicker {
  color: #e8a0d5 !important;
}

html[data-theme="dark"] .marketing-page-overview .marketing-hero-urgency,
html[data-theme="dark"] .marketing-page-overview .marketing-trust-title,
html[data-theme="dark"] .marketing-page-overview .marketing-trust-item {
  color: #9fb3cb !important;
}

html[data-theme="light"] .marketing-page-overview .marketing-hero-urgency,
html[data-theme="light"] .marketing-page-overview .marketing-trust-title,
html[data-theme="light"] .marketing-page-overview .marketing-trust-item {
  color: #374151 !important;
}

/* Rating row */
html[data-theme="dark"] .marketing-rating-row,
html[data-theme="light"] .marketing-rating-row {
  background: rgba(212, 175, 55, 0.12) !important;
  border-color: rgba(212, 175, 55, 0.22) !important;
}

html[data-theme="dark"] .marketing-rating-score,
html[data-theme="dark"] .marketing-rating-stars,
html[data-theme="light"] .marketing-rating-score,
html[data-theme="light"] .marketing-rating-stars {
  color: #e8a0d5 !important;
}

html[data-theme="dark"] .marketing-rating-caption {
  color: #cbd5e1 !important;
}

html[data-theme="light"] .marketing-rating-caption {
  color: #374151 !important;
}

/* ---------- Homepage brief form ---------- */

html[data-theme="dark"] .marketing-hero-brief-form {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="light"] .marketing-hero-brief-form {
  background: rgba(255, 255, 255, 0.78) !important;
  border-color: rgba(21, 21, 21, 0.1) !important;
  box-shadow: 0 10px 24px rgba(80, 66, 35, 0.08) !important;
}

html[data-theme="dark"] .marketing-hero-brief-label,
html[data-theme="dark"] .marketing-hero-brief-consent,
html[data-theme="dark"] .marketing-hero-brief-consent-note {
  color: #c3d0e4 !important;
}

html[data-theme="light"] .marketing-hero-brief-label,
html[data-theme="light"] .marketing-hero-brief-consent,
html[data-theme="light"] .marketing-hero-brief-consent-note {
  color: #374151 !important;
}

html[data-theme="dark"] .marketing-hero-brief-input {
  background: rgba(15, 23, 42, 0.9) !important;
  color: #f8fafc !important;
  border-color: rgba(148, 163, 184, 0.2) !important;
}

html[data-theme="light"] .marketing-hero-brief-input {
  background: rgba(255, 255, 255, 0.92) !important;
  color: #151515 !important;
  border-color: rgba(21, 21, 21, 0.14) !important;
}

/* ---------- Homepage digital human section ---------- */

html[data-theme="dark"] .marketing-digital-human,
html[data-theme="dark"] .marketing-section.marketing-digital-human.card {
  background:
    radial-gradient(circle at top right, rgba(86, 122, 204, 0.12), transparent 30%),
    linear-gradient(180deg, #111a2b 0%, #17243a 100%) !important;
  border-color: rgba(117, 149, 208, 0.12) !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24) !important;
  color: #f5f8ff !important;
}

html[data-theme="light"] .marketing-digital-human,
html[data-theme="light"] .marketing-section.marketing-digital-human.card {
  background:
    radial-gradient(circle at top right, rgba(212, 175, 55, 0.14), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 244, 232, 0.98)) !important;
  border-color: rgba(21, 21, 21, 0.12) !important;
  box-shadow: 0 16px 42px rgba(80, 66, 35, 0.14) !important;
  color: #151515 !important;
}

html[data-theme="dark"] .marketing-section-title,
html[data-theme="dark"] .marketing-digital-heading {
  color: #f4f8ff !important;
}

html[data-theme="light"] .marketing-section-title,
html[data-theme="light"] .marketing-digital-heading {
  color: #151515 !important;
}

html[data-theme="dark"] .marketing-digital-body,
html[data-theme="dark"] .marketing-digital-point,
html[data-theme="dark"] .marketing-digital-alt-link {
  color: #9fb3cb !important;
}

html[data-theme="light"] .marketing-digital-body,
html[data-theme="light"] .marketing-digital-point,
html[data-theme="light"] .marketing-digital-alt-link {
  color: #374151 !important;
}

html[data-theme="dark"] .marketing-digital-media {
  background: linear-gradient(180deg, #0b1322 0%, #101b2d 100%) !important;
  border-color: rgba(117, 149, 208, 0.12) !important;
}

html[data-theme="light"] .marketing-digital-media {
  background:
    radial-gradient(circle at top left, rgba(212, 175, 55, 0.16), transparent 30%),
    linear-gradient(135deg, #fffaf0 0%, #f6eddb 100%) !important;
  border-color: rgba(21, 21, 21, 0.1) !important;
}

html[data-theme="dark"] .marketing-digital-overlay-card {
  background: rgba(5, 11, 22, 0.82) !important;
  color: #f8fafc !important;
}

html[data-theme="light"] .marketing-digital-overlay-card {
  background: rgba(255, 250, 240, 0.86) !important;
  color: #151515 !important;
}

/* ---------- Homepage insights section ---------- */

html[data-theme="dark"] .marketing-insights,
html[data-theme="dark"] .marketing-insights.card {
  background:
    linear-gradient(180deg, #111a2b 0%, #17243a 100%) !important;
  border-color: rgba(117, 149, 208, 0.12) !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24) !important;
}

html[data-theme="light"] .marketing-insights,
html[data-theme="light"] .marketing-insights.card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(249, 244, 232, 0.98)) !important;
  border-color: rgba(21, 21, 21, 0.1) !important;
  box-shadow: 0 16px 42px rgba(80, 66, 35, 0.14) !important;
}

html[data-theme="dark"] .marketing-insights-lead {
  color: #9fb3cb !important;
}

html[data-theme="light"] .marketing-insights-lead {
  color: #374151 !important;
}

/* ---------- Pricing page ---------- */

html[data-theme="dark"] .pricing-page-shell,
html[data-theme="dark"] .pricing-page-plan-card,
html[data-theme="dark"] .pricing-page-setup-card {
  background:
    linear-gradient(180deg, #111a2b 0%, #17243a 100%) !important;
  border-color: rgba(117, 149, 208, 0.12) !important;
  color: #f5f8ff !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24) !important;
}

html[data-theme="light"] .pricing-page-shell,
html[data-theme="light"] .pricing-page-plan-card,
html[data-theme="light"] .pricing-page-setup-card {
  background:
    radial-gradient(circle at top right, rgba(212, 175, 55, 0.12), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 244, 232, 0.98)) !important;
  border-color: rgba(21, 21, 21, 0.12) !important;
  color: #151515 !important;
  box-shadow: 0 16px 42px rgba(80, 66, 35, 0.14) !important;
}

html[data-theme="dark"] .pricing-page-title,
html[data-theme="dark"] .pricing-page-amount-value,
html[data-theme="dark"] .pricing-page-setup-title,
html[data-theme="dark"] .pricing-page-setup-amount {
  color: #f5f8ff !important;
}

html[data-theme="light"] .pricing-page-title,
html[data-theme="light"] .pricing-page-amount-value,
html[data-theme="light"] .pricing-page-setup-title,
html[data-theme="light"] .pricing-page-setup-amount {
  color: #151515 !important;
}

html[data-theme="dark"] .pricing-page-body,
html[data-theme="dark"] .pricing-page-plan-detail,
html[data-theme="dark"] .pricing-page-period,
html[data-theme="dark"] .pricing-page-setup-copy,
html[data-theme="dark"] .pricing-page-setup-includes {
  color: #9fb3cb !important;
}

html[data-theme="light"] .pricing-page-body,
html[data-theme="light"] .pricing-page-plan-detail,
html[data-theme="light"] .pricing-page-period,
html[data-theme="light"] .pricing-page-setup-copy,
html[data-theme="light"] .pricing-page-setup-includes {
  color: #374151 !important;
}

/* ---------- About page ---------- */

html[data-theme="dark"] .about-page-hero,
html[data-theme="dark"] .about-page-section,
html[data-theme="dark"] .about-page-pillar-card,
html[data-theme="dark"] .about-page-info-card,
html[data-theme="dark"] .about-page-team-card {
  background:
    linear-gradient(180deg, #111a2b 0%, #17243a 100%) !important;
  border-color: rgba(117, 149, 208, 0.12) !important;
  color: #f5f8ff !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24) !important;
}

html[data-theme="light"] .about-page-hero,
html[data-theme="light"] .about-page-section,
html[data-theme="light"] .about-page-pillar-card,
html[data-theme="light"] .about-page-info-card,
html[data-theme="light"] .about-page-team-card {
  background:
    radial-gradient(circle at top right, rgba(212, 175, 55, 0.12), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 244, 232, 0.98)) !important;
  border-color: rgba(21, 21, 21, 0.12) !important;
  color: #151515 !important;
  box-shadow: 0 16px 42px rgba(80, 66, 35, 0.14) !important;
}

html[data-theme="dark"] .about-page-hero-tagline,
html[data-theme="dark"] .about-page-summary,
html[data-theme="dark"] .about-page-card-copy,
html[data-theme="dark"] .about-page-section-copy {
  color: #9fb3cb !important;
}

html[data-theme="light"] .about-page-hero-tagline,
html[data-theme="light"] .about-page-summary,
html[data-theme="light"] .about-page-card-copy,
html[data-theme="light"] .about-page-section-copy {
  color: #374151 !important;
}

/* ---------- Legal pages ---------- */

html[data-theme="dark"] .legal-page-shell,
html[data-theme="dark"] .legal-page-section {
  background:
    linear-gradient(180deg, #111a2b 0%, #17243a 100%) !important;
  border-color: rgba(117, 149, 208, 0.12) !important;
  color: #f5f8ff !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24) !important;
}

html[data-theme="light"] .legal-page-shell,
html[data-theme="light"] .legal-page-section {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 244, 232, 0.98)) !important;
  border-color: rgba(21, 21, 21, 0.12) !important;
  color: #151515 !important;
  box-shadow: 0 16px 42px rgba(80, 66, 35, 0.14) !important;
}

html[data-theme="dark"] .legal-page-updated,
html[data-theme="dark"] .legal-page-intro,
html[data-theme="dark"] .legal-page-list li {
  color: #9fb3cb !important;
}

html[data-theme="light"] .legal-page-updated,
html[data-theme="light"] .legal-page-intro,
html[data-theme="light"] .legal-page-list li {
  color: #374151 !important;
}

/* ---------- Leaderboard + analysis pages ---------- */

html[data-theme="dark"] .lb-hero,
html[data-theme="dark"] .lb-search-shell,
html[data-theme="dark"] .lb-card,
html[data-theme="dark"] .lb-detail-shell,
html[data-theme="dark"] .intel-report-hero,
html[data-theme="dark"] .intel-search-toolbar,
html[data-theme="dark"] .intel-table-wrap,
html[data-theme="dark"] .intel-report-card,
html[data-theme="dark"] .intel-card {
  background:
    linear-gradient(180deg, #111a2b 0%, #17243a 100%) !important;
  border-color: rgba(117, 149, 208, 0.12) !important;
  color: #f5f8ff !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24) !important;
}

html[data-theme="light"] .lb-hero,
html[data-theme="light"] .lb-search-shell,
html[data-theme="light"] .lb-card,
html[data-theme="light"] .lb-detail-shell,
html[data-theme="light"] .intel-report-hero,
html[data-theme="light"] .intel-search-toolbar,
html[data-theme="light"] .intel-table-wrap,
html[data-theme="light"] .intel-report-card,
html[data-theme="light"] .intel-card {
  background:
    radial-gradient(circle at top right, rgba(212, 175, 55, 0.12), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 244, 232, 0.98)) !important;
  border-color: rgba(21, 21, 21, 0.12) !important;
  color: #151515 !important;
  box-shadow: 0 16px 42px rgba(80, 66, 35, 0.14) !important;
}

html[data-theme="dark"] .marketing-body,
html[data-theme="dark"] .lb-hero-sub,
html[data-theme="dark"] .intel-error,
html[data-theme="dark"] .intel-error-hint {
  color: #9fb3cb !important;
}

html[data-theme="light"] .marketing-body,
html[data-theme="light"] .lb-hero-sub,
html[data-theme="light"] .intel-error,
html[data-theme="light"] .intel-error-hint {
  color: #374151 !important;
}

/* Inputs/selects on app.js pages */
html[data-theme="dark"] .marketing-page input,
html[data-theme="dark"] .marketing-page select,
html[data-theme="dark"] .marketing-page textarea {
  background: rgba(15, 23, 42, 0.9) !important;
  color: #f8fafc !important;
  border-color: rgba(148, 163, 184, 0.2) !important;
}

html[data-theme="light"] .marketing-page input,
html[data-theme="light"] .marketing-page select,
html[data-theme="light"] .marketing-page textarea {
  background: rgba(255, 255, 255, 0.92) !important;
  color: #151515 !important;
  border-color: rgba(21, 21, 21, 0.14) !important;
}

/* Buttons stay consistent */
html[data-theme="dark"] .cta,
html[data-theme="light"] .cta,
html[data-theme="dark"] .marketing-hero-brief-submit,
html[data-theme="light"] .marketing-hero-brief-submit {
  background: linear-gradient(135deg, #e8a0d5 0%, #d98be0 100%) !important;
  color: #08111d !important;
  border-color: transparent !important;
  box-shadow: 0 14px 28px rgba(227, 196, 101, 0.18) !important;
}

/* Make ghost links readable */
html[data-theme="dark"] .ghost {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #edf4ff !important;
}

html[data-theme="light"] .ghost {
  background: rgba(255, 255, 255, 0.72) !important;
  border-color: rgba(21, 21, 21, 0.16) !important;
  color: #151515 !important;
}

/* Keep header Contact Us red */
html[data-theme="dark"] .marketing-contact-nav-btn,
html[data-theme="light"] .marketing-contact-nav-btn {
  background: linear-gradient(135deg, #9f1118 0%, #d31b25 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 34px rgba(211, 27, 37, 0.28) !important;
}
 /* =========================================================
   SERVICES PAGE TIER IMAGE VISIBILITY FIX
   Make tier card images clearer in light mode
========================================================= */

/* Light mode: make tier background images more visible */
html[data-theme="light"] .services-page .tier-tab-card .tab-bg {
  opacity: 0.42 !important;
  filter: contrast(1.08) saturate(1.08) brightness(0.96) !important;
}

/* Light mode: reduce the pale overlay covering images */
html[data-theme="light"] .services-page .tier-tab-card .tab-bg::after {
  background:
    linear-gradient(90deg, rgba(255, 250, 240, 0.76), rgba(255, 250, 240, 0.12)),
    linear-gradient(180deg, transparent, rgba(255, 250, 240, 0.16)) !important;
}

/* Popular card image visibility */
html[data-theme="light"] .services-page .tier-tab-card.popular .tab-bg {
  opacity: 0.45 !important;
  filter: contrast(1.08) saturate(1.08) brightness(0.96) !important;
}

html[data-theme="light"] .services-page .tier-tab-card.popular .tab-bg::after {
  background:
    linear-gradient(90deg, rgba(255, 250, 240, 0.72), rgba(255, 250, 240, 0.10)),
    linear-gradient(180deg, transparent, rgba(255, 250, 240, 0.14)) !important;
}

/* Keep text readable on top of clearer images */
html[data-theme="light"] .services-page .tier-tab-content {
  position: relative !important;
  z-index: 2 !important;
}

/* Add a subtle text-side backing so text stays readable */
html[data-theme="light"] .services-page .tier-tab-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 250, 240, 0.84) 0%, rgba(255, 250, 240, 0.50) 42%, rgba(255, 250, 240, 0.10) 100%);
  z-index: 1;
}

/* Make sure image stays behind the overlay/content */
html[data-theme="light"] .services-page .tier-tab-card .tab-bg {
  z-index: 0 !important;
}

/* =========================================================
   GLOBAL MOBILE + LIGHT THEME FIX
   RankMySalon
   Add this at the very bottom of theme.css
========================================================= */


/* ---------- Light theme navigation visibility fix ---------- */

html[data-theme="light"] body,
body[data-theme="light"] {
  color: #172033;
  background: #f6f1e8;
}

html[data-theme="light"] .nav a,
html[data-theme="light"] .site-nav a,
html[data-theme="light"] .header-nav a,
html[data-theme="light"] .rms-nav a,
html[data-theme="light"] .menu a,
html[data-theme="light"] .nav-link,
body[data-theme="light"] .nav a,
body[data-theme="light"] .site-nav a,
body[data-theme="light"] .header-nav a,
body[data-theme="light"] .rms-nav a,
body[data-theme="light"] .menu a,
body[data-theme="light"] .nav-link {
  color: #39445a !important;
  opacity: 1 !important;
}

html[data-theme="light"] .nav a.active,
html[data-theme="light"] .site-nav a.active,
html[data-theme="light"] .header-nav a.active,
html[data-theme="light"] .rms-nav a.active,
html[data-theme="light"] .menu a.active,
html[data-theme="light"] .nav-link.active,
body[data-theme="light"] .nav a.active,
body[data-theme="light"] .site-nav a.active,
body[data-theme="light"] .header-nav a.active,
body[data-theme="light"] .rms-nav a.active,
body[data-theme="light"] .menu a.active,
body[data-theme="light"] .nav-link.active {
  color: #d6b85a !important;
  opacity: 1 !important;
}

html[data-theme="light"] .nav a:hover,
html[data-theme="light"] .site-nav a:hover,
html[data-theme="light"] .header-nav a:hover,
html[data-theme="light"] .rms-nav a:hover,
html[data-theme="light"] .menu a:hover,
html[data-theme="light"] .nav-link:hover,
body[data-theme="light"] .nav a:hover,
body[data-theme="light"] .site-nav a:hover,
body[data-theme="light"] .header-nav a:hover,
body[data-theme="light"] .rms-nav a:hover,
body[data-theme="light"] .menu a:hover,
body[data-theme="light"] .nav-link:hover {
  color: #b99632 !important;
}


/* ---------- Mobile layout reset ---------- */

@media (max-width: 768px) {

  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
  }

  * {
    box-sizing: border-box;
  }

  main,
  .page,
  .page-content,
  .site-main,
  .content,
  .container,
  .wrapper,
  .section,
  .rms-page,
  .rms-section {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }


  /* ---------- Header mobile fix ---------- */

  header,
  .site-header,
  .rms-header,
  .header {
    width: calc(100% - 28px) !important;
    max-width: calc(100% - 28px) !important;
    margin: 14px auto 20px !important;
    padding: 22px 20px !important;
    border-radius: 22px !important;
  }

  .logo,
  .site-logo,
  .rms-logo,
  .brand,
  .brand-logo {
    display: block !important;
    text-align: center !important;
    margin: 0 auto 18px !important;
    font-size: 28px !important;
    line-height: 1.1 !important;
  }

  .header-actions,
  .rms-header-actions,
  .top-actions,
  .auth-language-row {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 12px !important;
    width: 100% !important;
    margin-bottom: 20px !important;
  }

  .sign-in,
  .signin,
  .login-button,
  .language-selector,
  .lang-select,
  .language-button,
  .header-actions a,
  .header-actions button,
  .rms-header-actions a,
  .rms-header-actions button {
    min-height: 54px !important;
    border-radius: 18px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }


  /* ---------- Nav mobile fix ---------- */

  nav,
  .nav,
  .site-nav,
  .header-nav,
  .rms-nav,
  .menu {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 14px 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  nav a,
  .nav a,
  .site-nav a,
  .header-nav a,
  .rms-nav a,
  .menu a,
  .nav-link {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    max-width: 100% !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }


  /* ---------- Page spacing mobile fix ---------- */

  .hero,
  .rms-hero,
  .services-hero,
  .page-hero,
  .section-hero {
    width: calc(100% - 28px) !important;
    max-width: calc(100% - 28px) !important;
    margin: 0 auto 20px !important;
    padding: 38px 22px !important;
    border-radius: 24px !important;
  }

  .hero h1,
  .rms-hero h1,
  .services-hero h1,
  .page-hero h1,
  .section-hero h1 {
    font-size: clamp(38px, 11vw, 54px) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.04em !important;
    max-width: 100% !important;
  }

  .hero .eyebrow,
  .rms-hero .eyebrow,
  .services-hero .eyebrow,
  .page-hero .eyebrow,
  .section-hero .eyebrow {
    font-size: 15px !important;
    letter-spacing: 0.22em !important;
    line-height: 1.3 !important;
    margin-bottom: 14px !important;
  }

  .hero p,
  .rms-hero p,
  .services-hero p,
  .page-hero p,
  .section-hero p {
    font-size: 18px !important;
    line-height: 1.65 !important;
    max-width: 100% !important;
  }


  /* ---------- Services cards mobile fix ---------- */

  .services-grid,
  .tiers-grid,
  .service-grid,
  .rms-services-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    width: calc(100% - 28px) !important;
    max-width: calc(100% - 28px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .service-card,
  .tier-card,
  .rms-card,
  .services-card {
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    margin: 0 auto !important;
    padding: 26px 22px !important;
    border-radius: 24px !important;
    overflow: hidden !important;
  }

  .service-card h2,
  .tier-card h2,
  .rms-card h2,
  .services-card h2,
  .service-card h3,
  .tier-card h3,
  .rms-card h3,
  .services-card h3 {
    font-size: 26px !important;
    line-height: 1.12 !important;
    letter-spacing: -0.03em !important;
    margin-bottom: 10px !important;
  }

  .service-card p,
  .tier-card p,
  .rms-card p,
  .services-card p {
    font-size: 16px !important;
    line-height: 1.45 !important;
  }

  .tier-label,
  .badge,
  .service-badge {
    font-size: 13px !important;
    padding: 8px 14px !important;
    border-radius: 999px !important;
    margin-bottom: 22px !important;
  }

  .price,
  .service-price,
  .tier-price {
    font-size: 28px !important;
    line-height: 1 !important;
  }


  /* ---------- Image/card background opacity fix on mobile ---------- */

  .service-card img,
  .tier-card img,
  .rms-card img,
  .services-card img {
    max-width: 100% !important;
    height: auto !important;
  }

  .service-card::before,
  .tier-card::before,
  .rms-card::before,
  .services-card::before {
    max-width: 100% !important;
  }


  /* ---------- Form mobile fix ---------- */

  form,
  .form-card,
  .lead-form,
  .rms-form {
    width: 100% !important;
    max-width: 100% !important;
  }

  input,
  textarea,
  select,
  button {
    max-width: 100% !important;
  }

  input,
  textarea,
  select {
    font-size: 16px !important;
  }
}


/* ---------- Extra small iPhone fix ---------- */

@media (max-width: 390px) {

  header,
  .site-header,
  .rms-header,
  .header,
  .hero,
  .rms-hero,
  .services-hero,
  .page-hero,
  .section-hero,
  .services-grid,
  .tiers-grid,
  .service-grid,
  .rms-services-grid {
    width: calc(100% - 22px) !important;
    max-width: calc(100% - 22px) !important;
  }

  nav a,
  .nav a,
  .site-nav a,
  .header-nav a,
  .rms-nav a,
  .menu a,
  .nav-link {
    font-size: 16px !important;
  }

  .hero h1,
  .rms-hero h1,
  .services-hero h1,
  .page-hero h1,
  .section-hero h1 {
    font-size: 38px !important;
  }

  .service-card,
  .tier-card,
  .rms-card,
  .services-card {
    padding: 24px 20px !important;
  }
}

/* =========================================================
   RankMySalon Final Mobile Fix
   This must stay at the very bottom of theme.css
========================================================= */

@media (max-width: 768px) {
  html,
  body {
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    margin: 0 !important;
  }

  * {
    box-sizing: border-box !important;
  }

  #appShell,
  .app,
  .app.landing-mode,
  .landing-shell,
  .marketing-page,
  .marketing-page-overview {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .marketing-page {
    padding: 0 14px !important;
  }

  .marketing-nav-shell,
  .marketing-hero-section,
  .marketing-section,
  .marketing-digital-human,
  .marketing-insights,
  .marketing-footer {
    width: calc(100vw - 28px) !important;
    max-width: calc(100vw - 28px) !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: hidden !important;
  }

  .marketing-nav-shell {
    padding: 22px 16px !important;
    border-radius: 24px !important;
  }

  .marketing-hero-section {
    padding: 32px 16px !important;
    border-radius: 24px !important;
  }

  .marketing-hero-brief-layout,
  .marketing-hero-brief-copy,
  .marketing-hero-headline,
  .marketing-hero-brief-form,
  .marketing-hero-brief-trust,
  .marketing-trust-list,
  .marketing-digital-grid,
  .marketing-digital-copy,
  .marketing-digital-media,
  .marketing-insights-grid {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: block !important;
    overflow: hidden !important;
  }

  .marketing-nav-links,
  .marketing-nav {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 14px 18px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .marketing-nav a,
  .marketing-nav-links a {
    font-size: 16px !important;
    white-space: nowrap !important;
  }

  .marketing-nav-actions,
  .marketing-actions,
  .marketing-auth-actions,
  .marketing-top-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 110px !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .marketing-nav-actions > *,
  .marketing-actions > *,
  .marketing-auth-actions > *,
  .marketing-top-actions > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .marketing-nav-actions a,
  .marketing-nav-actions button,
  .marketing-actions a,
  .marketing-actions button,
  .marketing-auth-actions a,
  .marketing-auth-actions button,
  .marketing-top-actions a,
  .marketing-top-actions button {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 54px !important;
    padding: 0 12px !important;
    font-size: 16px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .marketing-hero-headline,
  .marketing-hero-headline h1,
  .marketing-hero-section h1 {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 36px !important;
    line-height: 1.05 !important;
    text-align: center !important;
    overflow-wrap: normal !important;
  }

  .marketing-hero-urgency {
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    text-align: center !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
    padding: 15px 12px !important;
  }

  #heroBriefForm,
  .marketing-hero-brief-form,
  .marketing-hero-brief-form form,
  .marketing-hero-brief-form input,
  .marketing-hero-brief-form textarea,
  .marketing-hero-brief-form select,
  .marketing-hero-brief-form button {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .marketing-digital-video,
  .marketing-insights-card,
  .marketing-insights-thumb-wrap,
  .marketing-insights-thumb {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  img,
  video {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* =========================================================
   Services Mobile Header Repair
   Fix clipped language button and hidden nav on services page
========================================================= */

@media (max-width: 768px) {
  .marketing-nav-shell {
    height: auto !important;
    max-height: none !important;
    min-height: auto !important;
    overflow: visible !important;
  }

  .marketing-nav-shell * {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .marketing-nav-inner,
  .marketing-nav-content,
  .marketing-nav-main,
  .marketing-nav-row,
  .marketing-header-inner {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
    overflow: visible !important;
  }

  .marketing-brand,
  .marketing-logo,
  .marketing-nav-logo {
    width: 100% !important;
    text-align: center !important;
    margin: 0 auto 4px !important;
    justify-content: center !important;
  }

  .marketing-nav-actions,
  .marketing-actions,
  .marketing-auth-actions,
  .marketing-top-actions,
  .marketing-nav-controls,
  .marketing-header-actions {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 108px !important;
    gap: 10px !important;
    overflow: visible !important;
  }

  .marketing-nav-actions a,
  .marketing-nav-actions button,
  .marketing-actions a,
  .marketing-actions button,
  .marketing-auth-actions a,
  .marketing-auth-actions button,
  .marketing-top-actions a,
  .marketing-top-actions button,
  .marketing-nav-controls a,
  .marketing-nav-controls button,
  .marketing-header-actions a,
  .marketing-header-actions button {
    width: 100% !important;
    max-width: 100% !important;
    height: 54px !important;
    min-height: 54px !important;
    padding: 0 12px !important;
    font-size: 16px !important;
    border-radius: 18px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .marketing-nav,
  .marketing-nav-links,
  .marketing-menu,
  .marketing-header-menu {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 12px 18px !important;
    overflow: visible !important;
  }

  .marketing-nav a,
  .marketing-nav-links a,
  .marketing-menu a,
  .marketing-header-menu a {
    width: auto !important;
    max-width: 100% !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }
}

/* =========================================================
   Force Same Mobile Header Layout As Homepage
   Apply to all marketing pages
========================================================= */

@media (max-width: 768px) {
  .marketing-nav-shell {
    width: calc(100vw - 28px) !important;
    max-width: calc(100vw - 28px) !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 16px auto 28px !important;
    padding: 24px 18px !important;
    border-radius: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
  }

  .marketing-nav-shell > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .marketing-brand,
  .marketing-logo,
  .marketing-nav-logo {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
  }

  .marketing-brand a,
  .marketing-logo a,
  .marketing-nav-logo a {
    display: inline-flex !important;
    justify-content: center !important;
    width: auto !important;
    max-width: 100% !important;
    font-size: 26px !important;
    line-height: 1.1 !important;
  }

  .marketing-nav,
  .marketing-nav-links,
  .marketing-menu,
  .marketing-header-menu {
    order: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 14px 20px !important;
    overflow: visible !important;
  }

  .marketing-nav a,
  .marketing-nav-links a,
  .marketing-menu a,
  .marketing-header-menu a {
    width: auto !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }

  .marketing-nav-actions,
  .marketing-actions,
  .marketing-auth-actions,
  .marketing-top-actions,
  .marketing-nav-controls,
  .marketing-header-actions {
    order: 3 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 122px !important;
    gap: 12px !important;
    overflow: visible !important;
  }

  .marketing-nav-actions > *,
  .marketing-actions > *,
  .marketing-auth-actions > *,
  .marketing-top-actions > *,
  .marketing-nav-controls > *,
  .marketing-header-actions > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .marketing-nav-actions a,
  .marketing-nav-actions button,
  .marketing-actions a,
  .marketing-actions button,
  .marketing-auth-actions a,
  .marketing-auth-actions button,
  .marketing-top-actions a,
  .marketing-top-actions button,
  .marketing-nav-controls a,
  .marketing-nav-controls button,
  .marketing-header-actions a,
  .marketing-header-actions button {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 54px !important;
    min-height: 54px !important;
    padding: 0 14px !important;
    border-radius: 18px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* =========================================================
   APP.JS PAGES MOBILE FIX
   For Leaderboard / Local Ranking / About Us
   Add this at the very bottom of theme.css
========================================================= */

@media (max-width: 768px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box !important;
  }

  .app,
  .landing-shell,
  .marketing-page,
  .marketing-page-overview,
  .marketing-main,
  main.marketing-main,
  .page-main,
  .page-shell,
  .page-wrapper,
  .leaderboard-page,
  .analysis-page,
  .about-page {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .marketing-page,
  .marketing-main,
  main.marketing-main,
  .page-main {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* Same mobile header structure as fixed HTML pages */
  .marketing-nav-shell,
  .marketing-header {
    width: calc(100vw - 28px) !important;
    max-width: calc(100vw - 28px) !important;
    height: auto !important;
    max-height: none !important;
    min-height: auto !important;
    margin: 16px auto 28px !important;
    padding: 24px 18px !important;
    border-radius: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 18px !important;
    overflow: visible !important;
  }

  .marketing-nav-shell > *,
  .marketing-header > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .marketing-nav-main {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
    overflow: visible !important;
  }

  .marketing-brand,
  .marketing-logo,
  .marketing-logo-link {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    margin: 0 auto !important;
    font-size: 26px !important;
    line-height: 1.1 !important;
  }

  .marketing-nav {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 14px 20px !important;
    margin: 0 !important;
    overflow: visible !important;
    order: 2 !important;
  }

  .marketing-nav-link {
    width: auto !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
  }

  .marketing-auth-actions {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr) minmax(82px, 0.9fr) minmax(108px, 1fr) !important;
    gap: 10px !important;
    align-items: center !important;
    justify-content: stretch !important;
    overflow: visible !important;
    order: 3 !important;
  }

  .marketing-auth-actions > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .theme-toggle {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    flex: 0 0 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    line-height: 1 !important;
    box-shadow: none !important;
  }

  .marketing-contact-nav-btn,
  .marketing-auth-link,
  .marketing-lang-toggle {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 12px !important;
    border-radius: 16px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .marketing-lang-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    position: relative !important;
  }

  .marketing-lang-menu {
    right: 0 !important;
    left: auto !important;
    max-width: calc(100vw - 48px) !important;
    z-index: 9999 !important;
  }

  /* Main app.js page cards and panels */
  .leaderboard-hero,
  .leaderboard-panel,
  .leaderboard-card,
  .leaderboard-directory,
  .leaderboard-grid,
  .leaderboard-list,
  .analysis-hero,
  .analysis-panel,
  .analysis-card,
  .analysis-table-wrap,
  .analysis-report-card,
  .about-hero,
  .about-section,
  .about-card,
  .about-grid,
  .about-panel,
  .marketing-hero-section,
  .marketing-section,
  .marketing-insights,
  .marketing-insights-card,
  .marketing-digital-human,
  .marketing-digital-grid,
  [class*="leaderboard"],
  [class*="analysis"],
  [class*="about"] {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  .leaderboard-hero,
  .analysis-hero,
  .about-hero,
  .marketing-hero-section {
    width: 100% !important;
    padding: 30px 18px !important;
    border-radius: 24px !important;
  }

  .leaderboard-hero h1,
  .analysis-hero h1,
  .about-hero h1,
  .marketing-hero-section h1,
  .marketing-hero-headline h1 {
    max-width: 100% !important;
    font-size: clamp(34px, 10vw, 44px) !important;
    line-height: 1.04 !important;
    letter-spacing: -0.05em !important;
    overflow-wrap: normal !important;
  }

  .leaderboard-hero p,
  .analysis-hero p,
  .about-hero p,
  .marketing-hero-section p {
    max-width: 100% !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
  }

  .leaderboard-grid,
  .leaderboard-list,
  .analysis-grid,
  .analysis-list,
  .about-grid,
  .feature-grid,
  .results-grid,
  .marketing-insights-grid,
  .marketing-digital-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .leaderboard-card,
  .analysis-card,
  .about-card,
  .feature-card,
  .result-card,
  .marketing-insights-card,
  .marketing-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 22px !important;
    border-radius: 24px !important;
    overflow: hidden !important;
  }

  .leaderboard-card *,
  .analysis-card *,
  .about-card *,
  .feature-card *,
  .result-card *,
  .marketing-card * {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Tables on Local Ranking */
  table,
  .analysis-table,
  .leaderboard-table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .analysis-table-wrap,
  .leaderboard-table-wrap,
  .table-wrap,
  [class*="table"] {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  th,
  td {
    white-space: normal !important;
    word-break: break-word !important;
  }

  input,
  textarea,
  select,
  button {
    max-width: 100% !important;
  }

  img,
  video,
  svg {
    max-width: 100% !important;
    height: auto !important;
  }
}

@media (max-width: 420px) {
  .marketing-page,
  .marketing-main,
  main.marketing-main,
  .page-main {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .marketing-nav-shell,
  .marketing-header {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    padding: 22px 16px !important;
  }

  .marketing-nav {
    gap: 12px 16px !important;
  }

  .marketing-nav-link {
    font-size: 15px !important;
  }

  .marketing-auth-actions {
    grid-template-columns: 36px minmax(0, 1fr) minmax(76px, 0.86fr) minmax(104px, 1fr) !important;
    gap: 8px !important;
  }

  .marketing-contact-nav-btn,
  .marketing-auth-link,
  .marketing-lang-toggle {
    height: 44px !important;
    min-height: 44px !important;
    font-size: 13px !important;
    padding: 0 10px !important;
  }
}

/* =========================================================
   MOBILE HOME FIX - Header + Floating Slider Dots Issue
   ========================================================= */

@media (max-width: 768px) {

  /* 1. 防止首页横向溢出 */
  html,
  body,
  #root,
  .app,
  .page,
  .home-page,
  .landing-page {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  /* 2. 修复首页 header 在 mobile 显示不完整 */
  header,
  .site-header,
  .app-header,
  .main-header,
  .navbar,
  .top-nav {
    width: calc(100% - 32px);
    max-width: calc(100% - 32px);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    overflow: visible;
  }

  .nav,
  .nav-inner,
  .navbar-inner,
  .header-inner,
  .header-content {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    box-sizing: border-box;
  }

  .nav-links,
  .navbar-links,
  .menu,
  .menu-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px 22px;
    width: 100%;
    max-width: 100%;
  }

  .nav-actions,
  .header-actions,
  .navbar-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    width: 100%;
    max-width: 100%;
  }

  /* 3. 修复首页中间莫名出现的白色长框和左侧 dots */
  .swiper-pagination,
  .slick-dots,
  .carousel-dots,
  .slider-dots,
  .hero-dots,
  .pagination-dots,
  .dots,
  .progress-dots,
  .slider-pagination {
    position: static !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    z-index: 1 !important;
  }

  /* 如果那个白色框还是出现，直接隐藏首页 slider dots */
  .home-page .swiper-pagination,
  .home-page .slick-dots,
  .home-page .carousel-dots,
  .home-page .slider-dots,
  .home-page .hero-dots,
  .home-page .pagination-dots,
  .home-page .dots,
  .home-page .progress-dots,
  .home-page .slider-pagination,
  .landing-page .swiper-pagination,
  .landing-page .slick-dots,
  .landing-page .carousel-dots,
  .landing-page .slider-dots,
  .landing-page .hero-dots,
  .landing-page .pagination-dots,
  .landing-page .dots,
  .landing-page .progress-dots,
  .landing-page .slider-pagination {
    display: none !important;
  }

  /* 4. 防止表单 section 被不正常的绝对定位元素压住 */
  .hero,
  .homepage-hero,
  .landing-hero,
  .overview-section,
  .brief-report-section,
  .report-section,
  .lead-form-section {
    position: relative;
    overflow: visible;
  }
}

/* =========================================================
   FINAL FIX - Mobile Homepage Header + Floating White Box
   Only affects homepage on real mobile screens
   ========================================================= */

@media screen and (max-width: 768px) {

  /* 1. Prevent homepage from creating horizontal overflow */
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
  }

  body,
  #root,
  .app,
  main {
    max-width: 100vw;
    overflow-x: hidden !important;
  }

  /* 2. Fix homepage header being cut off on real mobile */
  header,
  .site-header,
  .main-header,
  .app-header,
  .navbar,
  .top-nav {
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  header *,
  .site-header *,
  .main-header *,
  .app-header *,
  .navbar *,
  .top-nav * {
    box-sizing: border-box !important;
  }

  .header-inner,
  .nav-inner,
  .navbar-inner,
  .header-content,
  .nav-content {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: visible !important;
  }

  .nav-links,
  .navbar-links,
  .menu,
  .menu-links {
    max-width: 100% !important;
    overflow: visible !important;
    flex-wrap: wrap !important;
  }

  /* 3. Fix iPhone Safari 100vw / 100vh weird layout issues */
  section,
  .section,
  .hero,
  .homepage-hero,
  .landing-hero,
  .overview-section,
  .report-section,
  .brief-report-section,
  .lead-form-section {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* 4. Remove broken floating homepage pagination / dots / white panel */
  body:has(.hero),
  body:has(.homepage-hero),
  body:has(.landing-hero) {
    overflow-x: hidden !important;
  }

  .swiper-pagination,
  .slick-dots,
  .carousel-dots,
  .slider-dots,
  .hero-dots,
  .hero-pagination,
  .pagination-dots,
  .progress-dots,
  .slider-pagination,
  .splide__pagination,
  .embla__dots,
  .dots {
    position: static !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    z-index: 1 !important;
  }

  /* 5. On homepage mobile, hide broken slider dots completely */
  .home-page .swiper-pagination,
  .home-page .slick-dots,
  .home-page .carousel-dots,
  .home-page .slider-dots,
  .home-page .hero-dots,
  .home-page .hero-pagination,
  .home-page .pagination-dots,
  .home-page .progress-dots,
  .home-page .slider-pagination,
  .home-page .splide__pagination,
  .home-page .embla__dots,
  .home-page .dots,
  .landing-page .swiper-pagination,
  .landing-page .slick-dots,
  .landing-page .carousel-dots,
  .landing-page .slider-dots,
  .landing-page .hero-dots,
  .landing-page .hero-pagination,
  .landing-page .pagination-dots,
  .landing-page .progress-dots,
  .landing-page .slider-pagination,
  .landing-page .splide__pagination,
  .landing-page .embla__dots,
  .landing-page .dots {
    display: none !important;
  }

  /* 6. Emergency fix: hide any fixed white floating panel on mobile homepage */
  .home-page [style*="position: fixed"],
  .landing-page [style*="position: fixed"] {
    max-width: 100vw !important;
  }

  .home-page [class*="pagination"],
  .home-page [class*="dots"],
  .home-page [class*="Dots"],
  .home-page [class*="slider"],
  .home-page [class*="Slider"],
  .landing-page [class*="pagination"],
  .landing-page [class*="dots"],
  .landing-page [class*="Dots"],
  .landing-page [class*="slider"],
  .landing-page [class*="Slider"] {
    pointer-events: none !important;
  }

  /* 7. Make sure form area stays clickable */
  form,
  input,
  textarea,
  select,
  button,
  a {
    pointer-events: auto;
  }
}

/* =========================================================
   MOBILE HOMEPAGE FIX V2
   Restore header card + remove broken floating dots
   + improve homepage mobile spacing
   ========================================================= */

@media screen and (max-width: 768px) {

  /* Basic mobile overflow fix */
  html,
  body,
  #root,
  .app,
  main {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
  }

  * {
    box-sizing: border-box;
  }

  /* -------------------------------------------------------
     1. Restore mobile header card style
     ------------------------------------------------------- */

  header,
  .site-header,
  .main-header,
  .app-header,
  .navbar,
  .top-nav,
  nav {
    width: calc(100% - 32px) !important;
    max-width: calc(100% - 32px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 24px !important;
    margin-bottom: 28px !important;
    padding: 26px 18px !important;

    border-radius: 28px !important;
    border: 1px solid rgba(150, 125, 70, 0.22) !important;
    background: rgba(255, 252, 242, 0.72) !important;
    box-shadow: 0 18px 45px rgba(60, 45, 20, 0.08) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;

    overflow: visible !important;
  }

  header *,
  nav *,
  .site-header *,
  .main-header *,
  .app-header *,
  .navbar *,
  .top-nav * {
    max-width: 100%;
    box-sizing: border-box;
  }

  .header-inner,
  .nav-inner,
  .navbar-inner,
  .header-content,
  .nav-content,
  .topbar-inner {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: visible !important;
  }

  .nav-links,
  .navbar-links,
  .menu,
  .menu-links,
  .header-links {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 14px 22px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  .nav-actions,
  .header-actions,
  .navbar-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Make header title fit better */
  header h1,
  .site-header h1,
  .main-header h1,
  .app-header h1,
  .navbar h1,
  nav h1 {
    font-size: clamp(34px, 8vw, 46px) !important;
    line-height: 1.08 !important;
    margin-bottom: 20px !important;
    text-align: center !important;
  }

  /* -------------------------------------------------------
     2. Remove only broken floating pagination / dots
     Do NOT touch all sliders/cards globally
     ------------------------------------------------------- */

  .swiper-pagination,
  .slick-dots,
  .carousel-dots,
  .slider-dots,
  .hero-dots,
  .hero-pagination,
  .pagination-dots,
  .progress-dots,
  .slider-pagination,
  .splide__pagination,
  .embla__dots {
    display: none !important;
  }

  /* Fix accidental floating white pagination bar */
  .swiper-pagination,
  .slick-dots,
  .carousel-dots,
  .slider-dots,
  .hero-dots,
  .hero-pagination,
  .pagination-dots,
  .progress-dots,
  .slider-pagination,
  .splide__pagination,
  .embla__dots {
    position: static !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* -------------------------------------------------------
     3. Improve homepage card spacing on mobile
     ------------------------------------------------------- */

  section,
  .section,
  .hero,
  .homepage-hero,
  .landing-hero,
  .overview-section,
  .report-section,
  .brief-report-section,
  .lead-form-section {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* Main content cards */
  .hero,
  .homepage-hero,
  .landing-hero,
  .overview-section,
  .report-section,
  .brief-report-section,
  .lead-form-section,
  .card,
  .glass-card,
  .feature-card,
  .report-card {
    min-height: auto !important;
  }

  /* Reduce excessive blank space inside homepage cards */
  .hero,
  .homepage-hero,
  .landing-hero,
  .overview-section,
  .report-section,
  .brief-report-section,
  .lead-form-section {
    padding-top: 42px !important;
    padding-bottom: 46px !important;
  }

  .card,
  .glass-card,
  .feature-card,
  .report-card {
    padding-top: 34px !important;
    padding-bottom: 34px !important;
  }

  /* If any homepage card was forced to full screen height, cancel it */
  main section {
    min-height: auto !important;
  }

  /* -------------------------------------------------------
     4. Make homepage text easier to read on mobile
     ------------------------------------------------------- */

  main h1 {
    font-size: clamp(36px, 9vw, 52px) !important;
    line-height: 1.08 !important;
  }

  main h2 {
    font-size: clamp(28px, 7vw, 40px) !important;
    line-height: 1.15 !important;
  }

  main h3 {
    font-size: clamp(22px, 5.8vw, 30px) !important;
    line-height: 1.2 !important;
  }

  main p,
  main li {
    font-size: 17px !important;
    line-height: 1.48 !important;
  }

  /* The small uppercase labels like WHY IT MATTERS */
  main [class*="eyebrow"],
  main [class*="label"],
  main [class*="kicker"] {
    font-size: 18px !important;
    letter-spacing: 0.18em !important;
    line-height: 1.3 !important;
  }

  /* Checklist text */
  main ul,
  main ol {
    padding-left: 0 !important;
  }

  main li {
    margin-bottom: 8px !important;
  }

  /* -------------------------------------------------------
     5. Improve form spacing
     ------------------------------------------------------- */

  form {
    width: 100% !important;
    max-width: 100% !important;
  }

  input,
  textarea,
  select {
    min-height: 54px !important;
    font-size: 17px !important;
  }

  label {
    font-size: 14px !important;
    letter-spacing: 0.08em !important;
  }

  button,
  a {
    pointer-events: auto;
  }

  /* -------------------------------------------------------
     6. Improve mobile scroll smoothness
     ------------------------------------------------------- */

  body {
    -webkit-overflow-scrolling: touch;
  }

  main {
    scroll-behavior: auto !important;
  }

  * {
    animation-duration: 0.001ms;
  }
}

/* =========================================================
   MOBILE HOMEPAGE FIX V3
   Fix floating white bar + restore inner menu panel
   + refine mobile text scale for light/dark themes
   ========================================================= */

@media screen and (max-width: 768px) {

  /* -------------------------------------------------------
     1. Restore header outer card
     Works with both light and dark theme variables
     ------------------------------------------------------- */

  header,
  .site-header,
  .main-header,
  .app-header,
  .navbar,
  .top-nav,
  nav {
    width: calc(100% - 32px) !important;
    max-width: calc(100% - 32px) !important;
    margin: 24px auto 28px auto !important;
    padding: 26px 18px 22px !important;
    border-radius: 28px !important;
    overflow: visible !important;
  }

  /* Light theme header */
  body:not(.dark) header,
  body:not(.dark) .site-header,
  body:not(.dark) .main-header,
  body:not(.dark) .app-header,
  body:not(.dark) .navbar,
  body:not(.dark) .top-nav,
  body:not(.dark) nav,
  html:not(.dark) header,
  html:not(.dark) .site-header,
  html:not(.dark) .main-header,
  html:not(.dark) .app-header,
  html:not(.dark) .navbar,
  html:not(.dark) .top-nav,
  html:not(.dark) nav,
  [data-theme="light"] header,
  [data-theme="light"] .site-header,
  [data-theme="light"] .main-header,
  [data-theme="light"] .app-header,
  [data-theme="light"] .navbar,
  [data-theme="light"] .top-nav,
  [data-theme="light"] nav {
    background: rgba(255, 252, 242, 0.76) !important;
    border: 1px solid rgba(150, 125, 70, 0.22) !important;
    box-shadow: 0 18px 45px rgba(60, 45, 20, 0.08) !important;
  }

  /* Dark theme header */
  body.dark header,
  body.dark .site-header,
  body.dark .main-header,
  body.dark .app-header,
  body.dark .navbar,
  body.dark .top-nav,
  body.dark nav,
  html.dark header,
  html.dark .site-header,
  html.dark .main-header,
  html.dark .app-header,
  html.dark .navbar,
  html.dark .top-nav,
  html.dark nav,
  [data-theme="dark"] header,
  [data-theme="dark"] .site-header,
  [data-theme="dark"] .main-header,
  [data-theme="dark"] .app-header,
  [data-theme="dark"] .navbar,
  [data-theme="dark"] .top-nav,
  [data-theme="dark"] nav {
    background: rgba(13, 23, 42, 0.82) !important;
    border: 1px solid rgba(103, 139, 199, 0.28) !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.22) !important;
  }

  /* -------------------------------------------------------
     2. Restore inner menu panel
     This is the missing box around Overview / Leaderboard / etc.
     ------------------------------------------------------- */

  .nav-links,
  .navbar-links,
  .menu,
  .menu-links,
  .header-links {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 18px auto 10px !important;
    padding: 22px 20px !important;

    border-radius: 26px !important;
    overflow: visible !important;
    gap: 20px 28px !important;
  }

  /* Light theme inner menu */
  body:not(.dark) .nav-links,
  body:not(.dark) .navbar-links,
  body:not(.dark) .menu,
  body:not(.dark) .menu-links,
  body:not(.dark) .header-links,
  html:not(.dark) .nav-links,
  html:not(.dark) .navbar-links,
  html:not(.dark) .menu,
  html:not(.dark) .menu-links,
  html:not(.dark) .header-links,
  [data-theme="light"] .nav-links,
  [data-theme="light"] .navbar-links,
  [data-theme="light"] .menu,
  [data-theme="light"] .menu-links,
  [data-theme="light"] .header-links {
    background: rgba(255, 255, 248, 0.7) !important;
    border: 1px solid rgba(145, 128, 90, 0.2) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8) !important;
  }

  /* Dark theme inner menu */
  body.dark .nav-links,
  body.dark .navbar-links,
  body.dark .menu,
  body.dark .menu-links,
  body.dark .header-links,
  html.dark .nav-links,
  html.dark .navbar-links,
  html.dark .menu,
  html.dark .menu-links,
  html.dark .header-links,
  [data-theme="dark"] .nav-links,
  [data-theme="dark"] .navbar-links,
  [data-theme="dark"] .menu,
  [data-theme="dark"] .menu-links,
  [data-theme="dark"] .header-links {
    background: rgba(20, 34, 58, 0.66) !important;
    border: 1px solid rgba(123, 154, 205, 0.22) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05) !important;
  }

  /* Header title */
  header h1,
  .site-header h1,
  .main-header h1,
  .app-header h1,
  .navbar h1,
  nav h1 {
    font-size: 40px !important;
    line-height: 1.08 !important;
    margin: 0 0 14px !important;
    text-align: center !important;
  }

  /* Header menu links */
  header a,
  nav a,
  .nav-links a,
  .navbar-links a,
  .menu a,
  .menu-links a,
  .header-links a {
    font-size: 25px !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
  }

  /* Header action buttons */
  .nav-actions,
  .header-actions,
  .navbar-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    margin-top: 8px !important;
  }

  .nav-actions a,
  .nav-actions button,
  .header-actions a,
  .header-actions button,
  .navbar-actions a,
  .navbar-actions button {
    min-height: 56px !important;
    border-radius: 24px !important;
    font-size: 24px !important;
  }

  /* -------------------------------------------------------
     3. Kill the floating white bar with dots
     This targets the exact visual bug: fixed/sticky/absolute wide pill
     inside the homepage report area.
     ------------------------------------------------------- */

  .swiper-pagination,
  .slick-dots,
  .carousel-dots,
  .slider-dots,
  .hero-dots,
  .hero-pagination,
  .pagination-dots,
  .progress-dots,
  .slider-pagination,
  .splide__pagination,
  .embla__dots,
  .slider-progress,
  .carousel-progress,
  .progress-bar,
  .scroll-progress {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* More aggressive but still safer than the previous version:
     only hide mobile fixed/absolute pill-like elements that contain dots */
  main [class*="dot"],
  main [class*="Dot"],
  main [class*="pagination"],
  main [class*="Pagination"] {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  /* The visible white floating pill itself */
  main > div[style*="position: fixed"],
  main > div[style*="position: sticky"],
  main > div[style*="position: absolute"],
  section > div[style*="position: fixed"],
  section > div[style*="position: sticky"],
  section > div[style*="position: absolute"] {
    pointer-events: none !important;
  }

  /* Hide empty decorative pill panels that are too wide and too short */
  main div:empty,
  section div:empty {
    display: none !important;
  }

  /* -------------------------------------------------------
     4. Correct the text scale that V2 made too large
     ------------------------------------------------------- */

  main h1 {
    font-size: clamp(34px, 8vw, 48px) !important;
    line-height: 1.08 !important;
  }

  main h2 {
    font-size: clamp(28px, 7vw, 38px) !important;
    line-height: 1.15 !important;
  }

  main h3 {
    font-size: clamp(21px, 5.4vw, 28px) !important;
    line-height: 1.22 !important;
  }

  main p,
  main li {
    font-size: 18px !important;
    line-height: 1.52 !important;
  }

  main [class*="eyebrow"],
  main [class*="kicker"] {
    font-size: 18px !important;
    letter-spacing: 0.16em !important;
  }

  /* Do NOT make every label huge */
  main label {
    font-size: 14px !important;
    letter-spacing: 0.08em !important;
    line-height: 1.3 !important;
  }

  /* Specific correction for WHY IT MATTERS if it is plain heading text */
  main h2,
  main h3 {
    max-width: 100% !important;
    word-break: normal !important;
  }

  /* -------------------------------------------------------
     5. Smooth scroll / reduce janky animation on iPhone
     ------------------------------------------------------- */

  html,
  body {
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  * {
    -webkit-tap-highlight-color: transparent;
  }

  /* Do not globally kill animations, only reduce heavy transforms */
  main [style*="transform"] {
    will-change: auto !important;
  }
}

/* =========================================================
   MOBILE DARK HEADER OVERRIDE
   Fix header staying light when dark theme is selected
   Only affects mobile header/nav area
   ========================================================= */

@media screen and (max-width: 768px) {

  /* Dark theme outer header card */
  html.dark header,
  body.dark header,
  html.theme-dark header,
  body.theme-dark header,
  html.dark-mode header,
  body.dark-mode header,
  [data-theme="dark"] header,
  [data-mode="dark"] header,
  [data-color-scheme="dark"] header,

  html.dark nav,
  body.dark nav,
  html.theme-dark nav,
  body.theme-dark nav,
  html.dark-mode nav,
  body.dark-mode nav,
  [data-theme="dark"] nav,
  [data-mode="dark"] nav,
  [data-color-scheme="dark"] nav,

  html.dark .site-header,
  body.dark .site-header,
  html.theme-dark .site-header,
  body.theme-dark .site-header,
  html.dark-mode .site-header,
  body.dark-mode .site-header,
  [data-theme="dark"] .site-header,
  [data-mode="dark"] .site-header,
  [data-color-scheme="dark"] .site-header,

  html.dark .main-header,
  body.dark .main-header,
  html.theme-dark .main-header,
  body.theme-dark .main-header,
  html.dark-mode .main-header,
  body.dark-mode .main-header,
  [data-theme="dark"] .main-header,
  [data-mode="dark"] .main-header,
  [data-color-scheme="dark"] .main-header,

  html.dark .app-header,
  body.dark .app-header,
  html.theme-dark .app-header,
  body.theme-dark .app-header,
  html.dark-mode .app-header,
  body.dark-mode .app-header,
  [data-theme="dark"] .app-header,
  [data-mode="dark"] .app-header,
  [data-color-scheme="dark"] .app-header,

  html.dark .navbar,
  body.dark .navbar,
  html.theme-dark .navbar,
  body.theme-dark .navbar,
  html.dark-mode .navbar,
  body.dark-mode .navbar,
  [data-theme="dark"] .navbar,
  [data-mode="dark"] .navbar,
  [data-color-scheme="dark"] .navbar,

  html.dark .top-nav,
  body.dark .top-nav,
  html.theme-dark .top-nav,
  body.theme-dark .top-nav,
  html.dark-mode .top-nav,
  body.dark-mode .top-nav,
  [data-theme="dark"] .top-nav,
  [data-mode="dark"] .top-nav,
  [data-color-scheme="dark"] .top-nav {
    background: rgba(13, 23, 42, 0.82) !important;
    border: 1px solid rgba(103, 139, 199, 0.32) !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.32) !important;
    color: rgba(236, 242, 255, 0.92) !important;
  }

  /* Dark theme inner menu panel */
  html.dark .nav-links,
  body.dark .nav-links,
  html.theme-dark .nav-links,
  body.theme-dark .nav-links,
  html.dark-mode .nav-links,
  body.dark-mode .nav-links,
  [data-theme="dark"] .nav-links,
  [data-mode="dark"] .nav-links,
  [data-color-scheme="dark"] .nav-links,

  html.dark .navbar-links,
  body.dark .navbar-links,
  html.theme-dark .navbar-links,
  body.theme-dark .navbar-links,
  html.dark-mode .navbar-links,
  body.dark-mode .navbar-links,
  [data-theme="dark"] .navbar-links,
  [data-mode="dark"] .navbar-links,
  [data-color-scheme="dark"] .navbar-links,

  html.dark .menu,
  body.dark .menu,
  html.theme-dark .menu,
  body.theme-dark .menu,
  html.dark-mode .menu,
  body.dark-mode .menu,
  [data-theme="dark"] .menu,
  [data-mode="dark"] .menu,
  [data-color-scheme="dark"] .menu,

  html.dark .menu-links,
  body.dark .menu-links,
  html.theme-dark .menu-links,
  body.theme-dark .menu-links,
  html.dark-mode .menu-links,
  body.dark-mode .menu-links,
  [data-theme="dark"] .menu-links,
  [data-mode="dark"] .menu-links,
  [data-color-scheme="dark"] .menu-links,

  html.dark .header-links,
  body.dark .header-links,
  html.theme-dark .header-links,
  body.theme-dark .header-links,
  html.dark-mode .header-links,
  body.dark-mode .header-links,
  [data-theme="dark"] .header-links,
  [data-mode="dark"] .header-links,
  [data-color-scheme="dark"] .header-links {
    background: rgba(15, 28, 50, 0.76) !important;
    border: 1px solid rgba(120, 154, 210, 0.24) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.06),
      0 12px 28px rgba(0, 0, 0, 0.18) !important;
    color: rgba(236, 242, 255, 0.9) !important;
  }

  /* Dark theme header text */
  html.dark header h1,
  body.dark header h1,
  html.theme-dark header h1,
  body.theme-dark header h1,
  html.dark-mode header h1,
  body.dark-mode header h1,
  [data-theme="dark"] header h1,
  [data-mode="dark"] header h1,
  [data-color-scheme="dark"] header h1,

  html.dark nav h1,
  body.dark nav h1,
  html.theme-dark nav h1,
  body.theme-dark nav h1,
  html.dark-mode nav h1,
  body.dark-mode nav h1,
  [data-theme="dark"] nav h1,
  [data-mode="dark"] nav h1,
  [data-color-scheme="dark"] nav h1 {
    color: rgba(236, 242, 255, 0.9) !important;
  }

  /* Dark theme nav links */
  html.dark header a,
  body.dark header a,
  html.theme-dark header a,
  body.theme-dark header a,
  html.dark-mode header a,
  body.dark-mode header a,
  [data-theme="dark"] header a,
  [data-mode="dark"] header a,
  [data-color-scheme="dark"] header a,

  html.dark nav a,
  body.dark nav a,
  html.theme-dark nav a,
  body.theme-dark nav a,
  html.dark-mode nav a,
  body.dark-mode nav a,
  [data-theme="dark"] nav a,
  [data-mode="dark"] nav a,
  [data-color-scheme="dark"] nav a {
    color: rgba(226, 235, 252, 0.72) !important;
  }

  /* Dark theme active nav link */
  html.dark header a.active,
  body.dark header a.active,
  html.theme-dark header a.active,
  body.theme-dark header a.active,
  html.dark-mode header a.active,
  body.dark-mode header a.active,
  [data-theme="dark"] header a.active,
  [data-mode="dark"] header a.active,
  [data-color-scheme="dark"] header a.active,

  html.dark nav a.active,
  body.dark nav a.active,
  html.theme-dark nav a.active,
  body.theme-dark nav a.active,
  html.dark-mode nav a.active,
  body.dark-mode nav a.active,
  [data-theme="dark"] nav a.active,
  [data-mode="dark"] nav a.active,
  [data-color-scheme="dark"] nav a.active {
    color: #d8bd68 !important;
  }

  /* Dark theme outline buttons: moon/sign in/language */
  html.dark .nav-actions button,
  body.dark .nav-actions button,
  html.theme-dark .nav-actions button,
  body.theme-dark .nav-actions button,
  html.dark-mode .nav-actions button,
  body.dark-mode .nav-actions button,
  [data-theme="dark"] .nav-actions button,
  [data-mode="dark"] .nav-actions button,
  [data-color-scheme="dark"] .nav-actions button,

  html.dark .header-actions button,
  body.dark .header-actions button,
  html.theme-dark .header-actions button,
  body.theme-dark .header-actions button,
  html.dark-mode .header-actions button,
  body.dark-mode .header-actions button,
  [data-theme="dark"] .header-actions button,
  [data-mode="dark"] .header-actions button,
  [data-color-scheme="dark"] .header-actions button,

  html.dark .navbar-actions button,
  body.dark .navbar-actions button,
  html.theme-dark .navbar-actions button,
  body.theme-dark .navbar-actions button,
  html.dark-mode .navbar-actions button,
  body.dark-mode .navbar-actions button,
  [data-theme="dark"] .navbar-actions button,
  [data-mode="dark"] .navbar-actions button,
  [data-color-scheme="dark"] .navbar-actions button {
    background: rgba(18, 31, 54, 0.78) !important;
    border: 1px solid rgba(103, 139, 199, 0.38) !important;
    color: rgba(226, 235, 252, 0.9) !important;
  }

  /* Keep Contact Us red in dark mode */
  html.dark .nav-actions a,
  body.dark .nav-actions a,
  html.theme-dark .nav-actions a,
  body.theme-dark .nav-actions a,
  html.dark-mode .nav-actions a,
  body.dark-mode .nav-actions a,
  [data-theme="dark"] .nav-actions a,
  [data-mode="dark"] .nav-actions a,
  [data-color-scheme="dark"] .nav-actions a,

  html.dark .header-actions a,
  body.dark .header-actions a,
  html.theme-dark .header-actions a,
  body.theme-dark .header-actions a,
  html.dark-mode .header-actions a,
  body.dark-mode .header-actions a,
  [data-theme="dark"] .header-actions a,
  [data-mode="dark"] .header-actions a,
  [data-color-scheme="dark"] .header-actions a {
    color: #ffffff !important;
  }
}

/* =========================================================
   FINAL MOBILE HEADER FIX
   Mobile only. Desktop will NOT be affected.
   Uses real theme state: html[data-theme="light/dark"]
   ========================================================= */

@media screen and (max-width: 768px) {

  /* ---------- 1. Header should scroll normally, never fixed ---------- */

  header,
  nav,
  .site-header,
  .main-header,
  .app-header,
  .navbar,
  .top-nav {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 10 !important;

    width: calc(100% - 32px) !important;
    max-width: calc(100% - 32px) !important;
    margin: 24px auto 28px auto !important;
    padding: 24px 18px 22px !important;

    border-radius: 28px !important;
    box-sizing: border-box !important;
    overflow: visible !important;

    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
  }

  /* ---------- 2. Light / Dark header colors ---------- */

  html[data-theme="light"] header,
  html[data-theme="light"] nav,
  html[data-theme="light"] .site-header,
  html[data-theme="light"] .main-header,
  html[data-theme="light"] .app-header,
  html[data-theme="light"] .navbar,
  html[data-theme="light"] .top-nav {
    background: rgba(255, 252, 242, 0.84) !important;
    border: 1px solid rgba(150, 125, 70, 0.24) !important;
    box-shadow: 0 18px 45px rgba(60, 45, 20, 0.08) !important;
    color: #20232a !important;
  }

  html[data-theme="dark"] header,
  html[data-theme="dark"] nav,
  html[data-theme="dark"] .site-header,
  html[data-theme="dark"] .main-header,
  html[data-theme="dark"] .app-header,
  html[data-theme="dark"] .navbar,
  html[data-theme="dark"] .top-nav {
    background: rgba(12, 23, 42, 0.92) !important;
    border: 1px solid rgba(103, 139, 199, 0.36) !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.36) !important;
    color: rgba(236, 242, 255, 0.94) !important;
  }

  /* ---------- 3. Brand title ---------- */

  header h1,
  nav h1,
  .site-header h1,
  .main-header h1,
  .app-header h1,
  .navbar h1,
  .top-nav h1 {
    font-size: 38px !important;
    line-height: 1.08 !important;
    margin: 0 0 22px !important;
    text-align: center !important;
    font-weight: 800 !important;
  }

  html[data-theme="light"] header h1,
  html[data-theme="light"] nav h1 {
    color: #111111 !important;
  }

  html[data-theme="dark"] header h1,
  html[data-theme="dark"] nav h1 {
    color: rgba(236, 242, 255, 0.94) !important;
  }

  /* ---------- 4. Menu inner panel ---------- */

  .nav-links,
  .navbar-links,
  .menu,
  .menu-links,
  .header-links {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;

    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 14px !important;
    padding: 20px 18px !important;

    border-radius: 26px !important;
    gap: 20px 28px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  html[data-theme="light"] .nav-links,
  html[data-theme="light"] .navbar-links,
  html[data-theme="light"] .menu,
  html[data-theme="light"] .menu-links,
  html[data-theme="light"] .header-links {
    background: rgba(255, 255, 248, 0.82) !important;
    border: 1px solid rgba(145, 128, 90, 0.22) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
  }

  html[data-theme="dark"] .nav-links,
  html[data-theme="dark"] .navbar-links,
  html[data-theme="dark"] .menu,
  html[data-theme="dark"] .menu-links,
  html[data-theme="dark"] .header-links {
    background: rgba(9, 19, 36, 0.88) !important;
    border: 1px solid rgba(120, 154, 210, 0.3) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.06),
      0 12px 28px rgba(0, 0, 0, 0.22) !important;
  }

  /* ---------- 5. Menu text ---------- */

  .nav-links a,
  .navbar-links a,
  .menu a,
  .menu-links a,
  .header-links a {
    font-size: 24px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
  }

  html[data-theme="light"] header a,
  html[data-theme="light"] nav a {
    color: #5f584f !important;
  }

  html[data-theme="dark"] header a,
  html[data-theme="dark"] nav a {
    color: rgba(226, 235, 252, 0.82) !important;
  }

  /* Current page / active menu item should be gold */
  header a.active,
  nav a.active,
  header a[aria-current="page"],
  nav a[aria-current="page"],
  .nav-links a.active,
  .navbar-links a.active,
  .menu a.active,
  .menu-links a.active,
  .header-links a.active {
    color: #d8bd68 !important;
  }

  /* ---------- 6. Header action buttons layout ---------- */

  .nav-actions,
  .header-actions,
  .navbar-actions {
    display: grid !important;
    grid-template-columns: 70px 1fr 1fr !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    align-items: stretch !important;
  }

  .nav-actions > *,
  .header-actions > *,
  .navbar-actions > * {
    min-height: 62px !important;
    border-radius: 24px !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }

  /* 1st: theme toggle */
  .nav-actions > *:nth-child(1),
  .header-actions > *:nth-child(1),
  .navbar-actions > *:nth-child(1) {
    grid-column: 1 / 2 !important;
  }

  /* 2nd: Contact Us */
  .nav-actions > *:nth-child(2),
  .header-actions > *:nth-child(2),
  .navbar-actions > *:nth-child(2) {
    grid-column: 2 / 4 !important;
  }

  /* 3rd: Sign in */
  .nav-actions > *:nth-child(3),
  .header-actions > *:nth-child(3),
  .navbar-actions > *:nth-child(3) {
    grid-column: 1 / 3 !important;
  }

  /* 4th: English */
  .nav-actions > *:nth-child(4),
  .header-actions > *:nth-child(4),
  .navbar-actions > *:nth-child(4) {
    grid-column: 3 / 4 !important;
  }

  /* Normal action buttons */
  html[data-theme="light"] header button,
  html[data-theme="light"] nav button,
  html[data-theme="light"] .nav-actions a:not([href*="contact"]),
  html[data-theme="light"] .header-actions a:not([href*="contact"]),
  html[data-theme="light"] .navbar-actions a:not([href*="contact"]) {
    background: rgba(255, 255, 248, 0.84) !important;
    border: 1px solid rgba(145, 128, 90, 0.24) !important;
    color: #111111 !important;
    box-shadow: none !important;
  }

  html[data-theme="dark"] header button,
  html[data-theme="dark"] nav button,
  html[data-theme="dark"] .nav-actions a:not([href*="contact"]),
  html[data-theme="dark"] .header-actions a:not([href*="contact"]),
  html[data-theme="dark"] .navbar-actions a:not([href*="contact"]) {
    background: rgba(18, 31, 54, 0.86) !important;
    border: 1px solid rgba(103, 139, 199, 0.44) !important;
    color: rgba(226, 235, 252, 0.92) !important;
    box-shadow: none !important;
  }

  /* ---------- 7. Contact Us always red ---------- */

  .nav-actions > *:nth-child(2),
  .header-actions > *:nth-child(2),
  .navbar-actions > *:nth-child(2),
  header a[href*="contact"],
  nav a[href*="contact"],
  header button[class*="contact"],
  nav button[class*="contact"],
  header a[class*="contact"],
  nav a[class*="contact"] {
    background: linear-gradient(135deg, #c91522, #e21b2d) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 18px 32px rgba(226, 27, 45, 0.28) !important;
  }

  .nav-actions > *:nth-child(2) *,
  .header-actions > *:nth-child(2) *,
  .navbar-actions > *:nth-child(2) * {
    color: #ffffff !important;
  }

  /* ---------- 8. Make sure no mobile header becomes fixed ---------- */

  header,
  nav,
  .site-header,
  .main-header,
  .app-header,
  .navbar,
  .top-nav {
    position: relative !important;
  }
}

/* =========================================================
   MOBILE HEADER PATCH - scroll normally + logo gradient + active gold
   Mobile only. Desktop will NOT be affected.
   ========================================================= */

@media screen and (max-width: 768px) {

  /* 1. Header must scroll away with the page. Never fixed / sticky. */
  header,
  nav,
  .site-header,
  .main-header,
  .app-header,
  .navbar,
  .top-nav {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    will-change: auto !important;
  }

  /* If any inner header wrapper was fixed/sticky, reset it too */
  header *,
  nav *,
  .site-header *,
  .main-header *,
  .app-header *,
  .navbar *,
  .top-nav * {
    position: static;
  }

  /* But keep normal flex/grid layouts working */
  .nav-links,
  .navbar-links,
  .menu,
  .menu-links,
  .header-links,
  .nav-actions,
  .header-actions,
  .navbar-actions {
    position: relative !important;
  }

  /* 2. Prevent homepage cards/sections from becoming internal scroll containers */
  main,
  main > section,
  .page,
  .home-page,
  .landing-page,
  .homepage,
  .hero,
  .homepage-hero,
  .landing-hero,
  .overview-section,
  .report-section,
  .brief-report-section,
  .lead-form-section,
  .card,
  .glass-card,
  .feature-card,
  .report-card {
    overflow-y: visible !important;
    max-height: none !important;
  }

  html,
  body {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* 3. Restore gradient logo / brand title */
  header h1,
  nav h1,
  .site-header h1,
  .main-header h1,
  .app-header h1,
  .navbar h1,
  .top-nav h1 {
    background: linear-gradient(135deg, #f2d477 0%, #d8bd68 42%, #b99136 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
  }

  /* 4. Active/current menu item must always be gold */
  header a.active,
  nav a.active,
  header a[aria-current="page"],
  nav a[aria-current="page"],
  .nav-links a.active,
  .navbar-links a.active,
  .menu a.active,
  .menu-links a.active,
  .header-links a.active,
  .nav-links a[aria-current="page"],
  .navbar-links a[aria-current="page"],
  .menu a[aria-current="page"],
  .menu-links a[aria-current="page"],
  .header-links a[aria-current="page"] {
    color: #d8bd68 !important;
    -webkit-text-fill-color: #d8bd68 !important;
  }

  /* 5. Tap / hover feedback on mobile menu */
  .nav-links a:active,
  .navbar-links a:active,
  .menu a:active,
  .menu-links a:active,
  .header-links a:active {
    color: #d8bd68 !important;
    -webkit-text-fill-color: #d8bd68 !important;
    opacity: 0.9 !important;
  }

  /* 6. Contact Us always stays red */
  .nav-actions > *:nth-child(2),
  .header-actions > *:nth-child(2),
  .navbar-actions > *:nth-child(2),
  header a[href*="contact"],
  nav a[href*="contact"],
  header button[class*="contact"],
  nav button[class*="contact"],
  header a[class*="contact"],
  nav a[class*="contact"] {
    background: linear-gradient(135deg, #c91522, #e21b2d) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 18px 32px rgba(226, 27, 45, 0.28) !important;
  }
}

/* =========================================================
   MOBILE HEADER REAL FIX
   Only mobile. Does NOT affect desktop.
   Fixes:
   - header scrolls away normally
   - logo gradient restored
   - current menu item gold
   - Contact Us red
   ========================================================= */

@media screen and (max-width: 768px) {

  /* 1. Make sure the whole page scrolls, not only the card/content area */
  html,
  body,
  #root,
  .app,
  .App,
  .marketing-app,
  .marketing-page,
  .page-shell,
  .layout,
  main {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: visible !important;
  }

  body {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* 2. Header must NOT be fixed/sticky on mobile */
  header,
  nav,
  .site-header,
  .main-header,
  .app-header,
  .navbar,
  .top-nav,
  .marketing-header,
  .marketing-nav,
  .marketing-navbar,
  .marketing-topbar,
  .marketing-header-wrap,
  .marketing-header-wrapper,
  .mobile-header,
  .mobile-nav,
  [class*="Header"],
  [class*="header"] {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    will-change: auto !important;
  }

  /* 3. Keep the mobile header card size reasonable */
  header,
  .site-header,
  .main-header,
  .app-header,
  .navbar,
  .top-nav,
  .marketing-header,
  .marketing-nav,
  .marketing-navbar,
  .marketing-topbar,
  .marketing-header-wrap,
  .marketing-header-wrapper,
  .mobile-header {
    width: calc(100% - 32px) !important;
    max-width: calc(100% - 32px) !important;
    margin: 24px auto 28px auto !important;
    padding: 24px 18px 22px !important;
    border-radius: 28px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  /* 4. Restore RankMySalon gradient logo/title */
  .marketing-brand,
  .brand,
  .site-brand,
  .brand-title,
  .logo-text,
  .navbar-brand,
  header h1,
  nav h1,
  header a[href="/"],
  nav a[href="/"],
  header a[href="/overview"],
  nav a[href="/overview"] {
    background: linear-gradient(135deg, #f5dc86 0%, #d8bd68 42%, #b98d32 100%) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
  }

  /* 5. Menu layout stays compact and readable */
  .nav-links,
  .navbar-links,
  .menu,
  .menu-links,
  .header-links,
  .marketing-links,
  .marketing-nav-links,
  .marketing-menu {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 14px !important;
    padding: 20px 18px !important;
    border-radius: 26px !important;
    gap: 20px 28px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .nav-links a,
  .navbar-links a,
  .menu a,
  .menu-links a,
  .header-links a,
  .marketing-links a,
  .marketing-nav-links a,
  .marketing-menu a {
    font-size: 24px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
  }

  /* 6. Current page menu item must be gold */
  header a[data-rms-current="true"],
  nav a[data-rms-current="true"],
  .nav-links a[data-rms-current="true"],
  .navbar-links a[data-rms-current="true"],
  .menu a[data-rms-current="true"],
  .menu-links a[data-rms-current="true"],
  .header-links a[data-rms-current="true"],
  .marketing-links a[data-rms-current="true"],
  .marketing-nav-links a[data-rms-current="true"],
  .marketing-menu a[data-rms-current="true"],
  header a.active,
  nav a.active,
  header a[aria-current="page"],
  nav a[aria-current="page"] {
    color: #d8bd68 !important;
    -webkit-text-fill-color: #d8bd68 !important;
  }

  /* 7. Contact Us must always stay red */
  header a[data-rms-contact="true"],
  nav a[data-rms-contact="true"],
  header button[data-rms-contact="true"],
  nav button[data-rms-contact="true"],
  .nav-actions > *:nth-child(2),
  .header-actions > *:nth-child(2),
  .navbar-actions > *:nth-child(2),
  .marketing-actions > *:nth-child(2),
  header a[href*="contact"],
  nav a[href*="contact"],
  header a[class*="contact"],
  nav a[class*="contact"] {
    background: linear-gradient(135deg, #c91522, #e21b2d) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 18px 32px rgba(226, 27, 45, 0.28) !important;
  }

  /* 8. Make sure Contact Us inner text stays white */
  header a[data-rms-contact="true"] *,
  nav a[data-rms-contact="true"] *,
  header button[data-rms-contact="true"] *,
  nav button[data-rms-contact="true"] * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }
}

/* =========================================================
   MOBILE FINAL PATCH
   Fix active menu highlight + homepage header scroll issue.
   Mobile only. Desktop unaffected.
   ========================================================= */

@media screen and (max-width: 768px) {

  /* 1. Current page menu item gold */
  header a[data-rms-current="true"],
  nav a[data-rms-current="true"],
  .nav-links a[data-rms-current="true"],
  .navbar-links a[data-rms-current="true"],
  .menu a[data-rms-current="true"],
  .menu-links a[data-rms-current="true"],
  .header-links a[data-rms-current="true"],
  .marketing-links a[data-rms-current="true"],
  .marketing-nav-links a[data-rms-current="true"],
  .marketing-menu a[data-rms-current="true"],
  header a.active,
  nav a.active,
  header a[aria-current="page"],
  nav a[aria-current="page"] {
    color: #d8bd68 !important;
    -webkit-text-fill-color: #d8bd68 !important;
  }

  /* 2. Non-current menu links should NOT stay gold */
  header a:not([data-rms-current="true"]):not([data-rms-contact="true"]),
  nav a:not([data-rms-current="true"]):not([data-rms-contact="true"]),
  .nav-links a:not([data-rms-current="true"]):not([data-rms-contact="true"]),
  .navbar-links a:not([data-rms-current="true"]):not([data-rms-contact="true"]),
  .menu-links a:not([data-rms-current="true"]):not([data-rms-contact="true"]),
  .header-links a:not([data-rms-current="true"]):not([data-rms-contact="true"]) {
    -webkit-text-fill-color: currentColor !important;
  }

  html[data-theme="light"] header a:not([data-rms-current="true"]):not([data-rms-contact="true"]),
  html[data-theme="light"] nav a:not([data-rms-current="true"]):not([data-rms-contact="true"]) {
    color: #5f584f !important;
  }

  html[data-theme="dark"] header a:not([data-rms-current="true"]):not([data-rms-contact="true"]),
  html[data-theme="dark"] nav a:not([data-rms-current="true"]):not([data-rms-contact="true"]) {
    color: rgba(226, 235, 252, 0.82) !important;
  }

  /* 3. Contact Us stays red */
  header a[data-rms-contact="true"],
  nav a[data-rms-contact="true"],
  header a[href*="contact"],
  nav a[href*="contact"] {
    background: linear-gradient(135deg, #c91522, #e21b2d) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 18px 32px rgba(226, 27, 45, 0.28) !important;
  }

  /* 4. Homepage / Overview: stop internal card scrolling */
  html,
  body,
  #root,
  .app,
  .App,
  main {
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    overflow-x: hidden !important;
  }

  body {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  main,
  main > div,
  main > section,
  section,
  .page,
  .homepage,
  .home-page,
  .landing-page,
  .overview-page,
  .marketing-page,
  .marketing-app,
  .page-shell,
  .layout,
  .hero,
  .homepage-hero,
  .landing-hero,
  .overview-section,
  .report-section,
  .brief-report-section,
  .lead-form-section {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
  }

  /*
    This is the key fix:
    if the homepage card itself is scrolling internally,
    the header will look like it is stuck.
  */
  .card,
  .glass-card,
  .feature-card,
  .report-card,
  [class*="card"],
  [class*="Card"],
  [class*="panel"],
  [class*="Panel"] {
    max-height: none !important;
    overflow-y: visible !important;
  }

  /* 5. Header must not be fixed/sticky on Overview */
  header,
  nav,
  .site-header,
  .main-header,
  .app-header,
  .navbar,
  .top-nav,
  .marketing-header,
  .marketing-nav,
  .marketing-navbar,
  .marketing-topbar,
  .marketing-header-wrap,
  .marketing-header-wrapper,
  .mobile-header,
  .mobile-nav {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    will-change: auto !important;
  }
}

/* =========================================================
   RMS mobile final patch
   Fix active page, logo gradient, homepage scroll area.
   Mobile only. Desktop unaffected.
   ========================================================= */

@media screen and (max-width: 768px) {

  /* 1. Brand / logo gradient */
  header a[data-rms-brand="true"],
  nav a[data-rms-brand="true"],
  .marketing-header a[data-rms-brand="true"],
  .marketing-nav a[data-rms-brand="true"],
  .marketing-brand,
  .brand,
  .site-brand,
  .brand-title,
  .logo-text,
  .navbar-brand {
    background: linear-gradient(135deg, #f5dc86 0%, #d8bd68 42%, #b98d32 100%) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
  }

  /* 2. Current page menu highlight */
  header a[data-rms-current="true"],
  nav a[data-rms-current="true"],
  .nav-links a[data-rms-current="true"],
  .navbar-links a[data-rms-current="true"],
  .menu a[data-rms-current="true"],
  .menu-links a[data-rms-current="true"],
  .header-links a[data-rms-current="true"],
  .marketing-links a[data-rms-current="true"],
  .marketing-nav-links a[data-rms-current="true"],
  .marketing-menu a[data-rms-current="true"] {
    color: #d8bd68 !important;
    -webkit-text-fill-color: #d8bd68 !important;
  }

  /* 3. Non-current menu links should not remain gold */
  header a:not([data-rms-current="true"]):not([data-rms-contact="true"]):not([data-rms-brand="true"]),
  nav a:not([data-rms-current="true"]):not([data-rms-contact="true"]):not([data-rms-brand="true"]),
  .nav-links a:not([data-rms-current="true"]):not([data-rms-contact="true"]),
  .navbar-links a:not([data-rms-current="true"]):not([data-rms-contact="true"]),
  .menu-links a:not([data-rms-current="true"]):not([data-rms-contact="true"]),
  .header-links a:not([data-rms-current="true"]):not([data-rms-contact="true"]),
  .marketing-links a:not([data-rms-current="true"]):not([data-rms-contact="true"]),
  .marketing-nav-links a:not([data-rms-current="true"]):not([data-rms-contact="true"]) {
    -webkit-text-fill-color: currentColor !important;
  }

  html[data-theme="light"] header a:not([data-rms-current="true"]):not([data-rms-contact="true"]):not([data-rms-brand="true"]),
  html[data-theme="light"] nav a:not([data-rms-current="true"]):not([data-rms-contact="true"]):not([data-rms-brand="true"]) {
    color: #5f584f !important;
  }

  html[data-theme="dark"] header a:not([data-rms-current="true"]):not([data-rms-contact="true"]):not([data-rms-brand="true"]),
  html[data-theme="dark"] nav a:not([data-rms-current="true"]):not([data-rms-contact="true"]):not([data-rms-brand="true"]) {
    color: rgba(226, 235, 252, 0.82) !important;
  }

  /* 4. Contact Us stays red */
  header a[data-rms-contact="true"],
  nav a[data-rms-contact="true"],
  header button[data-rms-contact="true"],
  nav button[data-rms-contact="true"],
  header a[href*="contact"],
  nav a[href*="contact"] {
    background: linear-gradient(135deg, #c91522, #e21b2d) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 18px 32px rgba(226, 27, 45, 0.28) !important;
  }

  /* 5. Overview homepage: force whole page scrolling, not internal card scrolling */
  html[data-rms-page="overview"],
  html[data-rms-page="overview"] body,
  html[data-rms-page="overview"] #root,
  html[data-rms-page="overview"] .app,
  html[data-rms-page="overview"] .App,
  html[data-rms-page="overview"] .marketing-app,
  html[data-rms-page="overview"] .marketing-page,
  html[data-rms-page="overview"] .page-shell,
  html[data-rms-page="overview"] .layout,
  html[data-rms-page="overview"] main {
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    overflow-y: visible !important;
  }

  html[data-rms-page="overview"] body {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html[data-rms-page="overview"] main,
  html[data-rms-page="overview"] main > div,
  html[data-rms-page="overview"] main > section,
  html[data-rms-page="overview"] section,
  html[data-rms-page="overview"] .hero,
  html[data-rms-page="overview"] .homepage-hero,
  html[data-rms-page="overview"] .landing-hero,
  html[data-rms-page="overview"] .overview-section,
  html[data-rms-page="overview"] .report-section,
  html[data-rms-page="overview"] .brief-report-section,
  html[data-rms-page="overview"] .lead-form-section,
  html[data-rms-page="overview"] .card,
  html[data-rms-page="overview"] .glass-card,
  html[data-rms-page="overview"] .feature-card,
  html[data-rms-page="overview"] .report-card,
  html[data-rms-page="overview"] [class*="card"],
  html[data-rms-page="overview"] [class*="Card"],
  html[data-rms-page="overview"] [class*="panel"],
  html[data-rms-page="overview"] [class*="Panel"] {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
  }

  /* 6. Header must scroll with page */
  html[data-rms-page="overview"] header,
  html[data-rms-page="overview"] nav,
  html[data-rms-page="overview"] .site-header,
  html[data-rms-page="overview"] .main-header,
  html[data-rms-page="overview"] .app-header,
  html[data-rms-page="overview"] .navbar,
  html[data-rms-page="overview"] .top-nav,
  html[data-rms-page="overview"] .marketing-header,
  html[data-rms-page="overview"] .marketing-nav,
  html[data-rms-page="overview"] .marketing-navbar,
  html[data-rms-page="overview"] .marketing-topbar,
  html[data-rms-page="overview"] .marketing-header-wrap,
  html[data-rms-page="overview"] .marketing-header-wrapper,
  html[data-rms-page="overview"] .mobile-header,
  html[data-rms-page="overview"] .mobile-nav {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    will-change: auto !important;
  }
}

/* =========================================================
   RMS mobile last patch
   Mobile only. Desktop unaffected.
   ========================================================= */

@media screen and (max-width: 768px) {
  header a[data-rms-current="true"],
  nav a[data-rms-current="true"],
  header a.active,
  nav a.active,
  header a[aria-current="page"],
  nav a[aria-current="page"] {
    color: #d8bd68 !important;
    -webkit-text-fill-color: #d8bd68 !important;
  }

  header a[href*="contact"],
  nav a[href*="contact"] {
    background: linear-gradient(135deg, #c91522, #e21b2d) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }

  header,
  nav,
  .marketing-header,
  .marketing-nav,
  .navbar,
  .site-header {
    position: relative !important;
  }
}

/* =========================================================
   FINAL TRUE MOBILE NAV FIX
   Uses real header classes from getMarketingNavHtml()
   Mobile only. Desktop unaffected.
   ========================================================= */

@media screen and (max-width: 768px) {

  /* 1. The real header must scroll normally */
  .marketing-nav-shell {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    will-change: auto !important;
    z-index: 10 !important;

    width: calc(100% - 32px) !important;
    max-width: calc(100% - 32px) !important;
    margin: 24px auto 28px auto !important;
    padding: 24px 18px 22px !important;
    border-radius: 28px !important;
    box-sizing: border-box !important;
    overflow: visible !important;

    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
  }

  /* 2. Light / dark colors for real header */
  html[data-theme="light"] .marketing-nav-shell {
    background: rgba(255, 252, 242, 0.84) !important;
    border: 1px solid rgba(150, 125, 70, 0.24) !important;
    box-shadow: 0 18px 45px rgba(60, 45, 20, 0.08) !important;
  }

  html[data-theme="dark"] .marketing-nav-shell {
    background: rgba(12, 23, 42, 0.92) !important;
    border: 1px solid rgba(103, 139, 199, 0.36) !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.36) !important;
  }

  /* 3. Real logo gradient */
  .marketing-brand,
  .marketing-brand .brand-part {
    background: linear-gradient(135deg, #f5dc86 0%, #d8bd68 42%, #b98d32 100%) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
  }

  /* Zoca rebrand: Rank = white, MySalon = pink-purple gradient */
  html[data-theme="dark"] .marketing-brand .brand-part-rank,
  html[data-theme="light"] .marketing-brand .brand-part-rank {
    color: #F5F0FA !important;
    background: none !important;
    -webkit-text-fill-color: #F5F0FA !important;
  }

  html[data-theme="dark"] .marketing-brand .brand-part-mysalon,
  html[data-theme="light"] .marketing-brand .brand-part-mysalon {
    background: linear-gradient(118deg, #f4a8c7 0%, #e8a0d5 40%, #b15cc7 88%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
  }

  .marketing-brand {
    text-decoration: none !important;
  }

  /* 4. Real menu panel */
  .marketing-nav {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;

    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 14px !important;
    padding: 20px 18px !important;

    border-radius: 26px !important;
    gap: 20px 28px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  html[data-theme="light"] .marketing-nav {
    background: rgba(255, 255, 248, 0.82) !important;
    border: 1px solid rgba(145, 128, 90, 0.22) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
  }

  html[data-theme="dark"] .marketing-nav {
    background: rgba(9, 19, 36, 0.88) !important;
    border: 1px solid rgba(120, 154, 210, 0.3) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.06),
      0 12px 28px rgba(0, 0, 0, 0.22) !important;
  }

  /* 5. Real nav links */
  .marketing-nav-link {
    font-size: 24px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    -webkit-text-fill-color: currentColor !important;
  }

  html[data-theme="light"] .marketing-nav-link {
    color: #5f584f !important;
  }

  html[data-theme="dark"] .marketing-nav-link {
    color: rgba(226, 235, 252, 0.82) !important;
  }

  /* 6. Current page highlight: THIS is the real active class */
  .marketing-nav-link.is-active {
    color: #d8bd68 !important;
    -webkit-text-fill-color: #d8bd68 !important;
  }

  /* Mobile tap feedback */
  .marketing-nav-link:active {
    color: #d8bd68 !important;
    -webkit-text-fill-color: #d8bd68 !important;
  }

  /* 7. Real action buttons layout */
  .marketing-auth-actions {
    display: grid !important;
    grid-template-columns: 70px 1fr 1fr !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    align-items: stretch !important;
  }

  .marketing-auth-actions > * {
    min-height: 62px !important;
    border-radius: 24px !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }

  .marketing-auth-actions > *:nth-child(1) {
    grid-column: 1 / 2 !important;
  }

  .marketing-auth-actions > *:nth-child(2) {
    grid-column: 2 / 4 !important;
  }

  .marketing-auth-actions > *:nth-child(3) {
    grid-column: 1 / 3 !important;
  }

  .marketing-auth-actions > *:nth-child(4) {
    grid-column: 3 / 4 !important;
  }

  /* 8. Real normal buttons */
  html[data-theme="light"] .theme-toggle,
  html[data-theme="light"] .marketing-auth-link,
  html[data-theme="light"] .marketing-lang-toggle {
    background: rgba(255, 255, 248, 0.84) !important;
    border: 1px solid rgba(145, 128, 90, 0.24) !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    box-shadow: none !important;
  }

  html[data-theme="dark"] .theme-toggle,
  html[data-theme="dark"] .marketing-auth-link,
  html[data-theme="dark"] .marketing-lang-toggle {
    background: rgba(18, 31, 54, 0.86) !important;
    border: 1px solid rgba(103, 139, 199, 0.44) !important;
    color: rgba(226, 235, 252, 0.92) !important;
    -webkit-text-fill-color: rgba(226, 235, 252, 0.92) !important;
    box-shadow: none !important;
  }

  /* 9. Real Contact Us button always red */
  .marketing-contact-nav-btn,
  html[data-theme="light"] .marketing-contact-nav-btn,
  html[data-theme="dark"] .marketing-contact-nav-btn {
    background: linear-gradient(135deg, #c91522, #e21b2d) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 18px 32px rgba(226, 27, 45, 0.28) !important;
  }

  /* 10. Fix homepage/overview internal scroll issue */
  .marketing-page,
  .marketing-page.landing-page,
  .marketing-page.overview-page,
  .marketing-page.home-page,
  .marketing-page main,
  .marketing-page section,
  .marketing-page .marketing-hero,
  .marketing-page .marketing-hero-grid,
  .marketing-page .marketing-hero-card,
  .marketing-page .marketing-why-matters,
  .marketing-page .marketing-hero-brief-form {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
  }

  html,
  body,
  #root,
  .app,
  .App {
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* 11. Prevent real header from being fixed by any older CSS */
  .marketing-nav-shell,
  .marketing-nav-main,
  .marketing-auth-actions {
    position: static !important;
    top: auto !important;
    transform: none !important;
    will-change: auto !important;
  }
}

/* =========================================================
   TRUE FINAL MOBILE HEADER FIX
   Only mobile. Desktop unaffected.
   Targets real header from getMarketingNavHtml().
   ========================================================= */

@media screen and (max-width: 768px) {

  /* ---------- A. Force homepage to use normal page scroll ---------- */

  html,
  body,
  #root,
  .app,
  .App {
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    position: static !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .landing-page,
  .landing-page > *,
  .landing-page main,
  .landing-page section,
  .landing-page div,
  .marketing-page.landing-page,
  .marketing-page.landing-page > *,
  .marketing-page.landing-page main,
  .marketing-page.landing-page section,
  .marketing-page.landing-page div {
    max-height: none !important;
    overflow-y: visible !important;
  }

  .landing-page {
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }

  /* ---------- B. Real header must NOT be fixed / sticky ---------- */

  .marketing-nav-shell,
  .marketing-nav-main,
  .marketing-auth-actions {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    translate: none !important;
    will-change: auto !important;
  }

  .marketing-nav-shell {
    z-index: 10 !important;
    width: calc(100% - 32px) !important;
    max-width: calc(100% - 32px) !important;
    margin: 24px auto 28px auto !important;
    padding: 24px 18px 22px !important;
    border-radius: 28px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
  }

  html[data-theme="light"] .marketing-nav-shell {
    background: rgba(255, 252, 242, 0.84) !important;
    border: 1px solid rgba(150, 125, 70, 0.24) !important;
    box-shadow: 0 18px 45px rgba(60, 45, 20, 0.08) !important;
  }

  html[data-theme="dark"] .marketing-nav-shell {
    background: rgba(12, 23, 42, 0.92) !important;
    border: 1px solid rgba(103, 139, 199, 0.36) !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.36) !important;
  }

  /* ---------- C. Restore real logo gradient ---------- */

  .marketing-brand,
  .marketing-brand span,
  .marketing-brand .brand-part {
    background: linear-gradient(135deg, #f5dc86 0%, #d8bd68 42%, #b98d32 100%) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    text-decoration: none !important;
  }

  /* Zoca rebrand: Rank = white, MySalon = pink-purple gradient */
  html[data-theme="dark"] .marketing-brand .brand-part-rank,
  html[data-theme="light"] .marketing-brand .brand-part-rank {
    color: #F5F0FA !important;
    background: none !important;
    -webkit-text-fill-color: #F5F0FA !important;
    text-decoration: none !important;
  }

  html[data-theme="dark"] .marketing-brand .brand-part-mysalon,
  html[data-theme="light"] .marketing-brand .brand-part-mysalon {
    background: linear-gradient(118deg, #f4a8c7 0%, #e8a0d5 40%, #b15cc7 88%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    text-decoration: none !important;
  }

  /* ---------- D. Real menu layout ---------- */

  .marketing-nav {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 14px !important;
    padding: 20px 18px !important;
    border-radius: 26px !important;
    gap: 20px 28px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  html[data-theme="light"] .marketing-nav {
    background: rgba(255, 255, 248, 0.82) !important;
    border: 1px solid rgba(145, 128, 90, 0.22) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
  }

  html[data-theme="dark"] .marketing-nav {
    background: rgba(9, 19, 36, 0.88) !important;
    border: 1px solid rgba(120, 154, 210, 0.3) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.06),
      0 12px 28px rgba(0, 0, 0, 0.22) !important;
  }

  .marketing-nav-link {
    font-size: 24px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    border-radius: 999px !important;
    padding: 4px 8px !important;
    -webkit-text-fill-color: currentColor !important;
  }

  html[data-theme="light"] .marketing-nav-link {
    color: #5f584f !important;
  }

  html[data-theme="dark"] .marketing-nav-link {
    color: rgba(226, 235, 252, 0.82) !important;
  }

  /* ---------- E. Very clear active page highlight ---------- */

  .marketing-nav .marketing-nav-link.is-active,
  html[data-theme="light"] .marketing-nav .marketing-nav-link.is-active,
  html[data-theme="dark"] .marketing-nav .marketing-nav-link.is-active {
    color: #d8bd68 !important;
    -webkit-text-fill-color: #d8bd68 !important;
    background: rgba(216, 189, 104, 0.16) !important;
    box-shadow: inset 0 0 0 1px rgba(216, 189, 104, 0.36) !important;
  }

  .marketing-nav .marketing-nav-link.is-active::after {
    content: "" !important;
    display: block !important;
    width: 70% !important;
    height: 2px !important;
    margin: 5px auto 0 !important;
    border-radius: 999px !important;
    background: #d8bd68 !important;
  }

  /* ---------- F. Action buttons ---------- */

  .marketing-auth-actions {
    display: grid !important;
    grid-template-columns: 70px 1fr 1fr !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    align-items: stretch !important;
  }

  .marketing-auth-actions > * {
    min-height: 62px !important;
    border-radius: 24px !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }

  .marketing-auth-actions > *:nth-child(1) {
    grid-column: 1 / 2 !important;
  }

  .marketing-auth-actions > *:nth-child(2) {
    grid-column: 2 / 4 !important;
  }

  .marketing-auth-actions > *:nth-child(3) {
    grid-column: 1 / 3 !important;
  }

  .marketing-auth-actions > *:nth-child(4) {
    grid-column: 3 / 4 !important;
  }

  html[data-theme="light"] .theme-toggle,
  html[data-theme="light"] .marketing-auth-link,
  html[data-theme="light"] .marketing-lang-toggle {
    background: rgba(255, 255, 248, 0.84) !important;
    border: 1px solid rgba(145, 128, 90, 0.24) !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    box-shadow: none !important;
  }

  html[data-theme="dark"] .theme-toggle,
  html[data-theme="dark"] .marketing-auth-link,
  html[data-theme="dark"] .marketing-lang-toggle {
    background: rgba(18, 31, 54, 0.86) !important;
    border: 1px solid rgba(103, 139, 199, 0.44) !important;
    color: rgba(226, 235, 252, 0.92) !important;
    -webkit-text-fill-color: rgba(226, 235, 252, 0.92) !important;
    box-shadow: none !important;
  }

  .marketing-contact-nav-btn,
  html[data-theme="light"] .marketing-contact-nav-btn,
  html[data-theme="dark"] .marketing-contact-nav-btn {
    background: linear-gradient(135deg, #c91522, #e21b2d) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 18px 32px rgba(226, 27, 45, 0.28) !important;
  }
}

/* =========================================================
   OVERVIEW MOBILE HEADER SCROLL SUPPORT
   Mobile only. Desktop unaffected.
   ========================================================= */

@media screen and (max-width: 768px) {
  .marketing-nav-shell {
    transform-origin: top center !important;
  }

  body:not(:has(.marketing-page)) .marketing-nav-shell {
    transform: none !important;
  }
}

/* =========================================================
   MOBILE HEADER SIZE REDUCE
   Only mobile. Desktop unaffected.
   Makes header more compact.
   ========================================================= */

@media screen and (max-width: 768px) {

  .marketing-nav-shell {
    width: calc(100% - 28px) !important;
    max-width: calc(100% - 28px) !important;
    margin: 16px auto 20px auto !important;
    padding: 18px 14px 16px !important;
    border-radius: 24px !important;
  }

  .marketing-nav-main {
    gap: 14px !important;
  }

  .marketing-brand {
    font-size: 32px !important;
    line-height: 1.05 !important;
    margin-bottom: 14px !important;
  }

  .marketing-brand .brand-part,
  .marketing-brand .brand-part-rank,
  .marketing-brand .brand-part-mysalon {
    font-size: inherit !important;
    line-height: inherit !important;
  }

  .marketing-nav {
    margin: 0 auto 12px !important;
    padding: 14px 12px !important;
    border-radius: 22px !important;
    gap: 12px 20px !important;
  }

  .marketing-nav-link {
    font-size: 19px !important;
    line-height: 1.2 !important;
    padding: 3px 6px !important;
  }

  .marketing-nav .marketing-nav-link.is-active::after {
    height: 2px !important;
    margin-top: 3px !important;
  }

  .marketing-auth-actions {
    grid-template-columns: 54px 1fr 1fr !important;
    gap: 10px !important;
  }

  .marketing-auth-actions > * {
    min-height: 48px !important;
    border-radius: 18px !important;
    font-size: 18px !important;
  }

  .theme-toggle {
    font-size: 20px !important;
  }

  .marketing-contact-nav-btn {
    font-size: 18px !important;
  }

  .marketing-auth-link,
  .marketing-lang-toggle {
    font-size: 18px !important;
  }
}

/* =========================================================
   OVERVIEW MOBILE REAL SCROLL FIX + COMPACT HEADER
   Mobile only. Desktop unaffected.
   Fixes homepage internal scroll issue.
   ========================================================= */

@media screen and (max-width: 768px) {

  /* 1. Let the actual page scroll on Overview instead of .rms-mobile-scroll */
  html,
  body,
  #root,
  .app,
  .App,
  .marketing-page-overview {
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    position: static !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .marketing-page-overview .rms-overview-mobile,
  .marketing-page-overview .rms-snap-wrap,
  .marketing-page-overview .rms-mobile-scroll {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-y: visible !important;
    position: static !important;
    transform: none !important;
    scroll-snap-type: none !important;
    -webkit-overflow-scrolling: auto !important;
  }

  .marketing-page-overview .rms-mobile-panel,
  .marketing-page-overview .rms-mobile-panel-inner,
  .marketing-page-overview .marketing-hero-section,
  .marketing-page-overview .marketing-why-matters,
  .marketing-page-overview .marketing-section,
  .marketing-page-overview .card {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    scroll-snap-align: none !important;
  }

  /* 2. Make sure homepage header is never sticky/fixed */
  .marketing-page-overview .marketing-nav-shell,
  .marketing-page-overview .marketing-nav-main,
  .marketing-page-overview .marketing-auth-actions {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    translate: none !important;
    will-change: auto !important;
  }

  /* 3. Hide mobile dots/cues if they were only for snap scrolling */
  .marketing-page-overview .rms-mobile-dots,
  .marketing-page-overview .rms-mobile-scroll-cue,
  .marketing-page-overview [class*="mobile-dots"],
  .marketing-page-overview [class*="scroll-cue"] {
    display: none !important;
  }

  /* 4. Compact mobile header */
  .marketing-nav-shell {
    width: calc(100% - 28px) !important;
    max-width: calc(100% - 28px) !important;
    margin: 14px auto 18px auto !important;
    padding: 16px 13px 15px !important;
    border-radius: 24px !important;
  }

  .marketing-nav-main {
    gap: 10px !important;
  }

  .marketing-brand {
    font-size: 30px !important;
    line-height: 1.05 !important;
    margin-bottom: 10px !important;
  }

  .marketing-brand .brand-part,
  .marketing-brand .brand-part-rank,
  .marketing-brand .brand-part-mysalon {
    font-size: inherit !important;
    line-height: inherit !important;
  }

  .marketing-nav {
    margin: 0 auto 10px !important;
    padding: 12px 10px !important;
    border-radius: 20px !important;
    gap: 10px 16px !important;
  }

  .marketing-nav-link {
    font-size: 17px !important;
    line-height: 1.18 !important;
    padding: 3px 6px !important;
  }

  .marketing-nav .marketing-nav-link.is-active {
    color: #d8bd68 !important;
    -webkit-text-fill-color: #d8bd68 !important;
    background: rgba(216, 189, 104, 0.16) !important;
    box-shadow: inset 0 0 0 1px rgba(216, 189, 104, 0.36) !important;
  }

  .marketing-nav .marketing-nav-link.is-active::after {
    content: "" !important;
    display: block !important;
    width: 65% !important;
    height: 2px !important;
    margin: 3px auto 0 !important;
    border-radius: 999px !important;
    background: #d8bd68 !important;
  }

  .marketing-auth-actions {
    grid-template-columns: 50px 1fr 1fr !important;
    gap: 9px !important;
  }

  .marketing-auth-actions > * {
    min-height: 46px !important;
    border-radius: 17px !important;
    font-size: 17px !important;
  }

  .theme-toggle {
    font-size: 19px !important;
  }

  .marketing-contact-nav-btn {
    font-size: 17px !important;
  }

  .marketing-auth-link,
  .marketing-lang-toggle {
    font-size: 17px !important;
  }

  /* 5. Keep logo gradient */
  .marketing-brand,
  .marketing-brand span,
  .marketing-brand .brand-part {
    background: linear-gradient(135deg, #f5dc86 0%, #d8bd68 42%, #b98d32 100%) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
  }

  /* Zoca rebrand: Rank = white, MySalon = pink-purple gradient */
  html[data-theme="dark"] .marketing-brand .brand-part-rank,
  html[data-theme="light"] .marketing-brand .brand-part-rank {
    color: #F5F0FA !important;
    background: none !important;
    -webkit-text-fill-color: #F5F0FA !important;
  }

  html[data-theme="dark"] .marketing-brand .brand-part-mysalon,
  html[data-theme="light"] .marketing-brand .brand-part-mysalon {
    background: linear-gradient(118deg, #f4a8c7 0%, #e8a0d5 40%, #b15cc7 88%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
  }

  /* 6. Contact Us always red */
  .marketing-contact-nav-btn,
  html[data-theme="light"] .marketing-contact-nav-btn,
  html[data-theme="dark"] .marketing-contact-nav-btn {
    background: linear-gradient(135deg, #c91522, #e21b2d) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 14px 24px rgba(226, 27, 45, 0.24) !important;
  }
}

/* =========================================================
   Global Mobile Hamburger Header
   For standalone HTML pages only
   Desktop layout will not be affected
========================================================= */

@media (min-width: 1025px), (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
  .rms-mobile-menu-toggle,
  .rms-mobile-menu-backdrop,
  .rms-mobile-menu-panel {
    display: none !important;
  }
}

@media (max-width: 768px), (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
  .marketing-nav-shell {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: calc(100% - 40px) !important;
    max-width: 760px !important;
    min-height: 54px !important;
    height: auto !important;
    margin: 10px auto 16px !important;
    padding: 12px 18px !important;
    border-radius: 22px !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 1200 !important;
  }

  .marketing-nav-main {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }

  .marketing-brand {
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    margin: 0 !important;
  }

  .marketing-brand .brand-part,
  .marketing-brand .brand-part-rank,
  .marketing-brand .brand-part-mysalon {
    font-size: 20px !important;
    line-height: 1 !important;
    letter-spacing: -0.04em !important;
  }

  .marketing-nav,
  .marketing-auth-actions {
    display: none !important;
  }

  .rms-mobile-menu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(212, 175, 55, 0.28) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: inherit !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin-left: auto !important;
  }

  .rms-mobile-menu-toggle span {
    display: block !important;
    width: 17px !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: currentColor !important;
    box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor !important;
  }

  .rms-mobile-menu-backdrop {
    display: none;
    position: fixed !important;
    inset: 0 !important;
    z-index: 1998 !important;
    background: rgba(0, 0, 0, 0.42) !important;
    border: 0 !important;
    padding: 0 !important;
  }

  .rms-mobile-menu-panel {
    display: none;
    position: fixed !important;
    top: 72px !important;
    left: 14px !important;
    right: 14px !important;
    z-index: 1999 !important;
    padding: 14px !important;
    border-radius: 22px !important;
    background: rgba(8, 13, 26, 0.98) !important;
    border: 1px solid rgba(212, 175, 55, 0.24) !important;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45) !important;
    backdrop-filter: blur(18px) !important;
    color: rgba(255, 255, 255, 0.92) !important;
  }

  body.rms-mobile-menu-open .rms-mobile-menu-backdrop,
  body.rms-mobile-menu-open .rms-mobile-menu-panel {
    display: block !important;
  }

  .rms-mobile-menu-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 2px 2px 12px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  .rms-mobile-menu-title {
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: #e8a0d5 !important;
  }

  .rms-mobile-menu-close {
    width: 32px !important;
    height: 32px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: white !important;
    font-size: 20px !important;
    cursor: pointer !important;
  }

  .rms-mobile-menu-links {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 12px 0 !important;
  }

  .rms-mobile-menu-link {
    display: flex !important;
    align-items: center !important;
    min-height: 42px !important;
    padding: 10px 12px !important;
    border-radius: 14px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    color: rgba(255, 255, 255, 0.9) !important;
    background: rgba(255, 255, 255, 0.055) !important;
  }

  .rms-mobile-menu-link.is-active {
    color: #e8a0d5 !important;
    background: rgba(212, 175, 55, 0.14) !important;
    border: 1px solid rgba(212, 175, 55, 0.28) !important;
  }

  .rms-mobile-menu-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  .rms-mobile-menu-contact,
  .rms-mobile-menu-login {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 40px !important;
    padding: 9px 10px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
  }

  .rms-mobile-menu-contact {
    border: 0 !important;
    background: #d42121 !important;
    color: white !important;
  }

  .rms-mobile-menu-login {
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: white !important;
  }

  html[data-theme="light"] .rms-mobile-menu-panel {
    background: rgba(255, 252, 242, 0.98) !important;
    color: #1f2937 !important;
    border-color: rgba(212, 175, 55, 0.28) !important;
    box-shadow: 0 24px 70px rgba(120, 95, 30, 0.24) !important;
  }

  html[data-theme="light"] .rms-mobile-menu-link,
  html[data-theme="light"] .rms-mobile-menu-login,
  html[data-theme="light"] .rms-mobile-menu-close {
    color: #1f2937 !important;
    background: rgba(255, 255, 255, 0.72) !important;
    border-color: rgba(212, 175, 55, 0.28) !important;
  }

  html[data-theme="light"] .rms-mobile-menu-backdrop {
    background: rgba(246, 239, 218, 0.62) !important;
  }
}

/* =========================================================
   FORCE standalone HTML pages to use hamburger-only header
   Mobile only. Desktop unaffected.
========================================================= */

@media (max-width: 768px) {

  /* Header shell becomes one clean row */
  body .marketing-nav-shell {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: calc(100% - 40px) !important;
    max-width: 760px !important;
    min-height: 54px !important;
    height: auto !important;
    margin: 10px auto 16px !important;
    padding: 12px 18px !important;
    border-radius: 22px !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 1200 !important;
  }

  body .marketing-nav-main {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Keep only logo */
  body .marketing-brand {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    order: 1 !important;
  }

  body .marketing-brand .brand-part,
  body .marketing-brand .brand-part-rank,
  body .marketing-brand .brand-part-mysalon {
    font-size: 20px !important;
    line-height: 1 !important;
    letter-spacing: -0.04em !important;
  }

  /* Zoca rebrand logo colors on mobile */
  body .marketing-brand .brand-part-rank {
    color: #F5F0FA !important;
    background: none !important;
    -webkit-text-fill-color: #F5F0FA !important;
  }
  body .marketing-brand .brand-part-mysalon {
    background: linear-gradient(118deg, #f4a8c7 0%, #e8a0d5 40%, #b15cc7 88%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
  }

  /* Force-hide original desktop nav on mobile */
  body .marketing-nav-shell nav,
  body .marketing-nav-shell .marketing-nav,
  body .marketing-nav-shell .nav,
  body .marketing-nav-shell .nav-links,
  body .marketing-nav-shell .marketing-nav-link,
  body .marketing-nav-shell .marketing-auth-actions,
  body .marketing-nav-shell .theme-toggle,
  body .marketing-nav-shell .marketing-contact-nav-btn,
  body .marketing-nav-shell #marketingContactOpen,
  body .marketing-nav-shell .marketing-auth-link,
  body .marketing-nav-shell .marketing-lang-wrap,
  body .marketing-nav-shell .marketing-lang-toggle {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Keep hamburger button visible */
  body .marketing-nav-shell .rms-mobile-menu-toggle {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    border-radius: 999px !important;
    border: 1px solid rgba(212, 175, 55, 0.28) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: inherit !important;
    cursor: pointer !important;
    order: 2 !important;
    pointer-events: auto !important;
  }

  body .marketing-nav-shell .rms-mobile-menu-toggle span {
    display: block !important;
    width: 17px !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: currentColor !important;
    box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor !important;
  }

  /* Some standalone pages put nav/auth in extra wrappers */
  body .marketing-nav-shell > div:not(.marketing-nav-main):not(.rms-mobile-menu-panel),
  body .marketing-nav-shell .marketing-nav-main > div:not(.marketing-brand):not(.rms-mobile-menu-toggle),
  body .marketing-nav-shell .marketing-nav-main > ul,
  body .marketing-nav-shell .marketing-nav-main > nav {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  /* Make sure page hero starts after compact header */
  body .services-hero,
  body .service-detail-hero,
  body .tier-hero,
  body .product-hero {
    padding-top: 56px !important;
  }
}

/* =========================================================
   Mobile menu theme button
   Mobile only. Desktop unaffected.
========================================================= */

@media (max-width: 768px) {
  .rms-mobile-menu-utility {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-top: 10px !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  .rms-mobile-theme-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 36px !important;
    padding: 8px 12px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
  }

  .rms-mobile-theme-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    font-size: 14px !important;
    line-height: 1 !important;
  }

  .rms-mobile-theme-label {
    font-size: 12px !important;
    line-height: 1 !important;
  }

  html[data-theme="light"] .rms-mobile-menu-utility {
    border-top-color: rgba(31, 41, 55, 0.12) !important;
  }

  html[data-theme="light"] .rms-mobile-theme-btn {
    color: #1f2937 !important;
    background: rgba(255, 255, 255, 0.72) !important;
    border-color: rgba(212, 175, 55, 0.28) !important;
  }
}

/* =========================================================
   Match standalone HTML mobile header/menu to homepage
   Mobile only. Desktop unaffected.
========================================================= */

@media (max-width: 768px) {
  body .marketing-nav-shell {
    width: calc(100% - 40px) !important;
    max-width: 760px !important;
    min-height: 54px !important;
    height: auto !important;
    margin: 10px auto 16px !important;
    padding: 12px 18px !important;
    border-radius: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 1200 !important;
  }

  body .marketing-nav-main {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body .marketing-brand {
    order: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    white-space: nowrap !important;
    transform: none !important;
    position: static !important;
  }

  body .marketing-brand .brand-part,
  body .marketing-brand .brand-part-rank,
  body .marketing-brand .brand-part-mysalon {
    font-size: 20px !important;
    line-height: 1 !important;
    letter-spacing: -0.04em !important;
  }

  /* Zoca rebrand logo colors on mobile */
  body .marketing-brand .brand-part-rank {
    color: #F5F0FA !important;
    background: none !important;
    -webkit-text-fill-color: #F5F0FA !important;
  }
  body .marketing-brand .brand-part-mysalon {
    background: linear-gradient(118deg, #f4a8c7 0%, #e8a0d5 40%, #b15cc7 88%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
  }

  body .marketing-nav-shell nav,
  body .marketing-nav-shell .marketing-nav,
  body .marketing-nav-shell .marketing-nav-link,
  body .marketing-nav-shell .marketing-auth-actions,
  body .marketing-nav-shell .theme-toggle,
  body .marketing-nav-shell .marketing-contact-nav-btn,
  body .marketing-nav-shell #marketingContactOpen,
  body .marketing-nav-shell .marketing-auth-link,
  body .marketing-nav-shell .marketing-lang-wrap,
  body .marketing-nav-shell .marketing-lang-toggle {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body .marketing-nav-shell .rms-mobile-menu-toggle {
    order: 2 !important;
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    border-radius: 999px !important;
    border: 1px solid rgba(212, 175, 55, 0.28) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: inherit !important;
    cursor: pointer !important;
    pointer-events: auto !important;
  }

  body .marketing-nav-shell .rms-mobile-menu-toggle span {
    display: block !important;
    width: 17px !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: currentColor !important;
    box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor !important;
  }

  .rms-mobile-menu-panel {
    left: 14px !important;
    right: 14px !important;
    top: 72px !important;
    padding: 14px !important;
    border-radius: 22px !important;
  }

  .rms-mobile-menu-utility {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin-top: 10px !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  .rms-mobile-theme-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    cursor: pointer !important;
  }

  .rms-mobile-theme-label {
    display: none !important;
  }

  .rms-mobile-theme-icon {
    font-size: 15px !important;
    line-height: 1 !important;
  }

  .rms-mobile-lang-group {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-left: auto !important;
  }

  .rms-mobile-lang-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 38px !important;
    padding: 8px 14px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
  }

  html[data-theme="light"] .rms-mobile-menu-utility {
    border-top-color: rgba(31, 41, 55, 0.12) !important;
  }

  html[data-theme="light"] .rms-mobile-theme-btn,
  html[data-theme="light"] .rms-mobile-lang-btn {
    color: #1f2937 !important;
    background: rgba(255, 255, 255, 0.72) !important;
    border-color: rgba(212, 175, 55, 0.28) !important;
  }
}

/* iPad portrait for store review page only */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
  body.store-visit-ready #appShell {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  body.store-visit-ready #pageHero {
    width: calc(100% - 48px) !important;
    height: 32svh !important;
    max-height: 360px !important;
    margin: 24px auto 24px !important;
    padding: 24px 34px !important;
    border-radius: 34px !important;
  }

  body.store-visit-ready #title {
    font-size: clamp(46px, 7vw, 70px) !important;
    line-height: 0.95 !important;
  }

  body.store-visit-ready #subtitle {
    display: none !important;
  }

  body.store-visit-ready #layout,
  body.store-visit-ready .layout,
  body.store-visit-ready #intakeCard {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body.store-visit-ready #storeVisitShell {
    width: 100% !important;
    max-width: 720px !important;
    margin: 0 auto !important;
    padding: 18px 36px 48px !important;
    text-align: center !important;
  }

  body.store-visit-ready .store-visit-brand,
  body.store-visit-ready #storeVisitServiceCard {
    display: none !important;
  }

  body.store-visit-ready #storeVisitHeroTitle {
    font-size: clamp(34px, 5vw, 52px) !important;
    line-height: 1.08 !important;
  }

  body.store-visit-ready #storeVisitHeroLead {
    font-size: clamp(19px, 2.5vw, 24px) !important;
    line-height: 1.45 !important;
  }

  body.store-visit-ready .store-visit-star-tile {
    width: 62px !important;
    height: 62px !important;
    min-width: 62px !important;
    border-radius: 20px !important;
    font-size: 26px !important;
  }

  body.store-visit-ready .store-visit-cta-stack {
    max-width: 560px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}