/* Waitlist: one question per screen */
/* Keyed off the page's own markup rather than a class on <body>: the form is
   a React page now and the document element belongs to the root layout. */
body:has(.wl-stage){min-height:100svh;overflow:hidden;background:radial-gradient(ellipse 55% 60% at 74% 52%,rgba(86,116,255,.16),transparent 70%),var(--void)}
#net{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.wl-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:30;background:rgba(255,255,255,.06)}
.wl-progress i{display:block;height:100%;width:0;background:var(--sig);box-shadow:0 0 18px rgba(183,242,255,.7);transition:width .8s var(--ease)}
.wl-top{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;justify-content:space-between;align-items:center;height:76px;padding:0 var(--gut)}
.wl-top .brand img{height:22px}
.wl-x{font:500 13px var(--display);color:var(--faint);text-decoration:none;transition:color .2s}.wl-x:hover{color:#fff}
.wl-x span{margin-left:6px}

.wl-stage{position:relative;z-index:5;min-height:100svh;display:flex;align-items:center;padding:110px var(--gut) 120px}
#form{width:100%;max-width:1440px;margin:0 auto}
#steps{position:relative;display:grid;grid-template-columns:minmax(0,1fr)}
.step{grid-area:1/1;display:grid;grid-template-columns:150px minmax(0,520px);gap:clamp(24px,3vw,48px);align-items:start;transition:opacity .55s var(--ease),transform .7s var(--ease),filter .55s;pointer-events:none;opacity:0;transform:translateY(60px);filter:blur(10px)}
.step.on{opacity:1;transform:none;filter:none;pointer-events:auto}
.step.gone{opacity:0;transform:translateY(-60px);filter:blur(10px)}
.step.back-in{transform:translateY(-60px)}
.step .idx{font-size:clamp(56px,6vw,96px)}
.meta{display:flex;flex-direction:column;gap:20px}
.step .body{max-width:520px}
.wq{font:600 clamp(30px,3.2vw,48px)/1.05 var(--display);letter-spacing:-.035em;margin-bottom:20px;max-width:none}
.wq .serif{font-size:1.06em}
.qs{font-size:clamp(15px,1.2vw,18px);color:var(--mut);margin-bottom:var(--gap-m);max-width:40em}
.opt-tag{font:500 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-left:10px;vertical-align:middle}

/* text inputs */
.field{position:relative;margin-top:var(--gap-s)}
.field input,.field textarea{width:100%;background:none;border:0;outline:0;color:#fff;font:500 clamp(24px,2.6vw,38px)/1.25 var(--display);letter-spacing:-.02em;padding:8px 0 14px;caret-color:var(--cyan);resize:none}
.field textarea{font-size:clamp(20px,2vw,28px);min-height:3.6em}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.18)}
.field:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(255,255,255,.18)}
.field:before{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--sig);transform:scaleX(0);transform-origin:0;transition:transform .6s var(--ease);z-index:1}
.field:focus-within:before{transform:none}
.field.bad:before{background:var(--coral);transform:none}
.field.good:before{background:linear-gradient(90deg,var(--green),var(--cyan));transform:none}
.status{min-height:24px;margin-top:14px;display:flex;align-items:center;gap:8px;font:500 14px var(--display);color:var(--faint)}
.status.bad{color:var(--coral)}.status.good{color:var(--green)}
.status i{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor;flex:none}
.status button{background:none;border:0;color:var(--cyan);font:inherit;text-decoration:underline;cursor:pointer;padding:0}
.go{margin-top:var(--gap-m);display:flex;align-items:center;gap:18px}
.go .label{font-size:10.5px}

/* phone: country prefix + input */
.phone-row{display:flex;align-items:flex-end;gap:16px}
.cc{flex:none;font:500 clamp(24px,2.6vw,38px)/1.25 var(--display);padding:8px 0 14px;color:var(--mut);min-width:1.6em}

/* choices */
.opts{display:grid;gap:8px;margin-top:6px}
.opts.cols{grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr))}
.opt{position:relative;display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:14px 16px;border-radius:16px;border:0;cursor:pointer;color:var(--ink);font:500 16.5px/1.35 var(--display);background:rgba(22,27,41,.88);backdrop-filter:blur(6px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);transition:box-shadow .25s,background .25s,transform .25s var(--ease)}
.opt:hover{background:rgba(39,46,66,.7);box-shadow:inset 0 0 0 1px rgba(183,242,255,.3);transform:translateX(4px)}
.opt:focus-visible{outline:0;box-shadow:inset 0 0 0 1px var(--cyan)}
.opt kbd{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:8px;font:600 12px var(--mono);color:var(--blue);box-shadow:inset 0 0 0 1px rgba(157,180,255,.35);transition:all .25s}
.opt small{display:block;font:400 14px/1.4 var(--sans);color:var(--mut);margin-top:3px}
.opt.sel{background:rgba(183,242,255,.08);box-shadow:inset 0 0 0 1.5px var(--cyan),0 0 40px -12px rgba(183,242,255,.6)}
.opt.sel kbd{background:var(--cyan);color:var(--void);box-shadow:none}
.opt em{margin-left:auto;font:500 12px var(--mono);font-style:normal;color:var(--faint);padding-right:26px}
.opt.sel:after{content:"";position:absolute;right:18px;top:50%;width:14px;height:8px;margin-top:-6px;border-left:2px solid var(--cyan);border-bottom:2px solid var(--cyan);transform:rotate(-45deg);animation:pop .3s var(--ease)}
.opt.blink{animation:selblink .35s steps(2) 1}
@keyframes selblink{50%{background:rgba(183,242,255,.2)}}
.urg b{color:var(--cyan);font-weight:600}

/* end states */
.end{text-align:left}
.end .wq{font-size:clamp(44px,6.4vw,104px)}
.spinner{width:46px;height:46px;border-radius:50%;border:2px solid rgba(183,242,255,.15);border-top-color:var(--cyan);animation:spin .9s linear infinite;margin-bottom:var(--gap-m)}
.recap{display:flex;flex-wrap:wrap;gap:8px;margin:var(--gap-m) 0}
.preview-note{margin-top:var(--gap-m);font:500 12px var(--mono);letter-spacing:.06em;color:var(--coral)}

.wl-foot{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:24px var(--gut) calc(24px + env(safe-area-inset-bottom))}
.wl-back{background:none;border:0;color:var(--mut);font:500 14px var(--display);cursor:pointer;padding:8px 0}.wl-back:hover{color:#fff}
kbd{font:500 11px var(--mono);color:var(--mut);border:1px solid var(--line);border-radius:6px;padding:3px 7px;margin:0 2px}
.wl-foot kbd{letter-spacing:0}

@media (max-width:980px){
  body:has(.wl-stage){overflow:auto;overflow-x:hidden}
  html:has(body.wl){overflow-x:hidden}
  .meta,.aicol{min-width:0;max-width:100%}
  .step{grid-template-columns:minmax(0,1fr);gap:6px}
  .meta{flex-direction:row;align-items:center;gap:16px}
  .aicol{height:auto;flex:1;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
  .aicol .aitrack{flex-direction:row;width:max-content;animation-name:aileft}
  .aic{font-size:0;gap:0}
  #net{opacity:.55}
  .wl-stage{padding-top:min(38vh,300px)}
  .step .idx{font-size:48px}.step .idx small{display:none}
  .wl-stage{align-items:flex-start;padding-top:104px}
  #hint{display:none}
  .opt:hover{transform:none}
}
html.still .step{transition:none}

/* contact step */
.cfields{display:grid;gap:18px;max-width:520px;margin-top:6px}
.cf{display:block}.cf .label{display:block;margin-bottom:2px}
.cf .field{display:flex;margin-top:0}
.cf .field input{font-size:clamp(22px,2vw,30px);padding:6px 0 12px}
.cf .status{margin-top:8px;min-height:20px;font-size:13.5px}
.ccwrap{position:relative;flex:none;display:flex;align-items:center;margin-right:14px}
.ccwrap .cc{font:500 clamp(20px,1.8vw,26px) var(--display);color:var(--mut);padding:6px 22px 12px 0;white-space:nowrap}
.ccwrap:after{content:"";position:absolute;right:4px;top:42%;width:7px;height:7px;border-right:1.5px solid var(--faint);border-bottom:1.5px solid var(--faint);transform:translateY(-50%) rotate(45deg);pointer-events:none}
.ccwrap select{position:absolute;inset:0;opacity:0;cursor:pointer;font-size:16px}
.consent{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;cursor:pointer;margin-top:4px}
.consent input{position:absolute;opacity:0;width:1px;height:1px}
.consent .box{width:22px;height:22px;border-radius:7px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3);transition:all .2s;margin-top:1px}
.consent input:checked+.box{background:var(--sig);box-shadow:0 0 18px rgba(183,242,255,.5)}
.consent input:checked+.box:after{content:"";display:block;width:10px;height:6px;margin:6px 0 0 6px;border-left:2px solid var(--void);border-bottom:2px solid var(--void);transform:rotate(-45deg)}
.consent input:focus-visible+.box{box-shadow:inset 0 0 0 1.5px var(--cyan)}
.consent b{font:600 15px var(--display)}
.consent small{display:block;margin-top:4px;font-size:11.5px;line-height:1.45;color:var(--faint);max-width:56ch}
.opt.multi.sel:after{content:"";position:absolute;right:18px;top:50%;width:14px;height:8px;margin-top:-6px;border-left:2px solid var(--cyan);border-bottom:2px solid var(--cyan);transform:rotate(-45deg)}

/* exit guard */
.guard{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:20px;background:rgba(4,5,10,.7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:opacity .3s}
.guard.on{opacity:1;pointer-events:auto}
.gcard{width:min(440px,100%);padding:36px 32px 26px;border-radius:24px;text-align:center;background:linear-gradient(180deg,rgba(31,38,55,.95),rgba(13,16,27,.98));box-shadow:inset 0 0 0 1px rgba(183,242,255,.2),0 40px 120px -30px rgba(86,116,255,.6);transform:translateY(14px) scale(.97);transition:transform .45s var(--ease)}
.guard.on .gcard{transform:none}
.gcard h2{font-size:26px;letter-spacing:-.03em;margin-bottom:10px}
.gcard p{color:var(--mut);font-size:15px;margin-bottom:24px}
.gcard .btn{width:100%;justify-content:center}
.gcard .wl-back{margin-top:14px}

/* booking + score */
body.wl.booking{overflow:auto}
.cal{margin-top:var(--gap-s);border-radius:18px}
#cal-inline{width:100%;min-height:640px;border-radius:18px;overflow:hidden}
.calnote{margin-top:12px;font-size:13px;color:var(--faint)}.calnote a{color:var(--cyan)}
.score{margin-top:var(--gap-m);max-width:760px}
.srows{padding:6px 18px 4px}
.srow{display:grid;grid-template-columns:1.3fr 1.4fr 1fr 56px;gap:14px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.srow .ans{color:var(--mut);font:500 12px var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srow .meter{height:5px;border-radius:3px;background:rgba(255,255,255,.07);overflow:hidden}
.srow .meter i{display:block;height:100%;background:var(--sig)}
.srow b{font:600 15px var(--display);text-align:right}.srow b small{color:var(--faint);font-weight:400;font-size:11px}
.saction{padding:12px 18px 16px;font-size:13.5px;color:var(--mut)}
.tier-hot i{background:var(--green)}.tier-warm i{background:var(--cyan)}.tier-nurture i{background:#FFD79A;box-shadow:0 0 10px #FFD79A}.tier-cold i{background:var(--coral);box-shadow:0 0 10px var(--coral)}
@media (max-width:620px){.srow{grid-template-columns:1fr 70px 44px}.srow .ans{display:none}}

/* AI tools: a vertical strip in the left column, so it never pushes the question down */
.aicol{position:relative;height:300px;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent)}
.aicol .aitrack{display:flex;flex-direction:column;gap:8px;animation:aiup 26s linear infinite}
.aic{display:flex;align-items:center;gap:10px;font:500 13px var(--display);color:var(--mut);white-space:nowrap}
.aic img{width:24px;height:24px;border-radius:7px;flex:none}
@keyframes aiup{to{transform:translateY(-50%)}}
@keyframes aileft{to{transform:translateX(-50%)}}
@media (max-width:980px){
  .meta{flex-direction:row;align-items:center;gap:16px}
  .aicol{height:auto;flex:1;min-width:0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
  .aicol .aitrack{flex-direction:row;width:max-content;animation-name:aileft}
  .aic{font-size:0;gap:0}
}
@media (max-width:980px){ .wl-stage{padding-top:max(300px,40vh)} #net{opacity:.7} }
@media (max-width:980px){ .step{display:flex;flex-direction:column;gap:14px} .step.on{position:relative} }
.cal{background:#0D101B;padding:6px;margin-top:var(--gap-s)}
.cal-load{display:grid;place-items:center;min-height:640px;color:var(--faint);font:500 13px var(--mono);letter-spacing:.1em}
.g-quiet{display:block;margin:18px auto 0;background:none;border:0;padding:4px;font:400 12px var(--sans);color:rgba(255,255,255,.28);cursor:pointer}
.g-quiet:hover{color:rgba(255,255,255,.5)}

/* booking: give the calendar the room, the brain steps back */
#net{transition:opacity .8s var(--ease),transform 1s var(--ease)}
body.booking #net{opacity:.12;transform:translateX(12%)}
body.booking .step.end{grid-template-columns:120px minmax(0,1fr)}
body.booking .step.end .body{max-width:1040px}
body.booking #cal-inline,body.booking .cal-load{min-height:760px}
body.booking .wl-stage{align-items:flex-start;padding-top:96px}
body.booking .end .wq{font-size:clamp(30px,3vw,44px)!important;margin-bottom:8px}body.booking .end .qs{margin-bottom:10px}body.booking .wl-stage{padding-top:80px}
body.booking #cal-inline{min-height:0!important}
.end .reading{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:18px;padding:16px 20px;border-radius:16px;background:rgba(13,16,27,.7);box-shadow:inset 0 0 0 1px rgba(183,242,255,.15)}
.end .reading .label{color:var(--cyan)}.end .reading a{color:var(--ink);font:500 14.5px var(--display);text-decoration:none}.end .reading a:hover{color:var(--cyan)}

/* one-click booking */
.qb{padding:24px;border-radius:20px;margin-top:var(--gap-s);background:linear-gradient(180deg,#141a2c,#0b0e18);box-shadow:inset 0 0 0 1px rgba(183,242,255,.25)}
.qb .cal-load{min-height:240px}
.qb-h{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:18px}.qb-h b{font:600 20px var(--display)}.qb-h span{font-size:13px;color:var(--faint)}
.qb-days{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:16px}
.qb-days button,.qb-slots button{border:0;cursor:pointer;color:var(--ink);background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);border-radius:14px;transition:all .25s var(--ease)}
.qb-days button{padding:12px 8px;font:600 15px var(--display)}.qb-days small{display:block;font:500 11.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:4px}
.qb-days button.on{background:rgba(183,242,255,.1);box-shadow:inset 0 0 0 1.5px var(--cyan)}
.qb-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
.qb-slots button{padding:14px 10px;font:600 15px var(--display)}
.qb-slots button:hover{background:var(--cyan);color:var(--void)}
.qb-slots button.picked{background:var(--sig);color:var(--void)}
.qb.busy .qb-slots button:not(.picked){opacity:.35;pointer-events:none}
.qb-f{margin-top:16px;font-size:13px;color:var(--faint)}.qb-more{background:none;border:0;color:var(--cyan);cursor:pointer;font:inherit;text-decoration:underline}
.qb.done{text-align:center;padding:48px 24px}.qb-ok{width:64px;height:64px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;background:var(--sig);color:var(--void);font:700 28px var(--display)}
.qb.done h2{font-size:clamp(30px,3vw,44px);margin-bottom:10px}.qb.done p{color:var(--mut);font-size:17px}.qb.done b{color:#fff}
@media (max-width:620px){.qb-days{grid-template-columns:repeat(3,1fr)}}

/* Mobile spacing, one set of numbers (Nov 3). Replaces the three competing top paddings above,
   leaves room for the fixed bottom bar, and keeps the gaps between number, question and answers even. */
@media (max-width:980px){
  .wl-stage{padding-top:clamp(200px,28vh,250px);padding-bottom:calc(120px + env(safe-area-inset-bottom))}
  body.booking .wl-stage{padding-top:84px}
  .step{gap:12px}
  .step .meta{margin:0}
  .wq{margin-bottom:16px}
  .opts{margin-top:0;gap:8px}
  .go{margin-top:24px}
  .wl-foot{background:linear-gradient(180deg,rgba(4,5,10,0),rgba(4,5,10,.92) 40%);padding-top:28px;padding-bottom:calc(16px + env(safe-area-inset-bottom))}
}

/* The prep VSL at the end of the form (Nov 4). Same card style as the booking box. */
.vsl{scroll-margin-top:100px;margin-top:var(--gap-s);padding:24px;border-radius:20px;background:linear-gradient(180deg,#141a2c,#0b0e18);box-shadow:inset 0 0 0 1px rgba(183,242,255,.25)}
.vsl .label{color:var(--cyan)}
.vsl-h{font:600 clamp(22px,2.2vw,30px)/1.15 var(--display);letter-spacing:-.02em;margin:8px 0 16px}
.vsl-frame{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000}
.vsl-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;background:#000}
/* Hidden until a booking is confirmed, then it fades in (Micah, Nov 4: the video comes up after they book). */
.vsl{display:none}
.vsl.ready{display:block;box-shadow:inset 0 0 0 1.5px var(--cyan),0 0 60px -20px rgba(183,242,255,.5)}
@keyframes vslIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
html.still .vsl.ready{animation:none}
@media (max-width:620px){.vsl{padding:18px}}

/* After a booking (Nov 4): hide the booking UI and its confirmation; the screen is the VSL. */
.step.end.booked .wq,.step.end.booked .qs,.step.end.booked #qb,.step.end.booked .qb,.step.end.booked #calwrap,.step.end.booked .calnote,.step.end.booked .preview-note{display:none!important}
.step.end.booked .idx small{visibility:hidden}
.vsl-req{margin:-6px 0 8px;font:600 15px var(--display);color:var(--cyan)}
.vsl-sub{margin:0 0 16px;color:var(--mut);font-size:15.5px;line-height:1.55;max-width:36em}
.step.end.booked .vsl{margin-top:0}

/* "Already have a brain? Log in" under Continue on the first step (Nov 4) */
/* Inline, in the Continue row (replaces "or press Enter" on the first step) */
.have-brain{display:inline-flex;align-items:center;flex-wrap:wrap;gap:10px;color:var(--mut);font:500 14.5px var(--display)}
@media (min-width:981px){
  /* Short laptop screens: let the page scroll instead of hiding Continue under the bottom bar */
  body.wl{overflow-y:auto}
  .wl-stage{padding-bottom:110px}
}