/* ─────────────────────────────────────────────────────────────────────────────
   My Volley Way — marketing site

   Palette is the app's own brand (theme/ClubBranding.ts): deep navy-teal + gold,
   sage-green tertiary. Every text/background pair below was measured against the
   WCAG formula before being used, because the app REFUSES a club's brand colour
   when it falls under 4.5:1 — a site selling that cannot ship worse.

     navy  #163A4D on white .......... 12.02
     white #FFFFFF on navy ........... 12.02
     navy  #163A4D on gold ...........  6.73   ← gold is a FILL, never text
     gold  #F5B81F on navy ...........  6.73
     muted #4A6673 on white ..........  6.11
     muted #A9C2CE on navy ...........  6.47
     sage  #3E6356 on white ..........  6.72

   Deliberately NOT used: gold as text on white (1.79) and #5C8374 sage (4.24).
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  --navy: #163a4d;
  --navy-deep: #0e2733;
  --navy-soft: #1d4a61;
  --gold: #f5b81f;
  --gold-deep: #d99f12;
  --cream: #fffdf7;
  --sand: #f6efe1;
  --sage: #3e6356;
  --sage-wash: #eaf1ee;
  --ink-muted: #4a6673;
  --ink-on-navy: #a9c2ce;
  --white: #ffffff;
  --line: rgba(22, 58, 77, 0.14);
  --line-on-navy: rgba(255, 255, 255, 0.16);

  --shadow-sm: 0 1px 2px rgba(14, 39, 51, 0.06), 0 2px 8px rgba(14, 39, 51, 0.06);
  --shadow-md: 0 4px 12px rgba(14, 39, 51, 0.08), 0 12px 32px rgba(14, 39, 51, 0.10);
  --shadow-lg: 0 8px 24px rgba(14, 39, 51, 0.12), 0 24px 56px rgba(14, 39, 51, 0.16);

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;

  --gutter: 20px;
  --max: 1140px;
  --max-narrow: 760px;

  --font: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

/* ── reset ─────────────────────────────────────────────────────────────────── */

*,
*::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: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--navy);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: var(--navy);
  text-underline-offset: 3px;
}

h1,
h2,
h3,
h4 {
  line-height: 1.12;
  margin: 0;
  letter-spacing: -0.02em;
  font-weight: 800;
}

p {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
}

/* Focus you can actually see, on both grounds. */
:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

.on-navy :focus-visible {
  outline-color: var(--gold);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--gold);
  color: var(--navy);
  padding: 14px 20px;
  font-weight: 700;
  z-index: 100;
  border-radius: 0 0 var(--r-sm) 0;
}

.skip:focus {
  left: 0;
}

/* ── layout ────────────────────────────────────────────────────────────────── */

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

.wrap--narrow {
  max-width: var(--max-narrow);
}

.section {
  padding: 72px 0;
}

.section--tight {
  padding: 48px 0;
}

@media (min-width: 760px) {
  .section {
    padding: 104px 0;
  }
  .section--tight {
    padding: 64px 0;
  }
}

.on-navy {
  background: var(--navy);
  color: var(--white);
}

.on-navy h1,
.on-navy h2,
.on-navy h3 {
  color: var(--white);
}

.on-navy a {
  color: var(--white);
}

.on-sand {
  background: var(--sand);
}

/* The net: a repeating vertical rule, like looking through a volleyball net.
   Sits behind dark sections at low opacity so it reads as texture, not pattern. */
.net {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.net::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent 78%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent 78%);
}

/* ── type ──────────────────────────────────────────────────────────────────── */

.display {
  /* Sized to the HERO COLUMN, not the viewport: the hero is a two-column grid, so
     at ~1100px the text column is only ~505px wide and 7.2vw overflowed it, dropping a
     single word onto its own line. */
  font-size: clamp(2.3rem, 5.4vw, 3.7rem);
  letter-spacing: -0.034em;
}

/* A hard line break set for the wide layout wrecks the rag in a narrow column —
   "What time do / we / need to be / there?" instead of two clean lines. The break
   only applies once there is room for the line it was chosen for. */
.br-lg {
  display: none;
}

@media (min-width: 980px) {
  .br-lg {
    display: inline;
  }
}

.h2 {
  font-size: clamp(1.85rem, 4.4vw, 2.8rem);
  letter-spacing: -0.028em;
}

.h3 {
  font-size: clamp(1.2rem, 2.4vw, 1.45rem);
  letter-spacing: -0.018em;
}

.lede {
  font-size: clamp(1.08rem, 2.1vw, 1.3rem);
  line-height: 1.52;
  color: var(--ink-muted);
}

.on-navy .lede {
  color: var(--ink-on-navy);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 16px;
}

.on-navy .eyebrow {
  color: var(--gold);
}

.eyebrow::before {
  content: "";
  width: 24px;
  height: 3px;
  border-radius: 2px;
  background: var(--gold);
}

.muted {
  color: var(--ink-muted);
}

.on-navy .muted {
  color: var(--ink-on-navy);
}

/* ── buttons ───────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* 52px tall: comfortably over the 24x24 minimum the app holds itself to, and
     sized for a thumb, because this audience is on a phone in a sports hall. */
  min-height: 52px;
  padding: 14px 26px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 800;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

.btn--gold {
  background: var(--gold);
  color: var(--navy);
  box-shadow: var(--shadow-md);
}

.btn--gold:hover {
  background: var(--gold-deep);
}

.btn--ghost {
  background: transparent;
  color: var(--navy);
  border-color: var(--line);
}

.btn--ghost:hover {
  border-color: var(--navy);
}

.on-navy .btn--ghost {
  color: var(--white);
  border-color: var(--line-on-navy);
}

.on-navy .btn--ghost:hover {
  border-color: var(--white);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

/* Three overrides that exist because a contrast sweep caught them, not because
   anyone predicted them. All three come from the same cause: a dark-section rule
   reaching something that is NOT on the dark background.

   1. `.on-navy a` (0,1,1) outranks `.btn--gold` (0,1,0), so the primary CTA inside
      the navy hero rendered WHITE ON GOLD — 1.79:1, the least readable thing on
      the page and the one people are meant to click.
   2. The vignettes are WHITE cards sitting inside the navy hero, so `.on-navy
      .muted` painted light grey text on white — 1.83:1.
   3. The footer is dark but is not `.on-navy`, so `.muted` kept its on-white value
      over near-black — 2.54:1. That one predates the other two. */
.on-navy .btn--gold {
  color: var(--navy);
}

.on-navy .vignette .muted {
  color: var(--ink-muted);
}

.site-footer .muted {
  color: var(--ink-on-navy);
}

/* ── header ────────────────────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 253, 247, 0.9);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 78px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  font-weight: 800;
  font-size: 1.06rem;
  letter-spacing: -0.02em;
  color: var(--navy);
}

/* The brand is the SQUARE pin mark plus the name as live text.

   Two things made the first attempt wrong. `logo.png` is a 2.298:1 lockup — the pin
   AND the words "My Volley Way" — and it was forced into a 36x36 box, crushing it to
   43% of its width. Sizing it by height fixed the distortion but exposed the real
   problem: at a header's 38px the script "Volley" is an illegible blob, and the
   lockup was also sitting next to the words "My Volley Way", printing the name twice.

   Live text is crisp at every size, selectable, and survives the navy footer, where
   the lockup's navy ink would have vanished. `logo.png` stays in assets/ for the
   places a wordmark belongs — email signatures, print, anywhere it can be large. */
/* The header carries the FULL LOCKUP (`logo.png`), which is transparent RGBA and
   2.298:1 — so it is sized by height with width auto. It already contains the words
   "My Volley Way", so no text sits beside it and the image takes a real alt.
   48px rather than the 38px first tried: "Volley" is a script face and needs the
   height to stay legible. */
.brand img {
  height: 48px;
  width: auto;
}

/* The footer keeps the square pin mark plus live text, because the lockup's wordmark
   is navy ink and would disappear against the navy footer. */
.brand--mark img {
  width: 34px;
  height: 34px;
}

.nav {
  display: none;
  align-items: center;
  gap: 28px;
}

.nav a {
  font-weight: 650;
  font-size: 0.97rem;
  text-decoration: none;
  color: var(--navy);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}

.nav a:hover,
.nav a[aria-current="page"] {
  border-bottom-color: var(--gold);
}

.header-cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--navy);
  color: var(--white);
  font-weight: 750;
  font-size: 0.94rem;
  text-decoration: none;
}

.header-cta:hover {
  background: var(--navy-soft);
}

@media (min-width: 900px) {
  .nav {
    display: flex;
  }
}

/* ── hero ──────────────────────────────────────────────────────────────────── */

.hero {
  background: linear-gradient(165deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: var(--white);
  padding: 64px 0 76px;
}

@media (min-width: 900px) {
  .hero {
    padding: 104px 0 112px;
  }
}

.hero__grid {
  display: grid;
  gap: 48px;
  align-items: center;
}

@media (min-width: 980px) {
  .hero__grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 64px;
  }
}

.hero h1 {
  color: var(--white);
}

.hero .lede {
  margin-top: 22px;
  max-width: 34em;
}

.hero__note {
  margin-top: 20px;
  font-size: 0.93rem;
  color: var(--ink-on-navy);
  display: flex;
  align-items: center;
  gap: 9px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  flex: none;
}

/* ── vignettes: honest mock-ups of real app cards ──────────────────────────── */

.vignette {
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 20px;
  color: var(--navy);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.vignette + .vignette {
  margin-top: 16px;
}

.vignette__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.vignette__label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.badge--live {
  /* The app's fixed semantic amber, with its measured 4.61-on-wash ink. */
  background: #fdf3e5;
  color: #976419;
}

.badge--win {
  background: #e4f3ee;
  color: #177b5b;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 15px;
  border-radius: var(--r-md);
  background: var(--cream);
  border: 1px solid var(--line);
}

.row__main {
  min-width: 0;
}

.row__title {
  font-weight: 750;
  font-size: 0.97rem;
}

.row__sub {
  font-size: 0.85rem;
  color: var(--ink-muted);
  margin-top: 2px;
}

.row__time {
  font-weight: 800;
  font-size: 1.12rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.gap-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  background: #fce9e9;
  color: #be3f3e;
  border: 1px solid rgba(190, 63, 62, 0.28);
}

.chip--ok {
  background: #e4f3ee;
  color: #177b5b;
  border-color: rgba(23, 123, 91, 0.28);
}

/* ── cards & grids ─────────────────────────────────────────────────────────── */

.grid {
  display: grid;
  gap: 20px;
}

.grid--2 {
  grid-template-columns: 1fr;
}

.grid--3 {
  grid-template-columns: 1fr;
}

.grid--4 {
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .grid--2,
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 980px) {
  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px;
  box-shadow: var(--shadow-sm);
  height: 100%;
}

.card h3 {
  margin-bottom: 10px;
}

.card p {
  color: var(--ink-muted);
  font-size: 0.98rem;
}

.on-navy .card {
  background: rgba(255, 255, 255, 0.055);
  border-color: var(--line-on-navy);
  box-shadow: none;
}

.on-navy .card p {
  color: var(--ink-on-navy);
}

.card__icon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: var(--gold);
  color: var(--navy);
  margin-bottom: 18px;
  flex: none;
}

.card__icon svg {
  width: 24px;
  height: 24px;
}

.card__icon--sage {
  background: var(--sage-wash);
  color: var(--sage);
}

.on-navy .card__icon--sage {
  background: rgba(255, 255, 255, 0.12);
  color: var(--white);
}

/* ── steps ─────────────────────────────────────────────────────────────────── */

.steps {
  display: grid;
  gap: 22px;
  counter-reset: step;
  list-style: none;
}

@media (min-width: 900px) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }
}

.step {
  position: relative;
  padding-top: 62px;
}

.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: 0;
  left: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--gold);
  color: var(--navy);
  font-weight: 800;
  font-size: 1.14rem;
}

.step h3 {
  margin-bottom: 9px;
}

.step p {
  color: var(--ink-muted);
}

.on-navy .step p {
  color: var(--ink-on-navy);
}

/* ── feature list ──────────────────────────────────────────────────────────── */

.ticks {
  list-style: none;
  display: grid;
  gap: 13px;
  margin-top: 22px;
}

.ticks li {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  font-size: 1rem;
}

.ticks svg {
  width: 21px;
  height: 21px;
  flex: none;
  margin-top: 3px;
  color: var(--sage);
}

.on-navy .ticks svg {
  color: var(--gold);
}

/* ── split ─────────────────────────────────────────────────────────────────── */

.split {
  display: grid;
  gap: 42px;
  align-items: center;
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
  }
  .split--flip > *:first-child {
    order: 2;
  }
}

/* ── audience tabs ─────────────────────────────────────────────────────────── */

.roles {
  display: grid;
  gap: 18px;
}

@media (min-width: 760px) {
  .roles {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1040px) {
  .roles {
    grid-template-columns: repeat(4, 1fr);
  }
}

.role {
  border-radius: var(--r-lg);
  padding: 26px;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 5px solid var(--gold);
  box-shadow: var(--shadow-sm);
}

.role:nth-child(2) {
  border-top-color: var(--sage);
}

.role:nth-child(3) {
  border-top-color: var(--navy);
}

.role:nth-child(4) {
  border-top-color: var(--gold-deep);
}

.role h3 {
  margin-bottom: 8px;
}

.role p {
  font-size: 0.96rem;
  color: var(--ink-muted);
}

.role ul {
  list-style: none;
  margin-top: 16px;
  display: grid;
  gap: 9px;
}

.role li {
  font-size: 0.93rem;
  padding-left: 18px;
  position: relative;
  color: var(--ink-muted);
}

.role li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
}

/* ── FAQ ───────────────────────────────────────────────────────────────────── */

.faq {
  display: grid;
  gap: 14px;
  margin-top: 36px;
}

details {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 4px 20px;
  box-shadow: var(--shadow-sm);
}

details[open] {
  border-color: rgba(22, 58, 77, 0.26);
}

summary {
  cursor: pointer;
  font-weight: 750;
  font-size: 1.04rem;
  padding: 18px 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 52px;
}

summary::-webkit-details-marker {
  display: none;
}

summary::after {
  content: "";
  width: 11px;
  height: 11px;
  flex: none;
  border-right: 2.5px solid var(--sage);
  border-bottom: 2.5px solid var(--sage);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  margin-right: 4px;
}

details[open] summary::after {
  transform: rotate(-135deg);
}

details p {
  padding: 0 0 20px;
  color: var(--ink-muted);
}

/* ── CTA band ──────────────────────────────────────────────────────────────── */

.cta-band {
  background: var(--gold);
  color: var(--navy);
  border-radius: var(--r-xl);
  padding: 44px 28px;
  text-align: center;
  box-shadow: var(--shadow-lg);
}

@media (min-width: 760px) {
  .cta-band {
    padding: 60px 48px;
  }
}

.cta-band h2 {
  color: var(--navy);
}

.cta-band p {
  color: #3d3414;
  margin-top: 14px;
  font-size: 1.1rem;
  max-width: 44ch;
  margin-left: auto;
  margin-right: auto;
}

.cta-band .btn-row {
  justify-content: center;
}

.cta-band .btn--gold {
  background: var(--navy);
  color: var(--white);
}

.cta-band .btn--gold:hover {
  background: var(--navy-deep);
}

.cta-band .btn--ghost {
  border-color: rgba(22, 58, 77, 0.35);
  color: var(--navy);
}

.cta-band .btn--ghost:hover {
  border-color: var(--navy);
}

/* ── footer ────────────────────────────────────────────────────────────────── */

.site-footer {
  background: var(--navy-deep);
  color: var(--ink-on-navy);
  padding: 56px 0 36px;
}

.site-footer a {
  color: var(--white);
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}

.footer__grid {
  display: grid;
  gap: 34px;
}

@media (min-width: 760px) {
  .footer__grid {
    grid-template-columns: 1.6fr 1fr 1fr;
  }
}

.footer__grid h4 {
  color: var(--white);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.footer__grid ul {
  list-style: none;
  display: grid;
  gap: 10px;
  font-size: 0.95rem;
}

.site-footer .brand {
  color: var(--white);
}

.footer__fine {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--line-on-navy);
  font-size: 0.86rem;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  justify-content: space-between;
}

/* ── 404 ───────────────────────────────────────────────────────────────────── */

.center-page {
  min-height: 72vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 72px 0;
}