body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #f5f3ef;
    margin: 0;
    padding: 0;
}

header {
    background: #2f1e33;
    color: #fff;
    padding: 1.5rem;
    text-align: center;
}

nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;   /* added */
  background: #241a2c;
  padding: 0.5rem;
}



.vault-link {
  color: #fff;
  margin: 0.5rem 1rem;
  font-size: 1.1rem;
  text-decoration: none;
  display: flex;
  align-items: center;
  white-space: nowrap;
  padding: 0.6rem 0.9rem;  /* added */
  line-height: 1.2;        /* added */
}
.vault-link i { margin-right: 0.5rem; }


main {
    padding: 3rem;
    max-width: 900px;
    margin: auto;
}

footer {
    text-align: center;
    background: #2f1e33;
    color: #ccc;
    padding: 1rem;
    font-size: 0.9rem;
}

/* Reusable button */
.primary-button {
  display: inline-block;
  background-color: #319795;
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 4px;
  text-decoration: none;
  margin-top: 1rem;
  font-weight: 600;
  transition: background-color 0.3s;
}

.primary-button:hover {
  background-color: #543b5c;
}

/* Inner Child Kit image */
.kit-image {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 2rem 0;
}

/* Article spacing */
.kit-intro article {
  background: #fff;
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* NAV — base */
.dropdown { position: relative; margin: 0.5rem 1rem; }
.dropbtn { background: none; color: #fff; font-size: 1.1rem; border: 0; cursor: pointer; display: flex; align-items: center; }
.dropbtn i { margin-right: 0.5rem; }
.dropbtn {
  padding: 0.6rem 0.9rem;   /* larger target */
  line-height: 1.2;
}
/* Panel (hidden by default) */
.dropdown-content {
  position: absolute;
  top: 2.5rem; left: 0;
  display: none;
  min-width: 240px;
  background: #3d2a41;
  border-radius: 6px;
  box-shadow: 0 8px 16px rgba(0,0,0,.2);
  z-index: 20;
  white-space: nowrap;
}
.dropdown-content a {
  display: block; padding: 0.6rem 1rem;
  color: #fff; text-decoration: none;
}
.dropdown-content a:hover { background: #543b5c; }

/* Click/keyboard open state (all devices) */
.dropdown.open .dropdown-content { display: block; }

/* Hover open only on hover-capable pointers (prevents conflict on touch) */
@media (hover: hover) and (pointer: fine) {
  .dropdown:hover .dropdown-content { display: block; }
}


@media (pointer: coarse) {
  .dropbtn,
  .vault-link { padding: 0.9rem 1rem; }  /* updated to include .vault-link */
}


/* Ensure menus float above other sections */
.dropdown-content {
  z-index: 1000;           /* was 20 */
}
/* Product/kit hero images */
.hero-img, .kit-image, .product img, img.hero, img.kit-image {
    width: 100%;
    max-width: 600px;
    margin: 1rem auto;
    display: block;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

/* Container for centered content */
.container {
    padding: 2rem;
    max-width: 800px;
    margin: 0 auto;
}

/* Buttons */
.cta-button, .button, .primary-button {
    display: inline-block;
    background-color: #319795;
    color: #fff;
    padding: 0.75rem 1.25rem;
    border-radius: 4px;
    text-decoration: none;
    margin-top: 1rem;
    font-weight: 600;
    transition: background-color 0.3s;
}
.cta-button:hover, .button:hover, .primary-button:hover {
    background-color: #543b5c;
}

/* Highlight box for features */
.highlight-box {
    background-color: #e2eaf2;
    padding: 1.5rem;
    margin: 1rem 0;
    border-left: 6px solid #325d79;
    border-radius: 8px;
}

/* Testimonial box */
.testimonial {
    background-color: #ffccbc;
    padding: 1rem;
    margin-top: 2rem;
    border-radius: 8px;
    font-style: italic;
}

/* Features list */
.features li {
    margin-bottom: 0.75rem;
}
/* ============================
   THEME — Shadow Work for Empaths
   ============================ */
.shadow-hero {
  background:
    radial-gradient(60% 60% at 65% 20%, rgba(255,184,161,.18) 0%, rgba(255,184,161,0) 60%),
    radial-gradient(40% 40% at 20% 80%, rgba(49,151,149,.15) 0%, rgba(49,151,149,0) 60%),
    linear-gradient(180deg, #1b1333 0%, #3a2757 60%, #241a2c 100%);
  color: #fff;
  text-align: center;
  padding: clamp(2.5rem, 5vw, 6rem) 1.25rem;
  position: relative;
  overflow: hidden;
}

.shadow-hero h1 {
  margin: 0 0 .35rem 0;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  letter-spacing: .2px;
}

.shadow-hero p.sub {
  max-width: 880px;
  margin: 0 auto;
  color: #e9dff0;
  font-size: clamp(1rem, 1.4vw, 1.125rem);
}

/* optional glow accents */
.shadow-hero::after {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(35% 25% at 80% 15%, rgba(255,184,161,.22) 0%, rgba(255,184,161,0) 70%),
    radial-gradient(20% 18% at 10% 85%, rgba(111,74,166,.18) 0%, rgba(111,74,166,0) 70%);
  pointer-events: none;
}

/* Illustration */
.shadow-illustration {
  max-width: 720px;
  margin: 2rem auto 0;
  display: block;
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
}

/* Content cards */
.shadow-section {
  max-width: 960px;
  margin: 0 auto;
  padding: 2rem 1.25rem 3rem;
}

.shadow-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 1.5rem 1.25rem;
  box-shadow: 0 12px 30px rgba(31, 23, 56, .08);
}

.shadow-card h2 {
  margin-top: .25rem;
}

/* List with star bullets */
.shadow-list {
  list-style: none;
  padding-left: 0;
  margin: .75rem 0 0;
}
.shadow-list li {
  position: relative;
  margin: .5rem 0;
  padding-left: 1.5rem;
}
.shadow-list li::before {
  content: "✦";
  position: absolute;
  left: 0;
  top: 0;
  color: #6f4aa6;
  line-height: 1.2;
}

/* CTA area – keep brand teal, reuse existing button styles */
.shadow-cta {
  text-align: center;
  margin-top: 1.25rem;
}

/* ============================
   THEME — Inner Child Journaling Kit
   ============================ */
.inner-hero {
  background:
    radial-gradient(60% 45% at 25% 20%, rgba(255,184,161,.18) 0%, rgba(255,184,161,0) 60%),
    radial-gradient(50% 40% at 80% 65%, rgba(141,218,209,.14) 0%, rgba(141,218,209,0) 65%),
    linear-gradient(180deg, #fff6ef 0%, #ffe5db 45%, #f7efe8 100%);
  color: #2f1e33;
  text-align: center;
  padding: clamp(2.25rem, 4.5vw, 5rem) 1.25rem;
  position: relative;
  overflow: hidden;
}

.inner-hero h1 {
  margin: 0 0 .35rem 0;
  font-size: clamp(2rem, 4.5vw, 3.1rem);
  letter-spacing: .2px;
}

.inner-hero p.sub {
  max-width: 880px;
  margin: 0 auto;
  color: #5f4a6f; /* gentle lavender-grey */
  font-size: clamp(1rem, 1.4vw, 1.125rem);
}

/* optional: soft doodle speckles (very subtle) */
.inner-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(2px 2px at 12% 22%, rgba(95,74,111,.18) 50%, transparent 51%) repeat,
    radial-gradient(2px 2px at 88% 72%, rgba(255,184,161,.22) 50%, transparent 51%) repeat;
  background-size: 120px 120px, 140px 140px;
  pointer-events: none;
}

/* Illustration */
.inner-illustration {
  max-width: 720px;
  margin: 2rem auto 0;
  display: block;
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(31, 23, 56, .14);
}

/* Content section/cards */
.inner-section {
  max-width: 960px;
  margin: 0 auto;
  padding: 2rem 1.25rem 3rem;
}

.inner-card {
  background: #ffffff;
  border-radius: 14px;
  padding: 1.5rem 1.25rem;
  box-shadow: 0 12px 28px rgba(31, 23, 56, .08);
}

/* Friendly list with star bullets */
.inner-list {
  list-style: none;
  padding-left: 0;
  margin: .75rem 0 0;
}
.inner-list li {
  position: relative;
  margin: .6rem 0;
  padding-left: 1.6rem;
}
.inner-list li::before {
  content: "★";
  position: absolute;
  left: 0;
  top: 0.1rem;
  color: #ffb8a1;         /* warm peach star */
  font-size: 1rem;
  line-height: 1;
}

/* CTA — uses your existing .cta-button/.button styles */
.inner-cta {
  text-align: center;
  margin-top: 1.25rem;
}
/* ============================
   THEME — Mindset & Growth
   ============================ */
.mindset-hero {
  background:
    radial-gradient(60% 45% at 25% 20%, rgba(255,184,161,.18) 0%, rgba(255,184,161,0) 60%),
    radial-gradient(50% 40% at 80% 65%, rgba(49,151,149,.14) 0%, rgba(49,151,149,0) 65%),
    linear-gradient(180deg, #e9faf6 0%, #e9e6ff 45%, #f7efe8 100%);
  color: #2f1e33;
  text-align: center;
  padding: clamp(2.25rem, 4.5vw, 5rem) 1.25rem;
  position: relative;
  overflow: hidden;
}
.mindset-hero h1 {
  margin: 0 0 .35rem 0;
  font-size: clamp(2rem, 4.5vw, 3.1rem);
  letter-spacing: .2px;
}
.mindset-hero p.sub {
  max-width: 880px;
  margin: 0 auto;
  color: #5f4a6f;
  font-size: clamp(1rem, 1.4vw, 1.125rem);
}

/* Illustration */
.mindset-illustration {
  max-width: 720px;
  margin: 2rem auto 0;
  display: block;
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(31, 23, 56, .14);
}

/* Content area */
.mindset-section {
  max-width: 960px;
  margin: 0 auto;
  padding: 2rem 1.25rem 3rem;
}
.mindset-card {
  background: #ffffff;
  border-radius: 14px;
  padding: 1.5rem 1.25rem;
  box-shadow: 0 12px 28px rgba(31, 23, 56, .08);
}

/* Wins/Features list */
.mindset-list {
  list-style: none;
  padding-left: 0;
  margin: .75rem 0 0;
}
.mindset-list li {
  position: relative;
  margin: .6rem 0;
  padding-left: 1.6rem;
}
.mindset-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.05rem;
  color: #6f4aa6;
  font-weight: 700;
}

/* CTA (reuse global .cta-button) */
.mindset-cta {
  text-align: center;
  margin-top: 1.25rem;
}
/* ============================
   THEME — Soul Seeds (Daily Inspiration)
   ============================ */
.soul-hero {
  background:
    radial-gradient(60% 45% at 78% 18%, rgba(255,184,161,.18) 0%, rgba(255,184,161,0) 60%),
    radial-gradient(50% 40% at 20% 82%, rgba(49,151,149,.14) 0%, rgba(49,151,149,0) 65%),
    linear-gradient(180deg, #f8fbff 0%, #f7f2ff 45%, #fff5ef 100%);
  color: #2f1e33;
  text-align: center;
  padding: clamp(2.25rem, 4.5vw, 5rem) 1.25rem;
  position: relative;
  overflow: hidden;
}

.soul-hero h1 {
  margin: 0 0 .35rem 0;
  font-size: clamp(2rem, 4.5vw, 3.1rem);
  letter-spacing: .2px;
}

.soul-hero p.sub {
  max-width: 880px;
  margin: 0 auto;
  color: #5f4a6f;
  font-size: clamp(1rem, 1.4vw, 1.125rem);
}

/* Illustration matches your other product pages */
.soul-illustration {
  max-width: 720px;
  margin: 2rem auto 0;
  display: block;
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(31, 23, 56, .14);
}

/* Content */
.soul-section {
  max-width: 960px;
  margin: 0 auto;
  padding: 2rem 1.25rem 3rem;
}
.soul-card {
  background: #ffffff;
  border-radius: 14px;
  padding: 1.5rem 1.25rem;
  box-shadow: 0 12px 28px rgba(31, 23, 56, .08);
}

/* Friendly star list */
.soul-list {
  list-style: none;
  padding-left: 0;
  margin: .75rem 0 0;
}
.soul-list li {
  position: relative;
  margin: .6rem 0;
  padding-left: 1.6rem;
}
.soul-list li::before {
  content: "✧";
  position: absolute;
  left: 0;
  top: 0.05rem;
  color: #6f4aa6; /* brand purple */
  font-weight: 700;
}

/* CTA (reuses your global .cta-button styles) */
.soul-cta { text-align: center; margin-top: 1.25rem; }
/* ============================
   THEME — Daily Affirmations
   ============================ */
.affirm-hero {
  background:
    radial-gradient(60% 45% at 70% 22%, rgba(255,184,161,.22) 0%, rgba(255,184,161,0) 60%),
    radial-gradient(50% 40% at 20% 82%, rgba(49,151,149,.14) 0%, rgba(49,151,149,0) 65%),
    linear-gradient(180deg, #efe9ff 0%, #f6e9ff 45%, #fff5ef 100%);
  color: #2f1e33;
  text-align: center;
  padding: clamp(2.25rem, 4.5vw, 5rem) 1.25rem;
  position: relative;
  overflow: hidden;
}

.affirm-hero h1 {
  margin: 0 0 .35rem 0;
  font-size: clamp(2rem, 4.5vw, 3.1rem);
  letter-spacing: .2px;
}

.affirm-hero p.sub {
  max-width: 880px;
  margin: 0 auto;
  color: #5f4a6f;
  font-size: clamp(1rem, 1.4vw, 1.125rem);
}

/* Illustration — same sizing as other product pages */
.affirm-illustration {
  max-width: 720px;
  margin: 2rem auto 0;
  display: block;
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(31, 23, 56, .14);
}

/* Content area */
.affirm-section {
  max-width: 960px;
  margin: 0 auto;
  padding: 2rem 1.25rem 3rem;
}
.affirm-card {
  background: #ffffff;
  border-radius: 14px;
  padding: 1.5rem 1.25rem;
  box-shadow: 0 12px 28px rgba(31, 23, 56, .08);
}

/* Starry bullet list */
.affirm-list {
  list-style: none;
  padding-left: 0;
  margin: .75rem 0 0;
}
.affirm-list li {
  position: relative;
  margin: .6rem 0;
  padding-left: 1.6rem;
}
.affirm-list li::before {
  content: "✺";
  position: absolute;
  left: 0;
  top: 0.05rem;
  color: #6f4aa6;   /* brand purple */
  font-weight: 700;
}

/* CTA — reuse your global .cta-button */
.affirm-cta { text-align: center; margin-top: 1.25rem; }
/* ============================
   THEME — Co-Parenting Compass
   ============================ */

/* Co-Parenting Compass — bolder hero background + glow overlay */
.compass-hero {
  position: relative;
  /* stronger, warmer base gradient */
  background:
    linear-gradient(180deg, #f4efff 0%, #ece2ff 42%, #ffe9df 100%);
  color: #2f1e33;
  text-align: center;
  padding: clamp(2.25rem, 4.5vw, 5rem) 1.25rem;
  overflow: hidden;
}

/* visible peach + teal glows layered on top of the base background */
.compass-hero::before {
  content: "";
  position: absolute;
  inset: -12%;
  background:
    radial-gradient(62% 48% at 72% 18%, rgba(255,184,161,0.40) 0%, rgba(255,184,161,0) 62%),
    radial-gradient(50% 42% at 18% 84%, rgba(49,151,149,0.24) 0%, rgba(49,151,149,0) 62%);
  pointer-events: none;
  z-index: 0;
}

/* keep text/image above the overlay */
.compass-hero > * {
  position: relative;
  z-index: 1;
}


.compass-hero {
    background:
    radial-gradient(60% 45% at 75% 20%, rgba(255,184,161,.20) 0%, rgba(255,184,161,0) 60%),
    radial-gradient(50% 40% at 22% 82%, rgba(49,151,149,.12) 0%, rgba(49,151,149,0) 65%),
    /* was: #f6fbff → #f7f5ff for a soft-lavender base */
    linear-gradient(180deg, #f7f5ff 0%, #eef0ff 45%, #fff5ef 100%);
  color: #2f1e33;
  text-align: center;
  padding: clamp(2.25rem, 4.5vw, 5rem) 1.25rem;
  position: relative;
  overflow: hidden;
}
.compass-hero h1 {
  margin: 0 0 .35rem 0;
  font-size: clamp(2rem, 4.5vw, 3.1rem);
  letter-spacing: .2px;
}
.compass-hero p.sub {
  max-width: 880px;
  margin: 0 auto;
  color: #5f4a6f;
  font-size: clamp(1rem, 1.4vw, 1.125rem);
}

/* Illustration (same sizing as your other product pages) */
.compass-illustration {
  max-width: 720px;
  margin: 2rem auto 0;
  display: block;
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(31, 23, 56, .14);
}

/* Content */
.compass-section {
  max-width: 960px;
  margin: 0 auto;
  padding: 2rem 1.25rem 3rem;
}
.compass-card {
  background: #ffffff;
  border-radius: 14px;
  padding: 1.5rem 1.25rem;
  box-shadow: 0 12px 28px rgba(31, 23, 56, .08);
}

/* Feature list with compass bullets */
.compass-list {
  list-style: none;
  padding-left: 0;
  margin: .75rem 0 0;
}
.compass-list li {
  position: relative;
  margin: .6rem 0;
  padding-left: 1.6rem;
}
.compass-list li::before {
  content: "⟲";                  /* compass-like glyph */
  position: absolute;
  left: 0;
  top: 0.05rem;
  color: #6f4aa6;                 /* brand purple */
  font-weight: 700;
}

/* CTA uses your existing .cta-button style */
.compass-cta { text-align: center; margin-top: 1.25rem; }
/* ============================
   THEME — Co-Parenting Toolkit
   ============================ */
.toolkit-hero {
  background:
    radial-gradient(60% 45% at 75% 18%, rgba(255,184,161,.18) 0%, rgba(255,184,161,0) 60%),
    radial-gradient(50% 40% at 22% 82%, rgba(49,151,149,.14) 0%, rgba(49,151,149,0) 65%),
    linear-gradient(180deg, #f6fbff 0%, #eef5ff 45%, #fff5ef 100%);
  color: #2f1e33;
  text-align: center;
  padding: clamp(2.25rem, 4.5vw, 5rem) 1.25rem;
  position: relative;
  overflow: hidden;
}
.toolkit-hero h1 {
  margin: 0 0 .35rem 0;
  font-size: clamp(2rem, 4.5vw, 3.1rem);
  letter-spacing: .2px;
}
.toolkit-hero p.sub {
  max-width: 880px;
  margin: 0 auto;
  color: #5f4a6f;
  font-size: clamp(1rem, 1.4vw, 1.125rem);
}

/* Illustration (same sizing as other products) */
.toolkit-illustration {
  max-width: 720px;
  margin: 2rem auto 0;
  display: block;
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(31, 23, 56, .14);
}

/* Content */
.toolkit-section {
  max-width: 960px;
  margin: 0 auto;
  padding: 2rem 1.25rem 3rem;
}
.toolkit-card {
  background: #ffffff;
  border-radius: 14px;
  padding: 1.5rem 1.25rem;
  box-shadow: 0 12px 28px rgba(31, 23, 56, .08);
}

/* Feature list with check bullets */
.toolkit-list {
  list-style: none;
  padding-left: 0;
  margin: .75rem 0 0;
}
.toolkit-list li {
  position: relative;
  margin: .6rem 0;
  padding-left: 1.6rem;
}
.toolkit-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.05rem;
  color: #6f4aa6;    /* brand purple */
  font-weight: 700;
}

/* CTA — reuse global .cta-button */
.toolkit-cta { text-align: center; margin-top: 1.25rem; }
/* ============================
   THEME — Vault Pass
   ============================ */
.vault-hero {
  background:
    radial-gradient(60% 45% at 78% 18%, rgba(255,184,161,.18) 0%, rgba(255,184,161,0) 60%),
    radial-gradient(50% 40% at 20% 82%, rgba(49,151,149,.14) 0%, rgba(49,151,149,0) 65%),
    linear-gradient(180deg, #f6fbff 0%, #f0ecff 45%, #fff5ef 100%);
  color: #2f1e33;
  text-align: center;
  padding: clamp(2.25rem, 4.5vw, 5rem) 1.25rem;
  position: relative;
  overflow: hidden;
}
.vault-hero h1 {
  margin: 0 0 .35rem 0;
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  letter-spacing: .2px;
}
.vault-hero p.sub {
  max-width: 920px;
  margin: 0.25rem auto 0;
  color: #5f4a6f;
  font-size: clamp(1rem, 1.4vw, 1.125rem);
}

/* Illustration (same sizing as your other products) */
.vault-illustration {
  max-width: 780px;
  margin: 2rem auto 0;
  display: block;
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(31,23,56,.14);
}

/* Content area */
.vault-section {
  max-width: 1040px;
  margin: 0 auto;
  padding: 2rem 1.25rem 3.25rem;
}
.vault-card {
  background: #ffffff;
  border-radius: 14px;
  padding: 1.5rem 1.25rem;
  box-shadow: 0 12px 28px rgba(31,23,56,.08);
}

/* grid for “what’s included” */
.vault-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 1rem;
  margin-top: .75rem;
}
@media (min-width: 900px) {
  .vault-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
.vault-tile {
  background: #fff;
  border: 1px solid rgba(111,74,166,.15);
  border-radius: 12px;
  padding: 1rem;
}
.vault-tile h4 { margin: 0 0 .25rem 0; color: #2f1e33; }
.vault-tile p { margin: 0; color: #5f4a6f; font-size: .95rem; }

/* pricing cards */
.pricing {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 1rem;
}
@media (min-width: 880px) { .pricing { grid-template-columns: repeat(3, 1fr); } }

.price-card {
  background: #fff;
  border-radius: 12px;
  padding: 1.25rem;
  border: 1px solid rgba(111,74,166,.16);
  box-shadow: 0 10px 24px rgba(31,23,56,.06);
  text-align: center;
}
.price-card.best {
  border-color: #319795;
  box-shadow: 0 16px 36px rgba(49,151,149,.18);
  position: relative;
}
.price-badge {
  position: absolute;
  top: -12px; left: 50%; transform: translateX(-50%);
  background: #319795; color: #fff;
  padding: .25rem .6rem; font-size: .8rem; border-radius: 999px;
}
.price {
  font-size: 1.9rem; font-weight: 700; color: #2f1e33; margin: .25rem 0 .5rem;
}
.price small { font-size: .9rem; color: #5f4a6f; }

.compare-list {
  list-style: none; padding-left: 0; margin: .5rem 0 0;
}
.compare-list li { margin: .35rem 0; }
.compare-list li::before {
  content: "✓"; color: #6f4aa6; font-weight: 700; margin-right: .5rem;
}

/* CTA block */
.vault-cta { text-align: center; margin-top: 1.25rem; }