/* RawFit — Join form dialog (js/join.js). Smoked liquid glass, matching the plan cards. */
html.join-open{overflow:hidden}
.join{padding:0;border:0;background:transparent;color:#fff;max-width:min(640px,calc(100vw - 24px));width:100%;max-height:calc(100dvh - 24px);overflow:visible}
.join::backdrop{background:rgba(0,0,0,.62);-webkit-backdrop-filter:blur(10px) saturate(120%);backdrop-filter:blur(10px) saturate(120%)}
.join[open]{animation:join-in .38s cubic-bezier(.2,.8,.2,1)}
@keyframes join-in{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}

.join-card{position:relative;isolation:isolate;overflow:auto;max-height:calc(100dvh - 24px);padding:30px 30px 26px;border-radius:30px;
  background:linear-gradient(160deg,rgba(40,48,66,.88) 0%,rgba(16,20,29,.92) 45%,rgba(10,13,20,.95) 100%);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 60px rgba(122,167,255,.07),0 40px 100px -30px rgba(0,0,0,.95),0 0 0 1px rgba(91,140,255,.08);
  -webkit-backdrop-filter:blur(28px) saturate(170%);backdrop-filter:blur(28px) saturate(170%);scrollbar-width:thin}
.join-card::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(60% 40% at 15% 0%,rgba(91,140,255,.22),rgba(91,140,255,0) 70%),radial-gradient(50% 40% at 100% 100%,rgba(56,189,248,.12),rgba(56,189,248,0) 70%)}
.join-x{position:absolute;top:14px;right:14px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#fff;cursor:pointer}
.join-x:hover{background:rgba(255,255,255,.12)}
.join-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.join .eyebrow{margin-bottom:12px}
.join h2{font-size:clamp(28px,4vw,38px);color:#fff;margin:0;padding-right:48px}
.join-sub{margin:10px 0 0;color:var(--text);font-size:15px;line-height:1.55;max-width:46ch}

.jf-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 14px;margin-top:22px}
.jf{display:grid;gap:7px;align-content:start;min-width:0}
.jf-full{grid-column:1/-1}
.jf label,.jf-label{font-size:13.5px;font-weight:700;color:#fff;letter-spacing:.005em}
.jf-opt{font-weight:500;color:var(--text-2)}
.jf input[type=text],.jf input[type=email],.jf input[type=tel],.jf input[type=number],.jf textarea{
  width:100%;min-height:50px;padding:12px 15px;border-radius:14px;font:500 16px/1.3 var(--body);color:#fff;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  transition:border-color .2s,background .2s,box-shadow .2s;-webkit-appearance:none;appearance:none}
.jf textarea{resize:vertical;min-height:64px}
.jf input::placeholder,.jf textarea::placeholder{color:rgba(255,255,255,.38)}
.jf input:focus,.jf textarea:focus{outline:none;border-color:rgba(122,167,255,.75);background:rgba(255,255,255,.09);box-shadow:0 0 0 4px rgba(31,91,255,.25)}
.jf.has-err input,.jf.has-err textarea{border-color:rgba(255,107,107,.8)}
.jf-err{margin:0;min-height:0;font-size:12.5px;font-weight:600;color:#FF9C9C}
.jf-err:empty{display:none}

.jf-phone{position:relative}
.jf-phone span{position:absolute;left:15px;top:50%;transform:translateY(-50%);font-weight:600;color:var(--text-2);pointer-events:none}
.jf-phone input{padding-left:50px !important}

.jf-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.jp{position:relative;display:grid;gap:3px;padding:12px 14px;border-radius:16px;cursor:pointer;min-height:64px;align-content:center;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);transition:border-color .2s,background .2s,transform .2s}
.jp:hover{background:rgba(255,255,255,.09)}
.jp input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.jp-name{font-size:14px;font-weight:700;color:#fff;line-height:1.2}
.jp-price{font-size:13px;font-weight:600;color:var(--text-2)}
.jp:has(input:checked){background:linear-gradient(160deg,rgba(91,140,255,.32),rgba(31,91,255,.16));border-color:rgba(122,167,255,.75);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 10px 30px -14px rgba(31,91,255,.9)}
.jp:has(input:checked) .jp-price{color:#D6E4FF}
.jp:has(input:focus-visible){outline:2px solid var(--blue-text,#7AA7FF);outline-offset:2px}
.jf-plans.has-err .jp{border-color:rgba(255,107,107,.55)}

.jf-step{display:grid;grid-template-columns:50px 1fr 50px;gap:8px}
.jf-step button{min-height:50px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07);color:#fff;font:700 22px/1 var(--body);cursor:pointer}
.jf-step button:hover{background:rgba(255,255,255,.13)}
.jf-step input{text-align:center;-moz-appearance:textfield}
.jf-step input::-webkit-outer-spin-button,.jf-step input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.jf-total{padding:12px 16px;border-radius:16px;background:rgba(31,91,255,.10);border:1px solid rgba(122,167,255,.22);align-content:center}
.jf-total strong{font-family:var(--display);font-weight:800;font-size:28px;letter-spacing:-.03em;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.jf-hint{font-size:12px;color:var(--text-2)}

.jf-submit{width:100%;margin-top:22px;min-height:56px;font-size:16px}
.jf-submit svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2;stroke-linejoin:round}
.jf-fine{margin:12px 0 0;text-align:center;font-size:12.5px;color:var(--text-2)}

.jd-icon{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:var(--grad);box-shadow:0 14px 34px -12px rgba(31,91,255,.9);margin-bottom:18px}
.jd-icon svg{width:30px;height:30px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.jd-msg{margin:18px 0 0;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);font:500 13.5px/1.55 var(--body);color:var(--text);white-space:pre-wrap;word-break:break-word}
.jd-btns{margin-top:20px}
#join-done-title:focus{outline:none}

@media (max-width:640px){
  .join{max-width:100vw;width:100vw;margin:auto 0 0;max-height:100dvh}
  .join-card{border-radius:26px 26px 0 0;padding:26px 18px calc(18px + env(safe-area-inset-bottom,0px));max-height:94dvh}
  .jf-grid{grid-template-columns:1fr}
  .jf-plans{grid-template-columns:1fr 1fr}
  .join[open]{animation:join-up .4s cubic-bezier(.2,.8,.2,1)}
  @keyframes join-up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
}
@media (prefers-reduced-motion:reduce){.join[open]{animation:none}}
/* keep the whole form on one screen on laptops */
@media (min-width:641px){
  .join-card{padding:26px 28px 22px}
  .join .eyebrow{display:none}
  .join-sub{margin-top:8px;font-size:14.5px}
  .jf-grid{gap:12px 14px;margin-top:18px}
  .jf input[type=text],.jf input[type=email],.jf input[type=tel],.jf input[type=number]{min-height:46px;padding-block:10px}
  .jf-step button{min-height:46px}
  .jf-step{grid-template-columns:46px 1fr 46px}
  .jf-plans{grid-template-columns:repeat(4,minmax(0,1fr))}
  .jp{min-height:56px;padding:10px 12px}
  .jp-name{font-size:13.5px}
  .jf textarea{min-height:54px}
  .jf-submit{margin-top:18px;min-height:52px}
}