/* ============================================================
   BOOK A CALL PAGE
   Matches RetireWizard's booking page: centered logo band,
   confirmation line, "Next Step:", headline, then a wide
   calendar. Nothing else on the page.
   ============================================================ */

.bk-head { max-width: 900px; margin: 0 auto; padding: 34px 24px 0; text-align: center; }
.bk-confirm { font-size: 20px; font-weight: 700; color: #101828; margin: 0 0 18px; }
.bk-next {
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-size: 44px; color: #101828; margin: 0 0 12px;
  font-weight: 600; letter-spacing: -1px; line-height: 1.1;
}
.bk-line {
  font-size: 26px; color: #101828; font-weight: 600; line-height: 1.32;
  max-width: 760px; margin: 0 auto; letter-spacing: -0.3px;
}

.cal-embed { max-width: 1100px; margin: 30px auto 0; padding: 0 20px; }
.cal-inner {
  background: #FFFFFF; border: 1px solid rgba(10,31,68,0.12);
  border-radius: 8px; padding: 8px 8px 2px;
  box-shadow: 0 20px 50px -34px rgba(10,31,68,0.3);
}
/* Height must clear the whole widget or Calendly scrolls inside itself. */
.calendly-inline-widget { min-width: 300px; height: 1000px; }

.book-foot { text-align: center; padding: 24px 24px 56px; font-size: 15px; color: var(--muted); }
.book-foot a { color: var(--navy); font-weight: 600; }

@media (max-width: 900px) {
  .bk-head { padding: 24px 20px 0; }
  .bk-confirm { font-size: 17px; }
  .bk-next { font-size: 32px; }
  .bk-line { font-size: 20px; }
  .cal-embed { padding: 0 10px; margin-top: 22px; }
  .cal-inner { padding: 5px 4px 2px; }
  .calendly-inline-widget { height: 1150px; }
}
/* ============================================================
   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: 6px 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: 26px 0 28px; }
.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; }
.links + .disc { margin-top: 14px; }
.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; }
}

/* ============================================================
   BOOKED / CONFIRMATION PAGE
   Structure matches the TAA booked page: full navy hero with a
   large gold check, then one light band with two step cards.
   ============================================================ */

.booked-hero {
  background: var(--navy); color: var(--off-white);
  padding: 96px 0 80px; position: relative; overflow: hidden; text-align: center;
}
.booked-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(212,169,58,0.04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(212,169,58,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
}
.booked-hero-inner { position: relative; max-width: 780px; margin: 0 auto; padding: 0 32px; }
.check-large {
  width: 96px; height: 96px; border-radius: 50%; background: var(--gold); color: var(--navy);
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 32px;
  font-size: 48px; font-weight: 900; box-shadow: 0 20px 40px -10px rgba(212,169,58,0.5);
}
.booked-hero h1 {
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-size: 60px; color: var(--off-white); line-height: 1.05;
  letter-spacing: -1px; font-weight: 600; margin: 0 0 20px;
}
.booked-hero h1 .accent { color: #E8C04A; }
.booked-hero .sub { font-size: 19px; color: rgba(248,246,240,0.85); margin: 0; }

.prep-band { padding: 88px 0; background: #FFFFFF; }
.prep-eyebrow {
  font-size: 11.5px; letter-spacing: 4px; text-transform: uppercase;
  color: var(--gold); font-weight: 700; text-align: center; margin-bottom: 14px;
}
.prep-band h2 {
  font-family: 'Lora', Georgia, serif; text-align: center; font-size: 36px;
  color: var(--navy); margin: 0 auto 56px; max-width: 680px; font-weight: 600; letter-spacing: -0.5px;
}
.actions-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;
  max-width: 720px; margin: 0 auto; padding: 0 32px;
}
.action-card { background: #F8F8F5; border-left: 3px solid var(--gold); padding: 32px 28px; }
.action-num {
  font-family: 'Lora', Georgia, serif; font-size: 14px; color: var(--gold);
  letter-spacing: 4px; margin-bottom: 8px; font-weight: 700;
}
.action-card h3 {
  font-family: 'Lora', Georgia, serif; font-size: 20px; color: var(--navy);
  margin: 0 0 10px; font-weight: 600;
}
.action-card p { font-size: 15px; color: var(--muted); line-height: 1.6; margin: 0; }
.action-card a { color: var(--navy); font-weight: 700; text-decoration: underline; text-decoration-color: var(--gold); }

@media (max-width: 900px) {
  .actions-grid { grid-template-columns: 1fr; }
  .booked-hero h1 { font-size: 40px; }
  .booked-hero { padding: 64px 0 56px; }
  .check-large { width: 76px; height: 76px; font-size: 38px; margin-bottom: 24px; }
  .prep-band { padding: 60px 0; }
  .prep-band h2 { font-size: 28px; margin-bottom: 36px; }
}

/* ---------- BOOKED PAGE VIDEO ----------
   Same treatment as the report page: gold frame, rounded, deep shadow. */
.bk-vid { max-width: 720px; margin: 40px auto 0; padding: 0 24px; }
.bk-vid .frame {
  position: relative; width: 100%; padding-top: 56.25%;
  background: #000; overflow: hidden; border-radius: 12px;
  border: 2px solid var(--gold);
  box-shadow: 0 40px 100px -30px rgba(10,31,68,0.4);
}
.bk-vid .frame iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.bk-vid .label {
  text-align: center; font-size: 12px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--muted); font-weight: 600; margin-top: 18px;
}
@media (max-width: 640px) { .bk-vid { margin-top: 28px; padding: 0 16px; } }