/* Page frame ─────────────────────────────────────────
   One container, one side padding, one section rhythm. The handoff fixes all
   three, so they live in tokens.css rather than being repeated here. */
.container {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-pad);
}

.container--narrow {
  max-width: 820px;
}

/* Sections are divided by a rule, not by a change of ground — there is only one
   ground. The first section after the hero opens the sequence, so the hero
   itself carries no rule above it. */
section {
  padding: var(--section-pad) 0;
}

.section-rule {
  border-top: 1px solid var(--color-section-line);
}

/* Nav ─────────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition: background var(--transition-base), backdrop-filter var(--transition-base);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  height: 70px;
  padding: 0 var(--page-pad);
  max-width: var(--page-max);
  margin: 0 auto;
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav__brand img {
  width: 30px;
  height: 30px;
  border-radius: 7px;
}

.nav__brand-name {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 18px;
}

.nav__link {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-muted);
}

.nav__link:hover,
.nav__link--active {
  color: var(--color-text);
}

/* Hero ────────────────────────────────────────────────
   Two columns that wrap: the words, and the duel you can actually play. The
   duel wants 380 before it will sit beside anything, so on a narrow laptop it
   drops under the text at full width rather than being squeezed. */
.hero {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 72px var(--page-pad) 104px;
  display: flex;
  flex-wrap: wrap;
  gap: 64px;
  align-items: center;
}

.hero__text {
  flex: 1 1 300px;
  min-width: 300px;
}

.hero__duel {
  flex: 1 1 400px;
  min-width: 380px;
  max-width: 560px;
}

.hero h1 {
  margin: 0;
  font-size: clamp(40px, 4.6vw, 60px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.98;
  text-wrap: pretty;
}

.hero__tagline {
  margin: 24px 0 0;
  font-size: 17px;
  line-height: 1.5;
  color: var(--color-text-muted);
  max-width: 44ch;
}

.hero__actions {
  margin-top: 36px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* Section headings ───────────────────────────────── */
.section-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-text);
}

.section-title {
  margin: 14px 0 0;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.98;
  text-wrap: pretty;
}

/* Three steps ────────────────────────────────────── */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  margin-top: 48px;
}

/* Screenshot rail ────────────────────────────────────
   The section's own bottom padding moves onto the rail, so the rail's
   horizontal scrollbar sits under the images rather than under empty space. */
.shots-section {
  padding-bottom: 0;
}

.shots-section .container {
  margin-bottom: 40px;
}

.shots {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  /* Without this the first frame sits flush against the screen edge: snapping
     aligns to the scrollport start, which is inside the padding. */
  scroll-padding-inline: var(--page-pad);
  padding: 0 var(--page-pad) var(--section-pad);
  max-width: var(--page-max);
  margin: 0 auto;
}

/* What's inside ──────────────────────────────────────
   Rows divided by a 1px rule, not cards. An ODD count orphans the last row, so
   add and remove in pairs. */
.inside {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 64px;
  margin-top: 32px;
}

/* Closing CTA ────────────────────────────────────── */
.cta-section {
  padding: var(--section-pad-cta) 0;
}

.cta-section__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
}

/* Footer ─────────────────────────────────────────── */
.footer {
  border-top: 1px solid var(--color-section-line);
}

.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 28px var(--page-pad);
  font-size: 13px;
  color: var(--color-text-meta);
}

/* Required attribution, not decoration.
 *
 * TheTVDB's terms: free under $50k a year, and commercial use permitted, in
 * exchange for user-facing credit with a direct link. This page needs it on its
 * own account and not only the app's: the hero duel shows posters served
 * originally from artworks.thetvdb.com. `scripts/lint-web-attribution.sh`
 * fails the push if the link goes missing from any generated page. */
.footer__credit {
  font-size: 13px;
  color: var(--color-text-meta);
}

.footer__credit a {
  color: var(--color-text-muted);
  font-weight: 600;
}

.footer__credit a:hover {
  color: var(--color-text);
}

.footer__links {
  display: flex;
  gap: 20px;
}

.footer__link {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
}

.footer__link:hover {
  color: var(--color-text);
}

/* Support page ─────────────────────────────────────
   These two are used by support.html only; index.html stopped needing them
   when its sections took the left-aligned label + title pair. */
.section-header {
  text-align: center;
  margin-bottom: var(--spacing-lg);
}

.section-header h2 {
  margin-top: var(--spacing-xs);
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.98;
}

.footer__copy {
  font-size: 13px;
  color: var(--color-text-meta);
}

.support-hero {
  padding: calc(var(--section-pad) + 70px) 0 var(--section-pad);
  text-align: center;
}

/* Responsive ─────────────────────────────────────────
   The handoff only fixes desktop; below 768 it states the intent — columns
   stack, the duel goes full width. Everything here is that intent. */
@media (max-width: 900px) {
  /* The duel stops fitting beside the words well before its own min-width
     forces the wrap, so it is sent down early and given the full column. */
  .hero__duel {
    min-width: 0;
    max-width: none;
    flex-basis: 100%;
  }
}

@media (max-width: 768px) {
  :root {
    --page-pad: 24px;
    --section-pad: 64px;
    --section-pad-cta: 80px;
  }

  /* The nav is fixed and 70 tall, so the hero's top padding is what keeps the
     headline out from under it. 40 was not enough and hid the H1 — the desktop
     value works only because 72 happens to clear 70. */
  .hero {
    padding: 96px var(--page-pad) 64px;
    gap: 48px;
  }

  .steps,
  .inside {
    grid-template-columns: 1fr;
  }

  .steps {
    gap: 36px;
    margin-top: 36px;
  }

  .footer__inner {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .nav__brand-name {
    display: none;
  }

  .nav__links {
    gap: 12px;
  }
}