/* KairSun — contrast / a11y overlay (P0f)
 * Loaded AFTER marketing.css. Separate file so concurrent marketing.css edits
 * don't clobber WCAG-ish body/caption/bubble/pill contrast.
 * Scope: mobile 320–430 + desktop 1280–1440. No economy wallet layout fights.
 * Audit: /workspace/KAIRSUN_WEB_AUDIT/22_CONTRAST_MOBILE_PC.md
 */

:root {
  --text: #FAFAFA;
  --text-2: #E2E8F0;
  --muted: #B8C4D6;
}

/* Body */
.lead,
.story-copy > p:not(.vista-kicker),
.pillar p,
.step p,
.cta-band p,
.prose p,
.prose li {
  color: var(--text-2);
}

/* Captions */
.section-sub,
.story-sub-dense,
.vista-note,
.story-device .vista-note,
.vistas-footnote,
.cta-note,
.cta-note.cta-waitlist,
.fw-note,
.fw-assurances,
.hero-prize-earn,
.footer-proof,
.ph-econ-note,
.ph-sub,
.ph-w-k,
.ph-card-k,
.ph-soon-copy {
  color: var(--muted);
}
.phone-screen .ph-sub,
.phone-screen .ph-card-k,
.phone-screen .ph-econ-note,
.phone-screen .ph-w-k,
.phone-screen .ph-undo,
.phone-screen .ph-settings li span {
  color: #C4CEDC !important;
}

/* Bubbles */
.ks-speak-bubble {
  color: #FAFAFA !important;
  border-color: rgba(45, 212, 191, 0.42);
  background:
    linear-gradient(160deg, rgba(45, 212, 191, 0.16), rgba(245, 196, 81, 0.08)),
    rgba(24, 24, 27, 0.97) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 24px rgba(0, 0, 0, 0.28);
}
.ks-speak-bubble::before {
  background: rgba(24, 24, 27, 0.97);
  border-left-color: rgba(45, 212, 191, 0.42);
  border-bottom-color: rgba(45, 212, 191, 0.42);
}
.ks-speak-bubble p {
  color: #FAFAFA !important;
  font-weight: 560;
}
.ks-companion-line {
  color: #FAFAFA;
}

/* Pills */
.hero-prize-pills li {
  color: var(--text-2) !important;
  border-color: rgba(245, 196, 81, 0.48);
  background:
    linear-gradient(180deg, rgba(245, 196, 81, 0.22), rgba(245, 196, 81, 0.08)),
    rgba(9, 9, 11, 0.88) !important;
}
.hero-prize-pills strong {
  color: var(--gold-hi, #FFE9B8) !important;
  font-weight: 750;
}
.hero-prize-label {
  color: var(--gold-base, #FFD777);
}
.hero-rewards li {
  color: var(--muted);
}
.hero-rewards strong {
  color: var(--gold-hi, #FFE9B8);
}
.tag {
  color: var(--text-2);
}

/* seal-gold fallback when clip-text unsupported / tools see transparent */
.seal-gold {
  color: var(--gold-hi, #FFE9B8);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .seal-gold {
    background: linear-gradient(135deg, var(--gold-hi, #FFE9B8), var(--gold-base, #FFD777) 52%, var(--gold-deep, #E8A93E));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}
.seal-teal {
  color: #5EEAD4;
}

@media (max-width: 430px) {
  .ks-speak-bubble p {
    font-size: 0.9rem;
    color: #FFFFFF !important;
  }
  .vista-note,
  .story-device .vista-note,
  .hero-prize-earn,
  .cta-note {
    color: #C4CEDC;
  }
  .hero-prize-pills li {
    font-size: 0.88rem;
    color: #E2E8F0 !important;
  }
}

@media (min-width: 1280px) {
  .ks-speak-bubble {
    background:
      linear-gradient(160deg, rgba(45, 212, 191, 0.14), rgba(245, 196, 81, 0.07)),
      rgba(18, 18, 22, 0.98) !important;
  }
  .hero-prize-pills li {
    color: #E2E8F0 !important;
  }
  .nav-links a:not(.btn-primary):not(.nav-cta) {
    color: #D5DEE8;
  }
}


/* 33 — Founder pill dock contrast (liquid-glass micro-pills) */
.founder-pill-dock li {
  color: #E2E8F0 !important;
  border-color: rgba(255, 255, 255, 0.2);
}
.founder-pill-dock li strong {
  color: var(--gold-hi, #FFE9B8) !important;
  font-weight: 750;
}
.hero-prize-pills.founder-micro-pills li,
.founder-micro-pills li {
  color: var(--text-2) !important;
}

/* Wave 39 — .fw-orient tenia colores de tarjeta clara (#334155/#0f172a/#475569)
 * sobre el fondo oscuro del sitio: 1.1-2.6:1. Se remapea a los tokens dark. */
.fw-orient { color: var(--text-2, #E2E8F0); }
.fw-orient strong { color: var(--text, #FAFAFA); }
.fw-orient-list { color: var(--muted, #B8C4D6); }