/* Netball Team Selector website. Same identity as teamselector.co.uk: warm
   off-white, condensed display type, thin rules. The one difference is the
   accent, which is the app's violet instead of football's forest green, so
   the two sites read as siblings without reading as the same app. */

@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/barlow-condensed-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/barlow-condensed-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/inter-latin-700-normal.woff2') format('woff2'); }

:root {
  --bg: #F5F3EC;
  --bg-deep: #ECEAE1;
  --paper: #FFFFFF;
  --ink: #111111;
  --muted: #5E625F;
  --rule: #CDCEC7;
  --green: #3A1670;
  --green-ink: #4C2192;
  --green-tint: #EBE5F7;
  --red: #C8102E;
  --amber: #7A5A00;
  --radius: 4px;
  --max: 1200px;
  --gutter: clamp(20px, 4vw, 48px);
  --display: 'Barlow Condensed', 'Arial Narrow', Impact, sans-serif;
  --body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* legacy aliases used by inner and localised pages */
  --white: #111111;
  --grey: #5E625F;
  --grey-dim: #6E726F;
  --card: #FFFFFF;
  --surface: #FFFFFF;
  --border: #CDCEC7;
  --green-deep: #3A1670;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, picture { display: block; max-width: 100%; }
a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
b, strong { font-weight: 700; color: var(--ink); }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.pitch-bg { display: none; }

/* ---------- type ---------- */
h1, h2, h3, .display { font-family: var(--display); font-weight: 800; line-height: 0.95; letter-spacing: -0.01em; color: var(--ink); text-wrap: balance; }
h1 { font-size: clamp(52px, 8vw, 112px); }
h1 .g { color: var(--green); }
h2 { font-size: clamp(40px, 5.2vw, 72px); }
h3 { font-size: clamp(24px, 2.2vw, 30px); line-height: 1.02; }
.kicker {
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 18px;
}
.lede { color: var(--muted); margin-top: 18px; max-width: 620px; font-size: 18px; }
.rule { width: 56px; height: 4px; background: var(--green); border: 0; margin: 28px 0; }
.muted { color: var(--muted); }

/* ---------- header ---------- */
header.site {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
}
.nav {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px var(--gutter);
  max-width: var(--max);
  margin: 0 auto;
  min-height: 64px;
}
.nav .brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  font-family: var(--display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
}
.nav .brand:hover { text-decoration: none; }
.nav .brand img { width: 42px; height: 42px; border-radius: 10px; }
.nav .links {
  margin-left: auto;
  display: flex;
  gap: 28px;
  align-items: center;
}
.nav .links a {
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 0;
  white-space: nowrap;
}
.nav .links a:hover { color: var(--green); text-decoration: none; }
.nav .links a[aria-current] { color: var(--green); box-shadow: inset 0 -2px 0 var(--green); }
.nav .links a.cta, .nav .links a.cta[aria-current] {
  color: #fff;
  background: var(--ink);
  padding: 12px 20px;
  border-radius: var(--radius);
  letter-spacing: 0.02em;
  font-size: 17px;
  text-transform: none;
  white-space: nowrap;
  box-shadow: none;
}
.nav .links a.cta:hover { background: var(--green); color: #fff; }
.nav-toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  width: 44px;
  height: 44px;
  cursor: pointer;
  color: var(--ink);
  align-items: center;
  justify-content: center;
}
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .close { display: none; }
.nav-toggle[aria-expanded="true"] .open { display: none; }
.nav-toggle[aria-expanded="true"] .close { display: block; }
@media (max-width: 900px) {
  .nav { min-height: 60px; }
  .nav .brand img { width: 34px; height: 34px; border-radius: 8px; }
  .nav .brand { font-size: 22px; }
  .nav-toggle { display: inline-flex; }
  .nav .links {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 100%;
    background: var(--bg);
    border-bottom: 1px solid var(--rule);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6px var(--gutter) 18px;
  }
  .nav .links.is-open { display: flex; }
  .nav .links a { padding: 14px 0; border-top: 1px solid var(--rule); font-size: 16px; }
  .nav .links a:first-child { border-top: 0; }
  .nav .links a[aria-current] { box-shadow: none; }
  .nav .links a.cta { margin-top: 12px; text-align: center; border-top: 0; }
}
@media (max-width: 380px) { .nav .brand span { font-size: 20px; } }

/* ---------- buttons and badges ---------- */
.btn, .btn-ghost, .btn-green {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: #fff;
  cursor: pointer;
  font-family: var(--body);
}
.btn:hover, .btn-green:hover { text-decoration: none; background: var(--green); border-color: var(--green); color: #fff; }
.btn-green { background: var(--green); border-color: var(--green); }
.btn-green:hover { background: var(--ink); border-color: var(--ink); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { text-decoration: none; background: var(--ink); color: #fff; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

.badge-soon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #000;
  color: #fff;
  border: 1px solid #000;
  border-radius: 8px;
  padding: 8px 16px 8px 12px;
  font-weight: 600;
  font-size: 19px;
  line-height: 1.1;
  text-align: left;
  min-height: 56px;
  letter-spacing: -0.01em;
}
.badge-soon:hover { text-decoration: none; background: #222; }
.badge-soon .apple { font-size: 24px; line-height: 1; }
.badge-soon svg.apple { fill: #fff; width: 22px; height: 26px; }
.badge-soon .playstore { flex-shrink: 0; }
.badge-soon small {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: #e6e6e6;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 1px;
}
.badge-soon span { display: block; }
.pricenote { margin-top: 20px; font-size: 16px; color: var(--muted); }
.pricenote strong { color: var(--ink); }
.launchprice { margin-top: 6px; font-size: 15px; color: var(--muted); }
.launchprice b { color: var(--green); }

/* ---------- home: hero ---------- */
.h-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border-bottom: 1px solid var(--rule);
}
.h-hero .copy {
  padding: clamp(40px, 6vw, 88px) var(--gutter) clamp(40px, 6vw, 72px);
  max-width: 660px;
  justify-self: end;
  width: 100%;
}
.h-hero .kicker { margin-bottom: 26px; }
.h-hero h1 { max-width: none; }
.h-hero .sub { color: var(--ink); font-size: clamp(17px, 1.6vw, 20px); margin-top: 28px; max-width: 480px; }
.h-hero .sub + .sub { margin-top: 14px; }
.h-hero .actions { margin-top: 30px; }
.h-hero .photo { position: relative; min-height: 420px; }
.h-hero .photo img { width: 100%; height: 100%; object-fit: cover; object-position: 78% 50%; position: absolute; inset: 0; }
.h-hero .tag {
  position: absolute;
  right: 22px;
  bottom: 22px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(17, 17, 17, 0.72);
  padding: 8px 12px;
  line-height: 1.35;
  text-align: right;
}
@media (max-width: 900px) {
  .h-hero { grid-template-columns: 1fr; }
  .h-hero .copy { max-width: none; justify-self: stretch; padding-bottom: 36px; }
  .h-hero h1 { max-width: none; }
  .h-hero .photo { min-height: 0; aspect-ratio: 4 / 3; }
  .h-hero .photo img { object-position: 82% 50%; }
  .h-hero .tag { right: auto; left: 16px; bottom: 16px; text-align: left; }
}
@media (max-width: 900px) { .h-hero .tag { right: auto; left: 16px; bottom: 16px; text-align: left; } }
@media (max-width: 480px) { .h-hero .photo { aspect-ratio: 1 / 1; } .h-hero .photo img { object-position: 84% 50%; } }

/* ---------- home: format strip ---------- */
.strip { background: var(--green); color: #fff; }
.strip ul { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); max-width: var(--max); margin: 0 auto; }
.strip li {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(26px, 3vw, 38px);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  padding: 22px 12px;
  border-left: 1px solid rgba(255, 255, 255, 0.28);
  line-height: 1;
}
.strip li:first-child { border-left: 0; }
.strip p { text-align: center; font-size: 14px; color: rgba(255, 255, 255, 0.82); padding: 0 var(--gutter) 16px; margin-top: -6px; }
.strip p a { color: #fff; text-decoration: underline; }
@media (max-width: 640px) {
  .strip ul { grid-template-columns: 1fr 1fr; }
  .strip li:nth-child(3) { border-left: 0; }
  .strip li:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, 0.28); }
}

/* ---------- home: sections ---------- */
.sec { padding: clamp(56px, 8vw, 112px) 0; }
.sec + .sec { border-top: 1px solid var(--rule); }
.split { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.split .intro { position: sticky; top: 92px; }
.split .intro .lede { margin-top: 0; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } .split .intro { position: static; } }

/* essentials rows */
.rows { list-style: none; border-top: 1px solid var(--rule); }
.rows li { border-bottom: 1px solid var(--rule); }
.rows a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 24px;
  align-items: center;
  padding: 22px 0;
  color: var(--ink);
}
.rows a:hover { text-decoration: none; }
.rows a:hover h3 { color: var(--green); }
.rows h3 { font-size: clamp(24px, 2.4vw, 32px); grid-column: 1; grid-row: 1; }
.rows p { color: var(--muted); font-size: 16px; margin-top: 8px; grid-column: 1; grid-row: 2; max-width: 560px; }
.rows .arrow { grid-column: 2; grid-row: 1 / span 2; width: 40px; height: 40px; border: 1px solid var(--rule); border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; transition: background 0.15s, border-color 0.15s; }
.rows a:hover .arrow { background: var(--green); border-color: var(--green); color: #fff; }
.rows .arrow svg { width: 18px; height: 18px; }

/* showcase */
.show { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(28px, 5vw, 72px); align-items: center; padding: clamp(40px, 6vw, 72px) 0; border-top: 1px solid var(--rule); scroll-margin-top: 80px; }
.show:first-of-type { border-top: 0; padding-top: 0; }
.show:nth-child(even) { grid-template-columns: 5fr 7fr; }
.show:nth-child(even) .photo { order: 2; }
.show .photo img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.show .photo img.tall { aspect-ratio: 4 / 3; }
.show .num { font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: 0.22em; color: var(--green); text-transform: uppercase; }
.show h3 { font-size: clamp(32px, 3.4vw, 46px); margin-top: 12px; }
.show p { color: var(--muted); margin-top: 16px; }
.show .screen { display: flex; gap: 16px; align-items: center; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--rule); }
.show .screen img { width: 88px; height: auto; border-radius: 8px; border: 1px solid var(--rule); flex-shrink: 0; }
.show .screen .cap { font-size: 14px; color: var(--muted); }
.show .screen .cap a { font-weight: 700; }
@media (max-width: 860px) {
  .show, .show:nth-child(even) { grid-template-columns: 1fr; }
  .show:nth-child(even) .photo { order: 0; }
}
.show-foot { border-top: 1px solid var(--rule); padding-top: 22px; margin-top: 8px; display: flex; gap: 12px 24px; flex-wrap: wrap; align-items: center; color: var(--muted); font-size: 15px; }

/* origin story */
.origin { display: grid; grid-template-columns: 1fr 1fr; }
.origin .photo { position: relative; min-height: 420px; }
.origin .photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 35% 40%; }
.origin .panel { background: var(--green); color: #fff; padding: clamp(40px, 6vw, 88px) var(--gutter); display: flex; flex-direction: column; justify-content: center; }
.origin .panel > * { max-width: 520px; }
.origin h2 { color: #fff; font-size: clamp(38px, 4.4vw, 64px); }
.origin .rule { background: #fff; }
.origin p { font-size: clamp(17px, 1.5vw, 20px); color: rgba(255, 255, 255, 0.92); }
.origin p + p { margin-top: 14px; }
@media (max-width: 860px) { .origin { grid-template-columns: 1fr; } .origin .photo { min-height: 0; aspect-ratio: 4 / 3; } }

/* reviews */
.rating-line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--muted); font-weight: 600; margin-top: 12px; }
.stars { color: var(--green); letter-spacing: 2px; font-size: 18px; }
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 40px; border-top: 1px solid var(--rule); }
.review { padding: 30px 32px 30px 0; border-left: 1px solid var(--rule); padding-left: 32px; }
.review:first-child { border-left: 0; padding-left: 0; }
.review h3 { font-size: 26px; margin: 12px 0 10px; }
.review p { color: var(--ink); font-size: 17px; }
.review .who { color: var(--muted); font-size: 14px; margin-top: 14px; font-weight: 600; }
@media (max-width: 860px) {
  .review-grid { grid-template-columns: 1fr; }
  .review { border-left: 0; padding: 26px 0; border-bottom: 1px solid var(--rule); }
  .review:last-child { border-bottom: 0; }
}

/* not a platform */
.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); margin-top: 44px; }
@media (max-width: 720px) { .two-up { grid-template-columns: 1fr; } }
.two-up .card { border-top: 3px solid var(--ink); padding-top: 18px; background: none; border-radius: 0; }
.two-up .card.us { border-top-color: var(--green); }
.two-up .card h3 { margin-bottom: 6px; }
.two-up .card ul { list-style: none; margin: 0; padding: 0; }
.two-up .card li { color: var(--muted); font-size: 16px; padding: 12px 0; border-top: 1px solid var(--rule); }
.two-up .card li:first-child { border-top: 0; }
.two-up .card li b { color: var(--ink); }
.two-up .card.us li b { color: var(--green); }
.honest { color: var(--muted); font-size: 15px; margin-top: 24px; max-width: 640px; }

/* free tool and guides */
.tool-cta { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.tool-cta .photo img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.tool-cta .actions { margin-top: 30px; }
@media (max-width: 860px) { .tool-cta { grid-template-columns: 1fr; } .tool-cta .photo { order: 2; } }

/* closing statement and download */
.closing { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: clamp(36px, 5vw, 60px) 0; }
.closing .inner { display: grid; grid-template-columns: auto 1fr; gap: 24px clamp(24px, 4vw, 56px); align-items: center; }
.closing h2 { font-size: clamp(38px, 5.4vw, 76px); }
.closing .txt { border-left: 1px solid var(--rule); padding-left: clamp(24px, 4vw, 56px); color: var(--muted); max-width: 520px; }
.closing .txt a { font-weight: 700; }
@media (max-width: 860px) { .closing .inner { grid-template-columns: 1fr; } .closing .txt { border-left: 0; padding-left: 0; } }

.download { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(28px, 5vw, 80px); align-items: center; scroll-margin-top: 80px; }
.download .photo img { width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; object-position: 70% 50%; }
.download .actions { margin-top: 30px; }
.download .support-links { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--rule); display: flex; gap: 12px 28px; flex-wrap: wrap; font-weight: 700; }
@media (max-width: 860px) { .download { grid-template-columns: 1fr; } }

/* ---------- picture helpers ---------- */
.photo img { background: var(--bg-deep); }

/* ---------- footer ---------- */
footer.site { border-top: 1px solid var(--rule); margin-top: 0; padding: 44px var(--gutter) 56px; background: var(--bg); }
.foot { max-width: var(--max); margin: 0 auto; display: flex; gap: 24px 40px; align-items: center; flex-wrap: wrap; }
.foot .brand { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 800; font-size: 22px; text-transform: uppercase; letter-spacing: 0.01em; color: var(--ink); }
.foot .brand img { width: 30px; height: 30px; border-radius: 7px; }
.foot .flinks { margin-left: auto; display: flex; gap: 12px 24px; flex-wrap: wrap; }
.foot .flinks a { color: var(--ink); font-size: 14px; font-weight: 600; }
.foot .flinks a:hover { color: var(--green); }
.foot .legal { width: 100%; color: var(--muted); font-size: 13px; margin-top: 10px; padding-top: 18px; border-top: 1px solid var(--rule); }
.ig-link { display: inline-flex; align-items: center; gap: 7px; }
.ig-link .ig { flex-shrink: 0; }
.lang-bar { max-width: var(--max); margin: 0 auto; padding: 8px var(--gutter) 0; display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.lang-bar a { color: var(--muted); font-weight: 600; }
.lang-bar a[aria-current] { color: var(--green); }
.lang-bar a:hover { color: var(--ink); text-decoration: none; }
.foot-lang { width: 100%; padding: 0; margin-top: 4px; }

/* ======================================================================
   Legacy layouts (localised landing pages, support, privacy, 404) restyled
   ====================================================================== */
.hero { text-align: left; padding: clamp(48px, 7vw, 96px) var(--gutter) 40px; max-width: var(--max); margin: 0 auto; }
.hero img.appicon { width: 72px; height: 72px; border-radius: 16px; margin-bottom: 28px; }
.hero .sub { color: var(--ink); font-size: clamp(17px, 1.7vw, 20px); max-width: 620px; margin: 24px 0 0; }
.hero .actions { margin-top: 32px; justify-content: flex-start; }
.formats-strip { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 26px; }
.formats-strip span { border: 1px solid var(--rule); color: var(--muted); border-radius: var(--radius); padding: 6px 12px; font-size: 14px; font-weight: 600; }
.formats-strip span b { color: var(--ink); }
.formats-strip span.rec { border-color: var(--green); color: var(--green); }

.shots { padding: 24px 0 10px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--bg-deep); }
.shots .rail { display: flex; gap: 16px; overflow-x: auto; padding: 16px var(--gutter) 24px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.shots img { width: 260px; height: auto; border-radius: 14px; border: 1px solid var(--rule); scroll-snap-align: center; flex-shrink: 0; }
.shots .hint { text-align: left; color: var(--muted); font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 12px var(--gutter) 0; font-family: var(--display); }

section.block { padding: clamp(56px, 8vw, 96px) 0; }
section.block + section.block, .notplatform + section.block, .reviews + section.block { border-top: 1px solid var(--rule); }
.grid { margin-top: 44px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 40px; border-top: 1px solid var(--rule); }
.card { background: none; border: 0; border-radius: 0; padding: 26px 0; border-bottom: 1px solid var(--rule); }
.card .ic { display: none; }
.card h3 { font-size: 26px; margin-bottom: 10px; }
.card p { color: var(--muted); font-size: 16px; }

.reviews { padding: clamp(48px, 7vw, 80px) 0 10px; }
.reviews .rating-line { justify-content: flex-start; margin-bottom: 0; }

.notplatform { padding: clamp(56px, 8vw, 96px) 0; border-top: 1px solid var(--rule); }

.band { background: var(--green); color: #fff; text-align: left; padding: clamp(48px, 7vw, 80px) 0; }
.band h2 { color: #fff; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.band h2 span { color: #fff !important; }
.band p { color: rgba(255, 255, 255, 0.9); max-width: var(--max); margin: 18px auto 0; padding: 0 var(--gutter); }
.band p, .band .more { display: block; }
.band .more { max-width: var(--max); margin: 22px auto 0; padding: 0 var(--gutter); font-weight: 700; color: #fff; text-decoration: underline; }
.band .more:hover { color: #fff; }

/* ---------- inner pages ---------- */
.page { max-width: 760px; margin: 0 auto; padding: clamp(48px, 6vw, 80px) var(--gutter) 40px; }
.page h1 { font-size: clamp(44px, 6vw, 80px); }
.page .intro { color: var(--muted); margin-top: 18px; font-size: 19px; }
.page h2 { font-size: clamp(30px, 3.4vw, 42px); margin-top: 52px; }
.page h3 { font-size: 24px; margin-top: 30px; }
.page p, .page li { color: var(--muted); }
.page p { margin-top: 14px; }
.page ul { margin: 14px 0 0 22px; }
.page li { margin-top: 8px; }
.page .updated, .byline, .crumbs { color: var(--muted); font-size: 14px; font-weight: 600; margin-top: 10px; }
.crumbs a { color: var(--muted); }
.contact-card { margin-top: 28px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); padding: 24px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.contact-card .ic { width: 46px; height: 46px; border-radius: var(--radius); background: var(--green-tint); display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.contact-card div p { margin: 2px 0 0; font-size: 15px; }
.contact-card a.mail { font-weight: 700; font-size: 17px; }

/* FAQ */
details { border-top: 1px solid var(--rule); margin-top: 0; }
details:last-of-type { border-bottom: 1px solid var(--rule); }
details summary { cursor: pointer; list-style: none; padding: 18px 0; font-weight: 700; font-size: 17px; color: var(--ink); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
details summary::-webkit-details-marker { display: none; }
details summary::after { content: '+'; color: var(--green); font-size: 22px; font-weight: 700; flex-shrink: 0; font-family: var(--display); }
details[open] summary::after { content: '\2013'; }
details .a { padding: 0 0 18px; color: var(--muted); font-size: 16px; }
details .a p { margin-top: 10px; }
details .a p:first-child { margin-top: 0; }

/* form */
form.feedback { margin-top: 28px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); padding: 28px 24px; }
.field { margin-top: 18px; }
.field:first-child { margin-top: 0; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.two-col .field { display: flex; flex-direction: column; justify-content: flex-end; margin-top: 0; }
@media (max-width: 560px) { .two-col { grid-template-columns: 1fr; } }
label { display: block; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; font-family: var(--display); font-size: 14px; }
label .opt { color: var(--muted); font-weight: 600; text-transform: none; letter-spacing: 0; font-family: var(--body); font-size: 12px; }
input[type='text'], input[type='email'], input[type='number'], select, textarea { width: 100%; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); color: var(--ink); padding: 13px 14px; font-size: 16px; font-family: inherit; outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--green); }
textarea { min-height: 140px; resize: vertical; }
select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235E625F' stroke-width='2' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
button.submit { margin-top: 24px; width: 100%; background: var(--green); color: #fff; border: none; border-radius: var(--radius); padding: 15px; font-size: 17px; font-weight: 700; font-family: inherit; cursor: pointer; }
button.submit:hover { background: var(--ink); }
button.submit:disabled { opacity: 0.55; cursor: default; }
.form-note { margin-top: 14px; color: var(--muted); font-size: 13px; }
.form-result { margin-top: 18px; padding: 14px 16px; border-radius: var(--radius); font-size: 15px; font-weight: 600; display: none; }
.form-result.ok { display: block; background: var(--green-tint); border: 1px solid var(--green); color: var(--green); }
.form-result.err { display: block; background: #F8E3E3; border: 1px solid var(--red); color: #8E1020; }

/* tool */
.page.tool { max-width: 980px; }
.tool-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; margin-top: 34px; align-items: start; }
@media (max-width: 800px) { .tool-grid { grid-template-columns: 1fr; } }
.tool-card { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); padding: 22px; }
.tool-card h2 { font-size: 28px; margin: 0; }
.tool-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.tool-actions { display: flex; gap: 8px; flex-wrap: wrap; }
button.mini { background: var(--bg); border: 1px solid var(--rule); color: var(--ink); border-radius: var(--radius); padding: 7px 13px; font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer; }
button.mini:hover { border-color: var(--ink); }
button.mini.danger:hover { border-color: var(--red); color: var(--red); }
.paste-box { margin-bottom: 14px; }
.paste-box textarea { min-height: 110px; }
.paste-actions { display: flex; gap: 8px; margin-top: 10px; }
.tool-card .rows { display: grid; gap: 8px; border-top: 0; }
.row { display: grid; grid-template-columns: 1fr 72px 130px 34px; gap: 8px; align-items: center; }
@media (max-width: 480px) { .row { grid-template-columns: 1fr 64px 34px; } .row select.fam { grid-column: 1 / 3; } }
.row input, .row select { padding: 10px 12px; font-size: 15px; }
.row input.rating { text-align: center; font-variant-numeric: tabular-nums; }
.row .x { background: none; border: 1px solid var(--rule); color: var(--muted); border-radius: var(--radius); height: 40px; font-size: 18px; cursor: pointer; }
.row .x:hover { color: var(--red); border-color: var(--red); }
.add-row { margin-top: 12px; width: 100%; background: none; border: 1px dashed var(--rule); color: var(--green); border-radius: var(--radius); padding: 12px; font-weight: 700; font-family: inherit; cursor: pointer; font-size: 15px; }
.add-row:hover { border-color: var(--green); }
.tool-note { color: var(--muted); font-size: 14px; margin-top: 14px; }
.settings .submit { margin-top: 18px; }
.seg { display: flex; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.seg button { flex: 1; background: var(--paper); border: 0; color: var(--muted); padding: 12px; font-weight: 700; font-size: 16px; font-family: inherit; cursor: pointer; }
.seg button + button { border-left: 1px solid var(--rule); }
.seg button.on { background: var(--green); color: #fff; }
.result { margin-top: 34px; }
.verdict-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.verdict-row .kicker { font-size: 30px; letter-spacing: 0; text-transform: none; margin: 0; color: var(--green); font-weight: 800; }
.kicker.v-slightlyUneven { color: var(--amber); } .kicker.v-uneven { color: var(--red); }
.verdict-sub { color: var(--muted); font-size: 15px; margin: 0; }
.teams { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.team { background: var(--paper); border: 1px solid var(--rule); border-top: 4px solid var(--bib); border-radius: var(--radius); padding: 16px; }
.team-head { display: flex; align-items: center; gap: 10px; }
.team-head h3 { font-size: 22px; flex: 1; margin: 0; }
.team-head .bib { width: 14px; height: 14px; border-radius: 3px; background: var(--bib); }
.team-head .strength { font-family: var(--display); font-weight: 800; font-size: 26px; line-height: 1; text-align: right; font-variant-numeric: tabular-nums; }
.team-head .strength small { display: block; font-size: 10px; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; font-family: var(--body); }
.team ul { list-style: none; margin: 12px 0 0; padding: 0; }
.team li { display: flex; justify-content: space-between; padding: 7px 0; border-top: 1px solid var(--rule); font-size: 15px; color: var(--ink); }
.team li em { font-style: normal; color: var(--muted); font-size: 12px; font-weight: 700; }
.team li.gk em { color: var(--green); }
.team-count { color: var(--muted); font-size: 13px; margin-top: 10px; }
.upsell { margin-top: 54px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); padding: 28px; display: grid; grid-template-columns: 72px 1fr; gap: 22px; align-items: start; }
@media (max-width: 560px) { .upsell { grid-template-columns: 1fr; } }
.upsell .appicon { border-radius: 16px; }
.upsell h2 { font-size: 30px; margin: 0; }
.upsell p { color: var(--muted); margin-top: 10px; }
.upsell .actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.upsell .pricenote { color: var(--muted); font-size: 14px; font-weight: 600; margin-top: 12px; }
.faq-h { margin-top: 54px; }
.page.tool > p { color: var(--muted); margin-top: 14px; }

/* compare */
.cmp-wrap { overflow-x: auto; margin-top: 30px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); }
table.cmp { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 15px; }
table.cmp th, table.cmp td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--rule); vertical-align: top; }
table.cmp th { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); background: var(--bg); font-family: var(--display); font-weight: 700; }
table.cmp td:first-child { color: var(--ink); font-weight: 700; width: 28%; }
table.cmp th:first-child { width: 28%; }
table.cmp th:not(:first-child), table.cmp td:not(:first-child) { width: 24%; }
table.cmp td { color: var(--muted); }
table.cmp td.us { color: var(--ink); background: var(--green-tint); }
table.cmp tr:last-child td { border-bottom: 0; }
.yes { color: var(--green); font-weight: 700; } .no { color: var(--muted); }

/* guides */
.guide-list { display: grid; gap: 0; margin-top: 30px; border-top: 1px solid var(--rule); }
.guide-list a.g { display: block; padding: 26px 0; color: var(--ink); border-bottom: 1px solid var(--rule); }
.guide-list a.g:hover { text-decoration: none; }
.guide-list a.g:hover h3 { color: var(--green); }
.guide-list a.g h3 { font-size: 28px; margin: 0; }
.guide-list a.g p { color: var(--muted); margin-top: 8px; font-size: 16px; }
.guide-list a.g .read { color: var(--green); font-weight: 700; font-size: 14px; margin-top: 12px; display: inline-block; }
.page.guide p { color: var(--muted); }
.page.guide h2 { margin-top: 44px; }
.page.guide table { border-collapse: collapse; width: 100%; margin-top: 18px; font-size: 15px; }
.page.guide th, .page.guide td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--rule); }
.page.guide th { color: var(--muted); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; font-family: var(--display); font-weight: 700; }
.page.guide td { color: var(--muted); }
.page.guide td:first-child { color: var(--ink); font-weight: 700; }
.page.guide .tblwrap { overflow-x: auto; }
.callout { margin-top: 28px; background: var(--paper); border: 1px solid var(--rule); border-left: 4px solid var(--green); border-radius: var(--radius); padding: 22px 24px; }
.callout p { margin-top: 8px; }
.callout .actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.page.wide { max-width: var(--max); }
.page.wide > p, .page.wide > h1, .page.wide > h2, .page.wide .intro, .page.wide .byline, .page.wide .callout { max-width: 760px; }
.hide-sm {}

/* ---------------------------------------------------------------------------
   Netball additions. Everything above is the shared Team Selector identity;
   below is what this site needs and the football one does not: a hero that
   carries a phone screen instead of a photograph (there is no netball
   photography yet, and the real app is a better picture than a stock one),
   and the screen strip. There is deliberately no form anywhere: until the
   app is on the stores, the call to action is an email address that already
   works, which is nothing to build and nothing to maintain.
   --------------------------------------------------------------------------- */

.n-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); border-bottom: 1px solid var(--rule); align-items: center; }
.n-hero .copy { padding: clamp(40px, 6vw, 88px) var(--gutter) clamp(40px, 6vw, 72px); max-width: 680px; justify-self: end; width: 100%; }
.n-hero .copy .kicker { margin-bottom: 26px; }
.n-hero .sub { color: var(--ink); font-size: clamp(17px, 1.6vw, 20px); margin-top: 26px; max-width: 520px; }
.n-hero .sub + .sub { margin-top: 14px; }
.n-hero .shot { padding: clamp(24px, 4vw, 56px) var(--gutter); display: flex; justify-content: center; }
.n-hero .shot img { width: min(320px, 100%); height: auto; border-radius: 22px; border: 1px solid var(--rule); box-shadow: 0 24px 48px rgba(17, 17, 17, 0.14); }

.soon {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--green-tint); color: var(--green);
  border: 1px solid var(--green); border-radius: 999px;
  font-family: var(--display); font-weight: 700; font-size: 14px;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 7px 16px; margin-bottom: 22px;
}

/* The app in real screens. */
.screens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3vw, 40px); margin-top: 40px; }
.screens figure { margin: 0; }
/* Each screen is a tall phone capture, so it is shown as a window on the top
   of the screen rather than the whole thing: six full-length screenshots
   side by side is a wall, not a page. The fade says the crop is deliberate. */
.screens .win {
  border-radius: 16px;
  border: 1px solid var(--rule);
  overflow: hidden;
  max-height: 440px;
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
}
.screens img { width: 100%; height: auto; display: block; }
.screens figcaption { margin-top: 14px; }
.screens figcaption b { display: block; font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 1.05; letter-spacing: -0.01em; }
.screens figcaption span { display: block; color: var(--muted); font-size: 15px; margin-top: 6px; }

/* Feature rows, plain and rule-separated like the football site's. */
.rows { margin-top: 30px; border-top: 1px solid var(--rule); }
.rows .row { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(16px, 4vw, 56px); padding: clamp(26px, 3vw, 38px) 0; border-bottom: 1px solid var(--rule); align-items: start; }
.rows .row h3 { margin: 0; }
.rows .row p { color: var(--muted); margin: 0; }
.rows .row p + p { margin-top: 12px; }

.qa { border-top: 1px solid var(--rule); margin-top: 28px; }
.qa details { border-bottom: 1px solid var(--rule); padding: 18px 0; }
.qa summary { font-family: var(--display); font-weight: 800; font-size: clamp(20px, 2vw, 26px); line-height: 1.1; cursor: pointer; list-style: none; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: '+'; float: right; color: var(--green); font-weight: 700; }
.qa details[open] summary::after { content: '\2212'; }
.qa p { color: var(--muted); margin-top: 12px; max-width: 70ch; }
.qa p + p { margin-top: 10px; }

.sibling { background: var(--green-tint); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.sibling .inner { display: flex; gap: clamp(16px, 3vw, 32px); align-items: center; padding: clamp(24px, 3vw, 40px) 0; flex-wrap: wrap; }
.sibling img { width: 56px; height: 56px; border-radius: 14px; flex-shrink: 0; }
.sibling .txt { flex: 1 1 320px; min-width: 0; }
.sibling h3 { margin-bottom: 6px; }
.sibling p { color: var(--muted); margin: 0; }

@media (max-width: 900px) {
  .n-hero { grid-template-columns: 1fr; }
  .n-hero .copy { justify-self: stretch; max-width: none; padding-bottom: clamp(24px, 4vw, 40px); }
  .n-hero .shot { padding-top: 0; padding-bottom: clamp(32px, 6vw, 56px); }
  .screens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rows .row { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 560px) {
  .screens { grid-template-columns: 1fr; gap: 28px; }
  .screens .win { max-width: 340px; margin: 0 auto; max-height: 400px; }
}

.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* The format strip carries a number and a label rather than one word. */
/* The global `b` rule paints bold text in ink, which is invisible on the
   violet band. */
.strip li b { display: block; font-weight: 800; color: inherit; }
.strip li span { display: block; font-family: var(--body); font-weight: 600; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.76); margin-top: 9px; line-height: 1.2; }

[hidden] { display: none !important; }

/* The hero headline is two short lines by design; the shared clamp goes up
   to 112px, which is sized for the football site's narrower lines. */
.n-hero h1 { font-size: clamp(50px, 7vw, 104px); }
/* The phone screen is a tall screenshot, so it is cropped to a window rather
   than allowed to set the height of the whole hero, and faded out at the
   bottom so the crop reads as deliberate. */
.n-hero .phone {
  width: min(320px, 100%);
  max-height: 600px;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid var(--rule);
  box-shadow: 0 24px 48px rgba(17, 17, 17, 0.14);
  -webkit-mask-image: linear-gradient(to bottom, #000 76%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 76%, transparent 100%);
}
.n-hero .phone img { width: 100%; height: auto; border: 0; border-radius: 0; box-shadow: none; display: block; }
@media (max-width: 900px) { .n-hero .phone { max-height: 460px; } }