/* PADEL RALLY — home.css: the homepage's opener and early access only. The product chapters
   between them are features.css; tokens, type, buttons, the masthead, the footer, RALLY ON and
   the phone frame are kit.css. Named .opener, not .hero: take.css still styles .hero. */

/* features.css shows the masthead links at every width (its masthead has no button); here the
   button needs the room, so below 900px the links hide as they do on kit.css pages. */
@media (max-width: 899px) { .masthead__nav { display: none; } }

/* ── OPENER ── the night court, the line, Maya's Home ───────────────────────── */
.opener {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(100svh, 880px);
  display: grid; align-items: center;
  padding-block: calc(var(--head) + var(--s4)) var(--s6);
}
.opener__bg, .opener__bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.opener__bg { z-index: -2; }
.opener__bg img { object-fit: cover; }
/* The landscape plate's dark steel post sits ~75% across. Unflipped, wide windows put it right
   beside the phone as a hard-edged black band; mirrored, it falls under the headline's dark
   overlay and the phone side shows the open fence and bench. Portrait plate (<768px) unchanged. */
@media (min-width: 768px) { .opener__bg img { transform: scaleX(-1); } }
.opener::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, transparent 70%, var(--ink)),
    linear-gradient(90deg, rgba(0,0,0,.92) 0 40%, rgba(0,0,0,.35));
}
.opener__inner { display: grid; gap: var(--s6); align-items: center; }
.opener__inner > * { min-width: 0; }
.opener__text { display: grid; gap: var(--s3); justify-items: start; }
.opener__title {
  font-size: var(--t-hero); font-weight: 900;
  line-height: .9; letter-spacing: -.035em; text-transform: uppercase;
}
.opener__platforms { color: var(--chalk-mid); }
.opener__actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: .5rem; }

@media (min-width: 900px) {
  .opener__inner { grid-template-columns: minmax(0,7fr) minmax(0,5fr); gap: var(--s8); }
}
@media (max-width: 899px) {
  .opener::before { background: linear-gradient(180deg, rgba(0,0,0,.58), rgba(0,0,0,.78) 45%, var(--ink) 92%); }
  .opener .phone { width: min(100%, 260px); }   /* the inline --phone-w is the desktop size */
}
@media (max-width: 559px) {
  .opener__actions .btn { flex: 1 1 100%; }
}

/* The page's one dealt moment: the line and the phone rise in once, on load. */
@media (prefers-reduced-motion: no-preference) {
  .opener__text, .opener .phone { animation: rise 900ms var(--e-out) both; }
  .opener .phone { animation-delay: 120ms; }
  @keyframes rise { from { opacity: 0; transform: translateY(24px); } }
}

/* ── EARLY ACCESS ── off until data-endpoint is set (home.js) ────────────── */
.early { padding-block: var(--band); border-top: 1px solid var(--line); }
.early__inner { max-width: 760px; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--s3); text-align: center; }
.early__form { width: 100%; display: grid; gap: var(--s2); margin-top: var(--s2); }
.early__fields { display: grid; gap: var(--s2); align-items: end; text-align: left; }
@media (min-width: 720px) {
  .early__fields { grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto; }
}
.early__field { display: grid; gap: .5rem; min-width: 0; }
.early__field input {
  width: 100%; height: 48px; padding: 0 1rem;
  background: var(--surface); border: 1px solid var(--line-hi); border-radius: 0;
  color: var(--chalk);
  transition: border-color var(--d-micro) var(--e-soft);
}
.early__field input:focus-visible { border-color: var(--volt); }
.early__field input:disabled { opacity: .55; cursor: not-allowed; }
.early__form .btn { white-space: normal; text-align: center; }   /* the off label wraps at 320 */
/* Off reads as "not yet", not as a broken green button. */
.early__form .btn:disabled {
  --btn-bg: transparent; --btn-fg: var(--chalk-mid);
  border-color: var(--line-hi); cursor: not-allowed; transform: none;
}
.early__consent { font-size: var(--t-sm); color: var(--chalk-low); text-wrap: pretty; }
.early__message { min-height: 1.6em; }