/* ═══════════════════════════════════════════════════════════════════
   EditAtEase — 5-color icon chip palette (cycles 1→5, repeats)
   1 Blue · 2 Teal · 3 Violet · 4 Gold · 5 Pink
   Not loaded on make-ai-videos.html
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1 · Indigo Blue ───────────────────────────────────────────── */
#audiences .row.g-3 > [class*="col-"]:nth-child(5n+1) .service-icon,
#services .row.g-3 > [class*="col-"]:nth-child(5n+1) .service-icon,
.usp-grid > .usp-cell:nth-child(5n+1) .usp-cell-icon,
.services-grid > .svc-card:nth-child(5n+1) .svc-icon,
.process-steps > .process-step:nth-child(5n+1) .step-num,
.trad-grid > .trad-card:nth-child(5n+1) .trad-card-icon,
.ai-grid > .ai-card:nth-child(5n+1) .ai-card-icon,
.logo-track .logo-item:nth-child(5n+1) .logo-item-icon,
.role-cards > .role-card-label:nth-child(5n+1) .role-card-icon,
#contact-methods .row.g-3 > [class*="col-"]:nth-child(5n+1) .method-icon,
.final-cta-icon,
.cta-icon {
  background: rgba(93,109,255,.12) !important;
  color: #5d6dff !important;
  border-color: rgba(93,109,255,.22) !important;
}
.process-steps > .process-step:nth-child(5n+1) .step-num::before {
  background: linear-gradient(135deg, #5d6dff, #8b9fff) !important;
}

/* ── 2 · Teal ────────────────────────────────────────────────────── */
#audiences .row.g-3 > [class*="col-"]:nth-child(5n+2) .service-icon,
#services .row.g-3 > [class*="col-"]:nth-child(5n+2) .service-icon,
.usp-grid > .usp-cell:nth-child(5n+2) .usp-cell-icon,
.services-grid > .svc-card:nth-child(5n+2) .svc-icon,
.process-steps > .process-step:nth-child(5n+2) .step-num,
.trad-grid > .trad-card:nth-child(5n+2) .trad-card-icon,
.ai-grid > .ai-card:nth-child(5n+2) .ai-card-icon,
.logo-track .logo-item:nth-child(5n+2) .logo-item-icon,
.role-cards > .role-card-label:nth-child(5n+2) .role-card-icon,
#contact-methods .row.g-3 > [class*="col-"]:nth-child(5n+2) .method-icon {
  background: rgba(0,168,150,.12) !important;
  color: #00a896 !important;
  border-color: rgba(0,168,150,.22) !important;
}
.process-steps > .process-step:nth-child(5n+2) .step-num::before {
  background: linear-gradient(135deg, #00a896, #00c9b0) !important;
}

/* ── 3 · Violet ──────────────────────────────────────────────────── */
#audiences .row.g-3 > [class*="col-"]:nth-child(5n+3) .service-icon,
#services .row.g-3 > [class*="col-"]:nth-child(5n+3) .service-icon,
.usp-grid > .usp-cell:nth-child(5n+3) .usp-cell-icon,
.services-grid > .svc-card:nth-child(5n+3) .svc-icon,
.process-steps > .process-step:nth-child(5n+3) .step-num,
.trad-grid > .trad-card:nth-child(5n+3) .trad-card-icon,
.ai-grid > .ai-card:nth-child(5n+3) .ai-card-icon,
.logo-track .logo-item:nth-child(5n+3) .logo-item-icon,
.role-cards > .role-card-label:nth-child(5n+3) .role-card-icon,
#contact-methods .row.g-3 > [class*="col-"]:nth-child(5n+3) .method-icon {
  background: rgba(139,47,255,.12) !important;
  color: #8b2fff !important;
  border-color: rgba(139,47,255,.22) !important;
}
.process-steps > .process-step:nth-child(5n+3) .step-num::before {
  background: linear-gradient(135deg, #8b2fff, #b07aff) !important;
}

/* ── 4 · Gold ────────────────────────────────────────────────────── */
#audiences .row.g-3 > [class*="col-"]:nth-child(5n+4) .service-icon,
#services .row.g-3 > [class*="col-"]:nth-child(5n+4) .service-icon,
.usp-grid > .usp-cell:nth-child(5n+4) .usp-cell-icon,
.services-grid > .svc-card:nth-child(5n+4) .svc-icon,
.process-steps > .process-step:nth-child(5n+4) .step-num,
.trad-grid > .trad-card:nth-child(5n+4) .trad-card-icon,
.ai-grid > .ai-card:nth-child(5n+4) .ai-card-icon,
.logo-track .logo-item:nth-child(5n+4) .logo-item-icon,
.role-cards > .role-card-label:nth-child(5n+4) .role-card-icon,
#contact-methods .row.g-3 > [class*="col-"]:nth-child(5n+4) .method-icon {
  background: rgba(184,134,11,.12) !important;
  color: #b8860b !important;
  border-color: rgba(184,134,11,.22) !important;
}
.process-steps > .process-step:nth-child(5n+4) .step-num::before {
  background: linear-gradient(135deg, #b8860b, #d4a017) !important;
}

/* ── 5 · Magenta Pink ──────────────────────────────────────────── */
#audiences .row.g-3 > [class*="col-"]:nth-child(5n+5) .service-icon,
#services .row.g-3 > [class*="col-"]:nth-child(5n+5) .service-icon,
.usp-grid > .usp-cell:nth-child(5n+5) .usp-cell-icon,
.services-grid > .svc-card:nth-child(5n+5) .svc-icon,
.process-steps > .process-step:nth-child(5n+5) .step-num,
.trad-grid > .trad-card:nth-child(5n+5) .trad-card-icon,
.ai-grid > .ai-card:nth-child(5n+5) .ai-card-icon,
.logo-track .logo-item:nth-child(5n+5) .logo-item-icon,
.role-cards > .role-card-label:nth-child(5n+5) .role-card-icon,
#contact-methods .row.g-3 > [class*="col-"]:nth-child(5n+5) .method-icon {
  background: rgba(224,33,138,.12) !important;
  color: #e0218a !important;
  border-color: rgba(224,33,138,.22) !important;
}
.process-steps > .process-step:nth-child(5n+5) .step-num::before {
  background: linear-gradient(135deg, #e0218a, #f04da8) !important;
}

/* Step numbers: match digit color to ring on light sections */
.sec-light .process-steps > .process-step:nth-child(5n+1) .step-num { color: #5d6dff !important; }
.sec-light .process-steps > .process-step:nth-child(5n+2) .step-num { color: #00a896 !important; }
.sec-light .process-steps > .process-step:nth-child(5n+3) .step-num { color: #8b2fff !important; }
.sec-light .process-steps > .process-step:nth-child(5n+4) .step-num { color: #b8860b !important; }
.sec-light .process-steps > .process-step:nth-child(5n+5) .step-num { color: #e0218a !important; }

/* ═══════════════════════════════════════════════════════════════════
   CARD CTAs — match each card's link color to its rotating icon color
   ═══════════════════════════════════════════════════════════════════ */

/* 1 · Blue */
#audiences .row > [class*="col-"]:nth-child(5n+1) .service-cta,
#services .row > [class*="col-"]:nth-child(5n+1) .service-cta,
.services-grid > .svc-card:nth-child(5n+1) .svc-link {
  color: #5d6dff !important;
}
/* 2 · Teal */
#audiences .row > [class*="col-"]:nth-child(5n+2) .service-cta,
#services .row > [class*="col-"]:nth-child(5n+2) .service-cta,
.services-grid > .svc-card:nth-child(5n+2) .svc-link {
  color: #00a896 !important;
}
/* 3 · Violet */
#audiences .row > [class*="col-"]:nth-child(5n+3) .service-cta,
#services .row > [class*="col-"]:nth-child(5n+3) .service-cta,
.services-grid > .svc-card:nth-child(5n+3) .svc-link {
  color: #8b2fff !important;
}
/* 4 · Gold */
#audiences .row > [class*="col-"]:nth-child(5n+4) .service-cta,
#services .row > [class*="col-"]:nth-child(5n+4) .service-cta,
.services-grid > .svc-card:nth-child(5n+4) .svc-link {
  color: #b8860b !important;
}
/* 5 · Pink */
#audiences .row > [class*="col-"]:nth-child(5n+5) .service-cta,
#services .row > [class*="col-"]:nth-child(5n+5) .service-cta,
.services-grid > .svc-card:nth-child(5n+5) .svc-link {
  color: #e0218a !important;
}

/* ── Pricing-footer quick-access cards: glyph icon + matching link ── */
#pricing-footer .row > [class*="col-"]:nth-child(5n+1) .pricing-card .icon,
#pricing-footer .row > [class*="col-"]:nth-child(5n+1) .pricing-card a { color: #5d6dff !important; }
#pricing-footer .row > [class*="col-"]:nth-child(5n+2) .pricing-card .icon,
#pricing-footer .row > [class*="col-"]:nth-child(5n+2) .pricing-card a { color: #00a896 !important; }
#pricing-footer .row > [class*="col-"]:nth-child(5n+3) .pricing-card .icon,
#pricing-footer .row > [class*="col-"]:nth-child(5n+3) .pricing-card a { color: #8b2fff !important; }
#pricing-footer .row > [class*="col-"]:nth-child(5n+4) .pricing-card .icon,
#pricing-footer .row > [class*="col-"]:nth-child(5n+4) .pricing-card a { color: #b8860b !important; }
#pricing-footer .row > [class*="col-"]:nth-child(5n+5) .pricing-card .icon,
#pricing-footer .row > [class*="col-"]:nth-child(5n+5) .pricing-card a { color: #e0218a !important; }

/* Ensure chips have a visible border where base styles omit it */
.service-icon,
.svc-icon,
.usp-cell-icon,
.trad-card-icon,
.ai-card-icon,
.role-card-icon,
.method-icon,
.faq-toggle,
.final-cta-icon,
.cta-icon {
  border-style: solid;
  border-width: 1px;
}

/* FAQ toggles — single brand color (#5d6dff), same circular chip design */
.faq-toggle,
.sec-light .faq-toggle,
.sec-spotlight .faq-toggle {
  background: rgba(93,109,255,.12) !important;
  color: #5d6dff !important;
  border-color: rgba(93,109,255,.22) !important;
}
.faq-item.open .faq-toggle,
.sec-light .faq-item.open .faq-toggle,
.sec-spotlight .faq-item.open .faq-toggle {
  background: rgba(93,109,255,.18) !important;
  color: #5d6dff !important;
  border-color: rgba(93,109,255,.28) !important;
}