/* ============================================================================
   Gemela Media UI kit: forms and capture
   ----------------------------------------------------------------------------
   The qualification form, the apply gate and the email capture popup.
   Split out of gemela.css because only pages that actually render this markup
   should pay for it. Today that is the homepage. Load it with:
     <link rel="stylesheet" href="/shared/gemela-forms.css">
   Requires gemela.css (tokens, .btn) to be loaded first.

   Before the split this CSS was inlined into all fourteen public pages while
   the markup existed on one.
   ========================================================================= */

/* ---- qualification form ---- */
.qform{max-width:640px;margin:40px auto 0;text-align:left;background:var(--panel);border:1px solid var(--panel-line);border-radius:20px;padding:clamp(24px,4vw,40px);}
.qgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px;}
@media(max-width:600px){.qgrid{grid-template-columns:1fr;}}
.field{display:flex;flex-direction:column;gap:6px;}
.field.full{grid-column:1 / -1;}
.field label{font-family:var(--mono);font-size:0.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}
.field input,.field select,.field textarea{font-family:var(--body);font-size:0.95rem;color:var(--ink);background:#0b0f0c;border:1px solid var(--line-strong);border-radius:10px;padding:12px 13px;width:100%;}
.field textarea{resize:vertical;min-height:70px;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);}
/* LinkedIn field: the domain is fixed furniture, so it is printed rather than typed.
   The wrapper carries the border and focus ring, the input inside carries neither. */
.liw{display:flex;align-items:stretch;background:#0b0f0c;border:1px solid var(--line-strong);border-radius:10px;overflow:hidden;}
.liw:focus-within{border-color:var(--accent);}
.liw .pfx{font-family:var(--mono);font-size:0.82rem;color:var(--muted);padding:12px 0 12px 13px;white-space:nowrap;user-select:none;align-self:center;}
.liw input{border:0 !important;border-radius:0 !important;background:transparent !important;padding-left:2px !important;min-width:0;flex:1;}
.liw input:focus{outline:none;}
.liw.bad{border-color:#e0685a;}
/* On a phone the full domain ate 139px of a 285px box, leaving too little to type a real
   name into. The label already says LinkedIn, so the domain collapses and "in/" stays. */
@media (max-width:430px){ .liw .pfx .lng{display:none;} }
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;}
.qform .qbtn{margin-top:22px;width:100%;justify-content:center;border:0;cursor:pointer;font-size:1rem;}
.qform .qfoot{margin-top:14px;font-size:0.8rem;color:var(--muted);text-align:center;}
.qok{display:none;text-align:center;padding:18px 0;}
.qok h3{font-family:var(--disp);font-weight:800;font-size:1.6rem;color:var(--accent);}
.qok p{color:var(--ink-soft);font-weight:400;margin-top:8px;}
.qform.sent .qgrid,.qform.sent .qbtn,.qform.sent .qfoot,.qform.sent .qintro{display:none;}
.qform.sent .qok{display:block;}
.applygate{margin-top:34px;display:flex;flex-direction:column;align-items:center;gap:12px;}
.applygate .btn{font-size:1.02rem;padding:16px 32px;min-width:260px;}
.gatefoot{font-size:0.85rem;color:var(--muted);}
.qsteps{display:flex;gap:7px;justify-content:center;margin-bottom:10px;}
.qs{width:38px;height:4px;border-radius:3px;background:var(--line-strong);transition:background .3s;}
.qs.on{background:var(--accent);}
.qcount{font-family:var(--mono);font-size:0.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);text-align:center;margin-bottom:20px;}
.qstep{display:none;border:0;padding:0;margin:0;min-inline-size:0;}
.qstep.on{display:block;}
.qnav{margin-top:26px;display:flex;gap:10px;align-items:stretch;}
.qnav .btn{flex:1;justify-content:center;border:0;cursor:pointer;font-size:0.97rem;padding:15px 22px;border-radius:11px;}
/* .qform .qbtn above carries margin-top for the old single-step form; inside the nav
   row it shoved the submit 22px below the Back button while stretch equalised heights,
   which is why the pair looked misaligned. */
.qnav .btn.qbtn{margin-top:0;}
.qnav .btn.g{border:1px solid var(--line-strong);background:transparent;color:var(--ink-soft);flex:0 0 auto;padding-inline:20px;}
.qnav .btn.g:hover{border-color:var(--line-strong);color:var(--ink);background:rgba(255,255,255,.03);}
.qprice{margin-top:20px;padding:14px 16px;border:1px solid var(--line-strong);border-radius:12px;font-size:0.9rem;font-weight:400;color:var(--ink-soft);text-align:center;line-height:1.5;}
.qprice b{color:var(--ink);font-weight:600;}
/* The money step must not whisper: two leads in a row missed the price when it sat in
   the soft grey the rest of the form uses, so everything on this step reads in full ink. */
.qmoney .qintro,.qmoney .qprice,.qmoney .qbudget>label,.qmoney .ynopt{color:var(--ink);}
/* budget qualifier: two selectable pills under the price card */
.qbudget{margin-top:18px;}
.qbudget>label{text-align:center;}
.qyn{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
@media(max-width:430px){.qyn{grid-template-columns:1fr;}}
.qyn .ynopt{flex-direction:row;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line-strong);border-radius:10px;background:#0b0f0c;padding:13px 12px;cursor:pointer;font-family:var(--body);font-size:0.93rem;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink-soft);display:flex;transition:border-color .2s,color .2s,background .2s;}
.qyn .ynopt:hover{border-color:var(--accent);}
.qyn .ynopt:has(input:checked){border-color:var(--accent);color:var(--ink);background:rgba(57,201,180,.08);}
.qyn .ynopt input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none;}
.qyn .ynopt:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px;}
.qerr{margin-top:12px;font-size:0.88rem;color:#e0685a;text-align:center;}
.qform.sent .qsteps,.qform.sent .qcount,.qform.sent .qstep,.qform.sent .qnav,.qform.sent .qfoot,.qform.sent .qerr{display:none;}
/* two success states share .qok; JS picks one, so hidden has to keep beating the
   .qform.sent .qok{display:block} rule above (class rules outrank the UA [hidden] rule) */
.qok[hidden],.qok p[hidden],.qok .qbook[hidden]{display:none !important;}
.qok .qbook{margin-top:18px;display:inline-flex;justify-content:center;}
@media(max-width:600px){
  .field input,.field select,.field textarea{font-size:16px;padding:14px 13px;}
  .qnav .btn{padding:16px 18px;}
  .applygate .btn{width:100%;justify-content:center;}
}
@media(pointer:coarse){
  .aeotab{min-height:44px;padding:10px 12px;}
  .qfoot a{display:inline-block;padding:8px 4px;}
  nav .wm{min-height:44px;display:inline-flex;align-items:center;}
}
.qintro{font-size:0.95rem;font-weight:400;color:var(--ink-soft);line-height:1.5;margin-bottom:22px;text-align:center;}

/* ---- email capture popup (ported from Pav's email-capture-popup branch) ---- */
.epop{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(8,10,8,.72);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .35s ease;}
.epop.show{opacity:1;pointer-events:auto;}
.epop-card{position:relative;max-width:440px;width:100%;background:var(--panel);border:1px solid var(--panel-line);border-radius:20px;padding:clamp(28px,4vw,40px);text-align:center;transform:translateY(14px) scale(.98);transition:transform .35s cubic-bezier(.16,1,.3,1);box-shadow:0 30px 80px rgba(0,0,0,.5);}
.epop.show .epop-card{transform:none;}
.epop-x{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line-strong);background:transparent;color:var(--muted);font-size:1.15rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .2s,border-color .2s;}
.epop-x:hover{color:var(--ink);border-color:var(--accent);}
.epop-h{font-family:var(--disp);font-weight:800;font-size:clamp(1.5rem,3vw,1.9rem);letter-spacing:-.02em;line-height:1.08;margin-top:14px;}
.epop-p{font-size:0.92rem;font-weight:400;color:var(--ink-soft);line-height:1.5;margin-top:12px;}
.epop-form{margin-top:22px;display:flex;flex-direction:column;gap:10px;}
.epop-form input{font-family:var(--body);font-size:16px;color:var(--ink);background:#0b0f0c;border:1px solid var(--line-strong);border-radius:10px;padding:13px 14px;width:100%;}
.epop-form input:focus{outline:none;border-color:var(--accent);}
.epop-form .btn{justify-content:center;border:0;cursor:pointer;font-size:0.95rem;padding:14px 24px;}
.epop-foot{margin-top:14px;font-size:0.8rem;color:var(--muted);}
.epop-err{margin-top:10px;font-size:0.82rem;color:#e0685a;}
.epop-ok{display:none;}
.epop-ok h4{font-family:var(--disp);font-weight:800;font-size:1.3rem;color:var(--accent);margin-top:14px;}
.epop-ok p{color:var(--ink-soft);font-weight:400;margin-top:8px;font-size:0.92rem;}
.epop.sent .epop-form,.epop.sent .epop-foot{display:none;}
.epop.sent .epop-ok{display:block;}
/* audit popup, step 2 (book the call). The step-1 pitch leaves with the form so the
   card reads as one instruction, not two stacked messages. The eyebrow stays for
   context. The card centers text; the LinkedIn field reads left against its printed
   domain prefix like every other .liw on the page. */
.epop.sent .epop-h,.epop.sent .epop-p{display:none;}
/* inline Calendly (2026-08-27): booking happens on the page, prefilled, never a link
   out. The widget swaps to its own mobile layout under ~650px of container width, so
   the narrow popup card is fine. The card grows and scrolls to hold the calendar. */
.bookcal{margin-top:18px;height:min(660px,74vh);border-radius:14px;overflow:hidden;background:#fff;position:relative;}
.bookcal iframe{width:100%;height:100%;display:block;}
/* Calendly takes a beat to boot inside its iframe and shows nothing while it does,
   which reads as broken. A spinner covers the box until the widget's first
   postMessage says pixels are up (see gmCalendlyEmbed). */
.bookcal.loading::after{content:"";position:absolute;inset:0;background:#fff;z-index:2;}
.bookcal.loading::before{content:"";position:absolute;z-index:3;left:calc(50% - 16px);top:calc(50% - 16px);width:32px;height:32px;border-radius:50%;border:3px solid #e8e8e6;border-top-color:#39c9b4;animation:bookspin .8s linear infinite;}
@keyframes bookspin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.bookcal.loading::before{animation:none;border-top-color:#39c9b4;}}
.epop.sent .epop-card{max-width:620px;max-height:92vh;overflow-y:auto;}
.epop-form .liw{text-align:left;}
.epop-ok .btn{margin-top:18px;}
.epop-ok-note{margin-top:12px;font-size:0.82rem;color:var(--muted);}

@media(prefers-reduced-motion:reduce){.epop,.epop-card{transition:none;}}