/* The pre-launch gate. Self-contained: this template is on its own layout
   and inherits nothing from the storefront's section CSS. */

/* §11.1 repeated locally — the platform wraps this template's sections in
   <div id="shopline-section-… class="section"> too, and the storefront
   adapter sheet is not what styles this page. Without this the wrapper's
   padding reappears as a dead band above the gate. */
[id^="shopline-section-"].section { padding: 0; margin: 0; }

html, body { background: var(--ink); }

.pw-gate {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(24px, 6vw, 72px) var(--gutter);
  overflow: hidden;
  color: var(--inv-text);
}
.pw-gate__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* The photograph is a ground, not a subject: the gate has one job and the
   copy has to win. A light scrim left the child's face reading through the
   headline. Two layers — a vertical wash that anchors the bottom, and a
   radial that keeps the centre dark enough for white type. */
.pw-gate__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(18,14,30,.55) 0%, rgba(18,14,30,.78) 58%, rgba(18,14,30,.97) 100%),
    radial-gradient(85% 65% at 50% 44%, rgba(22,17,36,.45) 0%, rgba(22,17,36,.93) 78%);
}
.pw-gate__inner {
  position: relative;
  width: min(620px, 100%);
  display: flex; flex-direction: column; align-items: center;
  gap: 20px; text-align: center;
  text-shadow: 0 2px 24px rgba(18, 14, 30, .6);
}
.pw-gate__logo { height: 56px; width: auto; margin-bottom: 4px; }
.pw-gate h1 { color: var(--white); text-wrap: balance; }
.pw-gate p { max-width: 42ch; }

.pw-gate__form {
  width: 100%;
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; margin-top: 8px;
}
.pw-gate__row {
  display: flex; gap: 10px; width: 100%; flex-wrap: wrap;
  justify-content: center;
}
.pw-gate__row .input {
  flex: 1 1 260px;
  min-width: 0;                  /* or a long placeholder widens the row past the page */
  background: rgba(22, 17, 36, .55);
  backdrop-filter: blur(6px);
  border: 1.5px solid rgba(255, 255, 255, .38);
  color: var(--white);
  padding: 17px 22px;
  font-weight: 600;
}
.pw-gate__row .input::placeholder { color: rgba(255, 255, 255, .55); font-weight: 400; }
.pw-gate__row .input:focus { border-color: var(--accent); background: rgba(22, 17, 36, .72); }
.pw-gate__row .btn { flex: 0 0 auto; }

.pw-gate__error {
  color: #ff8fa0; font-weight: 700; font-size: 14px; margin: 0;
}
/* the element ships with `hidden`, and a display rule of our own would
   otherwise out-specify the attribute */
.pw-gate__error[hidden] { display: none; }

.pw-gate__admin { opacity: .55; margin-top: 4px; }
.pw-gate__admin a { color: var(--accent); font-weight: 700; }

.pw-gate :is(input, button):focus-visible {
  outline: 3px solid var(--accent); outline-offset: 3px;
}

@media (max-width: 600px) {
  .pw-gate__row { flex-direction: column; }
  .pw-gate__row .btn { width: 100%; }
}