/* ==========================================================
   The Monthly 3-Day Reset — Dr. Katie Deming, MD
   Brand: Katie Deming Brand Style Guide (2024)
   ========================================================== */
:root{
  --navy:#132A49;
  --navy-deep:#0d1f37;
  --red:#CC2027;
  --coral:#F47E63;
  --tan:#D2B48C;
  --cream:#F5E0CB;
  --cream-soft:#FFFFFF;
  --ink:#132A49;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Montserrat',sans-serif;
  color:var(--ink);
  background:var(--cream-soft);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:'Fahkwang',serif;font-weight:400;line-height:1.15;color:var(--navy)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1140px;margin:0 auto;padding:0 24px}
.eyebrow{
  font-family:'Montserrat',sans-serif;font-weight:600;
  letter-spacing:.28em;text-transform:uppercase;font-size:.72rem;
  color:var(--red);margin-bottom:18px;
}
.eyebrow.light{color:var(--coral)}
.btn{
  display:inline-block;background:var(--red);color:#fff;
  font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:.82rem;
  padding:16px 34px;border-radius:40px;transition:.25s;border:2px solid var(--red);cursor:pointer;
}
.btn:hover{background:var(--navy);border-color:var(--navy);transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn.ghost:hover{background:var(--navy);color:#fff}
.btn.coral{background:var(--coral);border-color:var(--coral);color:var(--navy)}
.btn.coral:hover{background:var(--navy);border-color:var(--navy);color:#fff}

/* NAV */
header.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid rgba(19,42,73,.08)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:12px;font-family:'Fahkwang',serif;font-size:1.15rem;color:var(--navy);letter-spacing:.04em}
.brand-icon{height:42px;width:auto;flex:none}
.brand-text{display:block}
.brand-text span{display:block;font-family:'Montserrat',sans-serif;font-size:.6rem;letter-spacing:.25em;color:var(--coral);text-transform:uppercase;margin-top:2px}
.nav-links{display:flex;align-items:center;gap:34px}
.nav-links a{font-size:.82rem;font-weight:500;letter-spacing:.04em;color:var(--navy);transition:.2s}
.nav-links a:hover{color:var(--red)}
.nav-links .btn{padding:11px 24px;font-size:.72rem;color:#fff}
.nav-links .btn:hover{color:#fff}
.nav-toggle{display:none;background:none;border:0;font-size:1.5rem;color:var(--navy);cursor:pointer}

/* HERO */
.hero{background:var(--navy);color:var(--cream);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,rgba(244,126,99,.18),transparent 45%);pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center;padding:84px 0 88px}
.hero h1{color:#fff;font-size:3.4rem;font-weight:400;margin-bottom:22px}
.hero h1 em{font-style:italic;color:var(--coral)}
.hero p.lead{font-size:1.18rem;color:rgba(245,224,203,.9);max-width:520px;margin-bottom:34px;font-weight:300}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.hero-photo{border-radius:18px;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.35);border:4px solid rgba(245,224,203,.15)}
.hero-tag{font-size:1.05rem;letter-spacing:.04em;color:rgba(245,224,203,.85);margin-top:18px}
.hero-tag b{color:var(--coral);font-weight:600}

/* SECTION BASICS */
section{padding:88px 0}
.section-head{max-width:720px;margin:0 auto 56px;text-align:center}
.section-head h2{font-size:2.5rem;margin-bottom:18px;font-weight:400}
.section-head p{font-size:1.08rem;color:var(--navy)}
.tan-divider{width:60px;height:3px;background:var(--coral);margin:0 auto 26px;border-radius:3px}

/* INTRO */
.intro{background:var(--cream-soft)}
.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.intro-photo{border-radius:16px;overflow:hidden;box-shadow:0 18px 40px rgba(19,42,73,.16)}
.intro h2{font-size:2.1rem;margin-bottom:20px;font-weight:400}
.intro p{margin-bottom:16px;color:var(--navy)}
.pull-quote{
  font-family:'Fahkwang',serif;font-size:1.12rem;line-height:1.6;color:var(--navy);
  border-left:4px solid var(--coral);padding:6px 0 6px 20px;margin-top:24px;font-style:italic;
}
.pull-quote span{display:block;font-family:'Montserrat',sans-serif;font-size:.78rem;font-style:normal;
  letter-spacing:.14em;text-transform:uppercase;color:var(--coral);margin-top:10px;font-weight:600}

/* BENEFITS */
.benefits{background:#fff}
.benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.benefit-card{
  background:var(--cream-soft);border-radius:16px;padding:32px 28px;
  border:1px solid rgba(19,42,73,.07);transition:.25s;position:relative;overflow:hidden;
}
.benefit-card:hover{transform:translateY(-4px);box-shadow:0 22px 44px rgba(19,42,73,.12)}
.benefit-card::before{content:"";position:absolute;top:0;left:0;width:100%;height:5px;background:var(--coral)}
.benefit-card h3{font-size:1.25rem;margin-bottom:12px;font-weight:400}
.benefit-card p{font-size:.94rem;color:var(--navy)}

/* TIMELINE */
.timeline{background:var(--navy);color:var(--cream)}
.timeline .section-head h2{color:#fff}
.timeline .section-head p{color:rgba(245,224,203,.82)}
.tl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.tl-card{background:rgba(255,255,255,.05);border:1px solid rgba(245,224,203,.14);border-radius:14px;padding:26px 22px}
.tl-card h4{color:var(--coral);font-size:1.05rem;margin-bottom:4px;font-weight:400}
.tl-day{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tan);margin-bottom:14px}
.tl-card p{font-size:.86rem;color:rgba(245,224,203,.86)}

/* HOW IT WORKS */
.how{background:var(--cream)}
.how-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.how-card{
  background:#fff;border-radius:16px;padding:34px 32px;
  border:1px solid rgba(19,42,73,.08);box-shadow:0 8px 24px rgba(19,42,73,.06);
}
.how-num{font-family:'Fahkwang',serif;font-size:.95rem;color:var(--coral);letter-spacing:.12em;margin-bottom:10px;font-weight:600}
.how-card h3{font-size:1.35rem;margin-bottom:10px;font-weight:400}
.how-card p{font-size:.95rem;color:var(--navy)}

/* NEXT FAST (monthly) */
.next{background:var(--red);color:#fff}
.next .section-head h2{color:#fff}
.next .section-head p{color:rgba(255,255,255,.85)}
.next-card{
  background:#fff;border-radius:20px;overflow:hidden;max-width:980px;margin:0 auto;
  display:grid;grid-template-columns:1.25fr .75fr;box-shadow:0 30px 70px rgba(0,0,0,.3);
}
.next-main{padding:46px 44px}
.next-theme-label{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--red);font-weight:400;margin-bottom:8px}
.next-theme{font-family:'Fahkwang',serif;font-size:2.2rem;font-weight:400;color:var(--navy);line-height:1.15;margin-bottom:6px}
.next-dates{font-family:'Fahkwang',serif;font-size:1.25rem;color:var(--coral);margin-bottom:18px}
.next-desc{color:var(--navy);font-size:1rem;margin-bottom:28px}
.next-cta .btn{font-size:.8rem}
.next-side{background:var(--cream-soft);padding:46px 36px;border-left:1px solid rgba(19,42,73,.08)}
.next-side h4{font-size:1.05rem;margin-bottom:18px;font-weight:400;letter-spacing:.02em}
.call-list{display:grid;gap:12px}
.call-item{background:#fff;border:1px solid rgba(19,42,73,.08);border-radius:12px;padding:12px 16px}
.call-item .cl{font-weight:600;font-size:.85rem;color:var(--navy)}
.call-item .cw{font-size:.78rem;color:var(--navy)}

/* UPCOMING DATES */
.dates{background:var(--cream)}
.date-list{display:grid;gap:12px}
.date-pill{display:flex;align-items:center;justify-content:center;text-align:center;gap:14px;background:#fff;border-radius:12px;padding:15px 22px;border:1px solid rgba(19,42,73,.08);box-shadow:0 4px 14px rgba(19,42,73,.05)}
.date-pill .d{font-family:'Fahkwang',serif;font-size:1.15rem;color:var(--navy)}
.date-pill .len{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--coral);font-weight:600;text-align:right}

/* ABOUT */
.about{background:#fff}
.about-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:54px;align-items:center}
.about-photo{border-radius:16px;overflow:hidden;box-shadow:0 20px 44px rgba(19,42,73,.18)}
.about h2{font-size:2.4rem;margin-bottom:8px;font-weight:400}
.about .credential{font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--red);font-weight:600;margin-bottom:22px}
.about p{margin-bottom:16px;color:var(--navy)}
.cred-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.cred-list span{background:var(--cream-soft);border:1px solid rgba(19,42,73,.1);border-radius:30px;padding:8px 18px;font-size:.8rem;color:var(--navy);font-weight:500}

/* SAFETY */
.safety{background:var(--cream-soft)}
.safety-card{background:#fff;border-radius:16px;padding:42px;border-left:6px solid var(--coral);box-shadow:0 14px 36px rgba(19,42,73,.08);max-width:920px;margin:0 auto}
.safety-card h3{font-size:1.5rem;margin-bottom:14px;font-weight:400}
.safety-card p{color:var(--navy);margin-bottom:16px;font-size:.96rem}
.safety-card ul{margin:0 0 4px 0;padding-left:20px;color:var(--navy);font-size:.94rem}
.safety-card li{margin-bottom:7px}
.disclaimer{margin-top:22px;font-size:.82rem;color:var(--navy);font-style:italic;border-top:1px solid rgba(19,42,73,.1);padding-top:18px}

/* FINAL CTA */
.final{background:var(--navy);color:var(--cream);text-align:center}
.final h2{color:#fff;font-size:2.7rem;margin-bottom:18px;font-weight:400}
.final p{max-width:600px;margin:0 auto 32px;color:rgba(245,224,203,.9);font-size:1.12rem;font-weight:300}

/* FOOTER */
footer{background:var(--navy);border-top:1px solid rgba(245,224,203,.12);color:rgba(245,224,203,.75);padding:48px 0 38px;font-size:.85rem}
.foot-podcast{text-align:center;padding-bottom:36px;margin-bottom:36px;border-bottom:1px solid rgba(245,224,203,.12)}
.foot-podcast h3{color:#fff;font-size:1.45rem;margin-bottom:10px;font-weight:400}
.foot-podcast p{max-width:540px;margin:0 auto 22px;color:rgba(245,224,203,.75);font-size:.95rem}
.foot-social{display:flex;gap:14px}
.foot-social a{width:38px;height:38px;border-radius:50%;border:1px solid rgba(245,224,203,.35);display:flex;align-items:center;justify-content:center;color:rgba(245,224,203,.85);transition:.2s}
.foot-social a:hover{background:var(--coral);border-color:var(--coral);color:var(--navy)}
.foot-social svg{width:17px;height:17px;fill:currentColor}
.foot-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px}
.foot-brand{font-family:'Fahkwang',serif;font-size:1.15rem;color:#fff}
.foot-links{display:flex;gap:24px;flex-wrap:wrap}
.foot-links a:hover{color:var(--coral)}
.foot-legal{margin-top:26px;padding-top:20px;border-top:1px solid rgba(245,224,203,.12);font-size:.74rem;color:rgba(245,224,203,.5);line-height:1.6}

/* RESPONSIVE */
@media(max-width:900px){
  .nav-links{position:fixed;top:72px;right:0;left:0;background:var(--cream-soft);flex-direction:column;gap:0;padding:10px 0;border-bottom:1px solid rgba(19,42,73,.1);display:none}
  .nav-links.open{display:flex}
  .nav-links a{width:100%;padding:13px 24px}
  .nav-links .btn{margin:10px 24px;width:auto}
  .nav-toggle{display:block}
  .hero-grid,.intro-grid,.about-grid{grid-template-columns:1fr}
  .hero h1{font-size:2.5rem}
  .hero-photo{order:-1;max-width:420px;margin:0 auto}
  .benefit-grid{grid-template-columns:1fr}
  .tl-grid{grid-template-columns:1fr}
  .how-grid{grid-template-columns:1fr}
  .next-card{grid-template-columns:1fr}
  .next-side{border-left:0;border-top:1px solid rgba(19,42,73,.08)}
  .next-main,.next-side{padding:34px 26px}
  .next-theme{font-size:1.8rem}
  .about-photo{max-width:380px;margin:0 auto}
  .section-head h2,.intro h2,.final h2,.about h2{font-size:2rem}
  .date-pill{flex-direction:row}
}
@media(min-width:901px) and (max-width:1080px){
  .benefit-grid{grid-template-columns:repeat(2,1fr)}
  .tl-grid{grid-template-columns:repeat(2,1fr)}
}

/* ==========================================================
   BRAND STYLE GUIDE (2024) ALIGNMENT
   Headlines: Fahkwang Regular, uppercase. Body: Montserrat.
   Buttons: square, Montserrat Bold, wide tracking —
   coral on light backgrounds, tan on dark (navy text for contrast).
   ========================================================== */
body{background:#fff;color:var(--navy)}

/* Logo */
.brand-logo{height:44px;width:auto;display:block}
.foot-logo{height:46px;width:auto;display:block}

/* Headlines */
.hero h1,.section-head h2,.about h2,.final h2,.quiz-band h2,.next-theme,.date-block h3{
  text-transform:uppercase;letter-spacing:.06em;font-weight:400}
.hero h1{font-size:3rem;line-height:1.12}
.section-head h2{font-size:2.2rem}
.about h2{font-size:2.2rem}
.final h2,.quiz-band h2{font-size:2.3rem}
.benefit-card h3,.how-card h3,.fast-card h3,.tl-card h4,.safety-card h3,.foot-podcast h3,.next-side h4{
  text-transform:uppercase;letter-spacing:.08em;font-weight:400}
.fast-card h3{font-size:1.3rem}
.benefit-card h3,.how-card h3{font-size:1.15rem}
/* Headlines on dark backgrounds use the light accent */
.hero h1,.timeline .section-head h2,.next .section-head h2,.final h2,.quiz-band h2{color:var(--cream)}

/* Small accent labels */
.eyebrow{color:var(--coral)}
.eyebrow.light{color:var(--tan)}
.next .eyebrow,.quiz-band .eyebrow,.final .eyebrow{color:var(--cream)}
.about .credential{color:var(--coral)}

/* Light sections & cards */
.intro,.safety{background:var(--cream)}
.benefit-card,.fast-card{background:var(--cream)}
.next-side{background:var(--cream)}
.safety-card{border-left-color:var(--coral)}

/* Buttons */
.btn,.btn.coral{border-radius:0;font-weight:700;letter-spacing:.2em;
  background:var(--coral);border-color:var(--coral);color:var(--navy)}
.btn:hover,.btn.coral:hover{background:var(--navy);border-color:var(--navy);color:var(--cream)}
.nav-links .btn{color:var(--navy)}
.nav-links .btn:hover{color:var(--cream)}
.hero .btn:not(.ghost),.final .btn,.quiz-band .btn{
  background:var(--tan);border-color:var(--tan);color:var(--navy)}
.hero .btn:not(.ghost):hover,.final .btn:hover,.quiz-band .btn:hover{
  background:var(--cream);border-color:var(--cream);color:var(--navy)}
.hero .btn.ghost:hover{background:var(--cream);border-color:var(--cream);color:var(--navy) !important}

/* "Keep Learning" band — full-width cream so it stands apart from the section above */
footer{padding-top:0;border-top:0}
.foot-podcast{background:var(--cream);padding:64px 0 60px;margin-bottom:48px;border-bottom:0}
.foot-podcast h3,.foot-podcast p{color:var(--navy)}
.foot-podcast .eyebrow{color:var(--coral)}

/* Signature pattern — logo mark at 3% on the dark hero */
.hero .container{position:relative;z-index:1}
.hero::after{content:"";position:absolute;left:-90px;top:50%;transform:translateY(-50%);
  width:620px;height:660px;background:url('assets/img/logo-icon-cream.png') no-repeat center/contain;
  opacity:.03;pointer-events:none}

@media(max-width:900px){
  .brand-logo{height:36px}
  .hero h1{font-size:2.1rem}
  .section-head h2,.about h2,.final h2,.quiz-band h2{font-size:1.7rem}
  .hero::after{width:420px;height:450px;left:-120px}
}

/* ===== Subheads & accent small text: Belleza =====
   The style guide specifies Khmer MN, a Mac system font that is not licensed for web use.
   Belleza (Google Fonts) is the closest free match. It has one weight (400), so sizes are
   nudged up slightly for legibility. Approved by Michael 2026-09-27. */
.eyebrow,.brand-text span,.tl-day,.fast-dur,.date-pill .len,.about .credential,.next-theme-label,.pull-quote span{
  font-family:'Belleza','Montserrat',sans-serif;font-weight:400}
.eyebrow{font-size:.8rem}
.tl-day,.date-pill .len,.next-theme-label{font-size:.78rem}
.about .credential{font-size:.86rem}
.brand-text span{font-size:.66rem}
.fast-dur{font-size:.74rem}
.pull-quote span{font-size:.82rem}