/* sec-shared.css: sections both pages use. Today: the Join band (#join). Every value reads tokens.css.
   A full-width crew photograph with an ink card on it: heading, three benefits with the four-shape bullets, the early-access form.
   Under 768 the photo sits on top and the card overlaps its lower edge. */
.join { position: relative; background: var(--ink); color: #fff; min-height: clamp(660px, 84vh, 900px); display: flex; align-items: center; }
/* the photo keeps its own shape (1885 : 996) so both men's faces stay whole and clear of the card, which covers only the right of the
   photo; the rest of the band is ink, the photo fades into it. Below 1360px the card moves under the photo (see the media rules). */
.join__photo { position: absolute; inset: 0 0 auto 0; aspect-ratio: 1885 / 996; background: var(--ink); overflow: hidden; }
.join__photo picture, .join__photo > img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.join__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 0% 50%; transform-origin: 40% 50%; }
.join__veil { position: absolute; inset: 0 0 auto 0; aspect-ratio: 1885 / 996; background: linear-gradient(to right, rgba(23, 24, 26, 0) 38%, rgba(23, 24, 26, .38) 100%), linear-gradient(to bottom, rgba(23, 24, 26, 0) 72%, var(--ink) 100%); pointer-events: none; }
.join__in { position: relative; display: flex; justify-content: flex-end; padding-block: 72px; }
.join__card { width: min(100%, 480px); background: var(--ink); color: #fff; border-radius: var(--r-lg); padding: clamp(28px, 3.4vw, 44px); box-shadow: 0 30px 80px rgba(0, 0, 0, .38); }
.join__h { font-size: clamp(36px, 3.6vw, 50px); color: #fff; }
.join__h em { display: block; color: #fff; }
.join__list { list-style: none; margin: 24px 0 28px; padding: 0; display: grid; gap: 12px; }
.join__list li { display: flex; align-items: center; gap: 14px; font: 600 17px/1.3 var(--body); }
.join__list .shp { height: 16px; width: 22px; }
.join__form { gap: 16px; }
.join__form .field label { color: #fff; }
.join__form .field input, .join__form .field select { border-color: transparent; }
.join__form .field input[aria-invalid="true"], .join__form .field select[aria-invalid="true"] { border-color: #FF9C92; }
.join__form .field__err { color: #FF9C92; }
.join__form .form-note, .join__form .form-noscript { color: #fff; font-weight: 600; }
.join__btn { align-self: stretch; margin-top: 6px; }
.join__fine { margin: 2px 0 0; font-size: 14px; line-height: 1.4; color: var(--white-72); }
.join__fine a { color: #fff; display: inline-block; min-height: 24px; line-height: 24px; }
.join :focus-visible { outline-color: #fff; }
.join .field select option { color: var(--ink); }
@media (max-width: 1359px) {
  .join { display: block; min-height: 0; background: var(--ground); color: var(--ink); }
  .join__photo { position: relative; inset: auto; }
  .join__veil { display: none; }
  .join__in { margin-top: -64px; padding-block: 0 48px; justify-content: center; }
  .join__card { width: 100%; max-width: 640px; }
}
@media (max-width: 767px) {
  .join__photo { aspect-ratio: auto; height: clamp(260px, 72vw, 380px); }
  .join__in { margin-top: -30px; }
  .join__card { max-width: none; }
}