/* /confirmation — page-specific styles.
   Loaded AFTER /css/style.css, which owns every shared component this page uses
   (.btn-primary, .vcard, .glow-card, .faq, .proof-grid, .site-footer). Nothing
   here overrides a shared component for anyone else: every rule is scoped to
   .conf-page or a conf- prefixed class. */

/* no sticky CTA on this page, so the 110px body reservation is dead space */
body.conf-page { padding-bottom: 0; }

/* ---------- step indicator ---------- */
.conf-progress {
  width: 210px; height: 6px; border-radius: 999px;
  background: rgba(255,255,255,.12); margin: 0 auto 30px; overflow: hidden;
}
.conf-progress span { display: block; height: 100%; width: 76%; border-radius: 999px; background: var(--gold); }

/* ---------- hero ---------- */
.conf-hero { padding-top: 46px; padding-bottom: 0; text-align: center; }

/* red frame + warning bar around the pre-call video */
.conf-alert {
  max-width: 660px; margin: 34px auto 0;
  border: 2px solid #e7332b; border-radius: 10px; overflow: hidden; background: #000;
}
.conf-alert-bar {
  background: #e7332b; color: #fff; text-align: center;
  font-size: 14px; line-height: 1.35; letter-spacing: -.005em; padding: 7px 16px;
}
.conf-alert .ratio-16x9 { border-radius: 0; }

/* ---------- call details ---------- */
.conf-cta { margin-top: 30px; }
.conf-cta .btn { width: min(400px, 100%); height: 50px; padding: 0 28px; font-size: 18px; }
.conf-note {
  margin-top: 18px; text-align: center; color: var(--muted-2);
  font-size: 13px; line-height: 1.75; letter-spacing: .06em; text-transform: uppercase;
}

/* ---------- FAQ ---------- */
#conf-faq { padding-block: 86px 0; }
#conf-faq h2 { margin-bottom: 42px; }
/* questions here are two-toned (plain + .accent), so the summary must read as one
   run of text instead of being pushed apart by the shared space-between rule */
#conf-faq .faq summary { display: block; position: relative; padding-right: 34px; }
#conf-faq .faq summary::after {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
}
#conf-faq .faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
/* a question whose answer is not yet written keeps the panel empty but breathing */
#conf-faq .faq details[open] > summary { padding-bottom: 20px; }

/* ---------- testimonials ---------- */
#conf-testimonials .vcard { padding: 20px; gap: 12px; }
#conf-testimonials .vcard .person img { width: 44px; height: 44px; }

/* ---------- proof ---------- */
#conf-proof { padding-block: 86px; }
#conf-proof .proof-grid { margin-top: 0; }

@media (max-width: 680px) {
  .conf-progress { width: 160px; margin-bottom: 24px; }
  .conf-alert { margin-top: 26px; }
  .conf-alert-bar { font-size: 12px; }
  .conf-note { font-size: 11px; letter-spacing: .05em; }
  #conf-faq { padding-block: 52px 0; }
  #conf-proof { padding-block: 52px; }
}

/* FAQ answers are videos on the live page, not a text accordion.
   Measured off it: 646px wide at 16:9, ~46px apart, centred. */
.faq-videos{display:flex;flex-direction:column;align-items:center;gap:46px;margin-top:40px}
.faq-video{width:646px;max-width:100%}
.faq-video .ratio-16x9{position:relative;border-radius:12px;overflow:hidden;background:#0b0b0b;
  isolation:isolate;box-shadow:0 24px 60px -34px rgba(0,0,0,.9)}
/* A square iframe does not reliably clip to a rounded parent, so its light
   background pokes out at the four corners. Round the iframe itself. */
.faq-video .ratio-16x9 video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;border-radius:12px;background:#0b0b0b;border:0}
.faq-poster{border-radius:12px}

/* The live page burns the question into a custom Wistia poster. Stream cannot
   take a custom poster image, so the question is real text over the video —
   same look, and selectable and readable by search engines. */
.faq-poster{position:absolute;inset:-1px;z-index:2;border:0;cursor:pointer;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  padding:26px 16px;text-align:center;
  background:radial-gradient(60% 55% at 50% 50%,rgba(255,189,74,.10) 0%,rgba(255,189,74,0) 70%),#0b0b0b;
  transition:opacity .25s ease}
/* live burns the question into the poster image; measured 586px wide at 1440 */
.faq-poster .faq-q{font-size:36px;font-weight:600;line-height:1.3;
  letter-spacing:-.02em;color:#fff;max-width:none;white-space:nowrap}
.faq-video.is-playing .faq-poster{opacity:0;pointer-events:none}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (max-width:700px){.faq-videos{gap:28px}}

/* the live page renders this heading at 40px, so it stays on one line */
#conf-faq h2{font-size:clamp(28px,2.9vw,40px);max-width:none}


/* Play affordance sits BELOW the question so the text stays fully readable,
   rather than the usual centred overlay that would sit on top of it. */
.faq-play{position:relative;width:54px;height:54px;flex:none;border-radius:50%;
  background:rgba(18,18,18,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:0 6px 22px -8px rgba(0,0,0,.8),inset 0 0 0 1px rgba(255,255,255,.14);
  transition:transform .2s ease,background .2s ease}
.faq-play::before{content:"";position:absolute;left:52%;top:50%;transform:translate(-50%,-50%);
  border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent #fff}
.faq-poster:hover .faq-play{transform:scale(1.08);background:rgba(18,18,18,.82)}
.faq-video.is-playing .faq-play{opacity:0}
@media (max-width:700px){
  .faq-poster{gap:16px}
  .faq-play{width:42px;height:42px}
  .faq-play::before{border-width:7px 0 7px 12px}
}

/* The card height is fractional (196.88px on a phone), and the iframe is its own
   compositing layer, so it and the poster round to different pixels and a sliver
   of video leaks at an edge — on some cards only, depending where each lands on
   the pixel grid. The poster overscans by 1px (clipped by the parent's overflow),
   and the video stays hidden until it is actually playing, so nothing can show
   through in the first place. */
.faq-video:not(.is-playing) .ratio-16x9 video{visibility:hidden}
.faq-video.is-playing .ratio-16x9 video{visibility:visible}

/* Phone: size the headline so "Your meeting is booked, but" fits one line, so
   the title reads as two clean lines instead of a balanced-but-awkward
   "Your meeting / is booked, but". Measured: the phrase needs ~11.2px of width
   per 1px of font (measured), and the container is viewport minus 40px of
   padding, so the safe size is (vw-40)/11.47. 7.2vw holds from 320px up. */
@media (max-width:560px){
  .conf-hero h1{font-size:clamp(20px,7.2vw,32px)}
}

/* Shown for the 2 to 3s the Meet lookup takes; the button replaces it. Same
   height as the button so nothing shifts when they swap. */
/* Both of these set display explicitly, which beats the UA's [hidden] rule, so
   without this neither ever actually disappears and the spinner sits above
   the button it was meant to precede. */
.conf-cta [hidden]{display:none !important}
.calendar-preparing{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;margin:0;color:var(--muted);font-size:15px}
.calendar-preparing span{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,189,74,.25);border-top-color:var(--accent);animation:embed-spin .8s linear infinite}