/* ============================================================
   PERZO PAGE — COLOR OVERRIDES
   Link this AFTER style.css on perzo.html only:
   <link rel="stylesheet" href="css/perzo-overrides.css"/>

   Purpose: Perzo is a teal-only page. Purple (#4f46e5) is the
   sitewide brand accent and must not appear here. This file
   re-maps every purple token to teal for the Perzo context.
   ============================================================ */

/* ── RE-MAP ROOT TOKENS FOR PERZO ── */
body {
    --purple:      #0B8FA3;   /* remap purple → teal throughout */
    --purple-h:    #0A7D90;   /* hover state */
    --teal:        #0B8FA3;
    --teal2:       #0FA89C;
    --teal-lt:     #E0F3F7;
  }
  
  /* ── NAV: CTA button ── */
  .nav-cta {
    background: #0B8FA3;
  }
  .nav-cta:hover {
    background: #0A7D90;
  }
  
  /* ── HERO ── */
  #hero {
    background: #ffffff;
  }
  
  .hero-eyebrow {
    color: #0B8FA3;
    background: none;
  }
  .hero-eyebrow::before {
    background: #0B8FA3;
  }
  
  .hero-headline {
    color: #111827;
  }
  
  .hero-headline em,
  .section-title em,
  .cta-headline em {
    color: #0FA89C;
  }
  
  .hero-sub {
    color: #6B7280;
  }
  
  /* ── SECTION EYEBROWS ── */
  .section-eyebrow {
    color: #0B8FA3;
  }
  .section-eyebrow::before {
    background: #0B8FA3;
  }
  
  /* ── BUTTONS ── */
  .btn-teal,
  .btn-primary,
  .cta-btn {
    background: #0B8FA3;
    box-shadow: 0 8px 28px rgba(11,143,163,.28);
  }
  .btn-teal:hover,
  .btn-primary:hover,
  .cta-btn:hover {
    background: #0FA89C;
    box-shadow: 0 12px 36px rgba(11,143,163,.38);
  }
  
  .btn-ghost {
    color: #0B8FA3;
    border-color: rgba(11,143,163,.35);
  }
  .btn-ghost:hover {
    background: rgba(11,143,163,.07);
    border-color: #0B8FA3;
  }
  
  /* ── HERO STATS ── */
  .hs-val {
    color: #0B8FA3;
  }
  
  /* ── MODE CARDS ── */
  .mode-card.teal {
    border-top-color: #0B8FA3;
  }
  .mode-badge {
    background: rgba(11,143,163,.1);
    color: #0B8FA3;
    border-color: rgba(11,143,163,.2);
  }
  
  /* ── ROI CARDS ── */
  .roi-card {
    border-color: rgba(11,143,163,.2);
  }
  .roi-card::after {
    background: linear-gradient(90deg, #0B8FA3, transparent);
  }
  .rc-val {
    color: #0B8FA3;
  }
  
  /* ── COMPARISON TABLE ── */
  .comparison-table th:last-child,
  .comparison-table td.good {
    color: #0B8FA3;
  }
  
  /* ── EXPERIENCE CARDS ── */
  .exp-icon {
    background: rgba(11,143,163,.08);
    border-color: rgba(11,143,163,.18);
  }
  .exp-example {
    background: rgba(11,143,163,.06);
    border-color: rgba(11,143,163,.12);
    color: #0B8FA3;
  }
  
  /* ── AI TERMINAL ── */
  .ai-pt-num {
    color: #0B8FA3;
  }
  
  /* ── PRIORITY NOTE ── */
  .priority-note {
    border-left-color: #0B8FA3;
  }
  
  /* ── CTA SECTION ── */
  #cta {
    background: linear-gradient(135deg, #0a1a22 0%, #0c2530 100%);
  }
  #cta::before {
    background: radial-gradient(circle, rgba(11,143,163,.12) 0%, transparent 65%);
  }
  .cta-badge {
    background: rgba(11,143,163,.12);
    border-color: rgba(11,143,163,.3);
    color: #0FA89C;
  }
  .cta-perk::before {
    color: #0FA89C;
  }
  
  /* ── FUNNEL VISUAL ── */
  .funnel-bar.anon {
    background: rgba(11,143,163,.12);
    border-color: rgba(11,143,163,.3);
    color: #0B8FA3;
  }
  .cost-box.good {
    background: rgba(11,143,163,.07);
    border-color: rgba(11,143,163,.2);
  }
  .cost-box.good .cost-val {
    color: #0B8FA3;
  }
  
  /* ── SCROLL PROGRESS BAR ── */
  #scroll-progress-bar {
    background: linear-gradient(90deg, #0B8FA3 0%, #0FA89C 100%);
  }
  
  /* ── GO-TOP BUTTON ── */
  .go-top {
    background: #0B8FA3;
  }
  .go-top:hover {
    background: #0A7D90;
  }