/* =========================================================
   Blume X Website — macOS System Skin SAFE v2
   Load after /styles.css and existing page-specific CSS.

   This version is intentionally paint-only:
   - It changes tokens, colors, surfaces, typography, nav, buttons and cards.
   - It does NOT change core layout, display, position, or hidden states.
   - It includes a reveal fail-safe because regular static pages hide .reveal
     content until script.js adds .is-visible.
   ========================================================= */

:root {
  color-scheme: light;

  --brand-1: #18181b;
  --brand-2: #3f3f46;
  --brand-3: #71717a;

  --bg: #fbfbfd;
  --bg-2: #f5f5f7;
  --bg-3: #ececf0;

  --ink: #0a0a0b;
  --text: rgba(24, 24, 27, .90);
  --text-2: rgba(24, 24, 27, .76);
  --muted: rgba(24, 24, 27, .62);
  --muted-2: rgba(24, 24, 27, .48);

  --line: rgba(24, 24, 27, .105);
  --line-2: rgba(24, 24, 27, .07);

  --surface: rgba(255, 255, 255, .76);
  --surface-solid: #ffffff;
  --surface-strong: rgba(255, 255, 255, .92);
  --surface-highlight: rgba(255, 255, 255, .70);

  --shadow-lg:
    0 24px 60px rgba(24, 24, 27, .10),
    0 8px 22px rgba(24, 24, 27, .065),
    inset 0 1px 0 rgba(255, 255, 255, .60);
  --shadow-md:
    0 16px 44px rgba(24, 24, 27, .08),
    0 6px 16px rgba(24, 24, 27, .05),
    inset 0 1px 0 rgba(255, 255, 255, .52);
  --shadow-sm:
    0 10px 28px rgba(24, 24, 27, .055),
    inset 0 1px 0 rgba(255, 255, 255, .42);

  --radius-xl: 30px;
  --radius-lg: 24px;
  --radius-md: 18px;
  --radius-sm: 13px;

  --topbar-h: 72px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --focus: 0 0 0 4px rgba(24, 24, 27, .105);

  --success: #34c759;
  --success-rgb: 52, 199, 89;
  --success-contrast: #ffffff;
  --success-soft: rgba(var(--success-rgb), .12);

  --warning: #ff9f0a;
  --warning-rgb: 255, 159, 10;
  --warning-contrast: #111827;
  --warning-soft: rgba(var(--warning-rgb), .16);

  --danger: #ff3b30;
  --danger-rgb: 255, 59, 48;
  --danger-contrast: #ffffff;
  --danger-soft: rgba(var(--danger-rgb), .12);

  --info: #0a84ff;
  --info-rgb: 10, 132, 255;
  --info-contrast: #ffffff;
  --info-soft: rgba(var(--info-rgb), .10);

  --premium-action: #18181b;
  --premium-action-hover: #27272a;
  --premium-action-text: #ffffff;
  --premium-accent: #18181b;
  --premium-success: var(--success);
  --premium-bg: var(--bg);
  --premium-panel: var(--surface);
  --premium-panel-solid: var(--surface-solid);
  --premium-line: var(--line);
  --premium-ease: var(--ease);

  --page-ambient:
    radial-gradient(circle at 12% -12%, rgba(255, 255, 255, .96), transparent 34%),
    radial-gradient(circle at 90% 0%, rgba(228, 228, 231, .72), transparent 34%),
    linear-gradient(135deg, #fbfbfd 0%, #f5f5f7 48%, #ececf0 100%);
}

html[data-theme="dark"],
body[data-theme="dark"] {
  color-scheme: dark;

  --brand-1: #f4f4f5;
  --brand-2: #d4d4d8;
  --brand-3: #a1a1aa;

  --bg: #050506;
  --bg-2: #0a0a0b;
  --bg-3: #18181b;

  --ink: #fafafa;
  --text: rgba(250, 250, 250, .88);
  --text-2: rgba(250, 250, 250, .74);
  --muted: rgba(250, 250, 250, .58);
  --muted-2: rgba(250, 250, 250, .44);

  --line: rgba(255, 255, 255, .105);
  --line-2: rgba(255, 255, 255, .07);

  --surface: rgba(24, 24, 27, .68);
  --surface-solid: #18181b;
  --surface-strong: rgba(24, 24, 27, .88);
  --surface-highlight: rgba(255, 255, 255, .10);

  --shadow-lg:
    0 28px 70px rgba(0, 0, 0, .46),
    0 12px 30px rgba(0, 0, 0, .30),
    inset 0 1px 0 rgba(255, 255, 255, .08);
  --shadow-md:
    0 20px 56px rgba(0, 0, 0, .38),
    0 8px 22px rgba(0, 0, 0, .24),
    inset 0 1px 0 rgba(255, 255, 255, .07);
  --shadow-sm:
    0 10px 30px rgba(0, 0, 0, .26),
    inset 0 1px 0 rgba(255, 255, 255, .06);

  --focus: 0 0 0 4px rgba(255, 255, 255, .13);

  --success: #30d158;
  --warning: #ffd60a;
  --danger: #ff453a;
  --info: #64d2ff;

  --premium-action: #f4f4f5;
  --premium-action-hover: #ffffff;
  --premium-action-text: #0a0a0b;

  --page-ambient:
    radial-gradient(circle at 12% -10%, rgba(82, 82, 91, .34), transparent 34%),
    radial-gradient(circle at 90% -2%, rgba(39, 39, 42, .66), transparent 36%),
    linear-gradient(135deg, #050506 0%, #0a0a0b 48%, #18181b 100%);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    color-scheme: dark;

    --brand-1: #f4f4f5;
    --brand-2: #d4d4d8;
    --brand-3: #a1a1aa;

    --bg: #050506;
    --bg-2: #0a0a0b;
    --bg-3: #18181b;

    --ink: #fafafa;
    --text: rgba(250, 250, 250, .88);
    --text-2: rgba(250, 250, 250, .74);
    --muted: rgba(250, 250, 250, .58);
    --muted-2: rgba(250, 250, 250, .44);

    --line: rgba(255, 255, 255, .105);
    --line-2: rgba(255, 255, 255, .07);

    --surface: rgba(24, 24, 27, .68);
    --surface-solid: #18181b;
    --surface-strong: rgba(24, 24, 27, .88);
    --surface-highlight: rgba(255, 255, 255, .10);

    --shadow-lg:
      0 28px 70px rgba(0, 0, 0, .46),
      0 12px 30px rgba(0, 0, 0, .30),
      inset 0 1px 0 rgba(255, 255, 255, .08);
    --shadow-md:
      0 20px 56px rgba(0, 0, 0, .38),
      0 8px 22px rgba(0, 0, 0, .24),
      inset 0 1px 0 rgba(255, 255, 255, .07);
    --shadow-sm:
      0 10px 30px rgba(0, 0, 0, .26),
      inset 0 1px 0 rgba(255, 255, 255, .06);

    --focus: 0 0 0 4px rgba(255, 255, 255, .13);

    --success: #30d158;
    --warning: #ffd60a;
    --danger: #ff453a;
    --info: #64d2ff;

    --premium-action: #f4f4f5;
    --premium-action-hover: #ffffff;
    --premium-action-text: #0a0a0b;

    --page-ambient:
      radial-gradient(circle at 12% -10%, rgba(82, 82, 91, .34), transparent 34%),
      radial-gradient(circle at 90% -2%, rgba(39, 39, 42, .66), transparent 36%),
      linear-gradient(135deg, #050506 0%, #0a0a0b 48%, #18181b 100%);
  }
}

/* Visibility safety net.
   The original site hides .reveal until script.js adds .is-visible. This skin must
   never be able to leave whole static pages invisible. */
html[data-macos-system="ready"] .reveal,
html[data-macos-system="ready"] .reveal:not(.is-visible),
html[data-macos-system="ready"] [data-reveal],
html[data-macos-system="ready"] [data-animate],
html[data-macos-system="ready"] [data-animate-on-scroll] {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
}

body {
  background: var(--page-ambient) !important;
  background-attachment: fixed !important;
  color: var(--ink) !important;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "SF Pro Text",
    "Inter var",
    "Inter",
    "Plus Jakarta Sans",
    "Manrope",
    "Segoe UI",
    system-ui,
    sans-serif !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

p,
li {
  color: var(--text) !important;
}

p {
  line-height: 1.65 !important;
}

small,
.muted,
.hero__sub,
.heroMain__sub,
.section__sub,
.sectionHead p,
.card p,
.featureCard p,
.railCard p,
.priceCard p,
.caseCard p,
.mega__cardSub,
.mega__bottomSub,
.whyCard__sub,
.whyTile__p,
.bp-small,
.bp-sectionHead p,
.bp-card p,
.bp-faqItem p {
  color: var(--muted) !important;
}

h1,
.hero h1,
.heroMain h1,
.pageHero h1,
.bp-title {
  color: var(--ink) !important;
  letter-spacing: -.065em !important;
  text-wrap: balance;
}

h2,
.section h2,
.pageSection h2,
.bp-section h2,
.bp-copy h2 {
  color: var(--ink) !important;
  letter-spacing: -.05em !important;
  text-wrap: balance;
}

h3,
.card h3,
.featureCard h3,
.bp-card h3 {
  color: var(--ink) !important;
  letter-spacing: -.03em !important;
  text-wrap: balance;
}

::selection {
  background: rgba(24, 24, 27, .14) !important;
}

html[data-theme="dark"] ::selection,
body[data-theme="dark"] ::selection {
  background: rgba(255, 255, 255, .18) !important;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: none !important;
  box-shadow: var(--focus) !important;
}

/* Header / nav */
.topbar,
.bp-header {
  background:
    linear-gradient(135deg, var(--surface-highlight), transparent 42%),
    rgba(251, 251, 253, .82) !important;
  border-bottom: 1px solid var(--line) !important;
  box-shadow: none !important;
  backdrop-filter: saturate(180%) blur(20px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
}

html[data-theme="dark"] .topbar,
body[data-theme="dark"] .topbar,
html[data-theme="dark"] .bp-header,
body[data-theme="dark"] .bp-header {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .08), transparent 44%),
    rgba(10, 10, 11, .76) !important;
}

.topbar.is-scrolled,
.bp-header.is-scrolled {
  box-shadow:
    0 1px 0 var(--line),
    0 18px 56px rgba(24, 24, 27, .08) !important;
}

.nav__link,
.topbar__textlink,
.bp-links a {
  color: var(--text-2) !important;
}

.nav__link:hover,
.topbar__textlink:hover,
.bp-links a:hover,
.nav__link[aria-expanded="true"],
.nav__link.is-active {
  background: rgba(24, 24, 27, .06) !important;
  color: var(--ink) !important;
}

html[data-theme="dark"] .nav__link:hover,
html[data-theme="dark"] .topbar__textlink:hover,
html[data-theme="dark"] .nav__link[aria-expanded="true"],
html[data-theme="dark"] .nav__link.is-active,
body[data-theme="dark"] .nav__link:hover,
body[data-theme="dark"] .topbar__textlink:hover,
body[data-theme="dark"] .nav__link[aria-expanded="true"],
body[data-theme="dark"] .nav__link.is-active {
  background: rgba(255, 255, 255, .08) !important;
  color: var(--ink) !important;
}

.nav-backdrop.is-visible {
  background: rgba(24, 24, 27, .30) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.dd.dd--blume {
  border-top: 1px solid var(--line) !important;
  border-bottom: 1px solid var(--line) !important;
  background:
    linear-gradient(135deg, var(--surface-highlight), transparent 42%),
    rgba(251, 251, 253, .92) !important;
  backdrop-filter: saturate(180%) blur(22px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(22px) !important;
}

html[data-theme="dark"] .dd.dd--blume,
body[data-theme="dark"] .dd.dd--blume {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .08), transparent 44%),
    rgba(10, 10, 11, .90) !important;
}

.mega__title,
.eyebrow,
.kicker,
.section__eyebrow,
.hero__eyebrow,
.heroMain__eyebrow,
.bp-eyebrow,
.bp-kicker,
.badge,
.pill,
.tag {
  color: var(--muted) !important;
  letter-spacing: .11em !important;
}

.mega__link,
.mega__bottomCard {
  color: var(--text) !important;
  border-radius: 14px !important;
}

.mega__link:hover,
.mega__bottomCard:hover {
  background: rgba(24, 24, 27, .055) !important;
  color: var(--ink) !important;
}

html[data-theme="dark"] .mega__link:hover,
html[data-theme="dark"] .mega__bottomCard:hover,
body[data-theme="dark"] .mega__link:hover,
body[data-theme="dark"] .mega__bottomCard:hover {
  background: rgba(255, 255, 255, .07) !important;
}

.mega__ico,
.mega__updatesIco {
  color: var(--muted) !important;
}

.mega__link:hover .mega__ico,
.mega__updates a:hover .mega__updatesIco {
  color: var(--ink) !important;
}

.mega__card,
.whyTile,
.whyCard__media {
  border-color: var(--line) !important;
  background:
    linear-gradient(135deg, var(--surface-highlight), transparent 44%),
    var(--surface) !important;
  box-shadow: var(--shadow-sm) !important;
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
}

.mega__card:hover,
.whyTile:hover,
.whyCard:hover .whyCard__media {
  background:
    linear-gradient(135deg, var(--surface-highlight), transparent 38%),
    var(--surface-strong) !important;
  box-shadow: var(--shadow-md) !important;
}

.whyCard__title,
.whyTile__h,
.mega__cardName,
.mega__bottomTitle {
  color: var(--ink) !important;
}

.burger {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* Buttons / CTAs */
.btn,
.bp-btn {
  border-radius: 999px !important;
  font-weight: 760 !important;
  letter-spacing: -.014em !important;
  transition:
    transform .20s var(--ease),
    background-color .20s var(--ease),
    border-color .20s var(--ease),
    color .20s var(--ease),
    box-shadow .20s var(--ease),
    opacity .20s var(--ease) !important;
}

.btn:hover,
.bp-btn:hover {
  transform: translateY(-1px) !important;
}

.btn:active,
.bp-btn:active {
  transform: translateY(0) scale(.985) !important;
  opacity: .94 !important;
}

.btn--primary,
.btn--brand,
.bp-btn--primary,
.topbar .btn--primary,
.topbar .btn--brand,
.hero .btn--primary,
.heroMain .btn--primary,
[class*="cta"] .btn--primary {
  background: var(--premium-action) !important;
  color: var(--premium-action-text) !important;
  border-color: rgba(24, 24, 27, .9) !important;
  box-shadow:
    0 12px 26px rgba(24, 24, 27, .14),
    inset 0 1px 0 rgba(255, 255, 255, .20) !important;
}

html[data-theme="dark"] .btn--primary,
html[data-theme="dark"] .btn--brand,
html[data-theme="dark"] .bp-btn--primary,
body[data-theme="dark"] .btn--primary,
body[data-theme="dark"] .btn--brand,
body[data-theme="dark"] .bp-btn--primary {
  border-color: rgba(255, 255, 255, .86) !important;
  box-shadow:
    0 14px 32px rgba(0, 0, 0, .34),
    inset 0 1px 0 rgba(255, 255, 255, .30) !important;
}

.btn--primary:hover,
.btn--brand:hover,
.bp-btn--primary:hover,
.topbar .btn--primary:hover,
.topbar .btn--brand:hover {
  background: var(--premium-action-hover) !important;
}

.btn--outline,
.btn--ghost,
.bp-btn--secondary {
  color: var(--ink) !important;
  border-color: var(--line) !important;
  background:
    linear-gradient(135deg, var(--surface-highlight), transparent 44%),
    var(--surface) !important;
  box-shadow: var(--shadow-sm) !important;
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
}

.btn--outline:hover,
.btn--ghost:hover,
.bp-btn--secondary:hover {
  background:
    linear-gradient(135deg, var(--surface-highlight), transparent 40%),
    var(--surface-strong) !important;
}

.btn--enterprise,
a[href*="/enterprise"].btn,
a[href*="/enterprise"].bp-btn {
  background: transparent !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

/* Cards / surfaces: targeted only, no broad [class*="card"] selectors. */
.card,
.featureCard,
.railCard,
.priceCard,
.caseCard,
.bp-card,
.bp-step,
.bp-app,
.bp-faqItem,
.panel,
.surface {
  border-color: var(--line) !important;
  background:
    linear-gradient(135deg, var(--surface-highlight), transparent 44%),
    var(--surface) !important;
  box-shadow: var(--shadow-sm) !important;
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
}

.card:hover,
.featureCard:hover,
.railCard:hover,
.priceCard:hover,
.caseCard:hover,
.bp-card:hover {
  border-color: var(--line) !important;
  box-shadow: var(--shadow-md) !important;
}

.darkBand,
.bp-darkBand,
.ctaBand,
.finalCta {
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-xl) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, .12), transparent 34%),
    linear-gradient(135deg, #0a0a0b 0%, #18181b 100%) !important;
  color: #fafafa !important;
  box-shadow: var(--shadow-lg) !important;
}

.darkBand h1,
.darkBand h2,
.darkBand h3,
.bp-darkBand h1,
.bp-darkBand h2,
.bp-darkBand h3,
.ctaBand h1,
.ctaBand h2,
.ctaBand h3,
.finalCta h1,
.finalCta h2,
.finalCta h3 {
  color: #fafafa !important;
}

.darkBand p,
.bp-darkBand p,
.ctaBand p,
.finalCta p {
  color: rgba(250, 250, 250, .72) !important;
}

.darkBand .btn--primary,
.bp-darkBand .bp-btn--primary,
.ctaBand .btn--primary,
.finalCta .btn--primary {
  background: #ffffff !important;
  color: #0a0a0b !important;
  border-color: #ffffff !important;
}

input,
textarea,
select {
  border-color: var(--line) !important;
  background:
    linear-gradient(135deg, var(--surface-highlight), transparent 44%),
    var(--surface) !important;
  color: var(--ink) !important;
  box-shadow: var(--shadow-sm) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--muted-2) !important;
}

label {
  color: var(--text-2) !important;
}

/* Semantic statuses */
.status,
.statusPill,
.alert,
.notice,
.toast,
.bp-proof span {
  border-radius: 999px;
}

.status--success,
.alert--success,
.notice--success,
.badge--success,
.pill--success,
.success {
  color: #147d32 !important;
  background: var(--success-soft) !important;
  border-color: rgba(var(--success-rgb), .24) !important;
}

.status--warning,
.alert--warning,
.notice--warning,
.badge--warning,
.pill--warning,
.warning {
  color: #a15c00 !important;
  background: var(--warning-soft) !important;
  border-color: rgba(var(--warning-rgb), .28) !important;
}

.status--danger,
.status--error,
.alert--danger,
.alert--error,
.notice--danger,
.notice--error,
.badge--danger,
.badge--error,
.error,
.danger {
  color: #b42318 !important;
  background: var(--danger-soft) !important;
  border-color: rgba(var(--danger-rgb), .24) !important;
}

.status--info,
.alert--info,
.notice--info,
.badge--info,
.info {
  color: #175cd3 !important;
  background: var(--info-soft) !important;
  border-color: rgba(var(--info-rgb), .20) !important;
}

/* Media frames */
.mediaFrame,
.figure,
.videoFrame,
.phoneFrame,
.deviceFrame,
.bp-device,
.bp-adminFloat,
.bp-paymentFloat,
.bp-importFloat,
.heroVisual,
.heroMain__visual {
  border-color: var(--line) !important;
  background:
    linear-gradient(135deg, var(--surface-highlight), transparent 44%),
    var(--surface) !important;
  box-shadow: var(--shadow-lg) !important;
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
}

figcaption,
.caption {
  color: var(--muted) !important;
  background: rgba(255, 255, 255, .70) !important;
  border-color: var(--line) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

html[data-theme="dark"] figcaption,
html[data-theme="dark"] .caption,
body[data-theme="dark"] figcaption,
body[data-theme="dark"] .caption {
  background: rgba(24, 24, 27, .70) !important;
}

.footer,
.siteFooter,
.bp-footer {
  border-top-color: var(--line) !important;
  background: transparent !important;
  color: var(--muted) !important;
}

@media (max-width: 640px) {

  h1,
  .hero h1,
  .heroMain h1,
  .pageHero h1,
  .bp-title {
    letter-spacing: -.052em !important;
  }

  p {
    line-height: 1.62 !important;
  }
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }

  .btn:hover,
  .bp-btn:hover,
  .card:hover,
  .featureCard:hover,
  .railCard:hover,
  .priceCard:hover,
  .caseCard:hover,
  .bp-card:hover,
  .mega__card:hover,
  .whyTile:hover,
  .mega__link:hover {
    transform: none !important;
  }
}

/* =========================================================
   Auto dark mode component fixes
   Makes OS dark mode behave like explicit data-theme="dark"
   ========================================================= */

@media (prefers-color-scheme: dark) {

  html[data-theme="auto"] .topbar,
  html[data-theme="auto"] .bp-header {
    background:
      linear-gradient(135deg, rgba(255, 255, 255, .08), transparent 44%),
      rgba(10, 10, 11, .76) !important;
    border-bottom-color: var(--line) !important;
    box-shadow: none !important;
  }

  html[data-theme="auto"] .topbar.is-scrolled,
  html[data-theme="auto"] .bp-header.is-scrolled {
    background:
      linear-gradient(135deg, rgba(255, 255, 255, .08), transparent 44%),
      rgba(10, 10, 11, .88) !important;
    box-shadow:
      0 1px 0 var(--line),
      0 18px 56px rgba(0, 0, 0, .34) !important;
  }

  html[data-theme="auto"] .burger {
    background: rgba(24, 24, 27, .68) !important;
    border-color: var(--line) !important;
    box-shadow: var(--shadow-sm) !important;
  }

  html[data-theme="auto"] .burger>svg {
    color: var(--ink) !important;
  }

  html[data-theme="auto"] .dd.dd--blume {
    background:
      linear-gradient(135deg, rgba(255, 255, 255, .08), transparent 44%),
      rgba(10, 10, 11, .90) !important;
    border-color: var(--line) !important;
  }

  html[data-theme="auto"] .mega,
  html[data-theme="auto"] [data-drawer].is-open [data-screen] {
    background:
      linear-gradient(135deg, rgba(255, 255, 255, .08), transparent 44%),
      rgba(10, 10, 11, .94) !important;
    color: var(--ink) !important;
    border-color: var(--line) !important;
  }

  html[data-theme="auto"] [data-drawer] a,
  html[data-theme="auto"] [data-drawer] button {
    color: var(--text) !important;
  }

  html[data-theme="auto"] .nav__link:hover,
  html[data-theme="auto"] .topbar__textlink:hover,
  html[data-theme="auto"] .nav__link[aria-expanded="true"],
  html[data-theme="auto"] .nav__link.is-active,
  html[data-theme="auto"] .mega__link:hover,
  html[data-theme="auto"] .mega__bottomCard:hover {
    background: rgba(255, 255, 255, .08) !important;
    color: var(--ink) !important;
  }

  html[data-theme="auto"] .mega__card,
  html[data-theme="auto"] .whyTile,
  html[data-theme="auto"] .whyCard__media,
  html[data-theme="auto"] .card,
  html[data-theme="auto"] .featureCard,
  html[data-theme="auto"] .railCard,
  html[data-theme="auto"] .priceCard,
  html[data-theme="auto"] .caseCard,
  html[data-theme="auto"] .bp-card,
  html[data-theme="auto"] .bp-step,
  html[data-theme="auto"] .bp-app,
  html[data-theme="auto"] .bp-faqItem,
  html[data-theme="auto"] .panel,
  html[data-theme="auto"] .surface {
    border-color: var(--line) !important;
    background:
      linear-gradient(135deg, var(--surface-highlight), transparent 44%),
      var(--surface) !important;
    box-shadow: var(--shadow-sm) !important;
  }

  html[data-theme="auto"] .mega__card:hover,
  html[data-theme="auto"] .whyTile:hover,
  html[data-theme="auto"] .card:hover,
  html[data-theme="auto"] .featureCard:hover,
  html[data-theme="auto"] .railCard:hover,
  html[data-theme="auto"] .priceCard:hover,
  html[data-theme="auto"] .caseCard:hover,
  html[data-theme="auto"] .bp-card:hover {
    background:
      linear-gradient(135deg, var(--surface-highlight), transparent 38%),
      var(--surface-strong) !important;
    box-shadow: var(--shadow-md) !important;
  }

  html[data-theme="auto"] figcaption,
  html[data-theme="auto"] .caption {
    background: rgba(24, 24, 27, .70) !important;
    border-color: var(--line) !important;
  }
}

/* Prevent nav backdrop from looking like a stuck dark overlay */
.nav-backdrop:not(.is-visible) {
  opacity: 0 !important;
  pointer-events: none !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* The desktop mega-menu backdrop should not exist on mobile */
@media (max-width: 980px) {
  .nav-backdrop {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .dd {
    display: none !important;
  }
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] [data-drawer]:not(.is-open) {
    background: transparent !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  html[data-theme="auto"] [data-drawer]:not(.is-open) [data-screen] {
    background: transparent !important;
  }
}