/* ==========================================================================
   Interest ("Get On The List") layout + application-confirm page.
   Figma: [D] Application Page (8175:13112) / confirm (8221:7325).
   Loads AFTER styles.css; new classes only, no overrides of the main design.
   The whole interest layout lives in [data-ms-mode="closed"] on index.html —
   membership.js shows it while enrollment is closed and swaps to the
   [data-ms-mode="open"] enrollment layout when ops open enrollment.
   ========================================================================== */

/* Body copy on these surfaces uses the EXTENDED cut (Figma: Akzidenz-Grotesk
   Next Regular Extended) — the kit serves it as akzidenz-grotesk-next-extend
   (weights 400/700), the same family the buttons use. */
.ihero__body,
.instore__body,
.iform__sub,
.iform__support,
.iform__contact,
.iform .check__text,
.iform .signup__error {
  font-family: var(--font-buttons);
  font-weight: 400;
}

/* ------------------------------------------------------------ hero ------ */
.ihero {
  position: relative;
  z-index: 4;
  width: 100%;
  height: 842px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  background: var(--black);
}
.ihero__bg {
  position: absolute;
  inset: 0;
}
.ihero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Radial vignette per Figma 8178:4279 — dark centre toward black edges.
   Percentage radii scale with the viewport, and the edge stop is capped
   below full black so the photo always reads at the frame edges instead
   of being swallowed on wide screens. */
.ihero__grad {
  position: absolute;
  inset: 0;
  opacity: 0.89;
  background: radial-gradient(ellipse 75% 70% at 52% 43%,
              rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.93) 100%);
}
.ihero__head {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding-top: 45px;
}
.ihero__eyebrow {
  font-family: var(--font-buttons);
  font-size: 10px;
  font-weight: 500;
  line-height: 2;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--white);
  text-align: center;
}
.ihero__main {
  position: relative;
  flex: 1 0 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px 24px;
  max-width: 598px;
}
.ihero__title {
  font-family: var(--font-header);
  font-size: 64px;
  font-weight: 400;
  line-height: 70px;
  text-transform: uppercase;
  color: var(--white);
  text-align: center;
}
.ihero__body {
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.28px;
  color: var(--white);
  text-align: center;
}

/* Red CTA (Figma "Buttons") — solid red, white extended caps. */
.btn--red {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 18px 22px;
  background: var(--red);
  border: 0;
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
}
.btn--red .btn__label {
  font-family: var(--font-buttons);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 4.8px;
  text-transform: uppercase;
  color: var(--white);
  white-space: nowrap;
}

/* --------------------------------------------- what's in store / confirm - */
.instore {
  position: relative;
  z-index: 3;
  width: 100%;
  min-height: 858px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--black);
}
.instore__photo,
.instore__leather,
.instore__mask {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.instore__photo img,
.instore__leather img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.instore__leather { mix-blend-mode: soft-light; opacity: 0.5; }
.instore__mask img {
  width: 100%;
  height: 100%;
  display: block;
}
.instore__content {
  position: relative;
  width: 100%;
  max-width: var(--page-w);
  margin: 0 auto;
  padding: 80px 48px 80px 765px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 19px;
}
.instore__eyebrow {
  font-family: var(--font-gotham);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--white);
}
.instore__title {
  font-family: var(--font-header);
  font-size: 64px;
  font-weight: 400;
  line-height: 70px;
  text-transform: uppercase;
  color: var(--white);
}
.instore__body {
  max-width: 470px;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.28px;
  color: var(--white);
}

/* ------------------------------------------------------- form section --- */
.iform {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 120px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--black);
  overflow: hidden;
  box-sizing: border-box;
}
/* Same tall paper texture treatment as the FAQs section. */
.iform__texture {
  position: absolute;
  top: calc(50% + 684px);
  left: 50%;
  transform: translate(-50%, -50%) scaleY(-1);
  width: var(--page-w);
  height: 3239.26px;
  opacity: 0.66;
  overflow: hidden;
  pointer-events: none;
}
.iform__texture img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 99.88%;
}
.iform__overlay {
  position: absolute;
  inset: 0;
  background: var(--black);
  mix-blend-mode: overlay;
  pointer-events: none;
}
/* Giant rotated brandmark watermark (Figma 8182:5863). */
.iform__mark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1210px;
  height: 1210px;
  transform: translate(-50%, -50%) rotate(-21.66deg);
  opacity: 0.35;
  pointer-events: none;
}
.iform__mark img { width: 100%; height: 100%; display: block; }

.iform__card {
  position: relative;
  width: 100%;
  max-width: 584px;
  padding: 0 64px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 46px;
}
.iform__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.iform__title {
  font-family: var(--font-header);
  font-size: 36px;
  font-weight: 400;
  line-height: normal;
  text-transform: uppercase;
  color: var(--white);
  text-align: center;
}
.iform__sub {
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.28px;
  color: var(--white);
  text-align: center;
}
.iform__fields {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
/* Field internals reuse .field/.field__control from styles.css; labels and
   inputs read left-aligned here (dark layout). */
.iform .field__label { text-align: left; }
.iform .field__input { text-align: left; font-family: var(--font-body); font-size: 14px; letter-spacing: 0.28px; }
.iform__support {
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.24px;
  color: var(--white);
}
.iform__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.iform__actions .btn--red { width: 284px; }
.iform__actions .btn--red .btn__label {
  font-family: var(--font-gotham);
  font-weight: 700;
  letter-spacing: 1.8px;
}
.iform__contact {
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.24px;
  color: var(--white);
  text-align: center;
}
.iform__contact a {
  color: var(--white);
  text-decoration: underline;
  text-underline-position: from-font;
}

/* --------------------------------------------------- confirm page bits --- */
.cheader {
  position: relative;
  z-index: 4;
  width: 100%;
  padding: 24px 64px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  background: var(--black);
}
.cheader a { display: block; }

/* --------------------------------------------- full-bleed backgrounds --- */
/* Same mechanism as styles.css: on screens wider than the 1440px canvas,
   CONTENT stays on the canvas but each section's BACKGROUND extends to the
   viewport — vertical-only clip on the section, background layers widened
   to 100vw. Below 1441px nothing here applies. */
@media (min-width: 1441px) {
  .ihero, .instore, .iform, .cheader {
    overflow: visible;
    clip-path: inset(0 -50vw);
  }

  /* Solid black section grounds extend behind the widened art. */
  .ihero::before, .instore::before, .iform::before, .cheader::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    background: var(--black);
    z-index: -1;
  }
  /* Hero: photo + vignette become centered viewport-wide layers. */
  .ihero__bg {
    inset: auto;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
  }
  .ihero__grad {
    inset: auto;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
  }

  /* What's-in-store / confirm: photo, leather, and red mask span the
     viewport. */
  .instore__photo, .instore__leather, .instore__mask {
    inset: auto;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
  }
  /* The mask's photo window must keep its designed 1440 proportions — the
     frame artwork stays on the canvas and solid red bands (matching the
     artwork's fill, #DA291C at .7) extend it to the viewport edges. */
  .instore__mask img {
    width: var(--page-w);
    margin: 0 auto;
  }
  .instore__mask::before,
  .instore__mask::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: calc(50% - (var(--page-w) / 2) + 1px);
    background: rgba(218, 41, 28, 0.7);
  }
  .instore__mask::before { left: 0; }
  .instore__mask::after { right: 0; }

  /* Form section: texture + blend overlay widen; watermark stays centered.
     The texture anchors to the section bounds (instead of the 3239px sheet
     cropped by overflow) so it never extends the document's scroll area —
     clip-path doesn't remove scrollable overflow in every engine. */
  .iform__texture {
    top: 0;
    bottom: 0;
    height: auto;
    transform: translateX(-50%) scaleY(-1);
    width: 100vw;
  }
  .iform__texture img {
    height: 100%;
    object-fit: cover;
  }
  .iform__overlay {
    inset: auto;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
  }
}

/* ------------------------------------------------------- responsive ----- */
@media (max-width: 1099px) {
  .instore__content { padding-left: 52%; }
}
@media (max-width: 899px) {
  .ihero { height: auto; min-height: 640px; }
  .ihero__main { padding: 64px 24px; }
  .ihero__title { font-size: 44px; line-height: 52px; }
  .instore { min-height: 0; }
  .instore__mask { display: none; }
  .instore__content { padding: 96px 32px; }
  .instore__title { font-size: 44px; line-height: 52px; }
  .instore__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
  }
  .iform__card { padding: 0 8px; }
}