@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Open+Sans:wght@400;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&display=swap');

/*
 * Cancer Mastery Course - opt-in lander.
 *
 * Everything is scoped under .cm-page (or the body class) so the theme's shared
 * selectors stay out of it and these rules stay out of every other template.
 * The theme hides elements inline and un-hides them in media queries with
 * !important, so anything that must stay put here is pinned explicitly.
 */

.cm-lp-body {
  margin: 0;
  padding: 0;
  background: #fff;
}

.cm-page {
  --cm-navy: #01375e;
  --cm-navy-deep: #012237;
  --cm-navy-mid: #02456f;
  --cm-gold: #d7a233;
  --cm-gold-light: #e6b64a;
  --cm-gold-dark: #b77e16;
  --cm-ink: #15202b;
  --cm-body: #4a5663;
  --cm-line: #e2e7ec;
  --cm-cream: #f8f6f1;

  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--cm-body);
  background: #fff;
  overflow-x: hidden;
}

/* Local reset - the parent theme styles bare tags site-wide. */
.cm-page *,
.cm-page *::before,
.cm-page *::after { box-sizing: border-box; }

/*
 * These element resets are wrapped in :where() on purpose.
 *
 * `.cm-page p` is specificity 0-1-1, which silently outranks every
 * single-class component rule below it (`.cm-privacy-note`, `.cm-module__date`
 * and so on are 0-1-0) - the component rule is in the file, matches the
 * element, and still loses. :where() contributes nothing to specificity, so
 * these land at 0-1-0: still enough to beat the parent theme's bare `p`/`ul`
 * rules at 0-0-1, but low enough that a component class always wins.
 */
.cm-page :where(h1, h2, h3, h4) {
  font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  color: var(--cm-navy);
  margin: 0 0 18px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.cm-page :where(p) { margin: 0 0 16px; }

/*
 * custom.css carries a site-wide `a { color: #1451df !important; }`, so every
 * link colour on this page has to answer it in kind. Scoped to .cm-page, so
 * nothing outside this template is touched. Not :where() - this one has to
 * win outright.
 */
.cm-page a { color: var(--cm-navy-mid) !important; }
.cm-page :where(img) { max-width: 100%; height: auto; display: block; }
.cm-page :where(ul) { margin: 0 0 16px; padding: 0 0 0 20px; }

.cm-wrap {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

.cm-wrap--narrow { max-width: 860px; }

/* ---------------------------------------------------------------- eyebrow */

.cm-eyebrow {
  font-family: 'Barlow Condensed', 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  margin: 0 0 14px;
  color: var(--cm-gold);
}

.cm-eyebrow--navy { color: var(--cm-navy-mid); }

/* --------------------------------------------------------------- nanobar */

/*
 * Plain text on a navy strip. No GIF, no gradient, no pulse - the brief was
 * "clean, professorial", and the old QFTC nanobars were animated background
 * images with the clock positioned on top of them.
 */
.cm-nanobar {
  background: var(--cm-navy-deep);
  border-bottom: 2px solid var(--cm-gold);
  padding: 9px 20px;
}

.cm-nanobar__inner {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 22px;
}

.cm-nanobar__label {
  margin: 0;
  font-family: 'Barlow Condensed', 'Open Sans', sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #cddbe9;
}

.cm-nanobar__label b { color: var(--cm-gold-light); font-weight: 700; }

.cm-nanobar__cd { display: flex; align-items: flex-end; gap: 14px; }

/* One unit of the clock: number over label. */
.cm-nanobar .cm-cd {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  min-width: 34px;
}

.cm-nanobar .cm-cd b {
  font-family: 'Barlow Condensed', 'Open Sans', sans-serif;
  font-size: 23px;
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.cm-nanobar .cm-cd i {
  margin-top: 3px;
  font-style: normal;
  font-family: 'Barlow Condensed', 'Open Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8fa6bd;
}

/* Premiere day has arrived - drop the clock, keep the bar. */
.cm-nanobar__inner.is-live .cm-nanobar__cd { display: none; }

/* ----------------------------------------------------------------- hero */

.cm-hero {
  position: relative;
  background-color: var(--cm-navy-deep);
  background-position: 28% center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 64px 0 72px;
}

/* Gradient sits over the studio still so the photo reads as depth, not subject. */
.cm-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(1, 34, 55, 0.95) 0%,
    rgba(1, 34, 55, 0.88) 42%,
    rgba(1, 55, 94, 0.82) 100%
  );
}

.cm-hero > .cm-wrap { position: relative; z-index: 1; }

/* Video left, opt-in right; they stack with the video first on a phone. */
.cm-hero__grid {
  display: grid;
  grid-template-columns: 1fr 440px;
  grid-template-areas: 'video form';
  column-gap: 48px;
  row-gap: 26px;
  align-items: start;
}

.cm-hero__video { grid-area: video; padding-top: 2px; min-width: 0; }
.cm-hero__form { grid-area: form; }

.cm-hero__title {
  color: #fff;
  font-size: 38px;
  line-height: 1.14;
  margin: 0 0 20px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

.cm-hero__title em {
  font-style: normal;
  color: var(--cm-gold-light);
}

.cm-hero__under {
  margin: 16px 0 0;
  color: #cfdcea;
  font-size: 15.5px;
  line-height: 1.55;
}

.cm-hero__under b { color: var(--cm-gold-light); font-weight: 600; }

/* ----------------------------------------------------------------- video */

/*
 * 16:9 box that holds either the Rumble iframe or the placeholder, so the
 * hero does not reflow when the real video id is dropped in.
 */
.cm-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #05101d;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
}

.cm-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.cm-video__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background:
    radial-gradient(circle at 50% 42%, rgba(1, 55, 94, 0.85) 0%, rgba(3, 16, 29, 0.95) 70%);
}

.cm-video__play {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: rgba(215, 162, 51, 0.16);
  border: 2px solid var(--cm-gold);
  position: relative;
}

.cm-video__play::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 13px 0 13px 21px;
  border-color: transparent transparent transparent var(--cm-gold);
}

.cm-video__label {
  font-family: 'Barlow Condensed', 'Open Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9fb4ca;
}

/* The logo now sits above the opt-in box rather than in a bar of its own. */
.cm-hero__logo {
  width: 100%;
  max-width: 310px;
  margin: 0 auto 18px;
  display: block;
  background: #fff;
  border-radius: 8px;
  padding: 12px 16px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
}

/* ------------------------------------------------------------- opt-in card */

.cm-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.cm-card__head {
  background: var(--cm-navy);
  padding: 20px 26px 18px;
  text-align: center;
  border-bottom: 4px solid var(--cm-gold);
}

.cm-card__head .cm-card__kicker {
  margin: 0 0 8px;
  font-family: 'Barlow Condensed', 'Open Sans', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--cm-gold-light);
}

.cm-card__head h2 {
  color: #fff;
  font-size: 24px;
  margin: 0 0 6px;
  line-height: 1.22;
}

.cm-card__head :where(p) {
  margin: 0;
  color: #bed0e0;
  font-size: 14.5px;
  line-height: 1.45;
}

.cm-card__body { padding: 24px 26px 26px; }

/* ------------------------------------------------------------------ form */

.cm-form label { display: block; }

.cm-form input[type='text'],
.cm-form input[type='email'],
.cm-form input[type='tel'] {
  width: 100%;
  display: block;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  line-height: 1.3;
  color: var(--cm-ink);
  background: #fff;
  padding: 14px 15px;
  margin: 0 0 12px;
  border: 1px solid #c3ccd6;
  border-radius: 7px;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

.cm-form input[type='text']:focus,
.cm-form input[type='email']:focus,
.cm-form input[type='tel']:focus {
  outline: none;
  border-color: var(--cm-navy-mid);
  box-shadow: 0 0 0 3px rgba(2, 69, 111, 0.15);
}

.cm-form input::placeholder { color: #8d99a5; opacity: 1; }

.cm-consent {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.5;
  color: #5b6773;
  cursor: pointer;
}

.cm-consent input[type='checkbox'] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 3px 0 0;
  accent-color: var(--cm-navy);
  cursor: pointer;
}

.cm-consent a { color: var(--cm-navy-mid) !important; text-decoration: underline; }

.cm-consent--emphasis { color: var(--cm-ink); }
.cm-consent--emphasis b { text-transform: uppercase; font-size: 12.5px; letter-spacing: 0.03em; }

/* Phone block is revealed by the opt-in toggle, not by a media query. */
.cm-phone { display: none; }
.cm-phone.is-open { display: block; }
.cm-phone .cm-phone__hint {
  margin: -4px 0 12px 2px;
  font-size: 12.5px;
  line-height: 1.4;
  color: #8d99a5;
}

.cm-submit {
  display: block;
  width: 100%;
  font-family: 'Barlow Condensed', 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 23px;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: #1d1403;
  background: linear-gradient(180deg, var(--cm-gold-light) 0%, var(--cm-gold) 55%, var(--cm-gold-dark) 100%);
  border: 0;
  border-radius: 8px;
  padding: 16px 20px;
  margin: 4px 0 0;
  cursor: pointer;
  box-shadow: 0 4px 0 #8f6210;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

.cm-submit:hover,
.cm-submit:focus {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 5px 0 #8f6210;
}

.cm-submit:active { transform: translateY(2px); box-shadow: 0 2px 0 #8f6210; }

/*
 * The button carries a 4px bottom shadow, so a plain top margin sits the note
 * tight against it. This clears the shadow and then some.
 */
.cm-privacy-note {
  margin: 22px 0 2px;
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
  color: #6b7682;
}

/* ---------------------------------------------------------------- notices */

.cm-notice {
  border-radius: 7px;
  padding: 12px 15px;
  margin: 0 0 16px;
  font-size: 14.5px;
  line-height: 1.5;
}

.cm-notice--ok { background: #e4f1e0; color: #2f6327; border: 1px solid #bcdcb3; }
.cm-notice--err { background: #fbeaea; color: #8a1f1f; border: 1px solid #efc5c5; }

/* --------------------------------------------------------------- sections */

.cm-section { padding: 72px 0; }
.cm-section--cream { background: var(--cm-cream); }
.cm-section--navy { background: var(--cm-navy-deep); }
.cm-section--tight { padding: 56px 0; }

.cm-section__head {
  max-width: 760px;
  margin: 0 auto 46px;
  text-align: center;
}

.cm-section__head h2 { font-size: 38px; margin: 0 0 14px; }
.cm-section__head p { font-size: 18px; margin: 0; }

.cm-section--navy .cm-section__head h2 { color: #fff; }
.cm-section--navy .cm-section__head p { color: #c3d2e0; }

.cm-rule {
  width: 62px;
  height: 4px;
  background: var(--cm-gold);
  border-radius: 2px;
  margin: 0 auto 20px;
}


/* ------------------------------------------------- intro (the argument) */

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

.cm-intro h2 {
  font-size: 37px;
  line-height: 1.16;
  margin: 0 0 18px;
}

.cm-intro h2 em {
  font-style: normal;
  color: var(--cm-gold-dark);
}

.cm-intro__lead {
  font-size: 18.5px;
  line-height: 1.6;
  margin: 0 auto 30px;
  max-width: 680px;
}

/* Checklist - left-aligned inside a centred column, so the ticks line up. */
.cm-facts {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  gap: 14px;
  max-width: 620px;
  text-align: left;
}

.cm-facts li {
  position: relative;
  padding-left: 32px;
  color: var(--cm-body);
  font-size: 16.5px;
  line-height: 1.5;
}

.cm-facts li b { color: var(--cm-ink); }

.cm-facts li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 15px;
  height: 9px;
  border-left: 3px solid var(--cm-gold-dark);
  border-bottom: 3px solid var(--cm-gold-dark);
  transform: rotate(-45deg);
}

/* -------------------------------------------------------------- curriculum */

.cm-modules {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.cm-module {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 18px;
  background: #fff;
  border: 1px solid var(--cm-line);
  border-radius: 10px;
  padding: 22px 24px;
}

.cm-module__num {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--cm-navy);
  border-radius: 7px;
  height: 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.cm-module__num span {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--cm-gold-light);
  margin-bottom: 3px;
}

.cm-module__date {
  font-family: 'Barlow Condensed', 'Open Sans', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--cm-gold-dark);
  margin: 0 0 4px;
}

.cm-modules__note {
  margin: 26px 0 0;
  text-align: center;
  font-size: 16px;
  line-height: 1.55;
  color: var(--cm-body);
}

.cm-module h3 { font-size: 20px; margin: 0 0 3px; line-height: 1.25; }

.cm-module__sub {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cm-gold-dark);
  margin: 0 0 9px;
}

/* The description only - a bare `p` here would outrank .cm-module__date. */
.cm-module__desc { font-size: 15px; line-height: 1.55; margin: 0; }

/* -------------------------------------------------------------- instructor */

.cm-instructor {
  display: grid;
  grid-template-columns: 460px 1fr;
  gap: 50px;
  align-items: center;
}

.cm-instructor__figure {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 16px 38px rgba(1, 34, 55, 0.2);
}

.cm-instructor h2 { font-size: 36px; }

/* --------------------------------------------------------------- CTA band */

.cm-cta-band {
  background: linear-gradient(180deg, var(--cm-navy) 0%, var(--cm-navy-deep) 100%);
  padding: 68px 0;
}

.cm-cta-band__grid {
  display: grid;
  grid-template-columns: 1fr 440px;
  gap: 48px;
  align-items: center;
}

.cm-cta-band h2 { color: #fff; font-size: 36px; }
/* The body copy only - a bare `p` here would outrank .cm-eyebrow. */
.cm-cta-band__body { color: #c3d2e0; font-size: 17.5px; margin: 0; }

/* -------------------------------------------------------------------- FAQ */

.cm-faq { max-width: 820px; margin: 0 auto; }

.cm-faq__item {
  border: 1px solid var(--cm-line);
  border-radius: 10px;
  background: #fff;
  padding: 22px 26px;
  margin: 0 0 14px;
}

.cm-faq__item h3 { font-size: 19px; margin: 0 0 8px; }
.cm-faq__item p { font-size: 15.5px; margin: 0; }
.cm-faq__item p + p { margin-top: 10px; }

/* ----------------------------------------------------------------- footer */

.cm-footer {
  background: #0b1722;
  color: #8a98a7;
  padding: 44px 0 50px;
  font-size: 13.5px;
  line-height: 1.65;
  text-align: center;
}

.cm-footer__disclaimer {
  max-width: 820px;
  margin: 0 auto 22px;
  color: #7c8a99;
  font-size: 12.5px;
  line-height: 1.6;
}

.cm-footer a { color: #a7b5c4 !important; text-decoration: underline; }

.cm-footer__links { margin: 14px 0 0; }
.cm-footer__links a { margin: 0 9px; white-space: nowrap; }

/* ------------------------------------------------------------- responsive */

@media (max-width: 1040px) {
  .cm-hero__grid { grid-template-columns: 1fr 390px; column-gap: 34px; }
  .cm-cta-band__grid { grid-template-columns: 1fr 390px; gap: 34px; }
  .cm-instructor { grid-template-columns: 380px 1fr; gap: 36px; }
  .cm-hero__title { font-size: 34px; }
}

@media (max-width: 880px) {
  .cm-hero { padding: 48px 0 56px; background-position: center center; }

  /* Video, then the form. */
  .cm-hero__grid {
    grid-template-columns: 1fr;
    grid-template-areas: 'video' 'form';
    gap: 30px;
  }

  .cm-cta-band__grid,
  .cm-instructor { grid-template-columns: 1fr; gap: 34px; }

  .cm-instructor__figure { order: -1; }
  .cm-modules { grid-template-columns: 1fr; }
  .cm-section { padding: 56px 0; }
  .cm-section__head { margin-bottom: 34px; }
  .cm-section__head h2 { font-size: 31px; }
  .cm-intro h2 { font-size: 31px; }
  .cm-instructor h2,
  .cm-cta-band h2 { font-size: 30px; }
}

@media (max-width: 600px) {
  .cm-page { font-size: 16px; }
  .cm-wrap { padding: 0 16px; }
  .cm-nanobar { padding: 8px 14px; }
  .cm-nanobar__inner { gap: 7px 14px; }
  .cm-nanobar__label { font-size: 14.5px; letter-spacing: 0.09em; }
  .cm-nanobar__cd { gap: 11px; }
  .cm-nanobar .cm-cd b { font-size: 19px; }
  .cm-nanobar .cm-cd i { font-size: 10px; }
  .cm-hero__logo { max-width: 250px; padding: 10px 12px; margin-bottom: 14px; }

  .cm-hero { padding: 32px 0 40px; }
  .cm-hero__title { font-size: 27px; }
  .cm-hero__under { font-size: 14.5px; }
  .cm-facts li { font-size: 15.5px; }
  .cm-intro h2 { font-size: 25px; }
  .cm-intro__lead { font-size: 16.5px; }

  .cm-card__head { padding: 17px 18px 15px; }
  .cm-card__head h2 { font-size: 21px; }
  .cm-card__body { padding: 20px 18px 22px; }
  .cm-submit { font-size: 20px; padding: 15px 14px; }

  .cm-section { padding: 44px 0; }
  .cm-section__head h2 { font-size: 26px; }
  .cm-section__head p { font-size: 16.5px; }

  .cm-module { grid-template-columns: 48px 1fr; gap: 14px; padding: 18px 18px; }
  .cm-module__num { height: 48px; font-size: 13px; }
  .cm-module h3 { font-size: 18px; }

  .cm-instructor h2,
  .cm-cta-band h2 { font-size: 25px; }
  .cm-module__date { font-size: 12.5px; }
  .cm-modules__note { font-size: 15px; }
  .cm-cta-band { padding: 46px 0; }
  .cm-faq__item { padding: 18px 18px; }
}