/* Landing page only. Shared pieces (nav, store pill, footer) live in site.css.
   Brand v2 "Cinematic" (MasterClass-style): black, one crimson accent, Oswald caps.
   The hero is the app's own GTA 6 poster: type plus abstract stripes, no game art. */

/* ---------- Hero ---------- */
.hero .wrap { padding-top: clamp(32px, 6vh, 64px); }

.intro {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 20px 56px; align-items: end;
}
.intro h1 {
  margin: 0;
  font: 700 clamp(52px, 7.6vw, 104px)/.9 var(--ga-font-display);
  text-transform: uppercase; letter-spacing: -.005em;
}
.intro p { margin: 0 0 20px; font-size: 18px; line-height: 1.55; color: var(--ga-muted); max-width: 28em; }

/* The poster. Same recipe as the app's GTA 6 carousel card, scaled up. */
.poster {
  position: relative; overflow: hidden; isolation: isolate;
  margin-top: clamp(28px, 5vh, 48px);
  min-height: clamp(440px, 64vh, 620px);
  border-radius: var(--ga-r-sheet);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding: 76px 24px 28px; text-align: center;
  background: #000;
}
.poster .art {
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(110% 85% at 50% 0%, #3b3b3b 0%, #0d0d0d 62%, #000 100%);
}
.poster .art::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(115deg, transparent 0 26px, rgba(229, 48, 75, .17) 26px 29px);
}
/* darken the lower half so the numerals sit on near-black */
.poster .art::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, .55) 62%, rgba(0, 0, 0, .9) 100%);
}

.poster .badge {
  position: absolute; top: 26px; left: 50%; transform: translateX(-50%);
  background: var(--ga-accent); color: #fff;
  font: 700 19px/1 var(--ga-font-display); letter-spacing: .08em; text-transform: uppercase;
  padding: 7px 12px 8px; border-radius: 5px; white-space: nowrap;
}
.ptitle {
  font: 700 clamp(96px, min(17vw, 25vh), 232px)/.84 var(--ga-font-display);
  text-transform: uppercase; letter-spacing: -.01em;
}
.ptag { margin: 20px 0 0; font-size: 16px; color: rgba(255, 255, 255, .85); }

.clock {
  display: flex; justify-content: center; gap: clamp(20px, 5vw, 64px);
  margin-top: clamp(22px, 4vh, 40px);
  font: 600 clamp(44px, min(8vw, 12vh), 104px)/.9 var(--ga-font-display);
  font-variant-numeric: tabular-nums;
}
.clock .u { display: flex; flex-direction: column; align-items: center; min-width: 1.15em; }
.clock .u small {
  margin-top: 10px;
  font: 500 13px var(--ga-font-display); letter-spacing: .22em; text-transform: uppercase;
  color: var(--ga-muted);
}
.clock .sec > span { color: var(--ga-accent); }
.its-out {
  display: none; margin: 28px 0 0;
  font: 700 clamp(56px, 10vw, 120px)/.9 var(--ga-font-display); text-transform: uppercase; color: var(--ga-accent);
}
.launched .clock { display: none; }
.launched .its-out { display: block; }
.launched .badge { display: none; }
.pnote { margin: 22px 0 0; font-size: 13px; color: var(--ga-muted); }

/* ---------- Section heads ---------- */
.app h2, .answers h2, .get h2 {
  margin: 0;
  font: 700 clamp(36px, 5vw, 60px)/.95 var(--ga-font-display); text-transform: uppercase;
}
.lead { margin: 16px 0 0; max-width: 34em; color: var(--ga-muted); font-size: 17px; line-height: 1.55; }

/* ---------- The app: real screens in a row ---------- */
.app { padding: 112px 0 24px; scroll-margin-top: 68px; }
.screens {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px;
  margin: 48px 0 0; padding: 0; list-style: none;
}
.screens li { display: flex; flex-direction: column; align-items: center; }
.screens .cap { width: 240px; margin-top: 20px; }
.screens .cap b { display: block; font: 600 19px var(--ga-font-display); letter-spacing: .06em; text-transform: uppercase; }
.screens .cap p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--ga-muted); }

.phone {
  width: 240px; height: 502px; flex: none; border-radius: 38px; padding: 9px; background: #000;
  box-shadow: 0 0 0 1px #2a2a2a, 0 24px 60px rgba(0, 0, 0, .6);
}
.scr {
  width: 100%; height: 100%; border-radius: 30px; overflow: hidden; position: relative;
  display: flex; flex-direction: column; background: #000; color: #fff; font-family: var(--ga-font-body);
}
.scr .body { flex: 1; padding: 30px 13px 8px; overflow: hidden; }
.scr .topbar { display: flex; justify-content: space-between; align-items: center; min-height: 24px; }
.scr .topbar img { width: 22px; height: 22px; }
.scr .x { width: 24px; height: 24px; border-radius: 50%; background: var(--ga-card-hi); display: grid; place-items: center; font-size: 10px; }
.scr .t { font: 700 22px var(--ga-font-display); text-transform: uppercase; }
.scr .chip { font-size: 9.5px; font-weight: 600; background: var(--ga-card-hi); padding: 5px 9px; border-radius: 7px; }
.scr .h { font: 600 10px var(--ga-font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--ga-muted); margin: 16px 0 8px; }

/* mini posters use the hero's art */
.scr .pst, .scr .tile {
  position: relative; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 80% at 50% 0%, #3b3b3b 0%, #0d0d0d 60%), #000;
}
.scr .pst::before, .scr .tile::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: repeating-linear-gradient(115deg, transparent 0 14px, rgba(229, 48, 75, .18) 14px 16px);
}
.scr .pst {
  height: 236px; margin-top: 10px; border-radius: var(--ga-r-poster);
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding: 12px; text-align: center;
}
.scr .bdg { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); background: var(--ga-accent); font: 700 8px var(--ga-font-display); letter-spacing: .1em; padding: 3px 7px; border-radius: 4px; white-space: nowrap; }
.scr .pst b { font: 700 38px/.9 var(--ga-font-display); }
.scr .pst em { font-style: normal; font-size: 9.5px; opacity: .85; margin: 5px 0 10px; }
.scr .btns { display: flex; gap: 5px; width: 100%; }
.scr .btns i { flex: 1; font-style: normal; font-size: 9.5px; font-weight: 600; padding: 7px 0; border-radius: 7px; background: var(--ga-card-hi); }
.scr .btns i.w { background: #fff; color: #000; }
.scr .btns i.sq { flex: 0 0 28px; }
.scr .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.scr .tile { height: 78px; border-radius: var(--ga-r-card); padding: 9px; display: flex; flex-direction: column; justify-content: flex-end; }
.scr .tile b { font: 700 17px/1 var(--ga-font-display); }
.scr .tile small { font-size: 8.5px; color: rgba(255, 255, 255, .7); margin-top: 3px; }
.scr .tile.add { background: none; border: 1.5px dashed #3a3a3e; align-items: center; justify-content: center; }
.scr .tile.add::before { display: none; }
.scr .tile.add b { font-size: 20px; color: var(--ga-muted); }

.scr .gt { font: 700 42px/.9 var(--ga-font-display); text-align: center; margin-top: 14px; }
.scr .rule { width: 26px; height: 3px; border-radius: 2px; background: #fff; margin: 9px auto 7px; }
.scr .gs { font-size: 9.5px; color: var(--ga-muted); text-align: center; }
.scr .cd { display: flex; gap: 5px; margin-top: 14px; }
.scr .cd div { flex: 1; background: var(--ga-card); border-radius: 8px; padding: 7px 0 6px; text-align: center; }
.scr .cd b { display: block; font: 600 20px/1 var(--ga-font-display); font-variant-numeric: tabular-nums; }
.scr .cd .s b { color: var(--ga-accent); }
.scr .cd small { font: 500 7px var(--ga-font-display); letter-spacing: .14em; color: var(--ga-muted); }
.scr .seg { display: flex; border-bottom: 1px solid var(--ga-line); margin-top: 14px; }
.scr .seg span { flex: 1; text-align: center; font: 600 9.5px var(--ga-font-display); letter-spacing: .14em; padding: 7px 0; color: var(--ga-muted); }
.scr .seg span.on { color: #fff; box-shadow: inset 0 -2px 0 var(--ga-accent); }
.scr .row { display: flex; align-items: center; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--ga-line); }
.scr .row p { margin: 0; flex: 1; font: 600 11px/1.3 var(--ga-font-body); }
.scr .row em { display: block; font-style: normal; font-weight: 400; font-size: 9px; color: var(--ga-muted); margin-top: 2px; }
.scr .row span { color: var(--ga-muted); font-size: 12px; }
.scr .hint { font-size: 10px; color: var(--ga-muted); margin: 12px 0 0; }

.scr .bu { background: var(--ga-accent); padding: 8px 11px; border-radius: 14px 14px 4px 14px; font-size: 11px; width: fit-content; max-width: 80%; margin: 18px 0 0 auto; }
.scr .ba { background: var(--ga-card); padding: 10px 11px; border-radius: 14px 14px 14px 4px; font-size: 10.5px; line-height: 1.45; margin-top: 10px; max-width: 92%; }
.scr .ba em { display: block; font-style: normal; color: var(--ga-muted); margin-top: 6px; font-size: 9.5px; }
.scr .lbl { display: block; font: 600 8.5px var(--ga-font-display); letter-spacing: .12em; color: var(--ga-accent); margin-bottom: 5px; }
.scr .lbl.open { color: var(--ga-muted); }
.scr .askbar { position: absolute; left: 11px; right: 11px; bottom: 66px; background: var(--ga-card); border-radius: 18px; padding: 9px 12px; font-size: 10px; color: var(--ga-muted); }

.scr .tabs {
  flex: none; display: flex; justify-content: space-around; align-items: flex-end;
  padding: 8px 10px 15px; background: #0d0d0d; border-top: 1px solid #1a1a1a;
  font-size: 8.5px; color: #888;
}
.scr .tabs span { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 50px; }
.scr .tabs span i { width: 16px; height: 16px; border-radius: 4px; background: #333; display: block; }
.scr .tabs span.on { color: #fff; }
.scr .tabs span.on i { background: #fff; }
/* raised centre Ask button */
.scr .tabs .ask i {
  width: 34px; height: 34px; border-radius: 50%; margin-top: -20px;
  background: var(--ga-accent); box-shadow: 0 0 0 3px #000;
  display: grid; place-items: center; font: 700 11px var(--ga-font-display); font-style: normal; color: #fff;
}
.scr .tabs .ask.on { color: #fff; }

/* ---------- Straight answers ---------- */
.answers { padding: 104px 0 80px; }
.answers .wrap { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 32px 64px; align-items: start; }
.answers .lead { max-width: 24em; }
.qa { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--ga-line); }
.qa li { padding: 22px 0; border-top: 1px solid var(--ga-line); }
.qa .q { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.qa h3 { margin: 0; font: 600 19px/1.3 var(--ga-font-body); }
.qa p { margin: 8px 0 0; color: rgba(255, 255, 255, .8); line-height: 1.55; }
.status {
  flex: none; white-space: nowrap;
  font: 600 13px var(--ga-font-display); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ga-accent);
}
.status::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; margin-right: 8px; vertical-align: .12em;
}
.status.open { color: var(--ga-muted); }
.status.open::before { background: none; box-shadow: inset 0 0 0 1.5px currentColor; }
.qa-note { margin: 14px 0 0; font-size: 13px; color: var(--ga-muted); }

/* ---------- Request a game: the app's dashed ＋ tile, full size ---------- */
.request { padding: 0 0 80px; }
.req {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px 28px;
  padding: 30px 32px; border: 2px dashed #3a3a3e; border-radius: var(--ga-r-sheet);
  color: #fff; text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease;
}
.req:hover { color: #fff; border-color: var(--ga-accent); background: rgba(229, 48, 75, .05); }
.req .plus { font: 600 44px/1 var(--ga-font-display); color: var(--ga-muted); }
.req .h { display: block; font: 700 clamp(30px, 3.6vw, 42px)/1 var(--ga-font-display); text-transform: uppercase; }
.req .p { display: block; margin-top: 8px; color: var(--ga-muted); line-height: 1.5; }
.req .go {
  background: #fff; color: #000; padding: 12px 18px; border-radius: var(--ga-r-btn);
  font: 600 14px/1.1 var(--ga-font-display); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}

/* ---------- Get the app ---------- */
.get { padding: 0 0 80px; scroll-margin-top: 68px; }
.get .rule { border-top: 1px solid var(--ga-line); padding-top: 44px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.get h2 { font-size: clamp(28px, 3.4vw, 40px); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .screens {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 240px; gap: 20px;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter));
    padding: 0 var(--gutter) 12px; scroll-padding: 0 var(--gutter);
  }
  .screens li { scroll-snap-align: start; }
}
@media (max-width: 860px) {
  .intro, .answers .wrap { grid-template-columns: minmax(0, 1fr); }
  .req { grid-template-columns: minmax(0, 1fr); }
  .req .plus { display: none; }
  .req .go { justify-self: start; }
}
@media (max-width: 640px) {
  .intro p { font-size: 16px; }
  .poster { min-height: 420px; padding: 64px 14px 24px; border-radius: var(--ga-r-poster); }
  .poster .badge { top: 18px; }
  .ptag { font-size: 14px; }
  .clock .u small { font-size: 11px; letter-spacing: .16em; }
  .app { padding-top: 76px; }
  .answers { padding: 76px 0 64px; }
  .qa .q { flex-direction: column; gap: 8px; }
  .qa h3 { font-size: 18px; }
  .req { padding: 24px 20px; }
}