/* ── The product pages' hero ─────────────────────────────────────────────────
   Every product page opens the way /referees and /futsal do (2026-10-31): a
   dark band in the page's own colours, the copy on the left (breadcrumb, the
   product's name as an eyebrow, the h1 with its second line in the page's
   accent, the lede, the buttons, the stat tiles where a page has them), and
   on the right the page's own picture: its hero photograph in a tilted frame,
   with a small card of the product's own screen laid over it. The card is an
   example, says so, and is hidden from a screen reader: the copy beside it is
   what the page says.

   Fixed colours, so the band reads the same in every theme, the way Referee
   HQ's pitch does. A page picks its colours with one class, ph--<page>, below;
   nothing else about the band is a page's own. Markup:

     <section class="xx-hero page-hero ph ph--page">
       <div class="container ph-grid">
         <div class="ph-copy">breadcrumb, .ph-eyebrow, h1, p, .ph-cta</div>
         <div class="ph-art"><figure class="photo ...">...</figure><div class="ph-chip">...</div></div>
       </div>
     </section>

   The hero photograph's figure is moved into .ph-art whole, never rebuilt, so
   the Image Studio's publisher still finds it and a film still opens from it
   (marketing/film.js reads .hero-film[data-film-call]). Selectors start at
   section.ph so they outrank a page's older .xx-hero rules without !important.
   Motion is motion.js's count-up and nothing that loops (DESIGN.md, Motion). */

section.ph {
  position: relative; overflow: hidden; isolation: isolate; color: #fff; text-align: left;
  padding-bottom: 64px;
  background: var(--ph-bg, linear-gradient(180deg, #0b1220 0%, #13203a 60%, #1d2f63 100%));
}
section.ph::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 36% 60% at 4% -10%, var(--ph-light, rgba(255,244,214,.30)), transparent 70%),
    radial-gradient(ellipse 36% 60% at 96% -10%, var(--ph-light, rgba(255,244,214,.26)), transparent 70%),
    var(--ph-tex, linear-gradient(transparent, transparent));
}
section.ph .breadcrumb, section.ph .breadcrumb a { color: rgba(255,255,255,.72); }
section.ph .breadcrumb a:hover { color: #fff; }
.ph-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 52px; align-items: center; }
.ph-copy { min-width: 0; }
.ph-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 8px; font-size: .78rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ph-accent, #ffd166);
}
.ph-eyebrow i {
  width: 9px; height: 9px; border-radius: 2px; background: var(--ph-accent, #ffd166); transform: rotate(8deg);
  box-shadow: 0 0 12px var(--ph-accent, #ffd166);
}
section.ph h1 {
  color: #fff; text-align: left; margin: 0 0 18px;
  font-size: clamp(2.05rem, 1.25rem + 2.6vw, 3.3rem); line-height: 1.06; letter-spacing: -0.03em;
}
section.ph h1 span, section.ph h1 .hero-gradient {
  color: var(--ph-accent, #ffd166); background: none; -webkit-text-fill-color: currentColor;
}
section.ph .ph-copy > p, section.ph .ph-copy .hero-sub {
  color: rgba(255,255,255,.85); font-size: 1.04rem; line-height: 1.75; max-width: 640px;
  margin-left: 0; margin-right: 0; text-align: left;
}
section.ph .ph-copy > p + p { margin-top: 12px; }
section.ph .ph-copy > p a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
section.ph .ph-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 0; justify-content: flex-start; }
section.ph .btn-primary {
  background: var(--ph-accent, #ffd166); border-color: var(--ph-accent, #ffd166); color: var(--ph-ink, #1b1300);
  box-shadow: 0 10px 26px -12px var(--ph-accent, #ffd166);
}
section.ph .btn-primary:hover { filter: brightness(1.06); }
section.ph .btn-outline, section.ph .btn-ghost { color: #fff; border-color: rgba(255,255,255,.42); background: transparent; }
section.ph .btn-outline:hover, section.ph .btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }
/* A badge some pages carry above the h1. */
section.ph .hero-badge {
  display: inline-block; margin: 14px 0 6px; padding: 5px 12px; border-radius: 999px; font-size: .78rem; font-weight: 700;
  color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
}
section.ph .hero-badge + .ph-eyebrow { margin-top: 10px; }
/* Stat tiles, as Referee HQ's: the homepage's .hero-stats markup kept, so
   motion.js still counts its numbers up. */
section.ph .hero-stats, .ph-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 28px 0 0; max-width: 640px; padding: 0;
}
section.ph .hero-stat, .ph-stat {
  display: flex; flex-direction: column; align-items: flex-start; text-align: left; min-width: 0;
  padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
}
section.ph .hero-stat-num, .ph-stat b {
  display: block; font-size: clamp(1.5rem, 3.6vw, 2rem); line-height: 1; font-weight: 800; color: #fff;
  font-variant-numeric: tabular-nums; background: none; -webkit-text-fill-color: currentColor;
}
section.ph .hero-stat-label, .ph-stat span { display: block; margin-top: 5px; font-size: .76rem; color: rgba(255,255,255,.75); line-height: 1.3; text-align: left; }

/* The picture: the photograph in a tilted frame, the card over its corner. */
.ph-art { position: relative; min-width: 0; padding: 8px 4px 34px 26px; }
.ph-art > .photo {
  margin: 0; max-width: none; width: 100%; border-radius: 22px; overflow: hidden; transform: rotate(2.4deg);
  box-shadow: 0 34px 70px -30px rgba(0,0,0,.85); border: 1px solid rgba(255,255,255,.16); background: #000;
}
.ph-art > .photo img { display: block; width: 100%; height: auto; border-radius: 0; }
.ph-art > .photo--portrait { max-width: 330px; margin-left: auto; }
.ph-chip {
  position: absolute; left: 0; bottom: 0; z-index: 2; width: min(300px, 76%);
  padding: 14px 16px; border-radius: 16px; background: #fff; color: #16181d; text-align: left;
  font-size: .84rem; line-height: 1.45; transform: rotate(-3deg);
  box-shadow: 0 26px 52px -22px rgba(0,0,0,.75), 0 0 0 1px rgba(0,0,0,.04);
}
.ph-chip-k {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #6b7280; margin-bottom: 6px;
}
.ph-chip-k em { font-style: normal; color: #9ca3af; letter-spacing: .06em; }
.ph-chip-t { font-weight: 800; font-size: 1.02rem; line-height: 1.25; color: #111827; }
.ph-chip-s { color: #4b5563; margin-top: 4px; }
.ph-chip-big { font-size: 2rem; font-weight: 800; line-height: 1; color: #111827; font-variant-numeric: tabular-nums; }
.ph-chip-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.ph-pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: .74rem; font-weight: 700;
  background: var(--ph-chip-tint, #eef2ff); color: var(--ph-chip-ink, #3730a3);
}
.ph-pill.is-ok { background: #dcfce7; color: #166534; }
.ph-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 4px; }
.ph-mini div { padding: 8px 6px; border-radius: 10px; background: var(--ph-chip-tint, #eef2ff); text-align: center; }
.ph-mini b { display: block; font-size: 1.15rem; font-weight: 800; color: var(--ph-chip-ink, #3730a3); line-height: 1.1; font-variant-numeric: tabular-nums; }
.ph-mini span { font-size: .66rem; font-weight: 700; color: #6b7280; }
.ph-chip ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.ph-chip li { display: flex; align-items: center; gap: 8px; }
.ph-chip li i { flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-style: normal;
  font-size: .7rem; font-weight: 800; background: #dcfce7; color: #166534; }
.ph-chip li i.is-open { background: #f3f4f6; color: #9ca3af; }
.ph-bars { display: flex; align-items: flex-end; gap: 3px; height: 34px; margin-top: 8px; }
.ph-bars b { flex: 1; border-radius: 3px; background: var(--ph-chip-bar, #6366f1); }
.ph-bubble { padding: 8px 11px; border-radius: 13px; margin-top: 6px; max-width: 92%; }
.ph-bubble.is-them { background: #f3f4f6; border-bottom-left-radius: 4px; }
.ph-bubble.is-coach { background: var(--ph-chip-tint, #eef2ff); color: var(--ph-chip-ink, #3730a3); margin-left: auto; border-bottom-right-radius: 4px; }
.ph-dots { display: flex; gap: 6px; margin-top: 8px; }
.ph-dots b { width: 22px; height: 22px; border-radius: 6px; background: #22c55e; }
.ph-dots b.is-miss { background: #e5e7eb; }
.ph-phases { display: flex; gap: 3px; margin-top: 8px; }
.ph-phases b { height: 10px; border-radius: 3px; background: #e5e7eb; }
.ph-phases b.is-now { background: var(--ph-chip-bar, #6366f1); }

/* A film's play button sits at the foot of its photograph: there the card
   takes the top corner instead. */
.ph-art--film { padding-top: 46px; }
.ph-chip--top { top: 0; bottom: auto; transform: rotate(-2.5deg); }
.ph--designer .ph-chip { width: min(270px, 68%); }
section.ph .pl-try { margin: 18px 0 0; max-width: 640px; text-align: left; color: rgba(255,255,255,.8); }
section.ph .pl-try a { color: #fff; }

/* After the band: a page's jump links or steps, moved out of the hero so the
   band stays the same shape everywhere. */
.ph-after { padding-top: 28px; }

@media (max-width: 920px) {
  .ph-grid { grid-template-columns: 1fr; gap: 26px; }
  .ph-art { max-width: 600px; padding: 4px 4px 40px 18px; }
  .ph-art > .photo--portrait { margin-left: 0; max-width: 300px; }
}
@media (max-width: 600px) {
  section.ph { padding-bottom: 44px; }
  section.ph .hero-stats, .ph-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ph-art { padding: 0 2px 52px 10px; }
  .ph-art > .photo { transform: rotate(1.5deg); border-radius: 16px; }
  .ph-chip { width: 82%; left: 0; font-size: .8rem; padding: 12px 14px; }
  .ph-art--film { padding-top: 64px; padding-bottom: 8px; }
  .ph--designer .ph-chip { width: 72%; }
  section.ph .ph-cta .btn { width: 100%; justify-content: center; }
}

/* ── Each page's colours ────────────────────────────────────────────────────
   --ph-bg the band, --ph-accent the eyebrow, the h1's second line and the
   main button, --ph-ink the button's text, --ph-tex a quiet texture, and the
   card's own tint. One block per page, named for it. */
.ph--players { --ph-bg: linear-gradient(160deg, #0f0a24 0%, #24154f 58%, #3b1f7a 100%); --ph-accent: #c4b5fd; --ph-ink: #1c1240;
  --ph-tex: repeating-linear-gradient(115deg, rgba(255,255,255,.03) 0 2px, transparent 2px 22px);
  --ph-chip-tint: #ede9fe; --ph-chip-ink: #5b21b6; --ph-chip-bar: #7c3aed; }
.ph--clubs { --ph-bg: linear-gradient(180deg, #06101f 0%, #0b2547 60%, #0f3b6e 100%); --ph-accent: #67e8f9; --ph-ink: #042f3b;
  --ph-tex: repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 64px, transparent 64px 128px);
  --ph-chip-tint: #cffafe; --ph-chip-ink: #155e75; --ph-chip-bar: #0891b2; }
.ph--trainers { --ph-bg: linear-gradient(170deg, #041d1c 0%, #0b3b37 60%, #11574f 100%); --ph-accent: #5eead4; --ph-ink: #04302b;
  --ph-tex: radial-gradient(circle at 80% 120%, rgba(94,234,212,.16), transparent 45%);
  --ph-chip-tint: #ccfbf1; --ph-chip-ink: #115e59; --ph-chip-bar: #0d9488; }
.ph--curriculum { --ph-bg: linear-gradient(180deg, #0d1a12 0%, #163a26 60%, #1f5236 100%); --ph-accent: #fcd34d; --ph-ink: #2b1d00;
  --ph-tex: repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 28px);
  --ph-chip-tint: #fef3c7; --ph-chip-ink: #92400e; --ph-chip-bar: #d97706; }
.ph--audio { --ph-bg: linear-gradient(165deg, #150a22 0%, #351443 58%, #5a1a55 100%); --ph-accent: #f9a8d4; --ph-ink: #3b0a26;
  --ph-tex: repeating-radial-gradient(circle at 85% 55%, rgba(255,255,255,.05) 0 2px, transparent 2px 26px);
  --ph-chip-tint: #fce7f3; --ph-chip-ink: #9d174d; --ph-chip-bar: #db2777; }
.ph--coach { --ph-bg: linear-gradient(170deg, #0a1024 0%, #172554 60%, #1e3a8a 100%); --ph-accent: #fcd34d; --ph-ink: #2b1d00;
  --ph-tex: radial-gradient(circle at 15% 110%, rgba(252,211,77,.12), transparent 40%);
  --ph-chip-tint: #fef3c7; --ph-chip-ink: #78350f; --ph-chip-bar: #f59e0b; }
.ph--scan { --ph-bg: linear-gradient(165deg, #160b07 0%, #3b140b 58%, #6a2412 100%); --ph-accent: #fdba74; --ph-ink: #3a1405;
  --ph-tex: repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 3px, transparent 3px 30px);
  --ph-chip-tint: #ffedd5; --ph-chip-ink: #9a3412; --ph-chip-bar: #ea580c; }
.ph--season { --ph-bg: linear-gradient(180deg, #071a10 0%, #0f3d22 60%, #14532d 100%); --ph-accent: #bef264; --ph-ink: #1a2e05;
  --ph-tex: repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 70px, transparent 70px 140px);
  --ph-chip-tint: #ecfccb; --ph-chip-ink: #3f6212; --ph-chip-bar: #65a30d; }
.ph--games { --ph-bg: linear-gradient(165deg, #0c1230 0%, #22195a 58%, #3b2380 100%); --ph-accent: #ffd166; --ph-ink: #2b1d00;
  --ph-tex: radial-gradient(circle at 90% 20%, rgba(255,209,102,.14), transparent 35%);
  --ph-chip-tint: #fef3c7; --ph-chip-ink: #92400e; --ph-chip-bar: #f59e0b; }
.ph--clubhouse { --ph-bg: linear-gradient(170deg, #1a1008 0%, #3d2410 58%, #5c3714 100%); --ph-accent: #fcd34d; --ph-ink: #2b1d00;
  --ph-tex: repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 2px, transparent 2px 18px);
  --ph-chip-tint: #fef3c7; --ph-chip-ink: #92400e; --ph-chip-bar: #d97706; }
.ph--designer { --ph-bg: linear-gradient(180deg, #06162a 0%, #0b2f55 60%, #0e4277 100%); --ph-accent: #7dd3fc; --ph-ink: #082f49;
  --ph-tex: repeating-linear-gradient(0deg, rgba(125,211,252,.07) 0 1px, transparent 1px 24px),
            repeating-linear-gradient(90deg, rgba(125,211,252,.07) 0 1px, transparent 1px 24px);
  --ph-chip-tint: #e0f2fe; --ph-chip-ink: #075985; --ph-chip-bar: #0284c7; }
.ph--video { --ph-bg: linear-gradient(170deg, #09090f 0%, #1a1a2c 60%, #2a2346 100%); --ph-accent: #fda4af; --ph-ink: #4c0519;
  --ph-tex: repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 40px);
  --ph-chip-tint: #ffe4e6; --ph-chip-ink: #9f1239; --ph-chip-bar: #e11d48; }

/* AI Video Analysis has no hero photograph: its picture is a clip being read,
   a drill photograph in a player's frame with the marked parts on its bar. */
.ph-clip { position: relative; border-radius: 22px; overflow: hidden; transform: rotate(2.4deg); background: #000;
  border: 1px solid rgba(255,255,255,.16); box-shadow: 0 34px 70px -30px rgba(0,0,0,.85); }
.ph-clip img { display: block; width: 100%; height: auto; opacity: .92; }
.ph-clip-bar { position: absolute; left: 14px; right: 14px; bottom: 14px; height: 8px; border-radius: 999px; background: rgba(255,255,255,.28); }
.ph-clip-bar i { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: var(--ph-accent, #fda4af); }
.ph-clip-bar b { position: absolute; top: -5px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transform: translateX(-50%);
  box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.ph-clip-tag { position: absolute; left: 14px; top: 14px; padding: 4px 10px; border-radius: 999px; font-size: .72rem; font-weight: 800;
  background: rgba(0,0,0,.6); color: #fff; letter-spacing: .04em; }
@media (max-width: 600px) { .ph-clip { transform: rotate(1.5deg); border-radius: 16px; } }