/* STYLE A: THE AUTHORITY — Split Test Variant — All 81 rules enforced */
/* Override file — load AFTER styles.css to fix all contrast/conversion violations */

/* ===========================================
   1. TEXT CONTRAST FIXES — All dim text → readable
   =========================================== */

/* Hero subtitle — was rgba(255,255,255,0.55) */
.hero p[style*="rgba(255,255,255,0.55)"],
.hero p[style*="color: rgba(255,255,255,0.55)"] {
  color: #F0F2F5 !important;
}

/* Hero supporting — was rgba(255,255,255,0.65) */
.hero-supporting {
  color: #F0F2F5 !important;
}

/* Hero sub — was rgba(255,255,255,0.9) — bump to full white */
.hero-sub {
  color: #FFFFFF !important;
}

/* Trust signals strip — was rgba(255,255,255,0.5) */
.hero div[style*="rgba(255,255,255,0.5)"] {
  color: #F0F2F5 !important;
}

/* Video placeholder text — was rgba(255,255,255,0.6) */
.hero-video-placeholder,
.hero-video-placeholder span,
.video-placeholder {
  color: #F0F2F5 !important;
}

/* Proof text — was rgba(255,255,255,0.6) */
.proof-text {
  color: #F0F2F5 !important;
}

/* Included section card text — was rgba(255,255,255,0.6) */
.included-card p {
  color: #F0F2F5 !important;
}

/* FAQ — all text readable */
.faq-item p {
  color: #F0F2F5 !important;
}

/* Form disclaimer — was rgba(255,255,255,0.4) */
.form-disclaimer {
  color: #B8C0D0 !important;
}

/* Footer text — was rgba(255,255,255,0.4)-(0.5) */
.site-footer,
.footer-brand,
.footer-links a,
.footer-disclaimer {
  color: #B8C0D0 !important;
}

.footer-brand strong {
  color: #FFFFFF !important;
}

/* Form success text — was rgba(255,255,255,0.7) */
.form-success p {
  color: #F0F2F5 !important;
}

/* Differentiator section — all text white */
.differentiator p,
.differentiator .section-subhead,
.diff-close {
  color: #F0F2F5 !important;
}

/* About section — white background, text stays dark */
.about-duo-content p {
  color: var(--charcoal) !important;
}

/* Problem callout text */
.problem-callout p {
  color: #FFFFFF !important;
}

/* Testimonial inline context */
.testimonial-inline-context {
  color: #F0F2F5 !important;
}

/* Video testimonial info — was dim */
.video-testimonial-info {
  color: #F0F2F5 !important;
}

/* Register form wrap text */
.register-form-wrap p,
.register-form-wrap span {
  color: #F0F2F5 !important;
}

/* Final CTA section */
.final-sub,
.final-body {
  color: #F0F2F5 !important;
}

/* ===========================================
   2. CATCH-ALL — No rgba white below 0.85
   =========================================== */
.hero *,
.included *,
.final-cta *,
.differentiator *,
.register *,
.mechanism .mechanism-intro *,
.about * {
  /* Override any inline rgba(255,255,255,0.3-0.7) */
}

/* Specific inline style overrides */
[style*="rgba(255,255,255,0.3)"],
[style*="rgba(255,255,255,0.4)"],
[style*="rgba(255,255,255,0.5)"],
[style*="rgba(255,255,255,0.55)"],
[style*="rgba(255,255,255,0.6)"],
[style*="rgba(255,255,255,0.65)"],
[style*="rgba(255,255,255,0.7)"] {
  color: #F0F2F5 !important;
}

/* ===========================================
   3. BUTTON FIX — btn-sub was opacity 0.75
   =========================================== */
.btn-sub {
  opacity: 1 !important;
  color: #1A1F36 !important;
}

/* On dark backgrounds, btn-sub should be light */
.final-cta .btn-sub,
.register .btn-sub {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* ===========================================
   4. CTA BUTTON — WARM ORANGE (32-40% more clicks)
   Gold stays as accent/highlight. Orange = action buttons.
   =========================================== */
.btn-primary {
  background: #E8822A !important;
  color: #FFFFFF !important;
  min-height: 56px;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: 0.3px;
  box-shadow: 0 4px 18px rgba(232, 130, 42, 0.4);
  border: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.btn-primary:hover {
  background: #D4741F !important;
  color: #FFFFFF !important;
  box-shadow: 0 8px 28px rgba(232, 130, 42, 0.55);
  transform: translateY(-2px);
}

@keyframes btnThrob {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 4px 18px rgba(232, 130, 42, 0.4);
  }
  50% {
    transform: scale(1.03);
    box-shadow: 0 6px 28px rgba(232, 130, 42, 0.6);
  }
}

.btn-lg {
  min-height: 60px;
  padding: 20px 48px;
  font-size: 20px;
  border-radius: 12px;
}

/* ===========================================
   5. FORM INPUT — 16px minimum (iOS zoom fix)
   =========================================== */
input,
textarea,
select {
  font-size: 16px !important;
}

.form-group input {
  min-height: 48px;
  font-size: 16px !important;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #FFFFFF;
}

.form-group input::placeholder {
  color: #B8C0D0;
}

.form-group input:focus {
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.15);
}

/* ===========================================
   6. TRUST TEXT — Below every CTA
   =========================================== */
.trust-text,
.btn-trust {
  display: block;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: #F0F2F5;
  margin-top: 12px;
  letter-spacing: 0.3px;
}

/* On light backgrounds, trust text should be dark */
.problem .trust-text,
.mechanism .trust-text,
.offer .trust-text {
  color: #555555;
}

/* ===========================================
   7. STICKY MOBILE CTA BAR
   =========================================== */
.mobile-sticky-cta {
  background: var(--navy);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.25);
}

.mobile-sticky-cta .btn-primary {
  background: var(--gold) !important;
  color: #1A1F36 !important;
  width: 100%;
  min-height: 52px;
  font-size: 17px;
  font-weight: 700;
}

@media (max-width: 639px) {
  .mobile-sticky-cta {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 12px 16px;
    background: var(--navy);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
  }

  body {
    padding-bottom: 80px;
  }
}

/* ===========================================
   8. LOGO BAR — "As Featured In"
   =========================================== */
.logo-bar,
.logos-bar,
.as-featured-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 32px 24px;
}

.logo-bar img,
.logos-bar img,
.as-featured-in img {
  height: auto;
  min-height: 32px;
  max-height: 48px;
  width: auto;
  max-width: 160px;
  filter: grayscale(100%) brightness(1.5);
  opacity: 0.6;
  transition: filter 0.3s ease, opacity 0.3s ease;
}

.logo-bar img:hover,
.logos-bar img:hover,
.as-featured-in img:hover {
  filter: grayscale(0%);
  opacity: 1;
}

@media (min-width: 640px) {
  .logo-bar img,
  .logos-bar img,
  .as-featured-in img {
    max-height: 60px;
    max-width: 200px;
  }
}

/* ===========================================
   9. HERO BADGE — Brighter border
   =========================================== */
.hero-badge {
  border-color: rgba(200, 164, 78, 0.5);
}

/* ===========================================
   10. VISUAL BREAK TEXT — Pure white
   =========================================== */
.visual-break-text {
  color: #FFFFFF !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
}

/* ===========================================
   11. SECTION HEADLINE ON DARK — White
   =========================================== */
.included .section-headline,
.final-cta .section-headline,
.register .section-headline,
.differentiator .section-headline {
  color: #FFFFFF !important;
}

/* ===========================================
   12. INCLUDED CARD BORDERS — More visible
   =========================================== */
.included-card {
  border-color: rgba(255, 255, 255, 0.15);
}

.included-card:hover {
  border-color: rgba(200, 164, 78, 0.4);
}

/* ===========================================
   13. P.S. AND P.P.S. — FULLY WHITE (NON-NEGOTIABLE)
   Only target actual P.S. sections, NOT all bold-start paragraphs
   =========================================== */
.ps-section,
.ps-section p,
.pps-section,
.pps-section p,
[class*="ps-"] p {
  color: #FFFFFF !important;
}

/* ===========================================
   13b. LIGHT BACKGROUND SECTIONS — Dark text protection
   These sections have white/light backgrounds — text MUST stay dark
   =========================================== */
section[style*="background: var(--white)"] p,
section[style*="background: var(--white)"] h2,
section[style*="background: var(--white)"] h3,
section[style*="background: var(--white)"] h4,
section[style*="background: var(--white)"] span,
section[style*="background: var(--white)"] li,
section[style*="background: var(--white)"] strong {
  color: var(--charcoal) !important;
}

section[style*="background: var(--white)"] .section-headline {
  color: var(--navy) !important;
}

section[style*="background: var(--white)"] .section-label {
  color: var(--gold-dark) !important;
}

/* ALL light-background sections — text MUST stay dark */
.self-select p,
.self-select h2,
.self-select h3,
.self-select h4,
.self-select .section-label,
.self-select .section-headline,
.self-select .select-item p,
.self-select .check-icon,
.self-select .x-icon,
.problem-content p,
.problem-lead,
.problem-questions,
.problem-close,
.problem .section-label,
.problem .section-headline,
.mechanism p,
.mechanism h2,
.mechanism h3,
.mechanism h4,
.mechanism .section-label,
.mechanism .section-headline,
.mechanism .section-subhead,
.mechanism-intro p,
.mechanism-bridge,
.offer p,
.offer h2,
.offer h3,
.offer .section-label,
.offer .section-headline,
.about-duo-content p,
.about .section-label,
.about .section-headline,
.about-photo-label strong,
.about-tagline,
.testimonial-primary p,
.testimonial-primary h2,
.testimonial-primary h3,
.testimonial-primary .section-label,
.testimonial-primary .section-headline,
.testimonial-card p,
.testimonial-card blockquote p,
.testimonial-author,
.testimonials .section-label,
.testimonials .section-headline,
.faq p,
.faq h2,
.faq h3,
.faq .section-label,
.faq .section-headline,
.faq-item summary,
.faq-item p,
.testimonial-inline-quote,
.testimonial-inline-context {
  color: var(--charcoal) !important;
}

/* Section headlines on light bg should be navy */
.self-select .section-headline,
.problem .section-headline,
.mechanism .section-headline,
.offer .section-headline,
.about .section-headline,
.testimonial-primary .section-headline,
.testimonials .section-headline,
.faq .section-headline {
  color: var(--navy) !important;
}

/* Section labels on light bg should be gold-dark */
.self-select .section-label,
.problem .section-label,
.mechanism .section-label,
.offer .section-label,
.about .section-label,
.testimonial-primary .section-label,
.testimonials .section-label,
.faq .section-label {
  color: var(--gold-dark) !important;
}

/* Problem callout is navy bg INSIDE a white section — text stays white */
.problem-callout p {
  color: #FFFFFF !important;
}
.problem-callout strong {
  color: var(--gold-light) !important;
}

/* Gold checkmarks stay gold on light backgrounds */
section[style*="background: var(--white)"] span[style*="color: var(--gold)"] {
  color: var(--gold) !important;
}

/* btn-sub on light bg should be dark */
section[style*="background: var(--white)"] .btn-sub {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Bold labels in P.S. */
.ps-section strong,
.pps-section strong {
  color: var(--gold) !important;
}

/* ===========================================
   13c. TEXT WEIGHT — Bold, punchy, direct response feel
   =========================================== */

/* Body text heavier across the board */
body {
  font-weight: 500;
}

p, li, span, .select-item p, .faq-item p {
  font-weight: 500;
}

/* Headlines and subheads extra bold */
h1, h2, h3, h4, .section-headline {
  font-weight: 800 !important;
}

.section-label {
  font-weight: 700 !important;
}

.section-subhead {
  font-weight: 600 !important;
}

/* Checkmark bullet text */
section[style*="background: var(--white)"] p,
.mechanism-intro p,
.problem-content p {
  font-weight: 500;
}

/* Bold text inside paragraphs — make it POP */
p strong, li strong, span strong {
  font-weight: 800 !important;
}

/* Testimonial quotes */
.testimonial-quote,
.testimonial-headline,
.testimonial-inline-quote,
blockquote p {
  font-weight: 600 !important;
}

/* FAQ summaries */
.faq-item summary {
  font-weight: 700 !important;
}

/* ===========================================
   14. BACKGROUND GRADIENT — Subtle depth on navy
   =========================================== */
body {
  background: radial-gradient(ellipse at 50% 30%, #141B3C 0%, #0a0f2e 70%) !important;
}

/* Dark sections get the gradient treatment */
.hero,
.included,
.final-cta,
.register {
  background: radial-gradient(ellipse at 50% 30%, #1A1F36 0%, #0f1429 100%) !important;
}

/* ===========================================
   15. MOBILE STICKY CTA — Orange buttons
   =========================================== */
.mobile-sticky-cta .btn-primary {
  background: #E8822A !important;
  color: #FFFFFF !important;
}

/* ===========================================
   16. FUNNEL PAGES — Orange CTAs + contrast
   =========================================== */

/* VIP/Upsell/Booking buttons */
.funnel-cta .btn-primary,
.upsell-section .btn-primary,
.oneclick-card .btn-primary,
.booking-cta .btn-primary {
  background: #E8822A !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 18px rgba(232, 130, 42, 0.4);
}

/* Upsell sub text contrast */
.upsell-sub {
  color: #F0F2F5 !important;
}

/* VSL section text */
.vsl-section p,
.vsl-section .vsl-sub {
  color: #F0F2F5 !important;
}

/* Funnel confirm banner stays green — no override */

/* Gold accent highlight for price/value text */
.price-highlight,
.value-highlight {
  color: var(--gold) !important;
}

/* Booking hero text */
.booking-hero p {
  color: #F0F2F5 !important;
}