/* ==========================================================
   Elisio — join.css  (join.html only)
   The application: a three-stage form in one glass panel,
   progress indicator, fields, chip checkboxes, agreement,
   the "what to expect" aside and the success panel.

   Progressive enhancement: with html.no-js every stage is
   visible and stacked. With html.js, stages 2 and 3 are
   hidden from the first paint; join.js then adds .is-staged
   and shows one stage at a time via [hidden].
   ========================================================== */

/* the hero's money figure never splits across lines */
.page-hero .money { white-space: nowrap; }

/* ========== SECTION + COLUMNS ========== */
.join.section { padding-top: 0; }

.join__cols {
  display: grid;
  gap: clamp(40px, 6vw, 72px);
}
@media (min-width: 1024px) {
  .join__cols {
    grid-template-columns: minmax(0, 1fr) clamp(280px, 25vw, 330px);
    align-items: start;
  }
}

/* ========== FORM PANEL ========== */
.join-form {
  container-type: inline-size;
  position: relative;
  padding: clamp(20px, 4vw, 48px);
  border-radius: var(--r-panel);
}
.join-form__head {
  margin-bottom: clamp(28px, 4vw, 40px);
  padding-bottom: clamp(20px, 3vw, 28px);
  border-bottom: 1px solid var(--line);
}
.join-form__note {
  margin-top: var(--s-5);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-3);
}
.req { color: var(--lilac); font-weight: 700; }

/* ----- Progress indicator ----- */
.join-progress {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.join-progress__item { position: relative; }
.join-progress__item:not(:last-child)::after {        /* the path to the next step */
  content: '';
  position: absolute;
  top: 22px;
  left: 50px;
  right: 6px;
  height: 1px;
  background: var(--line-2);
  transition: background var(--dur) var(--ease);
}
.join-progress__item.is-done::after {
  background: linear-gradient(90deg, var(--lilac), rgba(185, 166, 255, 0.45));
}
.join-progress__link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-height: 44px;
  padding: 4px 0;
  border-radius: var(--r-ctl);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-3);
  transition: color var(--dur-fast) var(--ease);
}
.join-progress__link:focus-visible { outline-offset: 4px; }
@media (hover: hover) {
  .join-progress__link:hover { color: var(--text); }
}
.join-progress__node {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: var(--surface);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--text-2);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.join-progress__tick { display: none; width: 16px; height: 16px; }

/* current step */
.join-progress__link[aria-current="step"] { color: var(--text); }
.join-progress__link[aria-current="step"] .join-progress__node {
  border-color: transparent;
  background: var(--lilac);
  color: var(--night);
  box-shadow: 0 0 0 6px rgba(185, 166, 255, 0.14);
}
/* the last step glows warm, like the orb — it is the one that signs */
.join-progress__link[aria-current="step"] .join-progress__node--last {
  background: radial-gradient(circle at 36% 32%, #FFF0D6 0%, #FFB547 42%, #C98A5E 100%);
  color: var(--on-amber);
  box-shadow: 0 0 0 6px rgba(255, 181, 71, 0.14);
}
/* done steps */
.join-progress__item.is-done .join-progress__link { color: var(--text-2); }
.join-progress__item.is-done .join-progress__node {
  border-color: var(--lilac);
  background: var(--lilac-wash);
  color: var(--lilac);
}
.join-progress__item.is-done .join-progress__num {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.join-progress__item.is-done .join-progress__tick { display: block; }

@container (min-width: 600px) {
  .join-progress__link { font-size: var(--fs-small); }
}
/* narrow panels: nodes only — the stage head right below already names
   the step, and three names in ~90px columns ran together */
@container (max-width: 459px) {
  .join-progress { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .join-progress__item:nth-child(2)::after { right: 0; }
  .join-progress__link { gap: 0; }
  .join-progress__item:last-child .join-progress__link { min-width: 44px; align-items: flex-end; }
  .join-progress__name {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ========== STAGES ========== */
.join-stage__head { margin-bottom: clamp(24px, 3.4vw, 36px); }
.join-stage__count { margin-bottom: 10px; }
.join-stage__title {
  font-size: clamp(1.75rem, 2.8vw, 2.375rem);
  letter-spacing: -0.03em;
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.join-stage__title:focus { outline: none; }          /* focused by join.js for context, not interactive */
.join-stage__sub {
  margin-top: var(--s-3);
  max-width: 56ch;
  color: var(--text-2);
}

/* no JS: every stage stacked, divided by a hairline */
.no-js .join-stage + .join-stage {
  margin-top: clamp(48px, 6vw, 64px);
  padding-top: clamp(40px, 5vw, 56px);
  border-top: 1px solid var(--line);
}
.no-js .join-stage__nav--step,
.no-js [data-back] { display: none; }
/* JS on: only stage 1 paints while join.js is still loading (no collapse) */
.js .join-form:not(.is-staged) .join-stage ~ .join-stage { display: none; }

/* with join.js: the stage that just arrived eases in (user-triggered only) */
@media (prefers-reduced-motion: no-preference) {
  .join-stage.is-entering { animation: join-in 0.42s var(--ease-out) both; }
}
@keyframes join-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ----- Field grid ----- */
.join-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px 24px;
}
@container (min-width: 560px) {
  .join-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field--full { grid-column: 1 / -1; }
}

/* ----- Fields ----- */
.field {
  display: grid;
  gap: 8px;
  align-content: start;
  min-width: 0;
}
fieldset.field { border: 0; padding: 0; margin: 0; }
.field > label,
.field > legend {
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
}
.field > legend { padding: 0; margin-bottom: 4px; }

.control {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-ctl);
  background: rgba(11, 9, 32, 0.55);
  color: var(--text);
  font-family: var(--f-text);
  font-size: 1.0625rem;           /* ≥16px: no zoom-on-focus on iOS */
  font-weight: 500;
  line-height: 1.45;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.control::placeholder { color: var(--text-3); opacity: 1; }
@media (hover: hover) {
  .control:hover { border-color: rgba(185, 166, 255, 0.5); }
}
.control:focus-visible,
.control:focus {
  outline: none;
  border-color: var(--lilac);
  background: rgba(11, 9, 32, 0.75);
  box-shadow: 0 0 0 3px rgba(185, 166, 255, 0.38);
}
textarea.control {
  min-height: 148px;
  resize: vertical;
  line-height: 1.55;
}

/* select: native control, custom chevron (no image) */
.select { position: relative; }
.select .control {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 48px;
  cursor: pointer;
}
.select::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 20px;
  width: 8px; height: 8px;
  margin-top: -6px;
  border-right: 2px solid var(--lilac);
  border-bottom: 2px solid var(--lilac);
  transform: rotate(45deg);
  pointer-events: none;
}
.select .control:invalid { color: var(--text-3); }      /* empty required select reads as a placeholder */
.select .control option { background: var(--surface); color: var(--text); }

/* invalid (set by join.js) */
.control[aria-invalid="true"] { border-color: var(--error); }
.control[aria-invalid="true"]:focus {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(255, 156, 156, 0.32);
}
.field__error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.45;
  color: var(--error);
}
.field__error::before {                         /* small "!" badge */
  content: '!';
  flex: none;
  display: grid;
  place-items: center;
  width: 18px; height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  font-family: var(--f-display);
  font-size: 0.6875rem;
  font-weight: 800;
  line-height: 1;
}

/* ----- Chips: real checkboxes, styled as tappable pills ----- */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}
.chip {
  position: relative;
  display: inline-flex;
  max-width: 100%;
}
.chip input {                                    /* the real control covers the whole pill */
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%; height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.chip span {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 18px 10px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: rgba(11, 9, 32, 0.4);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-2);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.chip span::before {                              /* the box */
  content: '';
  flex: none;
  width: 20px; height: 20px;
  border-radius: 7px;
  border: 1.5px solid var(--line-2);
  background: transparent;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.chip span::after {                               /* the tick */
  content: '';
  position: absolute;
  left: 21px;
  top: 50%;
  width: 6px; height: 11px;
  margin-top: -7px;
  border: solid var(--night);
  border-width: 0 2.2px 2.2px 0;
  transform: rotate(45deg) scale(0.4);
  opacity: 0;
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
@media (hover: hover) {
  .chip input:hover + span { border-color: rgba(185, 166, 255, 0.6); color: var(--text); }
}
.chip input:checked + span {
  border-color: var(--lilac);
  background: var(--lilac-wash);
  color: var(--text);
}
.chip input:checked + span::before { background: var(--lilac); border-color: var(--lilac); }
.chip input:checked + span::after { opacity: 1; transform: rotate(45deg) scale(1); }
.chip input:focus-visible + span {
  outline: 2px solid var(--lilac);
  outline-offset: 3px;
}
.chip input[aria-invalid="true"]:not(:checked) + span { border-color: rgba(255, 156, 156, 0.55); }
.chip input[aria-invalid="true"]:not(:checked) + span::before { border-color: rgba(255, 156, 156, 0.7); }
/* narrow panels: tighter pills that grow to fill each row, so the
   groups pack two to a row where they fit and never leave a ragged edge */
@container (max-width: 459px) {
  .chips { gap: 8px 6px; }
  .chip { flex: 1 1 auto; }
  .chip span { flex: 1; gap: 7px; padding-inline: 11px 12px; white-space: nowrap; }
  .chip span::before { width: 18px; height: 18px; border-radius: 6px; }
  .chip span::after { left: 18px; width: 5px; height: 10px; margin-top: -6.5px; }
}

/* ----- Agreement ----- */
.agree {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-card);
  background: rgba(11, 9, 32, 0.4);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.agree__control {
  position: relative;
  flex: none;
  width: 44px; height: 44px;                     /* tap target */
  margin: -10px -6px -10px -10px;
  display: grid;
  place-items: center;
}
.agree__control input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%; height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.agree__box {
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 8px;
  border: 1.5px solid var(--line-2);
  color: var(--night);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.agree__box svg { width: 15px; height: 15px; opacity: 0; transform: scale(0.5); transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.agree__control input:checked + .agree__box { background: var(--lilac); border-color: var(--lilac); }
.agree__control input:checked + .agree__box svg { opacity: 1; transform: none; }
.agree__control input:focus-visible + .agree__box { outline: 2px solid var(--lilac); outline-offset: 3px; }
@media (hover: hover) {
  .agree__control input:hover + .agree__box { border-color: rgba(185, 166, 255, 0.7); }
}
.agree:has(input:checked) { border-color: rgba(185, 166, 255, 0.45); background: var(--lilac-wash); }
.field.is-invalid .agree { border-color: rgba(255, 156, 156, 0.5); }
.agree__control input[aria-invalid="true"]:not(:checked) + .agree__box { border-color: var(--error); }
.agree__text {
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--text-2);
  cursor: pointer;
}

/* ----- Stage navigation ----- */
.join-stage__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin-top: clamp(28px, 4vw, 40px);
  padding-top: clamp(20px, 3vw, 28px);
  border-top: 1px solid var(--line);
}
.join-stage__nav > :only-child { margin-left: auto; }        /* stage 1: Continue sits right */
.no-js .join-stage__nav--submit { justify-content: flex-start; }

/* Continue — lilac: it moves you through the structure, it isn't money */
.btn--lilac { background: var(--lilac); color: var(--night); }
.btn--lilac .btn__orb { background: var(--night); color: var(--lilac); }
@media (hover: hover) {
  .btn--lilac:hover { background: #CDBFFF; }
}

.join-back {
  margin-left: -14px;                            /* chevron lines up with the field edge */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 20px 0 14px;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-2);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.join-back svg { width: 16px; height: 16px; }
.join-back:focus-visible { border-radius: var(--r-pill); }
@media (hover: hover) {
  .join-back:hover { color: var(--text); background: var(--lilac-wash); }
}

.join-stage__after {
  margin-top: var(--s-4);
  max-width: 52ch;
  font-size: var(--fs-small);
  color: var(--text-3);
}
.js .join-stage__after { margin-left: auto; max-width: 44ch; text-align: right; text-wrap: balance; }

@container (max-width: 459px) {
  .join-stage__nav { flex-direction: column; align-items: stretch; }
  .join-stage__nav .btn { justify-content: space-between; width: 100%; }
  .join-back { align-self: flex-start; }
  .join-stage__nav > :only-child { margin-left: 0; }
  .js .join-stage__after { margin-left: 0; text-align: left; }
}

/* ========== ASIDE ========== */
.join-aside { display: grid; gap: 0; }
.join-note { padding-block: var(--s-6); border-top: 1px solid var(--line-2); }
.join-note:first-child { padding-top: 0; border-top: 0; }
.join-note .label { margin-bottom: var(--s-2); }
.join-note__title {
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: var(--s-5);
}
.join-note__body { color: var(--text-2); font-size: var(--fs-small); }
.join-note--back .join-note__title { margin-bottom: var(--s-3); }

/* mini timeline */
.join-time {
  position: relative;
  display: grid;
  gap: 0;
}
.join-time::before {
  content: '';
  position: absolute;
  top: 20px; bottom: 20px;
  left: 6px;
  width: 1px;
  background: linear-gradient(180deg, var(--line-2), var(--lilac));
}
.join-time__item {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding: 11px 0 11px 30px;
  border-bottom: 1px solid var(--line);
}
.join-time__item:last-child { border-bottom: 0; }
.join-time__item::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 13px; height: 13px;
  margin-top: -6.5px;
  border-radius: 50%;
  border: 1px solid var(--lilac);
  background: var(--night);
  box-shadow: 0 0 0 4px var(--night);
}
.join-time__item--last::before {
  border-color: var(--lilac);
  background: var(--lilac);
}
.join-time__name { font-size: var(--fs-small); color: var(--text-2); font-weight: 500; }
.join-time__at {
  flex: none;
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--lilac);
}

/* facts list */
.join-facts { display: grid; }
.join-facts__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: 11px;
  border-bottom: 1px solid var(--line);
}
.join-facts__row:last-child { border-bottom: 0; }
.join-facts__row dt { font-size: var(--fs-small); color: var(--text-2); font-weight: 500; }
.join-facts__row dd {
  flex: none;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--fs-small);
  letter-spacing: -0.01em;
  color: var(--text);
}

@media (min-width: 1024px) {
  .join-aside { padding-top: clamp(20px, 4vw, 48px); }
}
/* sticky only where the whole aside fits below the header */
@media (min-width: 1024px) and (min-height: 1060px) {
  .join-aside {
    position: sticky;
    top: calc(var(--header-h) + 24px);
  }
}
/* tablets: the aside sits under the form, two notes side by side */
@media (min-width: 640px) and (max-width: 1023px) {
  .join-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-7); }
  .join-note:nth-child(2) { padding-top: 0; border-top: 0; }
  .join-note--back { grid-column: 1 / -1; }
}

/* ========== SUCCESS ========== */
.join-success {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  max-width: 820px;
  margin-inline: auto;
  padding: clamp(36px, 7vw, 88px) clamp(24px, 6vw, 80px);
  border-radius: var(--r-panel);
  text-align: center;
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.join-success::after {                            /* tilted orbit behind the orb */
  content: '';
  position: absolute;
  z-index: -1;
  left: 50%;
  top: calc(clamp(36px, 7vw, 88px) + 36px);       /* panel top padding + half the 72px orb */
  width: clamp(260px, 50vw, 460px);
  aspect-ratio: 3.4 / 1;
  border-radius: 50%;
  border: 1px solid rgba(185, 166, 255, 0.26);
  transform: translate(-50%, -50%) rotate(-14deg);
  pointer-events: none;
}
.join-success__orb {
  display: block;
  width: 72px; height: 72px;
  margin: 0 auto var(--s-6);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #FFF0D6 0%, #FFC46B 14%, #EFA184 30%, #AE8CF2 55%, #5A43C4 82%, #2C2076 100%);
  box-shadow: 0 0 60px rgba(139, 115, 242, 0.45);
}
.join-success__title:focus { outline: none; }
.join-success .lede { margin: var(--s-5) auto var(--s-7); }