/*
  Evergreen Workshop funnel -- shared stylesheet for all five steps.

  Design system is the same one used by ../../call-booking/ and ../../cruising-financials-workshop/
  (ocean #0063A3, CTA yellow #F3C125, Montserrat, navy #03172F). Shared as one file rather than
  inlined per page because this funnel is five pages deep -- five inline copies drift, and the
  whole point of moving the funnel off GHL is that the steps stop looking like five different sites.
*/

:root{
  --blue:#0063A3;
  --blue-dark:#024E82;
  --navy:#03172F;
  --yellow:#F3C125;
  --yellow-dark:#D9A814;
  --ink:#12242F;
  --ink-soft:#415865;
  --white:#ffffff;
  --bg-alt:#eef3f9;
  --line:#d9e2e8;
  --maxw:1360px;
  --sans:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --display:"Montserrat",var(--sans);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--white);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--display);line-height:1.1;margin:0}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1.1rem,4vw,2.2rem)}
.wrap--narrow{max-width:940px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  background:var(--yellow);color:#1a1a1a;font-family:var(--display);font-weight:800;
  letter-spacing:.02em;text-transform:uppercase;text-decoration:none;
  padding:1rem 1.6rem;border:none;border-radius:8px;font-size:1rem;cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.15);transition:transform .12s ease,background .12s ease}
.btn:hover{background:var(--yellow-dark);transform:translateY(-1px)}
.btn--block{width:100%}

/* ---------- Section scaffolding ---------- */
section{padding:clamp(3rem,7vw,5.5rem) 0}
.alt{background:var(--bg-alt)}
.eyebrow{font-family:var(--display);font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue);text-align:center;font-size:.85rem;margin-bottom:.6rem}
.sec-title{text-align:center;font-weight:800;font-size:clamp(1.6rem,3.4vw,2.4rem);max-width:26ch;margin:0 auto 2.5rem}
.sec-lead{text-align:center;color:var(--ink-soft);max-width:66ch;margin:0 auto 2.2rem;font-size:1.06rem}
@media (max-width:600px){ .sec-lead{font-size:1rem} }

/* ---------- Hero ---------- */
/* Lightened 2026-10-01 (Carmen: "make it less dark"). Was .62 -> .86 with a .55 radial on top,
   which buried the photograph. The headline still needs contrast, so the floor stays around .60 at
   the bottom where the copy sits and the radial drops to .3. Check any copy change against the
   image again: this is as light as it goes before white text starts to struggle over the masts. */
.hero{position:relative;color:#fff;
  background-image:linear-gradient(180deg,rgba(4,40,66,.40),rgba(4,40,66,.68)),
    radial-gradient(ellipse 70% 60% at 50% 28%,rgba(2,18,30,.30),rgba(2,18,30,0) 72%),
    url('./hero-bg-anchorage.webp');
  background-position:center;background-size:cover;background-repeat:no-repeat}
.hero .wrap{padding-top:clamp(2.2rem,4.5vw,3.4rem);padding-bottom:clamp(3.2rem,7vw,5rem)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,4vw,3.4rem);align-items:center}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr;gap:2rem} }
.hero h1{font-weight:900;font-size:clamp(1.9rem,4.2vw,3rem);text-transform:uppercase;
  text-shadow:0 1px 3px rgba(0,0,0,.6),0 4px 18px rgba(0,0,0,.35)}
.hero h1 em{font-style:normal;color:var(--yellow)}
.hero .subcopy{color:#e9f1f7;font-weight:500;font-size:clamp(1rem,1.5vw,1.14rem);margin:1rem 0 0;max-width:52ch;
  text-shadow:0 1px 3px rgba(0,0,0,.55)}
/* ---------- Top banner ----------
   Full-width primary blue above the hero. #0063A3, white, extra bold, caps (Carmen, 2026-10-01).

   Weight 900 rather than 800 and a larger size than the first attempt, which Carmen called
   terrible: it was the right place but too thin and too quiet to read as a banner. Padding is
   generous for the same reason. Line-height stays loose because two lines of tracked-out uppercase
   set solid is hard to read on a phone. */
.top-banner{background:#0063A3;color:#fff;text-align:center;
  font-family:var(--display);font-weight:900;font-size:.95rem;letter-spacing:.1em;
  text-transform:uppercase;line-height:1.5;
  padding:1.05rem clamp(1.1rem,4vw,2.2rem)}
@media (max-width:600px){
  .top-banner{font-size:.8rem;letter-spacing:.07em;padding:.9rem 1.1rem}
}

/* Confirmation variant: a yellow tick circle beside the words, ported from the Starter Kit's
   .tick--sm (../../aspiring-cruisers-starter-kit/post-purchase.css) so the two funnels' "you're in"
   moments match. The check is drawn with borders rather than an SVG or an icon font: no extra
   request, and it inherits nothing that can fail to load. */
.top-banner--confirm{display:flex;align-items:center;justify-content:center;gap:.65rem}
.top-banner__tick{position:relative;flex:0 0 auto;width:24px;height:24px;border-radius:50%;
  background:var(--yellow)}
.top-banner__tick::after{content:'';position:absolute;left:8px;top:4px;width:6px;height:12px;
  border:solid var(--navy);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}

.brandbar{padding-top:.9rem;padding-bottom:.9rem}
.brandbar img{height:44px;width:auto}
.hero .brandbar img{filter:none}

/* ---------- Hero CTA + the opt-in modal ---------- */
.btn--lg{font-size:1.06rem;padding:1.15rem 2.2rem}
/* Mobile: every CTA a size down (Carmen, 2026-10-02: hero button too big). Sits after .btn--lg so
   it wins at equal specificity. The sticky bar has its own, smaller rule further down. */
@media (max-width:600px){
  .btn{font-size:.88rem;padding:.85rem 1.3rem}
  .btn--lg{font-size:.92rem;padding:.95rem 1.6rem}
}
.hero-cta{margin:1.8rem 0 0}
.hero-note{margin:.7rem 0 0;color:#dbe7f2;font-size:.88rem;text-shadow:0 1px 3px rgba(0,0,0,.55)}

/* <dialog>'s own backdrop, so the page behind really is inert rather than just looking it. */
.optin-modal{border:0;padding:0;background:transparent;max-width:min(560px,calc(100vw - 2rem));
  width:100%;overflow:visible}
.optin-modal--wide{max-width:min(760px,calc(100vw - 1.4rem))}
.optin-modal--wide .optin-modal__card{padding:2.4rem .6rem .6rem}
.optin-modal::backdrop{background:rgba(3,23,47,.72);backdrop-filter:blur(2px)}
.optin-modal__card{position:relative;background:#fff;border-radius:16px;
  box-shadow:0 30px 70px rgba(0,0,0,.4);padding:clamp(1.4rem,3vw,2rem);
  max-height:calc(100vh - 2rem);overflow-y:auto}
.optin-modal__close{position:absolute;top:.5rem;right:.7rem;background:none;border:0;
  font-size:1.9rem;line-height:1;color:var(--ink-soft);cursor:pointer;padding:.2rem .4rem;
  border-radius:8px}
.optin-modal__close:hover{color:var(--ink);background:var(--bg-alt)}
.optin-modal__close:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
/* The card is the form's own container now, so the inner .form-card must not add a second one. */
.optin-modal .form-card{box-shadow:none;padding:0;max-width:none;border-radius:0}

/* ---------- Hero video ----------
   Sits under the hero copy in the left column, so the form stays alongside it rather than being
   pushed below the fold on desktop. Capped in width because a video stretched to the full column
   dwarfs the headline above it. */
.hero-media{display:flex;align-items:center}
.hero-video{margin-top:0;width:100%}
.hero-video .video-frame{border-radius:12px;box-shadow:0 14px 34px rgba(2,18,30,.4)}
@media (max-width:900px){
  /* Stacked: copy, CTA, then video. The form is behind the button now, so the phone layout is two
     blocks rather than the three it used to be, and the CTA sits above the fold instead of the
     form being pushed to ~760px by the video above it. */
  .hero-video{margin:0 auto;max-width:none}
}

/* ---------- Registration form (native) ---------- */
/*
  Native form, not the GHL embed (Carmen, 2026-09-25). Styled to match the rest of the funnel
  rather than inheriting GHL's own form CSS, which is the visible half of the reason for the swap;
  the measured half is page weight and layout shift, since the embed pulled ~1.5MB of its own
  scripts and resized itself after booting (2.4MB / 0.344 CLS on the equivalent Cruising Clarity
  page, against 736KB / 0.014 native).

  The attribution trade this makes is real and is documented in ../README.md "Match quality" and at
  the top of ../../api/submit-evergreen-optin.js. It is not a styling decision.
*/
.form-card{background:#fff;border-radius:16px;box-shadow:0 22px 60px rgba(0,0,0,.22);
  padding:clamp(1.3rem,2.6vw,1.9rem);max-width:560px;margin:0 auto;width:100%}
.form-card__title{font-family:var(--display);font-weight:800;color:var(--blue);text-align:center;
  font-size:clamp(1.02rem,1.9vw,1.18rem);margin:.2rem 0 1.2rem;line-height:1.35}

.optin-form .field{margin-bottom:.9rem}
.optin-form .field-row{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
/* Country calling code beside the phone box. The select inherits the shared select styling above, so
   only its width is set here. */
.optin-form .phone-row{display:flex;gap:.5rem}
.optin-form .phone-row select{width:auto;flex:0 0 7.6rem;min-width:0}
.optin-form .phone-row input{flex:1 1 auto;min-width:0}
/* Phone: the country box was taking a third of the row. Narrower, with tighter side padding and a
   smaller arrow, so the number box gets the room. The dial code leads each option, so a clipped
   label still shows the part that matters. */
@media (max-width:640px){
  .optin-form .phone-row{gap:.4rem}
  .optin-form .phone-row select{flex:0 0 6.7rem;min-width:0;padding-left:.6rem;padding-right:1.6rem;
    background-position:right .3rem center;background-size:18px}
}
@media (max-width:420px){ .optin-form .field-row{grid-template-columns:1fr;gap:0} }
.optin-form label{display:block;font-family:var(--display);font-weight:700;font-size:.72rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.35rem}
/* Scoped to `.req`, which is the required asterisk and nothing else.
   This used to be `.optin-form label span`, and the consent checkbox's text is also a <span>
   inside a <label> -- so the whole terms-and-conditions paragraph rendered in error red. It read
   as a validation failure on a form nobody had touched yet. The consent is still mandatory: it
   carries `required`, the submit handler blocks on it, and it now shows the same asterisk every
   other required field does. */
.optin-form .req{color:#c0392b;font-weight:700}
.optin-form input[type=text],
.optin-form input[type=email],
.optin-form input[type=tel]{width:100%;font-family:var(--sans);font-size:1rem;color:var(--ink);
  background:#fff;border:2px solid var(--line);border-radius:9px;padding:.72rem .85rem;
  transition:border-color .12s ease,box-shadow .12s ease}
.optin-form select{width:100%;font-family:var(--sans);font-size:1rem;color:var(--ink);background:#fff;
  border:2px solid var(--line);border-radius:9px;padding:.72rem .85rem;appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23415865'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .6rem center;background-size:22px;
  padding-right:2.2rem;transition:border-color .12s ease,box-shadow .12s ease}
/* An unanswered select reads as placeholder text, not as an answer. */
.optin-form select:invalid{color:var(--ink-soft)}
.optin-form input:focus,
.optin-form select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,99,163,.14)}
.optin-form .field-help{margin:.35rem 0 0;font-size:.74rem;color:var(--ink-soft);line-height:1.4}
/* 16px minimum on the inputs themselves: anything smaller makes iOS Safari zoom the whole page on
   focus, which on a registration form reads as the page jumping away from the visitor. */
@media (max-width:640px){ .optin-form input,.optin-form select{font-size:16px} }
/* Smaller fields (Carmen, 2026-10-02). Desktop text comes down a notch; on mobile the text has to
   stay at 16px (see above), so the fields shrink through padding and radius instead. */
@media (min-width:641px){ .optin-form input,.optin-form select{font-size:.94rem} }
.optin-form input[type=text],.optin-form input[type=email],.optin-form input[type=tel],
.optin-form select{padding-top:.55rem;padding-bottom:.55rem;border-radius:8px}

.optin-form .consent{display:flex;align-items:flex-start;gap:.6rem;margin:.9rem 0 1.1rem;
  font-family:var(--sans);font-weight:400;font-size:.78rem;line-height:1.45;color:var(--ink-soft);
  text-transform:none;letter-spacing:normal}
.optin-form .consent input{flex:0 0 auto;margin-top:.15rem;width:16px;height:16px;accent-color:var(--blue)}
.optin-form .consent a{color:var(--blue);text-decoration:underline}

.optin-form .form-error{margin:0 0 .9rem;padding:.7rem .85rem;border-radius:8px;
  background:#fdecea;border:1px solid #f5c6c2;color:#8d2b20;font-size:.85rem;line-height:1.45}
.optin-form button[disabled]{opacity:.7;cursor:progress}

/* ---------- Curriculum / learn cards ---------- */
.learn-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;max-width:1120px;margin:0 auto}
@media (max-width:900px){ .learn-grid{grid-template-columns:1fr;max-width:560px} }
.learn-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:1.6rem 1.5rem;
  box-shadow:0 12px 34px rgba(10,51,80,.07)}
.learn-card .n{width:40px;height:40px;border-radius:11px;background:var(--blue);color:var(--yellow);
  font-family:var(--display);font-weight:900;font-size:1.1rem;display:flex;align-items:center;
  justify-content:center;margin-bottom:1rem}
.learn-card h3{font-size:1.18rem;font-weight:800;color:var(--navy);margin-bottom:.6rem}
.learn-card p{margin:0;color:var(--ink-soft);font-size:1rem}

/* ---------- Outcome band ---------- */
/* Primary blue rather than navy, and no longer centred: the copy sits beside a photograph now
   (Carmen, 2026-10-01). Left-aligned because centred text next to an image reads as two competing
   centres. */
.outcome{background:var(--blue);color:#fff}
.outcome-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3.4rem);align-items:center}
.outcome .eyebrow{color:var(--yellow);text-align:left}
.outcome h2{font-size:clamp(1.6rem,3.4vw,2.3rem);font-weight:800;max-width:20ch;margin:0 0 1.4rem}
.outcome p{color:#e4eef7;max-width:52ch;margin:0 0 1rem;font-size:1.06rem}
.outcome-media img{width:100%;height:auto;border-radius:16px;box-shadow:0 22px 50px rgba(2,18,30,.4)}
@media (max-width:860px){
  /* Image first on a phone: it carries the point of the section faster than the paragraph does. */
  .outcome-grid{grid-template-columns:1fr;gap:1.8rem}
  .outcome-media{order:-1}
}

/* ---------- Hosts ---------- */
.hosts-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3.5rem);align-items:start;max-width:1080px;margin:0 auto}
@media (max-width:640px){ .hosts-grid{grid-template-columns:1fr;max-width:420px} }
.host-card{text-align:center}
.host-card__img{width:180px;height:180px;object-fit:cover;object-position:center 25%;border-radius:50%;
  box-shadow:0 10px 26px rgba(10,51,80,.24);display:block;margin:0 auto 1.2rem}
.host-card__name{font-size:clamp(1.3rem,2.4vw,1.7rem);font-weight:800;color:var(--blue);margin-bottom:.15rem}
.host-card__role{font-family:var(--display);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft);font-size:.78rem;margin-bottom:1rem}
.host-card__bio{color:var(--ink-soft);margin:0 0 .9rem;font-size:1.01rem;text-align:left}

/* ---------- Video (workshop + testimonials) ---------- */
.video-card{max-width:940px;margin:0 auto}
.video-frame{position:relative;padding-top:56.25%;border-radius:14px;overflow:hidden;background:#000;
  box-shadow:0 18px 44px rgba(2,18,30,.38)}
.video-frame video,.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}
.video-facade{position:absolute;inset:0;cursor:pointer;background:var(--navy);border:0;padding:0;width:100%}
.video-facade img{width:100%;height:100%;object-fit:cover;display:block;opacity:.85}
.video-facade .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.video-facade .play span{width:74px;height:74px;border-radius:50%;background:rgba(3,23,47,.66);
  display:flex;align-items:center;justify-content:center}
.video-facade .play svg{width:28px;height:28px;fill:#fff;margin-left:4px}

.video-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.8rem;max-width:1000px;margin:0 auto}
/* Six testimonials rather than two, so three across on desktop and two on tablet. Below 700px
   the base rule drops everything to one column, which is right: a 16:9 facade at half a phone
   width is too small to read the caption on. */
.video-grid--three{grid-template-columns:repeat(3,1fr);max-width:1180px;gap:1.5rem}
@media (max-width:980px){ .video-grid--three{grid-template-columns:repeat(2,1fr)} }
@media (max-width:700px){ .video-grid--three{grid-template-columns:1fr} }
@media (max-width:700px){ .video-grid{grid-template-columns:1fr;gap:1.2rem} }
.vimeo-facade{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;cursor:pointer;
  background:var(--navy);box-shadow:0 14px 30px rgba(3,23,47,.26);border:0;padding:0;width:100%}
.vimeo-facade img.thumb{width:100%;height:100%;object-fit:cover;opacity:.82}
.vimeo-facade .play-btn{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.vimeo-facade .play-btn span{width:68px;height:68px;border-radius:50%;background:rgba(3,23,47,.6);
  display:flex;align-items:center;justify-content:center}
.vimeo-facade .play-btn svg{width:26px;height:26px;fill:var(--white);margin-left:4px}
/* The thumbnails already carry the title (Carmen, 2026-10-02), so the caption is hidden visually. It stays
   in the page so screen readers still get a name for the play button. */
.vimeo-facade .cap{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.vimeo-facade iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- Member quote cards ---------- */
.quote-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;max-width:1120px;margin:0 auto}
@media (max-width:860px){ .quote-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .quote-grid{grid-template-columns:1fr;gap:1rem} }
.quote-card{width:100%;border-radius:12px;box-shadow:0 10px 24px rgba(3,23,47,.14)}

/* ---------- Survey ---------- */
.survey-shell{min-height:100vh;display:flex;flex-direction:column;background:var(--bg-alt)}
.survey-main{flex:1;display:flex;align-items:flex-start;justify-content:center;padding:1.3rem 0 clamp(1.4rem,5vw,3rem)}
.qual-card{background:#fff;border-radius:16px;box-shadow:0 22px 60px rgba(0,0,0,.12);
  max-width:660px;margin:0 auto;padding:clamp(1.6rem,4vw,2.6rem);width:100%}
.qual-progress{display:flex;gap:.4rem;margin-bottom:1.6rem}
.qual-progress i{flex:1;height:5px;border-radius:999px;background:var(--line);transition:background .2s ease}
.qual-progress i.on{background:var(--blue)}
.qual-progress i.is-active{background:var(--yellow)}
/* Survey confirmation banner + lead-in, ported from the Starter Kit's qualifying survey
   (.confirm-banner / .survey-lead in ../../aspiring-cruisers-starter-kit/post-purchase.css). */
.confirm-banner{background:#0063A3;color:#fff;text-align:center;padding:0}
.confirm-banner__inner{padding:1.1rem 16px;max-width:36rem}
.confirm-row{display:flex;align-items:center;justify-content:center;gap:.5rem;margin:0 0 .5rem}
.confirm-title{margin:0;font-family:var(--display);font-weight:900;letter-spacing:.12em;
  text-transform:uppercase;color:var(--yellow);font-size:.95rem}
.confirm-note{margin:0 auto;color:#e9f1f7;font-size:.92rem}
.survey-lead{text-align:center;color:var(--ink-soft);max-width:36rem;margin:0 auto 1rem;font-weight:600}
.qual-step-label{font-family:var(--display);font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);font-size:.72rem;text-align:center;margin:0 0 .5rem}
.qual-q{font-family:var(--display);font-weight:800;font-size:clamp(1.02rem,2vw,1.2rem);
  color:var(--navy);text-align:center;margin:0 0 1.4rem;line-height:1.3}
.qual-options{display:grid;gap:.55rem}
.qual-opt{display:block;width:100%;text-align:center;background:#fff;color:var(--ink);
  border:2px solid var(--line);border-radius:10px;padding:.8rem 1rem;font-family:var(--display);
  font-weight:700;font-size:.95rem;cursor:pointer;line-height:1.35;
  transition:border-color .12s ease,background .12s ease}
.qual-opt:hover{border-color:var(--blue);background:var(--bg-alt)}
.qual-opt:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.qual-sending{text-align:center;color:var(--ink-soft);font-weight:600}

/* ---------- Skip link ----------
   Lifted from ../../aspiring-cruisers-starter-kit/post-purchase.css so the two call pages share one
   look (Carmen: "same style as slo call page"). Understated but never hidden: this page sits
   between somebody and the workshop they actually registered for, so there has to be a visible way
   past it.

   The \00a0 is load-bearing and is SLO's own fix: a breaking space lets the arrow drop onto its own
   line at 375px, which made the link wrap to two lines even though the text fits. */
.bc-skip{margin:1.4rem 0 0;text-align:center;font-size:.85rem;color:var(--ink-soft)}
.bc-skip__link{font-weight:600;color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.bc-skip__link:hover{color:var(--blue-dark)}
.bc-skip__link::after{content:'\00a0\2192';text-decoration:none}
.bc-skip--onDark{color:#cfdceb;margin-top:1.4rem}
.bc-skip--onDark .bc-skip__link{color:var(--yellow)}
.bc-skip--onDark .bc-skip__link:hover{color:#fff}

/* ---------- Call page: top of fold ----------
   Short on purpose so the calendar is reachable without scrolling past a masthead. */
.call-intro{padding-top:clamp(1.8rem,4vw,2.6rem)}
.call-kicker{font-family:var(--display);font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--blue);text-align:center;font-size:.85rem;margin:0 0 .6rem}
/* The skip link and the calendar card were touching on phones: .bc-skip only sets a top margin, and
   the card has none. Space below the link, wider on mobile where the two are stacked tight. */
.call-intro .bc-skip{margin-bottom:1.5rem}
@media (max-width:560px){ .call-intro .bc-skip{margin-bottom:1.9rem} }
.call-title{text-align:center;font-weight:800;font-size:clamp(1.5rem,3.2vw,2.2rem);
  max-width:24ch;margin:0 auto .7rem;line-height:1.1}
.call-lead{text-align:center;color:var(--ink-soft);max-width:60ch;margin:0 auto;font-size:1.04rem;line-height:1.4}
/* Left-aligned call hero, after the bwc-website call booking page (Carmen, 2026-10-02). */
.call-intro--left .wrap{max-width:38rem}
@media (min-width:900px){ .call-intro--left .wrap{max-width:62rem} }
.call-intro--left .call-title{text-align:left;max-width:none;font-size:clamp(1.5rem,4.6vw,2.1rem);margin:0 0 .6rem;line-height:1.15}
.call-sub{margin:0 0 1.1rem;color:var(--ink-soft);font-size:1rem;line-height:1.4}
.call-walk{margin:0 0 .8rem;font-family:var(--display);font-weight:800;letter-spacing:.03em;
  text-transform:uppercase;color:var(--ink-soft);font-size:.76rem}
.call-ticks{list-style:none;margin:0 0 1.1rem;padding:0 0 1.1rem;border-bottom:1px solid var(--line);
  display:grid;gap:.5rem}
@media (min-width:760px){ .call-ticks{grid-template-columns:1fr 1fr;gap:.7rem 2rem} }
.call-ticks li{position:relative;padding-left:1.9rem;color:var(--ink-soft);font-size:.98rem;line-height:1.4}
.call-ticks li::before{content:'';position:absolute;left:0;top:.1rem;width:1.2rem;height:1.2rem;
  border-radius:50%;background:var(--blue)}
.call-ticks li::after{content:'';position:absolute;left:.42rem;top:.28rem;width:.26rem;height:.5rem;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.call-hosts{margin:0 0 1.1rem;display:flex;align-items:center;gap:.9rem}
.call-hosts__faces{display:flex;flex:0 0 auto}
.call-hosts__faces img{width:56px;height:56px;border-radius:50%;object-fit:cover;border:3px solid #fff;
  box-shadow:0 0 0 1px var(--line)}
.call-hosts__faces img + img{margin-left:-14px}
.call-hosts p{margin:0;color:var(--ink-soft);font-size:.92rem;line-height:1.4}
.call-hosts__lead{font-size:1.02rem !important;color:var(--ink) !important;margin-bottom:.15rem !important}
.call-hosts strong{color:var(--ink)}
.call-intro--left .bc-skip{text-align:left}

/* One testimonial under the call calendar. */
.call-proof{max-width:520px;margin:2.2rem auto 0}

/* ---------- Booking page ---------- */
.cal-card{max-width:1000px;margin:0 auto}
/* min-height here is a PLACEHOLDER, not the real size. The widget sizes itself through iframe-resizer
   (registered in ../assets/funnel.js), which follows the content on every step, and funnel.js then
   zeroes this min-height so the iframe can shrink again. Until the first measurement arrives this
   just reserves roughly the right amount of room so the page does not jump.

   Both numbers are MEASURED date-step heights (2026-10-01), not guesses: 732px on desktop and 527px
   on a 375px phone. An earlier draft used 960px for phones on instinct, which left 430px of blank
   page that collapsed the moment the widget loaded. The booking form that follows is taller
   (~904px on desktop) but that growth happens in response to a click, which is fine. */
.cal-embed{width:100%;border:none;min-height:735px;display:block}
@media (max-width:560px){ .cal-embed{min-height:530px} }
/* "Loading available times..." behind the calendar while the widget boots. The iframe is transparent
   until the widget paints, so the line shows through; funnel.js adds .is-ready on the first height
   report, which removes it in case the widget's own background is transparent too. */
.cal-card{position:relative}
.cal-card .cal-embed{position:relative;z-index:1}
.cal-loading{position:absolute;top:120px;left:0;right:0;z-index:0;margin:0;text-align:center;
  color:var(--ink-soft);font-weight:600}
.cal-loading::before{content:"";display:block;width:28px;height:28px;margin:0 auto .8rem;
  border:3px solid var(--line);border-top-color:var(--blue);border-radius:50%;
  animation:cal-spin .9s linear infinite}
.cal-card.is-ready .cal-loading{display:none}
@keyframes cal-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .cal-loading::before{animation:none} }
/* ---------- Outcomes list ---------- */
.outcomes-wrap{max-width:660px;margin:0 auto}
.outcomes-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1rem}
.outcomes-list li{display:flex;align-items:center;gap:1rem;text-align:left;color:var(--ink-soft);
  font-size:1.06rem;background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:1rem 1.3rem;box-shadow:0 10px 30px rgba(10,51,80,.06)}
.outcomes-list .n{flex:0 0 auto;width:36px;height:36px;border-radius:10px;background:var(--blue);
  color:var(--yellow);font-family:var(--display);font-weight:900;font-size:1.05rem;
  display:flex;align-items:center;justify-content:center}

/* ---------- Next steps (watch page) ---------- */
.next-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;max-width:960px;margin:0 auto}
/* One card left on the workshop page once the call invite moved into its own conditional
   band -- a lone card stretched across a 2-up grid reads as a missing sibling. */
.next-grid--single{grid-template-columns:1fr;max-width:520px}
@media (max-width:760px){ .next-grid{grid-template-columns:1fr;max-width:520px} }
/* The quiz card on /watch/: image beside the words on desktop, above them on a phone, on the navy
   used by the other dark bands so it reads as the one thing to do next. */
.quiz-card{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:stretch;
  background:linear-gradient(135deg,#052a47,#0a4a78);color:#fff;border-radius:20px;overflow:hidden;
  box-shadow:0 22px 56px rgba(3,23,47,.35);max-width:880px;margin:0 auto}
.quiz-card__img{display:block;width:100%;height:100%;object-fit:cover;min-height:220px}
.quiz-card__body{padding:clamp(1.5rem,3.4vw,2.4rem);display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.quiz-card__pill{display:inline-block;background:var(--yellow);color:#1a1a1a;font-family:var(--display);font-weight:900;
  letter-spacing:.1em;text-transform:uppercase;font-size:.72rem;padding:.35rem .75rem;border-radius:999px;margin:0 0 .9rem}
.quiz-card h3{font-size:clamp(1.35rem,2.6vw,1.8rem);font-weight:800;color:#fff;line-height:1.15;margin:0 0 .7rem}
.quiz-card p{margin:0 0 1.4rem;color:#d6e3ef;font-size:1rem;line-height:1.5}
@media (max-width:700px){
  .quiz-card{grid-template-columns:1fr}
  .quiz-card__img{aspect-ratio:16/10;min-height:0;height:auto;object-position:center 30%}
}
.next-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:1.7rem 1.6rem;
  box-shadow:0 12px 34px rgba(10,51,80,.07);display:flex;flex-direction:column}
.next-card h3{font-size:1.15rem;font-weight:800;color:var(--navy);margin-bottom:.6rem}
.next-card p{margin:0 0 1.3rem;color:var(--ink-soft);font-size:1rem;flex:1}

/* ---------- FAQ ---------- */
.faq{max-width:900px;margin:0 auto}
.faq details{background:#fff;border:1px solid var(--line);border-radius:10px;margin-bottom:.8rem;overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:1.1rem 1.3rem;font-family:var(--display);font-weight:700;
  font-size:1.02rem;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--blue);font-size:1.5rem;font-weight:700;line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq p{margin:0;padding:0 1.3rem 1.2rem;color:var(--ink-soft)}

/* ---------- Final CTA ---------- */
.final{position:relative;color:#fff;text-align:center;
  background-image:linear-gradient(180deg,rgba(3,23,47,.84),rgba(3,23,47,.92)),url('./final-cta-family.webp');
  background-position:center;background-size:cover;background-repeat:no-repeat}
.final h2{font-size:clamp(1.6rem,3.4vw,2.3rem);font-weight:800;max-width:24ch;margin:0 auto 1.8rem}
.final .btn{max-width:360px;margin:0 auto}
/* The workshop page's call band reuses .final for its dark closing treatment, but it
   holds a calendar rather than a button. GHL's widget renders on white, so give it a
   card to sit on instead of letting it float on the navy. */
.final .cal-card{background:#fff;border-radius:14px;overflow:hidden;
  box-shadow:0 18px 44px rgba(2,18,30,.45)}

/* ---------- Bottom-of-page form ----------
   The form card sits on the dark photo band instead of inside a popup. .final is centred, white
   text, and styles every .btn as a capped-width centred button; none of that is right inside a
   form, so it is undone here rather than loosening the .final rules for everything else. */
.inline-optin{max-width:560px;margin:2rem auto 0;text-align:left;color:var(--ink)}
.final .optin-form .btn{max-width:none;margin:0}

/* ---------- Footer ---------- */
.site-footer{background:var(--white);padding:30px 0 40px;border-top:1px solid var(--line)}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.footer-logo{height:52px;width:auto;max-width:60%}
.footer-right{text-align:right;font-size:.8rem;color:var(--navy);line-height:1.6}
.footer-right a{color:var(--blue);text-decoration:none}
.footer-right a:hover{text-decoration:underline}
@media (max-width:640px){ .footer-inner{flex-direction:column;text-align:center} .footer-right{text-align:center} }

/* ---------- Sticky mobile CTA ----------
   Ported from ../../call-booking/, which the rest of the funnel pages already use. Mobile only:
   on desktop the hero CTA and the section CTAs are never far away, and a fixed bar would just eat
   screen. Hidden until the visitor scrolls past the hero, so it never covers the hero's own
   button. */
.sticky-bar{position:fixed;left:0;right:0;bottom:0;background:var(--white);
  border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(3,23,47,.12);
  padding:.6rem clamp(1.1rem,4vw,2.2rem);padding-bottom:calc(.6rem + env(safe-area-inset-bottom));
  display:flex;align-items:center;justify-content:center;z-index:1000;
  transform:translateY(110%);transition:transform .25s ease}
.sticky-bar.show{transform:translateY(0)}
/* About 30% smaller than the full-size button (Carmen, 2026-10-02). It was 58px tall and 16px type,
   a lot of screen to give up on a phone; this lands near 41px and 13px (measured), still a comfortable tap
   target (Apple's guideline is 44pt, and the bar's own padding adds to the pressable area). The
   bar's padding comes down with it, otherwise the bar stays fat around a small button. */
.sticky-bar{padding-top:.45rem;padding-bottom:calc(.45rem + env(safe-area-inset-bottom))}
.sticky-bar .btn{width:100%;padding:.78rem 1rem;font-size:.84rem;border-radius:7px;box-shadow:none}
@media (min-width:768px){ .sticky-bar{display:none} }
@media (prefers-reduced-motion:reduce){ .sticky-bar{transition:none} }

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none} }