/* ============================================================
   ArvoPeak — Light Theme  ("Arvo Light")
   ------------------------------------------------------------
   An additive stylesheet. It never touches the dark theme:
   every rule is scoped under html[data-theme="light"], so with
   no attribute set (or data-theme="dark") this file is inert.

   Palette
     Surfaces  Porcelain / cool-white with a faint navy tint,
               so the brand's slate-navy DNA survives the flip.
     Ink       Deep slate-navy text instead of pure black —
               softer on the eye, still AA/AAA on every surface.
     Accent    The same electric orange, deepened just enough to
               clear 4.5:1 as small text on a light background.

   Load order: after style.css, before any page <style> block
   is irrelevant — the html[data-theme] prefix out-specifies
   the single-class rules those blocks use.
   ============================================================ */


/* ============================================================
   PART 1 — Shared UI (unscoped)
   Applies in BOTH themes: the theme toggle, and the fixed-
   overlay stacking fix. Everything after PART 2 is light-only.
   ============================================================ */

.nav-right {
  display: flex;
  align-items: center;
  gap: 22px;
}

.theme-toggle {
  --tt-size: 38px;
  position: relative;
  width: var(--tt-size);
  height: var(--tt-size);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--text-primary);
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}
.theme-toggle:hover {
  background: rgba(255, 107, 53, 0.14);
  border-color: rgba(255, 107, 53, 0.45);
  transform: translateY(-1px);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

/* Both icons stack; the inactive one rotates out. */
.theme-toggle svg {
  position: absolute;
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: opacity 0.32s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.42s cubic-bezier(0.34, 1.3, 0.64, 1);
}
/* Dark theme (default) → offer the sun */
.theme-toggle .tt-sun  { opacity: 1; transform: rotate(0deg)   scale(1);   }
.theme-toggle .tt-moon { opacity: 0; transform: rotate(-70deg) scale(0.4); }
/* Light theme → offer the moon */
html[data-theme="light"] .theme-toggle .tt-sun  { opacity: 0; transform: rotate(70deg) scale(0.4); }
html[data-theme="light"] .theme-toggle .tt-moon { opacity: 1; transform: rotate(0deg)  scale(1);   }

/* Light-theme chrome for the button itself */
html[data-theme="light"] .theme-toggle {
  background: #FFFFFF;
  border-color: rgba(16, 32, 62, 0.14);
  color: #2B3A55;
  box-shadow: 0 1px 2px rgba(16, 32, 62, 0.06);
}
html[data-theme="light"] .theme-toggle:hover {
  background: #FFF3EC;
  border-color: rgba(204, 72, 16, 0.45);
  color: #B23D0D;
}

/* On mobile the navbar (z-index 1000) sits above the menu overlay
   (999), so the toggle stays reachable while the menu is open —
   no second copy needed inside the overlay. */
@media (max-width: 768px) {
  .nav-right { gap: 14px; }
  .theme-toggle { --tt-size: 36px; }
}

/* The cross-fade between themes. Applied by JS for ~320ms only,
   so scroll/hover animations are never dragged down by it. */
html.theme-switching,
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
  transition: background-color 0.3s ease,
              background-image 0.3s ease,
              border-color 0.3s ease,
              color 0.3s ease,
              fill 0.3s ease,
              box-shadow 0.3s ease !important;
  transition-delay: 0s !important;
}
@media (prefers-reduced-motion: reduce) {
  html.theme-switching,
  html.theme-switching *,
  html.theme-switching *::before,
  html.theme-switching *::after { transition: none !important; }
  .theme-toggle,
  .theme-toggle svg { transition: none; }
}


/* ------------------------------------------------------------
   Cookie banner vs. sticky buy button
   ------------------------------------------------------------
   Both are position:fixed at bottom:0 and the banner (z-index
   9999) sat straight on top of the "Buy" button (z-index 998),
   hiding it on every product page.

   Desktop: the banner becomes a compact card in the bottom-LEFT
   corner, so the bottom-right stays free. On pages that carry a
   buy button it also reserves that button's width, so the two
   can never meet however narrow the window gets.

   Mobile: both are full-width bars, so the banner is lifted to
   sit directly above the buy bar instead of over it.

   The banner's styles are inline in includes/footer.php, so
   these need !important to land.
   ------------------------------------------------------------ */

@media (min-width: 769px) {
  #cookie-banner {
    left: 24px !important;
    right: auto !important;
    bottom: 24px !important;
    width: min(600px, calc(100vw - 48px));
    padding: 14px 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  }
  /* leave a lane for the buy button + both gutters */
  body.has-sticky-buy #cookie-banner { width: min(600px, calc(100vw - 340px)); }
}

@media (max-width: 768px) {
  /* the buy bar is 72px tall + its own safe-area padding */
  body.has-sticky-buy #cookie-banner {
    bottom: calc(78px + env(safe-area-inset-bottom)) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
  }
}


/* ============================================================
   PART 2 — Light design tokens
   ============================================================ */

html[data-theme="light"] {
  color-scheme: light;

  /* ---- Surfaces: tinted page, white bands + cards ---------- */
  --bg-base:        #F5F7FB;   /* page canvas */
  --bg-surface:     #FFFFFF;   /* alternating band / card face */
  --bg-raised:      #FFFFFF;   /* elevated panels */
  --bg-overlay:     #ECF1F8;   /* hover / active overlays */
  --bg-subtle:      #F0F4FA;   /* subtle tinted fill */
  --bg-sunken:      #E9EEF7;   /* footer / deep bands */

  /* ---- Accent: same orange, two depths --------------------- */
  --orange:         #CC4810;   /* fills, large accents  (4.7:1 vs #fff text) */
  --orange-text:    #B23D0D;   /* small text / links    (5.5:1 on page bg)   */
  --orange-dark:    #A63409;
  --orange-light:   #E9642A;
  --orange-glow:    rgba(204, 72, 16, 0.26);
  --orange-glow-sm: rgba(204, 72, 16, 0.11);
  --orange-wash:    #FFF2EA;   /* palest tint for chips / notes */

  /* ---- Ink (contrast measured against the page canvas) ----- */
  --text-primary:   #0C1524;   /* 15.9:1 */
  --text-secondary: #2E3B54;   /*  9.9:1 */
  --text-muted:     #4C5A75;   /*  6.3:1 */
  --text-faint:     #5B6780;   /*  5.3:1 — still ≥4.8:1 on the footer */

  /* ---- Lines & panels -------------------------------------- */
  --glass-bg:       #FFFFFF;
  --glass-border:   rgba(16, 32, 62, 0.10);
  --glass-hover:    #FFFFFF;
  --line:           rgba(16, 32, 62, 0.10);
  --line-soft:      rgba(16, 32, 62, 0.07);
  --line-strong:    rgba(16, 32, 62, 0.16);

  /* ---- Elevation: tinted, never muddy black ---------------- */
  --card-shadow:    0 1px 2px rgba(16, 32, 62, 0.05), 0 10px 28px rgba(16, 32, 62, 0.08);
  --card-shadow-lg: 0 2px 6px rgba(16, 32, 62, 0.06), 0 24px 56px rgba(16, 32, 62, 0.12);
  --card-shadow-sm: 0 1px 2px rgba(16, 32, 62, 0.05), 0 3px 10px rgba(16, 32, 62, 0.05);

  /* ---- Per-page accents declared in page <style> :root ------
     Same hues, one step deeper so they clear 4.5:1 on white
     while still working as fills. --------------------------- */
  --lcp-blue:        #1D4ED8;
  --lcp-blue-dim:    rgba(29, 78, 216, 0.08);
  --lcp-blue-border: rgba(29, 78, 216, 0.22);
  --pro-gold:        #B45309;
  --pro-gold-dim:    rgba(180, 83, 9, 0.10);
  --pro-gold-border: rgba(180, 83, 9, 0.24);
  --toc-purple:        #4338CA;
  --toc-purple-dim:    rgba(67, 56, 202, 0.08);
  --toc-purple-border: rgba(67, 56, 202, 0.24);
  /* The `-light` variants are the text accent on each product page.
     On a light canvas "lighter" is backwards — deepen them instead. */
  --li-blue-light:     #0A66C2;
  --cm-blue-light:     #2F5FE0;
  --pl-red-light:      #C51F1F;
  --lc-green-light:    #0A6B53;
  --dld-blue-light:    #1D4ED8;

  /* ---- Legacy aliases used throughout style.css ------------ */
  --navy:           #F5F7FB;
  --navy-mid:       #FFFFFF;
  --navy-light:     #FFFFFF;
  --navy-soft:      #ECF1F8;
  --white:          #0C1524;   /* "--white" means "max contrast text" */
  --off-white:      #162034;
}


/* ============================================================
   PART 3 — Base & typography
   ============================================================ */

/* :where() keeps these at the same specificity as the dark-theme
   rules they replace, so page-level `.some-class { color: … }`
   still wins exactly as it does today. Headings and paragraphs
   need no rule at all — they read the tokens above. */
:where(html[data-theme="light"]) body {
  background-color: var(--bg-base);
  color: var(--text-secondary);
}
:where(html[data-theme="light"]) a       { color: var(--orange-text); }
:where(html[data-theme="light"]) a:hover { color: var(--orange-dark); }
html[data-theme="light"] ::selection     { background: rgba(204, 72, 16, 0.18); color: var(--text-primary); }

/* Small orange text needs the deeper shade to clear 4.5:1 */
html[data-theme="light"] .section-label,
html[data-theme="light"] .hero-badge,
html[data-theme="light"] .service-link,
html[data-theme="light"] .blog-cat,
html[data-theme="light"] .blog-read-more,
html[data-theme="light"] .blog-card h3 a:hover,
html[data-theme="light"] .spotlight-content .badge,
html[data-theme="light"] .feature-list .check,
html[data-theme="light"] .plan-features .tick,
html[data-theme="light"] .pricing-features .tick,
html[data-theme="light"] .pricing-note strong,
html[data-theme="light"] .breadcrumb a:hover,
html[data-theme="light"] .post-content a,
html[data-theme="light"] .legal-content a,
html[data-theme="light"] .legal-highlight strong,
html[data-theme="light"] .footer-bottom a:hover,
html[data-theme="light"] .footer-col ul li a:hover,
html[data-theme="light"] .mobile-nav a:hover,
html[data-theme="light"] .admin-nav a:hover,
html[data-theme="light"] .admin-nav a.active,
html[data-theme="light"] .btn-edit,
html[data-theme="light"] .btn-cta-white,
html[data-theme="light"] .text-orange { color: var(--orange-text); }

/* Product-page ticks are green by design — deepen, don't recolour */
html[data-theme="light"] .tick,
html[data-theme="light"] .toc-tick,
html[data-theme="light"] .psa-cms-tick,
html[data-theme="light"] [class*="-table"] .tick { color: #15803D; }
html[data-theme="light"] .psa-table .tick-pro,
html[data-theme="light"] .toc-table .tick-pro,
html[data-theme="light"] .dld-table .tick-pro { color: var(--orange-text); }

html[data-theme="light"] .section-label::before { background: var(--orange-text); }

/* Broken Link Detector's License card keeps its own icon-blue eyebrow
   instead of the sitewide orange — needs to beat the generic rule above. */
html[data-theme="light"] .dld-waitlist-card .section-label { color: var(--dld-blue-light); }
html[data-theme="light"] .dld-waitlist-card .section-label::before { background: var(--dld-blue-light); }
html[data-theme="light"] .section-subtitle,
html[data-theme="light"] .lead { color: var(--text-muted); }


/* ============================================================
   PART 4 — Navigation
   ============================================================ */

html[data-theme="light"] #navbar.scrolled {
  background: rgba(255, 255, 255, 0.86);
  border-bottom: 1px solid var(--line-soft);
  box-shadow: 0 1px 0 rgba(16, 32, 62, 0.04), 0 8px 30px rgba(16, 32, 62, 0.07);
}
html[data-theme="light"] .site-logo        { color: var(--text-primary); }
html[data-theme="light"] .site-logo span   { color: var(--orange); }
html[data-theme="light"] .site-nav-links a { color: var(--text-secondary); }
html[data-theme="light"] .site-nav-links a:hover,
html[data-theme="light"] .site-nav-links a.active { color: var(--text-primary); }

html[data-theme="light"] .site-nav-cta {
  background: var(--orange);
  color: #FFFFFF !important;
  box-shadow: 0 2px 10px rgba(204, 72, 16, 0.28);
}
html[data-theme="light"] .site-nav-cta:hover {
  background: var(--orange-dark);
  box-shadow: 0 6px 20px rgba(204, 72, 16, 0.38);
}

html[data-theme="light"] .hamburger span { background: var(--text-primary); }
html[data-theme="light"] .mobile-nav {
  background: #FFFFFF;   /* opaque — a translucent sheet ghosts the hero through */
}
html[data-theme="light"] .mobile-nav a { color: var(--text-primary); }
/* `.mobile-nav a` out-specifies `.btn-primary`; restore the CTA's white label */
html[data-theme="light"] .mobile-nav a.btn-primary,
html[data-theme="light"] .mobile-nav a.btn-primary:hover { color: #FFFFFF; }


/* ============================================================
   PART 5 — Buttons
   ============================================================ */

html[data-theme="light"] .btn-primary {
  background: var(--orange);
  color: #FFFFFF;
  box-shadow: 0 2px 10px rgba(204, 72, 16, 0.24);
}
html[data-theme="light"] .btn-primary:hover {
  background: var(--orange-dark);
  color: #FFFFFF;
  box-shadow: 0 10px 28px rgba(204, 72, 16, 0.34);
}
/* The white sheen overlay is invisible on light chrome */
html[data-theme="light"] .btn-outline::before,
html[data-theme="light"] .btn-glass::before,
html[data-theme="light"] .btn-cta-white::before { background: rgba(12, 21, 36, 0.05); }

html[data-theme="light"] .btn-outline {
  color: var(--text-primary);
  border-color: var(--line-strong);
  background: #FFFFFF;
}
html[data-theme="light"] .btn-outline:hover {
  color: var(--orange-text);
  border-color: var(--orange);
  background: var(--orange-wash);
}
html[data-theme="light"] .btn-glass {
  background: #FFFFFF;
  color: var(--text-primary);
  border-color: var(--line);
  box-shadow: var(--card-shadow-sm);
}
html[data-theme="light"] .btn-glass:hover {
  color: var(--orange-text);
  background: var(--orange-wash);
  border-color: var(--orange);
}
@keyframes glowPulseLight {
  0%, 100% { box-shadow: 0 2px 12px rgba(204, 72, 16, 0.30); }
  50%      { box-shadow: 0 6px 30px rgba(204, 72, 16, 0.55); }
}
html[data-theme="light"] .btn-primary.hero-cta { animation: glowPulseLight 3s ease-in-out infinite; }


/* ============================================================
   PART 6 — Cards & panels
   ============================================================ */

html[data-theme="light"] .glass-card,
html[data-theme="light"] .service-card,
html[data-theme="light"] .plan-card,
html[data-theme="light"] .pricing-card,
html[data-theme="light"] .blog-card,
html[data-theme="light"] .offering-card,
html[data-theme="light"] .ext-card,
html[data-theme="light"] .stat-card,
html[data-theme="light"] .testimonial-card,
html[data-theme="light"] .feature-chip,
html[data-theme="light"] .contact-info-card,
html[data-theme="light"] .admin-card,
html[data-theme="light"] .login-card,
html[data-theme="light"] .coming-plugin-card {
  background: #FFFFFF;
  border-color: var(--glass-border);
  box-shadow: var(--card-shadow-sm);
}
html[data-theme="light"] .glass-card:hover {
  background: #FFFFFF;
  border-color: rgba(204, 72, 16, 0.28);
  box-shadow: var(--card-shadow);
}
html[data-theme="light"] .service-card:hover {
  background: #FFFFFF;
  border-color: rgba(204, 72, 16, 0.30);
  box-shadow: 0 16px 40px rgba(16, 32, 62, 0.11), 0 0 0 1px rgba(204, 72, 16, 0.10);
}
html[data-theme="light"] .service-icon {
  background: var(--orange-wash);
  border-color: rgba(204, 72, 16, 0.22);
  color: var(--orange-text);
}
html[data-theme="light"] .service-card:hover .service-icon { background: #FFE7DA; }

html[data-theme="light"] .stat-card:hover,
html[data-theme="light"] .feature-chip:hover {
  border-color: rgba(204, 72, 16, 0.30);
  background: var(--orange-wash);
}
html[data-theme="light"] .stat-number      { color: var(--orange); }
html[data-theme="light"] .feature-chip span,
html[data-theme="light"] .stat-label       { color: var(--text-muted); }
html[data-theme="light"] .feature-icon     { background: var(--orange-wash); }

html[data-theme="light"] .why-features li,
html[data-theme="light"] .feature-list li,
html[data-theme="light"] .plan-features li,
html[data-theme="light"] .pricing-features li,
html[data-theme="light"] .contact-info-item,
html[data-theme="light"] .post-meta-bar,
html[data-theme="light"] .modal-header {
  border-color: var(--line-soft);
}
html[data-theme="light"] .feature-list .lock,
html[data-theme="light"] .coming-plugin-card .lock-overlay { background: var(--bg-overlay); }
html[data-theme="light"] .feature-list .check { background: var(--orange-wash); }


/* ============================================================
   PART 7 — Hero & decorative surfaces
   ============================================================ */

/* ---- Home hero -------------------------------------------
   A flat tint reads as "unfinished" on a light canvas, so the
   hero is built as four stacked layers: a warm bloom behind the
   headline, a cool bloom filling the open right half, a fine dot
   grid for texture, and a wash that fades everything into the
   next section. */
html[data-theme="light"] #hero {
  background-image:
    /* settle into the next section */
    linear-gradient(180deg, rgba(237,242,250,0) 58%, rgba(237,242,250,0.75) 88%, #EDF2FA 100%),
    /* warm bloom behind the headline */
    radial-gradient(46rem 34rem at 2% 14%,  rgba(232, 96,  30, 0.30), transparent 62%),
    /* indigo bloom filling the open right half */
    radial-gradient(54rem 42rem at 86% 34%, rgba(64,  105, 232, 0.30), transparent 62%),
    /* violet + teal accents keep the mesh from banding */
    radial-gradient(36rem 30rem at 58% 104%, rgba(129, 90,  240, 0.22), transparent 66%),
    radial-gradient(30rem 24rem at 30% 96%,  rgba(20,  160, 170, 0.14), transparent 68%),
    /* texture */
    radial-gradient(circle at 1px 1px, rgba(16, 32, 62, 0.09) 1px, transparent 0),
    /* warm-to-cool base wash */
    linear-gradient(158deg, #FFF4EC 0%, #F6F5FE 40%, #EAF0FC 74%, #E6EDFA 100%);
  background-size: auto, auto, auto, auto, auto, 26px 26px, auto;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat, no-repeat;
}

/* Warm core, pushed off the right edge so it lights the empty half */
html[data-theme="light"] #hero::before {
  width: 820px;
  height: 820px;
  top: 44%;
  left: auto;
  right: -180px;
  transform: translateY(-50%);
  background: radial-gradient(circle,
              rgba(204, 72, 16, 0.16) 0%,
              rgba(204, 72, 16, 0.05) 44%,
              transparent 70%);
}

/* Brand-mark graphic: concentric rings + the ArvoPeak peak,
   drawn as an inline SVG so it costs no extra request. */
html[data-theme="light"] #hero::after {
  content: '';
  position: absolute;
  right: -40px;
  top: 52%;
  width: 540px;
  height: 540px;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 0;
  opacity: 1;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 520' fill='none'%3E%3Ccircle cx='260' cy='260' r='250' stroke='%230C1524' stroke-opacity='.14'/%3E%3Ccircle cx='260' cy='260' r='192' stroke='%234069E8' stroke-opacity='.20'/%3E%3Ccircle cx='260' cy='260' r='134' stroke='%23CC4810' stroke-opacity='.34' stroke-dasharray='3 9'/%3E%3Ccircle cx='260' cy='260' r='250' fill='%23FFFFFF' fill-opacity='.16'/%3E%3Cpolygon points='260,120 382,332 138,332' stroke='%23CC4810' stroke-opacity='.62' stroke-width='3' stroke-linejoin='round'/%3E%3Cpolyline points='188,332 260,205 318,300' stroke='%23CC4810' stroke-opacity='.62' stroke-width='3' stroke-linejoin='round'/%3E%3Ccircle cx='260' cy='10' r='6' fill='%23CC4810' fill-opacity='.8'/%3E%3Ccircle cx='452' cy='420' r='5' fill='%234069E8' fill-opacity='.75'/%3E%3Ccircle cx='68' cy='420' r='4' fill='%23815AF0' fill-opacity='.7'/%3E%3Ccircle cx='452' cy='100' r='3.5' fill='%2314A0AA' fill-opacity='.7'/%3E%3C/svg%3E");
  animation: heroMarkDrift 18s ease-in-out infinite;
}
@keyframes heroMarkDrift {
  0%, 100% { transform: translateY(-50%) rotate(0deg)   scale(1);    }
  50%      { transform: translateY(-53%) rotate(3.5deg) scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme="light"] #hero::after { animation: none; }
}
@media (max-width: 1100px) {
  html[data-theme="light"] #hero::after { width: 460px; height: 460px; right: -160px; opacity: 0.6; }
}
@media (max-width: 768px) {
  html[data-theme="light"] #hero::after { width: 360px; height: 360px; right: -190px; top: 16%; opacity: 0.26; }
}

/* The dark hero's display size overpowers a light background —
   the same copy needs less weight to read as confident here. */
html[data-theme="light"] .hero-title {
  font-size: clamp(2.35rem, 4.8vw, 3.9rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.025em;
}
html[data-theme="light"] .hero-subtitle { max-width: 620px; }

/* The particle canvas paints white + orange dots. `multiply`
   drops the whites out over a light page and keeps the orange,
   so the hero texture survives the flip without touching JS. */
html[data-theme="light"] #hero-canvas {
  mix-blend-mode: multiply;
  opacity: 0.8;
}
html[data-theme="light"] .hero-badge {
  background: var(--orange-wash);
  border-color: rgba(204, 72, 16, 0.28);
}
html[data-theme="light"] .hero-title .accent { color: var(--orange); }
html[data-theme="light"] .hero-subtitle,
html[data-theme="light"] .hero-subtitle .tag { color: var(--text-muted); }
html[data-theme="light"] .scroll-arrow { border-color: var(--line-strong); }
html[data-theme="light"] .hero-scroll-indicator { color: var(--text-faint); }

/* ---- Inner-page heroes ------------------------------------
   Same recipe at a smaller scale: dot grid for texture, a warm
   bloom on the copy side, a cool bloom on the open side, and a
   fade into the section below. Each product page keeps its own
   hue by re-tinting the second bloom further down. */
html[data-theme="light"] .page-hero,
html[data-theme="light"] .post-hero,
html[data-theme="light"] .legal-hero,
html[data-theme="light"] .ext-hero,
html[data-theme="light"] .psa-hero,
html[data-theme="light"] .dld-hero,
html[data-theme="light"] .toc-hero,
html[data-theme="light"] .lpf-hero,
html[data-theme="light"] .cm-hero,
html[data-theme="light"] .pl-hero,
html[data-theme="light"] .lc-hero,
html[data-theme="light"] .bt-hero,
html[data-theme="light"] .lcp-hero,
html[data-theme="light"] .psap-hero {
  position: relative;
  border-bottom-color: var(--line-soft);
  background-image:
    linear-gradient(180deg, rgba(240,244,250,0) 62%, rgba(240,244,250,0.8) 90%, #F0F4FA 100%),
    radial-gradient(40rem 28rem at 0% 6%,   rgba(232, 96,  30, 0.28), transparent 64%),
    radial-gradient(46rem 34rem at 90% 56%, var(--hero-accent-2, rgba(64, 105, 232, 0.28)), transparent 62%),
    radial-gradient(28rem 22rem at 46% 108%, rgba(129, 90, 240, 0.16), transparent 68%),
    radial-gradient(circle at 1px 1px, rgba(16, 32, 62, 0.085) 1px, transparent 0),
    linear-gradient(158deg, #FFF5EE 0%, #F7F6FE 42%, #ECF1FC 78%, #E8EEFA 100%);
  background-size: auto, auto, auto, auto, 24px 24px, auto;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, no-repeat;
}

/* A soft ring motif anchors the open side of each inner hero.
   Left-aligned heroes get one on the right; the centred
   Extensions hero gets a mirrored pair so it stays balanced. */
html[data-theme="light"] .page-hero::before,
html[data-theme="light"] .ext-hero::before,
html[data-theme="light"] .legal-hero::before,
html[data-theme="light"] .post-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' fill='none'%3E%3Ccircle cx='200' cy='200' r='192' stroke='%230C1524' stroke-opacity='.13'/%3E%3Ccircle cx='200' cy='200' r='140' stroke='%234069E8' stroke-opacity='.20'/%3E%3Ccircle cx='200' cy='200' r='88' stroke='%23CC4810' stroke-opacity='.32' stroke-dasharray='3 9'/%3E%3Cpolygon points='200,122 268,262 132,262' stroke='%23CC4810' stroke-opacity='.55' stroke-width='2.4' stroke-linejoin='round'/%3E%3Cpolyline points='160,262 200,190 234,240' stroke='%23CC4810' stroke-opacity='.55' stroke-width='2.4' stroke-linejoin='round'/%3E%3Ccircle cx='200' cy='8' r='4.5' fill='%23CC4810' fill-opacity='.75'/%3E%3Ccircle cx='348' cy='320' r='4' fill='%234069E8' fill-opacity='.7'/%3E%3C/svg%3E")
              no-repeat right -90px center / 420px 420px;
}
html[data-theme="light"] .ext-hero::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' fill='none'%3E%3Ccircle cx='200' cy='200' r='192' stroke='%230C1524' stroke-opacity='.11'/%3E%3Ccircle cx='200' cy='200' r='140' stroke='%234069E8' stroke-opacity='.17'/%3E%3Ccircle cx='200' cy='200' r='88' stroke='%23CC4810' stroke-opacity='.26' stroke-dasharray='3 9'/%3E%3Cpolygon points='200,122 268,262 132,262' stroke='%23CC4810' stroke-opacity='.45' stroke-width='2.4' stroke-linejoin='round'/%3E%3Cpolyline points='160,262 200,190 234,240' stroke='%23CC4810' stroke-opacity='.45' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E")
      no-repeat right -150px center / 400px 400px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' fill='none'%3E%3Ccircle cx='200' cy='200' r='192' stroke='%230C1524' stroke-opacity='.11'/%3E%3Ccircle cx='200' cy='200' r='140' stroke='%23815AF0' stroke-opacity='.17'/%3E%3Ccircle cx='200' cy='200' r='88' stroke='%23CC4810' stroke-opacity='.22' stroke-dasharray='3 9'/%3E%3C/svg%3E")
      no-repeat left -150px center / 400px 400px;
}
html[data-theme="light"] .page-hero  > .container,
html[data-theme="light"] .ext-hero   > .container,
html[data-theme="light"] .legal-hero > .container,
html[data-theme="light"] .post-hero  > .container { position: relative; z-index: 1; }

@media (max-width: 900px) {
  html[data-theme="light"] .page-hero::before,
  html[data-theme="light"] .legal-hero::before,
  html[data-theme="light"] .post-hero::before { background-size: 300px 300px; background-position: right -120px center; opacity: 0.55; }
  html[data-theme="light"] .ext-hero::before  { opacity: 0.5; }
}

/* Per-product hero hue for the second bloom */
html[data-theme="light"] .psa-hero  { --hero-accent-2: rgba(20, 140, 80,  0.16); }
html[data-theme="light"] .dld-hero  { --hero-accent-2: rgba(59, 130, 246, 0.16); }
html[data-theme="light"] .toc-hero  { --hero-accent-2: rgba(99, 102, 241, 0.17); }
html[data-theme="light"] .lpf-hero  { --hero-accent-2: rgba(10, 102, 194, 0.17); }
html[data-theme="light"] .cm-hero   { --hero-accent-2: rgba(47,  95, 224, 0.17); }
html[data-theme="light"] .pl-hero   { --hero-accent-2: rgba(220, 38,  38, 0.14); }
html[data-theme="light"] .lc-hero   { --hero-accent-2: rgba(10, 107, 83,  0.17); }
html[data-theme="light"] .bt-hero   { --hero-accent-2: rgba(20, 167, 108, 0.17); }
html[data-theme="light"] .lcp-hero  { --hero-accent-2: rgba(59, 130, 246, 0.16); }
html[data-theme="light"] .psap-hero { --hero-accent-2: rgba(180, 83,  9,  0.15); }


/* ============================================================
   PART 8 — Mockups, spotlight & progress chrome
   ============================================================ */

html[data-theme="light"] .spotlight-mockup {
  background: linear-gradient(160deg, #FFFFFF 0%, #F2F6FC 100%);
  border-color: var(--glass-border);
  box-shadow: var(--card-shadow);
}
html[data-theme="light"] .spotlight-mockup::before {
  background: radial-gradient(ellipse at center, rgba(204, 72, 16, 0.07) 0%, transparent 70%);
}
html[data-theme="light"] .mockup-browser {
  background: #FFFFFF;
  border-color: var(--line);
  box-shadow: var(--card-shadow-sm);
}
html[data-theme="light"] .mockup-browser-bar {
  background: #F2F5FA;
  border-bottom-color: var(--line-soft);
}
html[data-theme="light"] .progress-bar-mockup { background: var(--bg-overlay); }


/* ============================================================
   PART 9 — Testimonials, blog, CTA band, footer
   ============================================================ */

html[data-theme="light"] .testimonial-text  { color: var(--text-secondary); }
html[data-theme="light"] .testimonial-stars { color: #B45309; }
html[data-theme="light"] .star-rating       { color: #B45309; }
html[data-theme="light"] .quote-icon        { color: var(--orange); opacity: 0.22; }
html[data-theme="light"] .testimonial-card:hover {
  border-color: rgba(204, 72, 16, 0.24);
  box-shadow: var(--card-shadow);
}

html[data-theme="light"] .blog-card:hover {
  border-color: rgba(204, 72, 16, 0.24);
  box-shadow: var(--card-shadow);
}
html[data-theme="light"] .blog-image {
  background: linear-gradient(135deg, #EEF3FB, #E3EBF7);
  color: rgba(16, 32, 62, 0.18);
}
html[data-theme="light"] .blog-image--placeholder {
  background: linear-gradient(145deg, #EFF4FC 0%, #E6EDF8 60%, #E9EFFB 100%);
}
html[data-theme="light"] .blog-image--placeholder::before {
  background: radial-gradient(ellipse at 30% 40%, rgba(204, 72, 16, 0.08) 0%, transparent 65%);
}
html[data-theme="light"] .blog-cat { background: var(--orange-wash); }
html[data-theme="light"] .blog-date { color: var(--text-faint); }
html[data-theme="light"] .blog-card h3 a { color: var(--text-primary); }

/* The CTA band stays a saturated orange block — it is the one
   deliberate dark-on-colour moment in the light theme. */
html[data-theme="light"] #cta-banner {
  background: linear-gradient(135deg, #D9480F, var(--orange), #F07A33);
}
html[data-theme="light"] #cta-banner h2 { color: #FFFFFF; }
html[data-theme="light"] #cta-banner p  { color: rgba(255, 255, 255, 0.92); }
html[data-theme="light"] .btn-cta-white { background: #FFFFFF; }
html[data-theme="light"] .btn-cta-white:hover {
  color: var(--orange-dark);
  box-shadow: 0 10px 34px rgba(90, 30, 0, 0.28);
}

html[data-theme="light"] #footer {
  background: var(--bg-sunken);
  border-top-color: var(--line);
}
html[data-theme="light"] .footer-brand .logo      { color: var(--text-primary); }
html[data-theme="light"] .footer-brand .logo span { color: var(--orange); }
html[data-theme="light"] .footer-col h4           { color: var(--text-primary); }
html[data-theme="light"] .footer-col ul li a,
html[data-theme="light"] .footer-contact-item span { color: var(--text-muted); }
html[data-theme="light"] .footer-contact-item .icon { background: var(--orange-wash); }
html[data-theme="light"] .social-link {
  background: #FFFFFF;
  border-color: var(--line);
  color: var(--text-muted);
}
html[data-theme="light"] .social-link:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: #FFFFFF;
}
html[data-theme="light"] .footer-bottom      { border-top-color: var(--line); }
html[data-theme="light"] .footer-bottom p,
html[data-theme="light"] .footer-bottom a    { color: var(--text-faint); }


/* ============================================================
   PART 10 — Modal & forms
   ============================================================ */

html[data-theme="light"] .modal-overlay {
  background: rgba(12, 21, 36, 0.42);
}
html[data-theme="light"] .modal-box {
  background: #FFFFFF;
  border-color: var(--line);
  box-shadow: var(--card-shadow-lg);
}
html[data-theme="light"] .modal-close {
  background: var(--bg-overlay);
  border-color: var(--line);
  color: var(--text-muted);
}
html[data-theme="light"] .modal-close:hover {
  background: var(--orange-wash);
  border-color: var(--orange);
  color: var(--orange-text);
}

html[data-theme="light"] .form-group label { color: var(--text-secondary); }
html[data-theme="light"] .form-group input,
html[data-theme="light"] .form-group select,
html[data-theme="light"] .form-group textarea,
html[data-theme="light"] .lc-manage-form input {
  background: #FFFFFF;
  border-color: var(--line-strong);
  color: var(--text-primary);
}
html[data-theme="light"] .form-group input::placeholder,
html[data-theme="light"] .form-group textarea::placeholder { color: var(--text-faint); }
html[data-theme="light"] .form-group input:focus,
html[data-theme="light"] .form-group select:focus,
html[data-theme="light"] .form-group textarea:focus {
  border-color: var(--orange);
  background: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(204, 72, 16, 0.14);
}
/* Dark caret for the custom select arrow */
html[data-theme="light"] .form-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234C5A75' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
}
html[data-theme="light"] .form-group select option { background: #FFFFFF; color: var(--text-primary); }
html[data-theme="light"] .form-note { color: var(--text-faint); }
html[data-theme="light"] .form-success .success-icon { background: rgba(21, 128, 61, 0.12); color: #15803D; }


/* ============================================================
   PART 11 — Pricing, FAQ, tabs, pagination
   ============================================================ */

html[data-theme="light"] .plan-card.popular,
html[data-theme="light"] .pricing-card.featured {
  border-color: var(--orange);
  background: var(--orange-wash);
  box-shadow: 0 2px 6px rgba(16, 32, 62, 0.06), 0 18px 44px rgba(204, 72, 16, 0.14);
}
html[data-theme="light"] .plan-price,
html[data-theme="light"] .pricing-card .price sup { color: var(--orange); }
html[data-theme="light"] .pricing-card .price     { color: var(--text-primary); }
html[data-theme="light"] .plan-badge              { color: #FFFFFF; }
html[data-theme="light"] .pricing-note {
  background: var(--orange-wash);
  border-color: rgba(204, 72, 16, 0.20);
  color: var(--text-muted);
}
html[data-theme="light"] .offering-stat {
  background: var(--bg-subtle);
  border-color: var(--line-soft);
}

html[data-theme="light"] .faq-item {
  background: #FFFFFF;
  border-color: var(--line);
  box-shadow: var(--card-shadow-sm);
}
html[data-theme="light"] .faq-item.open { border-color: rgba(204, 72, 16, 0.35); }
html[data-theme="light"] .faq-question  { color: var(--text-primary); }
html[data-theme="light"] .faq-icon      { border-color: var(--line-strong); color: var(--orange-text); }
html[data-theme="light"] .faq-item.open .faq-icon {
  background: var(--orange-wash);
  border-color: var(--orange);
}

html[data-theme="light"] .cat-tab,
html[data-theme="light"] .page-num {
  border-color: var(--line-strong);
  background: #FFFFFF;
  color: var(--text-muted);
}
html[data-theme="light"] .cat-tab:hover,
html[data-theme="light"] .cat-tab.active,
html[data-theme="light"] .page-num:hover,
html[data-theme="light"] .page-num.active {
  background: var(--orange);
  border-color: var(--orange);
  color: #FFFFFF;
}

html[data-theme="light"] .breadcrumb,
html[data-theme="light"] .breadcrumb a { color: var(--text-faint); }


/* ============================================================
   PART 12 — Long-form content (blog post, legal pages)
   ============================================================ */

html[data-theme="light"] .post-content p,
html[data-theme="light"] .post-content li,
html[data-theme="light"] .legal-content p,
html[data-theme="light"] .legal-content ul { color: var(--text-secondary); }
html[data-theme="light"] .post-content strong,
html[data-theme="light"] .legal-content h2,
html[data-theme="light"] .legal-content h3 { color: var(--text-primary); }
html[data-theme="light"] .post-content blockquote {
  background: var(--orange-wash);
  border-left-color: var(--orange);
}
html[data-theme="light"] .legal-content h2 { border-top-color: var(--line-soft); }
html[data-theme="light"] .legal-toc a      { border-left-color: var(--line); }
html[data-theme="light"] .legal-toc a:hover { color: var(--text-primary); border-left-color: var(--orange); }
html[data-theme="light"] .legal-toc        { border-color: var(--line); }
html[data-theme="light"] .legal-highlight {
  background: var(--orange-wash);
  border-color: rgba(204, 72, 16, 0.20);
}
html[data-theme="light"] .legal-highlight p { color: var(--text-secondary); }
html[data-theme="light"] .privacy-table-wrap { border-color: var(--line); background: #FFFFFF; }
html[data-theme="light"] .privacy-table th {
  background: var(--bg-subtle);
  border-bottom-color: var(--line);
  color: var(--text-muted);
}
html[data-theme="light"] .privacy-table td {
  color: var(--text-secondary);
  border-bottom-color: var(--line-soft);
}


/* ============================================================
   PART 13 — Admin panel
   ============================================================ */

html[data-theme="light"] .admin-wrapper,
html[data-theme="light"] .admin-login  { background: var(--bg-base); }
html[data-theme="light"] .admin-top    { background: #FFFFFF; border-bottom-color: var(--line); }
html[data-theme="light"] .admin-bar .logo,
html[data-theme="light"] .login-card .admin-logo { color: var(--text-primary); }
html[data-theme="light"] .admin-bar .logo span,
html[data-theme="light"] .login-card .admin-logo span { color: var(--orange); }
html[data-theme="light"] .admin-nav a  { color: var(--text-muted); }
html[data-theme="light"] .admin-nav a:hover,
html[data-theme="light"] .admin-nav a.active { background: var(--orange-wash); }
html[data-theme="light"] .admin-table th { color: var(--text-faint); border-bottom-color: var(--line); }
html[data-theme="light"] .admin-table td { color: var(--text-secondary); border-bottom-color: var(--line-soft); }
html[data-theme="light"] .admin-table tr:hover td { background: var(--bg-subtle); }
html[data-theme="light"] .status-dot.published { color: #15803D; }
html[data-theme="light"] .status-dot.published::before { background: #15803D; }
html[data-theme="light"] .status-dot.draft { color: #A16207; }
html[data-theme="light"] .status-dot.draft::before { background: #A16207; }
html[data-theme="light"] .btn-edit { background: var(--orange-wash); }
html[data-theme="light"] .btn-edit:hover { background: #FFE3D5; }
html[data-theme="light"] .btn-del  { background: rgba(185, 28, 28, 0.09); color: #B91C1C; }
html[data-theme="light"] .btn-del:hover { background: rgba(185, 28, 28, 0.16); }
html[data-theme="light"] .alert-error {
  background: rgba(185, 28, 28, 0.08);
  border-color: rgba(185, 28, 28, 0.22);
  color: #B91C1C;
}
html[data-theme="light"] .alert-success {
  background: rgba(21, 128, 61, 0.08);
  border-color: rgba(21, 128, 61, 0.22);
  color: #15803D;
}


/* ============================================================
   PART 14 — Contact page
   ============================================================ */

html[data-theme="light"] .ci-icon  { background: var(--orange-wash); border-color: rgba(204, 72, 16, 0.20); }
html[data-theme="light"] .ci-label { color: var(--text-faint); }
html[data-theme="light"] .ci-value { color: var(--text-primary); }


/* ============================================================
   PART 15 — Chrome-extensions page
   ============================================================ */

html[data-theme="light"] .chrome-badge {
  background: #FFFFFF;
  border-color: var(--line);
  color: var(--text-muted);
  box-shadow: var(--card-shadow-sm);
}
html[data-theme="light"] .ext-stats       { border-top-color: var(--line-soft); }
html[data-theme="light"] .ext-stat-num    { color: var(--text-primary); }
html[data-theme="light"] .ext-stat-lbl    { color: var(--text-muted); }
html[data-theme="light"] .ext-card:hover {
  border-color: rgba(204, 72, 16, 0.30);
  box-shadow: 0 20px 48px rgba(16, 32, 62, 0.12);
}
html[data-theme="light"] .ext-card-header { border-bottom-color: var(--line-soft); }
html[data-theme="light"] .ext-card-name   { color: var(--text-primary); }
html[data-theme="light"] .ext-feat-list li { color: var(--text-secondary); }
html[data-theme="light"] .ext-btn-secondary {
  background: #FFFFFF;
  border-color: var(--line-strong);
  color: var(--text-secondary);
}
html[data-theme="light"] .ext-btn-secondary:hover {
  border-color: var(--line-strong);
  color: var(--text-primary);
  background: var(--bg-subtle);
}
html[data-theme="light"] .ext-btn-primary:hover { box-shadow: 0 8px 24px rgba(16, 32, 62, 0.18); }
html[data-theme="light"] .ext-why-card h3,
html[data-theme="light"] .ext-coming h3   { color: var(--text-primary); }
html[data-theme="light"] .tag-free        { background: rgba(20, 107, 52, 0.12); color: #146B34; }
html[data-theme="light"] .pro-label,
html[data-theme="light"] .ext-card--seo  .pro-label,
html[data-theme="light"] .ext-card--link .pro-label,
html[data-theme="light"] .ext-card--li   .pro-label,
html[data-theme="light"] .ext-card--lead .pro-label,
html[data-theme="light"] .ext-card--clip .pro-label,
html[data-theme="light"] .ext-card--pdf  .pro-label { background: rgba(154, 74, 8, 0.12); color: #9A4A08; }


/* ============================================================
   PART 16 — Product landing pages (shared naming patterns)
   These pages all follow the same `<prefix>-<part>` vocabulary,
   so a handful of attribute selectors covers every one of them.
   ============================================================ */

/* Comparison tables ---------------------------------------- */
html[data-theme="light"] [class*="-table"] td {
  color: var(--text-secondary);
  border-bottom-color: var(--line-soft);
}
html[data-theme="light"] [class*="-table"] th { color: var(--text-muted); }
html[data-theme="light"] [class*="-table"] th:nth-child(2) { color: var(--text-primary); }
html[data-theme="light"] [class*="-table"] tr:hover td { background: var(--bg-subtle); }
html[data-theme="light"] [class*="-table-wrap"] {
  background: #FFFFFF;
  border-color: var(--line);
  box-shadow: var(--card-shadow-sm);
}
html[data-theme="light"] .cross { color: rgba(16, 32, 62, 0.30); }

/* Status hues used as small text on the pale tints they sit on.
   Deepened one step each; the "not included" dash stays quiet. */
html[data-theme="light"] .tick-free,
html[data-theme="light"] [class*="-table"] .tick-free,
html[data-theme="light"] .toc-tech-pill span { color: #146B34; }
html[data-theme="light"] .toc-pro-badge { background: #4338CA; color: #FFFFFF; }
html[data-theme="light"] .lc-price-badge {
  color: #8A5A00;
  background: rgba(138, 90, 0, 0.10);
  border-color: rgba(138, 90, 0, 0.26);
}
html[data-theme="light"] .ga { background: rgba(20, 107, 52, 0.12);  color: #146B34; }
html[data-theme="light"] .gb { background: rgba(29, 78, 216, 0.10);  color: #1D4ED8; }
html[data-theme="light"] .gc { background: rgba(154, 74, 8, 0.12);   color: #9A4A08; }
html[data-theme="light"] .gd { background: rgba(185, 28, 28, 0.10);  color: #B91C1C; }
html[data-theme="light"] .toc-mode-card code,
html[data-theme="light"] .toc-table code {
  background: rgba(67, 56, 202, 0.08) !important;
  color: #4338CA !important;
}

/* Hero badges / chips / pills ------------------------------- */
html[data-theme="light"] .psa-badge-row span,
html[data-theme="light"] .dld-badge,
html[data-theme="light"] .lpf-badge,
html[data-theme="light"] .cm-badge,
html[data-theme="light"] .pl-badge,
html[data-theme="light"] .lc-badge,
html[data-theme="light"] .bt-badge,
html[data-theme="light"] .toc-tech-pill,
html[data-theme="light"] .psa-cms-tag {
  background: #FFFFFF;
  border-color: var(--line);
  color: var(--text-secondary);
  box-shadow: var(--card-shadow-sm);
}
html[data-theme="light"] .psa-cms-tag:hover { color: var(--text-primary); }
html[data-theme="light"] .psa-badge-sep     { color: var(--text-faint); }

/* Hero status chips ("Free Android App", "Free Chrome Extension"…)
   Each page pairs a pale accent text with a pale tint of the same
   hue — legible on the dark canvas, invisible on this one. */
html[data-theme="light"] .bt-chip  { background: rgba(11, 107, 70, 0.11);  color: #0B6B46; border-color: rgba(11, 107, 70, 0.30); }
html[data-theme="light"] .lc-chip  { background: rgba(10, 107, 83, 0.11);  color: #0A6B53; border-color: rgba(10, 107, 83, 0.30); }
html[data-theme="light"] .cm-chip  { background: rgba(47, 95, 224, 0.10);  color: #2F5FE0; border-color: rgba(47, 95, 224, 0.30); }
html[data-theme="light"] .lpf-chip { background: rgba(10, 102, 194, 0.10); color: #0A66C2; border-color: rgba(10, 102, 194, 0.30); }
html[data-theme="light"] .pl-chip  { background: rgba(197, 31, 31, 0.09);  color: #C51F1F; border-color: rgba(197, 31, 31, 0.30); }

/* Privacy / legend / callout strips ------------------------- */
html[data-theme="light"] .psa-privacy,
html[data-theme="light"] .dld-privacy,
html[data-theme="light"] .lpf-privacy,
html[data-theme="light"] .cm-privacy,
html[data-theme="light"] .pl-privacy,
html[data-theme="light"] .lc-privacy,
html[data-theme="light"] .psa-check-legend,
html[data-theme="light"] .toc-highlight {
  background: #FFFFFF;
  border-color: var(--line);
  box-shadow: var(--card-shadow-sm);
}

/* Carousels ------------------------------------------------- */
html[data-theme="light"] .cm-viewport,
html[data-theme="light"] .lc-viewport,
html[data-theme="light"] .arvo-ss-viewport,
html[data-theme="light"] .rp-ss-viewport {
  background: #FFFFFF;
  box-shadow: var(--card-shadow-lg);
}
html[data-theme="light"] .cm-slide figcaption,
html[data-theme="light"] .lc-slide figcaption {
  background: var(--bg-subtle);
  border-top-color: var(--line-soft);
}
html[data-theme="light"] .cm-arrow,
html[data-theme="light"] .lc-arrow,
html[data-theme="light"] .bt-arrow,
html[data-theme="light"] .arvo-ss-nav,
html[data-theme="light"] .rp-ss-nav {
  background: #FFFFFF;
  border-color: var(--line-strong);
  color: var(--text-primary);
  box-shadow: var(--card-shadow-sm);
}
html[data-theme="light"] .cm-dot,
html[data-theme="light"] .lc-dot,
html[data-theme="light"] .bt-dot,
html[data-theme="light"] .arvo-ss-dot,
html[data-theme="light"] .rp-ss-dot { background: rgba(16, 32, 62, 0.20); }
html[data-theme="light"] .arvo-ss-dot:hover,
html[data-theme="light"] .rp-ss-dot:hover { background: rgba(16, 32, 62, 0.42); }
html[data-theme="light"] .arvo-ss-caption,
html[data-theme="light"] .rp-ss-caption   { color: var(--text-secondary); }

/* Large product banners / screenshots ----------------------- */
html[data-theme="light"] .lpf-hero-img,
html[data-theme="light"] .cm-hero-banner,
html[data-theme="light"] .pl-hero-banner,
html[data-theme="light"] .lc-hero-banner,
html[data-theme="light"] .bt-hero-banner,
html[data-theme="light"] .psa-mockup,
html[data-theme="light"] .toc-mockup {
  box-shadow: 0 24px 60px rgba(16, 32, 62, 0.16), 0 0 0 1px var(--line);
}

/* Body copy that hardcodes translucent white ---------------- */
html[data-theme="light"] .toc-mode-list li,
html[data-theme="light"] .toc-pro-list li,
html[data-theme="light"] .lcp-price-list li,
html[data-theme="light"] .psap-price-list li,
html[data-theme="light"] .bt-version-note { color: var(--text-secondary); }
html[data-theme="light"] .lcp-price-list li,
html[data-theme="light"] .psap-price-list li { border-bottom-color: var(--line-soft); }
html[data-theme="light"] .lcp-feat-card:hover,
html[data-theme="light"] .psap-feat-card:hover { box-shadow: var(--card-shadow); }

/* Headings on these pages use var(--white), which the tokens
   above already flip — no extra rules needed for them. */

/* The in-page "app dashboard" mock-ups are intentionally dark —
   they depict a dark product UI, so they keep their own skin. */
html[data-theme="light"] .lcp-dash,
html[data-theme="light"] .psap-dash,
html[data-theme="light"] .bt-phone {
  box-shadow: 0 24px 60px rgba(16, 32, 62, 0.22), 0 0 0 1px rgba(16, 32, 62, 0.10);
}
html[data-theme="light"] .lcp-dash h3,
html[data-theme="light"] .psap-dash h3,
html[data-theme="light"] .bt-phone h3 { color: inherit; }


/* ============================================================
   PART 17 — Sticky buy bar & cookie banner
   ============================================================ */

html[data-theme="light"] .sticky-buy-btn {
  box-shadow: 0 8px 26px rgba(16, 32, 62, 0.22);
  color: #FFFFFF;
}
html[data-theme="light"] .sticky-buy-btn:hover { box-shadow: 0 14px 34px rgba(16, 32, 62, 0.28); }
@media (max-width: 768px) {
  html[data-theme="light"] .sticky-buy-bar {
    background: rgba(255, 255, 255, 0.97);
    border-top-color: var(--line);
    box-shadow: 0 -4px 20px rgba(16, 32, 62, 0.08);
  }
}

html[data-theme="light"] #cookie-banner {
  background: rgba(255, 255, 255, 0.97) !important;
  border-color: var(--line) !important;
  box-shadow: 0 -4px 24px rgba(16, 32, 62, 0.09);
}
@media (min-width: 769px) {
  html[data-theme="light"] #cookie-banner {
    background: #FFFFFF !important;
    box-shadow: 0 12px 40px rgba(16, 32, 62, 0.16);
  }
}
html[data-theme="light"] #cookie-banner p { color: var(--text-muted) !important; }
html[data-theme="light"] #cookie-banner a[href*="privacy"] { color: var(--orange-text) !important; }
html[data-theme="light"] #cookie-dismiss {
  border-color: var(--line-strong) !important;
  color: var(--text-secondary) !important;
}
html[data-theme="light"] #cookie-dismiss:hover { background: var(--bg-subtle) !important; }
#cookie-dismiss:hover { background: rgba(255, 255, 255, 0.08); }


/* ============================================================
   PART 18 — Inline-style rescue
   ------------------------------------------------------------
   Page markup carries inline `style="…"` colours that assume a
   dark canvas. Inline styles beat stylesheets, so these are the
   one place !important is warranted. Elements whose inline style
   also sets a coloured background are excluded — white text is
   correct there.
   ============================================================ */

/* --- White / near-white inline text --- */
html[data-theme="light"] [style*="color:white"]:not([style*="linear-gradient"]):not([style*="background:#"]):not([style*="background:var(--orange)"]),
html[data-theme="light"] [style*="color:#fff"]:not([style*="linear-gradient"]):not([style*="background:#"]):not([style*="background:rgba(255,255,255"]),
html[data-theme="light"] [style*="color:#ffffff"]:not([style*="linear-gradient"]):not([style*="background:#"]),
html[data-theme="light"] [style*="color:var(--white)"] {
  color: var(--text-primary) !important;
}

/* --- Translucent white inline text, hierarchy preserved --- */
html[data-theme="light"] [style*="color:rgba(255,255,255,.9"],
html[data-theme="light"] [style*="color:rgba(255,255,255,0.9"],
html[data-theme="light"] [style*="color:rgba(255,255,255,.88"],
html[data-theme="light"] [style*="color:rgba(255,255,255,.85"],
html[data-theme="light"] [style*="color:rgba(255,255,255,0.85"],
html[data-theme="light"] [style*="color:rgba(255,255,255,.8"],
html[data-theme="light"] [style*="color:rgba(255,255,255,0.8"],
html[data-theme="light"] [style*="color:rgba(255,255,255,.75"],
html[data-theme="light"] [style*="color:rgba(255,255,255,0.75"],
html[data-theme="light"] [style*="color:rgba(255,255,255,.7"],
html[data-theme="light"] [style*="color:rgba(255,255,255,0.7"] {
  color: var(--text-secondary) !important;
}
html[data-theme="light"] [style*="color:rgba(255,255,255,.65"],
html[data-theme="light"] [style*="color:rgba(255,255,255,0.65"],
html[data-theme="light"] [style*="color:rgba(255,255,255,.6"],
html[data-theme="light"] [style*="color:rgba(255,255,255,0.6"],
html[data-theme="light"] [style*="color:rgba(255,255,255,.55"],
html[data-theme="light"] [style*="color:rgba(255,255,255,0.55"],
html[data-theme="light"] [style*="color:rgba(255,255,255,.5"],
html[data-theme="light"] [style*="color:rgba(255,255,255,0.5"] {
  color: var(--text-muted) !important;
}
html[data-theme="light"] [style*="color:rgba(255,255,255,.45"],
html[data-theme="light"] [style*="color:rgba(255,255,255,0.45"],
html[data-theme="light"] [style*="color:rgba(255,255,255,.4"],
html[data-theme="light"] [style*="color:rgba(255,255,255,0.4"],
html[data-theme="light"] [style*="color:rgba(255,255,255,.35"],
html[data-theme="light"] [style*="color:rgba(255,255,255,0.35"],
html[data-theme="light"] [style*="color:rgba(255,255,255,.3"],
html[data-theme="light"] [style*="color:rgba(255,255,255,0.3"],
html[data-theme="light"] [style*="color:rgba(255,255,255,.25"],
html[data-theme="light"] [style*="color:rgba(255,255,255,.2"] {
  color: var(--text-faint) !important;
}

/* --- Translucent white inline surfaces & rules --- */
html[data-theme="light"] [style*="background:rgba(255,255,255,0.12"],
html[data-theme="light"] [style*="background:rgba(255,255,255,.12"],
html[data-theme="light"] [style*="background:rgba(255,255,255,0.08"],
html[data-theme="light"] [style*="background:rgba(255,255,255,.08"],
html[data-theme="light"] [style*="background:rgba(255,255,255,0.07"],
html[data-theme="light"] [style*="background:rgba(255,255,255,.07"],
html[data-theme="light"] [style*="background:rgba(255,255,255,0.06"],
html[data-theme="light"] [style*="background:rgba(255,255,255,0.05"],
html[data-theme="light"] [style*="background:rgba(255,255,255,0.04"],
html[data-theme="light"] [style*="background:rgba(255,255,255,.04"],
html[data-theme="light"] [style*="background:rgba(255,255,255,0.03"],
html[data-theme="light"] [style*="background:rgba(255,255,255,.03"] {
  background: var(--bg-subtle) !important;
}
/* Black scrims read as heavy gray slabs on a light canvas */
html[data-theme="light"] [style*="background:rgba(0,0,0,.1"],
html[data-theme="light"] [style*="background:rgba(0,0,0,0.1"],
html[data-theme="light"] [style*="background:rgba(0,0,0,.2"],
html[data-theme="light"] [style*="background:rgba(0,0,0,0.2"] {
  background: rgba(16, 32, 62, 0.05) !important;
}

html[data-theme="light"] [style*="rgba(255,255,255,.06)"],
html[data-theme="light"] [style*="rgba(255,255,255,0.06)"],
html[data-theme="light"] [style*="rgba(255,255,255,.07)"],
html[data-theme="light"] [style*="rgba(255,255,255,0.07)"],
html[data-theme="light"] [style*="rgba(255,255,255,.08)"],
html[data-theme="light"] [style*="rgba(255,255,255,0.08)"],
html[data-theme="light"] [style*="rgba(255,255,255,.1)"],
html[data-theme="light"] [style*="rgba(255,255,255,0.1)"],
html[data-theme="light"] [style*="rgba(255,255,255,.15)"],
html[data-theme="light"] [style*="rgba(255,255,255,0.15)"] {
  border-color: var(--line) !important;
}

/* --- Accent hues that are too pale to read on white --- */
html[data-theme="light"] [style*="color:#4ade80"],
html[data-theme="light"] [style*="color:#6ee7b7"],
html[data-theme="light"] [style*="color:#7fe3b4"],
html[data-theme="light"] [style*="color:#4fd1a9"],
html[data-theme="light"] [style*="color:#22c55e"] { color: #146B34 !important; }
html[data-theme="light"] [style*="color:#a5b4fc"],
html[data-theme="light"] [style*="color:#93c5fd"],
html[data-theme="light"] [style*="color:#8fb0f7"],
html[data-theme="light"] [style*="color:#6366f1"] { color: #4338CA !important; }
html[data-theme="light"] [style*="color:#f87171"],
html[data-theme="light"] [style*="color:#ef4444"] { color: #B91C1C !important; }
html[data-theme="light"] [style*="color:#e879f9"] { color: #A21CAF !important; }
html[data-theme="light"] [style*="color:#F5C518"],
html[data-theme="light"] [style*="color:#eab308"],
html[data-theme="light"] [style*="color:#f59e0b"] { color: #9A4A08 !important; }
html[data-theme="light"] [style*="background:#6366f1"] { background: #4338CA !important; }

/* Inline brand orange used as text: switch to the small-text shade */
html[data-theme="light"] [style*="color:var(--orange)"]:not([style*="background"]) {
  color: var(--orange-text) !important;
}
/* …except where dark ink sits ON orange — lift the fill instead */
html[data-theme="light"] [style*="background:var(--orange)"][style*="color:#080F1C"] {
  background: var(--orange-light) !important;
}
html[data-theme="light"] [style*="color:#aaa"],
html[data-theme="light"] [style*="color:#888"] { color: var(--text-faint) !important; }
/* Disabled "Coming Soon" controls: still muted, but readable */
html[data-theme="light"] [style*="color:rgba(165,180,252"] { color: rgba(55, 48, 163, 0.72) !important; }

/* --- Restore white text inside the surfaces that stay dark --- */
html[data-theme="light"] #cta-banner [style*="color:white"],
html[data-theme="light"] #cta-banner [style*="color:#fff"],
html[data-theme="light"] .lcp-dash [style*="color:white"],
html[data-theme="light"] .lcp-dash [style*="color:#fff"],
html[data-theme="light"] .lcp-dash [style*="color:rgba(255,255,255"],
html[data-theme="light"] .psap-dash [style*="color:white"],
html[data-theme="light"] .psap-dash [style*="color:#fff"],
html[data-theme="light"] .psap-dash [style*="color:rgba(255,255,255"],
html[data-theme="light"] .bt-phone [style*="color:white"],
html[data-theme="light"] .bt-phone [style*="color:#fff"],
html[data-theme="light"] .bt-phone [style*="color:rgba(255,255,255"],
html[data-theme="light"] .psa-mockup-header [style*="color:"],
html[data-theme="light"] .plan-badge[style*="color"],
html[data-theme="light"] .avatar[style*="color"] {
  color: #FFFFFF !important;
}
html[data-theme="light"] .lcp-dash [style*="background:rgba(255,255,255"],
html[data-theme="light"] .psap-dash [style*="background:rgba(255,255,255"],
html[data-theme="light"] .bt-phone [style*="background:rgba(255,255,255"] {
  background: rgba(255, 255, 255, 0.06) !important;
}
/* Ghost buttons on the orange band keep their translucent skin */
html[data-theme="light"] #cta-banner [style*="background:rgba(255,255,255"] {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.40) !important;
}
html[data-theme="light"] #cta-banner [style*="background:rgba(255,255,255"]:hover {
  background: rgba(255, 255, 255, 0.26) !important;
  color: #FFFFFF !important;
}