.o-wellness-page {
  --ow-bg: #f7f4f9;
  --ow-bg-alt: #ffffff;
  --ow-primary: #b55ea4;
  --ow-primary-dark: #8c457f;
  --ow-accent: #f4b4c5;
  --ow-text: #2b2530;
  --ow-muted: #6e6475;
  --ow-border: #e1d8eb;

  background: linear-gradient(180deg, #f8f3fb 0%, #ffffff 60%, #fdf6f8 100%);
  color: var(--ow-text);
}

/* Nav */
.ow-nav {
  backdrop-filter: blur(12px);
  background-color: rgba(248, 243, 251, 0.95);
  border-bottom: 1px solid rgba(225, 216, 235, 0.8);
}

.ow-logo-mark {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, #ffe9f1, #b55ea4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  font-size: 1.1rem;
  box-shadow: 0 10px 25px rgba(181, 94, 164, 0.4);
}

.ow-nav-link {
  position: relative;
}

.ow-nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: var(--ow-primary);
  transition: width 0.18s ease-out;
}

.ow-nav-link:hover::after {
  width: 100%;
}

/* Hero */
.ow-hero {
  padding-top: 3rem;
}

.ow-badge {
  background: rgba(244, 180, 197, 0.18);
  color: var(--ow-primary-dark);
  letter-spacing: 0.08em;
}

.ow-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--ow-primary);
}

.ow-hero-highlight {
  color: var(--ow-primary-dark);
}

.ow-hero-subtitle {
  max-width: 34rem;
  color: var(--ow-muted);
}

.ow-hero-checklist {
  color: var(--ow-muted);
}

.ow-hero-check {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--ow-primary);
  color: #fff;
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Card & pills */
.ow-hero-card {
  background: radial-gradient(circle at 15% 0, #ffffff, #f6e9f7);
}

.ow-pill {
  border-color: rgba(181, 94, 164, 0.18) !important;
}

.ow-hero-card-section {
  background-color: rgba(255, 255, 255, 0.95);
}

/* Buttons */
.ow-btn-primary {
  background-image: radial-gradient(circle at 20% 0, #ffe9f1, #b55ea4);
  border: none;
  box-shadow: 0 14px 30px rgba(181, 94, 164, 0.45);
}

.ow-btn-primary:hover {
  box-shadow: 0 18px 40px rgba(181, 94, 164, 0.6);
}

.ow-btn-secondary {
  background-color: rgba(255, 255, 255, 0.9);
}

/* Steps */
.ow-step-number {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: rgba(181, 94, 164, 0.1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ow-primary-dark);
  font-size: 0.8rem;
  font-weight: 600;
}

/* Features */
.ow-feature-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #b55ea4, #f4b4c5);
}

.ow-highlight-card {
  background: radial-gradient(circle at 10% 0, #ffffff, #fbe9f2);
}

/* CTA */
.ow-cta-card {
  background: radial-gradient(circle at 0 0, #ffffff, #f7e8fb);
}

/* Footer */
.ow-footer {
  background-color: rgba(255, 255, 255, 0.9);
}

/* Helper */
.letter-spacing-wide {
  letter-spacing: 0.09em;
}

/* Highlight effect */
.phase-panel-highlight {
  position: relative;
  z-index: 2;
  background-color: #f6efff;
  box-shadow:
    0 0 0 3px rgba(111, 66, 193, 0.5),
    0 10px 25px rgba(15, 23, 42, 0.25);
  transition: box-shadow 1.4s ease-out, background-color 1.4s ease-out;
}

/* “Updated” pill */
.phase-panel-updated-pill {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #6f42c1;        /* O Wellness purple */
  color: #fff;
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 600;
  opacity: 1;
  transition: opacity 0.5s ease-out;
  pointer-events: none;
  z-index: 3;
}

/* Fade-out animation */
.phase-panel-updated-pill.fade-out {
  opacity: 0;
}