/* =============================================================
   Wave 1 Polish — 2026-04-21
   Domain color accents, pricing hierarchy, motion primitives.
   Imported AFTER hub-polish.css so it overrides cleanly.
   ============================================================= */

/* ---------- 1. Domain accents on module cards ---------- */
.mod-card { position: relative; overflow: hidden; }
.mod-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--mod-accent, var(--eu-navy));
  opacity: 0;
  transition: opacity 0.2s var(--ease-out, ease);
}
.mod-card:hover::before,
.mod-card:focus::before { opacity: 1; }

.mod-card:has(.mod-icon-1) { --mod-accent: var(--domain-verbal); }
.mod-card:has(.mod-icon-2) { --mod-accent: var(--domain-numerical); }
.mod-card:has(.mod-icon-3) { --mod-accent: var(--domain-abstract); }
.mod-card:has(.mod-icon-4) { --mod-accent: var(--domain-eu); }
.mod-card:has(.mod-icon-5) { --mod-accent: var(--domain-digital); }

/* Progress bars pick up the domain color instead of always-gold */
.mod-card:has(.mod-icon-1) .mod-progress > span { background: var(--domain-verbal) !important; }
.mod-card:has(.mod-icon-2) .mod-progress > span { background: var(--domain-numerical) !important; }
.mod-card:has(.mod-icon-3) .mod-progress > span { background: var(--domain-abstract) !important; }
.mod-card:has(.mod-icon-4) .mod-progress > span { background: var(--domain-eu) !important; }
.mod-card:has(.mod-icon-5) .mod-progress > span { background: var(--domain-digital) !important; }

/* ---------- 2. Pricing hierarchy — Pro dominates ---------- */
.price-card.is-featured {
  transform: scale(1.04);
  z-index: 2;
  box-shadow: 0 28px 64px rgba(20, 38, 63, 0.16), 0 6px 20px rgba(198, 163, 84, 0.12);
  border-color: rgba(198, 163, 84, 0.45);
}
@media (max-width: 900px) {
  .price-card.is-featured { transform: none; }
}
.price-card.is-featured .btn,
.price-card.is-featured .btn-primary {
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  color: #fff;
  border-color: transparent;
  font-weight: 700;
  min-height: 48px;
}
.price-card.is-featured .btn:hover,
.price-card.is-featured .btn-primary:hover {
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  transform: translateY(-1px);
}
.price-ribbon {
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  padding: 5px 14px !important;
  font-size: 11.5px !important;
}

/* Feature list checkmarks — replace bare em-dashes visually */
.price-feats li::before {
  content: "✓";
  color: var(--ok, #16a34a);
  font-weight: 700;
  margin-right: 6px;
}
.price-feats li.is-missing::before {
  content: "×";
  color: var(--ink-4);
}

/* ---------- 3. Section rhythm ---------- */
.section,
.section-tight {
  padding-top:    var(--s-section-top, 72px);
  padding-bottom: var(--s-section-bottom, 72px);
}

/* ---------- 4. Input placeholder contrast ---------- */
input::placeholder,
textarea::placeholder {
  color: var(--ink-4, #7a88a2);
  opacity: 0.85;
}

/* ---------- 5. Live dot pulse (used across site) ---------- */
@keyframes live-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.3); opacity: 0.55; }
}
.nav-live-dot,
.live-badge::before {
  animation: live-pulse 1.8s ease-in-out infinite;
}