/* ==========================================================================
   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 .field__label,
.iform .field__input,
.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; }
/* The red frame's 70% transparency lives HERE, on the group — not on the
   artwork and not on the wide-screen extension bands below. Those two pieces
   overlap by a pixel on purpose (to avoid a subpixel hairline gap), and when
   each carried its own alpha the overlap composited twice: 1 - 0.3² = 0.91
   against 0.7, drawing a darker red seam down both sides. Painting both pieces
   OPAQUE and fading the group flattens the overlap before the alpha applies,
   so the seam cannot occur. Keep the artwork and the bands opaque. */
.instore__mask { opacity: 0.7; }
.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);
  /* Full opacity on purpose: brandmark.svg already bakes in fill-opacity="0.21"
     per path, so any value here MULTIPLIES that (0.35 rendered an effective
     0.07). Adjust the asset, not this. */
  opacity: 1;
  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; }
/* font-family comes from the EXTENDED-cut group at the top of this file, with
   the rest of the interest copy — do not set it here too.

   font-size intentionally inherits the 16px base from styles.css. iOS Safari
   auto-zooms any input it focuses below 16px and does NOT zoom back out, which
   left mobile visitors scrolled sideways mid-form. This rule used to set 14px.
   Do not reintroduce a smaller size here — shrink the field some other way. */
.iform .field__input { text-align: left; letter-spacing: 0.28px; }

/* type="date" has no ::placeholder — browsers paint the mm/dd/yyyy hint in the
   input's OWN color, so it read full-white beside the 40% placeholders on every
   other field. Dim it to match while empty. There is no CSS selector for an
   empty date input, so `.has-value` is toggled by the script at the bottom of
   index.html; without that script the field simply stays full-white as before.
   Matches .field__input::placeholder in styles.css (white @ 0.4). */
.iform .field__input[type="date"]:not(.has-value) { color: rgba(255, 255, 255, 0.4); }
.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) extend it to the viewport edges. OPAQUE on
     purpose: the group's 0.7 opacity is applied once, above, so the 1px
     overlap with the artwork cannot double up into a visible seam. */
  .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: #da291c;
  }
  .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; }
}