/* ==========================================================================
   TunerSuite ts2 — LIGHT MODE COMPLETE OVERLAY
   Loads after ts2-mobile-fixes.min.css. Activates when body.light-mode.
   Covers every .ts2 component: backgrounds, text, borders, shadows, gradients.
   Built: 2026-05-15
   ========================================================================== */

/* ====== 1. TOKEN REDEFINITIONS for .ts2 in light mode ====== */
body.light-mode .ts2{--accent-ink:var(--tdb-accent);
  /* Backgrounds */
  --bg:#ffffff;
  --bg-2:var(--tdb-band);
  --surface:#ffffff;
  --surface-2:var(--tdb-raised);

  /* Borders darker on light */
  --border:color-mix(in srgb, var(--tdb-line) 8%, transparent);
  --border-2:color-mix(in srgb, var(--tdb-line) 16%, transparent);
  --hairline:color-mix(in srgb, var(--tdb-line) 12%, transparent);
  --hairline-strong:color-mix(in srgb, var(--tdb-line) 22%, transparent);

  /* Text — slate scale */
  --text:var(--tdb-on-light);
  --text-2:var(--tdb-body);
  --text-3:var(--tdb-muted);

  /* Accent darker for contrast on white */
  --accent:var(--tdb-accent);
  --accent-2:var(--tdb-support);
  --accent-glow:color-mix(in srgb, var(--tdb-accent) 18%, transparent);

  /* Secondary accents (darker variants) */
  --blue:var(--tdb-accent);
  --violet:var(--tdb-accent);
  --amber:#d97706;
  --rose:#e11d48;
  --cyan:var(--tdb-support);

  /* Shadows lighter on white */
  --shadow:0 6px 20px -8px rgba(15,23,42,.08),0 1px 0 rgba(15,23,42,.03) inset;
  --shadow-glow:0 14px 32px -14px var(--accent-glow);

  background:var(--bg);
  color:var(--text);
}

/* ====== 2. HEADINGS — override hardcoded #f1f5f9/#fff to slate-900 ====== */
body.light-mode .ts2 h1,body.light-mode .ts2 h2,body.light-mode .ts2 h3,body.light-mode .ts2 h4,
body.light-mode .ts2-h1,body.light-mode .ts2-h2,
body.light-mode .ts2-page-header h1,body.light-mode .ts2-hero-compact h1,body.light-mode .ts2-hero-split-left h1,
body.light-mode .ts2-section-head h2,
body.light-mode .ts2-feature-card h3,body.light-mode .ts2-service-card h3,body.light-mode .ts2-mp-card-title,
body.light-mode .ts2-plan-name,body.light-mode .ts2-plan-mini h3,
body.light-mode .ts2-step h3,
body.light-mode .ts2-dyno-name,body.light-mode .ts2-dyno-gain-val,
body.light-mode .ts2-stat-num,body.light-mode .ts2-stat-strip-alt .ts2-stat-num,
body.light-mode .ts2-faq summary,body.light-mode .ts2-faq-grid summary,
body.light-mode .ts2-testimonial-quote,body.light-mode .ts2-testimonial-name,
body.light-mode .ts2-cta-banner h2,body.light-mode .ts2-final-h,
body.light-mode .ts2-xsell-h,
body.light-mode .ts2-price-num,body.light-mode .ts2-plan-mini-num,
body.light-mode .ts2-host-faq .ts2-faq-cat-name,
body.light-mode .ts2-tco-price{
  color:var(--tdb-on-light) !important
}

/* Inline style overrides via attribute selectors */
body.light-mode .ts2 [style*="color:var(--tdb-text)"],
body.light-mode .ts2 [style*="color: var(--tdb-text)"],
body.light-mode .ts2 [style*="color:#fff"],
body.light-mode .ts2 [style*="color: #fff"],
body.light-mode .ts2 [style*="color:#ffffff"],
body.light-mode .ts2 [style*="color: #ffffff"],
body.light-mode .ts2 [style*="color:white"],
body.light-mode .ts2 [style*="color: white"]{color:var(--tdb-on-light) !important}

/* ====== 3. EYEBROW + MICRO-EYEBROW ====== */
body.light-mode .ts2-eyebrow,body.light-mode .ts2-mini-eyebrow{color:var(--tdb-muted) !important}
body.light-mode .ts2-eyebrow::before{color:var(--tdb-accent) !important}

/* H1 gradient text (darker for light) */
body.light-mode .ts2-h1-grad{background:linear-gradient(120deg,var(--tdb-accent),var(--tdb-accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
body.light-mode .ts2 em{color:var(--tdb-accent) !important}

/* ====== 4. CARDS — white with subtle shadow + emerald hover ====== */
body.light-mode .ts2-feature-card,
body.light-mode .ts2-service-card,
body.light-mode .ts2-mp-card,
body.light-mode .ts2-plan,
body.light-mode .ts2-plan-mini,
body.light-mode .ts2-testimonial,
body.light-mode .ts2-dyno-card,
body.light-mode .ts2-step,
body.light-mode .ts2-tco-card{
  background:#ffffff !important;
  border-color:color-mix(in srgb, var(--tdb-line) 8%, transparent) !important;
  box-shadow:0 4px 12px -4px rgba(15,23,42,.06),0 1px 2px rgba(15,23,42,.04) !important
}
body.light-mode .ts2-feature-card:hover,
body.light-mode .ts2-service-card:hover{
  background:#f8fafc !important;
  border-color:color-mix(in srgb, var(--tdb-line) 18%, transparent) !important;
  box-shadow:0 12px 28px -8px rgba(15,23,42,.12) !important
}

/* Card body text */
body.light-mode .ts2-feature-card p,
body.light-mode .ts2-service-card p,
body.light-mode .ts2-mp-card-desc,
body.light-mode .ts2-step p,
body.light-mode .ts2-plan-mini-list,
body.light-mode .ts2-features li{color:#475569 !important}

/* Card icon backgrounds (colored tint stays similar — bgs work on white too) */
body.light-mode .ts2-feature-card-icon{background:color-mix(in srgb, var(--tdb-accent) 10%, transparent) !important;color:var(--tdb-accent) !important;border-color:color-mix(in srgb, var(--tdb-accent) 20%, transparent) !important;box-shadow:0 2px 8px -2px rgba(37, 99, 235,.25) !important}
body.light-mode .ts2-feature-card-icon.ts2-icon-blue{background:color-mix(in srgb, var(--tdb-accent) 10%, transparent) !important;color:var(--tdb-accent) !important;border-color:color-mix(in srgb, var(--tdb-accent) 20%, transparent) !important;box-shadow:0 2px 8px -2px rgba(37,99,235,.25) !important}
body.light-mode .ts2-feature-card-icon.ts2-icon-violet{background:rgba(124,58,237,.1) !important;color:var(--tdb-accent) !important;border-color:rgba(124,58,237,.2) !important;box-shadow:0 2px 8px -2px rgba(124,58,237,.25) !important}
body.light-mode .ts2-feature-card-icon.ts2-icon-amber{background:rgba(217,119,6,.12) !important;color:#d97706 !important;border-color:rgba(217,119,6,.22) !important;box-shadow:0 2px 8px -2px rgba(217,119,6,.28) !important}
body.light-mode .ts2-feature-card-icon.ts2-icon-cyan{background:color-mix(in srgb, var(--tdb-support) 10%, transparent) !important;color:var(--tdb-support) !important;border-color:color-mix(in srgb, var(--tdb-support) 20%, transparent) !important;box-shadow:0 2px 8px -2px rgba(8,145,178,.25) !important}
body.light-mode .ts2-feature-card-icon.ts2-icon-rose{background:rgba(225,29,72,.1) !important;color:#e11d48 !important;border-color:rgba(225,29,72,.2) !important;box-shadow:0 2px 8px -2px rgba(225,29,72,.25) !important}

/* Feature card link */
body.light-mode .ts2-feature-card-link{color:var(--tdb-accent) !important}
body.light-mode .ts2-feature-card-link:hover{color:var(--tdb-support) !important}

/* ====== 5. FEATURED PLAN ====== */
body.light-mode .ts2-plan-featured{
  background:linear-gradient(160deg,#ffffff 0%,#ecfdf5 100%) !important;
  border-color:color-mix(in srgb, var(--tdb-accent) 40%, transparent) !important;
  box-shadow:0 16px 40px -16px rgba(37, 99, 235,.25),0 1px 0 rgba(37, 99, 235,.08) inset !important
}
body.light-mode .ts2-plan-badge{background:color-mix(in srgb, var(--tdb-accent) 12%, transparent) !important;border-color:color-mix(in srgb, var(--tdb-accent) 30%, transparent) !important;color:var(--tdb-support) !important}

/* Plan price text */
body.light-mode .ts2-plan-tag,body.light-mode .ts2-plan-mini-per,body.light-mode .ts2-price-per,body.light-mode .ts2-price-from{color:var(--tdb-muted) !important}
body.light-mode .ts2-price-old{color:var(--tdb-body) !important}

/* Plan icon backgrounds (same color tints) */
body.light-mode .ts2-plan-icon{background:color-mix(in srgb, var(--tdb-accent) 10%, transparent) !important;color:var(--tdb-accent) !important;border-color:color-mix(in srgb, var(--tdb-accent) 20%, transparent) !important}
body.light-mode .ts2-plan-icon.ts2-icon-blue{background:color-mix(in srgb, var(--tdb-accent) 10%, transparent) !important;color:var(--tdb-accent) !important}
body.light-mode .ts2-plan-icon.ts2-icon-emerald{background:color-mix(in srgb, var(--tdb-accent) 12%, transparent) !important;color:var(--tdb-accent) !important;border-color:color-mix(in srgb, var(--tdb-accent) 25%, transparent) !important}
body.light-mode .ts2-plan-icon.ts2-icon-violet{background:rgba(124,58,237,.1) !important;color:var(--tdb-accent) !important}

/* ====== 6. BUTTONS ====== */
body.light-mode .ts2-btn-primary{background:linear-gradient(180deg,var(--tdb-support),var(--tdb-accent)) !important;color:var(--tdb-accent-ink) !important;border-color:transparent !important;box-shadow:0 8px 20px -8px rgba(37, 99, 235,.4) !important}
body.light-mode .ts2-btn-primary:hover{background:linear-gradient(180deg,var(--tdb-accent),var(--tdb-support)) !important;box-shadow:0 10px 24px -8px rgba(37, 99, 235,.5) !important}
body.light-mode .ts2-btn-emerald{background:linear-gradient(180deg,var(--tdb-support),var(--tdb-accent)) !important;color:var(--tdb-accent-ink) !important}
body.light-mode .ts2-btn-cyan{background:linear-gradient(180deg,var(--tdb-support),var(--tdb-support)) !important;color:var(--tdb-accent-ink) !important;border:none !important}

body.light-mode .ts2-btn-ghost{background:#ffffff !important;color:var(--tdb-on-light) !important;border:1px solid color-mix(in srgb, var(--tdb-line) 12%, transparent) !important}
body.light-mode .ts2-btn-ghost:hover{background:#f8fafc !important;border-color:color-mix(in srgb, var(--tdb-line) 22%, transparent) !important;color:var(--tdb-on-light) !important}

body.light-mode .ts2-btn-outline{background:transparent !important;color:var(--tdb-accent) !important;border:1px solid color-mix(in srgb, var(--tdb-accent) 50%, transparent) !important}
body.light-mode .ts2-btn-outline:hover{background:color-mix(in srgb, var(--tdb-accent) 6%, transparent) !important;border-color:var(--tdb-accent) !important}

/* ====== 7. ANNOUNCE BAR + PROMO PILLS ====== */
body.light-mode .ts2-announce{background:linear-gradient(90deg,color-mix(in srgb, var(--tdb-accent) 8%, transparent),color-mix(in srgb, var(--tdb-accent) 4%, transparent)) !important;color:#475569 !important}
body.light-mode .ts2-announce strong,body.light-mode .ts2-announce-text strong{color:var(--tdb-on-light) !important}
body.light-mode .ts2-announce-cta{background:#ffffff !important;color:var(--tdb-support) !important;border:1px solid color-mix(in srgb, var(--tdb-accent) 32%, transparent) !important}

/* Meta row pills */
body.light-mode .ts2-meta-item{background:#ffffff !important;border-color:color-mix(in srgb, var(--tdb-line) 8%, transparent) !important;color:#475569 !important}
body.light-mode .ts2-meta-item strong{color:var(--tdb-on-light) !important}

/* Trust strip stats */
body.light-mode .ts2-stats .ts2-stat,
body.light-mode .ts2-stat-strip-alt .ts2-stat{background:#ffffff !important;border-color:color-mix(in srgb, var(--tdb-line) 8%, transparent) !important;box-shadow:0 2px 6px -2px rgba(15,23,42,.04) !important}
body.light-mode .ts2-stat-lbl{color:var(--tdb-muted) !important}
body.light-mode .ts2-trust-label{color:var(--tdb-muted) !important}

/* ====== 8. COMPARE TABLE ====== */
body.light-mode .ts2-compare-table{background:#ffffff !important;border-color:color-mix(in srgb, var(--tdb-line) 8%, transparent) !important}
body.light-mode .ts2-compare-table thead th{background:#f1f5f9 !important;color:#475569 !important;border-color:color-mix(in srgb, var(--tdb-line) 8%, transparent) !important}
body.light-mode .ts2-compare-table tbody td{color:#475569 !important;border-color:color-mix(in srgb, var(--tdb-line) 6%, transparent) !important}
body.light-mode .ts2-compare-table tbody td:first-child{color:var(--tdb-on-light) !important;font-weight:600}
body.light-mode .ts2-compare-table-us{background:color-mix(in srgb, var(--tdb-accent) 4%, transparent) !important}
body.light-mode .ts2-compare-table-us td:first-child{color:var(--tdb-support) !important}
body.light-mode .ts2-compare-check{color:var(--tdb-accent) !important}
body.light-mode .ts2-compare-x{color:var(--tdb-body) !important}

/* ====== 9. FAQ ACCORDION ====== */
body.light-mode .ts2-faq details,body.light-mode .ts2-faq-grid details{background:#ffffff !important;border-color:color-mix(in srgb, var(--tdb-line) 8%, transparent) !important}
body.light-mode .ts2-faq details[open],body.light-mode .ts2-faq-grid details[open]{background:#f8fafc !important;border-color:color-mix(in srgb, var(--tdb-accent) 35%, transparent) !important}
body.light-mode .ts2-faq summary,body.light-mode .ts2-faq-grid summary{color:var(--tdb-on-light) !important}
body.light-mode .ts2-faq-grid summary::after{color:var(--tdb-muted) !important}
body.light-mode .ts2-faq-grid details[open] summary,body.light-mode .ts2-faq-grid details[open] summary::after{color:var(--tdb-accent) !important}
body.light-mode .ts2-faq details p,body.light-mode .ts2-faq details ul,body.light-mode .ts2-faq details ol,
body.light-mode .ts2-faq-grid details p,body.light-mode .ts2-faq-grid details ul,body.light-mode .ts2-faq-grid details ol{color:#475569 !important}

/* FAQ sidebar (FAQ knowledge base page) */
body.light-mode .ts2-host-faq .ts2-faq-sidebar{border-color:color-mix(in srgb, var(--tdb-line) 8%, transparent) !important}
body.light-mode .ts2-host-faq .ts2-faq-sidebar a{color:#475569 !important;border-left-color:transparent !important}
body.light-mode .ts2-host-faq .ts2-faq-sidebar a:hover{color:var(--tdb-on-light) !important}
body.light-mode .ts2-host-faq .ts2-faq-sidebar a.is-active{color:var(--tdb-accent) !important;border-left-color:var(--tdb-accent) !important}
body.light-mode .ts2-host-faq .ts2-faq-sidebar-h{color:var(--tdb-muted) !important}
body.light-mode .ts2-host-faq .ts2-faq-cat-header{border-bottom-color:color-mix(in srgb, var(--tdb-line) 8%, transparent) !important}
body.light-mode .ts2-host-faq .ts2-faq-cat-icon{background:color-mix(in srgb, var(--tdb-accent) 10%, transparent) !important;color:var(--tdb-accent) !important;border-color:color-mix(in srgb, var(--tdb-accent) 20%, transparent) !important}
body.light-mode .ts2-host-faq .ts2-faq-cat-count{background:#f8fafc !important;border-color:color-mix(in srgb, var(--tdb-line) 8%, transparent) !important;color:var(--tdb-muted) !important}

/* FAQ search input */
body.light-mode .ts2-host-faq .ts2-faq-search input{background:#ffffff !important;border-color:color-mix(in srgb, var(--tdb-line) 12%, transparent) !important;color:var(--tdb-on-light) !important}
body.light-mode .ts2-host-faq .ts2-faq-search input:focus{border-color:var(--tdb-accent) !important;background:#ffffff !important;box-shadow:0 0 0 3px rgba(37, 99, 235,.12) !important}
body.light-mode .ts2-host-faq .ts2-faq-search svg{color:var(--tdb-body) !important}

/* ====== 10. FORMS (Contact, Services request) ====== */
body.light-mode .ts2 input[type="text"],
body.light-mode .ts2 input[type="email"],
body.light-mode .ts2 input[type="tel"],
body.light-mode .ts2 input[type="search"],
body.light-mode .ts2 select,
body.light-mode .ts2 textarea{background:#ffffff !important;border-color:color-mix(in srgb, var(--tdb-line) 12%, transparent) !important;color:var(--tdb-on-light) !important}
body.light-mode .ts2 input:focus,body.light-mode .ts2 select:focus,body.light-mode .ts2 textarea:focus{border-color:var(--tdb-accent) !important;background:#ffffff !important;box-shadow:0 0 0 3px rgba(37, 99, 235,.1)}
body.light-mode .ts2 input::placeholder,body.light-mode .ts2 textarea::placeholder{color:var(--tdb-body) !important}
body.light-mode .ts2-form label{color:var(--tdb-muted) !important}
body.light-mode .ts2-host-services .ts2-file-upload{background:#ffffff !important;border-color:color-mix(in srgb, var(--tdb-line) 18%, transparent) !important;color:#475569 !important}
body.light-mode .ts2-host-services .ts2-file-upload:hover{background:#f8fafc !important;border-color:var(--tdb-accent) !important;color:var(--tdb-on-light) !important}

/* ====== 11. GLOW ORBS — much subtler on light ====== */
body.light-mode .ts2-glow{opacity:.4 !important;mix-blend-mode:multiply}
body.light-mode .ts2-glow-a{background:radial-gradient(circle,color-mix(in srgb, var(--tdb-accent) 18%, transparent),transparent 60%) !important}
body.light-mode .ts2-glow-b{background:radial-gradient(circle,color-mix(in srgb, var(--tdb-accent) 12%, transparent),transparent 60%) !important}
body.light-mode .ts2-hero{background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%)}
body.light-mode .ts2-page-header{border-bottom-color:color-mix(in srgb, var(--tdb-line) 8%, transparent) !important;background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%)}
body.light-mode .ts2-hero-compact{border-bottom-color:color-mix(in srgb, var(--tdb-line) 8%, transparent) !important;background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%)}

/* ====== 12. SECTION ALT BG ====== */
body.light-mode .ts2-section-alt{background:#f8fafc !important}

/* ====== 13. CTA BANNER ====== */
body.light-mode .ts2-cta-banner{background:linear-gradient(135deg,color-mix(in srgb, var(--tdb-accent) 5%, transparent),color-mix(in srgb, var(--tdb-accent) 4%, transparent),rgba(124,58,237,.04)) !important;border-color:color-mix(in srgb, var(--tdb-line) 8%, transparent) !important}
body.light-mode .ts2-cta-banner::before{background:radial-gradient(circle,color-mix(in srgb, var(--tdb-accent) 12%, transparent),transparent 60%) !important}
body.light-mode .ts2-cta-banner p{color:#475569 !important}

/* ====== 14. LOGO STRIP ====== */
body.light-mode .ts2-logo-strip-text{background:#ffffff !important;border-color:color-mix(in srgb, var(--tdb-line) 8%, transparent) !important;color:#475569 !important;box-shadow:0 1px 2px rgba(15,23,42,.04)}

/* ====== 15. STEP FLOW ====== */
body.light-mode .ts2-step-num{background:color-mix(in srgb, var(--tdb-accent) 10%, transparent) !important;border-color:color-mix(in srgb, var(--tdb-accent) 25%, transparent) !important;color:var(--tdb-accent) !important}
body.light-mode .ts2-step::after{border-top-color:color-mix(in srgb, var(--tdb-line) 16%, transparent) !important}

/* ====== 16. TCO CALCULATOR ====== */
body.light-mode .ts2-tco{background:#f8fafc !important;border-color:color-mix(in srgb, var(--tdb-line) 8%, transparent) !important}
body.light-mode .ts2-tco-card{background:#ffffff !important;border-color:color-mix(in srgb, var(--tdb-line) 8%, transparent) !important}
body.light-mode .ts2-tco-us{background:linear-gradient(135deg,color-mix(in srgb, var(--tdb-accent) 10%, transparent),color-mix(in srgb, var(--tdb-accent) 4%, transparent)) !important;border-color:color-mix(in srgb, var(--tdb-accent) 32%, transparent) !important}
body.light-mode .ts2-tco-label{color:var(--tdb-muted) !important}
body.light-mode .ts2-tco-savings{color:var(--tdb-support) !important}
body.light-mode .ts2-tco-foot{color:#475569 !important;border-top-color:color-mix(in srgb, var(--tdb-line) 8%, transparent) !important}

/* Sliders on light */
body.light-mode .ts2-slider label{color:var(--tdb-on-light) !important}
body.light-mode .ts2-slider input[type="range"]{accent-color:#1d4ed8}
body.light-mode .ts2-slider-marks{color:var(--tdb-muted) !important}

/* ====== 17. MARKETPLACE ====== */
body.light-mode .ts2-host-mp .ts2-mp-card-logo{background:linear-gradient(135deg,color-mix(in srgb, var(--tdb-accent) 10%, transparent),color-mix(in srgb, var(--tdb-accent) 6%, transparent)) !important;border-color:color-mix(in srgb, var(--tdb-accent) 20%, transparent) !important;color:var(--tdb-support) !important}
body.light-mode .ts2-host-mp .ts2-mp-card-vendor{color:var(--tdb-muted) !important}
body.light-mode .ts2-host-mp .ts2-mp-card-desc{color:#475569 !important}
body.light-mode .ts2-host-mp .ts2-mp-card-req{background:#f8fafc !important;border-color:color-mix(in srgb, var(--tdb-line) 8%, transparent) !important;color:var(--tdb-muted) !important}
body.light-mode .ts2-host-mp .ts2-mp-state--free{background:color-mix(in srgb, var(--tdb-accent) 10%, transparent) !important;border-color:color-mix(in srgb, var(--tdb-accent) 25%, transparent) !important;color:var(--tdb-support) !important}
body.light-mode .ts2-host-mp .ts2-mp-state--soon{background:rgba(217,119,6,.12) !important;border-color:rgba(217,119,6,.28) !important;color:#92400e !important}
body.light-mode .ts2-host-mp .ts2-mp-price--free{color:var(--tdb-accent) !important}
body.light-mode .ts2-host-mp .ts2-mp-price-per,body.light-mode .ts2-host-mp .ts2-mp-price-sub{color:var(--tdb-muted) !important}
body.light-mode .ts2-host-mp .ts2-mp-trial{color:var(--tdb-muted) !important}

/* ====== 18. X-SELL ROW ====== */
body.light-mode .ts2-xsell{background:linear-gradient(180deg,#ffffff,#f8fafc) !important;border-top:1px solid color-mix(in srgb, var(--tdb-line) 6%, transparent)}
body.light-mode .ts2-xsell-sub{color:#475569 !important}
body.light-mode .ts2-xsell-tier{color:var(--tdb-muted) !important}
body.light-mode .ts2-eyebrow-cyan{color:var(--tdb-support) !important}

/* ====== 19. SERVICES PAGE ====== */
body.light-mode .ts2-host-services .ts2-service-mini{background:#ffffff !important;border-color:color-mix(in srgb, var(--tdb-line) 8%, transparent) !important}
body.light-mode .ts2-host-services .ts2-service-mini:hover{background:#f8fafc !important;border-color:color-mix(in srgb, var(--tdb-line) 18%, transparent) !important}
body.light-mode .ts2-host-services .ts2-service-mini.is-selected{background:color-mix(in srgb, var(--tdb-accent) 5%, transparent) !important;border-color:var(--tdb-accent) !important;box-shadow:0 0 0 2px rgba(37, 99, 235,.18) !important}
body.light-mode .ts2-host-services .ts2-service-mini-icon{background:color-mix(in srgb, var(--tdb-accent) 10%, transparent) !important;color:var(--tdb-accent) !important}
body.light-mode .ts2-host-services .ts2-service-mini-desc{color:var(--tdb-muted) !important}
body.light-mode .ts2-host-services .ts2-service-mini-price{color:var(--tdb-accent) !important}
body.light-mode .ts2-host-services .ts2-selected-tag{background:color-mix(in srgb, var(--tdb-accent) 10%, transparent) !important;border-color:color-mix(in srgb, var(--tdb-accent) 30%, transparent) !important;color:var(--tdb-support) !important}

/* Category pills */
body.light-mode .ts2-cat-pill{background:#ffffff !important;border-color:color-mix(in srgb, var(--tdb-line) 12%, transparent) !important;color:#475569 !important}
body.light-mode .ts2-cat-pill:hover{border-color:color-mix(in srgb, var(--tdb-line) 22%, transparent) !important;color:var(--tdb-on-light) !important}
body.light-mode .ts2-cat-pill.is-active{background:color-mix(in srgb, var(--tdb-accent) 10%, transparent) !important;border-color:var(--tdb-accent) !important;color:#00658a !important}/* --tdb-support is #007196, which is 4.41:1 on the tinted chip - under 4.5. Darkened for INK on this chip only; the token keeps its value everywhere the colour is a surface rather than text. */

/* ====== 20. TABS ====== */
body.light-mode .ts2-tab{background:#ffffff !important;border:1px solid color-mix(in srgb, var(--tdb-line) 12%, transparent) !important;color:#475569 !important}
body.light-mode .ts2-tab-active{background:color-mix(in srgb, var(--tdb-accent) 10%, transparent) !important;border-color:var(--tdb-accent) !important;color:var(--tdb-support) !important}

/* ====== 21. BREADCRUMB ====== */
body.light-mode .ts2-breadcrumb{color:var(--tdb-body) !important}
body.light-mode .ts2-breadcrumb a{color:#475569 !important}
body.light-mode .ts2-breadcrumb a:hover{color:var(--tdb-accent) !important}
body.light-mode .ts2-breadcrumb-current{color:var(--tdb-on-light) !important}
body.light-mode .ts2-breadcrumb-sep{color:var(--tdb-body) !important}

/* ====== 22. SERVICE-LANDING content ====== */
body.light-mode .ts2-host-service-landing .ts2-content h2,
body.light-mode .ts2-host-service-landing .ts2-content h3{color:var(--tdb-on-light) !important}
body.light-mode .ts2-host-service-landing .ts2-content{color:#475569}
body.light-mode .ts2-host-service-landing .ts2-content strong{color:var(--tdb-on-light) !important}
body.light-mode .ts2-host-service-landing .ts2-content a{color:var(--tdb-accent) !important;border-bottom-color:color-mix(in srgb, var(--tdb-accent) 30%, transparent) !important}
body.light-mode .ts2-host-service-landing .ts2-content a:hover{border-bottom-color:var(--tdb-accent) !important}

/* ====== 23. TESTIMONIAL ====== */
body.light-mode .ts2-testimonial{background:#ffffff !important;border-color:color-mix(in srgb, var(--tdb-line) 8%, transparent) !important}
body.light-mode .ts2-testimonial-quote::before{color:var(--tdb-accent) !important}
body.light-mode .ts2-testimonial-avatar{background:linear-gradient(135deg,var(--tdb-support),var(--tdb-accent)) !important;color:var(--tdb-accent-ink) !important}
body.light-mode .ts2-testimonial-role{color:var(--tdb-muted) !important}

/* ====== 24. DYNO CARDS ====== */
body.light-mode .ts2-dyno-platform{color:var(--tdb-muted) !important}
body.light-mode .ts2-dyno-stage{background:color-mix(in srgb, var(--tdb-accent) 10%, transparent) !important;border-color:color-mix(in srgb, var(--tdb-accent) 25%, transparent) !important;color:#005a78 !important}
body.light-mode .ts2-dyno-gain-lbl{color:var(--tdb-muted) !important}
body.light-mode .ts2-dyno-gain-delta{color:var(--tdb-support) !important}
body.light-mode .ts2-dyno-gains{border-top-color:color-mix(in srgb, var(--tdb-line) 8%, transparent) !important}

/* ====== 25. METRIC PILL ====== */
body.light-mode .ts2-metric-pill{background:color-mix(in srgb, var(--tdb-accent) 10%, transparent) !important;border-color:color-mix(in srgb, var(--tdb-accent) 22%, transparent) !important;color:var(--tdb-support) !important}
body.light-mode .ts2-metric-pill.ts2-pill-blue{background:color-mix(in srgb, var(--tdb-accent) 10%, transparent) !important;border-color:color-mix(in srgb, var(--tdb-accent) 22%, transparent) !important;color:var(--tdb-accent) !important}
body.light-mode .ts2-metric-pill.ts2-pill-amber{background:rgba(217,119,6,.12) !important;border-color:rgba(217,119,6,.25) !important;color:#92400e !important}
body.light-mode .ts2-metric-pill.ts2-pill-rose{background:rgba(225,29,72,.1) !important;border-color:rgba(225,29,72,.25) !important;color:#9f1239 !important}

/* ====== 26. SERVICE CARD BADGE ====== */
body.light-mode .ts2-service-card-cat{color:var(--tdb-muted) !important}
body.light-mode .ts2-service-card-foot{border-top-color:color-mix(in srgb, var(--tdb-line) 8%, transparent) !important}
body.light-mode .ts2-service-card-price{color:var(--tdb-accent) !important}
body.light-mode .ts2-service-card-price small{color:var(--tdb-body) !important}
body.light-mode .ts2-service-card-cta{color:var(--tdb-muted) !important}
body.light-mode .ts2-service-card:hover .ts2-service-card-cta{color:var(--tdb-accent) !important}
body.light-mode .ts2-service-card-badge{background:rgba(217,119,6,.12) !important;border-color:rgba(217,119,6,.25) !important;color:#92400e !important}

/* ====== 27. PRICING + LIST CHECKMARKS ====== */
body.light-mode .ts2-features li::before,
body.light-mode .ts2-plan-mini-list li::before{color:var(--tdb-accent) !important}

/* ====== 28. SYSTEM STATUS ====== */
body.light-mode .ts2-host-status .ts2-page-header-sub{color:var(--tdb-on-light) !important}

/* ====== 29. ABOUT TIMELINE TOC ====== */
body.light-mode .ts2-toc-sticky{border-left-color:color-mix(in srgb, var(--tdb-line) 8%, transparent) !important}
body.light-mode .ts2-toc-sticky-h{color:var(--tdb-muted) !important}
body.light-mode .ts2-toc-sticky a{color:#475569 !important}
body.light-mode .ts2-toc-sticky a:hover{color:var(--tdb-on-light) !important}
body.light-mode .ts2-toc-sticky a.is-active{color:var(--tdb-accent) !important;border-color:var(--tdb-accent) !important}

/* ====== 30. CONTACT PAGE feature cards inline icons ====== */
body.light-mode .ts2-host-contact .ts2-feature-card{background:#ffffff !important}

/* ====== 31. ANNOUNCE BAR PULSE DOT ====== */
body.light-mode .ts2-pulse{background:var(--tdb-accent) !important;box-shadow:0 0 8px rgba(37, 99, 235,.4)}

/* ====== 32. FLAGS strip — keep flag emojis (no override needed) ====== */

/* ====== 33. WP ADMIN BAR colors when in light mode ====== */
body.light-mode #wpadminbar{background:var(--tdb-ground)}
body.light-mode #wpadminbar .ab-item{color:var(--tdb-text)}

/* ====== 34. ICONS — bootstrap-icons inherit color from parent ====== */
body.light-mode .ts2 .bi{color:inherit}

/* ====== 35. SELECTED TAG REMOVER X ====== */
body.light-mode .ts2-selected-tag-x{color:var(--tdb-support) !important}

/* ====== 36. FINAL META + EXTRAS ====== */
body.light-mode .ts2-final-meta{color:var(--tdb-body) !important}
body.light-mode .ts2-final-sub{color:#475569 !important}

/* ====== 37. HARDCODED DARK GRADIENTS OVERRIDES ======
   Main ts2 CSS has linear-gradient(180deg,#0a0e16,#06080d) !important on many sections.
   These bypass var(--bg-2) and require explicit override with same !important weight. */

/* Trust strip (the 11500/2300/etc stats row) */
body.light-mode .ts2-trust{background:linear-gradient(180deg,#ffffff,#f1f5f9) !important;border-top-color:color-mix(in srgb, var(--tdb-line) 8%, transparent) !important;border-bottom-color:color-mix(in srgb, var(--tdb-line) 8%, transparent) !important}

/* TCO calc cards — the 3 result cards */
body.light-mode .ts2-tco-card{background:#ffffff !important;border-color:color-mix(in srgb, var(--tdb-line) 8%, transparent) !important}
body.light-mode .ts2-tco-us{background:linear-gradient(135deg,color-mix(in srgb, var(--tdb-accent) 8%, transparent),color-mix(in srgb, var(--tdb-accent) 2%, transparent)) !important;border-color:color-mix(in srgb, var(--tdb-accent) 32%, transparent) !important}

/* TCO main wrap container */
body.light-mode .ts2-tco{background:#ffffff !important;border-color:color-mix(in srgb, var(--tdb-line) 8%, transparent) !important}

/* Compare table wrap (TunerSuite vs SaaS) */
body.light-mode .ts2-table-wrap{background:linear-gradient(180deg,#ffffff,#f8fafc) !important;border:1px solid color-mix(in srgb, var(--tdb-line) 8%, transparent) !important}
body.light-mode .ts2-table{background:#ffffff !important}
body.light-mode .ts2-table th{background:#f1f5f9 !important;color:#475569 !important;border-bottom-color:color-mix(in srgb, var(--tdb-line) 8%, transparent) !important}
body.light-mode .ts2-table td{color:#475569 !important;border-bottom-color:color-mix(in srgb, var(--tdb-line) 6%, transparent) !important}
body.light-mode .ts2-table td:first-child{color:var(--tdb-on-light) !important}
body.light-mode .ts2-table tr:hover{background:color-mix(in srgb, var(--tdb-ground) 2%, transparent) !important}
body.light-mode .ts2-table tbody tr:hover{background:color-mix(in srgb, var(--tdb-ground) 2%, transparent) !important}
body.light-mode .ts2-row-us{background:linear-gradient(90deg,color-mix(in srgb, var(--tdb-accent) 8%, transparent),color-mix(in srgb, var(--tdb-accent) 2%, transparent)) !important}

/* Hero radial-gradient + final radial-gradient */
body.light-mode .ts2-hero{background:radial-gradient(ellipse 80% 60% at 50% 0%,color-mix(in srgb, var(--tdb-accent) 10%, transparent),transparent 60%),radial-gradient(ellipse 60% 50% at 100% 30%,color-mix(in srgb, var(--tdb-support) 6%, transparent),transparent 60%),radial-gradient(ellipse 60% 50% at 0% 30%,rgba(124,58,237,.05),transparent 60%),#ffffff !important}
body.light-mode .ts2-final{background:radial-gradient(ellipse 100% 100% at center top,color-mix(in srgb, var(--tdb-accent) 10%, transparent),transparent 60%),radial-gradient(ellipse 80% 80% at center bottom,color-mix(in srgb, var(--tdb-support) 6%, transparent),transparent 60%),#f8fafc !important}

/* Bento card top hairline */
body.light-mode .ts2-bento-card::before{background:linear-gradient(90deg,transparent,color-mix(in srgb, var(--tdb-ground) 8%, transparent),transparent) !important}

/* Stat numbers — gradient text needs DARK gradient on light bg */
body.light-mode .ts2-stat-num{background:linear-gradient(180deg,var(--tdb-ground),#475569) !important;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* Plan featured background (was emerald→dark gradient) */
body.light-mode .ts2-plan-featured{background:linear-gradient(160deg,#ffffff 0%,#ecfdf5 100%) !important}

/* TCO savings card */
body.light-mode .ts2-tco-savings{background:linear-gradient(180deg,color-mix(in srgb, var(--tdb-accent) 10%, transparent),color-mix(in srgb, var(--tdb-accent) 4%, transparent)) !important;color:var(--tdb-support) !important}

/* Section base when ts2-section has implicit dark — main ts2 sometimes uses dark */
body.light-mode .ts2{background:#ffffff !important}
body.light-mode .ts2-section{background:transparent !important}

/* Pricing card grid background — featured already handled, regular: */
body.light-mode .ts2-plan{background:linear-gradient(180deg,#ffffff,#fafbfc) !important;border-color:color-mix(in srgb, var(--tdb-line) 8%, transparent) !important}

/* Xsell row background gradient */
body.light-mode .ts2-xsell{background:linear-gradient(180deg,#ffffff,#f1f5f9) !important;border-top:1px solid color-mix(in srgb, var(--tdb-line) 8%, transparent) !important;border-bottom:1px solid color-mix(in srgb, var(--tdb-line) 8%, transparent) !important}

/* Bento card on dark mode default has rgba(255,255,255,.04) — switch to subtle slate */
body.light-mode .ts2-bento-card{background:#ffffff !important;border-color:color-mix(in srgb, var(--tdb-line) 8%, transparent) !important}
body.light-mode .ts2-bento-icon{background:color-mix(in srgb, var(--tdb-ground) 4%, transparent) !important}

/* TS Promo bar (top emerald) — keep visible but soften */
body.light-mode #ts-promo-bar{background:linear-gradient(90deg,var(--tdb-accent) 0%,var(--tdb-support) 50%,var(--tdb-support) 100%) !important;color:var(--tdb-accent-ink) !important}

/* Featured plan icon emerald glow */
body.light-mode .ts2-plan-featured .ts2-plan-icon{box-shadow:0 4px 16px -4px rgba(37, 99, 235,.35) !important}

/* All sections inside .ts2 — ensure backgrounds inherit from light tokens not hardcoded */
body.light-mode .ts2-section:not(.ts2-section-alt){background:transparent !important}

/* Hero glow orbs sizes — main CSS has 600px size which is huge on light */
body.light-mode .ts2-glow-a,
body.light-mode .ts2-glow-b{filter:blur(80px) !important;opacity:.35 !important}

/* Section-alt explicit override */
body.light-mode .ts2-section-alt{background:#f1f5f9 !important;border-top-color:color-mix(in srgb, var(--tdb-line) 8%, transparent) !important;border-bottom-color:color-mix(in srgb, var(--tdb-line) 8%, transparent) !important}


/* ====== 38. NUCLEAR OVERRIDE — kill every dark background in light mode ====== */
/* Use html prefix + doubled class for max specificity, plus background-image:none to nuke any gradient */

html body.light-mode .ts2,
html body.light-mode .ts2.ts2-host-homepage,
html body.light-mode .ts2.ts2-host-software,
html body.light-mode .ts2.ts2-host-services,
html body.light-mode .ts2.ts2-host-about,
html body.light-mode .ts2.ts2-host-contact,
html body.light-mode .ts2.ts2-host-faq,
html body.light-mode .ts2.ts2-host-mp,
html body.light-mode .ts2.ts2-host-status,
html body.light-mode .ts2.ts2-host-service-landing{
  background:#ffffff !important;
  background-color:#ffffff !important;
  background-image:none !important;
  color:var(--tdb-on-light) !important;
}

/* Hero section — kill the dark radial-gradient, apply light radial */
html body.light-mode .ts2 .ts2-hero,
html body.light-mode .ts2-hero{
  background:#ffffff !important;
  background-color:#ffffff !important;
  background-image:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(37, 99, 235,.10),transparent 60%),radial-gradient(ellipse 60% 50% at 100% 30%,rgba(34,211,238,.06),transparent 60%) !important;
}

/* Trust strip — kill dark gradient */
html body.light-mode .ts2 .ts2-trust,
html body.light-mode .ts2-trust{
  background:#ffffff !important;
  background-color:#ffffff !important;
  background-image:linear-gradient(180deg,#ffffff,#f8fafc) !important;
  border-top-color:color-mix(in srgb, var(--tdb-line) 8%, transparent) !important;
  border-bottom-color:color-mix(in srgb, var(--tdb-line) 8%, transparent) !important;
}

/* Final section — kill dark radial */
html body.light-mode .ts2 .ts2-final,
html body.light-mode .ts2-final{
  background:#f8fafc !important;
  background-color:#f8fafc !important;
  background-image:radial-gradient(ellipse 100% 100% at center top,rgba(37, 99, 235,.08),transparent 60%) !important;
}

/* Regular sections — transparent (inherit .ts2 white) */
html body.light-mode .ts2 .ts2-section:not(.ts2-section-alt),
html body.light-mode .ts2 .ts2-section.ts2-section:not(.ts2-section-alt),
html body.light-mode .ts2-section:not(.ts2-section-alt){
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
}

/* Alt sections — light slate-100 */
html body.light-mode .ts2 .ts2-section-alt,
html body.light-mode .ts2-section.ts2-section-alt,
html body.light-mode .ts2-section-alt{
  background:#f1f5f9 !important;
  background-color:#f1f5f9 !important;
  background-image:none !important;
  border-top-color:color-mix(in srgb, var(--tdb-line) 8%, transparent) !important;
  border-bottom-color:color-mix(in srgb, var(--tdb-line) 8%, transparent) !important;
}

/* Page header — kill dark, apply light gradient */
html body.light-mode .ts2 .ts2-page-header,
html body.light-mode .ts2-page-header{
  background:#ffffff !important;
  background-image:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%) !important;
  border-bottom-color:color-mix(in srgb, var(--tdb-line) 8%, transparent) !important;
}

/* X-sell row */
html body.light-mode .ts2 .ts2-xsell,
html body.light-mode .ts2-xsell{
  background:#ffffff !important;
  background-image:linear-gradient(180deg,#ffffff,#f1f5f9) !important;
}

/* All cards force white */
html body.light-mode .ts2 .ts2-feature-card,
html body.light-mode .ts2 .ts2-service-card,
html body.light-mode .ts2 .ts2-mp-card,
html body.light-mode .ts2 .ts2-plan,
html body.light-mode .ts2 .ts2-plan-mini,
html body.light-mode .ts2 .ts2-testimonial,
html body.light-mode .ts2 .ts2-dyno-card,
html body.light-mode .ts2 .ts2-step,
html body.light-mode .ts2 .ts2-tco-card,
html body.light-mode .ts2 .ts2-bento-card,
html body.light-mode .ts2 .ts2-tco,
html body.light-mode .ts2 .ts2-table-wrap{
  background:#ffffff !important;
  background-color:#ffffff !important;
  background-image:none !important;
}

/* Featured plan keeps subtle emerald tint */
html body.light-mode .ts2 .ts2-plan-featured{
  background:#ffffff !important;
  background-image:linear-gradient(160deg,#ffffff 0%,#ecfdf5 100%) !important;
  border-color:color-mix(in srgb, var(--tdb-accent) 40%, transparent) !important;
}

/* TCO US card emerald tint */
html body.light-mode .ts2 .ts2-tco-us{
  background:#ffffff !important;
  background-image:linear-gradient(135deg,rgba(37, 99, 235,.08),rgba(37, 99, 235,.02)) !important;
  border-color:color-mix(in srgb, var(--tdb-accent) 32%, transparent) !important;
}



/* === CONTRAST FIX 2026-08-21 ==============================================
   This file loads after tunersuite-cluster.min.css, so the fixes there lose to
   these rules. Three things measured on the live homepage in light mode:
     - .ts2-price-old was #94a3b8 on a white card: 2.56:1
     - the primary/emerald gradient starts at cyan #06b6d4, where the white
       label is 2.43:1. Gradients carry a background-image, so an automated
       contrast pass reads straight past them - this one was found by eye.
   The gradient is kept, just moved to two blues so white clears AA along its
   whole length (5.2:1 at the top, 6.7:1 at the bottom).
   ================================================================= */
body.light-mode .ts2-price-old{color:#475569 !important}
body.light-mode .ts2-btn-primary{background:linear-gradient(180deg,var(--tdb-accent),var(--tdb-accent)) !important;color:var(--tdb-accent-ink) !important}
body.light-mode .ts2-btn-primary:hover{background:linear-gradient(180deg,var(--tdb-accent),var(--tdb-accent)) !important;color:var(--tdb-accent-ink) !important}
body.light-mode .ts2-btn-emerald{background:linear-gradient(180deg,var(--tdb-accent),var(--tdb-accent)) !important;color:var(--tdb-accent-ink) !important}
body.light-mode .ts2-btn-emerald:hover{background:linear-gradient(180deg,var(--tdb-accent),var(--tdb-accent)) !important;color:var(--tdb-accent-ink) !important}
body.light-mode .ts2-btn-cyan{background:linear-gradient(180deg,var(--tdb-support),var(--tdb-support)) !important;color:var(--tdb-accent-ink) !important}