/* The Improbable app waitlist. Same world as the games (DESIGN.md "Website"): a navy field with the pitch and the app on
   a phone in place of the giant pictogram, what's in it and screenshots on the ground, then the form again on navy. */
.appwait main { margin-top: 0; }

.hero { background: var(--navy); color: #fff; margin-top: var(--gap); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding-top: clamp(32px, 6vw, 72px); padding-bottom: clamp(32px, 6vw, 72px); }
.hero .tag { color: var(--orange); }
.hero h1 { font-size: clamp(38px, 6.2vw, 84px); font-weight: 800; letter-spacing: -0.03em; line-height: 0.95; margin: 14px 0 20px; max-width: 11em; }
.hero .lede { color: #fff; opacity: 0.9; max-width: 32em; margin-bottom: 0; }
.hero .form .signup, .close .form .signup { max-width: 520px; }
.hero .note { margin-top: 14px; font-size: 15px; color: var(--navy-soft); }

/* The video plays where a game page has its giant pictogram: a 9:16 frame with a 2px white rule. */
.phone { margin: 0; justify-self: end; width: min(100%, 360px); aspect-ratio: 540 / 1084; border: 2px solid #fff; background: var(--ground); line-height: 0; }
.phone img { width: 100%; height: 100%; object-fit: cover; display: block; }

.appwait h2 { font-size: clamp(28px, 3.6vw, 44px); font-weight: 800; letter-spacing: -0.03em; line-height: 0.95; padding-bottom: 12px; border-bottom: var(--rule) solid var(--ink); }
.explain, .made, .faq { margin-top: clamp(48px, 8vw, 96px); }

.plan { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin-top: 20px; }
.plan li { background: #fff; padding: 22px 22px 26px; }
.plan .num { display: block; font-size: 56px; font-weight: 800; letter-spacing: -0.04em; line-height: 0.85; color: var(--ink); font-variant-numeric: tabular-nums; }
.plan h3 { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin: 16px 0 6px; }
.plan p { color: var(--ink-soft); }

.reel { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.reel li { display: flex; flex-direction: column; gap: 10px; }
.reel img { width: 100%; height: auto; aspect-ratio: 540 / 1084; object-fit: cover; display: block; border: 2px solid var(--ink); }

.faq details { border-bottom: 2px solid var(--ink); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 40px 18px 0; position: relative; font-size: clamp(18px, 2vw, 22px); font-weight: 800; letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 28px; font-weight: 400; }
.faq details[open] summary::after { content: "\2212"; }
@media (hover: hover) { .faq summary:hover { color: var(--ink-soft); } }
.faq details p { padding: 0 0 20px; max-width: 40em; color: var(--ink-soft); }

.close { background: var(--navy); color: #fff; margin-top: clamp(48px, 8vw, 96px); }
.close-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; padding-top: clamp(32px, 5vw, 56px); padding-bottom: clamp(32px, 5vw, 56px); }
.close h2 { border: 0; padding: 0; color: #fff; font-size: clamp(32px, 4.6vw, 60px); }
.close .signup, .hero .signup { margin-top: 24px; }
.close .signup { margin-top: 0; padding-top: 0; border-top: 0; }

@media (max-width: 899px) {
  .hero-grid { grid-template-columns: 1fr; }
  .phone { justify-self: start; width: min(100%, 300px); }
  .plan { grid-template-columns: 1fr; }
  .reel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .close-grid { grid-template-columns: 1fr; }
}
.hero .icon { width: 88px; height: 88px; border-radius: 20px; display: block; }
.reel { max-width: 900px; }
@media (max-width: 899px) { .reel { grid-template-columns: repeat(3, minmax(0, 1fr)); } }