/* ==========================================================================
   TOKENS: matched to the TCC GHP demo page (thecontractorconsultants.com)
   Montserrat · warm near-black · white · orange accent
   ========================================================================== */
:root{
  --hero-img:none;       /* set from CONFIG.heroImage in module.js */
  --black:#0F1315;        /* hero base, sampled from the GHP hero image */
  --black-2:#231D1A;      /* ink (demo: --t-ink) */
  --card-dark:rgba(255,255,255,.045); /* cards on the hero texture */
  --ink:#231D1A;          /* body copy on light */
  --muted:#6B5F58;        /* secondary copy on light (demo: --t-ink-soft), 6.1:1 */
  --on-dark:rgba(255,255,255,.88);
  --on-dark-muted:rgba(255,255,255,.68);
  --hair-dark:rgba(255,255,255,.08);
  --line:#E9E4DE;
  --line-strong:#D6CFC7;
  --cream:#F7F4EF;        /* light bands (demo: --t-cream) */
  --white:#FFFFFF;
  --orange:#F7931E;
  --orange-deep:#C66F08;  /* button edge, numerals (demo: .stat-number) */
  --orange-soft:#FDEBD3;
  --orange-tint:#FFF3E4;
  --orange-ink:#1A0E02;   /* text on orange (demo: .package-badge) */
  --mark:rgba(247,147,30,.5); /* heading highlight (demo) */
  --error:#C2311B;
  --focus-ring:0 0 0 3px rgba(247,147,30,.5);

  --display:'Montserrat',-apple-system,'Segoe UI',sans-serif;
  --body:'Montserrat',-apple-system,'Segoe UI',sans-serif;

  --r-sm:10px; --r:16px; --r-lg:20px;
  --col:760px;
  --gutter:16px;
  --ease-pop:cubic-bezier(.34,1.56,.64,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden;overscroll-behavior-x:none}
@supports (overflow:clip){html{overflow-x:clip}}
body{overflow-x:hidden;overscroll-behavior-x:none}
@supports (overflow:clip){body{overflow-x:clip}}
body{margin:0;background:var(--cream);color:var(--ink);font:400 16px/1.6 var(--body);-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:8px}
svg{display:block;flex-shrink:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ==========================================================================
   HEADER: logo only. No nav, no links. The funnel has no exits.
   ========================================================================== */
/* header floats on the hero so the texture (and its top-right stripes) runs to the top edge */
:root{--hdr:84px;--hdr-gap:24px;--section-y:56px;--vid-off:526px}  /* vid-off: height of everything above/below the video up to the button (+16px) */  /* section-y: breathing room on each side of a dark/cream change */
@media (min-width:900px){:root{--section-y:96px}}
.site-header{position:absolute;top:0;left:0;right:0;z-index:5;background:transparent;color:var(--white)}
.page > .band-dark:first-child{padding-top:calc(var(--hdr) + var(--hdr-gap))}
.site-header .inner{max-width:var(--col);margin:0 auto;height:var(--hdr);padding:0 var(--gutter);display:flex;align-items:center}
.logo-img{display:block;height:44px;width:auto;user-select:none}
@media (max-width:899px){:root{--hdr:92px;--hdr-gap:24px}.logo-img{height:50px}}  /* phones/tablets: bigger logo, clear gap above the stepper */

/* ==========================================================================
   BANDS: dark hero band + cream content band, as on the demo page
   ========================================================================== */
main{outline:none}
.wrap{max-width:var(--col);margin:0 auto;padding:0 var(--gutter)}
.band-dark{background:var(--black);color:var(--white);padding:4px 0 var(--section-y)}
/* Hero texture from the GHP page. Instead of scaling the whole image (which crops the corners),
   each corner shows its own slice of hero-bg.png at 1:1, so the orange stripes always read. */
.band-dark,.demo-dark,.band-light .dark-card{position:relative;isolation:isolate;overflow:hidden;--s:1}
.band-dark::before,.band-dark::after,.demo-dark::before,.demo-dark::after,.band-light .dark-card::before,.band-light .dark-card::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;background:var(--hero-img) no-repeat;background-size:calc(1440px * var(--s)) auto}
.band-dark::before,.demo-dark::before,.band-light .dark-card::before{top:0;right:0;width:calc(520px * var(--s));height:calc(150px * var(--s));background-position:right top;
  -webkit-mask-image:linear-gradient(to left,#000 70%,transparent);mask-image:linear-gradient(to left,#000 70%,transparent)}
.band-dark::after,.demo-dark::after,.band-light .dark-card::after{bottom:0;left:0;width:calc(760px * var(--s));height:calc(150px * var(--s));background-position:left bottom;
  -webkit-mask-image:linear-gradient(to right,#000 70%,transparent);mask-image:linear-gradient(to right,#000 70%,transparent)}
@media (max-width:900px){.band-dark,.demo-dark,.band-light .dark-card{--s:.75}}
@media (max-width:520px){.band-dark,.demo-dark,.band-light .dark-card{--s:.55}}
.band-light .dark-card,.demo-dark .dark-card{--s:.6}
.band-light{background:var(--cream);padding:var(--section-y) 0}
.page{animation:pageIn .35s ease both}
@keyframes pageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ==========================================================================
   PROGRESS BAR
   done = orange + check pop · current = white, fills orange as you watch · future = dim + lock
   ========================================================================== */
.progress{margin:0 0 60px}
.kicker{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin:0 0 14px}
.kicker .eyebrow{margin:0}
.kicker{align-items:center}
.kicker-l{display:flex;align-items:center;gap:12px;min-width:0}
.back-btn{flex:none;width:34px;height:34px;margin:-11px 0;border-radius:50%;display:grid;place-items:center;color:var(--orange);border:1.5px solid rgba(255,255,255,.22);transition:border-color .2s,background .2s,transform .2s}
.back-btn:hover{border-color:var(--orange);background:rgba(247,147,30,.12);transform:translateX(-2px)}
.back-btn::before{content:"";position:absolute;inset:-5px;border-radius:50%}  /* 44px tap target */
.back-btn{position:relative}
@media (min-width:900px){
  .kicker{position:relative}
  .kicker-l{gap:0}
  .back-btn{position:absolute;right:calc(100% + 20px);top:50%;margin:0;transform:translateY(-50%)}
  .back-btn:hover{transform:translate(-2px,-50%)}
}
.progress-time{font:500 12px/1 var(--body);color:var(--on-dark-muted);white-space:nowrap}
@media (max-width:520px){.progress{margin-bottom:44px}.progress-time{display:none}}
.stepper{display:grid;grid-template-columns:repeat(calc(var(--n) - 1),1fr) auto;list-style:none;margin:0;padding:0}
.st{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;align-items:center;row-gap:10px;min-width:0}
.st:last-child{grid-template-columns:auto}
.st-dot{--d:30px;position:relative;width:var(--d);height:var(--d);border-radius:50%;display:grid;place-items:center;
  border:2px solid rgba(255,255,255,.2);background:var(--black);transition:background .3s,border-color .3s,box-shadow .3s}
.st-dot::after{content:"";width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.2)}
.st.current .st-dot{border-color:var(--orange);box-shadow:0 0 0 5px rgba(247,147,30,.18)}
.st.current .st-dot::after{background:var(--orange)}
.st.done .st-dot{border-color:var(--orange);background:var(--orange);color:var(--orange-ink)}
.st.done .st-dot::after{display:none}
.st.pop .st-dot{animation:checkPop .55s var(--ease-pop) both}
@keyframes checkPop{0%{transform:scale(.4)}100%{transform:scale(1)}}
.st-line{position:relative;height:2px;background:rgba(255,255,255,.14);overflow:hidden}
.st-line i{position:absolute;inset:0;background:var(--orange);transform-origin:left;transform:scaleX(var(--f,0));transition:transform .5s ease}
.st.pop .st-line i{animation:lineFill .6s .1s ease both}
@keyframes lineFill{from{transform:scaleX(0)}}
.st-label{grid-column:1 / -1;font:500 13px/1.25 var(--body);color:rgba(255,255,255,.45);white-space:nowrap;padding-right:8px;text-align:left}
.st.done .st-label{color:var(--white);font-weight:700}
.st.current .st-label{color:rgba(255,255,255,.75)}
.st.done button{cursor:pointer}
.st.done button.st-label:hover{text-decoration:underline;text-underline-offset:3px}
.st.done .st-dot:hover{box-shadow:0 0 0 5px rgba(247,147,30,.18)}
.st.open .st-dot{border-color:rgba(247,147,30,.7);cursor:pointer}
.st.open .st-dot::after{background:rgba(247,147,30,.7)}
.st.open .st-dot:hover{box-shadow:0 0 0 5px rgba(247,147,30,.18)}
.st.open .st-label{color:rgba(255,255,255,.75)}
.st.open button.st-label:hover{text-decoration:underline;text-underline-offset:3px}
@media (max-width:520px){.st-dot{--d:26px}.st-dot::after{width:8px;height:8px}.st-label{font-size:11px;padding-right:4px}}

/* ==========================================================================
   HERO TYPE (demo: .hero-heading, white with an orange second line)
   ========================================================================== */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font:700 12px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--orange);margin:0 0 12px}
.band-light .eyebrow{color:var(--ink)}
.band-light .eyebrow::before{content:"";width:16px;height:3px;border-radius:2px;background:var(--orange)}
/* Step headline: only the visible step's is an <h1>; hidden steps are demoted to <h2> (module.js), so style by class */
.step-title{font:800 clamp(25px,7vw,46px)/1.12 var(--display);text-transform:uppercase;letter-spacing:-.01em;color:var(--white);margin:0 0 12px;outline:none}
.step-title .hl{display:block;color:var(--orange)}
.step-title:focus,.step-title:focus-visible{box-shadow:none}
.sub{font-size:16px;line-height:1.55;color:var(--on-dark);margin:0 0 24px;max-width:640px}
@media (max-width:899px){
  .kicker{margin-bottom:16px}
  .kicker .eyebrow{font-size:11px;letter-spacing:.1em;line-height:1.5}
  .step-title{line-height:1.08;letter-spacing:-.015em;margin-bottom:16px}
  .sub{margin-bottom:28px}
}
.sub strong{color:var(--white);font-weight:700}
mark{background:var(--mark);color:inherit;padding:0 6px;border-radius:4px;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* ==========================================================================
   VIDEO FRAME: 16:9, rounded, black. The Vidalytics embed is mounted inside.
   ========================================================================== */
.video{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:#000;color:var(--white);border:1px solid rgba(255,255,255,.1);
  background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);background-size:22px 22px;isolation:isolate}
.video{container-type:inline-size}
.video-hit{position:absolute;inset:0;z-index:1;width:100%;cursor:pointer}
/* The play button, eq bars, controls and scrub bar below are only used by the demo player
   (a video step with no Vidalytics URL yet). With a real video, Vidalytics draws its own player. */
.video:not(.started) .play{top:42%}
.play{position:absolute;left:50%;top:50%;width:68px;height:68px;margin:-34px 0 0 -34px;border-radius:50%;background:var(--orange);display:grid;place-items:center;color:var(--orange-ink);transition:transform .2s var(--ease-pop),opacity .2s;z-index:2;pointer-events:none;box-shadow:0 8px 30px rgba(247,147,30,.35)}
.video-hit:hover + .play{transform:scale(1.08)}
.play::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid rgba(247,147,30,.45);animation:ring 2.2s ease-out infinite}
@keyframes ring{0%{transform:scale(.85);opacity:1}100%{transform:scale(1.35);opacity:0}}
.video.playing .play{opacity:0;transform:scale(.6)}
.video-tag{position:absolute;right:12px;top:12px;z-index:2;font:600 10px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.85);background:rgba(15,19,21,.55);border:1px dashed rgba(255,255,255,.4);padding:6px 8px;border-radius:6px;pointer-events:none}
.video-now{position:absolute;inset:0;display:grid;place-items:center;z-index:0;opacity:0;transition:opacity .3s}
.video.started .video-now{opacity:1}
.video.started:not(.playing) .video-now{opacity:0}
.video-now .bars{display:flex;gap:5px;align-items:flex-end;justify-content:center;height:34px}
.video-now .bars i{width:5px;background:var(--orange);border-radius:2px;animation:eq 1s ease-in-out infinite}
.video-now .bars i:nth-child(2){animation-delay:-.2s}.video-now .bars i:nth-child(3){animation-delay:-.45s}.video-now .bars i:nth-child(4){animation-delay:-.7s}
.video:not(.playing) .video-now .bars i{animation-play-state:paused}
@keyframes eq{0%,100%{height:8px}50%{height:34px}}
.video-now p{margin:10px 0 0;font:600 12px/1 var(--body);color:rgba(255,255,255,.6);text-align:center;letter-spacing:.06em;text-transform:uppercase}
.controls{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:center;gap:10px;padding:10px 12px;background:rgba(0,0,0,.75);transform:translateY(100%);transition:transform .25s}
.video.started .controls{transform:none}
.ctl-btn{width:32px;height:32px;display:grid;place-items:center;border-radius:6px;color:var(--white)}
.ctl-btn:hover{background:rgba(255,255,255,.12)}
.ctl-time{font:600 11px/1 var(--body);font-variant-numeric:tabular-nums;color:rgba(255,255,255,.85);white-space:nowrap}
.scrub{position:relative;flex:1;height:24px;cursor:pointer}
.scrub-track{position:absolute;left:0;right:0;top:10px;height:4px;border-radius:2px;background:rgba(255,255,255,.22)}
.scrub-max{position:absolute;left:0;top:0;bottom:0;border-radius:2px;background:rgba(255,255,255,.4)}
.scrub-pos{position:absolute;left:0;top:0;bottom:0;border-radius:2px;background:var(--orange)}
.scrub-knob{position:absolute;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--orange)}
.scrub-mark{position:absolute;left:90%;top:4px;width:2px;height:16px;background:var(--white);border-radius:1px}
.scrub-mark::after{content:attr(data-label);position:absolute;bottom:18px;left:50%;transform:translateX(-50%);font:700 9px/1 var(--body);color:var(--white);letter-spacing:.04em}

.cta-row{margin-top:24px}


/* ==========================================================================
   BUTTONS: locked (charging) and unlocked
   ========================================================================== */
.btn{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:56px;padding:0 18px;border-radius:12px;
  font:800 15px/1.2 var(--display);letter-spacing:.06em;text-transform:uppercase;overflow:hidden;isolation:isolate;transition:transform .12s,background .2s,color .2s;text-align:center}
.btn-primary{background:var(--orange);color:var(--orange-ink);box-shadow:inset 0 -4px 0 var(--orange-deep)}
.btn-primary:hover{filter:brightness(1.05)}
.btn-primary:active{transform:translateY(1px);box-shadow:inset 0 -2px 0 var(--orange-deep)}
.btn-primary .arrow{transition:transform .2s}
.btn-primary:hover .arrow{transform:translateX(4px)}
.btn-primary[disabled]{background:#ECE7E1;color:#8A817B;box-shadow:inset 0 0 0 1px var(--line-strong);cursor:not-allowed;filter:none}
.btn-ghost{background:var(--black-2);color:var(--white)}
.btn-ghost:hover{background:var(--orange);color:var(--orange-ink)}

.btn-locked{background:rgba(255,255,255,.07);color:rgba(255,255,255,.72);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);cursor:not-allowed}
.btn-locked .charge{position:absolute;inset:0;z-index:-1;background:rgba(247,147,30,.32);transform-origin:left;transform:scaleX(var(--c,0));transition:transform .3s linear}
.btn-locked.shake{animation:shake .4s ease}
@keyframes shake{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
.btn.unlocking{animation:unlock .6s var(--ease-pop) both}
.btn.unlocking::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;background:rgba(255,255,255,.55);transform:skewX(-20deg);animation:shine .8s .15s ease both;z-index:1}
@keyframes unlock{0%{transform:scale(.97)}55%{transform:scale(1.035)}100%{transform:scale(1)}}
@keyframes shine{from{left:-40%}to{left:120%}}
.cta-note{display:flex;align-items:center;gap:6px;justify-content:center;margin:10px 0 0;font-size:13px;font-weight:500;color:var(--on-dark-muted);text-align:center;min-height:20px}
.cta-note b{color:var(--orange)}
.cta-note.win{color:var(--white);font-weight:700}
.cta-note.win::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--orange)}

/* ==========================================================================
   CARDS
   ========================================================================== */
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px}
.card-title{font:800 12px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin:0 0 14px}
.num-list{list-style:none;margin:0;padding:0;counter-reset:n}
.num-list li{counter-increment:n;display:grid;grid-template-columns:30px 1fr;gap:6px;padding:7px 0;font-size:15px;line-height:1.5}
.num-list li::before{content:counter(n,decimal-leading-zero);font:900 15px/1.5 var(--display);color:var(--orange-deep)}
.dark-card{background:var(--card-dark);color:var(--on-dark);border:1px solid rgba(255,255,255,.09);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.dark-card .card-title{color:var(--orange)}
.dark-card .num-list li::before{color:var(--orange)}
.dark-card strong{color:var(--white)}
.chapters{margin-top:24px}
.band-light .dark-card{background:var(--black);border:0;-webkit-backdrop-filter:none;backdrop-filter:none}

/* ==========================================================================
   FAQ ACCORDION: one open at a time (demo: centred uppercase title + highlight)
   ========================================================================== */
.faq h2{font:800 clamp(22px,5.6vw,34px)/1.5 var(--display);text-transform:uppercase;color:#000;margin:0 0 22px;text-align:center}
.faq-list{display:grid;gap:10px}
.faq-item{background:var(--white);border:1px solid var(--line);border-radius:14px;transition:border-color .2s}
.faq-item.open{border-color:var(--orange)}
.faq-q{display:flex;width:100%;align-items:center;justify-content:space-between;gap:16px;min-height:60px;padding:14px 16px 14px 20px;text-align:left;font:700 15px/1.4 var(--body);color:var(--ink)}
.faq-icon{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--orange-soft);color:var(--orange-deep);transition:background .2s,color .2s}
.faq-icon svg{transition:transform .25s}
.faq-item.open .faq-icon{background:var(--orange);color:var(--orange-ink)}
.faq-item.open .faq-icon svg{transform:rotate(45deg)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s ease}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a > div{overflow:hidden}
.faq-a-body{padding:0 56px 18px 20px;color:var(--ink);font-size:15px;line-height:1.65}
.faq-a-body p{margin:0 0 10px}
.faq-a-body > :last-child{margin-bottom:0}
.faq-a-body ul,.faq-a-body ol{margin:0 0 10px;padding-left:20px}
.faq-a-body a{color:var(--orange-deep)}
.faq-more{display:flex;margin:18px auto 0;align-items:center;gap:8px;min-height:44px;font:700 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--orange-deep)}
.faq-more:hover{color:var(--ink)}

/* ==========================================================================
   EMBED CARDS: framed white card around the Fillout form and the HubSpot Meetings calendar.
   ========================================================================== */
.embed{background:var(--white);border:1px solid var(--line);border-radius:18px;box-shadow:0 18px 40px -26px rgba(35,29,26,.35)}
.embed-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 14px 14px 20px;background:var(--orange);border-radius:17px 17px 0 0}
.embed-head b{font:800 12px/1.2 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--orange-ink)}
.ph-tag{font:700 10px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--orange-ink);border:1px dashed rgba(26,14,2,.4);padding:6px 8px;border-radius:6px;white-space:nowrap}
.embed-body{padding:24px 20px}
@media (min-width:700px){.embed-body{padding:28px 32px 32px}}
.ph-note{display:flex;gap:10px;align-items:flex-start;margin:0 0 24px;padding:12px 14px;border-radius:12px;background:var(--orange-tint);border:1px solid var(--orange-soft);font-size:13px;line-height:1.5;color:var(--ink)}
.ph-note svg{color:var(--orange-deep);margin-top:1px}

.hs-field{margin:0 0 20px}
.hs-label{display:block;font:700 14px/1.35 var(--body);color:var(--ink);margin:0 0 8px}
.hs-label .req{color:var(--error);margin-left:2px}
.hs-help{display:block;font-size:12px;color:var(--muted);margin:-4px 0 8px}
.hs-input{width:100%;height:52px;padding:0 14px;border:1.5px solid var(--line-strong);border-radius:10px;background:var(--white);font:500 16px/1 var(--body);color:var(--ink);transition:border-color .15s,box-shadow .15s;appearance:none}
textarea.hs-input{height:auto;min-height:104px;padding:14px;line-height:1.5;resize:vertical}
.hs-input::placeholder{color:#9A918B}
.hs-input:hover{border-color:#BDB4AA}
.hs-input:focus{outline:none;border-color:var(--orange);box-shadow:var(--focus-ring)}
.hs-input.invalid{border-color:var(--error);background:#FFF8F6}
.hs-input.invalid:focus{box-shadow:0 0 0 3px rgba(194,49,27,.22)}
.select-wrap{position:relative}
.select-wrap svg{position:absolute;right:14px;top:50%;margin-top:-8px;pointer-events:none;color:var(--ink)}
select.hs-input{padding-right:40px;cursor:pointer}
.hs-error[hidden]{display:none}
.hs-error{display:flex;align-items:center;gap:6px;margin:8px 0 0;font:600 13px/1.3 var(--body);color:var(--error)}
.choice-grid{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:560px){.choice-grid{grid-template-columns:1fr 1fr}}
.choice{position:relative;display:flex;align-items:center;gap:12px;min-height:52px;padding:12px 14px;border:1.5px solid var(--line-strong);border-radius:10px;background:var(--white);cursor:pointer;font-weight:600;font-size:15px;transition:border-color .15s,background .15s}
.choice:hover{border-color:#BDB4AA}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice .dot{width:20px;height:20px;border-radius:50%;border:2px solid #A39A92;display:grid;place-items:center;flex-shrink:0}
.choice .dot::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--orange);transform:scale(0);transition:transform .18s var(--ease-pop)}
.choice:has(input:checked){border-color:var(--orange);background:var(--orange-tint)}
.choice:has(input:checked) .dot{border-color:var(--orange)}
.choice:has(input:checked) .dot::after{transform:scale(1)}
.choice:has(input:focus-visible){box-shadow:var(--focus-ring)}
.form-foot{margin:26px 0 0;padding:22px 0 0;border-top:1px solid var(--line)}
.form-foot p{margin:10px 0 0;font-size:12px;color:var(--muted);text-align:center}

.book-grid{display:grid;gap:16px}
@media (min-width:760px){.book-grid .num-list{display:grid;grid-template-columns:repeat(3,1fr);gap:4px 20px}}
.cal-wrap{display:grid;gap:22px}
@media (min-width:640px){.cal-wrap{grid-template-columns:1fr 196px}}
.cal-top{display:flex;align-items:center;justify-content:space-between;margin:0 0 12px}
.cal-top b{font:800 15px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.cal-nav{display:flex;gap:4px}
.cal-nav button{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;border:1px solid var(--line-strong)}
.cal-nav button:hover:not([disabled]){border-color:var(--ink)}
.cal-nav button[disabled]{opacity:.35;cursor:not-allowed}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}
.cal-dow{font:700 10px/1 var(--body);letter-spacing:.1em;color:var(--muted);padding:6px 0 8px;text-transform:uppercase}
.cal-day{aspect-ratio:1;max-height:48px;min-height:40px;border-radius:10px;display:grid;place-items:center;font:600 14px/1 var(--body);color:#BDB4AA}
.cal-day.open{background:var(--orange-tint);color:var(--ink);cursor:pointer;box-shadow:inset 0 0 0 1px var(--orange-soft)}
.cal-day.open:hover{box-shadow:inset 0 0 0 2px var(--orange)}
.cal-day.sel{background:var(--orange);color:var(--orange-ink);box-shadow:inset 0 -3px 0 var(--orange-deep);font-weight:800}
.cal-day.today{text-decoration:underline;text-underline-offset:4px}
.cal-fine{margin:12px 0 0;font-size:12px;color:var(--muted)}
.slots-head b{display:block;font:800 13px/1.3 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.slots-head span{display:block;font-size:11px;color:var(--muted);margin:4px 0 12px}
.slots{display:grid;gap:8px}
@media (max-width:639px){.slots{grid-template-columns:1fr 1fr}}
.slot{min-height:46px;border-radius:10px;border:1.5px solid var(--line-strong);font:700 14px/1 var(--body);color:var(--ink);background:var(--white)}
.slot:hover{border-color:var(--ink)}
.slot[aria-pressed="true"]{border-color:var(--orange);background:var(--orange-tint)}
.slots-empty{font-size:13px;color:var(--muted);padding:14px;border:1px dashed var(--line-strong);border-radius:10px;text-align:center}
.booked{display:flex;gap:14px;align-items:center}
.pick-sum{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin:0 0 24px;padding:0 0 20px;border-bottom:1px solid var(--line)}
.link-btn{display:inline-flex;align-items:center;gap:6px;min-height:40px;font:700 13px/1 var(--body);color:var(--ink)}
.link-btn svg{color:var(--orange-deep)}
.link-btn:hover{text-decoration:underline;text-underline-offset:3px}
.det-title{margin:0 0 4px;font:800 15px/1.2 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.det-sub{margin:0 0 20px;font-size:13px;color:var(--muted)}
.det-grid{display:grid;gap:0 14px}
@media (min-width:560px){.det-grid{grid-template-columns:1fr 1fr}}
.booked .badge{width:48px;height:48px;margin:0;box-shadow:0 0 0 6px var(--orange-tint)}

/* ==========================================================================
   FINISH POP-UP
   ========================================================================== */
.modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:16px}
.modal-dim{position:absolute;inset:0;background:rgba(26,22,20,.74);animation:fade .25s ease both}
.modal-box{position:relative;width:100%;max-width:460px;background:var(--white);border-radius:22px;padding:36px 24px 24px;text-align:center;overflow:hidden;animation:modalIn .5s var(--ease-pop) both;box-shadow:0 30px 80px -20px rgba(0,0,0,.55)}
.modal-box::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--orange)}
@keyframes fade{from{opacity:0}}
@keyframes modalIn{from{opacity:0;transform:translateY(24px) scale(.94)}}
.badge{width:84px;height:84px;margin:0 auto 18px;border-radius:50%;background:var(--orange);display:grid;place-items:center;color:var(--orange-ink);box-shadow:0 0 0 8px var(--orange-tint)}
.modal .badge{animation:badgeIn .7s .15s var(--ease-pop) both}
.modal .badge path{stroke-dasharray:40;stroke-dashoffset:40;animation:draw .45s .55s ease forwards}
@keyframes badgeIn{from{transform:scale(0) rotate(-30deg)}}
@keyframes draw{to{stroke-dashoffset:0}}
.modal-box h2{font:800 30px/1.15 var(--display);text-transform:uppercase;color:#000;margin:0 0 12px}
.modal-box p{margin:0 0 20px;font-size:15px;line-height:1.6;color:var(--ink)}
.slot-chip{display:inline-flex;align-items:center;gap:8px;margin:0 0 18px;padding:8px 14px;border-radius:99px;background:var(--black-2);color:var(--white);font:700 13px/1 var(--body)}
.slot-chip svg{color:var(--orange)}
.modal-box p.m-invite{margin:-6px 0 16px;font-size:13px;color:var(--muted)}
.modal-box p.m-invite b{color:var(--ink);font-weight:700;word-break:break-all}
#confetti{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:70}

/* ==========================================================================
   FOOTER: matches the GHP page footer. Links open in a new tab so the funnel stays open.
   ========================================================================== */
.site-footer{background:#1C1917;color:rgba(255,255,255,.72);font-size:13px}
.site-footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:80px;padding-top:20px;padding-bottom:20px}
.site-footer a{color:rgba(255,255,255,.72);text-decoration:none;transition:color .2s}
.site-footer a:hover{color:var(--orange)}
.site-footer .sep{margin:0 8px}
@media (max-width:640px){.site-footer .wrap{flex-direction:column;justify-content:center;text-align:center;padding-bottom:28px}}
@media (min-width:900px){
  .band-dark{padding:12px 0 var(--section-y)}
  .step-title{font-size:42px}
  .sub{margin-bottom:16px}
  .sub{max-width:none}
  .sub{font-size:18px;line-height:1.5}
  .btn{font-size:16px}
  /* CTA centred under the video on every step */
  .cta-row{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:28px}
  .cta-wrap{width:100%;max-width:440px}
  .cta-note{justify-content:center}
  .chapters{margin-top:28px}
}
/* short laptop screens: narrow the column so video + button share the first screen */
/* video always spans the full content column, edge to edge with the stepper */
@media (min-width:900px) and (max-height:860px){.step-title{font-size:38px}:root{--hdr:72px;--hdr-gap:20px;--vid-off:486px}.progress{margin-bottom:44px}.sub{margin-bottom:18px}}
@media (max-width:400px){.btn{font-size:14px;letter-spacing:.04em;padding:0 14px}.embed-head b{font-size:11px}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ==========================================================================
   HUBSPOT BUILD ADDITIONS
   ========================================================================== */
[hidden]{display:none!important}
.logo-text{font:800 14px/1.2 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--white)}
.video.real{background-image:none}
.video.real > div{border-radius:inherit}
.video-tag{position:absolute;right:12px;top:12px;z-index:2;font:600 10px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.85);background:rgba(15,19,21,.55);border:1px dashed rgba(255,255,255,.4);padding:6px 8px;border-radius:6px;pointer-events:none}
@container (max-width:560px){.video-tag{display:none}}
.meetings-iframe-container{min-height:640px}
.meetings-iframe-container iframe{display:block;width:100%;border:0}
.embed-body.meet{padding:8px}
@media (min-width:700px){.embed-body.meet{padding:8px 12px}}

/* Page-editor step switcher (only rendered inside HubSpot's editor) */
.ghp-editor-bar{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:80;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;max-width:calc(100% - 32px);padding:8px 10px;border-radius:14px;background:#000;color:var(--white);box-shadow:0 12px 30px -10px rgba(0,0,0,.6);font:600 12px/1 var(--body)}
.ghp-editor-bar b{margin:0 6px 0 4px;color:var(--orange);letter-spacing:.06em;text-transform:uppercase;font-size:11px}
.ghp-editor-bar button{min-height:32px;padding:0 12px;border-radius:8px;border:1px solid rgba(255,255,255,.25);color:var(--white);font:600 12px/1 var(--body)}
.ghp-editor-bar button[aria-pressed="true"]{background:var(--orange);border-color:var(--orange);color:var(--orange-ink)}


/* Transcript dropdown (prototype styles); only rendered when a video has a transcript */
.video-under{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:14px 0 4px}
@media (min-width:900px){.video-under{margin:0;justify-content:center;gap:14px}}
.t-toggle{white-space:nowrap;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border:1px solid rgba(255,255,255,.22);border-radius:99px;font:600 13px/1 var(--body);color:var(--white)}
.t-toggle svg:first-child{color:var(--orange)}
.t-toggle:hover{border-color:var(--orange)}
.t-toggle .chev{transition:transform .25s}
.t-toggle[aria-expanded="true"] .chev{transform:rotate(180deg)}
.transcript{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.transcript.open{grid-template-rows:1fr;margin:14px 0 0}
.transcript > div{overflow:hidden}
.t-panel{background:var(--card-dark);border:1px solid rgba(255,255,255,.09);border-radius:var(--r);color:var(--on-dark)}
.t-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--hair-dark)}
.t-head b{font:800 12px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--orange)}
.t-head span{font-size:12px;color:var(--on-dark-muted)}
.t-body{max-height:300px;overflow:auto;padding:6px 18px 14px;overscroll-behavior:contain}
.t-line{display:grid;grid-template-columns:44px 1fr;gap:10px;padding:10px 0;border-bottom:1px solid var(--hair-dark);font-size:15px;line-height:1.6}
.t-line.no-time{grid-template-columns:1fr}
.t-line:last-child{border:0}
.t-line time{font:700 12px/1.9 var(--body);color:var(--orange);font-variant-numeric:tabular-nums}

/* Fillout form at step 3: full-bleed inside the card; Continue button for endings that need another task first */
.embed-body.fillout{padding:0;overflow:hidden;border-radius:0 0 17px 17px}
.embed-body.fillout [data-fillout-id]{display:block;height:calc(100vh - 120px);height:calc(100dvh - 120px);min-height:560px;max-height:900px}
.embed-body.fillout iframe{display:block;width:100%;height:100%}
.wrap-form{max-width:1000px}   /* step 3 card: wider than the 760px text column so the form has room */
.form-next{margin:20px 0 0}
.form-next:empty{display:none}

/* Above the fold: the video is centred when module.js narrows it to keep its button on screen */
.video{margin-left:auto;margin-right:auto}
@media (min-width:900px) and (max-height:760px){
  :root{--hdr:60px;--hdr-gap:12px}
  .progress{margin-bottom:28px}
  .step-title{font-size:32px}
  .sub{font-size:16px;margin-bottom:12px}
  .cta-row{margin-top:16px}
}
@media (max-width:899px) and (max-height:700px){
  :root{--hdr:72px;--hdr-gap:12px}
  .logo-img{height:40px}
  .progress{margin-bottom:22px}
  .kicker{margin-bottom:10px}
  .step-title{margin-bottom:10px}
  .sub{margin-bottom:14px;font-size:15px}
  .cta-row{margin-top:14px}
}