/* The interest form: one dialog, shared by the landing page and the lessons page. */
.join::backdrop { background: rgba(6, 10, 18, .72); backdrop-filter: blur(3px); }
.join {
  border: 0; padding: 0; background: transparent; color: var(--paper, #f4efe6);
  width: min(460px, calc(100vw - 28px)); max-height: 92vh;
  font-family: var(--font, "IBM Plex Sans Arabic", "Dubai", system-ui, sans-serif);
}
.join[open] { animation: join-in .22s cubic-bezier(.2, .8, .3, 1); }
@keyframes join-in { from { opacity: 0; transform: translateY(14px) scale(.985); } }

.join-body {
  position: relative; overflow: auto; max-height: 92vh;
  background: var(--ink-2, #111b2e);
  border: 1px solid rgba(255, 200, 87, .18);
  border-radius: 24px; padding: 30px 26px 26px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}
.join-x {
  position: absolute; inset-block-start: 14px; inset-inline-end: 14px;
  width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .06); color: inherit; font-size: 1.3rem; line-height: 1;
}
.join-x:hover { background: rgba(255, 255, 255, .12); }

.join-mark { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: .95rem; }
.join-mark i { width: 9px; height: 9px; border-radius: 50%; background: var(--amber, #ffc857);
  box-shadow: 0 0 0 5px rgba(255, 200, 87, .16); }
.join h2 { font-size: 1.42rem; line-height: 1.45; margin: 14px 0 8px; }
.join h2 em { font-style: normal; color: var(--amber, #ffc857); }
.join-lead { color: var(--muted, #aab3c2); font-size: .95rem; margin: 0 0 22px; }

.join-field { margin-bottom: 15px; }
.join-field > label { display: block; font-size: .85rem; color: var(--muted, #aab3c2); margin-bottom: 7px; }
.join-field input[type="text"], .join-field input[type="email"], .join-field input[type="tel"] {
  width: 100%; padding: 13px 15px; font: inherit; font-size: 1rem; color: inherit;
  background: rgba(255, 255, 255, .045); border: 1px solid rgba(244, 239, 230, .13);
  border-radius: 13px; transition: border-color .15s, background .15s;
}
.join-field input::placeholder { color: rgba(170, 179, 194, .55); }
.join-field input:focus { outline: 0; border-color: var(--amber, #ffc857); background: rgba(255, 255, 255, .07); }

/* The country code sits in the field, so she only types her own nine digits. */
.join-phone { display: flex; align-items: stretch; gap: 0;
  border: 1px solid rgba(244, 239, 230, .13); border-radius: 13px; overflow: hidden;
  background: rgba(255, 255, 255, .045); transition: border-color .15s; }
.join-phone:focus-within { border-color: var(--amber, #ffc857); }
.join-phone .code {
  display: flex; align-items: center; gap: 8px; padding: 0 14px; flex: none;
  background: rgba(255, 255, 255, .05); border-inline-end: 1px solid rgba(244, 239, 230, .1);
  font-weight: 600; font-size: .98rem; letter-spacing: .01em; direction: ltr; color: var(--paper, #f4efe6);
}
.join-phone .code svg { width: 22px; height: 15px; border-radius: 2px; flex: none; }
.join-phone input { flex: 1; min-width: 0; border: 0; background: transparent; border-radius: 0;
  direction: ltr; text-align: left; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.join-phone input:focus { background: transparent; }
.join-hint { font-size: .8rem; color: rgba(170, 179, 194, .8); margin: 7px 2px 0; }

.join-check { display: flex; align-items: flex-start; gap: 11px; cursor: pointer;
  font-size: .91rem; line-height: 1.6; margin: 18px 0 20px; }
.join-check input { appearance: none; flex: none; width: 21px; height: 21px; margin: 1px 0 0;
  border: 1.5px solid rgba(244, 239, 230, .3); border-radius: 7px; cursor: pointer; position: relative;
  background: rgba(255, 255, 255, .04); transition: background .15s, border-color .15s; }
.join-check input:checked { background: var(--amber, #ffc857); border-color: var(--amber, #ffc857); }
.join-check input:checked::after { content: ""; position: absolute; inset-inline-start: 6px; inset-block-start: 2px;
  width: 6px; height: 11px; border: solid #1a1405; border-width: 0 2.4px 2.4px 0; transform: rotate(45deg); }
.join-check .wa-ico { color: #7be495; }

.join-err { display: block; color: #ff9c8a; font-size: .83rem; margin: 6px 2px 0; }
.join-field.bad input, .join-field.bad .join-phone { border-color: #ff9c8a; }

.join-send { width: 100%; border: 0; border-radius: 999px; padding: 15px 20px; cursor: pointer;
  font: inherit; font-weight: 700; font-size: 1.02rem;
  background: var(--amber, #ffc857); color: var(--amber-ink, #1a1405); transition: filter .15s, opacity .15s; }
.join-send:hover { filter: brightness(1.06); }
.join-send[disabled] { opacity: .6; cursor: default; }
.join-note { text-align: center; color: rgba(170, 179, 194, .85); font-size: .82rem; margin: 14px 0 0; }

/* The screen after she sends it. */
.join-done { text-align: center; padding: 10px 0 4px; }
.join-done .tick { width: 66px; height: 66px; margin: 0 auto 18px; border-radius: 50%;
  display: grid; place-items: center; color: #7be495; background: rgba(123, 228, 149, .12); }
.join-done .tick svg { width: 32px; height: 32px; }
.join-done h2 { margin-top: 0; }
.join-done .btn-row { display: grid; gap: 10px; margin-top: 22px; }
.join-done .wa-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: #25d366; color: #05240f; font-weight: 700; border-radius: 999px; padding: 14px 20px;
  text-decoration: none; }
.join-done .ghost { display: block; text-align: center; padding: 13px 20px; border-radius: 999px;
  border: 1px solid rgba(244, 239, 230, .16); color: inherit; text-decoration: none; font-weight: 600; }