/* ============================================
   Glorious Goddess — dating-goddess.com
   Warm, feminine, editorial. Never corporate.
   ============================================ */

:root {
  --cream: #FAF6F1;
  --white: #FFFFFF;
  --blush: #D4A0A0;
  --burgundy: #7A2E3A;
  --burgundy-dark: #5E202B;
  --gold: #C9A96E;
  --charcoal: #2D2A26;
  --warm-gray: #6B6560;
  --blush-light: #F3E4E4;

  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "DM Sans", -apple-system, "Helvetica Neue", sans-serif;

  --max-width: 1080px;
  --nav-height: 72px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-height) + 16px);
}

body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--charcoal);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ---------- Typography ---------- */

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  color: var(--charcoal);
}

h1 { font-size: clamp(1.9rem, 5.5vw, 2.6rem); }
h2 { font-size: clamp(1.6rem, 4.5vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 3vw, 1.45rem); }

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}

.accent-italic {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--burgundy);
}

.pull-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.25rem, 3.5vw, 1.7rem);
  line-height: 1.45;
  color: var(--burgundy);
  max-width: 34ch;
  margin: 0 auto;
}

/* ---------- Layout ---------- */

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.container--narrow {
  max-width: 720px;
}

section {
  padding: 72px 0;
}

@media (min-width: 768px) {
  section { padding: 104px 0; }
}

.section-header {
  text-align: center;
  margin-bottom: 3rem;
}

/* ---------- Gold divider ornament ---------- */

.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0;
  margin: 0 auto;
}

.divider::before,
.divider::after {
  content: "";
  width: 56px;
  height: 1px;
  background: var(--gold);
  opacity: 0.6;
}

.divider svg {
  flex-shrink: 0;
}

/* ---------- Navigation ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 246, 241, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(201, 169, 110, 0.25);
}

.nav__inner {
  max-width: var(--max-width);
  margin: .8rem auto;
  padding: 0 24px;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.nav__brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  line-height: 0;
}

.nav__logo {
  display: block;
  height: 52px;
  width: auto;
}

.nav__links {
  display: none;
  align-items: center;
  gap: 28px;
  list-style: none;
}

.nav__links a:not(.btn) {
  color: var(--charcoal);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  transition: color 0.2s;
}

.nav__links a:not(.btn):hover,
.nav__links a[aria-current="page"]:not(.btn) {
  color: var(--burgundy);
}

/* "Log in" — for someone who has already bought something.
   Deliberately quieter than the marketing links and set off by a hairline, so
   it reads as utility rather than as another page to browse. It points at
   /dashboard, not /login: a signed-in student lands straight on her courses,
   and anyone else is sent to sign in and then delivered there anyway. */
.nav__links .nav__login {
  color: var(--warm-gray);
  font-size: 0.9rem;
  padding-left: 20px;
  margin-left: 4px;
  border-left: 1px solid rgba(201, 169, 110, 0.4);
}

.nav__links .nav__login:hover { color: var(--burgundy); }

/* In the mobile drawer everything is a full-width row, so the hairline would
   look like a mistake. Keep it quiet with colour alone. */
.nav__mobile .nav__login { color: var(--warm-gray); }

.nav__toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: none;
  border: none;
  cursor: pointer;
}

.nav__toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--charcoal);
  border-radius: 2px;
  transition: transform 0.25s, opacity 0.25s;
}

.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav__mobile {
  display: none;
  flex-direction: column;
  gap: 4px;
  list-style: none;
  padding: 8px 24px 24px;
  background: var(--cream);
  border-bottom: 1px solid rgba(201, 169, 110, 0.25);
}

.nav__mobile.is-open { display: flex; }

.nav__mobile a:not(.btn) {
  display: block;
  padding: 12px 0;
  color: var(--charcoal);
  text-decoration: none;
  font-size: 1.05rem;
  font-weight: 500;
  border-bottom: 1px solid rgba(201, 169, 110, 0.15);
}

.nav__mobile .btn { margin-top: 16px; text-align: center; }

@media (min-width: 860px) {
  .nav__links { display: flex; }
  .nav__toggle { display: none; }
  .nav__mobile { display: none !important; }
  .nav__logo { height: 70px; }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  padding: 14px 32px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}

.btn--primary {
  background: var(--burgundy);
  color: var(--cream);
}

.btn--primary:hover {
  background: var(--burgundy-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(122, 46, 58, 0.25);
}

.btn--nav {
  padding: 10px 22px;
  font-size: 0.9rem;
}

.btn--light {
  background: var(--cream);
  color: var(--burgundy);
}

.btn--light:hover {
  background: var(--white);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(45, 42, 38, 0.18);
}

.btn--ghost {
  background: transparent;
  color: var(--burgundy);
  border: 1.5px solid var(--blush);
}

.btn--ghost:hover {
  border-color: var(--burgundy);
  background: rgba(212, 160, 160, 0.12);
}

/* ---------- Photo placeholders ---------- */
/* Swap each .photo-placeholder for an <img> when photos are ready.
   The data-photo attribute describes the shot needed. */

.photo-placeholder {
  position: relative;
  width: 100%;
  border-radius: 18px;
  background:
    radial-gradient(120% 90% at 20% 15%, rgba(201, 169, 110, 0.35), transparent 60%),
    radial-gradient(110% 100% at 85% 90%, rgba(122, 46, 58, 0.22), transparent 55%),
    linear-gradient(150deg, #EFDFC9 0%, #E4C6B8 45%, #D4A0A0 100%);
  border: 1px solid rgba(201, 169, 110, 0.5);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.photo-placeholder::after {
  content: attr(data-photo);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  color: rgba(94, 32, 43, 0.65);
  padding: 18px 22px;
}

.photo-placeholder--portrait { aspect-ratio: 4 / 5; }
.photo-placeholder--landscape { aspect-ratio: 3 / 2; }
.photo-placeholder--square { aspect-ratio: 1 / 1; }

/* ---------- Hero ---------- */

.hero {
  padding: 56px 0 72px;
  background:
    radial-gradient(90% 70% at 80% 0%, rgba(212, 160, 160, 0.22), transparent 60%),
    var(--cream);
}

.hero__grid {
  display: grid;
  gap: 40px;
  align-items: center;
}

.hero__photo { margin: 0 auto; width: 100%; }

.hero__photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 20%;
  border-radius: 18px;
}

.hero h1 { margin-bottom: 1.25rem; }

.hero__lesson {
  display: block;
  font-style: italic;
  font-weight: 500;
  font-size: 0.72em;
  margin-top: 0.6em;
  color: var(--burgundy);
}

.hero__subline {
  font-size: 1.1rem;
  color: var(--warm-gray);
  margin-bottom: 2rem;
  max-width: 46ch;
}

@media (min-width: 860px) {
  .hero { padding: 62px 0; }
  .hero__grid {
    grid-template-columns: 5fr 6fr;
    gap: 64px;
  }
  .hero__photo { order: 2; }
  .hero__text { order: 1; }
}

/* ---------- Mirror section (The Problem) ---------- */

.mirror {
  background: var(--white);
  text-align: center;
}

.mirror__lines {
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.mirror__lines p {
  font-size: 1.15rem;
  line-height: 1.75;
}

.mirror h2 { margin-bottom: 3rem; }

/* ---------- Story section ---------- */

.story-compressed .container--narrow p {
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
}

.story-compressed h2 { margin-bottom: 2rem; }

.story-compressed .cta-row { margin-top: 2.5rem; }

/* ---------- The Method ---------- */

.method { background: var(--white); }

/* Full-bleed champagne backdrop */

.method--champagne {
  position: relative;
  padding: 88px 0;
  background-color: var(--cream);
  background-image: url("../images/champage-bkg.webp");
  background-size: cover;
  background-position: 68% center;
  background-repeat: no-repeat;
}

/* Softens the photo so the copy stays legible. The middle used to be much
   thinner (0.62) because the text sat inside frosted cards and the photo was
   meant to show between them. The copy is now set straight onto the photo, so
   the veil has to carry the contrast on its own. */
.method--champagne::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(250, 246, 241, 0.88) 0%,
    rgba(250, 246, 241, 0.82) 45%,
    rgba(250, 246, 241, 0.9) 100%
  );
  pointer-events: none;
}

.method--champagne > .container {
  position: relative;
  z-index: 1;
}

/* The photo is very wide, so cover crops it to nothing on narrow screens.
   Show it as a band across the top instead. */
@media (max-width: 700px) {
  .method--champagne {
    background-size: 145% auto;
    background-position: 72% top;
  }

  .method--champagne::before {
    background: linear-gradient(
      180deg,
      rgba(250, 246, 241, 0.5) 0%,
      rgba(250, 246, 241, 0.8) 26%,
      var(--cream) 46%
    );
  }
}

/* ---------- Instagram / social proof ---------- */

.social-proof { text-align: center; }

.reel-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 3rem auto;
  max-width: 720px;
  align-items: start;
}

.reel-grid a {
  display: block;
  text-decoration: none;
  aspect-ratio: 9 / 16;
  border-radius: 14px;
  overflow: hidden;
}

.reel-grid .photo-placeholder--portrait { aspect-ratio: 9 / 16; border-radius: 14px; }

.reel-grid .photo-placeholder::after { font-size: 0.8rem; padding: 12px 14px; }

.reel-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 640px) {
  .reel-grid { grid-template-columns: repeat(4, 1fr); }
}

.social-proof__note {
  max-width: 48ch;
  margin: 0 auto 2rem;
  color: var(--warm-gray);
}

/* ---------- Waitlist CTA section ---------- */

.waitlist {
  background: linear-gradient(160deg, var(--burgundy) 0%, #692735 55%, #5E202B 100%);
  text-align: center;
}

.waitlist h2 { color: var(--cream); }

.waitlist__subline {
  color: rgba(250, 246, 241, 0.85);
  max-width: 52ch;
  margin: 1.25rem auto 2.5rem;
}

.waitlist-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 420px;
  margin: 0 auto;
}

.waitlist-form input {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 15px 22px;
  border-radius: 999px;
  border: 1px solid rgba(250, 246, 241, 0.35);
  background: rgba(250, 246, 241, 0.12);
  color: var(--cream);
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}

.waitlist-form input::placeholder { color: rgba(250, 246, 241, 0.6); }

.waitlist-form input:focus {
  border-color: var(--gold);
  background: rgba(250, 246, 241, 0.18);
}

/* Decoy field for bots — never shown to real visitors */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.waitlist-form .btn--light { margin-top: 4px; }

.waitlist-form .btn[disabled] { opacity: 0.6; cursor: wait; }

.waitlist__fine-print {
  font-size: 0.85rem;
  color: rgba(250, 246, 241, 0.65);
  margin-top: 1.25rem;
}

.waitlist__success {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--cream);
  padding: 24px 0;
}

.waitlist__error {
  font-size: 0.9rem;
  color: #F3C9C9;
  margin-top: 0.75rem;
  min-height: 1.4em;
}

/* Light variant (course page inline form) */
.waitlist--light {
  background: var(--blush-light);
}
.waitlist--light h2 { color: var(--charcoal); }
.waitlist--light .waitlist__subline { color: var(--warm-gray); }
.waitlist--light .waitlist-form input {
  background: var(--white);
  border: 1px solid rgba(201, 169, 110, 0.5);
  color: var(--charcoal);
}
.waitlist--light .waitlist-form input::placeholder { color: var(--warm-gray); }
.waitlist--light .waitlist__fine-print { color: var(--warm-gray); }
.waitlist--light .waitlist__success { color: var(--burgundy); }
.waitlist--light .waitlist__error { color: var(--burgundy); }

/* ---------- Footer ---------- */

.footer {
  background: var(--charcoal);
  color: rgba(250, 246, 241, 0.75);
  padding: 56px 0 40px;
  font-size: 0.95rem;
}

.footer__inner {
  display: flex;
  flex-direction: column;
  gap: 28px;
  text-align: center;
  align-items: center;
}

.footer__brand {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--cream);
  text-decoration: none;
}

.footer nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.footer nav a {
  color: rgba(250, 246, 241, 0.75);
  text-decoration: none;
}

.footer nav a:hover { color: var(--gold); }

.footer__social {
  display: flex;
  gap: 18px;
  justify-content: center;
}

.footer__social a {
  color: rgba(250, 246, 241, 0.75);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.footer__social a:hover { color: var(--gold); }

.footer__social svg { width: 20px; height: 20px; fill: currentColor; }

.footer__legal {
  font-size: 0.85rem;
  color: rgba(250, 246, 241, 0.5);
  line-height: 2;
}

/* ---------- Inner pages ---------- */

.page-hero {
  padding: 64px 0 48px;
  text-align: center;
  background:
    radial-gradient(80% 90% at 50% 0%, rgba(212, 160, 160, 0.18), transparent 65%),
    var(--cream);
}

.page-hero h1 { max-width: 22ch; margin: 0 auto 1.25rem; }

.page-hero .page-hero__subline {
  color: var(--warm-gray);
  font-size: 1.15rem;
  max-width: 52ch;
  margin: 0 auto 1rem;
}

.page-hero .cta-row { margin-top: 2rem; }

.page-hero__photo {
  max-width: min(100%, 300px);
  margin: 0 auto 2.5rem;
}

.page-hero__photo img {
  width: 100%;
  height: auto;
  border-radius: 18px;
}

/* Split hero: photo + text side by side on desktop, stacked on mobile */

.page-hero--split { text-align: center; }

.page-hero--split .page-hero__grid {
  display: grid;
  gap: 32px;
  align-items: center;
}

.page-hero--split .page-hero__photo {
  max-width: min(100%, 320px);
  margin: 0 auto;
}

.page-hero--split .page-hero__text { text-align: center; }

@media (min-width: 860px) {
  .page-hero--split .page-hero__grid {
    grid-template-columns: 5fr 6fr;
    gap: 56px;
    text-align: left;
  }
  .page-hero--split .page-hero__photo {
    max-width: 100%;
    margin: 0;
  }
  .page-hero--split .page-hero__text { text-align: left; }
  .page-hero--split h1,
  .page-hero--split .page-hero__subline {
    margin-left: 0;
    margin-right: 0;
  }
  .page-hero--split .cta-row { justify-content: flex-start; }
}

/* Story page narrative */

.narrative p {
  margin-bottom: 1.6rem;
  font-size: 1.1rem;
}

.narrative .pull-quote {
  display: block;
  margin: 3rem auto;
  text-align: center;
}

.narrative .divider { margin: 3.5rem auto; }

/* Checklist blocks ("this is for you if...") */

.check-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.check-list li {
  position: relative;
  padding-left: 38px;
  font-size: 1.05rem;
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--blush-light);
  border: 1px solid var(--blush);
}

.check-list li::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 10px;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--burgundy);
  border-bottom: 2px solid var(--burgundy);
  transform: rotate(-45deg);
}

/* Two-column info blocks */

.info-block { margin-bottom: 3.5rem; }
.info-block h2 { margin-bottom: 1.5rem; }
.info-block p { margin-bottom: 1.25rem; }

/* Bio card */

.bio-card {
  display: grid;
  gap: 28px;
  background: var(--white);
  border: 1px solid rgba(201, 169, 110, 0.35);
  border-radius: 18px;
  padding: 32px;
  align-items: center;
}

.bio-card .photo-placeholder { max-width: 260px; margin: 0 auto; }

.bio-card__photo {
  width: 100%;
  max-width: 260px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 18px;
  margin: 0 auto;
}

@media (min-width: 700px) {
  .bio-card { grid-template-columns: 260px 1fr; }
}

.bio-card h3 { margin-bottom: 0.75rem; }
.bio-card p { color: var(--warm-gray); margin-bottom: 0.75rem; font-size: 1rem; }

/* Price card (Work With Me) */

.price-card {
  background: var(--white);
  border: 1px solid rgba(201, 169, 110, 0.4);
  border-radius: 18px;
  padding: 44px 32px;
  text-align: center;
  max-width: 440px;
  margin: 0 auto;
}

.price-card__price {
  font-family: var(--font-display);
  font-size: 3rem;
  color: var(--burgundy);
  line-height: 1;
}

.price-card__per {
  color: var(--warm-gray);
  font-size: 0.95rem;
  margin: 0.5rem 0 1.75rem;
}

.price-card .btn { width: 100%; }

.price-card__note {
  font-size: 0.9rem;
  color: var(--warm-gray);
  margin-top: 1.25rem;
}

.price-card__note a { color: var(--burgundy); }

/* Contact page */

.contact-options {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 480px;
  margin: 0 auto;
}

.contact-card {
  background: var(--white);
  border: 1px solid rgba(201, 169, 110, 0.35);
  border-radius: 18px;
  padding: 28px 30px;
  text-decoration: none;
  color: var(--charcoal);
  display: flex;
  align-items: center;
  gap: 20px;
  transition: transform 0.15s, box-shadow 0.2s;
}

.contact-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(45, 42, 38, 0.08);
}

.contact-card svg {
  width: 28px;
  height: 28px;
  fill: var(--burgundy);
  flex-shrink: 0;
}

.contact-card h3 { font-size: 1.15rem; margin-bottom: 0.25rem; }
.contact-card p { color: var(--warm-gray); font-size: 0.95rem; }

/* ---------- Utility ---------- */

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

.cta-row--left { justify-content: flex-start; }

.text-center { text-align: center; }

.mt-3 { margin-top: 3rem; }

/* ============================================
   Home v2 — sales page additions
   ============================================ */

/* ---------- Hero photo caption overlay ---------- */

.hero__photo { position: relative; }

.photo-placeholder--hero { align-items: flex-start; }

.hero__photo-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 44px 24px 22px;
  background: linear-gradient(to top, rgba(45, 42, 38, 0.75), rgba(45, 42, 38, 0));
  border-radius: 0 0 18px 18px;
  text-align: left;
}

.hero__photo-caption strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--cream);
}

.hero__photo-caption span {
  display: block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: rgba(250, 246, 241, 0.85);
  margin-top: 5px;
}

/* ---------- Full-bleed photo hero ---------- */

.hero--photo {
  position: relative;
  padding: 0;
  /* One screen on mobile: her face fills the top, the name card and the button
     sit at the bottom and are visible without scrolling. This used to be 124vh
     to fit a headline and two paragraphs; with just the card, that pushed the
     call to action clean off the screen.
     The nav is sticky above the hero, so a plain 100svh would start below it
     and hang the same distance off the bottom — subtract it. svh rather than vh
     so mobile browsers' collapsing address bar doesn't do the same thing. */
  min-height: calc(100svh - 92px);
  display: flex;
  align-items: flex-end; /* mobile: text sits at the bottom, below her face */
  overflow: hidden;
  background: var(--charcoal);
}

/* One cohesive full-bleed image on every screen */
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 5%; /* mobile: Maria's face framed near the top */
}

.hero__scrim {
  position: absolute;
  inset: 0;
  /* Mobile: darken the lower portion for the text; keep her face (top) clear */
  background: linear-gradient(
    to top,
    rgba(45, 42, 38, 0.92) 0%,
    rgba(45, 42, 38, 0.86) 32%,
    rgba(45, 42, 38, 0.55) 52%,
    rgba(45, 42, 38, 0.18) 66%,
    rgba(45, 42, 38, 0) 82%
  );
  pointer-events: none;
}

.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: 30px;
  padding-bottom: 44px;
}

.hero--photo .hero__text { max-width: 640px; }

.hero--photo h1 { color: var(--cream); }

.hero--photo .hero__subline {
  color: rgba(250, 246, 241, 0.9);
}

/* The hero statement: Maria's name and what she does, on a frosted card over
   the photo. This was a small caption pinned to a corner; it's now the h1 and
   carries the page on its own, so it sits in the normal content flow and the
   type is scaled up to match. The frosted panel is what makes it readable over
   a photograph that changes brightness as it crops. */
.hero__badge {
  display: inline-block;
  margin: 0 0 1.75rem;
  padding: 22px 28px;
  border-radius: 14px;
  background: rgb(142 139 135 / 55%);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  text-align: left;
  color: var(--cream);
  /* h1 sets a large clamp; the children below define their own sizes, so
     neutralise it here rather than letting it cascade into the spans. */
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
}

.hero__badge strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 3.1rem);
  font-weight: 600;
  line-height: 1.1;
  margin-bottom: 0.5rem;
  color: var(--cream);
}

.hero__badge span {
  display: block;
  /* The h1 sets the display serif; the credentials want the body sans against
     it, or the whole card reads as one undifferentiated block of serif. */
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 2.2vw, 1.1rem);
  letter-spacing: 0.02em;
  line-height: 1.55;
  color: rgba(250, 246, 241, 0.92);
}

/* The one-line story under the name card: the first sentence a new visitor
   reads, so it's set larger than body text and sits directly on the photo. */
.hero__story {
  margin: 0 0 1.5rem;
  max-width: 520px;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3.4vw, 1.6rem);
  line-height: 1.35;
  color: var(--cream);
  text-shadow: 0 1px 12px rgba(45, 42, 38, 0.45);
}

.hero--photo .cta-row { gap: 12px; }

/* Secondary button reads as light over the photo */
.hero--photo .btn--ghost {
  border-color: rgba(250, 246, 241, 0.55);
  color: var(--cream);
}

.hero--photo .btn--ghost:hover {
  border-color: var(--cream);
  background: rgba(250, 246, 241, 0.12);
}

/* Wide screens only: cinematic side-by-side overlay — text on the left,
   Maria clear on the right, credential caption in the bottom-right beneath her.
   Below 900px the photo crops too square for this, so those sizes keep the
   mobile layout (face up top, text over the darkened bottom). */
@media (min-width: 900px) {
  .hero--photo {
    align-items: center;
    min-height: min(800px, 90vh);
  }

  .hero__bg { object-position: 85% center; }

  .hero__scrim {
    background: linear-gradient(
      90deg,
      rgba(45, 42, 38, 0.82) 0%,
      rgba(45, 42, 38, 0.55) 28%,
      rgba(45, 42, 38, 0.12) 50%,
      rgba(45, 42, 38, 0) 66%
    );
  }

  .hero__content {
    padding-top: 0;
    padding-bottom: 0;
  }

  /* Wide enough for the name to sit on one line without crowding Maria. */
  .hero--photo .hero__text { max-width: 560px; }
}

/* ---------- Word ribbon (marquee) ---------- */

.marquee {
  background: var(--blush-light);
  border-top: 1px solid rgba(201, 169, 110, 0.3);
  border-bottom: 1px solid rgba(201, 169, 110, 0.3);
  overflow: hidden;
  padding: 20px 0;
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 38s linear infinite;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

.marquee__group {
  display: flex;
  flex-shrink: 0;
}

.marquee__group span {
  font-family: var(--font-body);
  /* font-weight: 700; */
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: clamp(0.95rem, 2vw, 1.3rem);
  color: var(--charcoal);
  white-space: nowrap;
}

/* Gold sparkle separator between words */
.marquee__group span::after {
  content: "✦";
  display: inline-block;
  margin: 0 clamp(1.2rem, 3.6vw, 2.6rem);
  color: var(--gold);
  font-size: 0.62em;
  font-weight: 400;
  vertical-align: 0.18em;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* ---------- "Put yourself out there" section ---------- */
/*
 * A run of plain paragraphs that ends on a one-line punch. Bare <p> has no
 * spacing anywhere on this site — paragraph rhythm always comes from a
 * component — so any section of straight prose needs this.
 *
 * It carries no background of its own, so it can sit on the champagne photo
 * (course page) or on flat cream (AI Goddess) without dragging one along.
 * The last paragraph is styled as the closer, because in this copy it always
 * is one: "And you need someone who's been exactly where you are",
 * "That's what this call is for."
 */

.prose-block__title {
  text-align: center;
  max-width: 20ch;
  margin: 0 auto 2.5rem;
}

.prose-block__body p {
  font-size: 1.12rem;
  margin-bottom: 1.5rem;
}

.prose-block__body .pull-quote {
  margin: 2rem auto 2.25rem;
}

.prose-block__body p:last-child {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--burgundy);
  margin-top: 2rem;
  font-weight: 600;
}

/* ---------- Become section ---------- */

.become {
  background: var(--blush-light);
  padding: 0;
  overflow: hidden;
}

.become__layout {
  display: grid;
  grid-template-columns: 1fr;
}

.become__content {
  padding: 72px 24px;
  text-align: center;
}

.become__body {
  max-width: 620px;
  margin: 0 auto;
}

.become__body p {
  font-size: 1.15rem;
  margin-bottom: 1.5rem;
}

.become__body .lead {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.4rem, 3.5vw, 1.9rem);
  line-height: 1.4;
  color: var(--burgundy);
  margin-bottom: 2rem;
}

.become .cta-row { margin-top: 2.5rem; }

.become__media {
  margin: 0;
  position: relative;
  min-height: clamp(280px, 55vw, 420px);
  overflow: hidden;
}

.become__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
}

@media (min-width: 768px) {
  .become__content { padding: 104px 48px; }
}

@media (min-width: 900px) {
  .become__layout {
    grid-template-columns: 1fr clamp(340px, 44vw, 560px);
    min-height: min(680px, 82vh);
    align-items: stretch;
  }

  .become__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    padding: 104px clamp(24px, 4vw, 56px);
    padding-left: max(24px, calc((100vw - var(--max-width)) / 2 + 24px));
    max-width: 640px;
  }

  .become__body {
    margin: 0;
    max-width: none;
  }

  .become .cta-row { justify-content: flex-start; }

  .become__media {
    min-height: 100%;
  }

  .become__media img {
    position: absolute;
    inset: 0;
  }
}

/* ---------- Offers (Two ways to work with me) ---------- */

.offers { background: var(--cream); }

.offer-grid {
  display: grid;
  gap: 24px;
  margin-top: 3rem;
}

@media (min-width: 768px) {
  .offer-grid { grid-template-columns: 1fr 1fr; }
}

.offer-card {
  background: var(--white);
  border: 1px solid rgba(201, 169, 110, 0.4);
  border-radius: 18px;
  padding: 40px 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
}

.offer-card--feature {
  border-color: var(--gold);
  box-shadow: 0 10px 30px rgba(122, 46, 58, 0.08);
}

.offer-card__price {
  font-family: var(--font-display);
  font-size: 2.6rem;
  color: var(--burgundy);
  line-height: 1;
  margin: 0.35rem 0 0.25rem;
}

.offer-card__per {
  color: var(--warm-gray);
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}

.offer-card__desc {
  color: var(--warm-gray);
  font-size: 1rem;
  margin-bottom: 2rem;
}

.offer-card .btn {
  margin-top: auto;
  width: 100%;
}

/* ---------- Offer cards led by artwork ---------- */
/*
 * Scoped to .offer-grid--art because course.html still uses the plain text
 * cards above, and these change the padding model completely: the artwork runs
 * edge to edge, so the padding lives on the body instead of the card.
 *
 * Each image is a finished promo graphic — title, bullets, tagline, sometimes
 * the price — so the text underneath deliberately doesn't repeat any of it.
 */

.offer-grid--art {
  gap: 28px;
}

/* Two across only from 900px. At 768 these squares get small enough that the
   type inside the artwork stops being readable, which defeats the point. */
@media (min-width: 768px) and (max-width: 899px) {
  .offer-grid--art { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
}

.offer-grid--art .offer-card {
  padding: 0;
  overflow: hidden;
  text-align: left;
  transition: transform 0.18s, box-shadow 0.18s;
}

.offer-grid--art .offer-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(45, 42, 38, 0.1);
}

.offer-card__art {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.offer-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 24px 26px 26px;
}

/* Can she buy this today, or not? The single most useful thing the picture
   can't tell her. */
.offer-card__status {
  align-self: flex-start;
  margin-bottom: 0.85rem;
  padding: 5px 13px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--burgundy);
  background: var(--blush-light);
  border: 1px solid rgba(212, 160, 160, 0.6);
}

.offer-card__status--soon {
  color: #8a6d2f;
  background: rgba(201, 169, 110, 0.16);
  border-color: rgba(201, 169, 110, 0.5);
}

.offer-grid--art .offer-card__desc {
  margin-bottom: 1.5rem;
  font-size: 0.98rem;
  line-height: 1.65;
}

/* Cards with no button — Red Flags, until it launches — shouldn't leave a gap
   where one would be. */
.offer-grid--art .offer-card__desc:last-child {
  margin-bottom: 0;
  margin-top: auto;
}

/* The free guide: full width, text only, warm background. */
.offer-grid--art .offer-card--guide {
  grid-column: 1 / -1;
  background: var(--blush-light);
  border-color: rgba(212, 160, 160, 0.6);
}

.offer-card--guide .offer-card__body {
  padding: 30px 30px 32px;
}

.offer-card__title {
  font-size: clamp(1.5rem, 4vw, 1.9rem);
  margin-bottom: 0.6rem;
  color: var(--burgundy);
}

@media (min-width: 900px) {
  .offer-card--guide .btn { align-self: flex-start; width: auto; }
}

/* ---------- Testimonials carousel ---------- */

.testimonials { background: var(--white); }

.carousel {
  position: relative;
  max-width: 780px;
  margin: 3rem auto 0;
}

.carousel__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.carousel__track::-webkit-scrollbar { display: none; }

.testimonial {
  min-width: 100%;
  box-sizing: border-box;
  scroll-snap-align: center;
  padding: 0 12px;
  margin: 0;
}

.testimonial::before {
  content: "\201C";
  display: block;
  font-family: var(--font-display);
  font-size: 3.5rem;
  line-height: 0.6;
  color: var(--gold);
  text-align: center;
  margin-bottom: 1.25rem;
}

.testimonial p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.15rem, 2.6vw, 1rem);
  line-height: 1.55;
  color: var(--charcoal);
  text-align: center;
  max-width: 40ch;
  margin: 0 auto;
}

.carousel__arrow {
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--blush);
  background: var(--cream);
  color: var(--burgundy);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s;
}

.carousel__arrow:hover {
  background: var(--white);
  border-color: var(--burgundy);
}

.carousel__arrow--prev { left: -10px; }
.carousel__arrow--next { right: -10px; }

@media (min-width: 820px) {
  .carousel__arrow { display: flex; }
}

.carousel__dots {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 28px;
}

.carousel__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(201, 169, 110, 0.45);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

.carousel__dot[aria-current="true"] {
  background: var(--burgundy);
  transform: scale(1.15);
}

/* ---------- Footer legal links ---------- */

.footer__legal-links {
  display: flex;
  gap: 20px;
  justify-content: center;
}

.footer__legal-links a {
  color: rgba(250, 246, 241, 0.6);
  text-decoration: none;
  font-size: 0.85rem;
}

.footer__legal-links a:hover { color: var(--gold); }

/* ============================================
   Consultations page
   ============================================ */

.hero--plain { background: var(--white); }

.badge {
  display: inline-block;
  background: rgba(201, 169, 110, 0.16);
  color: #8A6D2F;
  border: 1px solid rgba(201, 169, 110, 0.5);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 1.25rem;
}

.price-display {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0.5rem 0 2rem;
}

.price-display__now {
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: 1;
  color: var(--burgundy);
}

.price-display__was {
  font-size: 0.95rem;
  color: var(--warm-gray);
}

.price-display__was s { color: var(--warm-gray); }

.hero__reassurance {
  font-size: 0.85rem;
  color: var(--warm-gray);
  margin-top: 1rem;
}

/* "For the woman who…" */

.for-her { background: var(--cream); }

.for-her h2 { text-align: center; margin-bottom: 3rem; }

.for-her .check-list { max-width: 640px; margin: 0 auto; }

.for-her .check-list li { font-size: 1.1rem; line-height: 1.6; }

.for-her .cta-row { margin-top: 3rem; }

/* Full-bleed cozy backdrop */

.for-her--cozy {
  position: relative;
  padding: 88px 0;
  background-color: var(--cream);
  background-image: url("../images/cozy-bkg.webp");
  background-size: cover;
  background-position: 74% center;
  background-repeat: no-repeat;
}

/* Softens the photo so the heading and list stay legible */
.for-her--cozy::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(250, 246, 241, 0.86) 0%,
    rgba(250, 246, 241, 0.6) 45%,
    rgba(250, 246, 241, 0.88) 100%
  );
  pointer-events: none;
}

.for-her--cozy > .container {
  position: relative;
  z-index: 1;
}

/* The list has no cards of its own, so it gets a frosted panel */
.for-her--cozy .check-list {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(201, 169, 110, 0.5);
  border-radius: 18px;
  padding: 36px 32px;
  box-shadow: 0 10px 30px rgba(45, 42, 38, 0.06);
}

/* The photo is very wide, so cover crops it to nothing on narrow screens.
   Show it as a band across the top instead. */
@media (max-width: 700px) {
  .for-her--cozy {
    background-size: 145% auto;
    background-position: 74% top;
  }

  .for-her--cozy::before {
    background: linear-gradient(
      180deg,
      rgba(250, 246, 241, 0.5) 0%,
      rgba(250, 246, 241, 0.8) 26%,
      var(--cream) 46%
    );
  }

  .for-her--cozy .check-list { padding: 28px 22px; }
}

/* FAQ accordion */

.faq-section { background: var(--white); }

.faq {
  max-width: 720px;
  margin: 3rem auto 0;
}

.faq__item {
  border-bottom: 1px solid rgba(201, 169, 110, 0.3);
}

.faq__item:first-child {
  border-top: 1px solid rgba(201, 169, 110, 0.3);
}

.faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 24px 0;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.5vw, 1.3rem);
  color: var(--charcoal);
}

.faq__item summary::-webkit-details-marker { display: none; }

.faq__item summary::after {
  content: "+";
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: 1.7rem;
  line-height: 1;
  color: var(--gold);
}

.faq__item[open] summary::after { content: "\2013"; }

.faq__item p {
  margin: 0;
  padding: 0 0 26px;
  color: var(--warm-gray);
  font-size: 1.05rem;
  max-width: 62ch;
}

/* Not ready? secondary CTA band */

.not-ready {
  background: var(--blush-light);
  text-align: center;
}

.not-ready p {
  max-width: 52ch;
  margin: 1rem auto 2rem;
  color: var(--charcoal);
  font-size: 1.1rem;
}

.not-ready strong { color: var(--burgundy); }

/* Home offer card — regular (struck-through) price */

.offer-card__was {
  font-family: var(--font-body);
  font-size: 1.15rem;
  color: var(--warm-gray);
  text-decoration: line-through;
  margin-left: 6px;
  vertical-align: middle;
}

/* ============================================
   My Story page
   ============================================ */

/* Section heading inside the narrative */
.story-heading {
  text-align: center;
  margin: 0 0 2.5rem;
}

.story-heading .eyebrow { margin-bottom: 0.75rem; }

/* Spoken / accented quote block (God's voice, the cardiologist) */
.story-quote {
  margin: 2.75rem 0;
  padding: 26px 32px;
  background: var(--blush-light);
  border-left: 4px solid var(--gold);
  border-radius: 0 14px 14px 0;
}

.story-quote p {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.2rem, 2.8vw, 1.5rem);
  line-height: 1.5;
  color: var(--burgundy);
}

.story-quote cite {
  display: block;
  margin-top: 14px;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--warm-gray);
}

/* Signed sign-off */
.signature {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--burgundy);
  margin-top: 2rem;
}

.signature__name {
  font-size: 2.1rem;
  display: inline-block;
  margin-top: 0.25rem;
}

/* Mid-story photo */
.narrative .story-photo {
  margin: 3.5rem auto;
}

.narrative .story-photo img {
  width: 100%;
  height: auto;
  border-radius: 18px;
}

.narrative .cta-row { margin-top: 2.5rem; }

/* ============================================
   Course page — sales additions
   ============================================ */

/* A note from Maria */
.note-from-me {
  font-size: 1.2rem;
  line-height: 1.75;
  color: var(--charcoal);
  max-width: 42ch;
  margin: 0 auto;
}

/* Modules / curriculum */
.module-list {
  max-width: 720px;
  margin: 3rem auto 0;
}

.module {
  display: flex;
  gap: 22px;
  align-items: baseline;
  padding: 22px 4px;
  border-bottom: 1px solid rgba(201, 169, 110, 0.3);
}

.module:first-child { border-top: 1px solid rgba(201, 169, 110, 0.3); }

.module__num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--gold);
  flex-shrink: 0;
  width: 2.2rem;
}

.module__title {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.5vw, 1.3rem);
  color: var(--charcoal);
}

/* You also get — bonus box */
.bonus-box {
  max-width: 720px;
  margin: 2.75rem auto 0;
  background: var(--blush-light);
  border: 1px solid rgba(201, 169, 110, 0.45);
  border-radius: 18px;
  padding: 32px 34px;
}

.bonus-box h3 {
  text-align: center;
  margin-bottom: 1.5rem;
}

.bonus-box .check-list { max-width: 460px; margin: 0 auto; }

/* Investment / Enroll band */
.enroll {
  background: linear-gradient(160deg, var(--burgundy) 0%, #692735 55%, #5E202B 100%);
  text-align: center;
}

.enroll h2 { color: var(--cream); }

.enroll__price {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 8vw, 3.6rem);
  line-height: 1;
  color: var(--cream);
  margin: 0.75rem 0 0.4rem;
}

.enroll__terms {
  color: rgba(250, 246, 241, 0.92);
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  margin-bottom: 1.75rem;
}

.enroll__context {
  color: rgba(250, 246, 241, 0.82);
  max-width: 54ch;
  margin: 0 auto 2rem;
  font-size: 1rem;
  line-height: 1.7;
}

.enroll .btn--light { font-size: 1.05rem; padding: 16px 40px; }

/* ---------- My Story: free guide box ---------- */

.story-guide {
  margin-top: 2.5rem;
  padding: 26px 28px;
  border-radius: 16px;
  background: var(--blush-light);
  border: 1px solid rgba(212, 160, 160, 0.6);
}

.story-guide .eyebrow { margin-bottom: 0.5rem; }
.story-guide p { margin-bottom: 1.1rem; }