/* ============================================================
   PRODUCER FUNNEL SHELL
   Layout copied from RetireWizard:
     colored band with the wordmark
     white flow area (Heyflow renders everything here)
     As Featured In strip
     colored band footer with legal links

   No page headline. The headline is the first question and it
   lives inside Heyflow.

   IDENTICAL across every producer build. Copy unchanged.
   Producer values live in the HTML, never in here.

   Brand tokens from references/brand-tokens.md. RetireWizard
   uses a deep indigo band; we use navy, which is the same move.
   ============================================================ */

:root {
  --navy:      #0A1F44;  /* brand token: navy      -> the bands */
  --gold:      #D4A93A;  /* brand token: gold      -> wordmark accent */
  --off-white: #F8F6F0;  /* brand token: off-white -> text on navy */
  --page:      #FFFFFF;  /* flow area, matches RetireWizard */
  --muted:     #8A8F9C;
  --line:      #E7E7EA;
  --slot-bg:   #FAFAFB;
  --slot-line: #D9D9DE;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page);
  color: var(--muted);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }

.wrap { max-width: 820px; margin: 0 auto; padding: 0 24px; }

/* ---------- BANNER BAND ---------- */
.banner { background: var(--navy); }
.banner-in { padding: 24px 24px; display: flex; align-items: center; justify-content: center; }
/* Wordmark stands in until a producer logo exists. Swap the whole
   .mark span for <img class="logo" src="assets/logo.png" alt="..."> */
.mark {
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-size: 30px; font-weight: 600; color: var(--off-white);
  letter-spacing: -0.4px; white-space: nowrap; line-height: 1;
}
.mark em { color: var(--gold); font-style: normal; }
.logo { max-height: 42px; width: auto; display: block; }
@media (max-width: 640px) {
  .banner-in { padding: 18px 20px; }
  .mark { font-size: 24px; }
}

/* ---------- FLOW ---------- */
.flow { padding: 34px 0 44px; }
/* Heyflow injects its own DOM here. Keep it from collapsing before boot. */
.flow heyflow-wrapper { display: block; width: 100%; min-height: 560px; }

/* placeholder shown until the flow is published */
.slot {
  min-height: 560px; border: 1.5px dashed var(--slot-line); border-radius: 8px;
  background: var(--slot-bg); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px;
  text-align: center; padding: 40px 24px;
}
.slot .t { font-family: 'Lora', Georgia, serif; font-size: 23px; color: var(--navy); }
.slot .s { font-size: 13px; color: var(--muted); max-width: 360px; }
.slot code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
  background: #EFEFF2; padding: 3px 7px; border-radius: 3px; color: var(--navy);
}


/* ---------- FOOTER BAND ---------- */
footer { background: var(--navy); padding: 22px 0 24px; }
.links { font-size: 13.5px; color: rgba(248,246,240,0.85); text-align: center; }
.links a { margin: 0 10px; }
.links a:hover { color: var(--gold); text-decoration: underline; }
.disc {
  font-size: 11px; line-height: 1.6; color: rgba(248,246,240,0.42);
  text-align: center; max-width: 720px; margin: 0 auto;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ============================================================
   BOOK A CALL PAGE
   Structure from RetireWizard's book.retirewizard.com:
   confirmation line, eyebrow, headline, booking widget, footer.
   ============================================================ */

.confirm {
  text-align: center; padding: 30px 0 0;
  font-size: 17px; font-weight: 600; color: var(--navy);
}
.confirm .tick {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; background: var(--gold);
  margin-right: 9px; vertical-align: -5px;
}
.confirm .tick svg { width: 12px; height: 12px; }

.book-head { text-align: center; padding: 26px 0 8px; }
.book-eyebrow {
  font-size: 11.5px; letter-spacing: 3.4px; text-transform: uppercase;
  color: var(--gold); font-weight: 700; margin-bottom: 14px;
}
.book-head h1 {
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-size: 38px; line-height: 1.16; color: var(--navy);
  margin: 0 auto 14px; max-width: 620px; letter-spacing: -0.4px;
}
.book-head .sub { font-size: 16.5px; color: var(--muted); max-width: 520px; margin: 0 auto; }

/* optional short VSL above the calendar */
.book-vsl { max-width: 640px; margin: 26px auto 0; }
.book-vsl .frame {
  position: relative; width: 100%; padding-top: 56.25%;
  background: #000; border-radius: 8px; overflow: hidden;
  box-shadow: 0 18px 50px -28px rgba(10,31,68,0.45);
}
.book-vsl .frame iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* what happens on the call */
.book-points { max-width: 560px; margin: 30px auto 0; padding: 0; list-style: none; }
.book-points li {
  position: relative; padding: 11px 0 11px 32px;
  font-size: 15.5px; color: #4A4F5C; line-height: 1.5;
}
.book-points li::before {
  content: ''; position: absolute; left: 6px; top: 17px;
  width: 6px; height: 11px; border: solid var(--gold);
  border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}

/* calendly */
.cal-wrap { max-width: 900px; margin: 30px auto 0; }
.calendly-inline-widget { min-width: 320px; height: 1050px; }
.cal-slot {
  min-height: 720px; border: 1.5px dashed var(--slot-line); border-radius: 8px;
  background: var(--slot-bg); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 40px 24px;
}
.cal-slot .t { font-family: 'Lora', Georgia, serif; font-size: 23px; color: var(--navy); }
.cal-slot .s { font-size: 13px; color: var(--muted); max-width: 360px; }
.cal-slot code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
  background: #EFEFF2; padding: 3px 7px; border-radius: 3px; color: var(--navy);
}

.book-foot { text-align: center; padding: 8px 0 48px; font-size: 14.5px; color: var(--muted); font-style: italic; }

@media (max-width: 640px) {
  .book-head h1 { font-size: 27px; }
  .book-head .sub { font-size: 15.5px; }
  .calendly-inline-widget { height: 1000px; }
  .cal-slot { min-height: 560px; }
}

/* ============================================================
   BOOKED / CONFIRMATION PAGE
   Two steps only: add it to the calendar, save the number.
   No video, no upsell. They already did the thing.
   ============================================================ */

.booked-head { text-align: center; padding: 46px 0 8px; }
.booked-tick {
  width: 62px; height: 62px; border-radius: 50%; background: var(--gold);
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 24px;
}
.booked-tick svg { width: 30px; height: 30px; }
.booked-head h1 {
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-size: 42px; line-height: 1.14; color: var(--navy);
  margin: 0 auto 14px; max-width: 620px; letter-spacing: -0.6px;
}
.booked-head .sub { font-size: 17.5px; color: var(--muted); max-width: 540px; margin: 0 auto; }

.steps { max-width: 640px; margin: 44px auto 0; display: grid; gap: 20px; }
.step {
  display: grid; grid-template-columns: 58px 1fr; gap: 22px; align-items: start;
  background: #FAFAFB; border: 1px solid var(--line); border-radius: 10px; padding: 30px 30px;
}
.step .n {
  width: 46px; height: 46px; border-radius: 50%; background: var(--navy); color: var(--off-white);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Lora', Georgia, serif; font-size: 22px; font-weight: 600;
}
.step h2 {
  font-family: 'Lora', Georgia, serif; font-size: 25px; color: var(--navy);
  margin: 8px 0 10px; font-weight: 600; letter-spacing: -0.3px;
}
.step p { font-size: 16px; line-height: 1.55; color: #4A4F5C; margin: 0; }
.step .num {
  display: inline-block; margin-top: 14px;
  font-family: 'Lora', Georgia, serif; font-size: 34px; font-weight: 600;
  color: var(--navy); letter-spacing: -0.5px; text-decoration: none;
}
.step .num:hover { color: var(--gold); }
.step .hint { font-size: 14px; color: var(--muted); margin-top: 8px; }

.booked-foot { text-align: center; padding: 40px 0 56px; font-size: 15px; color: var(--muted); }

@media (max-width: 640px) {
  .booked-head { padding: 34px 0 4px; }
  .booked-head h1 { font-size: 30px; }
  .step { grid-template-columns: 46px 1fr; gap: 16px; padding: 24px 22px; }
  .step .n { width: 40px; height: 40px; font-size: 19px; }
  .step .num { font-size: 29px; }
}