/* ===================================================================
   Players page.

   Built to the approved references. Everything here is scoped to the
   .pl- prefix so nothing leaks onto the other twenty pages.

   Sections 7, 8 and 9 are image-free by design. Do not add photographs
   to .pl-brands, .pl-journey or .pl-u18.
   =================================================================== */

/* ---------------------- decorative wall type ---------------------- */
/* The reference has this typography painted on the court wall. Setting
   it as live text keeps it crisp at any width, lets it scale with the
   layout and keeps it out of the accessibility tree — none of which a
   baked-in photograph would do. */
.pl-wall {
  position: absolute;
  font-family: var(--display);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(214, 233, 255, 0.11);
  pointer-events: none;
  user-select: none;
  z-index: 1;
}
.pl-wall-a { top: 16%; left: 40%; font-size: clamp(22px, 2.5vw, 40px); }
.pl-wall-b { top: 12%; right: 3%; font-size: clamp(24px, 2.9vw, 46px); text-align: right; }
.pl-wall-c { top: 22%; right: 4%; font-size: clamp(20px, 2.2vw, 34px); text-align: right; }

@media (max-width: 900px) {
  .pl-wall-a { display: none; }
  .pl-wall-b, .pl-wall-c { top: 8%; right: 5%; opacity: 0.75; }
}

/* ============================ 1 — HERO ============================ */
.pl-hero {
  position: relative;
  min-height: 560px;
  height: 82svh;
  max-height: 860px;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  background: #02101f;
  color: #fff;
}
.pl-hero-art { position: absolute; inset: 0; z-index: 0; }
.pl-hero-art img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 62% 46%;
  will-change: transform;
}
.pl-hero-shade {
  position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(90deg, rgba(2, 14, 28, 0.95) 6%, rgba(2, 14, 28, 0.72) 38%, rgba(2, 14, 28, 0.18) 70%),
    linear-gradient(0deg, rgba(2, 14, 28, 0.6), transparent 42%);
}
.pl-hero-copy {
  position: relative;
  z-index: 3;
  width: min(690px, 52%);
  padding: 120px var(--pad-x) 40px;
}
.pl-hero-lede {
  font-size: var(--text-lede);
  color: #e7f0ff;
  max-width: 52ch;
  margin: 20px 0 0;
}

/* Trust row. A list, because that is what it is. */
.pl-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 30px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}
.pl-trust li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-meta);
  color: #b4d4f1;
}
.pl-trust .icon { color: var(--cyan); width: 20px; height: 20px; }

@media (max-width: 1000px) {
  .pl-hero { height: auto; max-height: none; min-height: 0; }
  .pl-hero-copy { width: 100%; padding-top: 108px; padding-bottom: 52px; }
  .pl-hero-shade {
    background: linear-gradient(0deg, rgba(2, 14, 28, 0.96) 0%, rgba(2, 14, 28, 0.84) 38%, rgba(2, 14, 28, 0.38) 72%, rgba(2, 14, 28, 0.2) 100%);
  }
  .pl-hero-art img { object-position: 60% 30%; }
  .pl-trust { flex-direction: column; gap: 10px; }
}

/* ==================== shared two-column rhythm ==================== */
.pl-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: clamp(32px, 4.5vw, 72px);
  align-items: center;
}
@media (max-width: 960px) { .pl-split { grid-template-columns: 1fr; } }

/* A quoted line that closes a block of argument. */
.pl-pull {
  border-left: 3px solid var(--blue);
  padding: 2px 0 2px 18px;
  margin: 22px 0 0;
  font-size: var(--text-lede);
  font-weight: 500;
  color: var(--ink);
  max-width: 46ch;
}
.dark .pl-pull { border-color: var(--cyan); color: #e7f0ff; }

/* ==================== 2 — WHAT ACTUALLY CHANGES =================== */
.pl-record-shot {
  position: relative;
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: 16 / 11;
  background: #0b1f38;
}
.pl-record-shot > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 45% 50%;
  will-change: transform;
}

/* The workflow panel. Built in HTML beside the photograph, never part
   of it, so the labels stay selectable and legible at any size. */
.pl-recorded {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  width: min(252px, 52%);
  padding: 16px 16px 14px;
  border: 1px solid rgba(25, 200, 255, 0.34);
  border-radius: 10px;
  background: rgba(4, 18, 36, 0.86);
  backdrop-filter: blur(9px);
}
.pl-recorded-title {
  display: block;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 12px;
}
.pl-recorded ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.pl-recorded li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: #e7f0ff;
}
.pl-tick {
  display: grid;
  place-items: center;
  width: 19px; height: 19px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid rgba(60, 230, 160, 0.55);
  color: #46e6a4;
}
.pl-tick .icon { width: 12px; height: 12px; color: inherit; }

/* Revealed in sequence on entry. */
@media (prefers-reduced-motion: no-preference) {
  [data-sequence] li { opacity: 0; transform: translateX(10px); }
  [data-sequence].is-running li {
    animation: pl-tick-in 0.42s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
  }
  [data-sequence].is-running li:nth-child(1) { animation-delay: 0.10s; }
  [data-sequence].is-running li:nth-child(2) { animation-delay: 0.28s; }
  [data-sequence].is-running li:nth-child(3) { animation-delay: 0.46s; }
  [data-sequence].is-running li:nth-child(4) { animation-delay: 0.64s; }
  @keyframes pl-tick-in { to { opacity: 1; transform: none; } }
}

@media (max-width: 520px) {
  .pl-recorded { position: static; width: auto; margin-top: 10px; backdrop-filter: none; }
  .pl-record-shot { aspect-ratio: auto; display: grid; }
  .pl-record-shot > img { position: static; height: 240px; }
}

/* ======================== 3 — THE LADDER ========================== */
/* A bounded scroll sequence. The track is taller than the viewport;
   the stage inside it is pinned for exactly that distance, so the
   sequence cannot trap the page — scrolling past it always continues. */
.pl-ladder {
  position: relative;
  background:
    radial-gradient(120% 90% at 50% 0%, #06264a 0%, transparent 60%),
    var(--navy);
  color: #fff;
}
.pl-ladder-track { position: relative; }
.pl-ladder-stage {
  position: sticky;
  top: 0;
  /* A definite height, not a minimum. The cups sit in the 1fr row, and
     a fractional row can only resolve against a definite container —
     with min-height it sized itself from its content instead and the
     stage overflowed the screen by 50-120px depending on the viewport. */
  height: 100svh;
  min-height: 560px;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: clamp(8px, 1.4svh, 16px);
  padding: clamp(66px, 7.5svh, 92px) var(--pad-x) clamp(20px, 3svh, 34px);
  overflow: hidden;
}
.pl-ladder-glow {
  position: absolute;
  inset: auto 0 22% 0;
  height: 40%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(0, 98, 255, 0.3), transparent 70%);
  pointer-events: none;
}
.pl-ladder-intro { max-width: 760px; position: relative; z-index: 2; }
.pl-ladder-intro p { color: #cfe0f3; }

/* The four cups share one row — the grid's 1fr — so they take exactly
   the space the intro, the level cards and the note leave behind.

   Stature is expressed with a transform rather than a height, because
   a transform does not feed back into layout. Sizing the images by
   height made the row's height depend on its content, which is the
   circularity that broke this twice. */
.pl-cups {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: end;
  gap: clamp(8px, 1.5vw, 26px);
  min-height: 0;
}
.pl-cup {
  --stature: 1;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  min-height: 0;
  transition: opacity var(--pl-enter, 620ms) var(--pl-ease, ease),
              filter var(--pl-enter, 620ms) var(--pl-ease, ease);
}
/* Each level stands taller than the last. */
.pl-cup:nth-child(1) { --stature: 0.68; }
.pl-cup:nth-child(2) { --stature: 0.79; }
.pl-cup:nth-child(3) { --stature: 0.89; }
.pl-cup:nth-child(4) { --stature: 1; }

.pl-cup-art {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  min-height: 0;
  padding-bottom: 6px;
}
.pl-cup-art img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transform: scale(var(--stature));
  transform-origin: 50% 100%;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), filter 0.55s ease;
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.55));
}

.pl-plinth {
  width: min(100%, 190px);
  padding: 7px 10px;
  border-radius: 3px;
  background: linear-gradient(180deg, #0b1f38, #03182b);
  border: 1px solid rgba(25, 200, 255, 0.28);
  box-shadow: 0 0 22px -8px rgba(25, 200, 255, 0.5);
  text-align: center;
}
.pl-cup:not([data-active]) .pl-plinth { opacity: 0.8; }
.pl-plinth span {
  font-family: var(--display);
  font-size: clamp(12px, 1vw, 14px);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #cfe6ff;
}

/* The four level cards. Always readable; the active one lifts. */
.pl-levels {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(8px, 1.5vw, 26px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pl-level {
  padding: 14px 16px 16px;
  border: 1px solid rgba(120, 175, 225, 0.2);
  border-radius: 9px;
  background: rgba(7, 26, 48, 0.62);
  transition: border-color 0.4s ease, background 0.4s ease, transform 0.4s ease;
}
.pl-level[data-active] {
  border-color: rgba(25, 200, 255, 0.55);
  background: rgba(10, 38, 68, 0.85);
  transform: translateY(-3px);
}
.pl-level-eyebrow {
  margin: 0 0 6px;
  font-family:var(--ds-ui);
  font-size:var(--ds-eyebrow);
  font-weight:600;
  letter-spacing:.14em;
  text-transform: uppercase;
  color: var(--cyan);
}
.pl-level h3 { font-size:var(--ds-card); margin-bottom: 6px; }
.pl-level p { margin: 0; font-size:var(--ds-copy); color: #cfe0f3; }

.pl-ladder-note {
  position: relative;
  z-index: 2;
  margin: 0;
  text-align: center;
  font-size: var(--text-small);
  color: #a2bfda;
}

/* Under 1000px, or without the pinned sequence, this is a plain
   readable stack — every level still complete. */
@media (max-width: 1000px) {
  .pl-ladder-stage {
    position: static;
    min-height: 0;
    display: block;
    padding: clamp(56px, 7svh, 80px) var(--pad-x);
  }
  .pl-cups { margin: 26px 0 18px; }

  /* Stacked layout: there is no pinned stage and so no definite height
     for a fractional row to resolve against. The art row must size to
     its content here, or the cups collapse to nothing — which is
     exactly what happened. */
  .pl-cup { grid-template-rows: auto auto; }
  .pl-cup-art { min-height: 0; height: auto; }
  .pl-cup-art img { max-height: none; }
  .pl-cup:nth-child(1) .pl-cup-art img { max-height: 108px; }
  .pl-cup:nth-child(2) .pl-cup-art img { max-height: 128px; }
  .pl-cup:nth-child(3) .pl-cup-art img { max-height: 148px; }
  .pl-cup:nth-child(4) .pl-cup-art img { max-height: 168px; }
  /* Stature is already in the max-heights above; the transform would
     shrink them a second time. */
  .pl-cup .pl-cup-art img { transform: none; }
  .pl-cup:not([data-active]) { opacity: 1; filter: none; }
  .pl-cup { opacity: 1; filter: none; }
  .pl-plinth { display: none; }
  .pl-levels { grid-template-columns: 1fr 1fr; gap: 12px; }
  .pl-ladder-note { margin-top: 18px; }
}
@media (max-width: 620px) {
  .pl-cup:nth-child(1) .pl-cup-art img { max-height: 82px; }
  .pl-cup:nth-child(2) .pl-cup-art img { max-height: 98px; }
  .pl-cup:nth-child(3) .pl-cup-art img { max-height: 114px; }
  .pl-cup:nth-child(4) .pl-cup-art img { max-height: 130px; }
  .pl-levels { grid-template-columns: 1fr; }
}

/* ================ 4 — SELECTION, NOT CONNECTIONS ================== */
.pl-emblems {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
.pl-emblem-line {
  position: absolute;
  top: 38px;
  left: 16%;
  width: 68%;
  height: 2px;
  overflow: visible;
}
.pl-emblem-line line {
  stroke: rgba(0, 98, 255, 0.4);
  stroke-width: 2;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
[data-connect].is-running .pl-emblem-line line {
  animation: pl-draw 1s cubic-bezier(0.65, 0, 0.35, 1) 0.15s forwards;
}
@keyframes pl-draw { to { stroke-dashoffset: 0; } }

.pl-emblem-mark {
  display: grid;
  place-items: center;
  width: 76px; height: 76px;
  margin: 0 auto 16px;
  border-radius: 50%;
  border: 2px solid var(--blue);
  background: #fff;
  color: var(--blue);
  position: relative;
  z-index: 2;
  transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), box-shadow 0.3s ease;
}
.pl-emblem-mark .icon { width: 32px; height: 32px; }
.pl-emblem:hover .pl-emblem-mark {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px -12px rgba(0, 98, 255, 0.7);
}
.pl-emblem h3 { font-size:var(--ds-card); margin-bottom: 8px; }
.pl-emblem p { margin: 0; font-size:var(--ds-copy); color: var(--body-text); }

@media (max-width: 620px) {
  .pl-emblems { grid-template-columns: 1fr; gap: 26px; }
  .pl-emblem-line { display: none; }
}

/* ===================== 5 — YOUR PLAYER PROFILE ==================== */
.pl-profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.12fr) minmax(0, 0.96fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
}
.pl-profile-art { position: relative; min-height: 420px; display: flex; align-items: flex-end; justify-content: center; }
.pl-profile-player {
  width: 78%;
  max-width: 340px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 26px 34px rgba(4, 22, 44, 0.32));
  will-change: transform;
}

/* The phone is HTML. It illustrates the shape of the profile screen
   and deliberately shows no figures — there are no real ones yet. */
.pl-phone {
  position: absolute;
  right: 0;
  bottom: 6%;
  width: min(210px, 56%);
  aspect-ratio: 9 / 18.5;
  border-radius: 26px;
  padding: 7px;
  background: linear-gradient(160deg, #082b4b, #03182b);
  box-shadow: 0 26px 48px -18px rgba(4, 22, 44, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.07) inset;
  will-change: transform;
}
.pl-phone-screen {
  height: 100%;
  border-radius: 20px;
  background: linear-gradient(180deg, #0a2341, #03182b);
  padding: 14px 12px;
  overflow: hidden;
  position: relative;
}
.pl-phone-bar {
  display: block;
  width: 34%; height: 4px;
  margin: 0 auto 12px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.22);
}
.pl-phone-brand {
  margin: 0 0 12px;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--cyan);
  text-align: center;
}
.pl-phone-id { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.pl-phone-avatar {
  width: 30px; height: 30px; flex: 0 0 auto;
  border-radius: 50%;
  background: linear-gradient(145deg, #2c6fd0, #073b6d);
}
.pl-phone-lines { flex: 1 1 auto; display: grid; gap: 5px; }
.pl-phone-lines i { display: block; height: 5px; border-radius: 3px; background: rgba(160, 205, 245, 0.34); }
.pl-phone-lines i:last-child { width: 58%; background: rgba(25, 200, 255, 0.4); }
.pl-phone-nav { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.pl-phone-nav li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 11px;
  color: #c3daf1;
}
.pl-phone-nav .icon { width: 13px; height: 13px; color: var(--cyan); }

.pl-gets ul { margin: 14px 0 0; padding: 0; list-style: none; }
.pl-gets li {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--text-small);
}
.pl-gets li:first-child { border-top: 1px solid var(--line); }
.pl-gets-mark {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  flex: 0 0 auto;
  border-radius: 50%;
  /* #e7f0ff, not #e7f0ff: brand blue on the old tint measured 4.37:1,
     just under AA for the emphasised text inside it. Lifting the tint
     two steps clears 4.5:1 without touching the brand colour. */
  background: #e7f0ff;
  color: var(--blue);
}
.pl-gets-mark .icon { width: 17px; height: 17px; }

@media (max-width: 1100px) {
  .pl-profile-grid { grid-template-columns: 1fr 1fr; }
  .pl-profile-art { grid-column: 1 / -1; order: 3; min-height: 380px; }
  .pl-gets { order: 2; }
}
@media (max-width: 700px) {
  .pl-profile-grid { grid-template-columns: 1fr; }
  .pl-profile-art { min-height: 340px; }
  .pl-profile-player { width: 62%; }
  .pl-phone { width: 42%; right: 4%; }
}

/* ==================== 6 — HOW RANKINGS WORK ======================= */
.pl-ppi-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.8fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 48px);
  align-items: center;
}
.pl-ppi-hub {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  margin-inline: auto;
  width: min(300px, 100%);
}
.pl-ppi-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(25, 200, 255, 0.28);
}
.pl-ppi-ring-2 { inset: 13%; border-color: rgba(25, 200, 255, 0.45); border-style: dashed; }
.pl-ppi-core {
  position: relative;
  display: grid;
  place-items: center;
  width: 58%; height: 58%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, rgba(25, 200, 255, 0.3), rgba(4, 22, 44, 0.9) 68%);
  box-shadow: 0 0 46px -6px rgba(25, 200, 255, 0.45), inset 0 0 30px rgba(25, 200, 255, 0.18);
  font-family: var(--display);
  font-size: clamp(30px, 3.4vw, 50px);
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #edf6ff;
}
@media (prefers-reduced-motion: no-preference) {
  .pl-ppi-hub.is-running .pl-ppi-ring-1 { animation: pl-ring 5.5s linear infinite; }
  .pl-ppi-hub.is-running .pl-ppi-ring-2 { animation: pl-ring 8s linear infinite reverse; }
  @keyframes pl-ring { to { transform: rotate(360deg); } }
}

.pl-feeds ul { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.pl-feeds li {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 0;
  font-size: var(--text-small);
  color: #cfe0f3;
  position: relative;
}
.pl-feed-mark {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid rgba(25, 200, 255, 0.45);
  background: rgba(8, 30, 56, 0.8);
  color: var(--cyan);
}
.pl-feed-mark .icon { width: 17px; height: 17px; }
/* A connector traced from the hub towards each factor. */
.pl-feeds li::before {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  width: clamp(14px, 3vw, 46px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(25, 200, 255, 0.6));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
[data-trace].is-running li::before { transform: scaleX(1); }
[data-trace].is-running li:nth-child(1)::before { transition-delay: 0.05s; }
[data-trace].is-running li:nth-child(2)::before { transition-delay: 0.14s; }
[data-trace].is-running li:nth-child(3)::before { transition-delay: 0.23s; }
[data-trace].is-running li:nth-child(4)::before { transition-delay: 0.32s; }
[data-trace].is-running li:nth-child(5)::before { transition-delay: 0.41s; }

@media (max-width: 1000px) {
  .pl-ppi-grid { grid-template-columns: 1fr; }
  .pl-ppi-hub { width: min(230px, 62%); order: 3; }
  .pl-feeds { order: 2; }
  .pl-feeds li::before { display: none; }
}

/* ========================= 7 — BRANDS ============================= */
.pl-brands-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.pl-dossier-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(46px, 7vw, 96px) minmax(140px, 0.62fr);
  align-items: center;
}
.pl-dossier {
  border-radius: 12px;
  padding: 20px 20px 16px;
  background: linear-gradient(170deg, #0a2341, #00142c);
  border: 1px solid rgba(25, 200, 255, 0.2);
}
.pl-dossier-title {
  margin: 0 0 16px;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: #e7f0ff;
}
.pl-dossier ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.pl-dossier li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
}
.pl-dossier-mark {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  flex: 0 0 auto;
  border-radius: 8px;
  background: linear-gradient(150deg, #0062d5, #004099);
  color: #fff;
}
.pl-dossier-mark .icon { width: 18px; height: 18px; color: #fff; }
.pl-dossier-text { display: grid; gap: 2px; min-width: 0; }
.pl-dossier-text strong { font-size: var(--text-small); color: #f7fbff; font-weight: 600; }
.pl-dossier-text em { font-style: normal; font-size: 13px; color: #a2bfda; }

.pl-wires { width: 100%; height: 260px; overflow: visible; }
.pl-wires path {
  fill: none;
  stroke: rgba(0, 98, 255, 0.45);
  stroke-width: 1.4;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
[data-pulse].is-running .pl-wires path { animation: pl-draw 0.9s cubic-bezier(0.65, 0, 0.35, 1) forwards; }
[data-pulse].is-running .pl-wires path:nth-child(2) { animation-delay: 0.1s; }
[data-pulse].is-running .pl-wires path:nth-child(3) { animation-delay: 0.2s; }
[data-pulse].is-running .pl-wires path:nth-child(4) { animation-delay: 0.3s; }

.pl-opportunity {
  text-align: center;
  padding: 22px 16px;
  border: 1.5px solid var(--blue);
  border-radius: 12px;
  background: #fff;
}
.pl-opportunity-mark {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  margin: 0 auto 12px;
  border-radius: 10px;
  border: 1.5px solid rgba(0, 98, 255, 0.4);
  color: var(--blue);
}
.pl-opportunity-mark .icon { width: 26px; height: 26px; }
.pl-opportunity h3 { font-size:var(--ds-card); margin-bottom: 6px; }
.pl-opportunity p { margin: 0; font-size:var(--ds-copy); color: var(--body-text); }

/* The consent line. Full width, stationary, high contrast — it is the
   most important sentence in this section and it never animates. */
.pl-consent {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  max-width: var(--maxw);
  margin: clamp(30px, 4vw, 52px) auto 0;
  padding: 16px 22px;
  border-radius: 10px;
  /* #e7f0ff, not #e7f0ff: brand blue on the old tint measured 4.37:1,
     just under AA for the emphasised text inside it. Lifting the tint
     two steps clears 4.5:1 without touching the brand colour. */
  background: #e7f0ff;
  color: #072f5f;
  font-size: var(--text-small);
  line-height: 1.5;
}
.pl-consent strong { color: var(--blue); }
.pl-consent-mark { display: grid; place-items: center; flex: 0 0 auto; color: var(--blue); }
.pl-consent-mark .icon { width: 24px; height: 24px; }

@media (max-width: 1000px) {
  .pl-brands-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .pl-dossier-wrap { grid-template-columns: 1fr; gap: 0; }
  .pl-wires { height: 46px; transform: rotate(90deg) scaleX(0.18); }
  .pl-opportunity { margin-top: 14px; }
  .pl-consent { flex-direction: column; text-align: center; gap: 10px; }
}

/* ======================== 8 — YOUR JOURNEY ======================== */
.pl-journey {
  background: linear-gradient(120deg, #0b1f38, var(--navy) 60%);
  padding-block: clamp(38px, 5svh, 62px);
}
.pl-journey-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr);
  gap: clamp(26px, 4vw, 60px);
  align-items: center;
}
.pl-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: end;
  gap: 8px;
  margin: 0;
  padding: 26px 0 18px;
  list-style: none;
  min-height: 190px;
}
.pl-steps-line {
  position: absolute;
  inset: 26px 0 18px 0;
  width: 100%;
  height: calc(100% - 44px);
  overflow: visible;
}
.pl-steps-line path {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 7px rgba(25, 200, 255, 0.5));
}
[data-steps].is-running .pl-steps-line path {
  animation: pl-draw 1.5s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

/* Each stage sits a step higher than the last. */
.pl-step {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding-bottom: calc(var(--i) * 26px);
  min-width: 0;
}
.pl-step-n {
  font-family: var(--display);
  font-size: clamp(30px, 3.6vw, 54px);
  font-weight: 800;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.6px rgba(120, 190, 240, 0.55);
  margin-bottom: 2px;
}
.pl-step-label {
  font-family: var(--display);
  font-size: var(--text-card);
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
}
.pl-step-dot {
  position: absolute;
  left: 2px;
  bottom: calc(var(--i) * 26px - 12px);
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 4px rgba(25, 200, 255, 0.18);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
}
[data-steps].is-running .pl-step-dot { opacity: 1; transform: none; }
[data-steps].is-running .pl-step:nth-child(2) .pl-step-dot { transition-delay: 0.35s; }
[data-steps].is-running .pl-step:nth-child(3) .pl-step-dot { transition-delay: 0.65s; }
[data-steps].is-running .pl-step:nth-child(4) .pl-step-dot { transition-delay: 0.95s; }
[data-steps].is-running .pl-step:nth-child(5) .pl-step-dot { transition-delay: 1.25s; }

@media (max-width: 900px) {
  .pl-journey-grid { grid-template-columns: 1fr; }
  .pl-steps { grid-template-columns: 1fr; gap: 14px; min-height: 0; padding: 8px 0 0; }
  .pl-step { flex-direction: row; align-items: center; gap: 14px; padding-bottom: 0; }
  .pl-step-n { margin-bottom: 0; font-size: 30px; }
  .pl-steps-line, .pl-step-dot { display: none; }
}

/* ======================= 9 — YOUNGER PLAYERS ====================== */
.pl-u18-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(26px, 4vw, 64px);
  align-items: center;
}
.pl-u18-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 230px;
}
.pl-u18-type {
  font-family: var(--display);
  font-size: clamp(120px, 20vw, 260px);
  font-weight: 800;
  line-height: 0.82;
  letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 3px rgba(0, 98, 255, 0.55);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.pl-u18-art.is-visible .pl-u18-type { opacity: 1; transform: none; }
.pl-u18-badge {
  position: absolute;
  right: 14%;
  bottom: 16%;
  display: grid;
  place-items: center;
  width: clamp(54px, 7vw, 82px);
  height: clamp(54px, 7vw, 82px);
  color: var(--blue);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.5s ease 0.25s, transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.25s;
}
.pl-u18-art.is-visible .pl-u18-badge { opacity: 1; transform: none; }
.pl-u18-badge > .icon { width: 100%; height: 100%; stroke-width: 1.2; }
.pl-u18-check {
  position: absolute;
  display: grid;
  place-items: center;
  inset: 0;
  color: var(--blue);
}
.pl-u18-check .icon { width: 42%; height: 42%; stroke-width: 3; }
.pl-u18-slashes {
  position: absolute;
  left: 16%;
  bottom: 8%;
  width: clamp(60px, 9vw, 116px);
  height: 26px;
  background: repeating-linear-gradient(115deg, var(--cyan) 0 5px, transparent 5px 13px);
  opacity: 0;
  transition: opacity 0.5s ease 0.4s;
}
.pl-u18-art.is-visible .pl-u18-slashes { opacity: 0.6; }

.pl-u18-note {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 22px 0 0;
  padding: 13px 18px;
  border-radius: 9px;
  /* #e7f0ff, not #e7f0ff: brand blue on the old tint measured 4.37:1,
     just under AA for the emphasised text inside it. Lifting the tint
     two steps clears 4.5:1 without touching the brand colour. */
  background: #e7f0ff;
  color: #072f5f;
  font-weight: 600;
  font-size: var(--text-small);
}
.pl-u18-note-mark { display: grid; place-items: center; color: var(--blue); flex: 0 0 auto; }
.pl-u18-note-mark .icon { width: 22px; height: 22px; }

@media (max-width: 900px) {
  .pl-u18-grid { grid-template-columns: 1fr; }
  .pl-u18-art { order: 2; min-height: 180px; }
  .pl-u18-grid .section-copy { order: 1; }
}

/* ========================= 10 — START HERE ======================== */
.pl-start {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 460px;
  overflow: hidden;
  isolation: isolate;
  background: #03182b;
  color: #fff;
  padding-block: clamp(48px, 7svh, 84px);
}
.pl-start-art { position: absolute; inset: 0; z-index: 0; }
.pl-start-art img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 58% 60%;
  will-change: transform;
}
.pl-start-shade {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(90deg, rgba(3, 17, 34, 0.96) 8%, rgba(3, 17, 34, 0.74) 42%, rgba(3, 17, 34, 0.24) 76%);
}
.pl-start-copy {
  position: relative;
  z-index: 3;
  width: min(640px, 54%);
  padding-inline: var(--pad-x);
}
@media (max-width: 900px) {
  .pl-start-copy { width: 100%; }
  .pl-start-shade {
    background: linear-gradient(0deg, rgba(3, 17, 34, 0.96) 0%, rgba(3, 17, 34, 0.86) 45%, rgba(3, 17, 34, 0.42) 100%);
  }
}

/* ------------------------- reduced motion ------------------------- */
/* Every sequence resolves to its finished, readable state. */
@media (prefers-reduced-motion: reduce) {
  [data-sequence] li { opacity: 1; transform: none; animation: none; }
  .pl-emblem-line line,
  .pl-wires path,
  .pl-steps-line path { stroke-dashoffset: 0; animation: none; }
  .pl-feeds li::before { transform: scaleX(1); transition: none; }
  .pl-step-dot { opacity: 1; transform: none; transition: none; }
  .pl-u18-type, .pl-u18-badge { opacity: 1; transform: none; transition: none; }
  .pl-u18-slashes { opacity: 0.6; transition: none; }
  .pl-ppi-ring { animation: none !important; }
  .pl-cup, .pl-level { opacity: 1; filter: none; }
  .pl-hero-art img, .pl-record-shot > img, .pl-profile-player,
  .pl-phone, .pl-start-art img { transform: none !important; }
}

/* ===================================================================
   MOTION REWORK

   Four things were wrong: the effects were too quiet to register, the
   cyan glow stopped at the hero instead of running through the page,
   the timing arrived flat, and the cups did not carry enough presence.

   The system below fixes all four from one set of tokens, so the whole
   page shares a rhythm instead of each section inventing its own.
   =================================================================== */

:root {
  /* One rhythm for the page. Enter is unhurried; exit is faster, which
     is what makes motion feel responsive rather than sluggish. */
  --pl-enter: 620ms;
  --pl-exit: 380ms;
  --pl-ease: cubic-bezier(0.16, 0.84, 0.32, 1);
  --pl-stagger: 90ms;
  --pl-glow: rgba(25, 200, 255, 0.55);
}

/* ------------------------- ambient glow --------------------------- */
/* The glow is a property of the page, not of the hero. Each section
   carries a soft cyan bloom that brightens as it arrives, so the light
   travels down the page with the reader. */
.pl-changes, .pl-selection, .pl-profile, .pl-ppi,
.pl-brands, .pl-journey, .pl-u18 { position: relative; isolation: isolate; }

.pl-changes::before, .pl-selection::before, .pl-profile::before,
.pl-ppi::before, .pl-brands::before, .pl-journey::before, .pl-u18::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.1s ease;
  background: radial-gradient(70% 55% at 78% 30%, rgba(0, 98, 255, 0.10), transparent 70%);
}
.dark.pl-ppi::before, .dark.pl-journey::before {
  background: radial-gradient(75% 60% at 74% 34%, rgba(25, 200, 255, 0.20), transparent 72%);
}
.is-lit::before { opacity: 1; }

/* A hairline of cyan light that draws across the top of each section
   as it arrives, tying the sections into one run. */
.pl-changes, .pl-selection, .pl-profile, .pl-ppi,
.pl-brands, .pl-journey, .pl-u18, .pl-start { border-top: 1px solid transparent; }
.pl-changes::after, .pl-selection::after, .pl-profile::after,
.pl-ppi::after, .pl-brands::after, .pl-journey::after, .pl-u18::after {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  height: 1px;
  width: 0;
  background: linear-gradient(90deg, var(--blue), var(--cyan) 45%, transparent);
  transition: width 1.4s var(--pl-ease);
  pointer-events: none;
}
.is-lit::after { width: 100%; }

/* --------------------- stronger arrival motion -------------------- */
/* The old reveal moved 14px and faded. At that size it read as nothing
   happening. This travels further, scales fractionally and lands with
   a firmer curve, which registers without being showy. */
@media (prefers-reduced-motion: no-preference) {
  .pl-changes .reveal, .pl-selection .reveal, .pl-profile .reveal,
  .pl-ppi .reveal, .pl-brands .reveal, .pl-journey .reveal, .pl-u18 .reveal,
  .pl-start .reveal {
    opacity: 0;
    transform: translateY(34px) scale(0.985);
    transition: opacity var(--pl-enter) var(--pl-ease),
                transform var(--pl-enter) var(--pl-ease);
  }
  .is-visible.reveal,
  .reveal.is-visible { opacity: 1; transform: none; }

  /* Second column arrives after the first, so the eye is led rather
     than shown everything at once. */
  .pl-split > .reveal:nth-child(2),
  .pl-profile-grid > .reveal:nth-child(2),
  .pl-ppi-grid > .reveal:nth-child(2),
  .pl-brands-grid > .reveal:nth-child(2),
  .pl-journey-grid > .reveal:nth-child(2),
  .pl-u18-grid > .reveal:nth-child(2) { transition-delay: var(--pl-stagger); }
  .pl-profile-grid > .reveal:nth-child(3),
  .pl-ppi-grid > .reveal:nth-child(3) { transition-delay: calc(var(--pl-stagger) * 2); }
}

/* ------------------------- glowing marks -------------------------- */
/* The circular marks pick up the cyan light when their section is lit,
   so the glow is carried by the content rather than sitting behind it. */
.pl-emblem-mark, .pl-gets-mark, .pl-feed-mark,
.pl-dossier-mark, .pl-opportunity-mark, .pl-tick {
  transition: box-shadow var(--pl-enter) var(--pl-ease),
              border-color var(--pl-enter) var(--pl-ease);
}
.is-lit .pl-emblem-mark { box-shadow: 0 0 0 6px rgba(0, 98, 255, 0.07), 0 8px 26px -14px rgba(0, 98, 255, 0.85); }
.is-lit .pl-feed-mark { box-shadow: 0 0 22px -6px var(--pl-glow); }
.is-lit .pl-dossier-mark { box-shadow: 0 0 20px -8px rgba(40, 140, 255, 0.9); }
.is-lit .pl-opportunity-mark { box-shadow: 0 0 0 5px rgba(0, 98, 255, 0.06); }
.is-lit .pl-tick { box-shadow: 0 0 14px -4px rgba(70, 230, 164, 0.8); }

/* The PPI core breathes once the section is lit. */
.is-lit .pl-ppi-core {
  animation: pl-breathe 4.2s ease-in-out infinite;
}
@keyframes pl-breathe {
  0%, 100% { box-shadow: 0 0 46px -6px rgba(25, 200, 255, 0.45), inset 0 0 30px rgba(25, 200, 255, 0.18); }
  50%      { box-shadow: 0 0 66px -4px rgba(25, 200, 255, 0.7), inset 0 0 38px rgba(25, 200, 255, 0.3); }
}

/* --------------------------- the cups ----------------------------- */
/* The cups needed presence. The active one now sits on a pool of light,
   lifts further, and the inactive ones recede more so the difference
   actually reads. */
.pl-cup { transition: opacity var(--pl-enter) var(--pl-ease), filter var(--pl-enter) var(--pl-ease); }
/* Recede, do not disappear. At 0.26 with a brightness cut these read
   as broken images rather than as the levels ahead of you. */
.pl-cup:not([data-active]) { opacity: 0.55; filter: saturate(0.72); }
.pl-cup[data-active] { opacity: 1; filter: none; }

.pl-cup-art { position: relative; }
/* A pool of light under the active cup. */
.pl-cup-art::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 128%;
  height: 46px;
  transform: translateX(-50%) scaleX(0.4);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, var(--pl-glow), transparent 70%);
  opacity: 0;
  transition: opacity var(--pl-enter) var(--pl-ease), transform var(--pl-enter) var(--pl-ease);
  pointer-events: none;
}
.pl-cup[data-active] .pl-cup-art::after { opacity: 1; transform: translateX(-50%) scaleX(1); }

.pl-cup[data-active] .pl-cup-art img {
  transform: scale(calc(var(--stature) * 1.1)) translateY(-8px);
  filter: drop-shadow(0 26px 34px rgba(0, 0, 0, 0.65))
          drop-shadow(0 0 36px rgba(25, 200, 255, 0.42));
}
.pl-cup[data-active] .pl-plinth {
  border-color: rgba(25, 200, 255, 0.75);
  box-shadow: 0 0 34px -6px rgba(25, 200, 255, 0.8);
}

/* The level card for the active cup lifts and lights rather than just
   changing colour. */
.pl-level {
  transition: border-color var(--pl-enter) var(--pl-ease),
              background var(--pl-enter) var(--pl-ease),
              transform var(--pl-enter) var(--pl-ease),
              box-shadow var(--pl-enter) var(--pl-ease);
}
.pl-level[data-active] {
  transform: translateY(-7px);
  box-shadow: 0 16px 38px -22px rgba(0, 0, 0, 0.9), 0 0 28px -14px var(--pl-glow);
}

/* -------------------------- U18 wall line ------------------------- */
.pl-u18-wall {
  position: absolute;
  left: 4%;
  bottom: -2%;
  font-family: var(--display);
  font-size: clamp(13px, 1.15vw, 17px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(11, 43, 92, 0.42);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--pl-enter) var(--pl-ease) 0.45s,
              transform var(--pl-enter) var(--pl-ease) 0.45s;
}
.pl-u18-art.is-visible .pl-u18-wall { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .pl-changes::before, .pl-selection::before, .pl-profile::before,
  .pl-ppi::before, .pl-brands::before, .pl-journey::before, .pl-u18::before { opacity: 1; transition: none; }
  .pl-changes::after, .pl-selection::after, .pl-profile::after,
  .pl-ppi::after, .pl-brands::after, .pl-journey::after, .pl-u18::after { width: 100%; transition: none; }
  .pl-cup-art::after { opacity: 1; transform: translateX(-50%) scaleX(1); }
  .is-lit .pl-ppi-core { animation: none; }
  .pl-u18-wall { opacity: 1; transform: none; transition: none; }
}

/* ===================================================================
   SECTION RHYTHM

   A major section fills close to a screen; a supporting one takes less.
   Nothing exceeds a screen. The caps are in px as well as svh so a very
   tall monitor does not stretch a short section into a void.
   =================================================================== */
@media (min-width: 900px) {
  /* Major: hero, the two image-led explainers, the index, the brands
     board. These carry the argument and earn a full screen. */
  .pl-hero { height: 100svh; min-height: 620px; max-height: 1000px; }

  /* 13 Oct 2026: sized to their content. Forcing 90% of the screen
     left the brands board half empty (810px for ~340px of content). */
  .pl-changes, .pl-profile, .pl-ppi, .pl-brands {
    display: grid;
    align-content: center;
  }

  /* Supporting: selection, journey, under-18 and the close. These are
     short by nature — padding them out to a full screen would just be
     empty space. */
  .pl-selection, .pl-journey, .pl-u18 {
    display: grid;
    align-content: center;
  }
  .pl-start { min-height: min(62svh, 580px); }
}

/* The brands board carries the consent strip below its grid, so its
   inner grid centres and the strip sits under it. */
.pl-brands { row-gap: clamp(20px, 3vh, 38px); }