/* =====================================================================
   BingeBear brand — LIGHT THEME
   Loaded after styles.css. Applies the BingeBear brand guidelines on top of
   the deck.co structure: Manrope type, orange #EA720F accent, navy #061226
   ink, and the brand grayscale. Marketing surfaces go light and on-brand;
   the product mockups stay dark (they read as realistic app screenshots).
   Brand tokens (guideline pp.13-16):
     Primary  white #FFFFFF · ink #061226 · accent #EA720F
     Grays    Cloud #f4f4f6 · Smoke #e6e6e9 · Steel #9999a1 · Space #9999a1
              Graphite #66666e · Arsenic #40424D · Phantom #1E1E24
     Type     Manrope
   ===================================================================== */

/* ---- Brand typeface (both themes). Use :root so it outranks styles.css's
   own :root token (a bare `html` selector would lose to `:root`). ---- */
:root { --font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }

/* Light-mode neutral palette (section + card differentiation) */
:root {
  --dim-grey: #66666e;
  --rosy-granite: #9999a1;
  --alabaster-grey: #e6e6e9;
  --platinum: #f4f4f6;
}

html.light { color-scheme: light; }

/* ---- 1. Token flip → BingeBear brand palette ---- */
html.light {
  --bg-primary:    #ffffff;
  --bg-secondary:  #f4f4f6;   /* Platinum */
  --bg-card:       #ffffff;
  --bg-card-hover: #f4f4f6;
  --bg-elevated:   #ffffff;
  --text-primary:  #061226;   /* Ink */
  --text-secondary:#40424D;   /* Arsenic */
  --text-muted:    #66666e;   /* Dim grey */
  --border-color:  #e6e6e9;   /* Alabaster */
  --border-light:  #f4f4f6;   /* Platinum */
  --accent:        #EA720F;   /* Orange */
  --accent-dim:    rgba(234,114,15,0.10);
  --yellow:        #EA720F;
}

/* ---- 2. Base canvas ---- */
html.light body { background: #ffffff; color: var(--text-primary); }

/* ---- 3. Navigation ---- */
html.light .navbar { background: #ffffff !important; border-bottom: 1px solid #e6e6e9; }
html.light .navbar.nav-scrolled { box-shadow: 0 1px 0 rgba(6,18,38,0.05); }
html.light .nav-link { color: #40424D; }
html.light .nav-link:hover,
html.light .nav-link.active { color: #061226; }
html.light .nav-dropdown-trigger { color: #40424D; }
html.light .nav-divider { background: rgba(6,18,38,0.10); }
html.light .nav-hamburger span { background: #061226; }
html.light .nav-dropdown-menu { background: #ffffff; border: 1px solid #e6e6e9; box-shadow: 0 16px 48px rgba(6,18,38,0.12); }
html.light .nav-dropdown-panel { background: transparent; }
html.light .nav-dropdown-item { color: #40424D; }
html.light .nav-dropdown-item:hover { background: #f4f4f6; color: #061226; }
html.light .mobile-menu { background: #ffffff; border-top: 1px solid #e6e6e9; }
html.light .mobile-menu a, html.light .mobile-menu-toggle { color: #061226; }
html.light .mobile-menu-sub a { color: #66666e; }
html.light .logo-ctx-menu { background: #ffffff; border: 1px solid #e6e6e9; box-shadow: 0 16px 48px rgba(6,18,38,0.14); color: #061226; }
html.light .logo-ctx-item { color: #40424D; }
html.light .logo-ctx-item:hover { background: #f4f4f6; }
html.light .logo-ctx-divider { background: #e6e6e9; }
html.light .logo-ctx-title { color: #9999a1; }

/* ---- Primary buttons: orange fill, white label ---- */
html.light .nav-btn,
html.light .mobile-menu-cta { background: #EA720F; color: #061226; }
html.light .nav-btn:hover,
html.light .mobile-menu-cta:hover { background: #d4660d; }
/* Trial primary button: very light black border in light mode */
html.light .btn-primary { border-color: rgba(0,0,0,0.14); }

/* ---- Keep product mockups dark: re-scope the original deck tokens
   (incl. the pale-yellow accent) onto their wrappers. ---- */
html.light .hero-image,
html.light .auth-embed,
html.light .auth-vault,
html.light .auth-pillar-visual,
html.light .cu-card-visual,
html.light .con-chrome,
html.light .api-terminal {
  --bg-primary:   #061226;
  --bg-secondary: #092C23;
  --bg-card:      #19483D;
  --bg-card-hover:#1a3a32;
  --bg-elevated:  #0E1F3A;
  --text-primary: #F6F6F6;
  --text-secondary:#CDCDCD;
  --text-muted:   #8a8a8a;
  --border-color: #1e2e28;
  --border-light: #2a3e36;
  --accent:       #FDFAC3;
  --yellow:       #FDFAC3;
}

/* Mockup panels are semi-transparent (built for the dark page) — give each a
   solid dark base so they composite as they do in dark mode. */
html.light .auth-vault { background-color: #0d1210; }
html.light .cu-card-visual { background-color: #061226; }
html.light .cu-card-scale { background-color: #061226; border-radius: 4px; }
html.light .con-chrome { background-color: #061226; }
html.light .api-terminal { background-color: #0a0d0c; }
html.light .auth-pillar-visual { background-color: #0f1211; }
html.light .auth-stage-grid { background: transparent; }

/* Agent-grid marquee: white showcase band in light mode. */
html.light .agent-grid-section {
  --bg-primary: #ffffff;
  background-color: #ffffff;
}
html.light .ag-tile-app { color: #061226; }
html.light .ag-tile-task { color: #66666e; }

/* ---- 4. Logos ---- */
/* PNGs are already coloured, so never invert them. The fixed header chooses
   its lockup from the surface underneath it, not from the global theme. */
.nav-logo-img, .footer-wordmark img { filter: none !important; }
/* trusted-by partner logos: real colours on white */
html.light .cl-logo { filter: none; opacity: 1; }
/* Keep each partner's recognisable colours in dark mode. A small white tile
   preserves contrast for black wordmarks without turning app icons into blobs. */
html:not(.light) .cl-marquee-track .cl-logo {
  box-sizing: content-box;
  padding: 8px 12px;
  border-radius: 6px;
  background: #ffffff;
  filter: none;
  opacity: 1;
}

/* Wall-of-Love review cards in dark mode */
html:not(.light) .wol-card { background: #0C1B34; border-color: rgba(255,255,255,0.10); }
html:not(.light) .wol-quote { color: #CDCDCD; }
html:not(.light) .wol-name { color: #F6F6F6; }

/* Content carousel in the free-trial success panel (dark mode) */
html:not(.light) .cc-carousel::before { background: linear-gradient(to right, #0C1B34 20%, rgba(29,24,21,0)); }
html:not(.light) .cc-carousel::after { background: linear-gradient(to left, #0C1B34 20%, rgba(29,24,21,0)); }
html:not(.light) .cc-card { background: #04101F; border-color: rgba(255,255,255,0.10); }
html:not(.light) .cc-title { color: #F6F6F6; }
html:not(.light) .cc-badge { background: rgba(255,255,255,0.08); color: #c3cadb; }

/* ---- bb-* sections: full dark-mode treatment (no white surfaces) ---- */
html:not(.light) .bb-wrap--soft { background: #061226; }
/* headings + body copy */
html:not(.light) .bb-title { color: #F6F6F6; }
html:not(.light) .bb-sub,
html:not(.light) .bb-rating,
html:not(.light) .bb-note p { color: #CDCDCD; }
/* cards / pills / plans / reviews / ghost buttons -> dark raised surface */
html:not(.light) .bb-card,
html:not(.light) .bb-stat,
html:not(.light) .bb-plan,
html:not(.light) .bb-reviews .testimonial-card,
html:not(.light) .bb-btn-ghost {
  background: #0C1B34;
  border-color: rgba(255, 255, 255, 0.10);
}
html:not(.light) .bb-card h3,
html:not(.light) .bb-plan-price,
html:not(.light) .bb-stat,
html:not(.light) .bb-badge-t,
html:not(.light) .bb-reviews .author-name,
html:not(.light) .bb-btn-ghost { color: #F6F6F6; }
html:not(.light) .bb-card p,
html:not(.light) .bb-plan p,
html:not(.light) .bb-plan-price span,
html:not(.light) .bb-badge-s,
html:not(.light) .bb-reviews .testimonial-card blockquote { color: #CDCDCD; }
/* orange accents keep their colour, just the chip background softens */
html:not(.light) .bb-badge-ic { background: rgba(234, 114, 15, 0.16); color: #EA720F; }
html:not(.light) .bb-btn-ghost:hover { border-color: rgba(255, 255, 255, 0.28); }

/* ---- 5. Hero marketing text ---- */
html.light .hero-label { color: rgba(255,255,255,0.72); }
html.light .hero-subtitle { color: #e6e6e9; }

/* ---- 6. Secondary buttons ---- */
html.light .btn-secondary { color: #061226; border-color: #e6e6e9; background: #ffffff; }
html.light .btn-secondary:hover { border-color: #9999a1; background: #f4f4f6; }

/* ---- 7. Section subtitles / body copy ---- */
html.light .auth-subtitle,
html.light .cu-subtitle,
html.light .split-desc,
html.light .auth-pillar p,
html.light .cu-card p { color: #40424D; }
html.light .split-link { color: #EA720F; }
html.light .split-link:hover { color: #d4660d; }

/* ---- 8. CTA section ---- */
html.light .deck-cta-secondary { color: #40424D; border-color: #e6e6e9; }
html.light .deck-cta-secondary:hover { color: #061226; border-color: #9999a1; }
html.light .deck-cta-grid img { filter: invert(1); opacity: 0.4; }

/* ---- 9. Footer ---- */
html.light .footer { background: #f4f4f6; border-top: 1px solid #e6e6e9; }
html.light .footer-col h4 { color: #061226; }
html.light .footer-col a { color: #40424D; }
html.light .footer-col a:hover { color: #EA720F; }
html.light .footer-ai-btn { background: #ffffff; border: 1px solid #e6e6e9; color: #061226; }
html.light .footer-ai-btn:hover { background: #f4f4f6; }
html.light .footer-bottom { color: #66666e; border-top: 1px solid #e6e6e9; }
html.light .footer-bottom span,
html.light .footer-status-label,
html.light .footer-lang-btn,
html.light .footer-txt-links a { color: #66666e; }
html.light .footer-txt-links a:hover { color: #EA720F; }
html.light .footer-lang-dropdown { background: #ffffff; border: 1px solid #e6e6e9; box-shadow: 0 16px 48px rgba(6,18,38,0.14); }
html.light .footer-lang-opt { color: #40424D; }
html.light .footer-lang-opt:hover, html.light .footer-lang-opt.active { color: #061226; background: #f4f4f6; }

/* ---- 10. Agent-grid tiles: light cards on white ---- */
html.light .ag-tile { background: #f4f4f6; border-color: #e6e6e9; box-shadow: 0 6px 20px rgba(6,18,38,0.06); }

/* ---- 10b. Mockup captions that sit on the light page ---- */
html.light .auth-embed-caption { color: #66666e; }

/* =====================================================================
   Pricing page (.pr-*) — BingeBear light + brand
   ===================================================================== */
/* we ship 3 plans (Free trial, Taster, Owner) not deck's 4 */
.pr-cards { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) { .pr-cards { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; } }
.pr-hero { padding-top: 150px; }
.pr-eyebrow {
  display: block; font-size: 12px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 10px;
}

html.light .pr-subhead { color: #40424D; }
html.light .pr-card,
html.light .pr-addon-card { background: #ffffff; border-color: #e6e6e9; box-shadow: 0 10px 30px rgba(6,18,38,0.05); }
html.light .pr-card:hover,
html.light .pr-addon-card:hover { border-color: #e6e6e9; }
html.light .pr-card-featured { border-color: rgba(234,114,15,0.5); background: #ffffff; box-shadow: 0 18px 46px rgba(234,114,15,0.13); }
html.light .pr-card-featured:hover { border-color: #EA720F; }
html.light .pr-popular { background: #EA720F; color: #ffffff; }
html.light .pr-plan { color: #061226; }
html.light .pr-card-featured .pr-plan { color: #EA720F; }
html.light .pr-plan-desc { color: #66666e; }
html.light .pr-period { color: #66666e; }
html.light .pr-features { border-top-color: #f4f4f6; }
html.light .pr-card-featured .pr-features { border-top-color: rgba(234,114,15,0.18); }
html.light .pr-feat { color: #40424D; }
html.light .pr-check, html.light .pr-tbl-check { background: #EA720F; stroke: #ffffff; }
html.light .pr-cta-ghost { background: #f4f4f6; border-color: #e6e6e9; color: #061226; }
html.light .pr-cta-ghost:hover { background: #f4f4f6; border-color: #9999a1; color: #061226; }
/* solid CTA is orange + white automatically via --accent / --bg-primary tokens */
html.light .pr-table thead th { background: #ffffff; color: #061226; box-shadow: inset 0 1px 0 #e6e6e9, inset 0 -1px 0 #e6e6e9; }
html.light .pr-table thead th:first-child { color: #9999a1; }
html.light .pr-th-price { color: #66666e; }
html.light .pr-th-pro { color: #EA720F !important; }
html.light .pr-th-pro .pr-th-price { color: #66666e; }
html.light .pr-table tbody td { color: #40424D; border-bottom-color: #f4f4f6; }
html.light .pr-table tbody td:first-child { color: #061226; }
html.light .pr-table tbody tr:hover td { background: rgba(234,114,15,0.04); }
html.light .pr-tip { border-bottom-color: rgba(6,18,38,0.28); }
html.light .pr-tip:hover { border-bottom-color: #EA720F; }
html.light .pr-addon-name, html.light .pr-addon-price { color: #061226; }
html.light .pr-addon-desc { color: #40424D; }
html.light .pr-addon-detail { color: #66666e; }
html.light .pr-overage { color: #9999a1; }

/* =====================================================================
   Branded preloader (BingeBear bear) — covers first paint, fades on load
   ===================================================================== */
/* keep content painted underneath so the fade-out reveals a ready page */
body.page-loading { opacity: 1 !important; }

#bb-preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  transition: opacity 0.55s ease, visibility 0.55s ease;
}
html:not(.light) #bb-preloader { background: #061226; }
#bb-preloader.bb-hide { opacity: 0; visibility: hidden; pointer-events: none; }
.bb-pre-inner { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.bb-pre-bear {
  width: 82px; height: auto; display: block;
  transform-origin: center bottom;
  animation: bbBearBob 1.15s ease-in-out infinite;
}
@keyframes bbBearBob {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-9px) scale(1.05); }
}
.bb-pre-dots { display: flex; gap: 7px; }
.bb-pre-dots i {
  width: 7px; height: 7px; border-radius: 50%;
  background: #EA720F; opacity: 0.3;
  animation: bbPreDot 1s ease-in-out infinite;
}
.bb-pre-dots i:nth-child(2) { animation-delay: 0.15s; }
.bb-pre-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes bbPreDot {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  50%      { opacity: 1;    transform: translateY(-5px); }
}
@media (prefers-reduced-motion: reduce) {
  .bb-pre-bear, .bb-pre-dots i { animation: none; }
}

/* =====================================================================
   Theme toggle button (present in both themes)
   ===================================================================== */
#theme-toggle {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 2000;
  width: 44px;
  height: 44px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  color: #f6f6f6;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
#theme-toggle:hover { background: rgba(255,255,255,0.12); transform: translateY(-2px); }
#theme-toggle .tt-moon { display: none; }
#theme-toggle .tt-sun  { display: block; }

html.light #theme-toggle {
  background: #ffffff;
  border: 1px solid #e6e6e9;
  color: #EA720F;
  box-shadow: 0 6px 20px rgba(6,18,38,0.12);
}
html.light #theme-toggle:hover { background: #f4f4f6; }
html.light #theme-toggle .tt-sun  { display: none; }
html.light #theme-toggle .tt-moon { display: block; }

/* Reviews load-more (dark mode) */
html:not(.light) .wol-more { background: #0C1B34; border-color: rgba(255,255,255,0.12); color: #F6F6F6; }
html:not(.light) .wol-more:hover { background: #10233F; }


/* ---- Unified section backgrounds (v83): every light-mode section is #ffffff so
   there is no #ffffff-vs-#f4f4f6 seam where inset sections meet full-width ones.
   In dark mode these blocks stay navy #061226. ---- */
html:not(.light) section.uc-feat-dark,
html:not(.light) .bb-wrap--dark { background: #061226 !important; }
html.light section.uc-feat-dark,
html.light .bb-wrap--dark,
html.light .bb-wrap--soft,
html.light .cu-section,
html.light .testimonials-section { background: #ffffff !important; }

/* Dark-styled sections stay readable on white in light mode */
html.light .uc-feat-title, html.light .uc-feat-num, html.light .uc-feat-name { color: #061226; }
html.light .uc-feat-desc { color: #66666e; }
html.light .uc-feat-progress { background: rgba(6,18,38,0.12); }
html.light .uc-feat-progress-fill { background: #061226; }
html.light .bb-wrap--dark .bb-title { color: #061226; }
html.light .bb-wrap--dark .bb-sub { color: #5A6072; }
html.light .bb-wrap--dark .bb-disc-t { color: #061226; }
html.light .bb-wrap--dark .bb-disc-s { color: #5A6072; }
html.light .bb-pricing-dark .bb-note p { color: #5A6072; }


/* Footer is a dark band in BOTH themes (light mode was forcing it white, killing contrast) */
html.light .footer.footer-dark { background: radial-gradient(68% 137% at 50% 171%, #0E2A4E 0%, #061226 100%) !important; }
html.light .footer.footer-dark .footer-cta-title,
html.light .footer.footer-dark .footer-field-label,
html.light .footer.footer-dark .footer-col h4 { color: #ffffff !important; }
html.light .footer.footer-dark .footer-col a { color: #8b93a3 !important; }
html.light .footer.footer-dark .footer-col a:hover { color: #ffffff !important; }
html.light .footer.footer-dark .footer-terms,
html.light .footer.footer-dark .footer-copy { color: #8b93a3 !important; }
html.light .footer.footer-dark .footer-input { color: #ffffff !important; }


/* Top nav pill: solid (100% opacity) in light mode, glassy in dark mode */
html.light .anav-pill { background: #061226 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-color: rgba(255,255,255,0.10); }