/* Shared by the sign-in popup and the account pages: fields, OTP, social buttons, account-type cards. */
/* ---------- Shared form parts ---------- */
.fld{display:grid;gap:7px;min-width:0}
.fld>span{font-size:13px;font-weight:700;color:var(--ink)}
.fld>span em{font-style:normal;font-weight:500;color:var(--mut)}
.fld input,.fld select,.fld textarea,.sel{width:100%;min-height:52px;padding:0 16px;border:1px solid var(--line-2);border-radius:14px;background:#fff;color:var(--ink);font:500 15.5px/1.3 var(--sans);transition:border-color .2s,box-shadow .2s}
.fld textarea{min-height:120px;padding:14px 16px;line-height:1.55;resize:vertical}
.fld select,.sel{appearance:none;-webkit-appearance:none;padding-inline-end:40px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235E6477' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center}
.fld input:focus,.fld select:focus,.fld textarea:focus,.sel:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 4px rgba(31,63,110,.12)}
.fld input:disabled{background:var(--paper-warm);color:var(--mut)}
.fld input[aria-invalid=true],.fld select[aria-invalid=true]{border-color:var(--red);box-shadow:0 0 0 4px rgba(177,18,23,.1)}
.fld--full{grid-column:1/-1}
.sel--sm{min-height:40px;width:auto;font-size:13.5px;border-radius:999px;padding-inline:14px 34px;background-position:right 12px center}
.note{margin:0 0 16px;padding:14px 16px;border-radius:14px;font-size:14px;line-height:1.55;background:var(--navy-tint);color:var(--navy)}
.note--warn{background:#FDECEE;color:var(--red-deep)}
.note--wait{background:#FFF7E6;color:var(--red);border:1px solid #F4E1B5}
.note a{color:inherit;font-weight:700;text-decoration:underline}
:is(.pill--ok,.pill--wait,.pill--bad,.pill--mute,.pill--hot){display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;font-size:11.5px;font-weight:700;letter-spacing:.02em;white-space:nowrap;background:var(--paper-warm);color:var(--mut)}
:is(.pill--ok,.pill--wait,.pill--bad,.pill--mute,.pill--hot)::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill--ok{background:#E7F6EE;color:var(--navy)}
.pill--wait{background:#FFF4DE;color:var(--red)}
.pill--bad{background:#FDECEE;color:var(--red)}
.pill--hot{background:var(--red);color:#fff}
.pill--hot::before{background:#fff}
.btn--block{width:100%}
.h-card{margin:0;font:600 22px/1.2 var(--serif);color:var(--navy);letter-spacing:-.01em}

.auth__social{display:grid;gap:10px}
.sbtn{display:flex;align-items:center;justify-content:center;gap:12px;height:54px;border:1px solid var(--line-2);border-radius:14px;background:#fff;color:var(--ink);font-weight:700;font-size:15px;transition:border-color .2s,box-shadow .25s,transform .2s}
.sbtn:hover{border-color:var(--ink);box-shadow:0 10px 24px -18px rgba(20,43,77,.6)}
.sbtn--apple{background:#000;border-color:#000;color:#fff}
.sbtn--apple:hover{border-color:#000}
.auth__or{display:flex;align-items:center;gap:14px;margin:22px 0;color:var(--dim);font-size:12.5px;font-weight:600}
.auth__or::before,.auth__or::after{content:"";flex:1;height:1px;background:var(--line)}
.auth__form{display:grid;gap:14px}
.auth__back{display:inline-flex;align-items:center;gap:6px;margin:0 0 18px;padding:0;border:0;background:none;color:var(--mut);font:600 14px var(--sans);cursor:pointer}
.auth__back:hover{color:var(--navy)}
.otp{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.otp input{width:100%;height:62px;border:1px solid var(--line-2);border-radius:14px;background:#fff;text-align:center;font:600 26px/1 var(--mono);color:var(--navy);caret-color:var(--red);transition:border-color .2s,box-shadow .2s,transform .15s}
.otp input:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 4px rgba(31,63,110,.12);transform:translateY(-1px)}
.otp.is-bad input{border-color:var(--red);animation:you-shake .35s}
@keyframes you-shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.auth__resend{margin:4px 0 0;text-align:center;color:var(--mut);font-size:14px}
.auth__resend .link:disabled{color:var(--dim);border-color:transparent;cursor:default}
.auth__legal{margin:28px 0 0;color:var(--mut);font-size:12.5px;line-height:1.6}
.auth__legal a{color:var(--navy);text-decoration:underline}
@media (max-width:380px){.otp{gap:6px}.otp input{height:54px;font-size:22px}}
.types{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0;padding:0;border:0}
.type input{position:absolute;opacity:0;pointer-events:none}
.type__card{position:relative;display:grid;gap:8px;height:100%;padding:24px;border:1.5px solid var(--line);border-radius:var(--r-lg);background:#fff;cursor:pointer;transition:border-color .2s,box-shadow .3s,transform .25s}
.type__card:hover{border-color:var(--line-2);transform:translateY(-2px)}
.type__card::after{content:"";position:absolute;top:20px;right:20px;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line-2);transition:all .2s}
.type input:checked+.type__card{border-color:var(--navy);box-shadow:0 20px 40px -28px rgba(31,63,110,.7)}
.type input:checked+.type__card::after{border:6px solid var(--navy)}
.type input:focus-visible+.type__card{outline:2px solid var(--red);outline-offset:3px}
.type__ic{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--navy-tint);color:var(--navy)}
.type__card b{font:600 22px/1.2 var(--serif);color:var(--navy)}
.type__card small{color:var(--mut);font-size:14px;line-height:1.55;max-width:32ch}
.pform__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pform__company{display:grid;gap:16px;padding:24px;border-radius:var(--r-lg);background:var(--paper-warm)}
.logo-up{display:flex;align-items:center;gap:14px}
.logo-up__img{display:grid;place-items:center;width:72px;height:72px;border-radius:16px;overflow:hidden;background:#fff;border:1px solid var(--line);color:var(--dim)}
.logo-up__img img{width:100%;height:100%;object-fit:cover}

/* =====================================================================
   Sign-in popup — one calm card
   ===================================================================== */
.amodal{padding:0;border:0;background:transparent;max-width:none;max-height:none;width:100%;height:100%;overflow:auto}
.amodal:not([open]){display:none}
.amodal[open]{display:grid;place-items:center;padding:24px}
.amodal::backdrop{background:rgba(10,24,52,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.amodal__card{position:relative;width:min(452px,100%);max-height:calc(100svh - 48px);overflow-y:auto;padding:30px 32px 22px;border-radius:26px;background:#fff;box-shadow:0 50px 100px -30px rgba(10,24,52,.55),0 0 0 1px rgba(20,43,77,.06);animation:you-am .42s cubic-bezier(.2,.8,.2,1)}
.amodal__card::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--navy),var(--red))}
@keyframes you-am{from{opacity:0;transform:translateY(20px) scale(.98)}}
.amodal__brand{display:flex;justify-content:center;margin:6px 0 20px}
.amodal__x{position:absolute;top:16px;inset-inline-end:16px;display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;background:var(--paper-warm);color:var(--navy);cursor:pointer;transition:background .2s,transform .25s}
.amodal__x:hover{background:var(--line);transform:rotate(90deg)}
.amstep{display:grid;gap:14px;animation:you-acc .3s var(--ease)}
.amodal__h{margin:0;text-align:center;font:600 28px/1.15 var(--serif);color:var(--navy);letter-spacing:-.02em}
.amodal__sub{margin:-6px 0 2px;text-align:center;color:var(--mut);font-size:14px;line-height:1.55}
.amodal__sub b{color:var(--ink)}
.amodal__ic{justify-self:center;display:grid;place-items:center;width:58px;height:58px;border-radius:18px;background:var(--navy-tint);color:var(--navy)}
.amseg{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:999px;background:var(--paper-warm)}
.amseg__b{position:relative;z-index:1;height:40px;border:0;background:none;border-radius:999px;font:700 14px var(--sans);color:var(--mut);cursor:pointer;transition:color .25s}
.amseg__b.is-on{color:var(--navy)}
.amseg__ink{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:#fff;box-shadow:0 4px 12px -6px rgba(20,43,77,.35);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.amseg[data-on=signup] .amseg__ink{transform:translateX(100%)}
[dir=rtl] .amseg__ink{left:auto;right:4px}
[dir=rtl] .amseg[data-on=signup] .amseg__ink{transform:translateX(-100%)}
.amsoc{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));grid-auto-flow:column;gap:8px}
.amsoc__b{display:flex;align-items:center;justify-content:center;gap:8px;height:46px;border:1px solid var(--line-2);border-radius:14px;background:#fff;font:700 13.5px var(--sans);color:var(--ink);transition:border-color .2s,background .2s,transform .2s}
.amsoc__b:hover{border-color:var(--navy);transform:translateY(-1px)}
.amsoc__b svg{width:18px;height:18px;flex:none}
.amsoc__b--apple{background:#000;border-color:#000;color:#fff}
.amsoc__b--apple:hover{background:#1c1c1c;border-color:#1c1c1c}
.amodal .auth__or{margin:0}
.pw{position:relative;display:block}
.pw input{padding-inline-end:48px!important}
.pw__eye{position:absolute;top:50%;inset-inline-end:6px;transform:translateY(-50%);display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:10px;background:none;color:var(--mut);cursor:pointer}
.pw__eye:hover{color:var(--navy);background:var(--paper-warm)}
.pwmeter{display:grid;gap:6px;margin-top:-6px}
.pwmeter i{display:block;height:4px;border-radius:3px;background:var(--line);overflow:hidden;position:relative}
.pwmeter i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--pw,0%);background:var(--pwc,var(--red));border-radius:3px;transition:width .3s,background .3s}
.pwmeter small{font-size:12px;color:var(--mut)}
.amodal__forgot{justify-self:end;margin-top:-8px;font-size:13px}
.amodal__company{display:grid;gap:12px;padding:14px;border-radius:16px;background:var(--paper-warm)}
.amodal__company .logo-up small{color:var(--mut);font-size:12px}
.amodal .pform__grid{gap:12px}
.types--sm .type__card{padding:14px;gap:5px}
.types--sm .type__card b{font-size:17px}
.types--sm .type__card small{font-size:12px}
.types--sm .type__ic{width:36px;height:36px;border-radius:11px}
.amstep--done{justify-items:center;text-align:center;padding:22px 0}
.amodal__tick{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:var(--navy);color:var(--gold);box-shadow:0 20px 40px -20px rgba(31,63,110,.8);animation:you-pop .5s}
.amodal .auth__legal{margin:18px 0 0;text-align:center;font-size:12px}
.amodal .auth__resend{text-align:center}
body.am-open{overflow:hidden}
@media (max-width:560px){
  .amodal[open]{padding:0;place-items:end stretch}
  .amodal__card{width:100%;max-height:94svh;border-radius:26px 26px 0 0;padding:26px 20px calc(18px + env(safe-area-inset-bottom));animation:you-am-up .36s cubic-bezier(.2,.8,.2,1)}
  @keyframes you-am-up{from{transform:translateY(40px);opacity:0}}
  .amsoc__b span{display:none}
  .amodal .pform__grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.amodal__card,.amstep{animation:none}}

.acc-gate{display:grid;place-items:center;min-height:62vh;padding:60px var(--gut);background:radial-gradient(ellipse at 50% 0%,var(--navy-tint),transparent 60%)}
.acc-gate__in{display:grid;justify-items:center;gap:14px;text-align:center;max-width:460px}
.acc-gate__in .h-section{margin:10px 0 0}
.acc-gate__in .lead{margin:0;color:var(--mut)}
.acc-gate__acts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:8px}

/* Error messages in the sign-in popup and account forms: clear and hard to miss. */
.form-msg:empty{display:none}
.form-msg.is-bad{display:flex;align-items:flex-start;gap:8px;margin:2px 0 0;padding:10px 12px;border-radius:12px;background:#FDF1F2;border:1px solid #F5C9CF;color:var(--red);font-size:13.5px;font-weight:600;line-height:1.45;animation:you-shake .38s}
.form-msg.is-bad::before{content:"!";display:grid;place-items:center;flex:none;width:18px;height:18px;margin-top:1px;border-radius:50%;background:var(--red);color:#fff;font:800 12px/1 var(--sans)}
.auth__form input[aria-invalid="true"]{border-color:var(--red)!important;box-shadow:0 0 0 3px rgba(177,18,23,.12)!important}
@keyframes you-shake{20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}
@media (prefers-reduced-motion:reduce){.form-msg.is-bad{animation:none}}
/* "Is this your company?" */
.claimhint{display:grid;gap:10px;padding:14px;border-radius:14px;background:#EEF3FB;border:1px solid #C9D7EE}
.claimhint[hidden]{display:none}
.claimhint p{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink)}
.claimhint .btn{justify-self:start}
.am-testcode{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px;padding:10px 12px;border-radius:12px;background:#FBEEEE;border:1px dashed #D99A9C;font-size:13px;color:var(--red)}
.am-testcode code{font:700 15px var(--mono);letter-spacing:.12em;color:var(--navy)}