/* SnapSync Sports public pages.
   Brand colors from the lockup, same as the portal: crimson #9B1B30,
   light gray #C9CDD2, ink #111418, wordmark gray #6B7280, white.
   The page background is the portal paper #f4f5f6 so a white card still
   separates. This site stays light (color-scheme: light). The portal's
   dark theme is an account setting and is not offered here, so the
   light lockup (dark text) is the only mark.

   #6B7280 on the paper is 4.43:1, under the 4.5:1 text minimum, so
   sentences use --muted #4b5563 (about 6.9:1 on the paper, 7.6:1 on
   white). #6B7280 is the card border and the wordmark gray: 4.8:1 on
   white, so the edge of a card clears the 3:1 boundary. White on
   crimson is 8.1:1. Crimson on the paper is 7.4:1, so a crimson
   headline is fine.

   Width comes from the viewport. 480px is the portal phone cutoff,
   just past a 430px phone, where the Menu disclosure takes over.
   768px is a tablet portrait (two columns). 1024px is the portal
   desktop cutoff (hero side by side, four workflow steps in a row).
   72rem is the column: three cards fit, with 1.25rem of side gutter
   so a 320px phone still has a thumb margin. 44px is the portal's
   phone hit target. None of these are bench results. */

:root {
  --crimson: #9B1B30;
  --ink: #111418;
  --muted: #4b5563;
  --line: #6B7280;
  --gray: #C9CDD2;
  --paper: #f4f5f6;
  --white: #ffffff;
  --focus: #9B1B30;
  color-scheme: light;
}

* { box-sizing: border-box; }

html { background: var(--paper); color: var(--ink); }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: "Segoe UI", "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}

/* Serif headlines, no downloaded font. A system serif keeps the
   marketing pages distinct from the portal UI without a third-party
   request. The lockup stays the brand. */
h1, h2, h3 {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

h1 {
  font-size: clamp(2rem, 5vw, 3.25rem);
  margin: 0 0 0.75rem;
}

/* 2rem is a 32px phone title so a two-line headline fits a 320px
   screen. 3.25rem is the desktop size. clamp tracks the viewport.
   Not a bench result. */
h2 { font-size: clamp(1.45rem, 2.4vw, 2rem); margin: 0 0 0.75rem; }
h3 { font-size: 1.2rem; margin: 0 0 0.4rem; letter-spacing: 0; }

p { margin: 0 0 0.85rem; }

a { color: var(--crimson); }
a:hover { text-decoration-thickness: 2px; }

/* 3px ring, 2px off the glyph, so a keyboard user can see it on white.
   Crimson on white is 8.1:1. Not a bench result. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

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

.skip {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  transform: translateY(-150%);
  background: var(--white);
  color: var(--ink);
  padding: 0.5rem 0.75rem;
  z-index: 5;
}

.skip:focus { transform: none; }

.brand-bar { height: 4px; background: var(--crimson); }

/* 4px matches the portal brand bar. */

.wrap {
  width: min(72rem, 100%);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding-block: 0.75rem;
}

.topbar { background: var(--white); border-bottom: 1px solid var(--gray); }

.lockup { height: 40px; width: auto; display: block; }

.header-end {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

/* Phone menu stays out of the desktop bar. A closed details element
   in this flex row collapses, which is why the desktop links are a
   separate nav. 480px is the phone cutoff, just past a 430px phone. */
.nav-menu { display: none; }

/* The corner control is the desktop Log in. The menu copy is the
   phone one. Only one is shown, so the tab order has a single Log in. */
.login-menu { display: none; }

.nav-toggle {
  list-style: none;
  cursor: pointer;
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.9rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
}

.nav-toggle::-webkit-details-marker { display: none; }

.nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.35rem;
}

.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.35rem 0.7rem;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
}

.nav-links a[aria-current="page"] {
  color: var(--crimson);
  box-shadow: inset 0 -2px 0 var(--crimson);
}

.nav-links a.button[aria-current="page"] { box-shadow: none; }

/* 481px is the first pixel past the phone menu. The disclosure is not
   used up here; the links are .nav-desktop. Not a bench result. */
@media (min-width: 481px) {
  .nav-toggle { display: none; }
}

main { flex: 1; }

.band { padding-block: 3.5rem; }
.band-white { background: var(--white); }

.lede {
  font-size: 1.2rem;
  color: var(--muted);
  max-width: 38rem;
}

/* 38rem keeps the lede near 65–75 characters so it does not run the
   full 72rem column. Not a bench result. */

.h1-line { display: block; color: var(--crimson); }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.25rem 0 0.75rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  background: var(--crimson);
  color: var(--white);
  text-decoration: none;
  font-weight: 700;
  border: 2px solid var(--crimson);
}

.button:hover { text-decoration: none; background: #7e1628; border-color: #7e1628; }

/* #7e1628 is the crimson pressed a step darker so a hover still reads
   as the brand and white text stays above 8:1. Not a bench result. */

.button-ghost {
  background: transparent;
  color: var(--crimson);
}

.button-ghost:hover { background: var(--white); color: var(--crimson); border-color: var(--crimson); }

.fine { color: var(--muted); font-size: 0.95rem; }

.hero {
  display: grid;
  gap: 2rem;
  align-items: center;
}

/* Hero demo. A media-player mock, not footage. 16px radius matches the
   old card corner: smaller than the lockup tile (22px on a 100px icon).
   The shadow is ink at 18% so the dark player lifts off the paper.
   Not a bench result. */
.hero-slot { margin: 0; }

.player {
  background: #111418;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(17, 20, 24, 0.18);
  color: #fff;
}

.chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 0.4rem 0 0.85rem;
  background: #1e222b;
}

.chrome-name {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #c5cad3;
}

.hero-pause-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.hero-pause {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 0.85rem;
  border: 1px solid #c5cad3;
  border-radius: 999px;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

.hero-pause-input:focus-visible + .hero-pause {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

.when-paused { display: none; }

.hero-slot:has(.hero-pause-input:checked) .when-playing { display: none; }
.hero-slot:has(.hero-pause-input:checked) .when-paused { display: inline; }

.hero-slot:has(.hero-pause-input:checked) .hero-anim,
.hero-slot:has(.hero-pause-input:checked) .hero-anim * {
  animation-play-state: paused;
}

.stage {
  position: relative;
  /* 16/10 is a little taller than 16/9 so the timeline and the
     playlist both fit beside the headline. 16/9 clipped the track
     in that column. Not a bench result. */
  aspect-ratio: 16 / 10;
  background: #111418;
  overflow: hidden;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  z-index: 3;
}

.hero-slot.has-video .hero-video { opacity: 1; }
.hero-slot.has-video .hero-anim { display: none; }

.hero-still {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The canvas is the live mock. It fills the stage. devicePixelRatio
   scaling is in hero.js so a retina screen stays sharp. */
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.hero-anim {
  /* 14s holds four beats: scrub, split, playlist, angle change.
     Long enough to read each one on a landing page. Not a bench. */
  --cycle: 14s;
  position: absolute;
  inset: 0;
}

.scene {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 0.5rem;
  padding: 0.65rem;
  opacity: 0;
  pointer-events: none;
}

.scene-raw { animation: show-raw var(--cycle) linear infinite; }
.scene-split { animation: show-split var(--cycle) linear infinite; }
.scene-list,
.scene-angle {
  grid-template-columns: 1fr 7.5rem;
  grid-template-rows: 1fr;
}

/* 7.5rem fits "Sideline" / "End zone" beside the field without
   squeezing the picture into a sliver. Not a bench result. */

.scene-list { animation: show-list var(--cycle) linear infinite; }
.scene-angle { animation: show-angle var(--cycle) linear infinite; }

/* 3% of 14s is about 0.4s. Shorter and the cut feels like a blink.
   Longer and two layouts sit on top of each other. Not a bench. */
@keyframes show-raw {
  0%, 30% { opacity: 1; }
  33%, 100% { opacity: 0; }
}
@keyframes show-split {
  0%, 30% { opacity: 0; }
  33%, 46% { opacity: 1; }
  49%, 100% { opacity: 0; }
}
@keyframes show-list {
  0%, 46% { opacity: 0; }
  49%, 68% { opacity: 1; }
  71%, 100% { opacity: 0; }
}
@keyframes show-angle {
  0%, 68% { opacity: 0; }
  71%, 100% { opacity: 1; }
}

.field {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  min-height: 5.5rem;
  /* 10% yard gaps are a sketch of a field, not a measured grid.
     #1a5c3a is a generic field green, not a school color. */
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent calc(10% - 1px),
      rgba(255, 255, 255, 0.55) calc(10% - 1px),
      rgba(255, 255, 255, 0.55) 10%
    ),
    #1a5c3a;
}

.field-end {
  position: absolute;
  inset: 0;
  /* 18% crimson band is the end zone, narrow enough that the moment
     dot at midfield stays out of it. Horizontal lines stand in for
     the other camera. Not a bench result. */
  background:
    linear-gradient(90deg, rgba(155, 27, 48, 0.9) 0 18%, transparent 18%),
    repeating-linear-gradient(
      180deg,
      transparent 0,
      transparent calc(12% - 1px),
      rgba(255, 255, 255, 0.45) calc(12% - 1px),
      rgba(255, 255, 255, 0.45) 12%
    ),
    #1a5c3a;
  opacity: 0;
}

.scrubber,
.playhead {
  position: absolute;
  animation: scrub var(--cycle) linear infinite;
}

.scrubber {
  top: 0;
  bottom: 0;
  width: 2px;
  background: #fff;
  box-shadow: 0 0 0 1px #9B1B30;
}

.track {
  position: relative;
  height: 1.7rem;
  border-radius: 999px;
  background: #2a2e36;
}

.playhead {
  top: 0.3rem;
  width: 0.55rem;
  height: 1.1rem;
  border-radius: 2px;
  background: #fff;
}

@keyframes scrub {
  0% { left: 4%; }
  30% { left: 90%; }
  100% { left: 90%; }
}

.segments {
  display: flex;
  gap: 0.3rem;
  height: 1.7rem;
}

.segments span {
  flex: 1;
  border-radius: 4px;
  background: var(--crimson);
}

.badge {
  position: absolute;
  z-index: 2;
  background: #111418;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
}

.badge-tl { top: 0.45rem; left: 0.45rem; }
.badge-bl { bottom: 0.45rem; left: 0.45rem; }
.badge-mid { bottom: 2.15rem; left: 0.45rem; }
.badge-end { opacity: 0; }

.moment {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 46%;
  width: 0.85rem;
  height: 0.85rem;
  margin-left: -0.425rem;
  margin-top: -0.425rem;
  border-radius: 50%;
  background: #9B1B30;
  border: 2px solid #fff;
}

/* The dot does not move. 50% / 46% sits in the field of play for both
   the sideline lines and the end-zone band. 0.85rem is a mark, not a
   person. Not a bench result. */

.scene-angle .badge-side { animation: fade-side var(--cycle) linear infinite; }
.scene-angle .badge-end,
.scene-angle .field-end { animation: fade-end var(--cycle) linear infinite; }
.scene-angle .row-side { animation: row-side var(--cycle) linear infinite; }
.scene-angle .row-end { animation: row-end var(--cycle) linear infinite; }

@keyframes fade-side {
  0%, 84% { opacity: 1; }
  92%, 100% { opacity: 0; }
}
@keyframes fade-end {
  0%, 84% { opacity: 0; }
  92%, 100% { opacity: 1; }
}
@keyframes row-side {
  0%, 84% { background: rgba(155, 27, 48, 0.4); box-shadow: inset 3px 0 #9B1B30; }
  92%, 100% { background: transparent; box-shadow: none; }
}
@keyframes row-end {
  0%, 84% { background: transparent; box-shadow: none; }
  92%, 100% { background: rgba(155, 27, 48, 0.4); box-shadow: inset 3px 0 #9B1B30; }
}

.row-side, .row-end {
  border-radius: 4px;
}

.plist-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: #1e222b;
  min-height: 0;
}

.scene-list .plist-wrap::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1.7rem;
  background: rgba(155, 27, 48, 0.35);
  box-shadow: inset 3px 0 #9B1B30;
  z-index: 1;
  pointer-events: none;
}

.plist {
  list-style: none;
  margin: 0;
  padding: 0;
}

.scene-list .plist { animation: plist-scroll var(--cycle) linear infinite; }

@keyframes plist-scroll {
  0%, 49% { transform: translateY(0); }
  68% { transform: translateY(-34%); }
  100% { transform: translateY(-34%); }
}

/* -34% moves about two rows through the highlight window during the
   playlist beat (49% to 68%). Farther and the list runs empty.
   Not a bench result. */

.plist li, .plist-title {
  height: 1.7rem;
  display: flex;
  align-items: center;
  padding: 0 0.45rem;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
}

.plist-title { margin: 0; color: #c5cad3; }

.hero-slot figcaption {
  margin: 0.65rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.cards, .steps, .audiences, .prices, .split {
  display: grid;
  gap: 1rem;
}

.card, .step, .audience, .price-card, .sport-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.15rem 1.15rem 0.4rem;
}

.band-white .card,
.band-white .step,
.band-white .audience,
.band-white .price-card,
.band-white .sport-card {
  background: var(--paper);
}

.step-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-bottom: 0.7rem;
  border-radius: 999px;
  background: var(--crimson);
  color: var(--white);
  font-weight: 700;
}

.eyebrow {
  margin: 0 0 0.35rem;
  color: var(--crimson);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pill {
  display: inline-block;
  margin: 0 0 0.6rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: var(--crimson);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.7rem;
  margin-bottom: 0.8rem;
}

.amount {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: clamp(2.25rem, 4vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}

/* 2.25rem keeps the price on one line in a 280px phone column.
   3rem is the desktop figure. Not a bench result. */

.per { color: var(--muted); font-weight: 600; }

.card ul, .price-card ul, .prose ul, .audience ul { padding-left: 1.15rem; }
.card li + li, .price-card li + li, .prose li + li { margin-top: 0.35rem; }

.banner {
  border: 1px solid var(--line);
  border-left: 4px solid var(--crimson);
  border-radius: 12px;
  background: var(--white);
  padding: 0.9rem 1rem 0.2rem;
  margin: 0 0 1.5rem;
}

.banner-draft { background: #fff6f7; }

/* #fff6f7 is white with a wash of the brand crimson so a draft is
   obvious without using crimson as a full-page alarm. Ink on it stays
   above 16:1. Not a bench result. */

.banner-kicker {
  margin: 0 0 0.35rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--crimson);
  font-size: 0.85rem;
}

.prose { max-width: 42rem; }
.prose h2 { margin-top: 2rem; }
.prose h2:first-child { margin-top: 0; }

.faq-list { display: grid; gap: 0.75rem; }
.faq-item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.9rem 1rem 0.25rem;
}
.faq-item h2 { font-size: 1.2rem; letter-spacing: 0; }

.contact-panel {
  margin-top: 1.5rem;
  padding: 1.15rem 1.15rem 0.4rem;
  border-radius: 14px;
  background: var(--ink);
  color: var(--white);
}
.contact-panel a { color: #ffd0d7; }
.contact-panel h2 { color: var(--white); }

/* #ffd0d7 on ink #111418 is about 13:1, so the links inside the dark
   contact panel stay crimson-family and readable. The brand crimson
   itself is about 2:1 on this ink and is not used for text here.
   Not a bench result. */

.cta-band {
  background: var(--crimson);
  color: var(--white);
  padding-block: 3rem;
}
.cta-band h2 { color: var(--white); max-width: 20ch; }
.cta-band p { max-width: 36rem; font-size: 1.1rem; }
.cta-band .button {
  background: var(--white);
  color: var(--crimson);
  border-color: var(--white);
}
.cta-band .button:hover { background: var(--paper); color: var(--crimson); border-color: var(--paper); }
.cta-band .cta-note { color: #fff; }
.cta-band .cta-note a { color: #fff; }

.site-footer {
  background: var(--ink);
  color: #e7e9ec;
  margin-top: auto;
}

.site-footer a { color: #ffffff; text-decoration: none; font-weight: 600; }
.site-footer a:hover { text-decoration: underline; }
.site-footer a[aria-current="page"] { color: #ffd0d7; }

.footer-grid {
  display: grid;
  gap: 1.5rem;
  padding-block: 2rem 1rem;
}

.footer-blurb { margin: 0; color: #c5cad3; max-width: 28rem; }

/* #c5cad3 on #111418 is about 11:1. Same lifted gray the portal uses
   for muted text on its dark paper. #6B7280 on this ink is too faint. */

.footer-grid h2 {
  font-family: "Segoe UI", "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffd0d7;
  margin: 0 0 0.5rem;
}

.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin: 0.15rem 0; }
.footer-grid a { display: inline-flex; align-items: center; min-height: 44px; }

.legal-line {
  border-top: 1px solid #2a2e36;
  padding-block: 0.9rem 1.1rem;
  color: #c5cad3;
  font-size: 0.9rem;
}

/* #2a2e36 on #111418 is a quiet rule, not text. The copyright line
   uses the lifted gray, not this rule color. */

.tag {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: #3a404a;
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* Tablet: two columns. A 700px window cannot hold four steps or three
   audience cards without squeezing the type, so 768px (tablet
   portrait) is the first multi-column break. Same reason the portal
   stacks under 768px. */
@media (min-width: 768px) {
  .cards, .audiences { grid-template-columns: 1fr 1fr; }
  .cards.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .prices, .split { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}

/* Three cards at tablet width would be narrow, so cols-3 waits for
   desktop. The two-column rule above is overridden here. */
@media (min-width: 768px) and (max-width: 1023px) {
  .cards.cols-3 { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .hero { grid-template-columns: 1.05fr 0.95fr; gap: 3rem; }
  .steps { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 480px) {
  .band { padding-block: 2.25rem; }
  .wrap { padding-inline: 1rem; }
  .lockup { max-width: 52vw; height: auto; max-height: 36px; }
  /* 52vw and 36px match the portal phone lockup so Menu keeps a 44px
     target beside the wordmark on a 320px screen. */
  .nav-desktop { display: none; }
  .nav-menu { display: block; flex: 1 0 auto; }
  .nav-menu[open] { flex: 1 0 100%; }
  .nav-links { flex-direction: column; align-items: stretch; padding-bottom: 0.5rem; }
  .nav-links a { justify-content: flex-start; }
  .nav-links a.button { justify-content: center; }
  .login-corner { display: none; }
  .nav-links a.login-menu { display: inline-flex; }
  .footer-grid a { min-height: 44px; }
  .scene-list, .scene-angle { grid-template-columns: 1fr 6.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-anim, .hero-canvas { display: none; }
  .hero-still { display: block; }
  .hero-video { display: none; }
}