/* ==========================================================================
   Tifo - marketing site
   Brand colours sampled from the logo: ink #212121, green #0f7a4a.
   Theme follows the visitor's system setting.
   ========================================================================== */

:root {
  --bg:        #ffffff;
  --bg-sunken: #f5f5f7;
  --surface:   #ffffff;
  --ink:       #212121;
  --muted:     #6b6b70;
  --line:      rgba(0, 0, 0, 0.09);
  --green:     #0f7a4a;
  --green-ink: #0f7a4a;
  --shadow:    0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
  --shadow-lg: 0 2px 4px rgba(0,0,0,.06), 0 24px 60px rgba(0,0,0,.14);
  --bezel:     #1c1c1e;

  --radius:    18px;
  --radius-lg: 26px;
  --wrap:      1080px;
  --pad:       clamp(20px, 5vw, 40px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #0d0f0e;
    --bg-sunken: #151917;
    --surface:   #171a19;
    --ink:       #f1f2f0;
    --muted:     #9b9e9b;
    --line:      rgba(255, 255, 255, 0.11);
    --green:     #2f9e6b;   /* lifted for contrast on dark */
    --green-ink: #45b881;
    --shadow:    0 1px 2px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.4);
    --shadow-lg: 0 2px 4px rgba(0,0,0,.5), 0 24px 60px rgba(0,0,0,.6);
    --bezel:     #000000;
  }
}

/* ---------------------------------------------------------------------------
   Cross-document view transitions.
   Progressive enhancement: browsers without support navigate instantly, the
   same as they did before. No JavaScript involved.
   --------------------------------------------------------------------------- */
@view-transition { navigation: auto; }

/* Naming these keeps them as one continuous element across the navigation,
   so the nav and footer hold still while only the page content changes. */
.pillnav   { view-transition-name: pillnav; }
.site-foot { view-transition-name: sitefoot; }

::view-transition-old(root) { animation-duration: .18s; }
::view-transition-new(root) { animation: vt-rise .3s cubic-bezier(.22,.8,.3,1); }

@keyframes vt-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }

  /* Cut the page transition entirely rather than just speeding it up - a
     10px lift is still motion, however brief. */
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

body {
  margin: 0;
  /* Keeps the footer on the bottom edge on short pages (contact, 404). */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body > main { flex: 1 0 auto; }
body > footer { flex: none; }

img { max-width: 100%; height: auto; display: block; }

a { color: var(--green-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

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

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

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--surface); color: var(--ink);
  padding: 12px 18px; border-radius: 0 0 12px 0; z-index: 100;
}
.skip:focus { left: 0; }

/* --- Header --------------------------------------------------------------- */

/* Centred pill nav, modelled on the segmented control in the app
   (Upcoming / Results / Table): a soft track with the active item raised
   out of it on a white pill. */
.pillnav { display: flex; justify-content: center; padding: 20px var(--pad); }

.pillnav__track {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: var(--bg-sunken);
  border: 1px solid var(--line);
}

.pillnav__track a {
  display: block;
  padding: 8px 20px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--muted);
  text-decoration: none;
  transition: color .2s ease, background-color .2s ease;
}
.pillnav__track a:hover { color: var(--ink); }

.pillnav__track a[aria-current="page"] {
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}

/* --surface and --bg-sunken are nearly the same value in dark mode, so the
   raised pill needs its own contrast rather than inheriting them. */
@media (prefers-color-scheme: dark) {
  .pillnav__track { background: rgba(255,255,255,.05); }
  .pillnav__track a[aria-current="page"] {
    background: rgba(255,255,255,.15);
    box-shadow: none;
  }
}

/* Over the hero art the track goes glassy, like the app's floating tab bar. */
.site-head--over { position: absolute; inset: 0 0 auto 0; z-index: 10; }
.site-head--over .pillnav__track {
  background: rgba(0,0,0,.4);
  border-color: rgba(255,255,255,.24);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.site-head--over .pillnav__track a { color: rgba(255,255,255,.82); }
.site-head--over .pillnav__track a:hover { color: #fff; }
.site-head--over .pillnav__track a[aria-current="page"] {
  background: rgba(255,255,255,.94);
  color: #1c1c1e;
}

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

.hero {
  position: relative;
  isolation: isolate;
  min-height: min(94vh, 860px);
  display: grid;
  align-items: center;
  padding-block: clamp(116px, 15vh, 156px) clamp(48px, 8vw, 88px);
  overflow: hidden;
}

/* Copy on the left, the rotating phone on the right. Stacks under 900px. */
.hero__grid {
  display: grid;
  gap: clamp(40px, 6vw, 72px);
  align-items: center;
  justify-items: start;
}
@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) auto;
    justify-items: stretch;
  }
}

/* --hero-art / --hero-art-lg are set on <html> by the inline script in the
   page head. The var() fallbacks are what no-JS visitors get. */
.hero__art {
  position: absolute; inset: 0; z-index: -2;
  background-image: var(--hero-art, url("/assets/hero-day-stadium-1200.webp"));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media (min-width: 1000px) {
  .hero__art {
    background-image: var(--hero-art-lg, url("/assets/hero-day-stadium-2000.webp"));
  }
}

/* Scrim: keeps the wordmark and tagline legible over any of the art variants. */
.hero__art::after {
  content: ""; position: absolute; inset: 0;
  background:
    /* Horizontal pass anchors the left-aligned copy against bright art. */
    linear-gradient(to right,
      rgba(0,0,0,.74) 0%, rgba(0,0,0,.58) 34%, rgba(0,0,0,.28) 68%, rgba(0,0,0,.14) 100%),
    /* Vertical pass darkens the header strip and the footer edge. */
    linear-gradient(to bottom,
      rgba(0,0,0,.58) 0%, rgba(0,0,0,.22) 26%, rgba(0,0,0,.42) 64%, rgba(0,0,0,.78) 100%);
}

/* Narrow screens: copy spans the full frame, so the horizontal pass stops
   helping. Lean on a stronger vertical one instead. */
@media (max-width: 899px) {
  .hero__art::after {
    /* The stacked hero is ~1180px tall: copy runs to about 47% and the phone
       fills the rest, so this stays fairly even rather than dipping in the
       middle the way the two-column version can afford to. */
    background: linear-gradient(to bottom,
      rgba(0,0,0,.56) 0%, rgba(0,0,0,.5) 20%, rgba(0,0,0,.56) 48%,
      rgba(0,0,0,.68) 74%, rgba(0,0,0,.86) 100%);
  }
}

.hero__inner { max-width: 680px; color: #fff; }

/* The wordmark is a transparent image, so drop-shadow() traces the actual
   letterforms instead of a box. Two passes: a tight one for edge definition
   against bright art, a wide soft one to lift it off the background. */
.hero__logo {
  width: clamp(180px, 34vw, 280px);
  margin-bottom: 28px;
  filter:
    drop-shadow(0 2px 4px rgba(0,0,0,.34))
    drop-shadow(0 8px 22px rgba(0,0,0,.42));
}
.hero h1 {
  /* The headline runs straight into the store badges, so it carries the
     whole gap that the old sub-line used to sit in. */
  margin: 0 0 34px;
  font-size: clamp(30px, 6vw, 50px);
  line-height: 1.08;
  letter-spacing: -0.022em;
  font-weight: 700;
  text-wrap: balance;
  /* Same two-pass idea as the wordmark above. */
  text-shadow: 0 1px 2px rgba(0,0,0,.4), 0 3px 14px rgba(0,0,0,.5);
}

/* --- Store badges --------------------------------------------------------- */

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

.badge {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 10px 18px 10px 15px;
  border-radius: 13px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 4px 18px rgba(0,0,0,.38);
  color: #fff;
  text-align: left;
  cursor: default;
}
.badge svg { width: 24px; height: 24px; flex: none; fill: currentColor; }
.badge__label { display: block; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; opacity: .72; line-height: 1.4; }
.badge__store { display: block; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }

/* --- Section furniture ---------------------------------------------------- */

.section { padding-block: clamp(56px, 10vw, 104px); }
.section--sunken { background: var(--bg-sunken); }

.section__head { max-width: 34ch; margin-bottom: clamp(28px, 5vw, 48px); }
.section__head h2 {
  margin: 0 0 10px;
  font-size: clamp(24px, 4vw, 32px);
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-weight: 700;
}
.section__head p { margin: 0; color: var(--muted); }

.eyebrow {
  margin: 0 0 12px;
  font-size: 12px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--green-ink);
}

/* --- Phone frame & hero showcase ------------------------------------------ */

.phone {
  border-radius: 40px;
  padding: 7px;
  background: var(--bezel);
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255,255,255,.1);
}
.phone--hero { width: clamp(198px, 60vw, 268px); }
@media (min-width: 900px) { .phone--hero { width: 268px; } }

.showcase { justify-self: center; }

/* Slides are stacked and cross-faded, so the phone never changes height and
   nothing below it shifts. aspect-ratio matches the source screenshots. */
.showcase__stack {
  position: relative;
  aspect-ratio: 1179 / 2556;
  border-radius: 33px;
  overflow: hidden;
}
.showcase__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .55s ease;
}
.showcase__slide.is-active { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .showcase__slide { transition: none; }
}

/* --- Features ------------------------------------------------------------- */

.features {
  display: grid;
  gap: clamp(18px, 3vw, 26px);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.feature {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px 28px;
  box-shadow: var(--shadow);
}
.feature svg { width: 26px; height: 26px; color: var(--green-ink); margin-bottom: 16px; display: block; }
.feature h2 { margin: 0 0 7px; font-size: 17.5px; font-weight: 650; letter-spacing: -0.01em; }
.feature p { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.5; }

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

/* Solid dark panel in both themes: bookends the page in light mode, and sits
   a shade above the page background in dark mode. */
.site-foot {
  background: #151917;
  border-top: 1px solid rgba(255,255,255,.08);
  color: #fff;
  padding-block: clamp(32px, 4.5vw, 44px) 22px;
}

.site-foot__top {
  display: flex; flex-wrap: wrap; gap: 24px 48px;
  /* Centres the wordmark against the link row so the two sit on a shared
     optical line rather than both hanging off the top. */
  align-items: center; justify-content: space-between;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,.16);
}
.site-foot__mark { width: 76px; }
.site-foot__links { display: flex; flex-wrap: wrap; gap: 12px 28px; font-size: 15px; }
.site-foot__links a { color: rgba(255,255,255,.82); text-decoration: none; font-weight: 500; }
.site-foot__links a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.site-foot__social { display: inline-flex; align-items: center; }
/* No blanket fill here: a CSS fill would beat the fill="none" attribute on
   the stroke-drawn icons and turn them into solid blocks. Each icon declares
   its own fill instead. */
.site-foot__social svg { width: 16px; height: 16px; }
.site-foot__social:hover { text-decoration: none; }

.site-foot__base {
  padding-top: 16px;
  text-align: center;
  font-size: 13.5px;
  color: rgba(255,255,255,.6);
}
.site-foot__base p { margin: 0; }

/* --- Inner pages (privacy, contact, 404) ---------------------------------- */

.page { padding-block: clamp(36px, 7vw, 68px) clamp(56px, 10vw, 96px); }
.page h1 {
  margin: 0 0 10px;
  font-size: clamp(28px, 5vw, 42px);
  letter-spacing: -0.022em;
  line-height: 1.12;
  font-weight: 700;
}
.page__meta { margin: 0 0 clamp(32px, 5vw, 48px); color: var(--muted); font-size: 15px; }

/* Wider than the ~68ch reading ideal so legal pages fill the column properly.
   Capped in px as well, because past roughly 800px the line gets long enough
   that the eye loses its place returning to the next one. */
.prose { max-width: min(92ch, 800px); }
.prose h2 {
  margin: 44px 0 12px;
  font-size: 21px; font-weight: 650; letter-spacing: -0.012em;
}
.prose h2:first-of-type { margin-top: 0; }
.prose h3 { margin: 28px 0 8px; font-size: 17px; font-weight: 650; }
.prose p { margin: 0 0 14px; }
.prose ul { margin: 0 0 16px; padding-left: 22px; }
.prose li { margin-bottom: 7px; }
.prose > ul > li::marker { color: var(--green-ink); }

/* Call-out flagging copy that still needs a human. */
.todo {
  border: 1px dashed var(--green-ink);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--green-ink) 7%, transparent);
  padding: 20px 22px;
  margin: 0 0 36px;
}
.todo p { margin: 0 0 10px; font-size: 15.5px; }
.todo p:last-child { margin-bottom: 0; }
.todo strong { font-weight: 650; }

mark.gap {
  background: color-mix(in srgb, var(--green-ink) 20%, transparent);
  color: inherit;
  padding: 1px 6px;
  border-radius: 5px;
  font-weight: 600;
}

/* Equal-width columns; grid's default stretch keeps the cards the same
   height too, however unevenly the labels wrap. */
/* Section heading on the contact page. Matches the page h1 exactly, so
   "Contact" and "Socials" read as two headings of equal weight. */
.page__group {
  margin: clamp(44px, 6vw, 64px) 0 clamp(20px, 3vw, 28px);
  font-size: clamp(28px, 5vw, 42px);
  letter-spacing: -0.022em;
  line-height: 1.12;
  font-weight: 700;
  color: var(--ink);
}

/* Same gap under the h1 as under .page__group, so both card rows sit the
   same distance below their heading. */
.page h1 + .contact-list { margin-top: clamp(20px, 3vw, 28px); }

.contact-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(14px, 1.8vw, 20px);
}

/* auto-fill keeps the empty tracks, so cards stay one column wide each
   and match the email cards above rather than stretching. */
.contact-list--fill { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

.contact-card {
  display: flex; align-items: center; gap: 14px;
  /* Two-line email cards set the natural height; this keeps the one-line
     social card the same size rather than letting it shrink. */
  min-height: 88px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 22px;
  text-decoration: none;
  color: inherit;
  margin: 0;
  transition: border-color .2s ease;
}
.contact-card:hover { border-color: var(--green-ink); }
.contact-card svg { width: 26px; height: 26px; color: var(--green-ink); flex: none; }

/* X's brand guidelines want the mark in black or white, not tinted, so this
   one icon opts out of the green the others use. */
.contact-card--social svg { color: var(--ink); }

/* min-width:0 lets the address shrink inside the flex row instead of forcing
   the card wider than its grid track. */
.contact-card__text { min-width: 0; }

.contact-card .k {
  display: block;
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}
.contact-card .v {
  display: block;
  font-size: clamp(14.5px, 1.35vw, 16.5px);
  font-weight: 600; letter-spacing: -0.01em;
  color: var(--green-ink);
  overflow-wrap: anywhere;
}