/* ==========================================================================
   Squash Score — squashscore.app
   --------------------------------------------------------------------------
   The palette is the app's palette, which is the court's palette: plaster
   walls, red markings, a black ball with two yellow dots.

   THEMING. Brand colours are raw values, defined once. Everything the page
   actually uses is a semantic token assigned from them, so a theme is a short
   list of reassignments rather than a second stylesheet.

   The hero, the trust strip and the section bands all follow the theme — a
   light theme whose first screenful is dark is not a light theme.

   Two panels stay dark in both: the privacy band and the footer. Those are
   deliberate inversions rather than leftovers — a dark panel is how a light
   page says "this bit is different", and a dark footer closes the page. Text
   on those two is light either way, which is why --on-dark is not themed.

   No web fonts. The audience is on Apple hardware, where `ui-rounded` is
   SF Pro Rounded — the face the app itself is set in. A font CDN would also
   put a third-party request on a site whose whole pitch is that nothing is
   collected.
   ========================================================================== */

:root {
  /* ---- Brand. Raw, unthemed. -------------------------------------------- */
  --plaster:       #F4EFE4;
  --plaster-deep:  #E7E0D0;
  --plaster-line:  #DED5C0;
  --ink:           #16161A;
  --ink-deep:      #0E0E10;
  --ink-soft:      #2E2E35;
  --red:           #C01B2C;
  --red-deep:      #8E1524;
  --red-bright:    #F04455;
  --yellow:        #F5C518;
  --cream:         #EDE7DA;

  /* Text on the always-dark bands. The same in both themes, by design. */
  --on-dark:       #F4F1EA;
  --on-dark-soft:  rgba(244, 241, 234, .68);
  --on-dark-faint: rgba(244, 241, 234, .52);  /* 5.2:1 on the dark panels */
  --on-dark-line:  rgba(244, 241, 234, .10);
  --on-dark-edge:  rgba(244, 241, 234, .28);

  /* ---- Light theme ------------------------------------------------------ */
  color-scheme: light;

  --bg:            var(--plaster);
  --bg-band:       var(--plaster-deep);   /* alternating section */
  --band-line:     var(--plaster-line);
  --bg-hero:       #F7F3EA;               /* a shade brighter than the ground */
  --bg-strip:      var(--plaster-deep);
  --bg-quiet:      var(--ink);            /* the privacy panel: stays dark */
  --bg-footer:     var(--ink-deep);       /* so does the footer */

  /* Hero furniture. The court lines and the two glows are the hero's identity
     in both themes; only their weight changes. */
  --hero-line-a:   rgba(192, 27, 44, .16);
  --hero-line-b:   rgba(192, 27, 44, .09);
  --hero-glow-a:   rgba(192, 27, 44, .13);
  --hero-glow-b:   rgba(245, 197, 24, .15);
  --hero-accent:   var(--red);            /* the highlighted half of the headline */
  --hero-badge-bg: rgba(192, 27, 44, .07);
  --hero-badge-ln: rgba(192, 27, 44, .26);
  --hero-badge-ink: var(--red);
  --strip-tick:    var(--red);
  --strap-a:       #45454F;
  --strap-b:       #2E2E36;

  --surface:       #FFFFFF;               /* cards, FAQ rows, the price panel */
  --surface-soft:  rgba(255, 255, 255, .62);

  --text:          #16161A;
  --text-soft:     rgba(22, 22, 26, .66);
  --text-faint:    rgba(22, 22, 26, .62);   /* 4.9:1 — fine print still has to be readable */

  --line:          rgba(22, 22, 26, .12);
  --line-strong:   rgba(22, 22, 26, .20);
  --hover-wash:    rgba(22, 22, 26, .05);

  --accent:        var(--red);            /* eyebrows, icons, links */
  --accent-tint:   rgba(192, 27, 44, .09);
  --btn:           var(--red);
  --btn-hover:     #A91726;
  --btn-ink:       #FFFFFF;
  --btn-glow:      rgba(192, 27, 44, .8);

  --nav-bg:        rgba(244, 239, 228, .95);

  --pending-bg:    #22222A;               /* the not-yet-on-the-App-Store pill */
  --pending-line:  rgba(244, 241, 234, .22);

  --device-frame:  #1B1B20;               /* the bezel drawn around screenshots */
  --shadow:        rgba(22, 22, 26, .7);
  --shadow-strong: rgba(22, 22, 26, .85);

  /* ---- Structure -------------------------------------------------------- */
  --radius:        18px;
  --radius-lg:     26px;
  --nav-h:         64px;
  --shell:         1160px;
  --gutter:        clamp(20px, 5vw, 40px);

  --font: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont,
          "Segoe UI Variable Display", "Segoe UI", system-ui, Roboto,
          "Helvetica Neue", Arial, sans-serif;

  --ease: cubic-bezier(.22, .68, 0, 1);
}

/* --------------------------------------------------------------------------
   Dark theme
   --------------------------------------------------------------------------
   Written once as a custom property list and applied from two places: the
   system preference (unless the visitor has explicitly chosen light) and an
   explicit choice of dark. Both blocks have to exist for the toggle to be able
   to win in both directions.
   -------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg:            #0E0E10;
    --bg-band:       #15151A;
    --band-line:     rgba(244, 241, 234, .07);
    --bg-hero:       #08080A;
    --bg-strip:      #15151A;
    --bg-quiet:      #17171C;
    --bg-footer:     #08080A;

    --hero-line-a:   rgba(192, 27, 44, .30);
    --hero-line-b:   rgba(192, 27, 44, .16);
    --hero-glow-a:   rgba(192, 27, 44, .42);
    --hero-glow-b:   rgba(245, 197, 24, .16);
    --hero-accent:   var(--yellow);
    --hero-badge-bg: rgba(245, 197, 24, .12);
    --hero-badge-ln: rgba(245, 197, 24, .34);
    --hero-badge-ink: var(--yellow);
    --strip-tick:    var(--yellow);
    --strap-a:       #1B1B20;
    --strap-b:       #101014;

    --surface:       #1A1A20;
    --surface-soft:  rgba(255, 255, 255, .045);

    --text:          #F4F1EA;
    --text-soft:     rgba(244, 241, 234, .68);
    --text-faint:    rgba(244, 241, 234, .52);

    --line:          rgba(244, 241, 234, .11);
    --line-strong:   rgba(244, 241, 234, .22);
    --hover-wash:    rgba(244, 241, 234, .06);

    /* The app's own dark-mode red. #C01B2C is too dark to read on black. */
    --accent:        var(--red-bright);
    --accent-tint:   rgba(240, 68, 85, .14);
    --btn:           #CE1F31;
    --btn-hover:     #E02537;
    --btn-ink:       #FFFFFF;
    --btn-glow:      rgba(206, 31, 49, .55);

    --nav-bg:        rgba(14, 14, 16, .92);

    --pending-bg:    #2C2C35;
    --pending-line:  rgba(244, 241, 234, .22);

    --device-frame:  #33333B;   /* lifted, or the screenshots melt into the page */
    --shadow:        rgba(0, 0, 0, .85);
    --shadow-strong: rgba(0, 0, 0, .95);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:            #0E0E10;
  --bg-band:       #15151A;
  --band-line:     rgba(244, 241, 234, .07);
  --bg-hero:       #08080A;
  --bg-strip:      #15151A;
  --bg-quiet:      #17171C;
  --bg-footer:     #08080A;

  --hero-line-a:   rgba(192, 27, 44, .30);
  --hero-line-b:   rgba(192, 27, 44, .16);
  --hero-glow-a:   rgba(192, 27, 44, .42);
  --hero-glow-b:   rgba(245, 197, 24, .16);
  --hero-accent:   var(--yellow);
  --hero-badge-bg: rgba(245, 197, 24, .12);
  --hero-badge-ln: rgba(245, 197, 24, .34);
  --hero-badge-ink: var(--yellow);
  --strip-tick:    var(--yellow);
  --strap-a:       #1B1B20;
  --strap-b:       #101014;

  --surface:       #1A1A20;
  --surface-soft:  rgba(255, 255, 255, .045);

  --text:          #F4F1EA;
  --text-soft:     rgba(244, 241, 234, .68);
  --text-faint:    rgba(244, 241, 234, .52);

  --line:          rgba(244, 241, 234, .11);
  --line-strong:   rgba(244, 241, 234, .22);
  --hover-wash:    rgba(244, 241, 234, .06);

  --accent:        var(--red-bright);
  --accent-tint:   rgba(240, 68, 85, .14);
  --btn:           #CE1F31;
  --btn-hover:     #E02537;
  --btn-ink:       #FFFFFF;
  --btn-glow:      rgba(206, 31, 49, .55);

  --nav-bg:        rgba(14, 14, 16, .92);

  --pending-bg:    #2C2C35;
  --pending-line:  rgba(244, 241, 234, .22);

  --device-frame:  #33333B;
  --shadow:        rgba(0, 0, 0, .85);
  --shadow-strong: rgba(0, 0, 0, .95);
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 20px);
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* `height: auto` matters: the screenshots carry width/height attributes for
   layout stability, and without this the attribute wins over a CSS width and
   every watch shot comes out 496px tall. */
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; }

h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.08;
  letter-spacing: -.022em;
  font-weight: 800;
}
p { margin: 0; }

/* Visible focus, everywhere, without a ring on mouse clicks. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: -100px; left: 12px; z-index: 200;
  background: var(--ink); color: var(--on-dark);
  padding: 12px 18px; border-radius: 10px; font-weight: 700;
  text-decoration: none; transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; }

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(64px, 9vw, 120px); }
.section--tight { padding-block: clamp(48px, 6vw, 76px); }

.section-head { max-width: 680px; margin-bottom: clamp(36px, 5vw, 56px); }
.section-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}
.eyebrow::before {
  content: ""; width: 22px; height: 2px; border-radius: 2px;
  background: currentColor;
}

h2.title { font-size: clamp(30px, 4.4vw, 46px); }
h3.title { font-size: clamp(21px, 2.4vw, 26px); letter-spacing: -.018em; }

.lede {
  margin-top: 18px;
  font-size: clamp(17px, 1.7vw, 19px);
  color: var(--text-soft);
  max-width: 60ch;
}
.section-head--center .lede { margin-inline: auto; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  padding: 15px 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 16px; font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .22s var(--ease), background-color .22s var(--ease),
              border-color .22s var(--ease), box-shadow .22s var(--ease),
              color .22s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--btn); color: var(--btn-ink);
  box-shadow: 0 6px 20px -8px var(--btn-glow);
}
.btn--primary:hover { background: var(--btn-hover); box-shadow: 0 12px 28px -10px var(--btn-glow); }

.btn--ghost {
  background: transparent; color: var(--text);
  border-color: var(--line-strong);
}
.btn--ghost:hover { background: var(--hover-wash); border-color: var(--text); }

/* Sits on one of the always-dark bands, so it is not themed. */
.btn--onDark {
  background: rgba(244, 241, 234, .1); color: var(--on-dark);
  border-color: var(--on-dark-edge);
}
.btn--onDark:hover { background: rgba(244, 241, 234, .18); border-color: rgba(244, 241, 234, .5); }

.btn--sm { padding: 10px 18px; font-size: 15px; }
.btn--lg { padding: 18px 32px; font-size: 17px; }

.btn__apple { width: 17px; height: 20px; flex: none; margin-top: -2px; }

/* Until the App Store record exists these links have nowhere to go, so they
   present as a status rather than a dead link. See assets/js/site.js.
   Outlined as well as filled, because the same neutral pill has to hold its
   shape on the dark hero, on a white card and on a dark one. */
.btn.is-pending { cursor: default; }
.btn--primary.is-pending {
  background: var(--pending-bg);
  color: var(--on-dark);
  border-color: var(--pending-line);
  box-shadow: none;
}
.btn--primary.is-pending:hover { background: var(--pending-bg); transform: none; }
.btn--onDark.is-pending:hover, .btn--ghost.is-pending:hover { transform: none; }

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */

.nav {
  position: sticky; top: 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .3s var(--ease), border-color .3s var(--ease),
              box-shadow .3s var(--ease);
}
.nav.is-scrolled {
  /* Nearly opaque rather than glassy: the bar spends its first few hundred
     pixels of scroll over a dark hero, and a translucent plaster over black
     turns muddy grey. */
  background: var(--nav-bg);
  border-bottom-color: var(--line);
  box-shadow: 0 8px 28px -22px var(--shadow);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .nav.is-scrolled {
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
  }
}

/* There used to be a `.nav--overHero` variant here that forced the bar
   light-on-dark while it sat over the hero. It is gone: now that the hero
   follows the theme, the bar's ordinary themed colours are already right over
   it, in both themes and at every scroll position. */

.nav__inner { display: flex; align-items: center; gap: 14px; width: 100%; }

.brand {
  display: inline-flex; align-items: center; gap: 11px;
  text-decoration: none; font-weight: 800;
  font-size: 17px; letter-spacing: -.018em;
  margin-right: auto;
}
.brand__mark {
  width: 32px; height: 32px; border-radius: 9px; flex: none;
  transition: transform .35s var(--ease);
}
.brand:hover .brand__mark { transform: rotate(-6deg) scale(1.05); }

.nav__links { display: flex; align-items: center; gap: 4px; }
.nav__link {
  position: relative;
  padding: 8px 14px;
  font-size: 15px; font-weight: 600;
  color: var(--text-soft);
  text-decoration: none;
  border-radius: 10px;
  transition: color .2s var(--ease);
}
.nav__link:hover { color: var(--text); }
.nav__link::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px;
  height: 2px; border-radius: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .28s var(--ease);
}
.nav__link:hover::after { transform: scaleX(1); }

/* Theme toggle. Shows the theme it would switch *to*. */
.theme-toggle {
  flex: none;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: background-color .22s var(--ease), border-color .22s var(--ease),
              color .22s var(--ease), transform .22s var(--ease);
}
.theme-toggle:hover { background: var(--hover-wash); border-color: var(--text); }
.theme-toggle:active { transform: scale(.94); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle.is-dark .icon-sun { display: block; }
.theme-toggle.is-dark .icon-moon { display: none; }

/* The section links are the first thing to go: below this the bar cannot hold
   the wordmark, four links, the theme toggle and the store button on one row,
   and they start stacking. Everything they point at is in the footer too. */
@media (max-width: 920px) {
  .nav__links { display: none; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  margin-top: calc(var(--nav-h) * -1);
  padding-top: calc(var(--nav-h) + clamp(48px, 7vw, 84px));
  padding-bottom: clamp(64px, 8vw, 104px);
  background: var(--bg-hero);
  color: var(--text);
  overflow: hidden;
  isolation: isolate;
}

/* Court markings: the red lines off the app icon, drifting very slowly. */
.hero__lines {
  position: absolute; inset: -10% -10% -10% -10%;
  z-index: -2;
  opacity: .5;
  background-image:
    linear-gradient(to right, var(--hero-line-a) 2px, transparent 2px),
    linear-gradient(to bottom, var(--hero-line-b) 2px, transparent 2px);
  background-size: 92px 92px;
  mask-image: radial-gradient(120% 90% at 70% 20%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(120% 90% at 70% 20%, #000 0%, transparent 72%);
  animation: drift 60s linear infinite;
}
@keyframes drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-92px, -92px, 0); }
}

.hero__glow {
  position: absolute; z-index: -1;
  width: min(760px, 92vw); aspect-ratio: 1;
  right: -8%; top: -22%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--hero-glow-a) 0%, transparent 62%);
  filter: blur(30px);
  animation: pulse 12s ease-in-out infinite;
}
.hero__glow--two {
  right: auto; left: -20%; top: auto; bottom: -34%;
  width: min(560px, 80vw);
  background: radial-gradient(circle, var(--hero-glow-b) 0%, transparent 64%);
  animation-duration: 16s; animation-direction: alternate-reverse;
}
@keyframes pulse {
  0%, 100% { opacity: .75; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.08); }
}

.hero__grid {
  display: grid;
  /* Weighted towards the copy: the headline is two full sentences and both
     have to sit on one line each. The watch needs about 300px and gets more
     than that from the remainder. */
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(32px, 6vw, 72px);
  align-items: center;
}

.hero__copy { max-width: 620px; }

.hero h1 {
  /* Sized to the copy column, not the viewport: the longest line —
     "Your watch keeps score." — has to hold one row in a column about 580px
     wide, and it measures ~533px here. */
  font-size: clamp(33px, 4.3vw, 50px);
  letter-spacing: -.03em;
  line-height: 1.04;
}
.hero h1 em {
  font-style: normal;
  color: var(--hero-accent);
}
.hero__sub {
  margin-top: 22px;
  font-size: clamp(17px, 1.9vw, 20px);
  line-height: 1.55;
  color: var(--text-soft);
  max-width: 48ch;
}
.hero__cta {
  margin-top: 34px;
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
}
.hero__note {
  margin-top: 20px;
  font-size: 14px; color: var(--text-faint);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.hero__note strong { color: var(--text); font-weight: 700; }

.hero__badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 13px 6px 9px;
  border-radius: 999px;
  background: var(--hero-badge-bg);
  border: 1px solid var(--hero-badge-ln);
  color: var(--hero-badge-ink);
  font-size: 13px; font-weight: 700;
  letter-spacing: .02em;
  margin-bottom: 22px;
}
.hero__badge svg { width: 15px; height: 15px; }

.hero__stage { display: flex; justify-content: center; }

@media (max-width: 940px) {
  .hero__grid { grid-template-columns: 1fr; text-align: center; }
  .hero__copy { margin-inline: auto; }
  .hero__sub { margin-inline: auto; }
  .hero__cta { justify-content: center; }
  .hero__note { justify-content: center; }
  .hero__stage { order: -1; margin-bottom: 12px; }
}

/* --------------------------------------------------------------------------
   The watch
   --------------------------------------------------------------------------
   Everything inside the screen is sized off --sw, so one variable scales the
   whole mock. Proportions come from the real 46 mm capture: a 416 x 496 screen
   with a 54 pt score. The colours are the app's dark appearance in both site
   themes, because that is what the app looks like by default.
   -------------------------------------------------------------------------- */

.watch {
  --sw: clamp(196px, 24vw, 264px);
  --sh: calc(var(--sw) * 496 / 416);
  --bezel: calc(var(--sw) * .075);

  position: relative;
  width: calc(var(--sw) + var(--bezel) * 2);
  animation: float 7s ease-in-out infinite;
  animation-delay: 1.1s;
}
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-13px) rotate(-.5deg); }
}

/* Straps, fading out rather than ending in a hard edge. */
.watch__band {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: calc(var(--sw) * .62);
  height: calc(var(--sw) * .46);
  background: linear-gradient(180deg, var(--strap-a), var(--strap-b));
  z-index: 0;
}
.watch__band--top {
  bottom: calc(100% - var(--sw) * .12);
  border-radius: calc(var(--sw) * .1) calc(var(--sw) * .1) 6px 6px;
  mask-image: linear-gradient(to top, #000 0%, transparent 88%);
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 88%);
}
.watch__band--bottom {
  top: calc(100% - var(--sw) * .12);
  border-radius: 6px 6px calc(var(--sw) * .1) calc(var(--sw) * .1);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 88%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 88%);
}

.watch__case {
  position: relative; z-index: 1;
  padding: var(--bezel);
  border-radius: calc(var(--sw) * .30);
  background:
    linear-gradient(150deg, #55555e 0%, #26262c 26%, #17171b 52%, #35353d 78%, #1d1d22 100%);
  box-shadow:
    0 2px 1px rgba(255, 255, 255, .22) inset,
    0 -2px 2px rgba(0, 0, 0, .5) inset,
    0 42px 70px -34px rgba(0, 0, 0, .95),
    0 10px 26px -12px rgba(0, 0, 0, .7);
}

.watch__crown, .watch__button {
  position: absolute; right: calc(var(--bezel) * -.42);
  background: linear-gradient(90deg, #4a4a53, #2a2a31 55%, #3d3d45);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
.watch__crown {
  top: 27%;
  width: calc(var(--sw) * .036);
  height: calc(var(--sw) * .12);
  border-radius: calc(var(--sw) * .014);
}
.watch__crown::after {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit;
  background: repeating-linear-gradient(180deg,
    rgba(255, 255, 255, .16) 0 1px, transparent 1px 3px);
}
.watch__button {
  top: 46%;
  width: calc(var(--sw) * .026);
  height: calc(var(--sw) * .1);
  border-radius: calc(var(--sw) * .012);
}

.watch__screen {
  position: relative;
  width: var(--sw); height: var(--sh);
  border-radius: calc(var(--sw) * .245);
  overflow: hidden;
  background: var(--ink-deep);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .9);
}

/* A single soft highlight across the glass. Anything stronger fights the UI. */
.watch__glare {
  position: absolute; inset: var(--bezel);
  border-radius: calc(var(--sw) * .245);
  pointer-events: none;
  background: linear-gradient(128deg,
    rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .05) 22%,
    transparent 46%);
  z-index: 5;
}

/* --- the app's own screens ------------------------------------------------ */

.face {
  position: absolute; inset: 0;
  transition: opacity .5s var(--ease);
}
.face[hidden] { display: block; opacity: 0; pointer-events: none; }

.face__half {
  position: absolute; top: 0; bottom: 0; width: 50%;
  overflow: hidden;
}
.face__half--one { left: 0; background: #8E1524; }
.face__half--two { right: 0; background: #2E2E35; }

/* The point flash: the app washes the whole half with its own colour and lets
   it fade. The ring is the site's addition — it says "tap" to someone who has
   never held the app. */
.face__half .flash {
  position: absolute; inset: 0;
  background: currentColor;
  opacity: 0;
}
.face__half--one { color: #FFF1F2; }
.face__half--two { color: #EDE7DA; }
.face__half.is-hit .flash { animation: wash .55s ease-out; }
@keyframes wash {
  0%   { opacity: .26; }
  100% { opacity: 0; }
}

.face__ring {
  position: absolute; top: 52%; left: 50%;
  width: calc(var(--sw) * .3); aspect-ratio: 1;
  margin: calc(var(--sw) * -.15) 0 0 calc(var(--sw) * -.15);
  border-radius: 50%;
  border: 2px solid currentColor;
  opacity: 0;
  pointer-events: none;
}
.face__half.is-hit .face__ring { animation: ripple .6s var(--ease); }
@keyframes ripple {
  0%   { opacity: .55; transform: scale(.3); }
  100% { opacity: 0;   transform: scale(1.5); }
}

.face__ui {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center;
  /* The bottom inset matches the app's own: the game pill clears the display's
     curve rather than sitting on it. */
  padding: calc(var(--sw) * .028) calc(var(--sw) * .014) calc(var(--sw) * .05);
}

/* Clock — watchOS draws this itself and an app cannot restyle it, so the mock
   carries it too. */
.face__clock {
  position: absolute; top: calc(var(--sw) * .045); right: calc(var(--sw) * .055);
  font-size: calc(var(--sw) * .105);
  font-weight: 600; color: #fff;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

/* `display: inline-flex` below outranks the UA rule for [hidden], and the game
   chip and the call pill swap places — without this they appear side by side. */
.chip[hidden], .pill--call[hidden] { display: none; }

.chip {
  display: inline-flex; align-items: center; justify-content: center;
  background: #24242A;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
}
.chip--menu {
  margin-top: calc(var(--sw) * .195);
  width: calc(var(--sw) * .112); height: calc(var(--sw) * .063);
}
.chip--menu span {
  display: block; width: calc(var(--sw) * .052); height: calc(var(--sw) * .0075);
  background: rgba(255, 255, 255, .85);
  border-radius: 2px;
  box-shadow:
    0 calc(var(--sw) * -.016) 0 rgba(255, 255, 255, .85),
    0 calc(var(--sw) * .016) 0 rgba(255, 255, 255, .85);
}

.face__cols { display: flex; width: 100%; margin: auto 0; }
.col {
  flex: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: calc(var(--sw) * .007);
}

.pips { display: flex; gap: calc(var(--sw) * .0125); }
.pips i {
  width: calc(var(--sw) * .0155); height: calc(var(--sw) * .0155);
  border-radius: 50%;
  background: currentColor;
  opacity: .3;
}
.pips i.on { opacity: 1; }
.col--one { color: #FFF1F2; }
.col--two { color: #EDE7DA; }

.score {
  font-size: calc(var(--sw) * .26);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: currentColor;
}
.score.bump { animation: tick .34s var(--ease); }
@keyframes tick {
  0%   { opacity: 0; transform: translateY(22%); }
  100% { opacity: 1; transform: translateY(0); }
}

.pname {
  font-size: calc(var(--sw) * .053);
  font-weight: 700;
  opacity: .75;
  color: currentColor;
}

.face__footer {
  display: flex; align-items: center; justify-content: center;
  min-height: calc(var(--sw) * .14);
}
.chip--game {
  flex-direction: column;
  padding: calc(var(--sw) * .014) calc(var(--sw) * .077);
  line-height: 1.12;
}
.chip--game .g {
  font-size: calc(var(--sw) * .053);
  font-weight: 600;
  color: rgba(255, 255, 255, .68);
}
.chip--game .s {
  font-size: calc(var(--sw) * .072);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.chip--game .s .a { color: #F04455; }
.chip--game .s .b { color: #EDE7DA; }
.chip--game .s .d { color: rgba(255, 255, 255, .68); }

/* Game ball / Match ball. The only place the accent is ever spent. */
.pill--call {
  padding: calc(var(--sw) * .024) calc(var(--sw) * .048);
  border-radius: 999px;
  background: var(--yellow);
  color: #16161A;
  font-size: calc(var(--sw) * .063);
  font-weight: 900;
  letter-spacing: -.01em;
  white-space: nowrap;
  animation: call-in .4s var(--ease);
}
@keyframes call-in {
  0%   { opacity: 0; transform: scale(.82); }
  100% { opacity: 1; transform: scale(1); }
}

/* --- result screen -------------------------------------------------------- */

.face--result {
  background: var(--ink-deep);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(var(--sw) * .012);
  padding: calc(var(--sw) * .06);
}
.face--result .trophy {
  width: calc(var(--sw) * .155); height: auto; color: var(--yellow);
}
.face--result .wins {
  font-size: calc(var(--sw) * .088); font-weight: 800; color: var(--on-dark);
  margin-top: calc(var(--sw) * .022);
}
.face--result .games {
  font-size: calc(var(--sw) * .125); font-weight: 800;
  font-variant-numeric: tabular-nums;
  margin-bottom: calc(var(--sw) * .022);
}
.face--result .games .a { color: #F04455; }
.face--result .games .d { color: rgba(255, 255, 255, .55); }
.face--result .games .b { color: #EDE7DA; }
.face--result table { border-collapse: collapse; font-size: calc(var(--sw) * .058); }
.face--result td { padding: calc(var(--sw) * .0065) calc(var(--sw) * .028); }
.face--result td:first-child { color: rgba(255, 255, 255, .5); font-weight: 600; }
.face--result td:last-child { font-weight: 800; font-variant-numeric: tabular-nums; }
.face--result .won  { color: #F04455; }
.face--result .lost { color: #EDE7DA; }

/* --------------------------------------------------------------------------
   Trust strip
   -------------------------------------------------------------------------- */

.strip {
  background: var(--bg-strip);
  color: var(--text-soft);
  border-block: 1px solid var(--band-line);
}
.strip ul {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px clamp(18px, 4vw, 46px);
  list-style: none; margin: 0; padding: 20px 0;
  font-size: 14px; font-weight: 600; letter-spacing: .01em;
}
.strip li { display: flex; align-items: center; gap: 8px; }
.strip svg { width: 15px; height: 15px; color: var(--strip-tick); flex: none; }

/* --------------------------------------------------------------------------
   Feature grid
   -------------------------------------------------------------------------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 18px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 26px 30px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease),
              border-color .3s var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  box-shadow: 0 22px 40px -30px var(--shadow);
}
.card__icon {
  width: 44px; height: 44px; border-radius: 13px;
  display: grid; place-items: center;
  background: var(--accent-tint);
  color: var(--accent);
  margin-bottom: 18px;
}
.card__icon svg { width: 22px; height: 22px; }
.card h3 { font-size: 18px; letter-spacing: -.015em; margin-bottom: 8px; }
.card p { font-size: 15.5px; color: var(--text-soft); line-height: 1.55; }

/* --------------------------------------------------------------------------
   Steps
   --------------------------------------------------------------------------
   Three of them, so it is three across or one down — never two with an orphan
   on the second row, which reads as a broken layout rather than a sequence.
   -------------------------------------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 44px);
}
@media (max-width: 900px) {
  .steps { grid-template-columns: minmax(0, 1fr); max-width: 400px; margin-inline: auto; }
}

.step { text-align: center; }
.step__shot {
  position: relative;
  width: min(208px, 100%);
  margin: 0 auto 22px;
  border-radius: 15%;
  overflow: hidden;
  background: #000;
  border: 6px solid var(--device-frame);
  box-shadow: 0 26px 48px -30px var(--shadow-strong);
  transition: transform .35s var(--ease);
}
.step:hover .step__shot { transform: translateY(-6px) scale(1.02); }
.step__shot img { width: 100%; border-radius: 12%; }
.step__n {
  display: inline-grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--btn); color: var(--btn-ink);
  font-size: 14px; font-weight: 800;
  margin-bottom: 12px;
}
.step h3 { font-size: 19px; margin-bottom: 8px; }
.step p { font-size: 15.5px; color: var(--text-soft); max-width: 34ch; margin-inline: auto; }

/* --------------------------------------------------------------------------
   Banded section — how it works, the rules
   -------------------------------------------------------------------------- */

.rules { background: var(--bg-band); border-block: 1px solid var(--band-line); }
.rules__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 68px);
  align-items: center;
}
@media (max-width: 860px) { .rules__grid { grid-template-columns: 1fr; } }

.rulelist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.rulelist li {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 15px 17px;
}
.rulelist svg { width: 19px; height: 19px; color: var(--accent); flex: none; margin-top: 2px; }
.rulelist b { display: block; font-size: 15.5px; font-weight: 800; }
.rulelist span { font-size: 14.5px; color: var(--text-soft); line-height: 1.5; }

/* --------------------------------------------------------------------------
   Screens rail
   --------------------------------------------------------------------------
   Wide enough for the whole set: a centred row, complete and still. Narrower
   than that: a scroll rail, which is the only honest thing to do with six
   watch screens on a phone.
   -------------------------------------------------------------------------- */

.rail {
  display: grid;
  grid-auto-flow: column;
  justify-content: center;
  gap: 24px;
  padding: 6px 0 8px;
}
.rail figure { margin: 0; width: 168px; text-align: center; }
.rail img {
  width: 100%; border-radius: 17%;
  background: #000;
  border: 5px solid var(--device-frame);
  box-shadow: 0 20px 38px -26px var(--shadow-strong);
  transition: transform .3s var(--ease);
}
.rail figure:hover img { transform: translateY(-5px); }
.rail figcaption {
  margin-top: 12px; font-size: 13.5px; font-weight: 600; color: var(--text-soft);
}

@media (max-width: 1180px) {
  .rail {
    display: flex; gap: 20px;
    overflow-x: auto;
    padding: 6px var(--gutter) 26px;
    margin-inline: calc(var(--gutter) * -1);
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .rail::-webkit-scrollbar { height: 8px; }
  .rail::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; }
  .rail figure { flex: 0 0 auto; width: 176px; scroll-snap-align: center; }
}

/* --------------------------------------------------------------------------
   Privacy band
   -------------------------------------------------------------------------- */

.quiet {
  background: var(--bg-quiet); color: var(--on-dark);
  border-block: 1px solid var(--on-dark-line);
  text-align: center;
}
.quiet .title { color: var(--on-dark); }
.quiet .lede { color: var(--on-dark-soft); }
.quiet .eyebrow { color: var(--yellow); }

/* --------------------------------------------------------------------------
   Price
   -------------------------------------------------------------------------- */

.price {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(34px, 5vw, 54px);
  text-align: center;
  max-width: 640px; margin-inline: auto;
  position: relative; overflow: hidden;
}
.price::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 4px;
  background: linear-gradient(90deg, var(--red), var(--yellow), var(--red));
}
.price__amount {
  font-size: clamp(52px, 9vw, 76px);
  font-weight: 800; letter-spacing: -.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.price__once {
  display: block; margin-top: 10px;
  font-size: 15px; font-weight: 700; color: var(--accent);
  letter-spacing: .06em; text-transform: uppercase;
}
.price__list {
  list-style: none; margin: 28px 0 30px; padding: 0;
  display: grid; gap: 10px; text-align: left;
  max-width: 380px; margin-inline: auto;
}
.price__list li { display: flex; gap: 11px; align-items: center; font-size: 15.5px; }
.price__list svg { width: 18px; height: 18px; color: var(--accent); flex: none; }
.price__fine { margin-top: 20px; font-size: 13px; color: var(--text-faint); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer {
  background: var(--bg-footer);
  color: var(--on-dark-soft);
  padding-block: clamp(44px, 6vw, 64px) 32px;
  font-size: 15px;
}
.footer__top {
  display: flex; flex-wrap: wrap; gap: 28px;
  justify-content: space-between; align-items: flex-start;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--on-dark-line);
}
.footer .brand { color: var(--on-dark); margin-right: 0; }
.footer__blurb { margin-top: 12px; max-width: 34ch; font-size: 14.5px; line-height: 1.55; }

.footer__nav { display: flex; flex-wrap: wrap; gap: 34px; }
.footer__col h4 {
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--on-dark-faint); margin-bottom: 14px; font-weight: 700;
}
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer__col a {
  color: var(--on-dark-soft); text-decoration: none; font-size: 14.5px;
  transition: color .2s var(--ease);
}
.footer__col a:hover { color: var(--yellow); }

.footer__bottom {
  padding-top: 24px;
  display: flex; flex-wrap: wrap; gap: 10px 24px;
  justify-content: space-between;
  font-size: 13.5px; color: var(--on-dark-faint);
}

/* --------------------------------------------------------------------------
   Document pages — support, privacy, cookies
   -------------------------------------------------------------------------- */

.page-head {
  background: var(--bg-hero); color: var(--text);
  border-bottom: 1px solid var(--band-line);
  margin-top: calc(var(--nav-h) * -1);
  padding-top: calc(var(--nav-h) + clamp(48px, 6vw, 76px));
  padding-bottom: clamp(40px, 5vw, 60px);
  position: relative; overflow: hidden;
}
.page-head h1 { font-size: clamp(32px, 5vw, 52px); }
.page-head p { margin-top: 16px; color: var(--text-soft); max-width: 60ch; font-size: 17px; }
.page-head .eyebrow { color: var(--hero-accent); }

.prose { max-width: 720px; }
.prose h2 {
  font-size: clamp(21px, 2.4vw, 26px);
  margin-top: 46px; margin-bottom: 12px;
  scroll-margin-top: calc(var(--nav-h) + 20px);
}
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 18px; margin-top: 26px; margin-bottom: 8px; }
.prose p, .prose li { color: var(--text-soft); font-size: 16.5px; line-height: 1.65; }
.prose p + p { margin-top: 14px; }
.prose ul, .prose ol { margin: 14px 0; padding-left: 22px; display: grid; gap: 8px; }
.prose a { color: var(--accent); font-weight: 600; text-underline-offset: 3px; }
.prose strong { color: var(--text); font-weight: 700; }
.prose code {
  font-size: .92em;
  padding: 2px 6px; border-radius: 5px;
  background: var(--hover-wash);
  border: 1px solid var(--line);
}
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 44px 0; }

.callout {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 14px;
  padding: 20px 22px;
  margin: 26px 0;
}
.callout p { color: var(--text); font-size: 16px; }

.updated {
  display: inline-block;
  font-size: 13px; font-weight: 600;
  color: var(--text-faint);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 13px;
  margin-bottom: 34px;
}

/* FAQ */
.faq { display: grid; gap: 12px; max-width: 780px; }
.faq details {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.faq details[open] {
  border-color: var(--line-strong);
  box-shadow: 0 18px 34px -30px var(--shadow-strong);
}
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 56px 20px 22px;
  font-size: 16.5px; font-weight: 700;
  position: relative;
  color: var(--text);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 22px; top: 50%;
  width: 10px; height: 10px;
  margin-top: -6px;
  border-right: 2.5px solid var(--accent);
  border-bottom: 2.5px solid var(--accent);
  border-radius: 1px;
  transform: rotate(45deg);
  transition: transform .28s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq summary:hover { background: var(--hover-wash); }
.faq__body { padding: 0 22px 22px; }
.faq__body p, .faq__body li { color: var(--text-soft); font-size: 16px; line-height: 1.62; }
.faq__body p + p { margin-top: 12px; }
.faq__body ul { margin: 12px 0 0; padding-left: 20px; display: grid; gap: 7px; }
.faq details[open] .faq__body { animation: reveal .32s var(--ease); }
@keyframes reveal {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* Mail block — a link, not a form. Nothing here collects anything. */
.mail {
  background: var(--bg-quiet); color: var(--on-dark);
  border: 1px solid var(--on-dark-line);
  border-radius: var(--radius-lg);
  padding: clamp(30px, 5vw, 46px);
  text-align: center;
}
.mail h2 { color: var(--on-dark); font-size: clamp(24px, 3vw, 32px); }
.mail p { color: var(--on-dark-soft); margin-top: 14px; max-width: 52ch; margin-inline: auto; }
.mail__address {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: 26px;
  padding: 16px 28px;
  border-radius: 999px;
  background: var(--yellow); color: #16161A;
  font-size: clamp(17px, 2.2vw, 21px); font-weight: 800;
  text-decoration: none;
  letter-spacing: -.01em;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.mail__address:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -14px rgba(245, 197, 24, .8);
}
.mail__address svg { width: 21px; height: 21px; flex: none; }
.mail__fine { margin-top: 20px; font-size: 13.5px; color: var(--on-dark-faint); }

/* --------------------------------------------------------------------------
   Scroll reveals
   -------------------------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* The hero is above the fold, so it animates on load rather than on scroll. */
.hero [data-rise] {
  opacity: 0;
  animation: rise .9s var(--ease) forwards;
  animation-delay: calc(.1s + var(--i, 0) * .1s);
}
@keyframes rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
.hero__stage {
  opacity: 0;
  animation: watch-in 1.1s var(--ease) .28s forwards;
}
@keyframes watch-in {
  from { opacity: 0; transform: translateY(38px) scale(.94) rotate(2.5deg); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Reduced motion — keep the layout, drop the movement.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .hero [data-rise], .hero__stage { opacity: 1; animation: none; }
  .btn:hover, .card:hover, .rail figure:hover img, .step:hover .step__shot { transform: none; }
}

/* --------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------- */

@media (max-width: 620px) {
  body { font-size: 16px; }
  .btn { padding: 14px 22px; font-size: 15px; }
  .hero__cta .btn { width: 100%; }
  .footer__top { flex-direction: column; }
  .footer__nav { gap: 28px; }
  .watch { --sw: min(230px, 62vw); }

  /* The bar carries a wordmark, the theme toggle and the store button. At this
     width all three only fit if the button gives up its glyph and everything
     tightens a notch. */
  .nav__inner { gap: 10px; }
  .brand { font-size: 16px; gap: 9px; }
  .brand__mark { width: 28px; height: 28px; }
  .nav__cta { padding: 9px 15px; font-size: 14px; }
  .nav__cta .btn__apple { display: none; }
}

@media (max-width: 380px) {
  .watch { --sw: 180px; }
  .theme-toggle { width: 34px; height: 34px; }
}

/* Print — the policy pages are the ones anyone prints. */
@media print {
  .nav, .footer, .page-head .eyebrow, .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
  .page-head { background: #fff; color: #000; margin: 0; padding: 20px 0; }
  .page-head p { color: #333; }
  .prose { max-width: none; }
}