/* =============================================================================
   home.css — the homepage's own components, on top of /coaches/lp.css.
   The step-path and its four visual mocks are ported from the coaches page,
   scoped under .vis so the mock quiz can never collide with the real one.
   ============================================================================= */

/* ---------- the path: four steps, each with a screen you can recognise ------- */
.ins-sub{max-width:48ch;margin:14px auto 0;color:#AEB6C4;font-size:18px;line-height:1.5;font-weight:500}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--pop);animation:insPing 1.6s infinite;flex:none}
@keyframes insPing{0%{box-shadow:0 0 0 0 rgba(255,59,48,.55)}70%{box-shadow:0 0 0 9px rgba(255,59,48,0)}100%{box-shadow:0 0 0 0 rgba(255,59,48,0)}}
@keyframes insBob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-6px)}}

.path{list-style:none;padding:0;margin:44px auto 0;max-width:1060px;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:26px}
.step{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
.step:not(:last-child):after{content:"";position:absolute;right:-22px;top:42%;width:18px;height:18px;
  border-top:3px solid var(--cta);border-right:3px solid var(--cta);transform:rotate(45deg);opacity:.8}
.vis{width:100%;aspect-ratio:4/5;border-radius:16px;overflow:hidden;position:relative;background:var(--dark2);
  border:1.5px solid var(--dark3);box-shadow:0 18px 44px rgba(0,0,0,.45);display:flex;flex-direction:column;text-align:left}
.st-n{margin-top:16px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  font-weight:900;font-size:13px;background:var(--dark3);color:#AEB6C4}
.done .st-n{background:var(--cta);color:#0A0D14}
.here .st-n{background:var(--hi);color:var(--ink)}
.next .st-n{background:transparent;border:2px dashed var(--hi-deep);color:var(--hi)}
.st-t{margin-top:8px;font-family:var(--disp);font-size:22px;text-transform:uppercase;color:#fff;line-height:1}
.st-d{margin-top:6px;font-size:15px;color:#AEB6C4;font-weight:600;line-height:1.35}
.here .vis{border:2px solid var(--hi);box-shadow:0 0 0 6px rgba(255,226,61,.12),0 22px 50px rgba(0,0,0,.5)}
.pin{position:absolute;top:-15px;left:50%;transform:translate(-50%,0);z-index:2;background:var(--pop);color:#fff;
  font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;padding:6px 11px;border-radius:99px;
  white-space:nowrap;box-shadow:0 8px 20px rgba(255,59,48,.4);animation:insBob 1.8s ease-in-out infinite}
.pin:after{content:"";position:absolute;left:50%;bottom:-5px;margin-left:-5px;border:5px solid transparent;
  border-bottom:0;border-top-color:var(--pop)}

/* 1. the ad, as it looks in a feed */
.vis.ad{background:#fff;color:#0f1419}
.ig-top{display:flex;align-items:center;gap:8px;padding:7px 9px}
.ig-av{width:26px;height:26px;border-radius:50%;background:#0A0D14;color:var(--cta);display:grid;place-items:center;
  flex:none;box-shadow:0 0 0 2px #fff,0 0 0 3.5px #d62976}
.ig-av svg{width:13px;height:13px}
.ig-who b{display:block;font-size:11.5px;line-height:1.15;font-weight:700}
.ig-who i{display:block;font-style:normal;font-size:10px;color:#737373;line-height:1.2}
.ig-more{margin-left:auto;font-size:9px;letter-spacing:1px;color:#262626}
.ig-media{position:relative;flex:1;min-height:0;overflow:hidden;background:#ddd}
.ig-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 80%}
.ig-cap{position:absolute;left:0;right:0;bottom:6%;display:flex;flex-direction:column;align-items:center;gap:3px;padding:0 8px}
.ig-cap span{background:#fff;color:#000;font-weight:800;font-size:clamp(10px,1.05vw,12.5px);line-height:1.15;
  padding:3px 7px;border-radius:5px;text-align:center}
.ig-cta{display:flex;justify-content:space-between;align-items:center;padding:7px 10px;background:#0095F6;color:#fff;
  font-size:11.5px;font-weight:700}
.ig-cta span{font-size:16px;line-height:1}
.ig-act{display:flex;gap:10px;padding:7px 10px 3px}
.ig-act svg{width:17px;height:17px;fill:none;stroke:#262626;stroke-width:1.9;stroke-linejoin:round;stroke-linecap:round}
.ig-act .ig-save{margin-left:auto}
.ig-txt{padding:0 10px 8px;font-size:10.5px;line-height:1.35;color:#262626;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ig-txt b{font-weight:700}
.ig-txt span{color:#737373}

/* 2. the page, in miniature */
.vis.page{background:#fff}
.pg-bar{display:flex;align-items:center;gap:5px;padding:8px 10px;background:#EEF1F6;border-bottom:1px solid #E1E6EE}
.pg-bar i{width:7px;height:7px;border-radius:50%;background:#CFD6E3}
.pg-bar span{margin-left:6px;font-size:10px;color:#5A6472;font-weight:600;background:#fff;border-radius:6px;
  padding:3px 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:12px 14px;
  background:linear-gradient(160deg,rgba(18,183,106,.10),#fff 55%,rgba(255,226,61,.18))}
.pg-tag{font-size:8.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#2C3340;
  border:1px solid #E4E9F1;background:#fff;border-radius:99px;padding:3px 8px}
.pg-h{font-family:var(--disp);text-transform:uppercase;text-align:center;font-size:clamp(14px,1.7vw,20px);
  line-height:1.15;color:var(--ink)}
.pg-h em{font-style:normal;color:#0A0D14;padding:0 .12em;background:linear-gradient(var(--hi),var(--hi)) no-repeat;
  background-size:100% .96em;background-position:0 .32em}
.pg-field{width:82%;height:13px;border-radius:5px;background:#fff;border:1px solid #E1E6EE}
.pg-btn{width:82%;padding:7px 0;border-radius:7px;background:var(--cta);color:#fff;font-size:11px;font-weight:800;
  text-align:center;box-shadow:0 3px 0 var(--cta-d)}

/* 3. the qualifier, in miniature. Scoped to .vis so it cannot touch the real one. */
.vis.qzmock{background:#fff;padding:16px 14px;gap:9px;justify-content:center}
.qz-k{font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#5A6472}
.qz-bar{height:6px;border-radius:9px;background:#E4E9F1;overflow:hidden}
.qz-bar i{display:block;width:20%;height:100%;background:var(--cta);animation:qzGrow 3.4s ease-in-out infinite}
@keyframes qzGrow{0%,12%{width:20%}45%,62%{width:60%}92%,100%{width:100%}}
.qz-q{font-family:var(--disp);text-transform:uppercase;font-size:clamp(16px,1.8vw,21px);line-height:1.05;
  color:var(--ink);margin:4px 0 2px}
.qz-o{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;font-weight:700;color:#2C3340;
  border:1.5px solid #E4E9F1;border-radius:9px;padding:8px 10px}
.qz-o.on{border-color:var(--cta);background:rgba(18,183,106,.10);color:#0A7C4A}

/* 4. the calendar */
.vis.cal{background:#fff;padding:14px 12px;gap:8px;justify-content:center}
.cl-k{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#5A6472;
  padding-bottom:6px;border-bottom:1px solid #E4E9F1}
.cl-s{display:grid;grid-template-columns:34px 1fr;gap:6px;align-items:center}
.cl-s em{font-style:normal;font-size:10px;color:#A7B0C0;font-weight:700}
.cl-s .bk{font-size:10.5px;font-weight:800;color:#0A7C4A;background:rgba(18,183,106,.14);
  border-left:3px solid var(--cta);border-radius:6px;padding:7px 7px}
.cl-s .open{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:900;color:#6B5300;
  background:rgba(255,226,61,.30);border:2px dashed var(--hi-deep);border-radius:7px;padding:5px 7px}
.cl-s .open img{width:22px;height:22px;border-radius:50%;object-fit:cover}

@media(max-width:900px){
  .path{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 18px}
  .step:nth-child(2):after{display:none}
  .st-t{font-size:19px}.st-d{font-size:13.5px}
}
@media(max-width:520px){
  .path{grid-template-columns:1fr;max-width:300px;gap:34px}
  .step:after{display:none}
}

/* ---------- the real qualifier: ported from the coaches quiz ---------------- */
.quizbox{max-width:620px;margin:28px auto 0;background:#fff;border:2px solid var(--line);border-radius:20px;
  padding:26px 24px 28px;text-align:left;box-shadow:0 3px 8px rgba(10,13,20,.06),0 26px 60px rgba(10,13,20,.18)}
.qhead{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.qcount{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#0A0D14;
  background:var(--hi);border-radius:6px;padding:4px 9px;white-space:nowrap}
.qbar{flex:1;height:8px;border-radius:99px;background:var(--paper2);overflow:hidden;border:1px solid var(--line)}
.qfill{height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--cta),var(--cta-l));
  transition:width .45s cubic-bezier(.2,.8,.2,1)}
.qstep{animation:qin .4s cubic-bezier(.2,.7,.2,1) both}
@keyframes qin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.qq{font-family:var(--disp);font-weight:400;text-transform:uppercase;font-size:clamp(20px,3vw,28px);
  line-height:1.06;color:var(--ink);margin:0 0 8px}
.qframe{font-size:13.5px;font-weight:500;color:var(--ink2);line-height:1.5;margin:6px 0 16px;
  background:var(--paper2);border-left:3px solid var(--cta);border-radius:0 10px 10px 0;padding:11px 14px}
.qframe b{color:var(--ink);font-weight:800}
.qsub{font-size:13.5px;color:var(--mut);font-weight:600;margin-bottom:16px;line-height:1.45}
.qopts{display:grid;gap:10px}
.qopt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;font-family:var(--sans);font-size:15.5px;
  font-weight:700;color:var(--ink);background:#fff;border:2px solid var(--line);border-radius:12px;padding:15px 16px;
  cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s,transform .12s}
.qopt:hover{border-color:var(--cta);background:rgba(18,183,106,.05)}
.qopt:active{transform:scale(.99)}
.qopt:focus-visible{outline:3px solid var(--cta);outline-offset:2px}
.qtick{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);flex:none;display:grid;place-items:center;transition:.15s}
.qopt:hover .qtick{border-color:var(--cta)}
.qopt.sel{border-color:var(--cta);background:rgba(18,183,106,.09);box-shadow:0 8px 22px rgba(18,183,106,.18)}
.qopt.sel .qtick{background:var(--cta);border-color:var(--cta)}
.qopt.sel .qtick:after{content:"";width:7px;height:7px;border-radius:50%;background:#fff}
.qnav{display:flex;align-items:center;gap:12px;margin-top:18px}
.qback{background:none;border:0;color:var(--mut);font-family:var(--sans);font-weight:700;font-size:14px;cursor:pointer;padding:8px 4px}
.qback:hover{color:var(--ink)}
.qerr{font-size:13.5px;font-weight:700;color:var(--pop-ink);margin:2px 0 8px}
.qresult{text-align:center;animation:qin .42s cubic-bezier(.2,.7,.2,1) both}
.qicn{width:66px;height:66px;border-radius:50%;display:grid;place-items:center;margin:4px auto 16px}
.qicn svg{width:31px;height:31px}
.qresult h3{font-family:var(--disp);font-weight:400;text-transform:uppercase;line-height:1.05;
  font-size:clamp(23px,3.8vw,32px);color:var(--ink);margin:0 0 12px}
.qresult p{font-size:15.5px;color:var(--ink2);font-weight:500;line-height:1.55;max-width:44ch;margin:0 auto 16px}
.quizbox .optin{background:none;border:0;padding:0;box-shadow:none;margin:0;max-width:none}

/* ---------- the four doors, each showing its own world ---------------------- */
.doors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:30px auto 0;max-width:960px;text-align:left}
.door{display:block;text-decoration:none;color:inherit;background:#fff;border:2px solid var(--line);border-radius:18px;
  overflow:hidden;transition:transform .16s,box-shadow .16s,border-color .16s;
  box-shadow:0 2px 6px rgba(10,13,20,.05),0 14px 34px rgba(10,13,20,.08)}
.door:hover{transform:translateY(-4px);border-color:var(--cta);
  box-shadow:0 4px 10px rgba(10,13,20,.07),0 22px 48px rgba(18,183,106,.20)}
.door-vis{position:relative;aspect-ratio:16/9;background:var(--paper2);overflow:hidden;border-bottom:2px solid var(--line)}
.door-vis svg{position:absolute;inset:0;width:100%;height:100%}
.door-flag{position:absolute;top:10px;left:10px;z-index:2;font-size:10.5px;font-weight:900;letter-spacing:.09em;
  text-transform:uppercase;background:#0A0D14;color:#fff;border-radius:99px;padding:5px 10px}
.door-pay{position:absolute;top:10px;right:10px;z-index:2;font-size:10.5px;font-weight:900;letter-spacing:.05em;
  background:var(--hi);color:#0A0D14;border-radius:99px;padding:5px 10px}
.door-body{padding:18px 20px 20px}
.door-body h4{font-family:var(--disp);font-weight:400;text-transform:uppercase;font-size:clamp(19px,2.4vw,24px);
  line-height:1.05;color:var(--ink);margin:0 0 8px}
.door-body p{font-size:14.5px;font-weight:500;color:var(--ink2);line-height:1.5;margin:0}
.door-go{display:inline-flex;align-items:center;gap:7px;margin-top:14px;font-size:14px;font-weight:800;color:var(--cta-ink)}
.door:hover .door-go{color:var(--cta-d)}
.door-go span{transition:transform .16s}
.door:hover .door-go span{transform:translateX(4px)}
@media(max-width:760px){.doors{grid-template-columns:1fr;max-width:420px}}

/* ---------- the napkin sketch draws itself when it scrolls into view -------- */
.sketchsvg .ink,.sketchsvg .ink2{stroke-dasharray:1200;stroke-dashoffset:1200}
.sketch.in .sketchsvg .ink,.sketch.in .sketchsvg .ink2{animation:skDraw 1.25s ease forwards}
.sketch.in .sketchsvg .ink2{animation-delay:.45s}
@keyframes skDraw{to{stroke-dashoffset:0}}
.sketchsvg .hand,.sketchsvg .fillA,.sketchsvg circle[style*="--cta"]{opacity:0}
.sketch.in .sketchsvg .hand,.sketch.in .sketchsvg .fillA,.sketch.in .sketchsvg circle[style*="--cta"]{
  animation:skPop .5s cubic-bezier(.2,1.4,.4,1) forwards;animation-delay:1.15s}
@keyframes skPop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
.sketch .sketchsvg .hand{transform-box:fill-box;transform-origin:center}
@media(prefers-reduced-motion:reduce){
  .sketchsvg .ink,.sketchsvg .ink2{stroke-dashoffset:0;animation:none}
  .sketchsvg .hand,.sketchsvg .fillA{opacity:1;animation:none}
  .qz-bar i{animation:none}
}

/* ---------- footer links ---------- */
footer .flinks{margin:14px 0 10px;font-size:13.5px;font-weight:600}
footer .flinks a{color:#A7B0C0;text-decoration:none;white-space:nowrap}
footer .flinks a:hover{color:#fff}
.sketchsvg .fillA{stroke:none}
@media(max-width:640px){.quizbox{padding:20px 16px 22px;border-radius:16px}.qopt{font-size:15px;padding:14px 15px}}

/* the turn line and the deal pills, ported with the rest of the path */
.ins-turn{font-family:var(--disp);text-transform:uppercase;font-size:clamp(26px,4vw,42px);line-height:1.05;margin:52px auto 0;color:#fff}
.ins-deal{list-style:none;padding:0;margin:18px auto 0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.ins-deal li{font-size:14.5px;font-weight:700;color:#fff;padding:9px 15px;border-radius:99px;
  border:1.5px solid rgba(18,183,106,.5);background:rgba(18,183,106,.09);display:inline-flex;gap:8px;align-items:center}
.ins-deal li:before{content:"\2713";color:var(--cta);font-weight:900}
/* the mocks shrink their innards on a phone rather than clipping them */
@media(max-width:520px){
  .pg-body{gap:6px;padding:8px 10px}.pg-tag{font-size:7.5px;padding:2px 6px}
  .pg-field{height:10px}.pg-btn{padding:5px 0;font-size:10px}
  .vis.cal{gap:5px;padding:10px 9px}.cl-k{padding-bottom:4px}
  .cl-s{grid-template-columns:28px 1fr}.cl-s .bk{font-size:9px;padding:6px 5px}.cl-s .open{font-size:10px}
  .vis.qzmock{gap:7px;padding:12px 11px}.qz-o{font-size:11px;padding:6px 8px}
  .pin{font-size:9.5px;padding:5px 8px}.pg-bar span{font-size:8.5px}
  .ig-who b{font-size:10px}.ig-act{gap:7px;padding:5px 8px 2px}.ig-act svg{width:14px;height:14px}
  .ig-cta{padding:5px 8px;font-size:10px}.ig-txt{display:none}
  .ig-cap{bottom:5%;gap:2px}.ig-cap span{font-size:9.5px;padding:2px 5px}
}
@media(prefers-reduced-motion:reduce){.live-dot,.pin{animation:none}}