/* Shared decoration for the direct registration page and its desktop dialog. */
:root { --jus-join-experience: ready; }
.join-experience .join-layout { margin-top: 35px; }
.join-experience .join-intro::after { display: none; }
.join-experience .join-form-wrap { position: relative; padding-top: 65px; }
.join-objects { position: relative; width: min(100%, 315px); height: 196px; margin: 23px 0 26px; pointer-events: none; }
.join-object { display: block; overflow: hidden; width: 174px; height: 174px; border: 1px solid #cfc5b5; border-radius: 34px; background: #eee5d7; box-shadow: 0 11px 23px #45331816; pointer-events: none; user-select: none; }
.join-object img { display: block; width: 100%; height: 100%; object-fit: cover; }
.join-object svg { display: none; width: 73%; height: 80%; margin: 10% auto; fill: none; stroke: var(--accent-text); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.join-object.is-fallback img { display: none; }
.join-object.is-fallback svg { display: block; }
.join-object.is-fallback { background: var(--surface); }
.join-objects .join-object--hook { position: absolute; left: 5px; top: 0; transform: rotate(-8deg); }
.join-objects .join-object--ribbon { position: absolute; right: 0; bottom: 0; width: 141px; height: 141px; border-radius: 30px; transform: rotate(9deg); }
.join-experience .join-form-mascot { position: absolute; top: -35px; right: 25px; width: 84px; height: 84px; border-radius: 23px; transform: rotate(11deg); }
html[data-theme="dark"] .join-object { border-color: #579cca8c; box-shadow: 0 14px 28px #000c2050, 0 0 0 4px #499bdb0c; }
html[data-theme="dark"] .join-experience .join-form-wrap { background: linear-gradient(155deg, #17334c, var(--surface) 43%); }

.join-dialog { width: min(1120px, calc(100vw - 64px)); max-width: none; max-height: calc(100dvh - 64px); padding: 0; margin: auto; border: 1px solid var(--line); border-radius: 28px; background: var(--bg); color: var(--text); box-shadow: 0 30px 110px #050e2b55; overflow: hidden; }
.join-dialog:not([open]) { display: none; }
.join-dialog::backdrop { background: #081a2d8c; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.join-dialog__body { max-height: calc(100dvh - 66px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--accent) var(--surface); }
.join-dialog__close { position: absolute; top: 15px; right: 16px; z-index: 5; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; background: var(--card); color: var(--text); cursor: pointer; box-shadow: 0 4px 12px #0000000b; }
.join-dialog__close span { font: 27px/1 Arial, sans-serif; transform: translateY(-1px); }
.join-dialog__close:hover { border-color: var(--accent); color: var(--accent-text); }
.join-dialog__close:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.join-dialog .join-page { width: 100%; max-width: none; padding: 39px 37px 34px; margin: 0; }
.join-dialog .join-page > .inline-link { display: inline-block; padding-right: 46px; }
.join-dialog .join-layout { grid-template-columns: minmax(260px, .8fr) minmax(380px, 1.2fr); gap: 31px; margin-top: 38px; }
.join-dialog .join-intro { position: sticky; top: 25px; align-self: start; }
.join-dialog .join-intro .page-title { font-size: clamp(42px, 4.4vw, 58px); line-height: 1.02; margin-top: 17px; margin-bottom: 18px; }
.join-dialog .join-intro > .muted { font-size: 15px; line-height: 1.55; }
.join-dialog .join-objects { width: 265px; max-width: 100%; height: 158px; margin: 22px 0; }
.join-dialog .join-object--hook { width: 140px; height: 140px; border-radius: 27px; }
.join-dialog .join-object--ribbon { width: 121px; height: 121px; border-radius: 25px; }
.join-dialog .join-form-wrap { padding: 59px 25px 25px; }
.join-dialog .join-form-heading h2 { font-size: 26px; line-height: 1.2; }
.join-dialog .join-steps { margin-top: 16px; }
.join-dialog .join-steps p { font-size: 12px; line-height: 1.5; }
.join-dialog #join-dialog-title:focus { outline: none; }
html[data-theme="dark"] .join-dialog { box-shadow: 0 30px 120px #000b1ce6, 0 0 0 1px #5bcfff12; }
html[data-theme="dark"] .join-dialog::backdrop { background: #000b1ccc; }

@media (max-width: 1100px) {
  .join-dialog .join-page { padding-inline: 28px; }
  .join-dialog .join-layout { grid-template-columns: minmax(245px, .76fr) minmax(365px, 1.24fr); gap: 25px; }
  .join-dialog .join-form-wrap { padding-inline: 21px; }
}
@media (max-width: 800px) {
  .join-experience .join-layout { margin-top: 25px; gap: 48px; }
  .join-experience .join-objects { width: 270px; height: 173px; margin: 22px 0; }
  .join-experience .join-object--hook { width: 151px; height: 151px; border-radius: 29px; }
  .join-experience .join-object--ribbon { width: 130px; height: 130px; border-radius: 27px; }
  .join-experience .join-form-wrap { padding-top: 62px; }
  .join-dialog { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); border-radius: 20px; }
  .join-dialog__body { max-height: calc(100dvh - 26px); }
  .join-dialog .join-layout { grid-template-columns: minmax(0, 1fr); gap: 50px; }
  .join-dialog .join-page { padding: 32px 23px; }
  .join-dialog .join-intro { position: static; }
  .join-dialog .join-intro .page-title { font-size: 46px; }
}
@media (max-width: 400px) {
  .join-experience .join-objects { max-width: calc(100% - 8px); height: 161px; }
  .join-experience .join-object--hook { width: 141px; height: 141px; }
  .join-experience .join-object--ribbon { width: 120px; height: 120px; }
  .join-experience .join-form-mascot { right: 18px; width: 78px; height: 78px; border-radius: 22px; }
}