/* site/site.css — the look of the marketing pages (home, games, venues,
   pricing). Loaded last, after each page's own styles, so it has the final
   word. The games and the dashboard never load it.

   The idea: a light, quiet page that lets the real screens carry the
   color. White at the top with a real game in a TV, cool off-white paper
   below with white cards, navy ink and one royal blue accent. The closing
   band and the foot of the page are navy. Headings are set in Fraunces;
   everything else stays in Atkinson Hyperlegible, as in the games. */

:root {
  --navy: #14213d;
  --navy2: #1d2e55;
  --brand: #2456c9;
  --brand-hi: #3167dc;
  --brand-soft: #9cc3ff;
  --paper: #f7f9fc;
  --bg: #f7f9fc;
  --bg2: #eef2f8;
  --panel2: #f1f5fb;
  --line: #dfe5ee;
  --ink: #14213d;
  --accent: #2456c9;
  --accent2: #2456c9;
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --shadow-lg: 0 24px 60px rgba(13, 20, 43, 0.28), 0 4px 14px rgba(13, 20, 43, 0.16);
  --shadow-md: 0 10px 30px rgba(31, 42, 68, 0.10), 0 1px 3px rgba(31, 42, 68, 0.08);
}

html { scroll-behavior: smooth; overflow-x: clip; }
body { background: var(--paper); overflow-x: clip; }
main.wrap { max-width: 1180px; }
h1, h2, h3 { font-family: var(--display); font-weight: 650; letter-spacing: -0.01em; }
h3 { font-weight: 600; }

/* ---- the top bar, on the stage ---- */
nav.sitenav { padding: 1.1rem 0; z-index: 3; }
nav.sitenav .brand { color: var(--navy); font-family: var(--display); font-size: 1.3rem; letter-spacing: 0; }
nav.sitenav .brand img { height: 2rem; width: 2rem; }
nav.sitenav .links a { color: var(--navy); font-weight: 700; }
nav.sitenav .links a:hover { color: var(--brand); }
nav.sitenav .signin, nav.sitenav .signin.btn { background: transparent; border: 2px solid var(--navy); color: var(--navy); border-radius: 999px; box-shadow: none; }
nav.sitenav .signin:hover { border-color: var(--brand); color: var(--brand); }
nav.sitenav .navtoggle { background: transparent; border-color: var(--navy); color: var(--navy); }

/* ---- buttons ---- */
.btn { border-radius: 999px; transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease; }
.btn.gold { background: linear-gradient(180deg, var(--brand-hi), var(--brand)); border-color: var(--brand); color: #fff; box-shadow: 0 6px 18px rgba(36, 86, 201, 0.28); }
.btn.gold:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(36, 86, 201, 0.38); }
.btn.ghost { border-color: currentColor; }

/* ---- the stage: the first section of every page ---- */
.hero { position: relative; isolation: isolate; padding: 2.2rem 0 4rem; color: var(--navy); }
.hero .btn.big { font-size: 1.08rem; padding: 0.75rem 1.5rem; min-height: 3.2rem; }
.hero .cta { gap: 0.7rem; }
.hero::before { content: ''; position: absolute; z-index: -1; inset: -14rem -100vw 0;
  background:
    radial-gradient(900px 460px at 74% 40%, rgba(90, 150, 255, 0.22), transparent 70%),
    linear-gradient(180deg, #ffffff 0%, #eef3fb 100%); }
.hero::after { content: ''; position: absolute; z-index: -1; left: -100vw; right: -100vw; bottom: 0; height: 1px; background: var(--line); }
.hero h1 { color: var(--navy); font-size: clamp(2.1rem, 4.2vw, 3.2rem); line-height: 1.06; max-width: 18ch; }
.hero h1 em { font-style: italic; color: var(--brand); }
.hero p, .hero p.lead, .hero .muted, .hero .lead { color: #4a556b; }
.hero .btn.ghost { color: var(--navy); border-color: var(--navy); background: transparent; }
.hero .btn.ghost:hover { color: var(--brand); border-color: var(--brand); }
.hero a:not(.btn) { color: var(--brand); }
.facts { color: #36415a; font-weight: 400; gap: 0.5rem 1.4rem; font-size: 0.95rem; }
.facts li::before { content: '✓'; color: var(--brand); font-weight: 700; margin-right: 0.4em; }
.kicker2 { display: inline-block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand); margin-bottom: 0.9rem; }

/* a real screen, in a TV, with a phone beside it */
.stage { position: relative; margin: 0; }
.tvframe { background: #0b0f1c; border-radius: 18px; padding: 10px; box-shadow: var(--shadow-lg); border: 1px solid rgba(255, 255, 255, 0.12); }
.tvframe img { display: block; width: 100%; height: auto; border-radius: 9px; aspect-ratio: 16 / 9; object-fit: cover; }
.stage .phone { position: absolute; right: -1.2rem; bottom: -2.2rem; width: 24%; border-radius: 18px; border: 6px solid #0b0f1c; box-shadow: var(--shadow-lg); background: #0b0f1c; }
.stage .phone img { display: block; width: 100%; height: auto; border-radius: 12px; }
@media (max-width: 859px) { .hero { text-align: center; } .hero h1 { margin-left: auto; margin-right: auto; } .stage { margin: 0 0.6rem 1.6rem; } .stage .phone { right: -0.4rem; } }
@media (min-width: 860px) {
  .hero.split { display: grid; grid-template-columns: 1fr 1.15fr; gap: 3rem; align-items: center; text-align: left; padding-top: 2.4rem; padding-bottom: 4.6rem; }
  .hero.split h1, .hero.split p.lead { margin-left: 0; }
  .hero.split .cta, .hero.split .facts { justify-content: flex-start; }
}

/* ---- sections on paper ---- */
section { margin: 4.5rem 0; }
section > h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin-bottom: 0.4em; }
section > p.intro { font-size: 1.1rem; max-width: 58ch; margin-bottom: 2rem; }
section.center { text-align: center; }
.card { border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-md); }
.grid { gap: 1.2rem; }
.grid .card { transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease; }
.grid a.card:hover, .grid .card:has(a.more:hover) { transform: translateY(-3px); border-color: var(--brand); box-shadow: 0 16px 36px rgba(31, 42, 68, 0.14); }
.grid .card h3 { font-size: 1.2rem; }
.grid .card a.more { color: var(--accent2); text-decoration: none; }
.grid .card a.more::after { content: ' →'; }

/* the strip of numbers under the stage */
.proof { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem; margin: -1.6rem 0 0; position: relative; z-index: 2; }
.proof div { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 1.1rem 1rem; text-align: center; box-shadow: var(--shadow-md); }
.proof b { display: block; font-family: var(--display); font-size: 2rem; line-height: 1; color: var(--navy); }
.proof span { color: var(--muted); font-size: 0.95rem; }

/* real screens of the games */
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.4rem; }
.shot { margin: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-md); text-decoration: none; color: var(--ink); display: block; transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease; }
.shot:hover { transform: translateY(-4px); border-color: var(--brand); box-shadow: 0 18px 40px rgba(31, 42, 68, 0.16); }
.shot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--navy); border-bottom: 1px solid var(--line); }
.shot .cap { padding: 0.9rem 1.1rem 1.1rem; }
.shot h3 { margin: 0 0 0.2rem; font-size: 1.2rem; }
.shot p { margin: 0; color: var(--muted); font-size: 0.98rem; }
.shots.wide { grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); }
.signs { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 1rem; margin: 2rem 0 0; }
.signs img { height: 3.1rem; width: auto; filter: drop-shadow(0 3px 6px rgba(31, 42, 68, 0.2)); }
.more-line { text-align: center; margin-top: 1.6rem; }

/* a picture beside its words */
.feature { display: grid; gap: 2.4rem; align-items: center; }
@media (min-width: 860px) { .feature { grid-template-columns: 1.1fr 1fr; } .feature.flip > :first-child { order: 2; } }
.feature h2 { text-align: left; }
.feature ul { padding-left: 1.2rem; } .feature li { margin: 0.5rem 0; }
.feature .tvframe { box-shadow: var(--shadow-md); }

/* venues */
.grid.venues a.card { position: relative; padding-left: 4.4rem; }
.grid.venues a.card h3 { display: block; }
.grid.venues a.card .vic { position: absolute; left: 1.1rem; top: 1.2rem; width: 2.5rem; height: 2.5rem; border-radius: 12px; display: grid; place-items: center; font-size: 1.35rem; background: #e8f0ff; border: 1px solid #c5d8fb; }

/* steps */
.steps .card h3::before { background: var(--brand); color: #fff; font-family: var(--font); }

/* the price */
.pricecard { max-width: 30rem; margin: 0 auto; text-align: center; background: var(--panel); border: 2px solid var(--brand); border-radius: 26px; padding: 2rem 2rem 2.2rem; box-shadow: var(--shadow-md); }
.pricecard .amt { font-family: var(--display); font-size: 4.2rem; line-height: 1; color: var(--navy); }
.pricecard .amt small { font-family: var(--font); font-size: 1rem; color: var(--muted); font-weight: 400; }
.pricecard ul { list-style: none; padding: 0; margin: 1.2rem 0 1.6rem; text-align: left; display: inline-block; }
.pricecard li { margin: 0.4rem 0; } .pricecard li::before { content: '✓'; color: var(--ok); font-weight: 700; margin-right: 0.6em; }
.plans .plan { border-radius: 26px; border: 2px solid var(--brand); }
.plans .price { font-family: var(--display); color: var(--navy); }

/* questions */
.faq { max-width: 52rem; margin-left: auto; margin-right: auto; }
.faq details { border: 1px solid var(--line); border-radius: 16px; background: var(--panel); padding: 0.9rem 1.2rem; margin: 0.6rem 0; }
.faq details[open] { border-color: var(--brand); box-shadow: var(--shadow-md); }
.faq summary { font-size: 1.08rem; }

/* the closing band and the foot of the page: back on the stage */
.band { position: relative; isolation: isolate; background: none; color: #fff; padding: 3.4rem 1.5rem; border-radius: 28px; overflow: hidden; }
.band::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(700px 300px at 50% 0%, rgba(90, 150, 255, 0.22), transparent 70%), linear-gradient(180deg, var(--navy2), var(--navy)); }
.band .btn.gold { background: #fff; color: var(--navy); border-color: #fff; box-shadow: none; }
.band h2 { color: #fff; } .band .muted, .band p { color: #cfd6e8; }
footer { background: var(--navy); color: #aab4cc; margin-top: 4rem; padding: 3rem 1.2rem 2.4rem; }
footer a { color: #dfe5f3; text-decoration: none; } footer a:hover { color: var(--brand-soft); }
footer .venuelinks b { color: #fff; font-family: var(--display); font-size: 1.1rem; }
footer nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; margin: 1.2rem 0; }

/* the games page: each card opens with its real screen */
.card:has(> .cardshot) { padding-top: 0; overflow: hidden; }
.cardshot { display: block; width: calc(100% + 2 * var(--card-pad, 1.4rem)); max-width: none; margin: 0 calc(-1 * var(--card-pad, 1.4rem)) 0.9rem; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-bottom: 1px solid var(--line); background: var(--navy); }
main.wrap > h2 { margin-top: 3.4rem; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.hero > h1:only-of-type { margin-top: 0.2em; }

@media (max-width: 600px) { .proof { grid-template-columns: 1fr 1fr; gap: 0.6rem; } .proof b { font-size: 1.6rem; } .shots { grid-template-columns: 1fr; } .signs img { height: 2.3rem; } section { margin: 3.2rem 0; } }

/* ---- game cards: a lit screen, the title sign, a color each ---- */
.shot, .card:has(> .cardshot) { --tint: #2456c9; position: relative; background: linear-gradient(180deg, #ffffff 55%, #f1f5fc); border: 1px solid var(--line); border-bottom: 5px solid var(--tint); border-radius: 22px; box-shadow: 0 14px 34px rgba(20, 33, 61, 0.12), 0 2px 6px rgba(20, 33, 61, 0.08); overflow: hidden; }
.shots > :nth-child(5n+2), .grid > .card:nth-child(5n+2) { --tint: #b23a3a; }
.shots > :nth-child(5n+3), .grid > .card:nth-child(5n+3) { --tint: #2e7d4f; }
.shots > :nth-child(5n+4), .grid > .card:nth-child(5n+4) { --tint: #c9962a; }
.shots > :nth-child(5n+5), .grid > .card:nth-child(5n+5) { --tint: #6b4c8f; }
.shot:hover, .grid .card:has(> .cardshot):hover { transform: translateY(-5px); border-color: var(--tint); box-shadow: 0 22px 46px color-mix(in srgb, var(--tint) 26%, transparent), 0 4px 10px rgba(20, 33, 61, 0.10); }
/* the screenshot sits in a dark bezel, like a TV on the wall */
.shot > img:first-child, .cardshot { display: block; box-sizing: border-box; aspect-ratio: 16 / 9; object-fit: cover; border: 0.55rem solid #101a33; border-bottom-width: 0.8rem; border-radius: 22px 22px 14px 14px; background: #101a33; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.shot > img:first-child { width: 100%; height: auto; }
.cardshot { width: calc(100% + 2 * var(--card-pad, 1.4rem)); margin: 0 calc(-1 * var(--card-pad, 1.4rem)) 0; border-bottom-width: 0.8rem; }
.modes { display: inline-block; margin-top: 0.2rem; padding: 0.2rem 0.7rem; border-radius: 999px; background: color-mix(in srgb, var(--tint, #2456c9) 10%, #fff); color: color-mix(in srgb, var(--tint, #2456c9) 80%, #14213d); border: 1px solid color-mix(in srgb, var(--tint, #2456c9) 28%, #fff); }

/* a venue page lists its games as chips, in type */
.gchip { display: inline-block; margin: 0.25rem; padding: 0.35rem 0.9rem; border-radius: 999px; background: #e8f0ff; border: 1px solid #c5d8fb; color: #14213d; font-weight: 700; font-size: 0.95rem; }
/* a hero that is not split keeps its headline centred over the centred text below it */
.hero:not(.split) h1 { margin-left: auto; margin-right: auto; text-align: center; }