/* =============================================================================
   DARK MODE — Catch & Release (B2C landing page)

   Loaded with  <link rel="stylesheet" href="css/dark.css" media="(prefers-color-scheme: dark)">
   as the LAST stylesheet in <head>, so it only exists in dark mode and light mode
   stays exactly as designed. No toggle, no JS: the OS / browser decides.

   Design: calm, premium, near-black neutral UI (think Linear / Vercel). The brand
   look from the Instagram studio — near-black with a soft grey-black gradient,
   white heavy type, red accents — not an automatic inversion.

   Layers
     1. Palette  (--dm-*)                 new semantic tokens, dark mode only
     2. Token remap (variables.css)       the old light grays become a dark scale, so
                                          anything that is not overridden below (e.g.
                                          the hidden sections) still lands on dark
     3. Components                        explicit overrides where colours are hard-coded
     4. Hidden/legacy sections            token-level safety net only

   Rules of thumb used throughout
     - surfaces step up in lightness:  bg < surface < surface-2 < surface-3
     - borders are white hairlines (alpha), never grey fills
     - shadows are replaced by hairlines + inset highlight (they vanish on dark)
     - white text on brand-red stays #fff; red TEXT uses a lighter red (--dm-red-text)
     - everything that fades "to white" fades to --dm-bg instead
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. PALETTE + 2. TOKEN REMAP
   ----------------------------------------------------------------------------- */
:root {
  color-scheme: dark;

  /* surfaces */
  --dm-bg: #0a0a0b;
  --dm-bg-alt: #0d0d0e;
  --dm-surface: #121213;
  --dm-surface-2: #1a1a1b;
  --dm-surface-3: #242425;
  --dm-footer: #060607;

  /* hairlines */
  --dm-line: rgba(255, 255, 255, 0.08);
  --dm-line-strong: rgba(255, 255, 255, 0.15);

  /* text (contrast on --dm-surface-2: 15.9 / 11.7 / 6.9 / 5.4) */
  --dm-text: #f5f5f5;
  --dm-text-2: #d4d4d4;
  --dm-muted: #a3a3a3;
  --dm-faint: #8f8f8f;

  /* brand */
  --dm-red: #ff0000;            /* brand red for decorative fills, glows, borders */
  --dm-red-fill: #e3121b;       /* red behind WHITE text: same brand red, a notch deeper => 4.8:1 (AA) */
  --dm-red-fill-hover: #c70f16;
  --dm-red-text: #ff5c5c;       /* red used as TEXT or thin icon strokes on dark */
  --dm-red-soft: rgba(255, 70, 70, 0.13);
  --dm-red-line: rgba(255, 70, 70, 0.32);
  --dm-red-glow: rgba(255, 42, 42, 0.45);
  --dm-focus: #ff6b6b;

  /* status */
  --dm-green-text: #34d399;
  --dm-green-soft: rgba(16, 185, 129, 0.14);
  --dm-green-line: rgba(16, 185, 129, 0.38);
  --dm-amber-text: #fbbf24;
  --dm-amber-soft: rgba(245, 158, 11, 0.16);

  /* elevation = hairline + inset top highlight + deep soft shadow */
  --dm-card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 2px rgba(0, 0, 0, 0.45);

  /* ---- variables.css remap ---- */
  --color-white: var(--dm-bg);          /* "white" = the page surface in dark mode */
  --color-gray-50: #111112;
  --color-gray-100: #19191a;
  --color-gray-200: #262627;
  --color-gray-300: #38383a;
  --color-gray-400: #8f8f8f;
  --color-gray-500: #a3a3a3;
  --color-gray-600: #b8b8b8;
  --color-gray-700: #d0d0d0;
  --color-gray-800: #e6e6e6;
  --color-gray-900: #f5f5f5;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 6px 16px -4px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.03);
  --shadow-lg: 0 14px 32px -10px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.03);
  --shadow-xl: 0 26px 56px -16px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.03);

  /* ---- bento-features.css remap ---- */
  --bento-bg: var(--dm-surface);
  --bento-border: var(--dm-line);
  --bento-shadow: var(--dm-card-shadow);
  --primary-soft: var(--dm-red-soft);

  /* values the GSAP dashboard pulse returns to (read by js/bento-animations.js) */
  --bento-video-rest-border: rgba(255, 255, 255, 0.09);
  --bento-video-rest-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* -----------------------------------------------------------------------------
   BASE
   ----------------------------------------------------------------------------- */
html {
  background-color: var(--dm-bg);
  scrollbar-color: #3a3a3c var(--dm-bg);
}

body {
  background-color: var(--dm-bg);
  color: var(--dm-text-2);
}

::selection {
  background: rgba(255, 60, 60, 0.4);
  color: #fff;
}

:focus-visible {
  outline: 2px solid var(--dm-focus);
  outline-offset: 3px;
}

/* generic form controls (none on the live pages today, ready for modals / forms) */
input,
select,
textarea {
  background-color: var(--dm-surface-2);
  color: var(--dm-text);
  border-color: var(--dm-line-strong);
}

input::placeholder,
textarea::placeholder {
  color: var(--dm-faint);
}

/* Embedded players (YouTube, Cap): an iframe whose document is light-scheme inside a
   dark-scheme page gets an opaque WHITE canvas until it paints. Declaring the iframe
   itself light-scheme keeps it transparent, so the dark video stage shows while loading. */
iframe {
  color-scheme: light;
}

/* -----------------------------------------------------------------------------
   NAVIGATION  (navigation.css, mobile-enhancements.css, i18n.css)
   Frosted bar. The blur lives on a pseudo-element on purpose: backdrop-filter on
   .navigation itself would become the containing block of the fixed mobile menu.
   ----------------------------------------------------------------------------- */
.navigation {
  background: transparent;
  border-bottom-color: transparent;
  isolation: isolate;
}

.navigation::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(10, 10, 11, 0.78);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  pointer-events: none;
}

.navigation:not(.scrolled)::before {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.navigation.scrolled {
  border-bottom-color: var(--dm-line);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.9);
}

/* logo.svg is painted with currentColor inside an <img> => black. Flip it to white. */
.brand__icon {
  filter: invert(1);
}

.brand__name {
  color: var(--dm-text);
}

.navigation__toggle {
  color: var(--dm-text-2);
}

.navigation__toggle:hover,
.nav__link:hover,
.nav__link.active {
  color: var(--dm-red-text);
}

.nav__link {
  color: var(--dm-muted);
}

.auth-button--login {
  color: var(--dm-muted);
}

.auth-button--login:hover {
  color: var(--dm-text);
  background-color: rgba(255, 255, 255, 0.07);
}

/* the near-black pill of light mode becomes the white pill of dark mode */
.auth-button--signup {
  color: #0a0a0b;
  background-color: #f5f5f5;
  border-color: #f5f5f5;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 6px 18px -8px rgba(255, 255, 255, 0.28);
}

.auth-button--signup:hover {
  background-color: #ffffff;
  border-color: #ffffff;
  box-shadow: 0 1px 0 #fff inset, 0 10px 24px -8px rgba(255, 255, 255, 0.4);
}

.auth-button__icon-container {
  background-color: #fff; /* holds a multi-colour brand mark: stays white */
}

@media (max-width: 767px) {
  .navigation__menu {
    background: var(--dm-bg);
    box-shadow: none;
    border-top: 1px solid var(--dm-line);
  }

  .nav__link {
    border-bottom-color: var(--dm-line);
  }

  .nav__link:hover {
    background-color: rgba(255, 255, 255, 0.04);
  }

  .navigation__auth--mobile {
    border-top-color: var(--dm-line);
  }

  .desktop-suggestion-banner {
    background: var(--dm-surface-2);
    border-color: var(--dm-line-strong);
    color: var(--dm-text-2);
    box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.7);
  }

  .desktop-suggestion-banner__icon,
  .desktop-suggestion-banner__highlight {
    color: var(--dm-red-text);
  }

  *:focus-visible {
    outline: 2px solid var(--dm-focus);
    outline-offset: 3px;
  }

  * {
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.08);
  }
}

/* language switcher (currently hidden by i18n.css, kept consistent for when it returns) */
.lang-button {
  border-color: var(--dm-line-strong);
  color: var(--dm-text-2);
}

.lang-button:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.25);
}

.lang-button--active {
  background: var(--dm-red-soft);
  border-color: var(--dm-red-line);
  color: var(--dm-red-text);
}

.lang-separator {
  color: rgba(255, 255, 255, 0.25);
}

/* -----------------------------------------------------------------------------
   HERO  (hero.css)
   Soft grey-black gradient from the top (the IG look) + a restrained red glow
   behind the headline; the video carries its own red under-glow.
   ----------------------------------------------------------------------------- */
.hero {
  background:
    radial-gradient(ellipse 70% 42% at 50% 0%, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0) 72%),
    radial-gradient(ellipse 42% 26% at 50% 24%, rgba(255, 40, 40, 0.085) 0%, rgba(255, 40, 40, 0) 72%),
    var(--dm-bg);
}

.hero__headline {
  color: var(--dm-text);
}

.hero__headline-highlight {
  color: var(--dm-red-text);
  text-shadow: 0 0 56px rgba(255, 50, 50, 0.3);
}

.hero__subheadline,
.hero__creator-proof-label {
  color: var(--dm-muted);
}

.hero__pill {
  border-color: var(--dm-line-strong);
  box-shadow: none;
}

.pill-label {
  color: var(--dm-muted);
}

.youtube-wordmark {
  color: var(--dm-text);
}

.hero__creator-avatar {
  border-color: var(--dm-bg);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 10px 20px -10px rgba(0, 0, 0, 0.9);
}

.hero__creator-avatars:hover .hero__creator-avatar {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28), 0 14px 26px -12px rgba(0, 0, 0, 0.95);
}

/* primary CTA: brand red, white text; glow instead of drop shadow */
.cta-button {
  color: #fff;
  background: linear-gradient(135deg, #de2f2a 0%, #cc1f1f 100%); /* white text: >= 4.6:1 across the gradient */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 6px 26px -6px rgba(239, 68, 68, 0.6), 0 16px 56px -16px rgba(239, 68, 68, 0.5);
}

.cta-button:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 10px 34px -8px rgba(239, 68, 68, 0.75), 0 22px 64px -18px rgba(239, 68, 68, 0.6);
}

.cta-button__icon-container {
  background-color: #fff; /* Google "G" / mail glyph sits on a white disc */
}

.cta-button--secondary {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--dm-line-strong);
  color: var(--dm-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.cta-button--secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: 0 10px 26px -14px rgba(0, 0, 0, 0.9);
}

/* hero social proof (hidden today, kept legible) */
.creator__image {
  border-color: var(--dm-bg);
}

.creator__name {
  color: var(--dm-text);
}

.social-link {
  color: var(--dm-muted);
}

.social-link:hover {
  color: var(--dm-text);
}

/* video frame */
.video-container {
  background: var(--dm-surface);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.45),
    0 46px 80px -46px var(--dm-red-glow),
    0 24px 60px -30px rgba(0, 0, 0, 0.6);
}

.video-container:hover {
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.45),
    0 54px 90px -46px rgba(255, 42, 42, 0.62),
    0 24px 60px -30px rgba(0, 0, 0, 0.6);
}

.video-container::after {
  border-color: rgba(255, 255, 255, 0.1);
  mix-blend-mode: normal;
}

.video-placeholder {
  background: linear-gradient(135deg, var(--dm-surface-2) 0%, var(--dm-surface) 100%);
  border-color: var(--dm-line-strong);
  color: var(--dm-text-2);
}

.video-placeholder__badge {
  color: var(--dm-red-text);
  background: var(--dm-red-soft);
}

.video-placeholder__title {
  color: var(--dm-text);
}

.video-placeholder__subtitle {
  color: var(--dm-muted);
}

/* -----------------------------------------------------------------------------
   SECTION HEADLINES (enhancements.css) + highlight utility (variables.css)
   ----------------------------------------------------------------------------- */
.results__title,
.creator-comparison__title,
.bento-features__title,
.testimonials__title,
.youtuber-tool__title,
.story__title,
.comparison__title,
.pricing__title,
.community__title,
.faq__title {
  color: var(--dm-text);
}

.highlight-red,
.results__title .highlight-red,
.creator-comparison__title .highlight-red,
.bento-features__title .highlight-red,
.testimonials__title .highlight-red,
.youtuber-tool__title .highlight-red,
.story__title .highlight-red,
.comparison__title .highlight-red,
.pricing__title .highlight-red,
.community__title .highlight-red,
.faq__title .highlight-red {
  color: var(--dm-red-text);
  text-shadow: 0 0 56px rgba(255, 50, 50, 0.3);
}

/* hairline between sections: red-free, fades out at both ends */
.section-divider {
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.12) 50%, transparent 100%);
}

.section-divider--dark {
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%);
}

/* -----------------------------------------------------------------------------
   BENTO FEATURES  (bento-features.css)
   ----------------------------------------------------------------------------- */
.bento-features {
  background-color: var(--dm-bg);
}

.bento-features__eyebrow {
  background: var(--dm-red-soft);
  border-color: var(--dm-red-line);
  color: var(--dm-red-text);
}

.bento-features__eyebrow-icon {
  color: var(--dm-red-text);
}

.bento-card {
  background-color: var(--dm-surface);
  /* a whisper of light from the top, like a lit glass edge */
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0%, rgba(255, 255, 255, 0) 38%);
  border-color: var(--dm-line);
}

.bento-card__title {
  color: var(--dm-text);
}

.bento-card__description {
  color: var(--dm-muted);
}

.bento-card__insight {
  background: rgba(10, 10, 11, 0.94);
}

.insight-title {
  color: var(--dm-red-text);
}

.insight-text {
  color: var(--dm-text);
}

.bento-card.discrete {
  background: var(--dm-surface) repeating-linear-gradient(45deg, var(--dm-surface), var(--dm-surface) 10px, var(--dm-surface-2) 10px, var(--dm-surface-2) 20px);
  border-color: var(--dm-line);
}

.discrete-overlay {
  background: rgba(10, 10, 11, 0.6);
}

.construction-badge {
  background: var(--dm-amber-soft);
  color: var(--dm-amber-text);
  box-shadow: none;
}

.bento-card__badge {
  color: var(--dm-red-text);
}

.bento-card__badge.coming-soon {
  background: rgba(255, 255, 255, 0.07);
  color: var(--dm-muted);
  border-color: var(--dm-line-strong);
}

.bento-card__badge--beta {
  background: var(--dm-amber-soft);
  color: var(--dm-amber-text);
  border-color: rgba(245, 158, 11, 0.4);
}

/* 1. dashboard mini-UI */
.dash-window {
  background: #0e0e0f;
  border-color: var(--dm-line);
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.04) inset;
}

.dash-bar {
  background: var(--dm-surface);
  border-bottom-color: var(--dm-line);
}

.dash-title-text {
  color: var(--dm-muted);
}

.dash-dot {
  background: rgba(255, 255, 255, 0.14);
}

.dash-grid-container {
  background: #0e0e0f;
}

.grid-video-card {
  background: var(--dm-surface-2);
  border-color: var(--bento-video-rest-border);
  box-shadow: var(--bento-video-rest-shadow);
}

.grid-video-thumb {
  background: var(--dm-surface-3);
}

.grid-video-title {
  color: var(--dm-text);
}

.grid-video-stats {
  color: var(--dm-muted);
}

.stat-copy-btn {
  background: var(--dm-red-soft);
  color: var(--dm-red-text);
}

.stat-copy-btn:hover {
  background: var(--dm-red-fill);
  color: #fff;
}

.grid-video-badge {
  background-color: var(--dm-red-fill);
}

/* one badge carries an inline green background in the HTML: deepen it for white-text AA */
.grid-video-badge[style] {
  background: #1f7a68 !important;
}

.mobile-copy-ui {
  background: var(--dm-surface);
  border-color: var(--dm-line);
}

.mobile-copy-btn {
  background: var(--dm-red-fill);
  color: #fff;
  box-shadow: 0 8px 22px -8px rgba(239, 68, 68, 0.55);
}

/* 2. alerts */
.alert-card {
  background: var(--dm-surface-2);
  border-color: var(--dm-line-strong);
  box-shadow: 0 14px 28px -10px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.alert-icon {
  background: var(--dm-red-soft);
  color: var(--dm-red-text);
}

.alert-head {
  color: var(--dm-text);
}

.alert-sub {
  color: var(--dm-muted);
}

/* 3. discovery */
.discovery-search-bar {
  background: var(--dm-surface-2);
  border-color: var(--dm-line-strong);
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.7);
  color: var(--dm-muted);
}

.search-icon {
  color: var(--dm-faint);
}

.search-spinner {
  border-color: rgba(255, 255, 255, 0.14);
  border-top-color: #ef4444;
}

.profile-avatar {
  border-color: var(--dm-surface);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 8px 16px -6px rgba(0, 0, 0, 0.8);
}

.profile-match {
  background: #047857; /* white text: 5.5:1 */
  border-color: var(--dm-surface);
}

.profile-name {
  color: var(--dm-text);
}

.profile-sub {
  color: var(--dm-muted);
}

/* 4. packaging (thumbnail + title ideas) */
.packaging-thumb-stage {
  background: var(--dm-surface-2);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: none;
}

.packaging-thumb-placeholder {
  background: linear-gradient(135deg, var(--dm-surface-2) 0%, var(--dm-surface) 100%);
}

.packaging-thumb-shimmer {
  background: linear-gradient(105deg, transparent 38%, rgba(255, 70, 70, 0.1) 50%, transparent 62%);
  background-size: 200% 100%;
}

.packaging-thumb-placeholder__icon {
  color: var(--dm-faint);
}

.packaging-thumb-placeholder__text {
  color: var(--dm-muted);
}

.packaging-thumb-result {
  background: var(--dm-surface-2);
}

.packaging-yt-preview__avatar {
  background: var(--dm-surface-3);
}

.packaging-yt-preview__title {
  color: var(--dm-text);
}

.packaging-yt-preview__channel {
  color: var(--dm-muted);
}

.packaging-label {
  color: var(--dm-faint);
}

.packaging-variant-panel {
  border-color: var(--dm-line);
  background: var(--dm-surface-2);
}

.packaging-title-variant--best {
  background: var(--dm-green-soft);
  border-color: var(--dm-green-line);
}

.packaging-title-text {
  color: var(--dm-text-2);
}

.packaging-title-variant--best .packaging-title-text {
  color: #a7f3d0;
}

.packaging-title-ctr {
  color: var(--dm-green-text);
  background: rgba(16, 185, 129, 0.2);
}

.packaging-title-ctr--muted {
  color: var(--dm-muted);
  background: rgba(255, 255, 255, 0.08);
}

.packaging-title-ctr--best {
  color: var(--dm-green-text);
  background: rgba(16, 185, 129, 0.22);
}

/* 5. script writer */
.writer-line {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.09) 100%);
  box-shadow: none;
}

.writer-line--title.line-1 {
  background: linear-gradient(90deg, rgba(255, 82, 82, 0.62) 0%, rgba(255, 82, 82, 0.32) 100%);
}

.writer-sources {
  background: rgba(34, 197, 94, 0.13);
  color: #86efac;
}

/* -----------------------------------------------------------------------------
   TESTIMONIALS  (testimonial.css — mosaic)
   ----------------------------------------------------------------------------- */
.testimonials__quote-card--accent {
  /* keeps the brand-red hero card; just a touch deeper so it glows rather than glares */
  background: linear-gradient(145deg, #e11d1d 0%, #cc0f0f 55%, #a80808 100%);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 28px 60px -28px rgba(255, 30, 30, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.testimonials__quote-card--light {
  background: var(--dm-surface);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 45%);
  color: var(--dm-text-2);
  border-color: var(--dm-line);
  box-shadow: var(--dm-card-shadow);
}

.testimonials__quote-card--light .testimonials__quote-card-mark {
  color: var(--dm-red-text);
  opacity: 0.22;
}

.testimonials__quote-card--light .testimonials__quote-card-name {
  color: var(--dm-text);
}

.testimonials__quote-card--light .testimonials__quote-card-avatar {
  border-color: var(--dm-line-strong);
  background: var(--dm-surface-3);
}

.testimonials__quote-card--light .testimonials__quote-card-avatar-wrap::after {
  color: var(--dm-surface); /* ring of the "online" dot = card colour */
}

.testimonials__quote-card-stat--light .testimonials__quote-card-stat-value {
  color: var(--dm-text);
}

.testimonials__quote-card-stat--light .testimonials__quote-card-stat-label {
  color: var(--dm-muted);
}

.testimonials__outcome-card {
  background: linear-gradient(165deg, #19191a 0%, #0c0c0d 100%);
  border-color: var(--dm-line-strong);
}

.testimonials__video-container .video-preview__media {
  background: #0c0c0d;
}

/* legacy single-slide testimonial carousel */
.testimonial {
  background: linear-gradient(to bottom, var(--dm-bg) 0%, var(--dm-bg-alt) 100%);
}

.testimonial__slide {
  background: var(--dm-surface);
  border-color: var(--dm-line);
}

.testimonial__carousel-arrow:hover {
  color: var(--dm-red-text);
}

.testimonial__carousel-arrow {
  color: var(--dm-faint);
}

.testimonial__featured-image {
  border-color: var(--dm-surface);
}

.testimonial__carousel-wrapper::before {
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
}

/* -----------------------------------------------------------------------------
   PRICING  (pricing.css + plan-cards.css)
   ----------------------------------------------------------------------------- */
.pricing {
  background-color: var(--dm-bg);

  /* local tokens declared on .pricing in plan-cards.css */
  --plan-toggle-bg: var(--dm-surface-2);
  --plan-toggle-segment-bg: var(--dm-surface-3);
  --color-text-primary: var(--dm-text);
  --color-text-tertiary: var(--dm-muted);
  --color-bg-secondary: var(--dm-surface);
  --color-bg-tertiary: var(--dm-surface-2);
  --color-border-light: var(--dm-line);
  --color-border-medium: var(--dm-line-strong);
}

.pricing__title {
  color: var(--dm-text);
}

.pricing__subtitle {
  color: var(--dm-muted);
}

.heart {
  color: var(--dm-red-text);
}

/* billing toggle pill: dark track, white "selected" thumb */
.plan-cards-pill-toggle {
  background: var(--dm-surface-2);
  border-color: var(--dm-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 10px 24px -16px rgba(0, 0, 0, 0.9);
}

.plan-cards-pill-toggle .pill-slider {
  background: #f5f5f5;
  box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.6);
}

.plan-cards-pill-toggle .pill-segment {
  color: var(--dm-muted);
}

.plan-cards-pill-toggle input[value="monthly"]:checked ~ .pill-left,
.plan-cards-pill-toggle input[value="yearly"]:checked ~ .pill-right {
  color: #0a0a0b;
}

.plan-cards-pill-toggle input[value="monthly"]:checked ~ .pill-right,
.plan-cards-pill-toggle input[value="yearly"]:checked ~ .pill-left {
  color: var(--dm-muted);
}

.pill-discount {
  color: var(--dm-red-text);
  background: var(--dm-red-soft);
}

.plan-cards-pill-toggle input[value="yearly"]:checked ~ .pill-right .pill-discount {
  background: var(--dm-red-fill);
  color: #fff;
}

.plan-cards-yearly-hint {
  color: var(--dm-green-text);
}

/* plan cards */
.trial-pricing-card {
  background-color: var(--dm-surface);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 40%);
  border-color: var(--dm-line);
  box-shadow: var(--dm-card-shadow);
}

.trial-pricing-card:hover {
  border-color: var(--dm-line-strong);
  box-shadow: var(--dm-card-shadow);
}

/* "Most popular" plan: the one place we let the red breathe */
.trial-pricing-card.recommended {
  background-image:
    radial-gradient(ellipse 80% 36% at 50% 0%, rgba(255, 50, 50, 0.13) 0%, rgba(255, 50, 50, 0) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 40%);
  border-color: rgba(255, 70, 70, 0.34);
  box-shadow: var(--dm-card-shadow), 0 0 0 1px rgba(255, 60, 60, 0.08), 0 30px 70px -40px rgba(255, 30, 30, 0.45);
}

.trial-pricing-card.recommended:hover {
  border-color: rgba(255, 90, 90, 0.5);
}

.plan-card-badge {
  box-shadow: 0 6px 18px -4px rgba(255, 30, 30, 0.55);
}

.plan-card-badge-most-popular {
  background: var(--dm-red-fill);
  color: #fff;
}

.trial-plan-name {
  color: var(--dm-text);
}

.trial-plan-tagline,
.trial-plan-savings,
.trial-plan-price-block .price-period,
.plan-cards-cta-subtext {
  color: var(--dm-muted);
}

.trial-plan-price-block .price-amount {
  color: var(--dm-text);
}

.trial-plan-savings .savings-amount {
  color: var(--dm-red-text);
}

.trial-plan-inline-cta--base {
  background: rgba(255, 255, 255, 0.07);
  color: var(--dm-text);
  box-shadow: inset 0 0 0 1px var(--dm-line-strong);
}

.trial-plan-inline-cta--base:hover {
  background: rgba(255, 255, 255, 0.12);
}

.trial-plan-inline-cta--popular {
  background: var(--dm-red-fill);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 12px 30px -10px rgba(255, 30, 30, 0.65);
}

.trial-plan-inline-cta--popular:hover {
  background: var(--dm-red-fill-hover);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 16px 38px -10px rgba(255, 30, 30, 0.8);
}

.trial-plan-separator {
  background: var(--dm-line);
}

.trial-feature-item,
.trial-feature-intro {
  color: var(--dm-text);
}

.trial-feature-icon {
  color: var(--dm-red-text);
}

.btn-trial.btn-primary,
.btn-trial-cta.btn-primary {
  background: var(--dm-red-fill);
  color: #fff;
}

.btn-trial.btn-primary:hover,
.btn-trial-cta.btn-primary:hover {
  background: var(--dm-red-fill-hover);
  color: #fff;
}

/* legacy pricing cards / toggle (pricing.css) */
.pricing-card {
  background-color: var(--dm-surface);
  border-color: var(--dm-line);
}

.pricing-card--featured {
  border-color: var(--dm-red-line);
}

.pricing-card--featured .pricing-card__title,
.pricing-card--featured .price-current {
  color: var(--dm-red-text);
}

.pricing-card:hover {
  box-shadow: var(--shadow-lg);
}

.pricing-feature__icon,
.pricing__discount {
  color: var(--dm-red-text);
}

.pricing__toggle-slider:before {
  background-color: #fff;
}

.pricing-card__button--primary {
  background-color: var(--dm-red-fill);
  color: #fff;
}

.pricing-card__button--primary:hover {
  background-color: var(--dm-red-fill-hover);
}

.pricing-card__button--secondary {
  background-color: rgba(255, 255, 255, 0.07);
  border-color: var(--dm-line-strong);
}

.pricing-card__button--secondary:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.28);
}

.pricing-card__link:hover {
  color: var(--dm-red-text);
}

/* -----------------------------------------------------------------------------
   FAQ  (faq.css)
   ----------------------------------------------------------------------------- */
.faq {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0, rgba(255, 255, 255, 0) 1px) top / 100% 1px no-repeat,
    linear-gradient(180deg, var(--dm-bg-alt) 0%, var(--dm-bg) 100%);
}

.faq__title {
  color: var(--dm-text);
}

.faq__item {
  background: var(--dm-surface);
  border-color: var(--dm-line);
}

.faq__item:hover {
  border-color: var(--dm-line-strong);
  box-shadow: none;
}

.faq__item--active,
.faq__item--active:hover {
  border-color: var(--dm-red-line);
  box-shadow: 0 0 0 1px rgba(255, 60, 60, 0.07), 0 18px 40px -26px rgba(255, 30, 30, 0.4);
}

.faq__question {
  color: var(--dm-text);
}

.faq__question:hover {
  background: rgba(255, 255, 255, 0.03);
}

.faq__question-text {
  color: var(--dm-text);
}

.faq__icon {
  color: var(--dm-muted);
}

.faq__item--active .faq__icon {
  color: var(--dm-red-text);
}

.faq__answer-content {
  color: var(--dm-muted);
}

/* -----------------------------------------------------------------------------
   FOOTER  (footer.css) — a shade darker than the page, hairline on top
   ----------------------------------------------------------------------------- */
.footer {
  background-color: var(--dm-footer);
  color: var(--dm-muted);
  border-top: 1px solid var(--dm-line);
}

.footer__brand-name,
.footer__column-title {
  color: var(--dm-text);
}

.footer__description,
.footer__link {
  color: var(--dm-muted);
}

.footer__link:hover {
  color: var(--dm-text);
}

.footer__email-text {
  color: var(--dm-text-2);
}

.footer__email-copy-btn {
  color: var(--dm-muted);
}

.footer__email-copy-btn:hover {
  color: var(--dm-text);
  background-color: rgba(255, 255, 255, 0.08);
}

.footer__email-copy-btn.is-copied .footer__email-icon,
.footer__copied {
  color: var(--dm-red-text);
}

.footer__social-link {
  background-color: rgba(255, 255, 255, 0.07);
  color: var(--dm-muted);
  box-shadow: inset 0 0 0 1px var(--dm-line);
}

.footer__social-link:hover {
  background-color: var(--dm-red-fill);
  color: #fff;
  box-shadow: 0 8px 20px -6px rgba(255, 30, 30, 0.6);
}

.footer__bottom {
  border-top-color: var(--dm-line);
}

.footer__copyright {
  color: var(--dm-faint);
}

/* -----------------------------------------------------------------------------
   PROOF STRIP + LEGACY SECTIONS  (proof.css, token-level safety net)
   These sections are hidden on the live site; they are only made not-broken here.
   ----------------------------------------------------------------------------- */
.proof {
  background: linear-gradient(to bottom, var(--dm-bg) 0%, var(--dm-bg-alt) 100%);
}

.proof__title {
  color: var(--dm-text);
}

.proof__paragraph {
  color: var(--dm-muted);
}

.proof__highlight {
  color: var(--dm-red-text);
}

.proof__cta-button {
  background: var(--dm-red-fill);
  color: #fff;
}

/* -----------------------------------------------------------------------------
   HIDDEN / LEGACY SECTIONS  (results, creator-comparison, youtuber-tool, story,
   comparison, community) — display:none on the live site. A minimal safety net so
   that re-enabling one does not produce invisible text or glaring white panels.
   Not polished on purpose; third-party looking mocks (WhatsApp chat, tool
   screenshots) intentionally stay light.
   ----------------------------------------------------------------------------- */
.results,
.creator-comparison,
.youtuber-tool,
.story,
.comparison,
.community {
  background: var(--dm-bg);
}

.result-card {
  background: var(--dm-surface);
  border-color: var(--dm-line);
  box-shadow: var(--dm-card-shadow);
}

.result-card__icon {
  background: var(--dm-surface-2);
}

.result-icon,
.result-card__number {
  color: var(--dm-text);
}

.result-card__unit {
  color: var(--dm-faint);
}

.result-card__label {
  color: var(--dm-muted);
}

.tool-step__number {
  background: var(--dm-surface-2);
  border-color: var(--dm-line-strong);
  color: var(--dm-faint);
}

.tool-step__number.active {
  background: linear-gradient(135deg, #ff3b3b 0%, var(--dm-red-fill) 100%);
  color: #fff;
}

.tool-step__heading {
  color: var(--dm-text);
}

.tool-step__description {
  color: var(--dm-muted);
}

.tool-step__cta,
.timeline-step__cta,
.community__button {
  color: #fff;
}

.tool-step__visual {
  border-color: var(--dm-line);
  box-shadow: 0 0 0 1px var(--dm-line), 0 24px 50px -30px rgba(0, 0, 0, 0.9);
}

.timeline-step__content--highlight {
  background: linear-gradient(135deg, #1c1910 0%, #13110a 100%);
}

.timeline-step__content--success {
  background: linear-gradient(135deg, #1e1213 0%, #140d0e 100%);
}

.discovered-channel__visual,
.discovered-channel__visual:hover,
.flow-visual {
  background: linear-gradient(135deg, var(--dm-surface-2) 0%, var(--dm-surface) 100%);
}

.flow-item-stat,
.flow-item-stat--success {
  background: rgba(255, 255, 255, 0.04);
}

.comparison__header,
.comparison__header--feature,
.comparison__header--competitor {
  background: var(--dm-surface);
}

.comparison__header--catch,
.comparison__cell--catch {
  background: linear-gradient(135deg, rgba(255, 70, 70, 0.1) 0%, var(--dm-surface) 100%);
}

.comparison__table tbody tr:hover .comparison__feature,
.comparison__table tbody tr:hover .comparison__cell {
  background-color: var(--dm-surface-2);
}

.comparison__table tbody tr:hover .comparison__cell--catch {
  background: linear-gradient(135deg, rgba(255, 70, 70, 0.16) 0%, var(--dm-surface-2) 100%);
}

.creator-comparison__subtitle {
  color: var(--dm-muted);
}

/* mobile edge fades of the comparison table fade to the page, not to white */
@media (max-width: 767px) {
  .comparison__table-wrapper::before {
    background: linear-gradient(to right, var(--dm-bg), rgba(10, 10, 11, 0));
  }

  .comparison__table-wrapper::after {
    background: linear-gradient(to left, var(--dm-bg), rgba(10, 10, 11, 0));
  }
}