/* Gameday Fastpitch — the small number of rules the shared stylesheet does not
   already have. Loaded ONLY by this site, after styles.css.

   styles.css in this folder is a verbatim copy of the baseball site's sheet and
   must stay that way, so that the two sites cannot drift visually. Anything
   fastpitch-only belongs here instead, where the baseball site never sees it.
   Every selector below is therefore additive and namespaced to a class that
   does not exist on the baseball site (`.solo`, `.fp-*`) or scoped to a
   breakpoint the shared sheet leaves alone. */

/* An inner page has no phone mockup, so the hero's two-column grid would leave
   its single child squeezed into 1.05fr with an empty column beside it. */
.hero.solo .wrap {
  grid-template-columns: 1fr;
}

.hero.solo h1 {
  font-size: clamp(34px, 5vw, 50px);
}

.hero.solo .sub {
  max-width: 34em;
}

/* "Gameday Fastpitch" is seven characters longer than "Gameday" and collides
   with the CTA on a small phone. */
@media (max-width: 420px) {
  .brand {
    font-size: 18px;
    gap: 8px;
  }

  .brand .ball {
    width: 22px;
    height: 22px;
  }

  nav.site a.cta {
    padding: 7px 12px;
    font-size: 14px;
  }
}

/* A definition-style list for pages that explain a feature field by field —
   used on the recruiting page, where a table would be overkill and a bare list
   loses the distinction between the name of a thing and what it is. */
.fp-defs {
  display: grid;
  gap: 14px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.fp-defs li {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 16px 18px;
}

.fp-defs strong {
  display: block;
  font-family: 'Barlow Semi Condensed', Barlow, sans-serif;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}

.fp-defs span {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
}

@media (min-width: 720px) {
  .fp-defs {
    grid-template-columns: 1fr 1fr;
  }
}

/* A numbered walkthrough — the Android page is a sequence of steps, and steps
   read better numbered than bulleted. */
.fp-steps {
  counter-reset: fpstep;
  list-style: none;
  padding: 0;
  margin: 26px 0 0;
}

.fp-steps li {
  counter-increment: fpstep;
  position: relative;
  padding: 0 0 0 46px;
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 16.5px;
  line-height: 1.6;
}

.fp-steps li::before {
  content: counter(fpstep);
  position: absolute;
  left: 0;
  top: -1px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--highlight);
  color: var(--teal);
  font-family: 'Barlow Semi Condensed', Barlow, sans-serif;
  font-weight: 800;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fp-steps li strong {
  color: var(--ink);
}

/* A plain statement of fact that is NOT an offer — used where the honest answer
   is "you can't have this yet". Deliberately not the teal `.note` callout,
   which reads as good news. */
.fp-plain {
  border-left: 3px solid var(--maroon);
  background: #fdf4f6;
  border-radius: 0 12px 12px 0;
  padding: 18px 20px;
  margin: 28px 0;
  color: var(--ink);
  font-size: 16.5px;
  line-height: 1.6;
}

.fp-plain strong {
  color: var(--maroon);
}