/* The homepage after the iPhone launch: one main action per screen, the app shown, the brand kept loud.
   Loaded after styles.css, which still holds the shared pieces (fonts, .btn, .paper, the courts card, the veil). */

:root {
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --display: "Unbounded", "Arial Black", sans-serif;
  --gutter: clamp(20px, 4vw, 56px);
  --scrim: rgba(6, 6, 6, 0.9);
}

/* ---------- header: logo · Log in · Get the app (phones); plus Find a game, Host a game and sound (computers) ---------- */
header::before {
  /* the film can be bright behind the links: a soft dark band keeps them readable */
  content: ""; position: fixed; inset: 0 0 auto 0; height: 150px; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(6, 6, 6, 0.78), rgba(6, 6, 6, 0));
  transition: height 200ms ease, background-color 200ms ease;
}
/* scrolled: a solid band the height of the header, with a hairline, so the hero slides behind it rather than into the logo */
header.is-scrolled::before {
  height: var(--band, 116px); background: rgba(6, 6, 6, 0.94);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
@media (max-width: 767px) { header { --band: 76px; } }
@media (prefers-reduced-motion: reduce) { header::before { transition: none; } }
.authlinks { gap: 22px; }
.authlinks__link, .authlinks__get { display: inline-flex; align-items: center; min-height: 44px; }
.authlinks__get {
  font-family: var(--mono); font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--lime); text-decoration: none; border-bottom: 2px solid transparent; transition: border-color 120ms ease;
}
.authlinks__get:hover { border-bottom-color: var(--lime); }
@media (max-width: 767px) {
  .authlinks { gap: 18px; }
  .authlinks__wide, .sound { display: none; }
  .authlinks__link[data-login] { display: inline-flex; }
}

/* ---------- hero ---------- */
.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* reaches solid ink at the hero's bottom edge, where How it works starts on solid ink: no seam, whatever the film shows */
  background: linear-gradient(to top, var(--ink) 0%, rgba(6, 6, 6, 0.8) 40%, rgba(6, 6, 6, 0) 72%);
}
.hero__inner {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 48px;
  padding: 0 20px max(36px, calc(env(safe-area-inset-bottom) + 20px));
}
.hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; width: 100%; max-width: 760px; }
.hero__eyebrow {
  order: 0; margin: 0; padding: 6px 10px; rotate: -2deg;
  font-family: var(--mono); font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink); background: var(--lime); box-shadow: 3px 3px 0 var(--pink);
}
.hero__title {
  order: 1; margin: 0;
  font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: -0.045em; line-height: 0.95;
  font-size: min(8.9vw, 35px); color: var(--paper);
  /* the brand's offset print, static and capped at 3px: the real text stays plain in the DOM */
  text-shadow: 3px 3px 0 var(--pink), -2px -2px 0 var(--cyan);
}
.hero__lede { order: 2; margin: 0; max-width: 36ch; font-size: 16px; line-height: 1.45; color: rgba(255, 255, 255, 0.9); }
.hero__get { order: 3; display: flex; align-items: center; gap: 24px; margin-top: 6px; }
/* Apple's badge, untouched: at least 40px tall, a quarter of its height clear all round, smaller than the headline */
.hero__badge { display: block; padding: 12px 0; border-radius: 10px; }
.hero__badge img { display: block; height: 48px; width: auto; }
.hero__badge:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; }
.hero__qr { display: none; margin: 0; }
.hero__web {
  order: 4; display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  font-size: 15px; font-weight: 600; color: var(--paper); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.45);
  text-underline-offset: 4px;
}
.hero__web:hover { text-decoration-color: var(--lime); }
.hero__web:focus-visible { outline: 2px dashed var(--paper); outline-offset: 4px; }
.hero__phone { display: none; }

/* Android: the web is the way in, so it comes first as the button; the badge follows, still there */
.is-android .hero__web {
  order: 3; justify-content: center; width: 100%; padding: 16px 20px; text-decoration: none;
  font-family: var(--display); font-weight: 800; font-size: 17px; letter-spacing: -0.04em;
  color: var(--ink); background: var(--lime); border: 3px solid var(--ink); border-radius: 8px; box-shadow: 5px 5px 0 var(--paper);
}
.is-android .hero__get { order: 4; }

@media (min-width: 768px) {
  .hero__scrim {
    background:
      linear-gradient(to right, var(--scrim) 0%, rgba(6, 6, 6, 0.72) 40%, rgba(6, 6, 6, 0) 68%),
      linear-gradient(to top, var(--ink) 0%, rgba(6, 6, 6, 0.55) 16%, rgba(6, 6, 6, 0) 36%);
  }
  .hero__inner { align-items: center; padding: 120px var(--gutter) clamp(40px, 7vh, 80px); }
  .hero__copy { width: min(54vw, 760px); gap: 18px; }
  .hero__eyebrow { font-size: 13px; }
  .hero__title { font-size: clamp(38px, 5vw, 76px); text-shadow: 3px 3px 0 var(--pink), -3px -3px 0 var(--cyan); }
  .hero__lede { font-size: clamp(17px, 1.3vw, 20px); }
  .hero__badge img { height: 54px; }
  .hero__qr { display: grid; grid-template-columns: auto auto; align-items: center; gap: 12px; }
  .hero__qr img { display: block; width: 92px; height: 92px; padding: 6px; background: var(--paper); border-radius: 8px; }
  .hero__qr figcaption {
    max-width: 13ch; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; line-height: 1.4; color: rgba(255, 255, 255, 0.85);
  }
  .hero__phone {
    display: block; flex: none; height: min(74svh, 680px); width: auto; rotate: 3deg;
    filter: drop-shadow(14px 18px 0 var(--pink)) drop-shadow(0 30px 40px rgba(0, 0, 0, 0.55));
  }
}

/* ---------- the sections after the film: solid ink under the words, with a soft top edge over the veil ---------- */
main > section, body > .sitefoot { position: relative; z-index: 2; }
.how, .place, .host, .next { padding-inline: var(--gutter); }
.place, .host, .next, body > .sitefoot { background: var(--ink); }
body > .sitefoot { margin-top: 0; }
.section-title, .how__title {
  margin: 0 0 clamp(28px, 5vw, 56px);
  font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: -0.05em; line-height: 0.95;
  font-size: clamp(2.1rem, 1.3rem + 3.6vw, 4.4rem);
}

/* ---------- how it works: three steps beside the real app ---------- */
.how { background: var(--ink); padding-top: 11svh; padding-bottom: 10svh; }
.how__grid { display: grid; gap: 40px; width: min(100%, 1180px); margin: 0 auto; }
.how__title { width: min(100%, 1180px); margin-inline: auto; }
.how__steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: 28px; }
.how__step { padding-top: 22px; border-top: 2px dashed rgba(255, 255, 255, 0.2); }
.how__step::before {
  counter-increment: step; content: "0" counter(step); display: block; margin-bottom: 10px;
  font-family: var(--display); font-weight: 800; font-size: 40px; line-height: 1; letter-spacing: -0.06em; color: var(--drop);
}
.how__step h3 { margin: 0 0 10px; font-family: var(--display); font-weight: 800; letter-spacing: -0.04em; font-size: clamp(1.45rem, 1.1rem + 1.3vw, 2.1rem); }
.how__step p { margin: 0; max-width: 38ch; font-size: 17px; line-height: 1.5; color: rgba(255, 255, 255, 0.82); }
.how__shots { display: flex; justify-content: center; gap: 4%; padding-bottom: 40px; }
.shot { display: block; height: auto; filter: drop-shadow(0 26px 34px rgba(0, 0, 0, 0.6)); }
.how__shots .shot { width: 46%; max-width: 300px; }
.shot--a { rotate: -3deg; }
.shot--b { rotate: 3deg; translate: 0 40px; }
@media (min-width: 900px) {
  .how__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: 64px; }
}

/* ---------- courts: the card from before, now with its own section heading ---------- */
.place { display: grid; justify-items: center; padding-block: 4svh 10svh; }
.place .modes { margin-top: 0; }
.piece h2 {
  font-family: var(--display); font-weight: 800; letter-spacing: -0.05em; line-height: 1.02; margin: 0 0 16px;
  font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem);
}
.piece h2 mark { background: none; color: inherit; position: relative; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.piece h2 mark::after { content: ""; position: absolute; left: -2%; right: -2%; bottom: -0.06em; height: 0.34em; z-index: -1; background: var(--drop); opacity: 0.85; transform: rotate(-1deg) skewX(-8deg); }
.piece .courts__cities { font-weight: 600; color: var(--ink); }
.courts__owner a { color: var(--ink); font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--pink); }
.courts__owner a:hover { background: var(--pink); color: var(--paper); }
.courts__owner a:focus-visible { outline: 2px dashed var(--ink); outline-offset: 3px; }

/* ---------- host a game: its own pitch, its own (cyan) button ---------- */
.host {
  display: grid; gap: 40px; justify-items: center; padding-block: 10svh;
  border-top: 2px dashed rgba(255, 255, 255, 0.14);
}
.host__copy { width: min(100%, 560px); }
.host__tag {
  display: inline-block; margin-bottom: 18px; padding: 5px 9px; rotate: -2deg;
  font-family: var(--mono); font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink); background: var(--cyan);
}
.host h2 { margin: 0 0 18px; font-family: var(--display); font-weight: 800; letter-spacing: -0.05em; line-height: 1; font-size: clamp(2rem, 1.2rem + 3vw, 3.6rem); }
.host h2 mark { background: none; color: inherit; position: relative; }
.host h2 mark::after { content: ""; position: absolute; left: -2%; right: -2%; bottom: -0.04em; height: 0.3em; z-index: -1; background: var(--cyan); opacity: 0.55; transform: rotate(-1deg) skewX(-8deg); }
.host p { margin: 0; font-size: 17px; line-height: 1.55; color: rgba(255, 255, 255, 0.84); }
.host__cta { display: inline-block; margin: 28px 0 16px; background: var(--cyan); box-shadow: 6px 6px 0 var(--paper); }
.host__cta:focus-visible { outline: 3px solid var(--paper); outline-offset: 4px; }
.host p.host__note { font-size: 14px; color: rgba(255, 255, 255, 0.66); }
.host__shot { width: min(62vw, 300px); rotate: -2deg; }
@media (min-width: 900px) {
  .host { grid-template-columns: minmax(0, 560px) minmax(0, 340px); justify-content: center; align-items: center; gap: 80px; }
}

/* ---------- what's next: three lines, the rest on /roadmap ---------- */
.next { display: grid; justify-items: center; padding-block: 10svh 2svh; border-top: 2px dashed rgba(255, 255, 255, 0.14); }
.next .roadmap__title { margin-bottom: 4svh; }
.next__list { list-style: none; margin: 0; padding: 0; width: min(100%, 860px); }
.next__item { display: grid; gap: 6px; padding: 18px 0; border-top: 2px dashed rgba(255, 255, 255, 0.18); }
.next__tag { font-family: var(--mono); font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--drop); }
.next__item p { margin: 0; font-size: 18px; line-height: 1.45; color: rgba(255, 255, 255, 0.88); }
@media (min-width: 700px) { .next__item { grid-template-columns: 170px 1fr; align-items: baseline; gap: 20px; } }
.next__more, .partners-line a {
  font-family: var(--mono); font-size: 13px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--lime); text-decoration: none;
}
.next__more { display: inline-flex; align-items: center; min-height: 44px; margin-top: 18px; }
.next__more:hover, .partners-line a:hover { text-decoration: underline; text-underline-offset: 4px; }
.next__more:focus-visible, .partners-line a:focus-visible { outline: 2px dashed var(--paper); outline-offset: 4px; }
.partners-line { margin: 7svh 0 0; text-align: center; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, 0.78); }
.partners-line a { display: inline-block; padding: 12px 0; }

/* ---------- /roadmap and /partners: no film, the header sits over plain ink ---------- */
.page-top { position: relative; z-index: 2; padding-top: clamp(96px, 14vh, 140px); }
.page .roadmap { padding-top: 0; }
.partners { display: grid; justify-items: center; padding-inline: var(--gutter); padding-bottom: 8svh; }
.partners .about__cta { margin-top: 0; width: min(100%, 880px); }
.partners .join__lede + .join__lede { margin-top: 10px; }

/* ---------- tap targets and the in-between widths ---------- */
.wordmark { display: inline-flex; align-items: center; min-height: 44px; }
.sound { min-width: 44px; min-height: 44px; justify-content: center; align-items: center; }
/* tablets: Spanish and Portuguese header links run long, so Find/Host wait for a wide screen (the hero and footer carry them) */
@media (min-width: 768px) and (max-width: 1099px) { .authlinks__wide { display: none; } }
/* tablets: no room for the phone beside a long headline; the app shows a scroll down, in How it works */
@media (min-width: 768px) and (max-width: 1023px) { .hero__phone { display: none; } .hero__copy { width: 100%; } }
.hero { overflow-x: clip; }

/* ---------- FAQ: the questions players type into Google, answered in the page's own voice ---------- */
.faq { background: var(--ink); padding: 10svh var(--gutter) 8svh; border-top: 2px dashed rgba(255, 255, 255, 0.14); }
.faq__title, .faq__list { width: min(100%, 860px); margin-inline: auto; }
.faq__item { border-top: 2px dashed rgba(255, 255, 255, 0.18); }
.faq__item:last-child { border-bottom: 2px dashed rgba(255, 255, 255, 0.18); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; padding: 20px 0;
  cursor: pointer; list-style: none;
  font-family: var(--display); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15;
  font-size: clamp(1.15rem, 1rem + 0.8vw, 1.6rem);
  transition: color 150ms ease-out;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+"; flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  border: 2px solid var(--drop); color: var(--drop); font-family: var(--mono); font-size: 20px; line-height: 1;
  transition: transform 150ms ease-out, background-color 150ms ease-out, color 150ms ease-out;
}
.faq__item[open] summary::after { transform: rotate(45deg); background: var(--drop); color: var(--ink); }
.faq__item summary:hover { color: var(--drop); }
.faq__item summary:focus-visible { outline: 2px dashed var(--drop); outline-offset: 4px; }
.faq__item p { margin: 0 0 22px; max-width: 62ch; font-size: 17px; line-height: 1.55; color: rgba(255, 255, 255, 0.82); }
.faq__item p a { color: var(--lime); text-underline-offset: 3px; }
.faq__item p a:focus-visible { outline: 2px dashed var(--lime); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .faq__item summary, .faq__item summary::after { transition: none; } }