:root{--join-brand:#0f7e70;--join-strong:#095d53;--join-ink:#172923;--join-muted:#5e736d;--join-line:#d6e4e0;--join-soft:#edf7f4}
html{min-width:320px}
body.join-body{min-height:100svh;margin:0;overflow-x:hidden;background:
 radial-gradient(circle at 82% 18%,rgba(26,145,124,.12),transparent 28%),
 linear-gradient(180deg,#f8fbfa 0,#f3f8f6 100%);direction:rtl;text-align:right;color:var(--join-ink)}
.join-main{width:min(1080px,calc(100% - 32px));min-height:calc(100svh - 110px);margin:0 auto;display:grid;place-items:center;padding:48px 0 64px}
.join-card{width:100%;display:grid;grid-template-columns:minmax(0,.9fr) minmax(380px,1fr);overflow:hidden;border:1px solid rgba(204,222,217,.95);border-radius:28px;background:#fff;box-shadow:0 26px 70px rgba(25,65,57,.11)}
.join-intro{padding:clamp(34px,5vw,64px);display:flex;flex-direction:column;justify-content:center;background:
 linear-gradient(145deg,rgba(9,93,83,.97),rgba(15,126,112,.92));color:#fff}
.join-icon{width:58px;height:58px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.2);border-radius:18px;background:rgba(255,255,255,.12);font-size:28px}
.join-eyebrow{margin:24px 0 8px;color:#c8f0e8;font-size:12px;font-weight:850}
.join-intro h1{margin:0;font-size:clamp(30px,4vw,48px);font-weight:900;line-height:1.35}
.join-intro>p:last-of-type{max-width:470px;margin:16px 0 0;color:#e2f4f0;font-size:14px;line-height:2}
.join-intro ul{display:grid;gap:10px;margin:30px 0 0;padding:0;list-style:none}
.join-intro li{display:grid;grid-template-columns:42px 1fr;grid-template-rows:auto auto;column-gap:12px;min-height:64px;padding:10px 12px;border:1px solid rgba(255,255,255,.14);border-radius:15px;background:rgba(255,255,255,.08)}
.join-intro li>.material-icons{grid-row:1/3;width:42px;height:42px;display:grid;place-items:center;align-self:center;border-radius:12px;background:rgba(255,255,255,.12);font-size:21px}
.join-intro li b{align-self:end;font-size:13px}.join-intro li small{color:#cce9e3;font-size:11px}
.join-form{padding:clamp(34px,5vw,62px);display:flex;flex-direction:column;justify-content:center}
.join-form-heading>span{color:var(--join-brand);font-size:11px;font-weight:850}
.join-form-heading h2{margin:6px 0 30px;font-size:25px;font-weight:900}
.join-form>label{margin-bottom:9px;color:#314b44;font-size:12px;font-weight:800}
.join-input-wrap{height:58px;padding:4px;display:grid;grid-template-columns:44px minmax(0,1fr) 84px;align-items:center;border:1px solid var(--join-line);border-radius:15px;background:#fbfdfc;box-shadow:none;transition:border-color 180ms ease,box-shadow 180ms ease,background 180ms ease}
.join-input-wrap:focus-within{border-color:var(--join-brand);background:#fff;box-shadow:0 0 0 3px rgba(15,126,112,.12)}
.join-input-wrap>.material-icons{display:grid;place-items:center;color:#6b817b;font-size:21px}
.join-input-wrap input,.join-input-wrap input:focus,.join-input-wrap input:focus-visible{width:100%;height:100%;min-width:0;padding:0;border:0!important;outline:0!important;background:transparent!important;color:var(--join-ink);box-shadow:none!important;direction:ltr;text-align:right;font-size:14px}
.join-input-wrap input::placeholder{direction:rtl;text-align:right;color:#91a19d}
.join-input-wrap button{width:100%;min-width:0;height:46px;min-height:46px;margin:0;padding:0 12px;border:0;border-radius:10px;color:var(--join-strong);background:var(--join-soft);font-size:11px;font-weight:850;transition:background 180ms ease,color 180ms ease}
.join-input-wrap button:hover{color:#fff;background:var(--join-brand)}
.join-help,.join-error{min-height:22px;margin:7px 2px 0;font-size:11px;line-height:1.8}
.join-help{color:#6b7f79}.join-error{color:#b42334;font-weight:750}
.join-submit,.join-create{min-height:50px;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:14px;text-decoration:none!important;font-weight:850}
.join-submit{margin-top:10px;border:1px solid var(--join-brand);color:#fff;background:var(--join-brand);box-shadow:0 12px 25px rgba(15,126,112,.2);transition:background 180ms ease,border-color 180ms ease,box-shadow 180ms ease}
.join-submit:hover{border-color:var(--join-strong);background:var(--join-strong);box-shadow:0 14px 28px rgba(9,93,83,.25)}
.join-submit:disabled{cursor:wait;opacity:.65}.join-submit .material-icons{font-size:20px}
.join-divider{height:32px;display:flex;align-items:center;gap:10px;color:#81918d;font-size:10px}
.join-divider:before,.join-divider:after{content:"";height:1px;flex:1;background:#e2ebe8}
.join-create{border:1px solid var(--join-line);color:#315149;background:#fff;font-size:12px;transition:border-color 180ms ease,background 180ms ease,color 180ms ease}
.join-create:hover{border-color:#a8cac2;color:var(--join-strong);background:#f5faf8}
.join-create .material-icons{font-size:19px}
.join-body :where(a,button):focus-visible{outline:3px solid rgba(15,126,112,.28)!important;outline-offset:3px}
@media(max-width:780px){.join-main{width:min(100% - 20px,620px);padding:28px 0 48px}.join-card{grid-template-columns:1fr;border-radius:22px}.join-intro{padding:28px}.join-intro h1{font-size:32px}.join-intro ul{grid-template-columns:1fr 1fr;margin-top:22px}.join-intro li{grid-template-columns:36px 1fr;min-height:58px}.join-intro li>.material-icons{width:36px;height:36px}.join-form{padding:30px 24px 32px}}
@media(max-width:480px){.join-intro ul{grid-template-columns:1fr}.join-form{padding-inline:18px}.join-input-wrap{grid-template-columns:38px minmax(0,1fr) auto}.join-input-wrap button{min-width:62px;padding-inline:8px}.join-main{min-height:auto}}
@media(prefers-reduced-motion:reduce){.join-body *{scroll-behavior:auto!important;transition-duration:.01ms!important}}