/* ==========================================================================
   That Girl Health Academy — Magenta Jewel
   Shared stylesheet · DM Serif Display + DM Sans
   Palette: Cream / Aubergine / Magenta / Marigold  (60 / 30 / 10)
   ========================================================================== */

:root {
  --cream:     #FCF2E8;
  --aubergine: #2C1530;
  --magenta:   #DA1C7C;
  --marigold:  #FFB02E;

  --cream-soft: #F6E7D8;        /* subtle card / divider tint on cream */
  --aubergine-80: rgba(44, 21, 48, 0.80);
  --aubergine-60: rgba(44, 21, 48, 0.60);
  --cream-70: rgba(252, 242, 232, 0.70);

  --maxw: 1080px;
  --measure: 64ch;             /* readable line length for body copy */
  --radius: 16px;
  --radius-sm: 10px;

  --shadow: 0 24px 60px -28px rgba(44, 21, 48, 0.35);
  --shadow-sm: 0 10px 30px -18px rgba(44, 21, 48, 0.45);

  --serif: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ------------------------------ Reset ----------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--aubergine);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--magenta); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --------------------------- Typography --------------------------------- */
h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
  color: var(--aubergine);
}
h1 { font-size: clamp(2.4rem, 6vw, 4.1rem); }
h2 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
p { margin: 0 0 1.1em; max-width: var(--measure); }

/* the brand signature: italic magenta "That Girl" */
.tg { font-family: var(--serif); font-style: italic; color: var(--magenta); }
em.tg, .tg em { font-style: italic; }

/* differentiated payoff phrase — magenta serif italic */
.payoff { font-family: var(--serif); font-style: italic; color: var(--magenta); }

/* kicker / eyebrow label — DM Sans, tracked caps */
.kicker {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--magenta);
  margin: 0 0 1rem;
}
.kicker.on-dark { color: var(--marigold); }

/* ----------------------------- Layout ----------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 760px; }
section { padding: clamp(2.75rem, 6vw, 4.25rem) 0; }
.section-tint { background: var(--cream-soft); }

/* dark "moment" surface */
.section-dark {
  background: var(--aubergine);
  color: var(--cream);
}
.section-dark h1, .section-dark h2, .section-dark h3 { color: var(--cream); }
.section-dark p { color: var(--cream-70); }
.section-dark .lead { color: var(--cream); }
.section-dark a { color: var(--marigold); }
.section-dark .btn { color: var(--cream); }
.section-dark .btn.on-dark { color: var(--aubergine); }
.section-dark .credential-item .cred-label { color: var(--cream-70); }

.lead {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.55;
  color: var(--aubergine);
  max-width: 40ch;
}

/* ------------------------------ Header ---------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--cream-70);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid rgba(44, 21, 48, 0.08);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 14px; padding-bottom: 14px;
}
.site-header img.logo { height: 50px; width: auto; }
.site-nav { display: flex; align-items: center; gap: 26px; }
.site-nav > a:not(.nav-cta) {
  font-family: var(--sans); font-weight: 600; font-size: 0.95rem;
  color: var(--aubergine); letter-spacing: 0.01em;
}
.site-nav > a:not(.nav-cta):hover { color: var(--magenta); text-decoration: none; }
.site-header .nav-cta {
  font-family: var(--sans); font-weight: 600; font-size: 0.95rem;
  background: var(--magenta); color: var(--cream);
  padding: 10px 22px; border-radius: 999px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.site-header .nav-cta:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow-sm); }

/* ------------------------------ Buttons --------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--sans); font-weight: 600; font-size: 1.05rem;
  letter-spacing: 0.01em;
  background: var(--magenta); color: var(--cream);
  padding: 16px 38px; border-radius: 999px;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  box-shadow: var(--shadow-sm);
}
.btn:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow); }
.btn.on-dark { background: var(--marigold); color: var(--aubergine); }
.cta-group { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; margin: 0 0 1.1em; }
.btn.ghost {
  background: transparent; color: var(--magenta);
  box-shadow: inset 0 0 0 2px var(--magenta);
}
.btn.ghost:hover { background: var(--magenta); color: var(--cream); box-shadow: var(--shadow-sm); }
.price-note { font-size: 0.95rem; color: var(--aubergine-60); margin-top: 0.9rem; }

/* ------------------------------- Hero ----------------------------------- */
/* Tightened Aug 16: the old 16ch h1 cap forced the headline onto 4 lines on
   desktop, which pushed the CTA buttons below the fold on common laptop
   heights. Widening the cap lets it wrap to ~2 lines instead; the ch unit
   scales with font-size, so on mobile (where the h1 sits at its clamp floor
   and the container is already narrower than 30ch of that smaller font)
   this cap isn't the binding constraint and mobile wrapping is unchanged.
   Padding and lead spacing trimmed too, to pull the whole panel up. */
.hero { padding-top: clamp(2.25rem, 5vw, 3.5rem); padding-bottom: clamp(2.25rem, 5vw, 3.5rem); }
.hero .kicker { margin-bottom: 0.6rem; }
.hero h1 { max-width: 30ch; margin-bottom: 1.2rem; }
.hero .lead { max-width: 54ch; margin-bottom: 1.5rem; }
.hero .cta-group { margin-bottom: 0; } /* was inheriting the base 1.1em, adding extra space below the section's own padding-bottom */
.hero .price-line {
  font-family: var(--sans); font-weight: 700; font-size: 1.05rem;
  color: var(--aubergine); margin: 1.6rem 0 0.4rem;
}

/* ------------------------- Curriculum / cards --------------------------- */
.grid { display: grid; gap: 22px; }
.grid.two { grid-template-columns: repeat(2, 1fr); }
.grid.three { grid-template-columns: repeat(3, 1fr); }

.card {
  background: var(--cream);
  border: 1px solid rgba(44, 21, 48, 0.10);
  border-radius: var(--radius);
  padding: 30px 28px;
  box-shadow: var(--shadow-sm);
}
.card .num {
  font-family: var(--serif); font-style: italic;
  color: var(--magenta); font-size: 1.5rem; line-height: 1;
  display: block; margin-bottom: 0.5rem;
}

/* full-width Module 0 banner card */
.card.wide {
  display: flex; align-items: flex-start; gap: 26px;
  background: var(--cream);
}
.card.wide .num { font-size: 2.4rem; margin-bottom: 0; flex: 0 0 auto; line-height: 0.9; }
.card.wide .wide-body { flex: 1; }
.card.wide h3 { margin-top: 0; margin-bottom: 0.35rem; }
.card.wide p { max-width: 70ch; }
@media (max-width: 560px) {
  .card.wide { flex-direction: column; gap: 8px; }
}
.card h3 { margin-bottom: 0.4rem; }
.card p { font-size: 0.98rem; color: var(--aubergine-80); margin-bottom: 0; }

/* checklist */
.checklist { list-style: none; padding: 0; margin: 0; max-width: var(--measure); }
.checklist li {
  position: relative; padding-left: 2rem; margin-bottom: 0.9rem;
  color: var(--aubergine-80);
}
.checklist li::before {
  content: "";
  position: absolute; left: 0; top: 0.55em;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--magenta);
  box-shadow: 0 0 0 4px rgba(218, 28, 124, 0.14);
}

/* ------------------------------- FAQ ------------------------------------ */
.faq-group { margin-bottom: 2.4rem; }
/* the last group's bottom margin was stacking on top of the section's own bottom
   padding, doubling up the gap before the next section (flagged on mobile Aug 29,
   but the same double-spacing exists at every width) -- only groups between each
   other need that margin, not the one right before the section boundary. */
.faq-group:last-child { margin-bottom: 0; }
.faq-group > h3 {
  font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.14em;
  font-size: 0.85rem; font-weight: 700; color: var(--magenta);
  border-bottom: 1px solid rgba(44,21,48,0.12); padding-bottom: 0.6rem; margin-bottom: 1rem;
}
details.faq {
  border-bottom: 1px solid rgba(44, 21, 48, 0.12);
  padding: 6px 0;
}
details.faq summary {
  cursor: pointer; list-style: none;
  font-family: var(--sans); font-weight: 600; font-size: 1.08rem;
  color: var(--aubergine);
  padding: 16px 40px 16px 0; position: relative;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-family: var(--serif); color: var(--magenta); font-size: 1.6rem; line-height: 1;
  transition: transform .2s ease;
}
details.faq[open] summary::after { content: "\2013"; }
details.faq .faq-body { padding: 0 0 18px; }
details.faq .faq-body p { color: var(--aubergine-80); margin-bottom: 0.6em; }

/* ------------------------- Pricing block -------------------------------- */
.pricing-card {
  background: var(--cream);
  color: var(--aubergine-80);
  border: 2px solid var(--magenta);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  text-align: center;
  max-width: 640px; margin: 0 auto;
  box-shadow: var(--shadow);
}
.pricing-card p { color: var(--aubergine-80); }
.pricing-card .kicker { color: var(--magenta); }
.pricing-card .big-price {
  font-family: var(--serif); color: var(--magenta);
  font-size: clamp(3rem, 8vw, 4.5rem); line-height: 1; margin: 0.3rem 0;
}
.pricing-card .strike { color: var(--aubergine-60); text-decoration: line-through; font-weight: 600; }
.pricing-card .plan-line {
  font-weight: 600; margin: 0.2rem 0; font-size: 1.15rem;
  text-align: center; width: 100%; color: var(--aubergine-80);
}
.pricing-card .price-block {
  display: flex; flex-direction: column; align-items: center; width: 100%;
  text-align: center;
}
.pricing-card .btn { margin-top: 1.4rem; }
#enrollBtn { color: var(--cream); }

/* larger type across the enrollment section */
#enroll .kicker { font-size: 1.15rem; }
#enroll h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); }
#enroll > .wrap > .narrow p { font-size: 1.15rem; }
.pricing-card { font-size: 1.05rem; }
.pricing-card > p { font-size: 1.05rem; }
.pricing-card .btn { font-size: 1.15rem; }

/* --------------------- Enrollment agreement ----------------------------- */
.agree-block { max-width: 520px; margin: 1.7rem auto 0; }
.agree {
  display: flex; gap: 12px; align-items: flex-start;
  text-align: left; font-size: 1rem; color: var(--aubergine-80);
  margin-bottom: 0.9rem; cursor: pointer; line-height: 1.55;
}
.agree input[type="checkbox"] {
  width: 20px; height: 20px; margin-top: 2px; flex: 0 0 auto;
  accent-color: var(--magenta); cursor: pointer;
}
.agree-block .btn { display: block; width: fit-content; margin: 1.1rem auto 0; }
.btn.is-disabled { opacity: 0.45; pointer-events: none; box-shadow: none; }

.enroll-options {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
  gap: 0.7rem; margin: 1.1rem auto 0; width: 100%;
}
.enroll-options .btn { margin: 0; }
.btn-stacked {
  display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
  padding-top: 18px; padding-bottom: 18px;
}
.btn-stacked .btn-subtext {
  display: block;
  font-size: 0.8rem; font-weight: 500; letter-spacing: 0.01em;
  color: rgba(252, 242, 232, 0.8);
}

/* --------------------------- Email signup ------------------------------- */
.email-form {
  display: flex; gap: 10px; max-width: 480px;
  margin: 1.7rem auto 0; flex-wrap: wrap;
}
.email-form input[type="email"] {
  flex: 1 1 240px; min-width: 0;
  padding: 15px 20px; border-radius: 999px;
  border: 1px solid rgba(252, 242, 232, 0.30);
  background: rgba(252, 242, 232, 0.08);
  color: var(--cream); font-family: var(--sans); font-size: 1rem;
}
.email-form input[type="email"]::placeholder { color: rgba(252, 242, 232, 0.55); }
.email-form input[type="email"]:focus { outline: 2px solid var(--marigold); outline-offset: 1px; }
.email-form .btn { flex: 0 0 auto; }
.email-consent { font-size: 0.8rem; color: rgba(252, 242, 232, 0.5); margin-top: 0.9rem; margin-bottom: 0; }
.email-consent a { color: rgba(252, 242, 232, 0.75); }

/* ------------------------------ Footer ---------------------------------- */
.site-footer {
  background: var(--aubergine); color: var(--cream-70);
  padding: clamp(3rem, 6vw, 4.5rem) 0 2.5rem;
}
.site-footer img.logo { height: 40px; margin-bottom: 1.4rem; }
.site-footer .tagline { font-family: var(--serif); font-style: italic; color: var(--cream); font-size: 1.3rem; margin-bottom: 1.6rem; }
.site-footer .payoff { color: var(--marigold); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 18px 28px; margin-bottom: 1.8rem; }
.site-footer nav a { color: var(--cream-70); font-size: 0.95rem; }
.site-footer nav a:hover { color: var(--cream); }
.site-footer .fine { font-size: 0.82rem; color: rgba(252,242,232,0.5); max-width: 70ch; line-height: 1.6; }
.site-footer .fine a { color: rgba(252,242,232,0.7); }

/* --------------------------- Legal pages -------------------------------- */
.legal { padding-top: clamp(2.5rem, 6vw, 4rem); padding-bottom: 4rem; }
.legal .wrap { max-width: 800px; }
.legal h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 0.3rem; }
.legal .updated { color: var(--aubergine-60); font-size: 0.92rem; margin-bottom: 2.4rem; }
.legal h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin-top: 2.4rem; }
.legal p, .legal li { color: var(--aubergine-80); }
.legal ul { padding-left: 1.2rem; }
.legal li { margin-bottom: 0.5rem; }
.legal .back { display: inline-block; margin-bottom: 2rem; font-weight: 600; }
.notice {
  background: var(--cream-soft);
  border-left: 4px solid var(--marigold);
  border-radius: var(--radius-sm);
  padding: 18px 22px; margin: 1.5rem 0;
  font-size: 0.95rem; color: var(--aubergine-80);
}
.notice strong { color: var(--aubergine); }

/* ---------------------------- Utilities --------------------------------- */
.center { text-align: center; }
.center p, .center .lead, .center .checklist { margin-left: auto; margin-right: auto; }
.mt-0 { margin-top: 0; }
.divider-mark { text-align: center; color: var(--magenta); font-family: var(--serif); font-style: italic; font-size: 1.5rem; margin: 0; opacity: 0.8; }

/* --------------------------- Responsive --------------------------------- */
@media (max-width: 860px) {
  .grid.three { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  body { font-size: 17px; }
  .grid.two, .grid.three { grid-template-columns: 1fr; }
  .site-header .wrap {
    flex-wrap: wrap; justify-content: center; row-gap: 10px;
    padding-top: 12px; padding-bottom: 12px;
  }
  .site-header img.logo { height: 40px; }
  .site-nav { flex-wrap: wrap; justify-content: center; width: 100%; gap: 12px 20px; }
  .site-header .nav-cta { padding: 9px 18px; font-size: 0.88rem; white-space: nowrap; }
  .btn { width: 100%; text-align: center; }
  .hero .btn { width: auto; }
  /* more breathing room above the first FAQ-group label ("IS THIS RIGHT FOR ME?"
     etc.) on mobile, where it otherwise sits close under the section heading
     (bumped further Aug 29 after Keri flagged it still felt tight) */
  .faq-group { margin-top: 1.6rem; }
  .faq-group > h3 { padding-bottom: 0.85rem; margin-bottom: 1.3rem; }
}

/* reduce motion */
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}

/* ============================================================
   Illustration system (v2) — riso system marks + grain
   ============================================================ */
.illo-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* hero becomes two columns: copy + illustration */
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}
.hero-illo { position: relative; }
.hero-illo svg { width: 100%; height: auto; max-width: 440px; margin-left: auto; display: block; }

/* system mark above each pillar card */
.pillar-mark { width: 68px; height: 68px; display: block; margin-bottom: 0.5rem; }

/* full-width illustrated divider */
.illo-divider { background: var(--cream); padding: 0.5rem 0; }
.illo-divider svg { display: block; width: 100%; height: 46px; }

/* grain + watermark on the dark signup band */
.section-dark { position: relative; overflow: hidden; }
.section-dark .wrap { position: relative; z-index: 2; }
.grain-overlay {
  position: absolute; inset: 0; pointer-events: none;
  mix-blend-mode: overlay; opacity: 0.4;
  background-image: radial-gradient(rgba(255,255,255,0.5) 0.5px, transparent 0.6px);
  background-size: 3px 3px;
}
.signup-watermark { position: absolute; right: -36px; top: -28px; width: 230px; opacity: 0.14; pointer-events: none; }

@media (max-width: 760px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-illo { order: -1; max-width: 280px; margin: 0 auto; }
}

/* drawn riso spot illustrations (the warm layer) */
.ethos-grid {
  display: grid;
  grid-template-columns: 1fr 0.62fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}
.ethos-illo svg { width: 100%; height: auto; max-width: 300px; margin: 0 auto; display: block; }
.spot-illo { display: block; margin: 0 auto 1.3rem; width: 86px; height: auto; }
@media (max-width: 760px) {
  .ethos-grid { grid-template-columns: 1fr; }
  .ethos-illo { max-width: 230px; margin: 1.5rem auto 0; }
  /* the Lead Educator section reuses .ethos-illo for the two credential badges
     (NTI + NANP) side by side, not a single centered graphic -- the generic 230px
     cap above was narrower than two 120px badges + gap, forcing them to wrap onto
     separate lines. Widen just this combination so they stay side by side. */
  .ethos-illo.ethos-credentials { max-width: 300px; }
}

/* credential badges (NTI + NANP), standing in as the Lead Educator illustration itself
   (promoted here from the v5 draft's own styles once Keri approved the badges over the
   magnifying-glass/notebook illustration, so the live course page can use them too) */
.ethos-credentials { display: flex; justify-content: center; gap: clamp(20px, 4vw, 40px); flex-wrap: wrap; }
.credential-item { display: flex; flex-direction: column; align-items: center; text-align: center; width: 88px; text-decoration: none; }
.credential-item img { width: 68px; height: 68px; object-fit: contain; margin-bottom: 6px; }
.credential-item .cred-label { font-family: var(--sans); font-weight: 600; font-size: 0.7rem; line-height: 1.3; color: var(--aubergine-60); }
.credential-item img.nti-crest { width: 61px; height: 61px; }
.credential-item.large { width: 150px; transition: transform .2s ease; }
.credential-item.large img { width: 140px; height: 140px; margin-bottom: 10px; }
.credential-item.large .cred-label { font-size: 0.82rem; color: var(--aubergine-80); }
.credential-item.large:hover { transform: translateY(-3px); }
@media (max-width: 760px) { .credential-item.large { width: 120px; } .credential-item.large img { width: 110px; height: 110px; } }

/* the NTI crest's art fills more of its own canvas than the NANP mark does of its own
   (measured directly against both source files), so at equal box sizes the crest reads
   larger. Sized down so the drawn marks end up visually equal. */
.credential-item.large img.nti-crest { width: 126px; height: 126px; }
@media (max-width: 760px) { .credential-item.large img.nti-crest { width: 99px; height: 99px; } }