/* Scoreyo - marketing site
   Dark, broadcast-flavoured, one hot pink. Palette ported verbatim from the app's
   Theme.swift so the site and the product are visibly the same object.
   Dark-locked on purpose: the app itself is dark-only. */

:root {
  /* Surfaces. On dark, elevation is lightness, not shadow. */
  --ground: #1e1e1e;
  --ground-deep: #171717;
  --card: #2a2a2c;
  --card-hi: #323236;
  --well: #3a3a3e;

  /* Text. Measured against --card: 12.3, 7.6 and 5.5 to 1. */
  --ink: #ededf2;
  --ink-2: #b9bdc7;
  --ink-3: #a4a8b2;

  /* One accent, everywhere. --pink-text is the lifted variant, because raw
     #F63D78 measures 4.0:1 on a card, just under the body-text bar. */
  --pink: #f63d78;
  --pink-press: #d92e65;
  --pink-text: #ff6b96;
  --green: #30d158;

  --line: rgb(255 255 255 / 0.10);
  --line-soft: rgb(255 255 255 / 0.06);

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --maxw: 1140px;
  --radius: 20px;
  --radius-sm: 14px;

  /* Strong curves. The built-in CSS easings are too weak to feel intentional. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* `height: auto` is load-bearing, not boilerplate. The markup carries real
   width/height attributes so the browser can reserve space and avoid layout
   shift, but without this the attribute height wins over the CSS width and
   every screenshot renders at double its correct height. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

::selection { background: var(--pink); color: #fff; }

:focus-visible {
  outline: 2px solid var(--pink-text);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Type scale ────────────────────────────────────────────────────────────
   SF at heavy weight with tight negative tracking is the app's own voice.
   No webfont request, and on Apple hardware the site is literally set in the
   same face as the product. */

h1, h2, h3 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.033em;
  line-height: 1.04;
}

h1 { font-size: clamp(2.6rem, 6.4vw, 4.4rem); }
h2 { font-size: clamp(2rem, 4.4vw, 3rem); }
h3 { font-size: 1.28rem; letter-spacing: -0.02em; line-height: 1.2; }

p { margin: 0; }

.lede {
  font-size: clamp(1.05rem, 2vw, 1.22rem);
  color: var(--ink-2);
  line-height: 1.55;
  max-width: 46ch;
}

.eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pink-text);
}

/* ── Nav ─────────────────────────────────────────────────────────────────── */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 68px;
  display: flex;
  align-items: center;
  background: rgb(30 30 30 / 0.72);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--line-soft);
}
@media (prefers-reduced-transparency: reduce) {
  .nav { background: var(--ground); backdrop-filter: none; }
}

.nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 800;
  font-size: 1.12rem;
  letter-spacing: -0.03em;
  text-decoration: none;
}
.brand svg { display: block; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 0.94rem;
  color: var(--ink-2);
}
.nav-links a {
  text-decoration: none;
  transition: color 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .nav-links a:hover { color: var(--ink); }
}
@media (max-width: 720px) {
  .nav-links { display: none; }
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  white-space: nowrap;
  padding: 0 22px;
  height: 52px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 160ms var(--ease-out);
}
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--pink);
  color: #fff;
}
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: var(--pink-press); }
}

.btn-ghost {
  background: var(--well);
  color: var(--ink);
}
@media (hover: hover) and (pointer: fine) {
  .btn-ghost:hover { background: var(--card-hi); }
}

.btn-sm { height: 42px; padding: 0 18px; font-size: 0.93rem; }

/* ── Hero ────────────────────────────────────────────────────────────────── */

.hero {
  padding: clamp(48px, 8vw, 88px) 0 clamp(56px, 8vw, 96px);
  overflow: hidden;
}

.hero .wrap {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 6vw, 72px);
  align-items: center;
}

.hero-copy { display: grid; gap: 26px; justify-items: start; }

.hero h1 { text-wrap: balance; }
.hero h1 em {
  font-style: normal;
  color: var(--pink);
}

.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }

.hero-shot {
  position: relative;
  justify-self: center;
  display: flex;
  justify-content: center;
}
/* The device is a 1:2.17 sliver, so a width alone would push the hero copy off
   the fold on short viewports. Capping against dvh keeps the headline and the
   CTA above the fold at every window height, and the phone simply scales. */
.hero-shot img {
  width: auto;
  max-width: min(320px, 76vw);
  max-height: min(600px, calc(100dvh - 280px));
  border-radius: 34px;
  border: 1px solid var(--line);
  box-shadow: 0 40px 90px rgb(0 0 0 / 0.55);
}
/* Pink bloom behind the device, tuned to sit under it rather than glow around
   the whole section. */
.hero-shot::before {
  content: "";
  position: absolute;
  inset: 12% -22% -8%;
  z-index: -1;
  background: radial-gradient(50% 45% at 50% 50%, rgb(246 61 120 / 0.30), transparent 72%);
  filter: blur(52px);
  pointer-events: none;
}

@media (max-width: 900px) {
  .hero { padding-top: 40px; }
  .hero .wrap { grid-template-columns: 1fr; text-align: left; }
  /* Copy leads on small screens. Putting the device first looked composed on a
     desktop preview but pushed the headline and the CTA off a phone's first
     screen, which is the one screen that has to do the work. The device now
     follows and is free to run past the fold. */
  .hero-shot img { max-height: 62vh; }
}

/* ── Claim row ───────────────────────────────────────────────────────────── */

.claims {
  border-block: 1px solid var(--line-soft);
  background: var(--ground-deep);
  padding: 30px 0;
}
.claims .wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.claim { display: grid; gap: 4px; }
.claim b {
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.claim span { font-size: 0.92rem; color: var(--ink-3); }

@media (max-width: 760px) {
  .claims .wrap { grid-template-columns: 1fr; gap: 16px; }
}

/* ── Generic section ─────────────────────────────────────────────────────── */

section { padding: clamp(64px, 10vw, 120px) 0; }

.section-head { display: grid; gap: 16px; max-width: 40ch; margin-bottom: 52px; }
.section-head p { color: var(--ink-2); font-size: 1.05rem; }

/* ── Split (feature) ─────────────────────────────────────────────────────── */

.split .wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}
.split-media { justify-self: center; width: min(320px, 76vw); }
.split-media img {
  width: 100%;
  border-radius: 32px;
  border: 1px solid var(--line);
  box-shadow: 0 30px 70px rgb(0 0 0 / 0.5);
}
.split-copy { display: grid; gap: 22px; }
.split-copy .lede { max-width: 42ch; }

.split.flip .split-media { order: 2; }

@media (max-width: 900px) {
  .split .wrap { grid-template-columns: 1fr; }
  .split.flip .split-media { order: 0; }
  .split-media { width: min(280px, 68vw); }
}

/* A short list that is not a bulleted dump. */
.points { display: grid; gap: 14px; }
.point {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 13px;
  align-items: start;
  font-size: 1rem;
  color: var(--ink-2);
}
.point svg { margin-top: 4px; flex: none; color: var(--pink-text); }
.point b { color: var(--ink); font-weight: 650; }

/* ── Bento ───────────────────────────────────────────────────────────────── */

.bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.tile {
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 30px;
  display: grid;
  gap: 10px;
  align-content: start;
}
.tile p { color: var(--ink-2); font-size: 0.97rem; }

/* The wide tile carries a real screenshot so the grid is not six text cards. */
.tile-wide {
  grid-column: span 2;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 28px;
  padding-right: 0;
  overflow: hidden;
}
.tile-wide .tile-text { display: grid; gap: 10px; }
.tile-wide img {
  width: 210px;
  border-radius: 18px 0 0 18px;
  border: 1px solid var(--line);
  border-right: 0;
  margin-bottom: -70px;
}

.tile-accent {
  background: linear-gradient(150deg, #3a1524, var(--card) 62%);
  border-color: rgb(246 61 120 / 0.22);
}
.tile-stat {
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--pink-text);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
  .bento { grid-template-columns: 1fr 1fr; }
  .tile-wide { grid-column: span 2; }
}
@media (max-width: 620px) {
  .bento { grid-template-columns: 1fr; }
  .tile-wide { grid-column: span 1; grid-template-columns: 1fr; padding-right: 30px; }
  .tile-wide img { width: 100%; max-width: 240px; border-radius: 18px; border-right: 1px solid var(--line); margin: 6px 0 -40px; }
}

/* ── Games strip ─────────────────────────────────────────────────────────── */

.games {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.game {
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  font-size: 0.96rem;
  font-weight: 600;
  color: var(--ink-2);
}
.game[data-lit] {
  background: var(--pink);
  border-color: var(--pink);
  color: #fff;
}

/* ── Pricing ─────────────────────────────────────────────────────────────── */

.plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: start;
}
.plan {
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 30px;
  display: grid;
  gap: 16px;
  align-content: start;
}
.plan-best {
  border-color: rgb(246 61 120 / 0.45);
  background: linear-gradient(160deg, #34121f, var(--card) 58%);
}
.plan-name { font-size: 0.95rem; font-weight: 700; color: var(--ink-2); }
.plan-price {
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.plan-price small {
  display: block;
  margin-top: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-3);
}
.plan ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.plan li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  font-size: 0.96rem;
  color: var(--ink-2);
}
.plan li svg { margin-top: 4px; color: var(--green); flex: none; }

@media (max-width: 860px) { .plans { grid-template-columns: 1fr; } }

.pricing-note {
  margin-top: 26px;
  font-size: 0.94rem;
  color: var(--ink-3);
  max-width: 60ch;
}

/* ── Closing ─────────────────────────────────────────────────────────────── */

.closing { text-align: center; }
.closing .wrap { display: grid; gap: 26px; justify-items: center; }
.closing h2 { max-width: 16ch; text-wrap: balance; }
.closing .lede { max-width: 44ch; }

/* ── Footer ──────────────────────────────────────────────────────────────── */

.footer {
  border-top: 1px solid var(--line-soft);
  padding: 40px 0;
  font-size: 0.92rem;
  color: var(--ink-3);
}
.footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  align-items: center;
  justify-content: space-between;
}
.footer nav { display: flex; flex-wrap: wrap; gap: 22px; }
.footer a { text-decoration: none; transition: color 160ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .footer a:hover { color: var(--ink); }
}

/* ── Scroll reveal ───────────────────────────────────────────────────────────
   Motion earns its place by giving the page a reading order: each block
   arrives as you reach it. Everything collapses to static under reduced
   motion, and to visible-by-default without JS. */

.reveal { opacity: 1; }

.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
}
.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ── Prose pages (privacy, support) ──────────────────────────────────────── */

.prose-page { padding: clamp(48px, 7vw, 84px) 0 clamp(64px, 9vw, 110px); }
.prose-page .wrap { max-width: 68ch; }
.prose-page h1 { margin-bottom: 28px; font-size: clamp(2.2rem, 5vw, 3rem); }
.prose-page h2 {
  margin: 44px 0 12px;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
}
.prose-page p { color: var(--ink-2); margin-bottom: 14px; }
.prose-page .lede { color: var(--ink); max-width: none; margin-bottom: 8px; }
.prose-page ul { margin: 0 0 14px; padding-left: 20px; color: var(--ink-2); display: grid; gap: 8px; }
.prose-page a { color: var(--pink-text); text-decoration: none; border-bottom: 1px solid rgb(255 107 150 / 0.35); }
@media (hover: hover) and (pointer: fine) {
  .prose-page a:hover { border-bottom-color: var(--pink-text); }
}
.prose-page .footer nav a { border: 0; }
.page-meta {
  margin: -14px 0 26px;
  font-size: 0.9rem;
  color: var(--ink-3);
}
/* Marks the one value only the owner can fill in. Deliberately loud so it
   cannot ship unnoticed. */
.todo {
  padding: 1px 7px;
  border-radius: 5px;
  background: rgb(246 61 120 / 0.16);
  border: 1px dashed rgb(246 61 120 / 0.5);
  color: var(--pink-text);
  font-size: 0.94em;
}

/* FAQ: prose answers dense enough to be quoted whole, kept to a readable measure. */
.faq .section-head { margin-bottom: 36px; }
.faq-list { display: grid; gap: 32px; max-width: 68ch; }
.faq-list h3 { font-size: 1.15rem; margin-bottom: 10px; }
.faq-list p { color: var(--ink-2); line-height: 1.65; }