/* ==========================================================================
   Site styles — colours sampled directly from the design mockups
   ========================================================================== */

:root {
  --gold:       #EBD186;
  --gold-dark:  #D4BC79;
  --cream:      #F7E6BC;
  --bg:         #F8F7F5;
  --white:      #FFFFFF;
  --ink:        #202124;
  --muted:      #909090;
  --faint:      #B7B7B6;
  --blue:       #406DED;
  --star:       #F4CE4D;
  --line:       #E3E3E3;
  --field:      #D6D6D6;
  --ph:         #C6C6C6;

  --wrap:       1080px;
  --radius:     4px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

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

.wrap--narrow { max-width: 900px; }
.wrap--text   { max-width: 1000px; }
.wrap--wide   { max-width: 1140px; }

/* Visually hidden, still read by screen readers */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* "Custom HTML / JavaScript" slots.
   A slot that is empty — or that only holds <script> tags, like the confetti —
   renders nothing, so it must not reserve any space either. Scripts still run
   normally inside a display:none parent. */
.custom-slot { margin-top: 56px; }
.custom-slot:empty { display: none; }
.custom-slot:not(:has(:not(script))) { display: none; }

/* --------------------------------------------------------------------------
   Announcement bar
   -------------------------------------------------------------------------- */

/* The bar is a link to the free Skool community */
.announce {
  display: block;
  background: var(--cream);
  color: var(--ink);
  text-align: center;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  padding: 13px 16px;
}

.announce:hover { color: var(--ink); text-decoration: underline; }

.announce .icon {
  width: 17px;
  height: 17px;
  vertical-align: -3px;
  margin-right: 7px;
}

/* --------------------------------------------------------------------------
   Header / navigation
   -------------------------------------------------------------------------- */

.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 80px;
}

.nav__links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  gap: 16px;
}

.nav__link {
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav__link:hover { color: var(--ink); text-decoration: none; }

.nav__cta {
  display: inline-block;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 14px 20px;
  white-space: nowrap;
}

.nav__cta:hover { color: var(--ink); border-color: var(--muted); text-decoration: none; }

/* Logo lockup */

.logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.logo:hover { text-decoration: none; }

.logo__mark { width: 30px; height: 19px; flex: none; }

.logo--sm { font-size: 18px; }
.logo--sm .logo__mark { width: 26px; height: 16px; }

/* Only used below 900px, where the centred logo is swapped for a left one */
.nav__logo--mobile { display: none; }

/* Minimal header used on the funnel pages (no nav) */

.site-header--minimal .nav { justify-content: center; height: 56px; }

/* Mobile nav toggle */

.nav__toggle {
  display: none;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
  color: var(--ink);
}

.nav__toggle svg { width: 22px; height: 22px; }

/* --------------------------------------------------------------------------
   Sections & headings
   -------------------------------------------------------------------------- */

.section { padding: 96px 0; }
.section--hero { padding: 130px 0 40px; }

/* Doubled class so these modifiers still win inside the mobile media query */
.section.section--tight      { padding: 56px 0; }
.section.section--flush-top  { padding-top: 0; }
.section.section--flush-bottom { padding-bottom: 0; }

.center { text-align: center; }

.eyebrow {
  color: var(--blue);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin: 0 0 22px;
}

h1, .h1 {
  font-size: clamp(34px, 4.6vw, 58px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
}

h2, .h2 {
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0;
}

.lede {
  font-size: 18px;
  line-height: 1.45;
  margin: 22px auto 0;
  max-width: 640px;
}

.hero__title { max-width: 900px; margin-inline: auto; }
.hero__title--wide   { max-width: 1040px; }
.hero__title--narrow { max-width: 720px; }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--gold);
  color: var(--ink);
  border: 0;
  border-radius: var(--radius);
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.16);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 19px 34px;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.15s ease;
}

.btn:hover { filter: brightness(0.96); text-decoration: none; }
.btn:active { transform: translateY(1px); }

.btn--block { width: 100%; }
.btn--plain { text-transform: none; letter-spacing: 0; font-size: 17px; }
.btn--flat  { box-shadow: none; }

.btn .chev { width: 8px; height: 12px; flex: none; }

/* --------------------------------------------------------------------------
   Rating line
   -------------------------------------------------------------------------- */

.rating { margin-top: 22px; text-align: center; }

.rating__text { font-size: 13px; color: var(--muted); }
.rating__text b { color: var(--ink); font-weight: 700; }

.rating__stars {
  color: var(--star);
  font-size: 17px;
  letter-spacing: 2px;
  margin-top: 2px;
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 72px;
}

.cards--one { grid-template-columns: minmax(0, 320px); justify-content: center; }

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-align: left;
}

.card__media {
  aspect-ratio: 16 / 9;
  background: var(--ph);
  display: grid;
  place-items: center;
}

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

.card__media svg { width: 110px; height: 110px; color: rgba(255, 255, 255, 0.55); }

.card__body { padding: 22px 20px 24px; display: flex; flex-direction: column; flex: 1; }

.card__title { font-size: 17px; font-weight: 700; margin: 0 0 16px; }

.card__desc { font-size: 15px; line-height: 1.55; margin: 0 0 18px; }

.card__meta { font-size: 15px; margin: 0 0 22px; }

.card .btn { margin-top: auto; }

/* --------------------------------------------------------------------------
   Media blocks — play bar + embeds
   -------------------------------------------------------------------------- */

.media { max-width: 840px; margin: 46px auto 0; }
.media--wide { max-width: 100%; }

/* Cal.com inline embed — Cal's script sets the height as people move through
   the questions and into the calendar, so only a starting height is set here. */
/* Cal's embed script injects its own stylesheet after ours and floors every
   layer at min-height:300px, which collapses the calendar to a sliver. The
   !important below is what beats it. Cal still grows the frame past this as
   people move from the questions into the month view — this is only a floor,
   so a slow connection never shows a cut-off calendar. */
.cal-embed {
  width: 100%;
  min-height: 560px !important;

  /* Cal's iframe carries roughly 85px of its own padding above the form card,
     which left a dead gap between the video and the form. Pulling the whole
     embed up reclaims it — the padding is transparent, so the video stays
     fully visible underneath. Cal's own stylesheet loads after ours and zeroes
     plain margins, hence the !important.

     Narrow screens get less padding from Cal, so the same pull would sit the
     card on top of the video — see the media query further down. */
  margin-top: -48px !important;
}

@media (max-width: 900px) {
  /* Cal tightens its own spacing here; no gap left to reclaim. */
  .cal-embed { margin-top: 0 !important; }
}

.cal-embed cal-inline { min-height: 560px !important; }
.cal-embed iframe { width: 100%; border: 0; display: block; }

.cal-embed .embed__placeholder { color: var(--ink); min-height: 620px; }

/* A step that stays out of the way until the form before it is submitted */
[hidden] { display: none !important; }

.step { animation: step-in 0.45s ease both; }

@keyframes step-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

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

.playbar {
  background: var(--cream);
  border-radius: 10px 10px 0 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  padding: 14px 16px;
  margin-bottom: 6px;
}

.playbar .icon { width: 16px; height: 16px; vertical-align: -3px; margin-right: 7px; }

.embed {
  border-radius: var(--radius);
  overflow: hidden;
  background: #1B1C1E;
}

/* Rounded only at the bottom — the cream "Click 'Play'" bar caps the top */
.embed--video { aspect-ratio: 16 / 9; border-radius: 0 0 10px 10px; }
.embed--calendar { min-height: 760px; background: #F1F3F6; }

.embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* A self-hosted video file, played by the browser itself */
.embed video {
  width: 100%;
  height: 100%;
  display: block;
  background: #000;
  object-fit: contain;
}

/* Shown until a real embed URL is set in assets/config.js */

.embed__placeholder {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 32px;
}

.embed--video .embed__placeholder { color: rgba(255, 255, 255, 0.85); }
.embed--calendar .embed__placeholder { color: var(--ink); min-height: 760px; }

.embed__placeholder .play {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  border: 2px solid rgba(255, 255, 255, 0.65);
  display: grid;
  place-items: center;
}

.embed__placeholder .play svg { width: 22px; height: 26px; }

.embed__placeholder .icon { width: 22px; height: 22px; }

.embed__placeholder b { font-size: 14px; font-weight: 700; }

.embed__placeholder span { font-size: 13px; opacity: 0.75; max-width: 340px; }

.embed__placeholder code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.form { max-width: 460px; margin: 74px auto 0; text-align: left; }

.field { position: relative; margin-bottom: 22px; }

.field__label { display: block; font-size: 15px; margin-bottom: 8px; }

.input {
  width: 100%;
  background: var(--white);
  border: 1px solid var(--field);
  border-radius: var(--radius);
  color: var(--ink);
  font-family: inherit;
  font-size: 16px;
  padding: 17px 18px;
}

.input::placeholder { color: var(--muted); }

.input:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(64, 109, 237, 0.12); }

.field--icon .input { padding-left: 46px; }

.field__icon {
  position: absolute;
  left: 17px;
  top: 50%;
  transform: translateY(-50%);
  width: 17px;
  height: 17px;
  color: var(--muted);
  pointer-events: none;
}

.field--icon.field--labelled .field__icon { top: auto; bottom: 19px; transform: none; }

/* Boxed form (opt-in page) */

.form--card {
  background: var(--white);
  border-radius: 6px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.10);
  max-width: 550px;
  padding: 0;
  overflow: hidden;
}

.form--card .form__body { padding: 42px 42px 20px; }

.form--card .form__foot {
  background: var(--gold);
  display: flex;
  justify-content: flex-end;
}

.form--card .form__foot button {
  background: var(--gold-dark);
  border: 0;
  color: var(--white);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 22px 32px;
  cursor: pointer;
}

.form--card .form__foot button:hover { filter: brightness(0.96); }

.form__submit { margin-top: 18px; }

.form__note {
  display: none;
  margin: 18px 0 0;
  font-size: 14px;
  text-align: center;
  color: var(--muted);
}

.form__note--on { display: block; }

.form--card .form__note { margin-bottom: 18px; }

/* --------------------------------------------------------------------------
   Long-form legal pages
   -------------------------------------------------------------------------- */

.legal { padding: 54px 0 72px; font-size: 13px; line-height: 1.55; }

.legal__kicker { font-size: 13px; letter-spacing: 0.02em; margin: 0 0 34px; }

.legal__date { color: var(--muted); }

.legal h2 { font-size: 13px; font-weight: 700; letter-spacing: 0; margin: 34px 0 14px; }

.legal h3 { font-size: 13px; font-weight: 700; margin: 26px 0 12px; }

.legal p { margin: 0 0 12px; max-width: 78ch; }

.legal ul { list-style: none; margin: 0 0 12px; padding: 0; }

.legal li { margin: 0 0 3px; }

.legal li::before { content: "• "; }

.legal .tight { margin-bottom: 4px; }

/* --------------------------------------------------------------------------
   Contact block (about page)
   -------------------------------------------------------------------------- */

.contact { max-width: 840px; margin: 0 auto; }

.contact h2 { font-size: 26px; margin: 0 0 26px; }

.contact p { font-size: 16px; margin: 0 0 22px; }

/* --------------------------------------------------------------------------
   Chat widget — bottom-right bubble on every page
   -------------------------------------------------------------------------- */

.chat {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 9998;          /* below the confetti, above everything else */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.chat__toggle {
  width: 58px;
  height: 58px;
  border: 0;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
  cursor: pointer;
  display: grid;
  place-items: center;
  align-self: flex-end;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.chat__toggle:hover { filter: brightness(0.96); transform: translateY(-1px); }

.chat__icon { width: 26px; height: 26px; grid-area: 1 / 1; }
.chat__icon--shut { display: none; }
.chat--open .chat__icon--talk { display: none; }
.chat--open .chat__icon--shut { display: block; }

.chat__panel {
  width: min(340px, calc(100vw - 44px));
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  animation: step-in 0.22s ease both;
}

.chat__head {
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--cream);
  padding: 14px 14px 14px 16px;
}

.chat__avatar {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  background: var(--white);
  display: grid;
  place-items: center;
  color: var(--ink);
}

.chat__avatar img { width: 100%; height: 100%; object-fit: cover; }
.chat__avatar--mark svg { width: 22px; height: 14px; }

.chat__who { display: flex; flex-direction: column; line-height: 1.3; flex: 1; min-width: 0; }
.chat__who b { font-size: 15px; }
.chat__who span { font-size: 12px; color: #6D6A60; }

.chat__x {
  background: none;
  border: 0;
  padding: 4px;
  cursor: pointer;
  color: var(--ink);
  opacity: 0.55;
  flex: none;
}

.chat__x:hover { opacity: 1; }
.chat__x svg { width: 17px; height: 17px; display: block; }

.chat__body { padding: 16px; }

.chat__bubble {
  background: var(--bg);
  border-radius: 12px 12px 12px 3px;
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 14px;
  padding: 12px 14px;
}

.chat__form .input { font-size: 15px; padding: 12px 14px; margin-bottom: 9px; }
.chat__form textarea.input { resize: vertical; min-height: 74px; }
.chat__form .btn { margin-top: 3px; padding: 14px 20px; font-size: 14px; }
.chat__form .form__note { text-align: left; font-size: 13px; }

@media (max-width: 560px) {
  .chat { right: 14px; bottom: 14px; }
  .chat__toggle { width: 52px; height: 52px; }
}

@media print { .chat { display: none; } }

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

.site-footer {
  border-top: 1px solid var(--line);
  padding: 34px 0 40px;
  text-align: center;
}

.site-footer .logo { color: #4A4A4A; }

.site-footer__meta { font-size: 11px; color: var(--faint); margin-top: 8px; line-height: 1.7; }

.site-footer__meta a { color: var(--faint); }

.site-footer__meta a:hover { color: var(--muted); }

.site-footer__disclaimer {
  font-size: 11px;
  color: var(--faint);
  margin-top: 14px;
  max-width: 620px;
  margin-inline: auto;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .cards { grid-template-columns: 1fr; max-width: 380px; margin-inline: auto; }

  .nav { height: 64px; }

  .nav__toggle { display: block; order: 3; }

  .nav__logo { order: 1; margin-right: auto; }

  .nav__links {
    order: 4;
    flex: 0 0 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    display: none;
    padding-bottom: 14px;
  }

  .nav__links--open { display: flex; }

  .nav__links .nav__link,
  .nav__links .nav__cta { width: 100%; padding: 13px 0; text-align: left; }

  .nav__links .nav__cta { border: 0; padding-left: 0; }

  .nav__links .nav__logo { display: none; }

  .nav { flex-wrap: wrap; height: auto; padding-top: 12px; padding-bottom: 0; }

  .nav__logo--mobile { display: inline-flex; }

  /* The funnel header has no menu, so it keeps its single centred row */
  .site-header--minimal .nav { height: 56px; padding-top: 0; flex-wrap: nowrap; }

  .section { padding: 64px 0; }
  .section--hero { padding: 74px 0 32px; }

  .form--card .form__body { padding: 30px 26px 12px; }

  .embed--calendar, .embed--calendar .embed__placeholder { min-height: 640px; }
}

@media (max-width: 560px) {
  .lede { font-size: 16px; }
  .btn { padding: 17px 24px; font-size: 14px; }
}