/* =====================================================================
   index-light.css  —  Bespoke LIGHT theme for the index (home) page only.
   Direction B: "พาสเทลสดใส" (fresh multi-hue pastel).

   SAFETY CONTRACT
   - Every selector is gated behind [data-v2-mode-theme="light"], so the DARK
     theme is never affected. Removing/disabling this file restores the exact
     previous look.
   - The site-wide light override is injected at runtime from
     js/site-topbar-v2.js using `... body.has-site-topbar-v2[data-v2-mode-theme="light"] :where(...)`.
     `:where()` carries ZERO specificity, so the rules here (which add real
     classes to the prefix) win on specificity, and use !important where the
     blanket also uses !important.
   - Scope is limited to the index page via body.index-v2-legacy.
   ===================================================================== */

html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] {
    /* ink / text */
    --lt-ink: #133a52;
    --lt-ink-soft: #274b63;
    --lt-muted: #5b6b7a;
    /* accent ramps (rotate across cards) */
    --lt-sky: #0ea5e9;
    --lt-sky-2: #38bdf8;
    --lt-mint: #10b981;
    --lt-mint-2: #34d399;
    --lt-peach: #f97362;
    --lt-peach-2: #fb9da0;
    --lt-lav: #8b7cf0;
    --lt-lav-2: #a78bfa;
    --lt-amber: #f59e0b;
    --lt-amber-2: #fbbf24;
    /* surfaces */
    --lt-card: #ffffff;
    --lt-panel: rgba(255, 255, 255, 0.6);
    --lt-panel-line: rgba(70, 120, 150, 0.14);
    --lt-card-line: rgba(70, 120, 150, 0.16);
    --lt-shadow: 0 16px 40px rgba(60, 110, 140, 0.13);
    --lt-shadow-sm: 0 10px 26px rgba(60, 110, 140, 0.10);
    --lt-shadow-lift: 0 26px 56px rgba(60, 110, 140, 0.18);
}

/* ---------------------------------------------------------------------
   1. PAGE BACKGROUND  (pastel multi-glow)
   --------------------------------------------------------------------- */
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"],
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .background-scene {
    background-color: #f6fbff !important;
    background-image:
        radial-gradient(circle at 9% 12%, rgba(56, 189, 248, 0.22), transparent 34%),
        radial-gradient(circle at 92% 14%, rgba(251, 146, 160, 0.18), transparent 32%),
        radial-gradient(circle at 80% 88%, rgba(110, 231, 183, 0.20), transparent 36%),
        radial-gradient(circle at 16% 92%, rgba(167, 139, 250, 0.16), transparent 34%),
        linear-gradient(140deg, #f6fbff 0%, #fff6f2 48%, #f1fdf7 100%) !important;
}

/* recolor the floating decorative blobs/curves/geo to soft pastels */
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .background-scene .blob,
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .background-scene .curve,
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .background-scene .geo {
    opacity: 0.5 !important;
    filter: saturate(1.1) !important;
    mix-blend-mode: multiply !important;
}
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .background-scene .blob-a { background: radial-gradient(circle, rgba(56, 189, 248, 0.5), transparent 70%) !important; }
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .background-scene .blob-b { background: radial-gradient(circle, rgba(251, 146, 160, 0.45), transparent 70%) !important; }
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .background-scene .blob-c { background: radial-gradient(circle, rgba(110, 231, 183, 0.45), transparent 70%) !important; }

/* geo outlines (ring/square/triangle/line) + curves were using the dark theme's
   faint blue → invisible on the pastel bg. Give them stronger pastel strokes. */
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .background-scene .geo,
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .background-scene .curve {
    opacity: 0.85 !important;
    mix-blend-mode: normal !important;
}
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .background-scene .curve { border-color: rgba(56, 189, 248, 0.32) !important; }
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .background-scene .geo-ring { border-color: rgba(14, 165, 233, 0.45) !important; }
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .background-scene .geo-square { border-color: rgba(167, 139, 250, 0.5) !important; }
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .background-scene .geo-triangle { border-bottom-color: rgba(251, 146, 160, 0.55) !important; }
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .background-scene .geo-line { background: rgba(16, 185, 129, 0.5) !important; }

/* ---------------------------------------------------------------------
   2. SECTION PANELS  (soft frosted white instead of flat fill)
   --------------------------------------------------------------------- */
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .feature-showcase,
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .modes-showcase,
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .steps-showcase,
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .pricing-section.pricing-v2,
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .final-cta-showcase {
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.66), rgba(240, 249, 255, 0.5)) !important;
    border: 1px solid var(--lt-panel-line) !important;
    box-shadow: var(--lt-shadow-sm) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(8px) !important;
}

/* ---------------------------------------------------------------------
   3. EYEBROWS / BADGES / KICKERS  (pastel chips, color-coded)
   --------------------------------------------------------------------- */
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .hero-kicker,
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .feature-showcase-badge,
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .modes-showcase-badge,
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .steps-showcase-badge,
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .pricing-v2-kicker,
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .system-update-kicker {
    color: #0369a1 !important;
    -webkit-text-fill-color: #0369a1 !important;
    background: rgba(56, 189, 248, 0.14) !important;
    border: 1px solid rgba(56, 189, 248, 0.28) !important;
}

/* ---------------------------------------------------------------------
   4. HEADINGS & BODY COPY
   --------------------------------------------------------------------- */
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .feature-showcase-head h2,
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .modes-showcase-head h2,
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .steps-showcase-head h2,
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .pricing-v2-head h2,
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .feature-showcase-card h3,
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .steps-showcase-card h3,
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .modes-showcase-card h3,
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .pricing-card h3 {
    color: var(--lt-ink) !important;
    -webkit-text-fill-color: var(--lt-ink) !important;
}
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .feature-showcase-head p,
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .modes-showcase-head p,
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .pricing-v2-head p,
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .feature-showcase-card p,
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .steps-showcase-card p,
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .modes-showcase-card p,
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .modes-showcase-card ul,
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .pricing-card-desc {
    color: var(--lt-muted) !important;
    -webkit-text-fill-color: var(--lt-muted) !important;
}

/* ---------------------------------------------------------------------
   5. HERO
   --------------------------------------------------------------------- */
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .hero-title,
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .hero-title.hero-title-premium,
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .hero-title .title-line {
    background: linear-gradient(120deg, #0ea5e9 0%, #10b981 52%, #f97362 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
}
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .hero-subtitle,
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .hero-cta-note {
    color: var(--lt-muted) !important;
    -webkit-text-fill-color: var(--lt-muted) !important;
}

/* hero benefit chips */
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .hero-benefit-card {
    background: var(--lt-card) !important;
    border: 1px solid var(--lt-card-line) !important;
    box-shadow: var(--lt-shadow-sm) !important;
}
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .hero-benefit-value {
    color: var(--lt-ink) !important;
    -webkit-text-fill-color: var(--lt-ink) !important;
}

/* primary CTA — keep a vivid gradient (override flat control fill) */
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .hero-cta .btn-primary-free,
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .hero-cta .btn-primary-free.glow-on-hover {
    background: linear-gradient(128deg, #0ea5e9 0%, #22c1a6 60%, #14b8a6 100%) !important;
    border: 1px solid rgba(14, 165, 233, 0.4) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: 0 18px 36px rgba(20, 160, 160, 0.32) !important;
}
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .hero-cta .btn-primary-free:hover {
    box-shadow: 0 22px 44px rgba(20, 160, 160, 0.4) !important;
}
/* secondary CTA — light outline */
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .hero-cta .btn-secondary {
    background: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(14, 165, 233, 0.3) !important;
    color: #0369a1 !important;
    -webkit-text-fill-color: #0369a1 !important;
    box-shadow: var(--lt-shadow-sm) !important;
}

/* ---------------------------------------------------------------------
   6. FEATURE CARDS  (white + colored top accent, rotating hue)
   --------------------------------------------------------------------- */
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .feature-showcase-card,
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .steps-showcase-card {
    position: relative;
    overflow: hidden;
    background: var(--lt-card) !important;
    border: 1px solid var(--lt-card-line) !important;
    box-shadow: var(--lt-shadow) !important;
    transition: transform 0.22s ease, box-shadow 0.22s ease !important;
}
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .feature-showcase-card::after,
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .steps-showcase-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    /* reset the dark theme's corner-blob ::after (opacity:0, 999px radius, blob
       width) so the light accent bar is actually visible at rest AND on hover */
    width: auto;
    border-radius: 0;
    z-index: 1;
    opacity: 1 !important;
    background: linear-gradient(90deg, var(--lt-sky), var(--lt-sky-2));
}
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .feature-showcase-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--lt-shadow-lift) !important;
}
/* rotate accent bar + icon hue across the 6 feature cards */
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .feature-showcase-card:nth-child(6n+1)::after { background: linear-gradient(90deg, var(--lt-sky), var(--lt-sky-2)); }
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .feature-showcase-card:nth-child(6n+2)::after { background: linear-gradient(90deg, var(--lt-mint), var(--lt-mint-2)); }
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .feature-showcase-card:nth-child(6n+3)::after { background: linear-gradient(90deg, var(--lt-peach), var(--lt-peach-2)); }
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .feature-showcase-card:nth-child(6n+4)::after { background: linear-gradient(90deg, var(--lt-lav), var(--lt-lav-2)); }
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .feature-showcase-card:nth-child(6n+5)::after { background: linear-gradient(90deg, var(--lt-amber), var(--lt-amber-2)); }
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .feature-showcase-card:nth-child(6n+6)::after { background: linear-gradient(90deg, var(--lt-sky), var(--lt-lav)); }

html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .feature-showcase-card:nth-child(6n+1) .feature-showcase-icon { background: linear-gradient(135deg, var(--lt-sky), var(--lt-sky-2)) !important; }
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .feature-showcase-card:nth-child(6n+2) .feature-showcase-icon { background: linear-gradient(135deg, var(--lt-mint), var(--lt-mint-2)) !important; }
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .feature-showcase-card:nth-child(6n+3) .feature-showcase-icon { background: linear-gradient(135deg, var(--lt-peach), var(--lt-peach-2)) !important; }
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .feature-showcase-card:nth-child(6n+4) .feature-showcase-icon { background: linear-gradient(135deg, var(--lt-lav), var(--lt-lav-2)) !important; }
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .feature-showcase-card:nth-child(6n+5) .feature-showcase-icon { background: linear-gradient(135deg, var(--lt-amber), var(--lt-amber-2)) !important; }
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .feature-showcase-card:nth-child(6n+6) .feature-showcase-icon { background: linear-gradient(135deg, var(--lt-sky), var(--lt-lav)) !important; }

/* feature icon line-art stroke stays white on the colored chip */
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .feature-showcase-icon--line {
    color: #ffffff !important;
}

/* ---------------------------------------------------------------------
   7. STEPS  (numbered gradient badges)
   --------------------------------------------------------------------- */
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .steps-showcase-number {
    background: linear-gradient(135deg, var(--lt-sky), var(--lt-mint)) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: 0 10px 22px rgba(20, 160, 180, 0.28) !important;
}
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .steps-showcase-card:nth-child(2) .steps-showcase-number { background: linear-gradient(135deg, var(--lt-peach), var(--lt-amber)) !important; }
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .steps-showcase-card:nth-child(3) .steps-showcase-number { background: linear-gradient(135deg, var(--lt-lav), var(--lt-sky)) !important; }
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .steps-showcase-card:nth-child(2)::after { background: linear-gradient(90deg, var(--lt-peach), var(--lt-amber)); }
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .steps-showcase-card:nth-child(3)::after { background: linear-gradient(90deg, var(--lt-lav), var(--lt-sky)); }

/* ---------------------------------------------------------------------
   8. MODES CARDS  (rendered by JS) — white card, glow, colored tag
   --------------------------------------------------------------------- */
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .modes-showcase-card,
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .index-mode-card {
    background: var(--lt-card) !important;
    border: 1px solid var(--lt-card-line) !important;
    box-shadow: var(--lt-shadow) !important;
}
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .modes-showcase-card.is-open,
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .index-mode-card.is-open {
    border-color: rgba(16, 185, 129, 0.4) !important;
    background: linear-gradient(160deg, #ffffff, #f0fdf8) !important;
}
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .index-mode-card::before {
    background: radial-gradient(circle at 16% 0%, rgba(56, 189, 248, 0.12), transparent 46%) !important;
}
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .modes-showcase-icon {
    background: linear-gradient(135deg, var(--lt-sky), var(--lt-mint)) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .modes-showcase-tag,
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .index-mode-kicker {
    color: #0369a1 !important;
    -webkit-text-fill-color: #0369a1 !important;
    background: rgba(56, 189, 248, 0.13) !important;
    border: 1px solid rgba(56, 189, 248, 0.24) !important;
}

/* ---------------------------------------------------------------------
   9. PRICING
   --------------------------------------------------------------------- */
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .pricing-card {
    background: var(--lt-card) !important;
    border: 1px solid var(--lt-card-line) !important;
    box-shadow: var(--lt-shadow) !important;
}
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .pricing-card--free {
    border: 1px solid rgba(14, 165, 233, 0.4) !important;
}
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .pricing-card--pro {
    border: 2px solid rgba(139, 92, 246, 0.6) !important;
    box-shadow: 0 26px 56px rgba(124, 92, 246, 0.22) !important;
}
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .pricing-card--yearly {
    border: 1px solid rgba(245, 158, 11, 0.5) !important;
}
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .pricing-feature-list li,
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .pricing-limit-list li,
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .pricing-limit-title,
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .pricing-card-price-old,
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .pricing-price-period,
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .pricing-card-price-note,
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .pricing-footnote {
    color: var(--lt-muted) !important;
    -webkit-text-fill-color: var(--lt-muted) !important;
}
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .pricing-card-price,
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .pricing-price-major {
    color: var(--lt-ink) !important;
    -webkit-text-fill-color: var(--lt-ink) !important;
}
/* tier-colored pricing badges — Free=blue, Pro=violet, Premium(yearly)=amber/gold */
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .pricing-card--free .pricing-card-badge {
    background: linear-gradient(135deg, #0ea5e9, #38bdf8) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 0 !important;
}
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .pricing-card-badge--pro {
    background: linear-gradient(135deg, #8b5cf6, #a78bfa) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 0 !important;
}
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .pricing-card-badge--yearly {
    background: linear-gradient(135deg, #f59e0b, #fbbf24) !important;
    color: #5c3a00 !important;
    -webkit-text-fill-color: #5c3a00 !important;
    border: 0 !important;
}
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .pricing-discount-corner {
    background: linear-gradient(135deg, var(--lt-peach), var(--lt-amber)) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
/* plan buttons — tier colored */
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .plan-select-btn--monthly,
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .plan-select-btn--yearly,
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .plan-select-btn--final,
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .final-cta-showcase .final-cta-actions .plan-select-btn {
    background: linear-gradient(135deg, var(--lt-sky), var(--lt-mint)) !important;
    border: 0 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: 0 16px 32px rgba(20, 160, 160, 0.3) !important;
}
/* Pro button = violet */
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .plan-select-btn--monthly {
    background: linear-gradient(135deg, #8b5cf6, #a78bfa) !important;
    box-shadow: 0 16px 32px rgba(124, 92, 246, 0.32) !important;
}
/* Premium (yearly) button = amber/gold */
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .plan-select-btn--yearly {
    background: linear-gradient(135deg, #f59e0b, #fbbf24) !important;
    color: #5c3a00 !important;
    -webkit-text-fill-color: #5c3a00 !important;
    box-shadow: 0 16px 32px rgba(245, 158, 11, 0.32) !important;
}
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .plan-select-btn--free {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(14, 165, 233, 0.3) !important;
    color: #0369a1 !important;
    -webkit-text-fill-color: #0369a1 !important;
}
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .pricing-pro-note {
    color: var(--lt-muted) !important;
    -webkit-text-fill-color: var(--lt-muted) !important;
}

/* ---------------------------------------------------------------------
   10. FINAL CTA  + SYSTEM UPDATE
   --------------------------------------------------------------------- */
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .pricing-bottom-cta {
    background: linear-gradient(160deg, #ffffff, #eef9ff) !important;
    border: 1px solid var(--lt-card-line) !important;
    box-shadow: var(--lt-shadow) !important;
}
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .pricing-bottom-cta h3 {
    color: var(--lt-ink) !important;
    -webkit-text-fill-color: var(--lt-ink) !important;
}
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .pricing-bottom-cta p {
    color: var(--lt-muted) !important;
    -webkit-text-fill-color: var(--lt-muted) !important;
}
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .system-update-card {
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.92), rgba(240, 249, 255, 0.85)) !important;
    border: 1px solid var(--lt-card-line) !important;
    box-shadow: var(--lt-shadow-sm) !important;
}
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .system-update-card h2,
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .system-update-meta strong {
    color: var(--lt-ink) !important;
    -webkit-text-fill-color: var(--lt-ink) !important;
}
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .system-update-card p,
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .system-update-meta small {
    color: var(--lt-muted) !important;
    -webkit-text-fill-color: var(--lt-muted) !important;
}
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .system-update-status {
    color: #0369a1 !important;
    -webkit-text-fill-color: #0369a1 !important;
    background: rgba(56, 189, 248, 0.14) !important;
    border: 1px solid rgba(56, 189, 248, 0.28) !important;
}

/* ---------------------------------------------------------------------
   11. FOOTER
   --------------------------------------------------------------------- */
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .landing-footer {
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.78), rgba(238, 248, 255, 0.66)) !important;
    border-top: 1px solid var(--lt-panel-line) !important;
}
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .landing-footer-accent {
    background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.5), rgba(167, 139, 250, 0.4), transparent) !important;
}
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .landing-footer-links h3,
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .landing-footer-brand-copy strong {
    color: var(--lt-ink) !important;
    -webkit-text-fill-color: var(--lt-ink) !important;
}
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .landing-footer-brand-text,
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .landing-footer-links a {
    color: var(--lt-muted) !important;
    -webkit-text-fill-color: var(--lt-muted) !important;
}
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .landing-footer-links a:hover {
    color: #0369a1 !important;
    -webkit-text-fill-color: #0369a1 !important;
}
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .landing-footer-social-link {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid var(--lt-card-line) !important;
    color: #0369a1 !important;
}
html[data-index-v2-theme] body.index-v2-legacy.has-site-topbar-v2[data-v2-mode-theme="light"] .landing-footer-social-link:hover {
    border-color: rgba(56, 189, 248, 0.45) !important;
    background: rgba(56, 189, 248, 0.12) !important;
}