:root {
  /* Hair variant palette: cool blue for clear differentiation */
  --ink: #1f2937;
  --accent: #0ea5e9;
  --bg: #f3f7ff;
  --beige: #c7d2fe;
  --mint: #38bdf8;
  --deep: #0f172a;
  --brand: #2563eb;
}

header {
  background: rgba(243, 247, 255, 0.92);
  border-bottom: 1px solid #dbe7ff;
  background-image: linear-gradient(180deg, #f5f8ff, #eaf2ff);
}

.navlinks {
  color: #1e3a8a;
}

.navlinks a[aria-current="page"] {
  color: var(--brand);
}

.overview-icon {
  background: #e8f3ff;
}

#before-after .feature > div:first-child {
  background: #e8f3ff;
}

.ph {
  background: repeating-linear-gradient(
    135deg,
    #e8f3ff 0 10px,
    #dbeafe 10px 20px
  );
  border: 1px dashed #cfe3ff;
  color: #3b82f6;
}

/* Hair-only button palette overrides */
.btn.primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #ffffff;
}

.btn.primary:hover {
  filter: brightness(1.05);
}

.btn.accent {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}

.btn.ghost {
  color: var(--brand);
  border-color: var(--brand);
}

/* Pricing accents include hard-coded orange shadows in shared CSS */
#pricing .p2-card.is-main {
  outline: 3px solid var(--accent);
  box-shadow: 0 16px 40px rgba(37, 99, 235, 0.25);
}

#pricing .p2-card.is-main .p2-name,
#pricing .p2-card.is-main .p2-price {
  color: var(--accent);
}

#pricing .p2-badge {
  background: var(--accent);
  box-shadow: 0 8px 18px rgba(14, 165, 233, 0.35);
}

#pricing .p2-cta-main {
  background: linear-gradient(90deg, var(--accent), #7dd3fc);
  border: 2px solid transparent;
  color: #ffffff;
}

#pricing .p2-cta-main:hover {
  box-shadow: 0 10px 24px rgba(14, 165, 233, 0.35);
}