/* =============================================================================
   CREATIVE MEADOW HUB — cmh.css   (theme-integrated, #cmh-app-scoped)
   -----------------------------------------------------------------------------
   The Hub renders INSIDE the live site theme (Core::open_page → get_header() …
   page body … get_footer()), so the real site nav + footer wrap every page. To
   survive the Haru Pricom theme's CSS and the theme's content container, every
   selector here is:
     • scoped under  #cmh-app  (the single wrapper the page body emits) — theme
       rules for .btn/.hero/.card never reach us, and ours never leak out,
     • full-bleed for the coloured bands: each section carries .cmh-section and
       breaks out of the theme container with width:100vw + negative margins,
     • built on the Creative Meadow funnel design system (navy/green/red, Outfit,
       the 9px rainbow strip, big clamp() headings, the red CTA pill, generous
       spacing) ported from lead-launch/launchpad-offer.html + resources.html.

   HARD RULE: red (--cmh-red #DD1D26) = ACTION / CTA only — exactly one red CTA
   per section. green = secondary / positive accent. navy = structure. Outfit is
   the only typeface.

   The class vocabulary below MATCHES exactly what the modules emit:
     • CMH_Courses (archive / detail / player) — BEM-style cmh-* classes
     • CMH_Pages   — legacy .kicker / h2.center / .sub.center / .btn / .cmh-block-*
     • the embedded budget calculator carries its own #cmh-app-scoped <style>

   Map:
     0)  Tokens          5)  Course DETAIL (hero+cover, learn, curriculum, sample,
     1)  App reset/bleed      whofor, navy band, final CTA)
     2)  Buttons         6)  Course PLAYER (lessons, downloads, offer, membership)
     3)  Type helpers    7)  Calculator harmonisers
     4)  Course ARCHIVE  8)  Pages blocks   9) 404   10) Responsive
============================================================================= */


/* ----------------------------------------------------------------------------
   0) TOKENS  (declared globally; only read inside #cmh-app)
---------------------------------------------------------------------------- */
:root{
  --cmh-navy:#003647;
  --cmh-navy-2:#0a4a5e;
  --cmh-green:#37B875;
  --cmh-green-deep:#2aa063;
  --cmh-teal:#11B196;
  --cmh-red:#DD1D26;        /* ACTION ONLY — one red CTA per section */
  --cmh-red-deep:#c2151d;
  --cmh-amber:#F2A93B;      /* calculator input focus */
  --cmh-mustard:#F4D23E;
  --cmh-sky:#2BA6C9;
  --cmh-purple:#7C5CC4;
  --cmh-bg:#ffffff;
  --cmh-soft:#f7f7f7;
  --cmh-panel:#f6f7fb;
  --cmh-line:#e9e9ee;
  --cmh-ink:#222222;
  --cmh-muted:#5b6b73;
  --cmh-radius:16px;
  --cmh-shadow:0 4px 18px rgba(0,54,71,.08);
  --cmh-shadow-lg:0 14px 40px rgba(0,54,71,.14);
}


/* ----------------------------------------------------------------------------
   1) APP RESET + CONTAINER + FULL-BLEED SECTION + RAINBOW
   #cmh-app is the single wrapper the page body emits. Reset is local so we don't
   fight the theme; overflow-x:hidden keeps the full-bleed bands tidy.
---------------------------------------------------------------------------- */
#cmh-app{
  font-family:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--cmh-ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  /* clip (not hidden) so the full-bleed bands stay contained WITHOUT turning
     #cmh-app into a scroll container — which would break position:sticky on the
     course-details offer aside. `hidden` is the fallback for older browsers. */
  overflow-x:hidden;
  overflow-x:clip;
  background:var(--cmh-bg);
}
#cmh-app *,
#cmh-app *::before,
#cmh-app *::after{box-sizing:border-box}
#cmh-app img{max-width:100%;display:block}
#cmh-app a{color:inherit;text-decoration:none}
#cmh-app button{font-family:inherit}

/* the 9px signature rainbow strip (page body emits .cmh-rainbow once at the top,
   and once inside the offer card) */
#cmh-app .cmh-rainbow{
  height:9px;width:100%;
  background:linear-gradient(90deg,#DD1D26,#F2A93B 22%,#F4D23E 40%,#37B875 60%,#2BA6C9 80%,#7C5CC4);
}

/* inner content column */
#cmh-app .cmh-wrap,
#cmh-app .wrap{max-width:1080px;margin:0 auto;padding:0 24px;width:100%}
#cmh-app .cmh-wrap.narrow,
#cmh-app .wrap.narrow{max-width:880px}

/* FULL-BLEED SECTION PRIMITIVE — breaks out of the theme's centred container so
   coloured heroes/bands span edge-to-edge like the funnel. */
#cmh-app .cmh-section{
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  padding:58px 0;
}
#cmh-app .cmh-section--soft{background:var(--cmh-soft)}


/* ----------------------------------------------------------------------------
   2) BUTTONS — red = ACTION only. .cmh-btn is canonical (modifiers --lg/--green/
   --ghost/--full); .btn is kept as an alias for the Pages module's bare .btn.
---------------------------------------------------------------------------- */
#cmh-app .cmh-btn,
#cmh-app .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:linear-gradient(180deg,#e8242d,var(--cmh-red-deep));
  color:#fff;text-decoration:none;font-weight:800;font-family:inherit;
  border-radius:999px;padding:17px 32px;font-size:17px;border:none;
  box-shadow:0 10px 26px rgba(221,29,38,.30);
  transition:transform .15s,box-shadow .2s;cursor:pointer;text-align:center;line-height:1.15;
}
#cmh-app .cmh-btn:hover,
#cmh-app .btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(221,29,38,.40)}
#cmh-app .cmh-btn:disabled,
#cmh-app .btn:disabled{opacity:.65;cursor:default;transform:none}

#cmh-app .cmh-btn--lg,
#cmh-app .btn.lg{font-size:19px;padding:20px 42px}
#cmh-app .cmh-btn--sm,
#cmh-app .btn.sm{font-size:14px;padding:12px 22px}

#cmh-app .cmh-btn--green,
#cmh-app .btn.green{
  background:linear-gradient(180deg,#43c281,var(--cmh-green-deep));
  box-shadow:0 10px 26px rgba(55,184,117,.32);
}
#cmh-app .cmh-btn--green:hover,
#cmh-app .btn.green:hover{box-shadow:0 14px 34px rgba(55,184,117,.42)}

#cmh-app .cmh-btn--ghost,
#cmh-app .btn.ghost{background:#fff;color:var(--cmh-navy);border:2px solid var(--cmh-line);box-shadow:none}
#cmh-app .cmh-btn--ghost:hover,
#cmh-app .btn.ghost:hover{border-color:var(--cmh-navy);box-shadow:0 8px 20px rgba(0,54,71,.10)}

#cmh-app .cmh-btn--full,
#cmh-app .btn.full{width:100%}


/* ----------------------------------------------------------------------------
   3) SHARED TYPE HELPERS
   Module headings: .cmh-eyebrow / .cmh-h2 / .cmh-sub  (+ legacy .kicker /
   h2.center / .sub.center from the Pages module). Centred by default.
---------------------------------------------------------------------------- */
#cmh-app .cmh-eyebrow,
#cmh-app .kicker{
  display:block;
  font-size:11.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cmh-red);text-align:center;margin-bottom:12px;
}
#cmh-app .cmh-eyebrow--light{color:#9be3c1}      /* on navy/dark heroes */
#cmh-app .cmh-h2,
#cmh-app h2.center{
  font-weight:900;font-size:clamp(26px,4.6vw,40px);line-height:1.1;
  text-align:center;letter-spacing:-.015em;color:var(--cmh-navy);margin:0 auto 14px;
}
#cmh-app .cmh-h2 em,
#cmh-app h2.center em{font-style:normal;color:var(--cmh-green)}
#cmh-app .cmh-sub,
#cmh-app .sub.center{
  text-align:center;color:var(--cmh-muted);font-size:17px;max-width:640px;margin:0 auto 34px;
}
#cmh-app .cmh-sub b,
#cmh-app .sub.center b{color:var(--cmh-ink)}


/* ----------------------------------------------------------------------------
   4) COURSE ARCHIVE  (/resources/)
   Full-bleed branded hero → soft section → responsive grid of thumbnail cards.
---------------------------------------------------------------------------- */
/* shared hero shell (archive uses the green wash; --detail/--player override) */
#cmh-app .cmh-hero{padding:0}
#cmh-app .cmh-hero--archive{
  background:linear-gradient(160deg,#063a4b,var(--cmh-navy) 62%,#012c3a);color:#fff;
}
#cmh-app .cmh-hero__in{max-width:860px;margin:0 auto;padding:64px 24px 66px;text-align:center}
#cmh-app .cmh-hero--archive .cmh-hero__h{
  font-weight:900;font-size:clamp(30px,5.4vw,48px);line-height:1.05;letter-spacing:-.02em;
  color:#fff;margin:0 0 16px;
}
#cmh-app .cmh-hero--archive .cmh-hero__lead{font-size:18.5px;color:rgba(255,255,255,.84);line-height:1.55;max-width:620px;margin:0 auto}

/* archive grid */
#cmh-app .cmh-archive{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:24px;max-width:1080px;margin:0 auto;
}
#cmh-app .cmh-card{
  background:#fff;border:1px solid var(--cmh-line);border-radius:var(--cmh-radius);
  overflow:hidden;display:flex;flex-direction:column;color:inherit;text-decoration:none;
  box-shadow:var(--cmh-shadow);transition:transform .16s,box-shadow .2s;
}
#cmh-app .cmh-card:hover{transform:translateY(-5px);box-shadow:0 18px 42px rgba(0,54,71,.17)}

/* 16:9 thumbnail */
#cmh-app .cmh-card__img{aspect-ratio:16/9;background:#FBF6EE;position:relative;overflow:hidden;display:block}
#cmh-app .cmh-card__img img{width:100%;height:100%;object-fit:contain;display:block;transition:transform .4s ease}
#cmh-app .cmh-card:hover .cmh-card__img img{transform:scale(1.04)}

/* card body */
#cmh-app .cmh-card__body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
#cmh-app .cmh-card__badges{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:11px}
#cmh-app .cmh-card__title{font-weight:800;font-size:20px;color:var(--cmh-navy);line-height:1.18;margin:0 0 7px}
#cmh-app .cmh-card__sub{font-size:14.5px;color:var(--cmh-muted);line-height:1.5;margin:0 0 18px;flex:1}
#cmh-app .cmh-card__go{
  font-weight:800;font-size:14px;color:var(--cmh-red);
  padding-top:15px;border-top:1px solid var(--cmh-line);margin-top:auto;
}

/* pills (free / value) — shared by cards, curriculum tags, sample heads */
#cmh-app .cmh-pill{
  display:inline-flex;align-items:center;
  font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  border-radius:999px;padding:4px 11px;
}
#cmh-app .cmh-pill--free{color:#fff;background:var(--cmh-green)}
#cmh-app .cmh-pill--val{color:var(--cmh-green-deep);background:rgba(55,184,117,.13)}

/* branded fallback cover (no cover_url) — logo on navy + rainbow base */
#cmh-app .cmh-cover--fallback{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  text-align:center;padding:26px;
  background:linear-gradient(150deg,var(--cmh-navy-2),var(--cmh-navy) 62%,#012c3a);
}
#cmh-app .cmh-cover--fallback::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:5px;
  background:linear-gradient(90deg,#DD1D26,#F2A93B 22%,#F4D23E 40%,#37B875 60%,#2BA6C9 80%,#7C5CC4);
}
#cmh-app .cmh-cover__logo{width:auto;height:34px;filter:brightness(0) invert(1);opacity:.95}
#cmh-app .cmh-cover__t{font-size:19px;font-weight:900;line-height:1.18;color:#fff;letter-spacing:-.01em;max-width:90%}

#cmh-app .cmh-empty{text-align:center;color:var(--cmh-muted);font-size:16px;padding:56px 20px}


/* ----------------------------------------------------------------------------
   5) COURSE DETAIL  (/resources/{slug}/) — the "$500 course" sales page
   Hero (copy + cover image) → about prose → "what you'll learn" check cards →
   curriculum (number / lock / free-sample pill) → free sample body → who-it's-for
   → navy stat band → final CTA band.
---------------------------------------------------------------------------- */
/* ---- HERO: two-column, soft-green wash, cover image on the right ---- */
#cmh-app .cmh-hero--detail{background:linear-gradient(165deg,#f3fbf7,#e6f6ee);border-bottom:1px solid #cdeede}
#cmh-app .cmh-hero-grid{
  display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;
  max-width:1080px;margin:0 auto;padding:62px 24px;width:100%;
}
#cmh-app .cmh-hero-grid__copy .cmh-eyebrow{text-align:left;color:var(--cmh-red);margin-bottom:13px}
#cmh-app .cmh-hero--detail .cmh-hero__h{
  font-weight:900;font-size:clamp(30px,5vw,48px);line-height:1.05;letter-spacing:-.02em;
  color:var(--cmh-navy);margin:0 0 16px;
}
#cmh-app .cmh-hero--detail .cmh-hero__h em{font-style:normal;color:var(--cmh-green)}
#cmh-app .cmh-hero--detail .cmh-hero__lead{font-size:18.5px;color:#33555f;line-height:1.55;margin:0 0 20px;max-width:560px}
#cmh-app .cmh-hero--detail .cmh-hero__lead b{color:var(--cmh-navy)}
#cmh-app .cmh-hero__badge{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:800;font-size:13px;color:var(--cmh-green-deep);
  background:rgba(55,184,117,.13);border-radius:999px;padding:8px 16px;margin-bottom:22px;
}
#cmh-app .cmh-free-dot{
  font-size:10.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;
  color:#fff;background:var(--cmh-green);border-radius:999px;padding:2px 9px;
}
#cmh-app .cmh-hero__cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
#cmh-app .cmh-hero__fine{font-size:13px;color:var(--cmh-muted);margin-top:14px}

/* hero cover image (the detail thumbnail) — 4:3, rounded, lifted */
#cmh-app .cmh-hero-grid__media{min-width:0}
#cmh-app .cmh-hero__img{
  border-radius:var(--cmh-radius);overflow:hidden;border:1px solid var(--cmh-line);
  box-shadow:0 22px 54px rgba(0,54,71,.16);aspect-ratio:4/3;background:var(--cmh-soft);position:relative;
}
#cmh-app .cmh-hero__img img{width:100%;height:100%;object-fit:cover;display:block}
#cmh-app .cmh-hero__img.cmh-cover--fallback{border:none;border-radius:var(--cmh-radius)}
#cmh-app .cmh-hero__img.cmh-cover--fallback .cmh-cover__logo{height:46px}
#cmh-app .cmh-hero__img.cmh-cover--fallback .cmh-cover__t{font-size:24px}

/* ---- ABOUT / PROSE ---- */
#cmh-app .cmh-about-sec{background:var(--cmh-bg)}
#cmh-app .cmh-prose{color:var(--cmh-ink);font-size:16.5px;line-height:1.72}
#cmh-app .cmh-prose--center{max-width:780px;margin:0 auto}
#cmh-app .cmh-prose h2{font-weight:900;font-size:26px;color:var(--cmh-navy);letter-spacing:-.01em;margin:30px 0 12px;text-align:left}
#cmh-app .cmh-prose h3{font-weight:800;font-size:20px;color:var(--cmh-navy);margin:24px 0 10px}
#cmh-app .cmh-prose p{margin:0 0 16px}
#cmh-app .cmh-prose ul,
#cmh-app .cmh-prose ol{margin:0 0 16px 22px}
#cmh-app .cmh-prose li{margin-bottom:7px}
#cmh-app .cmh-prose a{color:var(--cmh-green-deep);font-weight:600;text-decoration:underline}
#cmh-app .cmh-prose img{border-radius:12px;margin:16px 0}
#cmh-app .cmh-prose strong{color:var(--cmh-navy);font-weight:700}

/* ---- "WHAT YOU'LL LEARN" / "WHO IT'S FOR" — check cards in a responsive grid ---- */
#cmh-app .cmh-learn-sec .cmh-eyebrow,
#cmh-app .cmh-curric-sec .cmh-eyebrow,
#cmh-app .cmh-whofor-sec .cmh-eyebrow{color:var(--cmh-red)}
#cmh-app .cmh-learn{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:16px;max-width:980px;margin:0 auto;
}
#cmh-app .cmh-learn__card{
  display:flex;gap:14px;align-items:flex-start;
  background:#fff;border:1px solid var(--cmh-line);border-radius:var(--cmh-radius);
  padding:20px 22px;box-shadow:var(--cmh-shadow);position:relative;overflow:hidden;
}
#cmh-app .cmh-learn__card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--cmh-green)}
#cmh-app .cmh-learn__check{
  flex:0 0 auto;width:28px;height:28px;border-radius:50%;
  background:rgba(55,184,117,.14);color:var(--cmh-green-deep);
  display:flex;align-items:center;justify-content:center;margin-top:1px;
}
#cmh-app .cmh-learn__t{font-size:15.5px;color:var(--cmh-ink);line-height:1.5;font-weight:500}
/* who-it's-for: navy accent instead of green */
#cmh-app .cmh-whofor-sec .cmh-learn__card::before{background:var(--cmh-navy)}
#cmh-app .cmh-whofor-sec .cmh-learn__check{background:rgba(0,54,71,.10);color:var(--cmh-navy)}

/* ---- CURRICULUM ("Inside the course") ---- */
#cmh-app .cmh-curric-sec{background:var(--cmh-bg)}
#cmh-app .cmh-curric{
  max-width:820px;margin:0 auto;
  background:#fff;border:1px solid var(--cmh-line);border-radius:var(--cmh-radius);
  overflow:hidden;box-shadow:var(--cmh-shadow);
}
#cmh-app .cmh-curric__row{
  display:flex;align-items:center;gap:14px;padding:16px 22px;
  border-bottom:1px solid var(--cmh-line);font-size:15.5px;transition:background .12s;
}
#cmh-app .cmh-curric__row:last-child{border-bottom:none}
#cmh-app .cmh-curric__row:hover{background:var(--cmh-soft)}
#cmh-app .cmh-curric__num{
  flex:0 0 auto;width:30px;height:30px;border-radius:8px;
  background:var(--cmh-navy);color:#fff;font-weight:800;font-size:14px;
  display:flex;align-items:center;justify-content:center;
}
#cmh-app .cmh-curric__row.is-free .cmh-curric__num{background:var(--cmh-green)}
#cmh-app .cmh-curric__title{flex:1;line-height:1.35;font-weight:600;color:var(--cmh-navy)}
#cmh-app .cmh-curric__tag{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center}
#cmh-app .cmh-curric__tag--free{
  font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--cmh-green-deep);background:rgba(55,184,117,.14);border-radius:999px;padding:4px 10px;
}
#cmh-app .cmh-curric__tag--lock{width:30px;height:30px;border-radius:8px;background:var(--cmh-panel);color:var(--cmh-muted)}

/* free-sample lesson body shown on the public detail page */
#cmh-app .cmh-sample{
  max-width:820px;margin:24px auto 0;
  background:#fff;border:1px solid var(--cmh-line);border-radius:var(--cmh-radius);
  padding:26px 28px 28px;box-shadow:var(--cmh-shadow);
}
#cmh-app .cmh-sample__head{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
#cmh-app .cmh-sample__title{font-weight:900;font-size:20px;color:var(--cmh-navy);line-height:1.2}

/* ---- NAVY STAT / VALUE BAND (full-bleed) ---- */
#cmh-app .cmh-band{background:var(--cmh-navy);color:#fff;padding:0}
#cmh-app .cmh-band__in{display:flex;flex-wrap:wrap;justify-content:center;max-width:1080px;margin:0 auto;padding:8px 24px}
#cmh-app .cmh-band__s{flex:1;min-width:130px;text-align:center;padding:24px 8px;position:relative}
#cmh-app .cmh-band__s + .cmh-band__s::before{
  content:"";position:absolute;left:0;top:24%;height:52%;width:1px;background:rgba(255,255,255,.16);
}
#cmh-app .cmh-band__n{display:block;font-weight:900;font-size:30px;color:var(--cmh-mustard);line-height:1}
#cmh-app .cmh-band__l{display:block;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.72);margin-top:5px}

/* ---- FINAL CTA BAND ---- */
#cmh-app .cmh-finalcta{background:var(--cmh-soft);border-top:1px solid var(--cmh-line)}
#cmh-app .cmh-finalcta__in{max-width:680px;margin:0 auto;text-align:center}
#cmh-app .cmh-finalcta .cmh-eyebrow{color:var(--cmh-red)}
#cmh-app .cmh-finalcta__cta{margin-top:8px;display:flex;justify-content:center}


/* ----------------------------------------------------------------------------
   6) COURSE PLAYER  (/resources/{slug}/learn/)
   Navy welcome hero → soft lessons section → per-lesson card (number, body,
   green downloads, embedded calculator) → founders-vault offer → membership.
---------------------------------------------------------------------------- */
#cmh-app .cmh-hero--player{background:var(--cmh-navy);color:#fff;text-align:center}
#cmh-app .cmh-hero--player .cmh-hero__in{padding:56px 24px 58px}
#cmh-app .cmh-hero--player .cmh-hero__h{
  font-weight:900;font-size:clamp(28px,4.8vw,44px);line-height:1.06;letter-spacing:-.02em;
  color:#fff;margin:0 0 12px;
}
#cmh-app .cmh-hero--player .cmh-hero__lead{color:rgba(255,255,255,.84);font-size:17.5px;max-width:600px;margin:0 auto}

#cmh-app .cmh-player-sec{padding-top:48px;padding-bottom:14px}

/* lesson card */
#cmh-app .cmh-lesson{
  max-width:840px;margin:0 auto 22px;
  background:#fff;border:1px solid var(--cmh-line);border-radius:var(--cmh-radius);
  padding:34px 36px 38px;box-shadow:var(--cmh-shadow);scroll-margin-top:24px;
}
#cmh-app .cmh-lesson__h{display:flex;align-items:center;gap:14px;margin-bottom:18px}
#cmh-app .cmh-lesson__num{
  flex:0 0 auto;width:40px;height:40px;border-radius:11px;
  background:var(--cmh-navy);color:#fff;font-weight:900;font-size:17px;
  display:flex;align-items:center;justify-content:center;
}
#cmh-app .cmh-lesson__title{
  font-weight:900;font-size:clamp(22px,3vw,30px);line-height:1.12;letter-spacing:-.01em;color:var(--cmh-navy);margin:0;
}

/* downloads / assets block — green CTA buttons */
#cmh-app .cmh-assets{
  margin:28px 0 4px;padding:22px 24px;background:var(--cmh-panel);
  border:1px solid var(--cmh-line);border-radius:var(--cmh-radius);
  display:flex;flex-wrap:wrap;gap:11px;
}
#cmh-app .cmh-dl{
  display:inline-flex;align-items:center;gap:9px;
  background:linear-gradient(180deg,#43c281,var(--cmh-green-deep));color:#fff;
  border-radius:12px;padding:13px 20px;font-size:14.5px;font-weight:800;text-decoration:none;
  box-shadow:0 6px 16px rgba(55,184,117,.28);transition:transform .12s,box-shadow .15s;
}
#cmh-app .cmh-dl:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(55,184,117,.4)}
#cmh-app .cmh-dl svg{flex:0 0 auto}

/* ---- FOUNDERS-VAULT OFFER block ---- */
#cmh-app .cmh-offer-sec{padding-top:34px}
#cmh-app .cmh-offer{
  max-width:820px;margin:0 auto;
  background:#fff;border:2px solid var(--cmh-green);border-radius:20px;
  overflow:hidden;box-shadow:var(--cmh-shadow-lg);text-align:center;
}
#cmh-app .cmh-offer .cmh-rainbow{height:7px}
#cmh-app .cmh-offer__in{padding:30px 30px 32px}
#cmh-app .cmh-offer__in .cmh-eyebrow{color:var(--cmh-red);margin-bottom:10px}
#cmh-app .cmh-offer__h{
  font-weight:900;font-size:clamp(22px,3.4vw,28px);line-height:1.18;letter-spacing:-.01em;
  color:var(--cmh-navy);max-width:560px;margin:0 auto 10px;
}
#cmh-app .cmh-offer__h em{font-style:normal;color:var(--cmh-green)}
#cmh-app .cmh-offer__desc{color:var(--cmh-muted);font-size:15.5px;max-width:520px;margin:0 auto 16px}
#cmh-app .cmh-offer__price{display:flex;align-items:baseline;justify-content:center;gap:12px;margin-bottom:14px}
#cmh-app .cmh-offer__was{color:var(--cmh-muted);font-size:20px;font-weight:600;text-decoration:line-through}
#cmh-app .cmh-offer__now{color:var(--cmh-navy);font-size:46px;font-weight:900;letter-spacing:-.02em;line-height:1}
#cmh-app .cmh-offer__stats{display:flex;justify-content:center;gap:26px;flex-wrap:wrap;margin:16px 0 22px}
#cmh-app .cmh-offer__n{display:block;font-size:22px;font-weight:900;color:var(--cmh-green-deep);line-height:1}
#cmh-app .cmh-offer__l{display:block;font-size:12.5px;color:var(--cmh-muted);margin-top:3px}
#cmh-app .cmh-offer__fine{color:var(--cmh-muted);font-size:13px;margin-top:14px}
#cmh-app .cmh-offer__fine b{color:var(--cmh-green-deep)}

/* ---- MEMBERSHIP block (navy, full-bleed) ---- */
#cmh-app .cmh-member{background:var(--cmh-navy);color:#fff;text-align:center}
#cmh-app .cmh-member__in{max-width:680px;margin:0 auto;padding:8px 24px}
#cmh-app .cmh-member .cmh-eyebrow{color:#9be3c1;margin-bottom:10px}
#cmh-app .cmh-member__h{font-weight:900;font-size:clamp(24px,4vw,38px);line-height:1.12;letter-spacing:-.015em;color:#fff;margin:0 0 12px}
#cmh-app .cmh-member__h em{font-style:normal;color:var(--cmh-green)}
#cmh-app .cmh-member__p{color:rgba(255,255,255,.84);font-size:16px;max-width:560px;margin:0 auto 18px}
#cmh-app .cmh-member__stats{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;margin-bottom:24px;font-size:14px;color:rgba(255,255,255,.78);font-weight:600}
#cmh-app .cmh-member__stats b{color:#9be3c1}
#cmh-app .cmh-member__fine{font-size:13.5px;color:rgba(255,255,255,.7);margin-top:14px}


/* ----------------------------------------------------------------------------
   7) CALCULATOR HARMONISERS
   The player embeds the self-contained calculator (lifted from resources.html);
   it ships its OWN #cmh-app-scoped <style> for .calc-card/.crow/.res-box, so we
   only constrain its width here to sit cleanly inside the lesson card. The
   contract's cmh-calc-card / cmh-crow / cmh-res names are also defined so any
   future cmh-prefixed calculator markup is styled identically.
---------------------------------------------------------------------------- */
#cmh-app .calc-card,
#cmh-app .cmh-calc-card{max-width:560px;margin:18px auto}

#cmh-app .cmh-calc-card{
  background:#fff;border:1px solid var(--cmh-line);border-radius:18px;
  overflow:hidden;box-shadow:var(--cmh-shadow);position:relative;
}
#cmh-app .cmh-calc-card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:6px;
  background:linear-gradient(90deg,#DD1D26,#F2A93B 22%,#F4D23E 40%,#37B875 60%,#2BA6C9 80%,#7C5CC4);
}
#cmh-app .cmh-crow{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 0;border-bottom:1px dashed var(--cmh-line);
}
#cmh-app .cmh-crow:last-of-type{border-bottom:none}
#cmh-app .cmh-crow label{font-size:15px;color:var(--cmh-ink);font-weight:500;flex:1}
#cmh-app .cmh-crow input{
  width:122px;font-family:inherit;font-size:15.5px;font-weight:700;color:var(--cmh-navy);
  padding:10px 12px;background:#fffdf3;border:2px solid #f0e2a8;border-radius:10px;text-align:right;
  transition:border-color .15s,box-shadow .15s;
}
#cmh-app .cmh-crow input:focus{outline:none;border-color:var(--cmh-amber);box-shadow:0 0 0 3px rgba(242,169,59,.18)}
#cmh-app .cmh-res{
  background:rgba(55,184,117,.07);border:1px solid rgba(55,184,117,.28);border-radius:13px;padding:14px 16px;
}
#cmh-app .cmh-res.big{background:rgba(55,184,117,.12);border-color:rgba(55,184,117,.4)}
#cmh-app .cmh-res .rv{font-size:24px;font-weight:900;color:var(--cmh-green-deep);line-height:1.1;margin-top:3px}
#cmh-app .cmh-res.warnbox{background:rgba(221,29,38,.06);border-color:rgba(221,29,38,.3)}
#cmh-app .cmh-res.warnbox .rv{color:var(--cmh-red)}


/* ----------------------------------------------------------------------------
   8) PAGES MODULE BLOCKS  (heading / html / button / image) + .cmh-page wrap
   The Pages module emits a bare body wrapped (by Core::shell) in #cmh-app; its
   <main class="cmh-page wrap"> holds heading/html/button/image blocks.
---------------------------------------------------------------------------- */
#cmh-app .cmh-page{padding:40px 0 56px}
#cmh-app .cmh-block-html{margin:0 auto 26px;max-width:760px;font-size:16px;line-height:1.65}
#cmh-app .cmh-block-image{margin:26px auto;max-width:900px;text-align:center}
#cmh-app .cmh-block-image img{border-radius:var(--cmh-radius);box-shadow:var(--cmh-shadow-lg);margin:0 auto}


/* ----------------------------------------------------------------------------
   9) 404  (rendered as a cmh-hero--archive variant by the module)
---------------------------------------------------------------------------- */
#cmh-app .cmh-hero--archive .cmh-hero__cta{display:flex;justify-content:center;margin-top:8px}


/* ----------------------------------------------------------------------------
   10) RESPONSIVE
---------------------------------------------------------------------------- */
@media(max-width:900px){
  #cmh-app .cmh-section{padding:46px 0}

  /* detail hero stacks; cover moves above the copy */
  #cmh-app .cmh-hero-grid{grid-template-columns:1fr;gap:30px;padding:48px 24px}
  #cmh-app .cmh-hero-grid__media{order:-1;max-width:460px;margin:0 auto;width:100%}

  #cmh-app .cmh-lesson{padding:28px 26px 30px}
}

@media(max-width:560px){
  #cmh-app{font-size:16px}
  #cmh-app .cmh-section{padding:40px 0}
  #cmh-app .cmh-wrap,
  #cmh-app .wrap{padding:0 18px}

  #cmh-app .cmh-archive{grid-template-columns:1fr;gap:18px}
  #cmh-app .cmh-learn{grid-template-columns:1fr}

  #cmh-app .cmh-hero__in{padding:42px 18px 44px}
  #cmh-app .cmh-hero-grid{padding:38px 18px}
  #cmh-app .cmh-hero--detail .cmh-hero__h{font-size:30px}
  #cmh-app .cmh-hero--detail .cmh-hero__lead{font-size:16.5px}
  #cmh-app .cmh-hero__cta{flex-direction:column;align-items:stretch}
  #cmh-app .cmh-hero__cta .cmh-btn,
  #cmh-app .cmh-hero__cta .btn{width:100%}

  #cmh-app .cmh-band__n{font-size:26px}

  #cmh-app .cmh-curric__row{padding:14px 16px;font-size:14.5px}
  #cmh-app .cmh-lesson{padding:24px 18px 26px}
  #cmh-app .cmh-lesson__title{font-size:22px}
  #cmh-app .cmh-assets{padding:18px 16px}
  #cmh-app .cmh-dl{width:100%;justify-content:center}

  #cmh-app .cmh-offer__in,
  #cmh-app .cmh-member__in{padding:26px 20px 28px}
  #cmh-app .cmh-offer__now{font-size:38px}
}


/* ----------------------------------------------------------------------------
   11) THEME HEADER FIX  (GLOBAL — intentionally NOT #cmh-app-scoped).
   cmh.css loads ONLY on hub routes, so this can't leak to the rest of the site.

   The Haru theme ships its own site header hidden behind .haru-header--loading
   (opacity:0; visibility:hidden) and removes that class via its init JS once the
   header is "ready". On our virtual pages (no real Elementor post in the main
   query) that init never fires, so the site header — logo, search, nav — would
   stay invisible (a blank gap above the rainbow). Force it (and the Elementor
   container it's built from) visible so the real site header always shows.
---------------------------------------------------------------------------- */
.haru-header.haru-header--loading{opacity:1 !important;visibility:visible !important;}
.haru-header--loading .e-con,
.haru-header--loading .e-con-inner,
.haru-header--loading [class*="haru-header__"]{visibility:visible !important;opacity:1 !important;}


/* ----------------------------------------------------------------------------
   12) LESSON VIDEO + COMING-SOON CARDS  (finalization)
---------------------------------------------------------------------------- */
#cmh-app .cmh-lesson__video{margin:0 0 22px}
#cmh-app .cmh-lesson__video video{width:100%;display:block;border-radius:14px;background:var(--cmh-navy,#003647);box-shadow:0 14px 34px rgba(0,54,71,.18);aspect-ratio:16/9}

/* coming-soon archive cards: non-clickable, gently muted, badge on the thumbnail */
#cmh-app .cmh-card--soon{cursor:default}
#cmh-app .cmh-card--soon:hover{transform:none;box-shadow:0 6px 20px rgba(0,54,71,.09)}
#cmh-app .cmh-card__imgwrap{position:relative;display:block}
#cmh-app .cmh-card--soon .cmh-card__img{filter:saturate(.55) brightness(.98)}
#cmh-app .cmh-soon-tag{position:absolute;top:12px;left:12px;z-index:2;background:var(--cmh-navy,#003647);color:#fff;font-weight:800;font-size:12px;letter-spacing:.04em;text-transform:uppercase;padding:6px 12px;border-radius:999px;box-shadow:0 4px 12px rgba(0,54,71,.28)}
#cmh-app .cmh-card__go--soon{color:#8a979d;font-weight:700}


/* ============================================================================
   13) COURSE DETAIL REDESIGN (v0.2.4) — mockup-matched, #cmh-app-scoped.
   Built on the canonical tokens + shadow levels. Supersedes the old
   .cmh-hero--detail / .cmh-learn / .cmh-curric / .cmh-sample / .cmh-finalcta
   detail rules (now unused) with .cmh-dhero / .cmh-feat / .cmh-acc / .cmh-spc /
   .cmh-fcta. Reuses .cmh-band (stat band), .cmh-eyebrow, .cmh-h2, .cmh-prose.
============================================================================ */
#cmh-app .cmh-eyebrow--red{color:var(--cmh-red)}

/* ---- HERO ---- */
#cmh-app .cmh-dhero{padding:0;background:linear-gradient(165deg,#f3fbf7 0%,#e7f6ef 60%,#dcf0e8 100%);border-bottom:1px solid #cdeede;overflow:hidden}
#cmh-app .cmh-dhero__grid{display:grid;grid-template-columns:1.04fr .96fr;gap:48px;align-items:center;padding:60px 24px 66px}
#cmh-app .cmh-dhero__copy .cmh-eyebrow{text-align:left;margin-bottom:14px}
#cmh-app .cmh-dhero__h{font-weight:900;font-size:clamp(34px,5.2vw,52px);line-height:1.04;letter-spacing:-.02em;color:var(--cmh-navy);margin:0 0 16px}
#cmh-app .cmh-dhero__lead{font-size:19px;color:#33555f;line-height:1.5;margin:0 0 20px;max-width:480px}
#cmh-app .cmh-dhero__badge{display:inline-flex;align-items:center;gap:9px;background:rgba(55,184,117,.12);color:var(--cmh-green-deep);font-weight:700;font-size:13.5px;padding:6px 15px 6px 6px;border-radius:999px;margin-bottom:22px}
#cmh-app .cmh-dhero__badge b{background:var(--cmh-green);color:#fff;font-weight:800;font-size:11px;letter-spacing:.05em;padding:4px 10px;border-radius:999px}
#cmh-app .cmh-dhero__cta{margin-bottom:13px}
#cmh-app .cmh-dhero__fine{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--cmh-muted);margin:0}
#cmh-app .cmh-dhero__fine svg{flex:0 0 auto;color:var(--cmh-green-deep)}
#cmh-app .cmh-dhero__media{position:relative;min-width:0}
#cmh-app .cmh-dhero__imgwrap{position:relative;z-index:1;border-radius:22px;overflow:hidden;box-shadow:0 24px 56px rgba(0,54,71,.20);background:#fff;aspect-ratio:4/3}
#cmh-app .cmh-dhero__img{width:100%;height:100%}
#cmh-app .cmh-dhero__img img{width:100%;height:100%;object-fit:cover;display:block}
#cmh-app .cmh-floatcard{position:absolute;z-index:2;width:60px;height:60px;background:#fff;border-radius:16px;box-shadow:0 14px 30px rgba(0,54,71,.17);display:flex;align-items:center;justify-content:center}
#cmh-app .cmh-floatcard--tl{top:-22px;left:-22px}
#cmh-app .cmh-floatcard--br{bottom:-22px;right:-18px}
#cmh-app .cmh-floatcard__ic{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;background:rgba(0,54,71,.08);color:var(--cmh-navy)}
#cmh-app .cmh-floatcard__ic--green{background:rgba(55,184,117,.15);color:var(--cmh-green-deep)}
#cmh-app .cmh-dot{position:absolute;border-radius:50%;z-index:0}
#cmh-app .cmh-dot--a{width:10px;height:10px;background:var(--cmh-green);top:5%;right:13%}
#cmh-app .cmh-dot--b{width:7px;height:7px;background:var(--cmh-amber);top:32%;right:-1%}
#cmh-app .cmh-dot--c{width:12px;height:12px;background:var(--cmh-sky);bottom:7%;left:-3%}
#cmh-app .cmh-dot--d{width:6px;height:6px;background:var(--cmh-purple);bottom:30%;right:7%}

/* ---- ABOUT ---- */
#cmh-app .cmh-dabout-sec{padding:46px 0 6px}

/* ---- FEATURE (icon) CARDS — what-you-learn / who-its-for ---- */
#cmh-app .cmh-feat{display:grid;gap:20px;margin-top:6px}
#cmh-app .cmh-feat--4{grid-template-columns:repeat(4,1fr)}
#cmh-app .cmh-feat--3{grid-template-columns:repeat(3,1fr)}
#cmh-app .cmh-feat--2{grid-template-columns:repeat(2,1fr);max-width:780px;margin-left:auto;margin-right:auto}
#cmh-app .cmh-feat__card{background:#fff;border:1px solid var(--cmh-line);border-radius:var(--cmh-radius);box-shadow:0 4px 18px rgba(0,54,71,.07);padding:28px 22px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:15px}
#cmh-app .cmh-feat__ic{display:flex;align-items:center;justify-content:center;width:58px;height:58px;border-radius:50%;background:rgba(55,184,117,.13);color:var(--cmh-green-deep)}
#cmh-app .cmh-feat__t{font-size:15px;line-height:1.45;color:var(--cmh-ink);font-weight:500;margin:0}
#cmh-app .cmh-whofor-sec .cmh-feat__ic{background:rgba(0,54,71,.08);color:var(--cmh-navy)}

/* ---- CURRICULUM (2-col: accordion + free-sample card) ---- */
#cmh-app .cmh-curric2{display:grid;grid-template-columns:1.15fr .85fr;gap:30px;align-items:start;margin-top:8px}
#cmh-app .cmh-acc{background:#fff;border:1px solid var(--cmh-line);border-radius:var(--cmh-radius);box-shadow:0 4px 18px rgba(0,54,71,.07);overflow:hidden}
#cmh-app .cmh-acc__item{border-bottom:1px solid var(--cmh-line)}
#cmh-app .cmh-acc__item:last-child{border-bottom:none}
#cmh-app .cmh-acc__item.is-free{background:rgba(55,184,117,.055)}
#cmh-app .cmh-acc__head{display:flex;align-items:center;gap:13px;width:100%;background:none;border:none;cursor:pointer;text-align:left;padding:16px 18px;font-family:inherit}
#cmh-app .cmh-acc__num{flex:0 0 auto;width:28px;height:28px;border-radius:8px;background:var(--cmh-navy);color:#fff;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center}
#cmh-app .cmh-acc__item.is-free .cmh-acc__num{background:var(--cmh-green)}
#cmh-app .cmh-acc__title{flex:1;font-weight:600;color:var(--cmh-navy);line-height:1.3;font-size:15.5px}
#cmh-app .cmh-acc__tag{flex:0 0 auto;background:rgba(55,184,117,.15);color:var(--cmh-green-deep);font-weight:800;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;padding:4px 9px;border-radius:999px}
#cmh-app .cmh-acc__chev{flex:0 0 auto;color:var(--cmh-muted);transition:transform .2s ease}
#cmh-app .cmh-acc__head[aria-expanded="true"] .cmh-acc__chev{transform:rotate(180deg)}
#cmh-app .cmh-acc__panel{padding:0 18px 18px 59px}
#cmh-app .cmh-acc__panel[hidden]{display:none}
#cmh-app .cmh-acc__panel .cmh-prose--sm{font-size:14.5px;color:var(--cmh-muted)}
#cmh-app .cmh-spc{background:#fff;border:1px solid var(--cmh-line);border-radius:18px;box-shadow:0 14px 34px rgba(0,54,71,.12);padding:22px 22px 24px;position:sticky;top:20px}
#cmh-app .cmh-spc__tag{display:inline-block;margin-bottom:10px}
#cmh-app .cmh-spc__title{font-weight:900;font-size:20px;color:var(--cmh-navy);line-height:1.2;margin:0 0 14px}
#cmh-app .cmh-spc__preview{margin:0 0 14px;border-radius:12px;overflow:hidden;border:1px solid var(--cmh-line)}
#cmh-app .cmh-spc__preview svg{display:block}
#cmh-app .cmh-spc__desc{font-size:14.5px;color:var(--cmh-muted)}

/* ---- FINAL CTA (2-col card) ---- */
#cmh-app .cmh-fcta-sec{padding:46px 0 60px}
#cmh-app .cmh-fcta{display:grid;grid-template-columns:.82fr 1.18fr;background:#fff;border:1px solid var(--cmh-line);border-radius:20px;box-shadow:0 20px 50px rgba(0,54,71,.15);overflow:hidden}
#cmh-app .cmh-fcta__media{min-width:0;display:flex;align-items:center;justify-content:center;background:#fff}
#cmh-app .cmh-fcta__img{width:100%}
#cmh-app .cmh-fcta__img img{width:100%;height:auto;object-fit:contain;display:block}
#cmh-app .cmh-fcta__body{position:relative;padding:42px 42px 44px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
#cmh-app .cmh-fcta__body .cmh-eyebrow{text-align:left;margin-bottom:10px}
#cmh-app .cmh-fcta__h{font-weight:900;font-size:clamp(26px,3.3vw,36px);line-height:1.08;letter-spacing:-.015em;color:var(--cmh-navy);margin:0 0 8px}
#cmh-app .cmh-fcta__sub{font-size:16px;color:var(--cmh-muted);margin:0 0 20px}

/* ---- RESPONSIVE ---- */
@media(max-width:900px){
  #cmh-app .cmh-dhero__grid{grid-template-columns:1fr;gap:34px;padding:46px 22px 50px}
  #cmh-app .cmh-dhero__media{order:-1;max-width:460px;margin:0 auto;width:100%}
  #cmh-app .cmh-dhero__copy{display:flex;flex-direction:column;align-items:center;text-align:center}
  #cmh-app .cmh-dhero__copy .cmh-eyebrow{text-align:center}
  #cmh-app .cmh-dhero__lead{max-width:560px}
  #cmh-app .cmh-dhero__fine{justify-content:center}
  #cmh-app .cmh-feat--4{grid-template-columns:repeat(2,1fr)}
  #cmh-app .cmh-curric2{grid-template-columns:1fr;gap:22px}
  #cmh-app .cmh-spc{position:static}
  #cmh-app .cmh-fcta{grid-template-columns:1fr}
  #cmh-app .cmh-fcta__img{min-height:190px}
  #cmh-app .cmh-fcta__body{padding:34px 30px 36px}
}
@media(max-width:560px){
  #cmh-app .cmh-dhero__grid{padding:36px 18px 42px}
  #cmh-app .cmh-dhero__h{font-size:31px}
  #cmh-app .cmh-dhero__lead{font-size:16.5px}
  #cmh-app .cmh-dhero__cta .cmh-btn{width:100%}
  #cmh-app .cmh-floatcard{width:50px;height:50px}
  #cmh-app .cmh-floatcard--tl{top:-16px;left:-10px}
  #cmh-app .cmh-floatcard--br{bottom:-16px;right:-8px}
  #cmh-app .cmh-feat--2,#cmh-app .cmh-feat--3,#cmh-app .cmh-feat--4{grid-template-columns:1fr}
  #cmh-app .cmh-acc__panel{padding-left:18px}
  #cmh-app .cmh-fcta__body{padding:28px 22px 30px}
}


/* ============================================================================
   14) DUAL CTA (Upgrade to Pro + buy individually) + RELATED COURSES  (2026-06-25)
   The detail hero / final-CTA show two buttons side by side (red Pro CTA +
   ghost "Buy this course $49"); the locked /learn/ offer stacks them with an
   "or own just this course" divider. Related courses reuse .cmh-card.
============================================================================ */
#cmh-app .cmh-dhero__cta,
#cmh-app .cmh-fcta__cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
#cmh-app .cmh-offer__or{
  font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--cmh-muted);margin:16px 0 12px;
}
#cmh-app .cmh-related-sec .cmh-h2{margin-bottom:28px}
#cmh-app .cmh-archive--rel{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
@media(max-width:560px){
  #cmh-app .cmh-dhero__cta .cmh-btn,
  #cmh-app .cmh-fcta__cta .cmh-btn{width:100%}
}


/* ============================================================================
   15) COURSE DETAILS REDESIGN (cmh-cd-*) — Claude Design handoff, 2026-06-25.
   Centered editorial layout (forest-green palette) with a sticky offer aside.
   Section colours/spacing live inline on the markup; this block carries the
   cover-image sizing + the responsive collapses (inline grid cols need
   !important to override on small screens).
============================================================================ */
#cmh-app .cmh-cd-coverimg{width:100%;height:360px;border-radius:18px;overflow:hidden}
#cmh-app .cmh-cd-coverimg img{width:100%;height:100%;object-fit:cover;display:block}
/* Real cover images can be any aspect ratio — show the WHOLE image, never crop
   (a wide 2.04:1 illustration was getting its edges cut by object-fit:cover). The
   no-cover fallback keeps its fixed height. :not() outranks the mobile height rule. */
#cmh-app .cmh-cd-coverimg:not(.cmh-cover--fallback){height:auto;min-height:220px;background:#FBF6EE}
#cmh-app .cmh-cd-coverimg:not(.cmh-cover--fallback) img{height:auto;object-fit:contain}
/* The aside is the in-flow grid track (full column height); .cmh-cd-asidecard inside
   carries the card look and is pinned on scroll by cmh.js. */
#cmh-app .cmh-cd-aside{position:relative;height:100%}
#cmh-app .cmh-cd-asideimg{width:100%;aspect-ratio:1/1;border-radius:14px;overflow:hidden}
#cmh-app .cmh-cd-asideimg img{width:100%;height:100%;object-fit:cover;display:block}
#cmh-app .cmh-cd-asidecta .cmh-btn{width:100%}
@media(max-width:880px){
  #cmh-app .cmh-cd-hero{grid-template-columns:1fr !important;gap:30px !important}
  #cmh-app .cmh-cd-heromedia{order:-1}
  #cmh-app .cmh-cd-coverimg{height:260px}
  #cmh-app .cmh-cd-main{grid-template-columns:1fr !important;gap:40px !important}
  #cmh-app .cmh-cd-aside{position:static !important;max-width:440px}
  #cmh-app .cmh-cd-who{grid-template-columns:1fr 1fr !important}
}
@media(max-width:560px){
  #cmh-app .cmh-cd-who{grid-template-columns:1fr !important}
  #cmh-app .cmh-cd-sec{padding-left:18px !important;padding-right:18px !important}
}


/* ============================================================================
   16) PLAYER v2 (cmh-pl) — two-column course player: sticky progress sidebar +
   lesson cards with server-tracked mark-complete. (2026-07-02)
============================================================================ */
#cmh-app .cmh-pl{display:grid;grid-template-columns:280px minmax(0,1fr);gap:26px;align-items:start;max-width:1120px;margin:0 auto}
/* Sticky is driven by cmh.js (a theme ancestor's overflow defeats position:sticky);
   the column just reserves the space. Lessons offset anchor jumps below the fixed nav. */
#cmh-app .cmh-pl__side{position:relative;height:100%}
#cmh-app .cmh-pl__main .cmh-lesson{scroll-margin-top:96px}
#cmh-app .cmh-pl__sidecard{background:#fff;border:1px solid var(--cmh-line);border-radius:var(--cmh-radius);box-shadow:var(--cmh-shadow);padding:20px 18px 14px}
#cmh-app .cmh-pl__sideh{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--cmh-muted);margin:0 0 12px}
#cmh-app .cmh-pl__bar{height:9px;border-radius:999px;background:var(--cmh-panel);overflow:hidden;border:1px solid var(--cmh-line)}
#cmh-app .cmh-pl__barfill{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--cmh-green),var(--cmh-green-deep));transition:width .35s ease}
#cmh-app .cmh-pl__count{font-size:13px;color:var(--cmh-muted);margin:9px 0 14px}
#cmh-app .cmh-pl__count b{color:var(--cmh-green-deep);font-weight:800}
#cmh-app .cmh-pl__nav{display:flex;flex-direction:column;border-top:1px solid var(--cmh-line)}
#cmh-app .cmh-pl__navrow{display:flex;align-items:center;gap:11px;padding:11px 4px;border-bottom:1px solid var(--cmh-line);color:var(--cmh-navy);text-decoration:none;transition:background .12s}
#cmh-app .cmh-pl__navrow:last-child{border-bottom:none}
#cmh-app .cmh-pl__navrow:hover{background:var(--cmh-soft)}
#cmh-app .cmh-pl__navnum{flex:0 0 auto;width:26px;height:26px;border-radius:8px;background:var(--cmh-panel);color:var(--cmh-navy);font-weight:800;font-size:12.5px;display:flex;align-items:center;justify-content:center;border:1px solid var(--cmh-line)}
#cmh-app .cmh-pl__navrow.is-done .cmh-pl__navnum{background:var(--cmh-green);border-color:var(--cmh-green);color:#fff}
#cmh-app .cmh-pl__navt{flex:1;font-size:13.5px;font-weight:600;line-height:1.3}
#cmh-app .cmh-pl__navrow.is-done .cmh-pl__navt{color:var(--cmh-muted);font-weight:500}
#cmh-app .cmh-pl__main{min-width:0}
#cmh-app .cmh-pl__main .cmh-lesson{max-width:none;margin:0 0 22px}

/* lesson done state */
#cmh-app .cmh-lesson__h{flex-wrap:wrap}
#cmh-app .cmh-lesson.is-done .cmh-lesson__num{background:var(--cmh-green)}
#cmh-app .cmh-lesson__donetag{display:inline-flex;align-items:center;gap:6px;margin-left:auto;background:rgba(55,184,117,.13);color:var(--cmh-green-deep);font-weight:800;font-size:11px;letter-spacing:.05em;text-transform:uppercase;padding:5px 12px;border-radius:999px}
#cmh-app .cmh-lesson__donetag[hidden]{display:none}

/* mark-complete toggle */
#cmh-app .cmh-lesson__foot{margin-top:24px;padding-top:18px;border-top:1px solid var(--cmh-line)}
#cmh-app .cmh-pl__markbtn{display:inline-flex;align-items:center;gap:11px;background:#fff;border:2px solid var(--cmh-line);border-radius:999px;padding:11px 22px 11px 13px;font-family:inherit;font-size:14.5px;font-weight:700;color:var(--cmh-navy);cursor:pointer;transition:border-color .15s,box-shadow .15s}
#cmh-app .cmh-pl__markbtn:hover{border-color:var(--cmh-green);box-shadow:0 6px 16px rgba(55,184,117,.18)}
#cmh-app .cmh-pl__markbox{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;border:2px solid var(--cmh-line);color:transparent;transition:background .15s,border-color .15s,color .15s}
#cmh-app .cmh-pl__markbtn.is-done{border-color:var(--cmh-green);background:rgba(55,184,117,.07)}
#cmh-app .cmh-pl__markbtn.is-done .cmh-pl__markbox{background:var(--cmh-green);border-color:var(--cmh-green);color:#fff}
#cmh-app .cmh-pl__markbtn.is-done .cmh-pl__marklabel{color:var(--cmh-green-deep)}

/* all-done banner */
#cmh-app .cmh-pl__doneban{background:#fff;border:2px solid var(--cmh-green);border-radius:20px;overflow:hidden;box-shadow:var(--cmh-shadow-lg);margin-top:4px}
#cmh-app .cmh-pl__doneban[hidden]{display:none}
#cmh-app .cmh-pl__doneban .cmh-rainbow{height:7px}
#cmh-app .cmh-pl__doneban__in{padding:24px 28px 26px;text-align:center}
#cmh-app .cmh-pl__doneban__h{font-weight:900;font-size:21px;color:var(--cmh-navy);margin:0 0 7px}
#cmh-app .cmh-pl__doneban__p{font-size:14.5px;color:var(--cmh-muted);margin:0}

@media(max-width:900px){
  #cmh-app .cmh-pl{grid-template-columns:1fr;gap:20px}
  #cmh-app .cmh-pl__side{position:static}
  #cmh-app .cmh-pl__nav{max-height:none}
}