/* Funnel pages (apply / book / call-booked) — campaign landing flow.
   Reuses the design tokens from styles.css. No site nav: these pages have one job. */

.fn-wrap{max-width:880px;margin:0 auto;padding:0 20px}
.fn-head{padding:26px 0 6px;display:flex;justify-content:center}
.fn-head img{height:clamp(42px,5.6vw,58px);width:auto}
.logo-dark{display:none}
[data-theme="dark"] .logo-light{display:none}
[data-theme="dark"] .logo-dark{display:block}

.fn-hero{text-align:center;padding:26px 0 30px}
.fn-eyebrow{display:inline-block;font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--accent);
  background:var(--accent-soft);border-radius:999px;padding:6px 14px;margin-bottom:18px}
.fn-hero h1{font-size:clamp(28px,5vw,46px);line-height:1.1;letter-spacing:-.02em;margin:0 0 14px}
.fn-hero p{font-size:clamp(16px,2vw,18px);line-height:1.55;color:var(--muted);max-width:620px;margin:0 auto}

/* VSL */
.fn-video{position:relative;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;
  background:var(--sink);border:1px solid var(--line);box-shadow:var(--shadow-lg);margin:0 0 14px}
.fn-video iframe,.fn-video video{position:absolute;inset:0;width:100%;height:100%;border:0}
.fn-video-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;color:var(--sink-muted);text-align:center;padding:20px}
.fn-video-ph .play{width:66px;height:66px;border-radius:50%;background:var(--accent);display:flex;
  align-items:center;justify-content:center;box-shadow:0 8px 30px rgba(91,91,214,.45)}
.fn-video-ph .play svg{width:24px;height:24px;fill:#fff;margin-left:4px}
.fn-video-ph b{color:var(--sink-ink);font-size:15px;font-weight:600}
.fn-video-ph span{font-size:13px;max-width:320px;line-height:1.5}
.fn-video-note{text-align:center;font-size:13px;color:var(--faint);margin:0 0 20px}
/* Apply CTA under the VSL — the form itself now lives at the foot of the page,
   after the offer copy, so this is the jump link to it. */
.fn-lead-cta{display:flex;flex-direction:column;align-items:center;gap:10px;margin:0 0 44px}
.fn-lead-cta .btn{min-width:260px;justify-content:center;font-size:16px;padding:14px 28px}
.fn-lead-cta-note{font-size:13px;color:var(--faint)}
#apply{scroll-margin-top:24px}

/* Runtime badge in the video caption. */
.fn-runtime{display:inline-block;font-weight:600;color:var(--accent);background:var(--accent-soft);
  border-radius:999px;padding:2px 9px;margin-right:8px;font-variant-numeric:tabular-nums}

/* Plain-language summary for anyone who won't sit through the VSL. */
.fn-vsummary{max-width:620px;margin:0 auto 44px;padding:22px 24px;background:var(--bg-soft);
  border:1px solid var(--line);border-radius:14px}
.fn-vsummary h2{font-size:15px;font-weight:600;color:var(--muted);letter-spacing:.01em;margin:0 0 14px}
.fn-vsummary ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.fn-vsummary li{position:relative;padding-left:26px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.fn-vsummary li::before{content:"";position:absolute;left:6px;top:9px;width:7px;height:7px;
  border-radius:50%;background:var(--accent)}

/* Sticky mobile apply bar. The [hidden] rule is not optional — display:flex beats the
   hidden attribute's display:none, which is the same trap .fn-lead-cta fell into. */
.fn-sticky{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;justify-content:center;
  padding:12px 20px calc(12px + env(safe-area-inset-bottom));background:var(--bg);
  border-top:1px solid var(--line);box-shadow:0 -6px 24px rgba(12,12,17,.10)}
.fn-sticky[hidden]{display:none}
.fn-sticky .btn{width:100%;max-width:420px;justify-content:center;font-size:16px;padding:14px 28px}
@supports (backdrop-filter:blur(1px)){
  .fn-sticky{background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(14px)}
}
@media(min-width:821px){.fn-sticky{display:none}}
/* Keeps the bar off the footer while it is up. */
@media(max-width:820px){body.fn-sticky-on{padding-bottom:82px}}

/* Form card */
.fn-card{background:var(--card);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow-md);padding:30px 28px;margin-bottom:40px}
.fn-card h2{font-size:23px;letter-spacing:-.01em;margin:0 0 6px}
.fn-card .sub{color:var(--muted);font-size:15px;margin:0 0 24px;line-height:1.5}

/* ---------- one question per screen ---------- */
.fn-progress{display:flex;align-items:center;gap:14px;margin:0 0 26px}
.fn-progress-track{flex:1;height:5px;border-radius:999px;background:var(--bg-tint);overflow:hidden}
.fn-progress-track i{display:block;height:100%;width:0;border-radius:999px;background:var(--accent);
  transition:width .32s cubic-bezier(.4,0,.2,1)}
.fn-progress-label{font-size:12px;font-weight:600;color:var(--faint);white-space:nowrap;
  font-variant-numeric:tabular-nums}

.fn-q h2{font-size:21px;line-height:1.3;margin:0 0 22px}
.fn-q[hidden]{display:none}
/* Each screen fades in on its own so the swap reads as movement, not a repaint. */
.fn-q.is-in{animation:fnQIn .26s cubic-bezier(.4,0,.2,1) both}
@keyframes fnQIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Option buttons. These replace native <select> — a select on a one-question screen
   still needs two taps and a system sheet, and arrow-keying through one fires change
   on every option, which would throw a keyboard user forward mid-decision. */
.fn-opts{display:flex;flex-direction:column;gap:10px}
.fn-opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  font:inherit;font-size:16px;color:var(--ink);background:var(--card);
  border:1.5px solid var(--line-2);border-radius:12px;padding:15px 18px;cursor:pointer;
  transition:border-color .15s,background .15s,transform .1s}
.fn-opt::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;
  border:2px solid var(--line-2);transition:border-color .15s,box-shadow .15s}
.fn-opt:hover{border-color:var(--accent);background:var(--accent-soft)}
.fn-opt:active{transform:scale(.99)}
.fn-opt.is-picked{border-color:var(--accent);background:var(--accent-soft)}
.fn-opt.is-picked::before{border-color:var(--accent);box-shadow:inset 0 0 0 4px var(--accent)}

.fn-qback{display:inline-block;margin-top:18px;background:none;border:0;padding:6px 0;
  font:inherit;font-size:14px;color:var(--muted);cursor:pointer}
.fn-qback:hover{color:var(--ink)}

@media(max-width:560px){
  .fn-q h2{font-size:19px}
  .fn-opt{font-size:15px;padding:14px 16px}
}

.fn-steps{display:flex;gap:8px;margin-bottom:24px}
.fn-steps i{height:3px;flex:1;border-radius:2px;background:var(--line-2);transition:background .25s}
.fn-steps i.on{background:var(--accent)}

.fn-field{margin-bottom:17px}
.fn-field label{display:block;font-size:14px;font-weight:600;margin-bottom:7px}
.fn-field .hint{font-weight:400;color:var(--faint);font-size:13px}
.fn-field input,.fn-field select,.fn-field textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);
  background:var(--bg);border:1px solid var(--line-2);border-radius:10px;padding:12px 13px;
  transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none}
.fn-field select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717f' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:18px;padding-right:38px}
.fn-field textarea{min-height:88px;resize:vertical}
.fn-field input:focus,.fn-field select:focus,.fn-field textarea:focus{outline:0;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft)}
.fn-field input[aria-invalid="true"],.fn-field select[aria-invalid="true"]{border-color:#dc2626}
.fn-err{display:none;color:#dc2626;font-size:13px;margin-top:6px}
.fn-field.bad .fn-err{display:block}
.fn-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.fn-row{grid-template-columns:1fr;gap:0}}

.fn-actions{margin-top:24px}
.fn-actions .btn{width:100%;justify-content:center;font-size:16px;padding:14px 20px}
.fn-back{display:inline-flex;align-items:center;gap:6px;background:none;border:0;color:var(--muted);
  font:inherit;font-size:14px;cursor:pointer;padding:12px 0 0;margin:0 auto;width:100%;justify-content:center}
.fn-back:hover{color:var(--ink)}
.fn-legal{font-size:12.5px;color:var(--faint);text-align:center;margin:14px 0 0;line-height:1.5}
.fn-legal a{color:var(--muted);text-decoration:underline}

.fn-panel[hidden]{display:none}
.is-busy{opacity:.65;pointer-events:none}

/* Trust strip */
.fn-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;padding:0 0 40px;
  font-size:13.5px;color:var(--muted)}
.fn-trust span{display:inline-flex;align-items:center;gap:7px}
.fn-trust svg{width:15px;height:15px;stroke:var(--green);fill:none;stroke-width:2.4}

/* Booking + confirmation */
/* The GHL widget can take 10-15s to paint. Without this the visitor stares at a
   blank white card on the highest-intent step of the funnel. Skeleton sits behind
   the iframe and is simply covered when the widget finally renders. */
.fn-embed{position:relative;background:var(--card);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow-md);overflow:hidden;margin-bottom:40px;min-height:640px}
.fn-embed iframe{position:relative;z-index:1;width:100%;min-height:640px;border:0;display:block}

.fn-embed-skel{position:absolute;inset:0;z-index:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;padding:24px;text-align:center}
.fn-embed-skel .spin{width:30px;height:30px;border-radius:50%;
  border:2.5px solid var(--line-2);border-top-color:var(--accent);
  animation:fn-spin .7s linear infinite}
.fn-embed-skel p{margin:0;color:var(--muted);font-size:14.5px}
@keyframes fn-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.fn-embed-skel .spin{animation-duration:2s}}

.fn-done{text-align:center;padding:34px 0 46px}
.fn-tick{width:66px;height:66px;border-radius:50%;background:var(--green-soft);display:flex;
  align-items:center;justify-content:center;margin:0 auto 22px}
.fn-tick svg{width:30px;height:30px;stroke:var(--green);fill:none;stroke-width:3}
.fn-next{text-align:left;max-width:520px;margin:32px auto 0;background:var(--bg-soft);
  border:1px solid var(--line);border-radius:14px;padding:22px 24px}
.fn-next h3{font-size:16px;margin:0 0 14px}
.fn-next ol{margin:0;padding-left:20px;color:var(--ink-2);font-size:15px;line-height:1.75}

.fn-foot{border-top:1px solid var(--line);padding:22px 0 40px;text-align:center;
  font-size:13px;color:var(--faint)}
.fn-foot a{color:var(--muted);text-decoration:none}

/* ---- Below-the-form sections: reuse the main site's .sec/.break/.rwall world ---- */

/* Standfirst: one line of emphasis, measure held to a comfortable read */
.fn-standfirst{max-width:62ch;margin:34px auto 0;text-align:center;font-size:clamp(17px,2.1vw,20px);
  line-height:1.62;color:var(--ink-2)}
.break .fn-standfirst{color:var(--sink-muted)}

/* Timeline — the sequence and the clock ARE the argument, so the time leads */
.tl{list-style:none;max-width:660px;margin:48px auto 0;padding:0;position:relative}
.tl::before{content:"";position:absolute;left:86px;top:10px;bottom:26px;width:1px;
  background:linear-gradient(180deg,var(--line-2),transparent)}
.break .tl::before{background:linear-gradient(180deg,var(--sink-line),transparent)}

.tl li{position:relative;display:grid;grid-template-columns:74px 1fr;gap:26px;
  padding:0 0 26px;align-items:baseline}
.tl li:last-child{padding-bottom:0}
.tl-t{font-size:13px;font-weight:600;text-align:right;color:var(--muted);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;white-space:nowrap}
.break .tl-t{color:var(--sink-muted)}
.tl-b{font-size:clamp(16px,2vw,17.5px);line-height:1.6;color:var(--ink-2);max-width:46ch}
.break .tl-b{color:var(--sink-ink)}

/* node on the spine */
.tl li::before{content:"";position:absolute;left:82px;top:9px;width:9px;height:9px;border-radius:50%;
  background:var(--line-2);border:2px solid var(--bg)}
.sec-soft .tl li::before{border-color:var(--bg-soft)}
.break .tl li::before{background:var(--sink-line);border-color:var(--sink)}

/* the cold ending lands muted; the warm ending lands in accent */
.tl-cold .tl-end .tl-b{color:var(--sink-muted)}
.tl-warm .tl li::before{background:var(--accent);border-color:var(--bg-soft)}
.tl-warm .tl-end .tl-b{color:var(--ink);font-weight:600}
.tl-warm .tl-end::before{box-shadow:0 0 0 5px var(--accent-soft)}

@media(max-width:560px){
  .tl::before{left:8px}
  .tl li{grid-template-columns:1fr;gap:4px;padding-left:30px;padding-bottom:22px}
  .tl li::before{left:4px;top:7px}
  .tl-t{text-align:left}
  .tl-b{max-width:none}
}

/* Three supporting points — deliberately not cards, just typographic columns */
.fn-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;max-width:940px;
  margin:60px auto 0;text-align:left}
.fn-grid h3{font-size:16.5px;letter-spacing:-.01em;margin:0 0 9px;padding-top:16px;
  border-top:1px solid var(--line-2)}
.fn-grid p{font-size:15.5px;line-height:1.62;color:var(--muted);margin:0}
@media(max-width:820px){.fn-grid{grid-template-columns:1fr;gap:26px;margin-top:44px}}

.fn-disclaimer{max-width:58ch;margin:30px auto 0;text-align:center;font-size:13px;
  line-height:1.6;color:var(--faint)}
.fn-endcta{text-align:center;margin-top:38px}
.fn-endcta .btn{font-size:16px;padding:15px 30px}

/* Section-head rhythm: the site's h2 sits flush to its supporting line, which reads
   cramped at these longer headings. Give the lede room and hold a readable measure. */
.sec-head h2 + p,
.break-head h2 + p{margin-top:18px;max-width:60ch;margin-left:auto;margin-right:auto}
.break-note{max-width:62ch;margin-left:auto;margin-right:auto;line-height:1.65}