/* ==========================================================================
   CRICLANE.IN — Design System
   India's Ultimate Cricket Ecosystem — tournaments, academies, live scoring,
   player profiles, fantasy insights, merchandise and community.
   --------------------------------------------------------------------------
   Naming convention : crl-block__element--modifier  (all classes prefixed crl-)
   Utilities         : u-* (layout / spacing / colour helpers only)
   State hooks       : is-* / has-* (toggled by JS, never styled standalone)
   Behaviour hooks   : data-cl-* attributes (see main.js — never classes)
   Theme             : permanent LIGHT. Warm stadium daylight. No dark mode.
   Geometry          : soft radii — 14px cards, 22px panels, 999px pills.
   Type              : Sora (display, sentence case, tight tracking) /
                       Manrope (body) / IBM Plex Mono (every numeral)
   --------------------------------------------------------------------------
   TABLE OF CONTENTS
   01. Fonts & tokens
   02. Reset & base
   03. Typography primitives
   04. Layout shells & grids
   05. Buttons, chips & pills
   06. Section headings & rules
   07. Signature devices (floodlight, crease, seam, ghost numeral, glass)
   08. Header / nav / mega menu / drawer
   09. Live score strip & fixtures ticker
   10. Hero & scoreboard slab
   11. Cards (tournament, academy, coach, post, product)
   12. Match / score cards & match centre tabs
   13. Points table & statistics
   14. Rankings list & player profile
   15. Fantasy prediction cards
   16. Shop preview & merchandise
   17. Highlights reel & event calendar
   18. Counters, testimonials, sponsors, CTA band
   19. Blog / analysis cards, byline, breadcrumbs, pager, share
   20. Forms (contact / newsletter)
   21. FAQ accordion & tabs
   22. Interior page hero
   23. Footer
   24. Floating UI (WhatsApp, back-to-top, cookie, progress)
   25. Scroll reveal & motion
   26. Utilities
   27. Responsive
   28. Reduced motion & print
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=Manrope:wght@400;500;600&family=IBM+Plex+Mono:wght@500;600&display=swap');

/* ==========================================================================
   01. FONTS & TOKENS
   ========================================================================== */
:root {
  /* --- brand colour ---------------------------------------------------- */
  --crl-emerald:       #0b6b3a;   /* primary accent */
  --crl-emerald-deep:  #064a27;   /* pressed, deep field, footer */
  --crl-emerald-mid:   #0e8047;   /* hover lift on primary */
  --crl-emerald-tint:  #e4f0e8;   /* 8% wash — chips, table stripes */
  --crl-emerald-mist:  #f0f7f2;   /* 4% wash — hovers, sunken wells */
  --crl-gold:          #c9a227;   /* the ONLY secondary accent */
  --crl-gold-deep:     #9c7c15;   /* gold text on light, seam strokes */
  --crl-gold-tint:     #faf2d8;   /* gold wash — badges, live pills */

  /* --- surface --------------------------------------------------------- */
  --crl-white:         #ffffff;   /* cricket white — cards, header */
  --crl-paper:         #f5f7f4;   /* warm paper — page background */
  --crl-paper-warm:    #fbfcfa;   /* raised paper — alternating bands */
  --crl-sunken:        #eef2ec;   /* sunken well — table head, media frames */

  /* --- ink ------------------------------------------------------------- */
  --crl-ink:           #1c2119;   /* charcoal — headlines */
  --crl-ink-soft:      #465043;   /* body copy */
  --crl-meta:          #6d776b;   /* meta, captions */
  --crl-meta-faint:    #98a295;   /* tertiary, disabled */

  /* --- line ------------------------------------------------------------ */
  --crl-line:          #dfe6dc;   /* card border */
  --crl-line-soft:     #edf1eb;   /* inner divider */

  /* --- type ------------------------------------------------------------ */
  --crl-font-display: 'Sora', 'Segoe UI', system-ui, sans-serif;
  --crl-font-body:    'Manrope', 'Segoe UI', system-ui, sans-serif;
  --crl-font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;

  /* --- geometry -------------------------------------------------------- */
  --crl-r-xs:    8px;
  --crl-r-sm:   10px;
  --crl-r-card: 14px;    /* every card, input, media frame */
  --crl-r-panel:22px;    /* feature panels, hero, mega menu, footer top */
  --crl-r-pill: 999px;   /* chips, buttons, badges, avatars */

  /* --- shadow (soft, layered — never a hairline-only look) ------------- */
  --crl-sh-1: 0 1px 2px rgba(28,33,25,.04), 0 2px 8px rgba(28,33,25,.05);
  --crl-sh-2: 0 2px 6px rgba(28,33,25,.05), 0 10px 24px rgba(28,33,25,.07);
  --crl-sh-3: 0 6px 16px rgba(28,33,25,.06), 0 22px 48px rgba(28,33,25,.10);
  --crl-sh-green: 0 8px 22px rgba(11,107,58,.22);
  --crl-sh-gold:  0 8px 22px rgba(201,162,39,.26);
  --crl-sh-inset: inset 0 1px 0 rgba(255,255,255,.7);

  /* --- motion ---------------------------------------------------------- */
  --crl-fast:   160ms;
  --crl-med:    240ms;
  --crl-slow:   380ms;
  --crl-reveal: 720ms;
  --crl-ease:      cubic-bezier(.22,.61,.36,1);
  --crl-ease-out:  cubic-bezier(.16,1,.3,1);

  /* --- rhythm ---------------------------------------------------------- */
  --crl-shell:   1280px;
  --crl-gutter:  clamp(18px, 4vw, 40px);
  --crl-band:    clamp(56px, 8vw, 104px);
  --crl-gap:     clamp(18px, 2.4vw, 28px);
  --crl-header-h: 74px;
}

/* ==========================================================================
   02. RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--crl-header-h) + 24px);
}

body {
  margin: 0;
  background: var(--crl-paper);
  color: var(--crl-ink-soft);
  font-family: var(--crl-font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .5em;
  font-family: var(--crl-font-display);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -.022em;   /* tight tracking, sentence case — never uppercase */
  color: var(--crl-ink);
  text-wrap: balance;
}

p  { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.15em; }
li { margin-bottom: .35em; }

a {
  color: var(--crl-emerald);
  text-decoration: none;
  transition: color var(--crl-fast) var(--crl-ease);
}
a:hover { color: var(--crl-emerald-deep); }

strong, b { font-weight: 600; color: var(--crl-ink); }
small { font-size: .82em; }
hr { border: 0; border-top: 1px solid var(--crl-line); margin: 28px 0; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

svg { display: block; max-width: 100%; }
table { border-collapse: collapse; width: 100%; }

:focus-visible {
  outline: 3px solid var(--crl-gold);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--crl-gold-tint); color: var(--crl-ink); }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--crl-sunken); }
::-webkit-scrollbar-thumb { background: #c3d0c1; border-radius: var(--crl-r-pill); border: 3px solid var(--crl-sunken); }
::-webkit-scrollbar-thumb:hover { background: var(--crl-emerald); }

/* skip link — first element in <body> */
.crl-skip {
  position: absolute;
  left: 16px; top: -80px;
  z-index: 200;
  padding: 12px 22px;
  background: var(--crl-emerald);
  color: #fff;
  font-family: var(--crl-font-display);
  font-weight: 600;
  font-size: 14px;
  border-radius: var(--crl-r-pill);
  box-shadow: var(--crl-sh-green);
  transition: top var(--crl-fast) var(--crl-ease);
}
.crl-skip:focus { top: 14px; color: #fff; }

/* ==========================================================================
   03. TYPOGRAPHY PRIMITIVES
   ========================================================================== */
.crl-d1 { font-size: clamp(2.4rem, 5.6vw, 4.25rem); font-weight: 800; letter-spacing: -.034em; line-height: 1.04; }
.crl-d2 { font-size: clamp(1.95rem, 3.9vw, 3rem);   font-weight: 700; letter-spacing: -.028em; line-height: 1.1; }
.crl-d3 { font-size: clamp(1.45rem, 2.5vw, 2.05rem);font-weight: 700; letter-spacing: -.024em; line-height: 1.18; }
.crl-d4 { font-size: clamp(1.15rem, 1.7vw, 1.4rem); font-weight: 600; letter-spacing: -.018em; line-height: 1.28; }

.crl-lede {
  font-size: clamp(1.02rem, 1.35vw, 1.2rem);
  line-height: 1.72;
  color: var(--crl-ink-soft);
  max-width: 62ch;
}

.crl-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--crl-font-display);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--crl-emerald);
}
.crl-eyebrow--gold { color: var(--crl-gold-deep); }
.crl-eyebrow--muted { color: var(--crl-meta); }
.crl-eyebrow::before {
  content: "";
  width: 22px; height: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: .55;
}

.crl-meta {
  font-size: .84rem;
  color: var(--crl-meta);
  line-height: 1.55;
}
.crl-meta__dot { margin: 0 7px; opacity: .5; }

/* every numeral on the site */
.crl-num {
  font-family: var(--crl-font-mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

/* gold underline that grows in on hover */
.crl-swipe { position: relative; }
.crl-swipe::after {
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  width: 0; height: 2px;
  border-radius: 2px;
  background: var(--crl-gold);
  transition: width var(--crl-med) var(--crl-ease-out);
}
a:hover .crl-swipe::after, .crl-swipe:hover::after { width: 100%; }

.crl-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--crl-font-display);
  font-weight: 600;
  font-size: .92rem;
  color: var(--crl-emerald);
}
.crl-link span[aria-hidden] { transition: transform var(--crl-fast) var(--crl-ease); }
.crl-link:hover span[aria-hidden] { transform: translateX(4px); }

/* live pulse dot */
.crl-pulse {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--crl-gold);
  box-shadow: 0 0 0 0 rgba(201,162,39,.65);
  animation: crlPulse 1.8s infinite;
}
.crl-pulse--green { background: var(--crl-emerald); box-shadow: 0 0 0 0 rgba(11,107,58,.5); }
@keyframes crlPulse {
  70%  { box-shadow: 0 0 0 9px rgba(201,162,39,0); }
  100% { box-shadow: 0 0 0 0 rgba(201,162,39,0); }
}

/* ==========================================================================
   04. LAYOUT SHELLS & GRIDS
   ========================================================================== */
.crl-shell {
  width: 100%;
  max-width: var(--crl-shell);
  margin-inline: auto;
  padding-inline: var(--crl-gutter);
}
.crl-shell--wide   { max-width: 1520px; }
.crl-shell--narrow { max-width: 820px; }

.crl-band { padding-block: var(--crl-band); position: relative; }
.crl-band--tight { padding-block: clamp(34px, 5vw, 60px); }
.crl-band--paper { background: var(--crl-paper-warm); }
.crl-band--sunken{ background: var(--crl-sunken); }
.crl-band--field {
  background:
    radial-gradient(900px 420px at 12% 0%, rgba(255,255,255,.14), transparent 70%),
    linear-gradient(160deg, var(--crl-emerald) 0%, var(--crl-emerald-deep) 100%);
  color: rgba(255,255,255,.9);
}
.crl-band--field h1, .crl-band--field h2, .crl-band--field h3,
.crl-band--field h4, .crl-band--field strong { color: #fff; }
.crl-band--field .crl-meta { color: rgba(255,255,255,.66); }
.crl-band--field .crl-eyebrow { color: var(--crl-gold); }

/* THE layout archetype — asymmetric stats-dashboard grid.
   Lead panel 1.55fr · secondary stack 1fr · data rail .78fr */
.crl-dash {
  display: grid;
  grid-template-columns: 1.55fr 1fr .78fr;
  gap: var(--crl-gap);
  align-items: start;
}
.crl-dash__rail { position: sticky; top: calc(var(--crl-header-h) + 18px); }
.crl-dash--flip { grid-template-columns: .78fr 1fr 1.55fr; }

/* content + sidebar */
.crl-split { display: grid; grid-template-columns: 1fr 360px; gap: clamp(22px, 3.2vw, 44px); align-items: start; }
.crl-split--left { grid-template-columns: 360px 1fr; }

.crl-duo  { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--crl-gap); }
.crl-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--crl-gap); }
.crl-quad { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--crl-gap); }

/* uneven 2-up: 1.4 / 1 */
.crl-lean { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--crl-gap); align-items: start; }
.crl-lean--rev { grid-template-columns: 1fr 1.4fr; }

.crl-stack     { display: flex; flex-direction: column; gap: 14px; }
.crl-stack--lg { gap: 24px; }
.crl-row       { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* ==========================================================================
   05. BUTTONS, CHIPS & PILLS
   ========================================================================== */
.crl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 26px;
  border: 1px solid transparent;
  border-radius: var(--crl-r-pill);
  background: var(--crl-emerald);
  color: #fff;
  font-family: var(--crl-font-display);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: -.008em;
  line-height: 1.1;
  box-shadow: var(--crl-sh-green);
  transition: transform var(--crl-fast) var(--crl-ease),
              box-shadow var(--crl-fast) var(--crl-ease),
              background var(--crl-fast) var(--crl-ease),
              color var(--crl-fast) var(--crl-ease);
}
.crl-btn:hover { background: var(--crl-emerald-mid); color: #fff; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(11,107,58,.28); }
.crl-btn:active { transform: translateY(0); background: var(--crl-emerald-deep); }

.crl-btn--gold  { background: var(--crl-gold); color: #29200a; box-shadow: var(--crl-sh-gold); }
.crl-btn--gold:hover { background: #d9b234; color: #29200a; box-shadow: 0 12px 28px rgba(201,162,39,.32); }

.crl-btn--ghost {
  background: var(--crl-white);
  color: var(--crl-emerald);
  border-color: var(--crl-line);
  box-shadow: var(--crl-sh-1);
}
.crl-btn--ghost:hover { background: var(--crl-emerald-mist); color: var(--crl-emerald-deep); border-color: #c8dccd; }

.crl-btn--outline {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.42);
  box-shadow: none;
}
.crl-btn--outline:hover { background: rgba(255,255,255,.12); color: #fff; box-shadow: none; }

.crl-btn--sm    { padding: 9px 18px; font-size: .86rem; }
.crl-btn--lg    { padding: 16px 34px; font-size: 1.02rem; }
.crl-btn--block { width: 100%; }
.crl-btn[disabled] { opacity: .55; pointer-events: none; }

/* chips / filter pills */
.crl-chipset { display: flex; flex-wrap: wrap; gap: 9px; }
.crl-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 15px;
  border: 1px solid var(--crl-line);
  border-radius: var(--crl-r-pill);
  background: var(--crl-white);
  color: var(--crl-ink-soft);
  font-family: var(--crl-font-display);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: -.005em;
  transition: all var(--crl-fast) var(--crl-ease);
}
.crl-chip:hover { border-color: #bcd6c3; background: var(--crl-emerald-mist); color: var(--crl-emerald-deep); }
.crl-chip.is-active { background: var(--crl-emerald); border-color: var(--crl-emerald); color: #fff; box-shadow: var(--crl-sh-green); }
.crl-chip--gold { background: var(--crl-gold-tint); border-color: #ecdca6; color: var(--crl-gold-deep); }
.crl-chip--live { background: var(--crl-gold-tint); border-color: #ecdca6; color: var(--crl-gold-deep); }
.crl-chip--green{ background: var(--crl-emerald-tint); border-color: #c8dccd; color: var(--crl-emerald-deep); }

/* small standalone badge */
.crl-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: var(--crl-r-pill);
  background: var(--crl-emerald-tint);
  color: var(--crl-emerald-deep);
  font-family: var(--crl-font-display);
  font-weight: 600;
  font-size: .7rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.crl-badge--gold { background: var(--crl-gold-tint); color: var(--crl-gold-deep); }
.crl-badge--solid{ background: var(--crl-emerald); color: #fff; }
.crl-badge--ink  { background: rgba(28,33,25,.08); color: var(--crl-ink); }

.crl-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid var(--crl-line);
  border-radius: var(--crl-r-pill);
  background: var(--crl-white);
  color: var(--crl-ink-soft);
  transition: all var(--crl-fast) var(--crl-ease);
}
.crl-iconbtn:hover { border-color: #bcd6c3; background: var(--crl-emerald-mist); color: var(--crl-emerald); }

/* ==========================================================================
   06. SECTION HEADINGS & RULES
   ========================================================================== */
.crl-sechead {
  display: flex;
  align-items: flex-end;
  gap: clamp(14px, 3vw, 34px);
  margin-bottom: clamp(24px, 3.4vw, 44px);
}
.crl-sechead__text { flex: 1 1 auto; min-width: 0; }
.crl-sechead__title { margin: 6px 0 0; }
.crl-sechead__sub { margin: 10px 0 0; color: var(--crl-meta); font-size: .95rem; max-width: 58ch; }
.crl-sechead__more { flex: 0 0 auto; padding-bottom: 6px; }

/* soft divider — never a bare hairline; always paired with spacing */
.crl-rule { height: 1px; background: var(--crl-line-soft); border-radius: 1px; margin: 26px 0; }
.crl-rule--gold { height: 3px; width: 54px; background: linear-gradient(90deg, var(--crl-gold), rgba(201,162,39,.15)); }

/* ==========================================================================
   07. SIGNATURE DEVICES
   --------------------------------------------------------------------------
   1. .crl-floodlight  — stadium-floodlight radial glow behind the hero
   2. .crl-crease      — repeating pitch-crease line motif
   3. .crl-seam        — gold cricket-ball seam stitch curve
   4. .crl-ghostnum    — oversized ghosted jersey numeral
   5. .crl-glass       — glassmorphism stat card over the emerald field
   6. .crl-scoreboard  — see §10
   ========================================================================== */

/* 1 — floodlight glow. Sits behind hero content, never interactive. */
.crl-floodlight {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}
.crl-floodlight::before,
.crl-floodlight::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
}
.crl-floodlight::before {
  width: 780px; height: 780px;
  top: -420px; left: 4%;
  background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(250,242,216,.55) 34%, rgba(201,162,39,.13) 58%, transparent 72%);
  animation: crlFlood 9s ease-in-out infinite alternate;
}
.crl-floodlight::after {
  width: 660px; height: 660px;
  top: -360px; right: 2%;
  background: radial-gradient(circle, rgba(255,255,255,.9) 0%, rgba(228,240,232,.6) 36%, rgba(11,107,58,.10) 60%, transparent 74%);
  animation: crlFlood 11s ease-in-out infinite alternate-reverse;
}
@keyframes crlFlood {
  from { opacity: .75; transform: scale(1); }
  to   { opacity: 1;   transform: scale(1.09); }
}
/* floodlight beams — a decorative <svg> may be placed inside */
.crl-floodlight__beams { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; }

/* 2 — pitch crease motif: repeating white/green ruled lines */
.crl-crease {
  background-image: repeating-linear-gradient(
    90deg,
    rgba(11,107,58,.09) 0px,
    rgba(11,107,58,.09) 1px,
    transparent 1px,
    transparent 13px
  );
}
.crl-crease--h {
  background-image: repeating-linear-gradient(
    0deg,
    rgba(11,107,58,.075) 0px,
    rgba(11,107,58,.075) 1px,
    transparent 1px,
    transparent 11px
  );
}
.crl-crease--gold {
  background-image: repeating-linear-gradient(
    90deg,
    rgba(201,162,39,.22) 0px,
    rgba(201,162,39,.22) 1px,
    transparent 1px,
    transparent 15px
  );
}
/* crease strip used as a section top/bottom edge */
.crl-crease-edge {
  height: 10px;
  border-radius: var(--crl-r-pill);
  background-image: repeating-linear-gradient(
    90deg,
    var(--crl-emerald) 0px, var(--crl-emerald) 3px,
    transparent 3px, transparent 12px
  );
  opacity: .32;
}

/* 3 — gold seam stitch. Applied to an absolutely positioned decorative svg,
   or as a border-treatment on a block. */
.crl-seam {
  position: relative;
}
.crl-seam::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  border-radius: var(--crl-r-pill) var(--crl-r-pill) 0 0;
  background-image: repeating-linear-gradient(
    90deg,
    var(--crl-gold) 0px, var(--crl-gold) 7px,
    transparent 7px, transparent 14px
  );
  opacity: .85;
}
.crl-seam__svg { position: absolute; pointer-events: none; }
.crl-seam__svg path { stroke-dasharray: 7 7; }

/* 4 — oversized ghosted jersey numeral */
.crl-ghostnum {
  position: absolute;
  right: -10px; bottom: -34px;
  font-family: var(--crl-font-display);
  font-weight: 800;
  font-size: clamp(6rem, 13vw, 12rem);
  line-height: .78;
  letter-spacing: -.06em;
  color: transparent;
  -webkit-text-stroke: 2px rgba(11,107,58,.13);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.crl-ghostnum--gold { -webkit-text-stroke-color: rgba(201,162,39,.3); }
.crl-ghostnum--light{ -webkit-text-stroke-color: rgba(255,255,255,.2); }
.crl-ghostnum--fill { color: rgba(11,107,58,.05); -webkit-text-stroke: 0; }

/* 5 — glassmorphism stat card, designed to sit on .crl-band--field */
.crl-glass {
  position: relative;
  padding: 22px 24px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: var(--crl-r-card);
  background: rgba(255,255,255,.13);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 14px 34px rgba(4,40,20,.22);
  color: #fff;
  overflow: hidden;
  transition: transform var(--crl-med) var(--crl-ease), background var(--crl-med) var(--crl-ease);
}
.crl-glass:hover { transform: translateY(-4px); background: rgba(255,255,255,.19); }
.crl-glass__n {
  display: block;
  font-family: var(--crl-font-mono);
  font-weight: 600;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--crl-gold);
}
.crl-glass__label {
  display: block;
  margin-top: 9px;
  font-size: .84rem;
  color: rgba(255,255,255,.76);
  line-height: 1.45;
}
.crl-glass__note { margin-top: 6px; font-size: .74rem; color: rgba(255,255,255,.55); }

/* ==========================================================================
   08. HEADER / NAV / MEGA MENU / DRAWER
   ========================================================================== */
.crl-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--crl-med) var(--crl-ease),
              background var(--crl-med) var(--crl-ease),
              border-color var(--crl-med) var(--crl-ease);
}
.crl-header.is-stuck {
  background: rgba(255,255,255,.95);
  border-bottom-color: var(--crl-line-soft);
  box-shadow: 0 6px 22px rgba(28,33,25,.07);
}

.crl-header__bar {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
  min-height: var(--crl-header-h);
}
.crl-header__tools { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* logo */
.crl-logo { display: inline-flex; align-items: center; gap: 11px; color: var(--crl-ink); }
.crl-logo:hover { color: var(--crl-ink); }
.crl-logo__mark { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 12px; box-shadow: var(--crl-sh-1); }
.crl-logo__word {
  display: block;
  font-family: var(--crl-font-display);
  font-weight: 800;
  font-size: 1.24rem;
  letter-spacing: -.035em;
  line-height: 1.05;
  color: var(--crl-ink);
}
.crl-logo__word em { font-style: normal; color: var(--crl-emerald); }
.crl-logo__tag {
  display: block;
  margin-top: 1px;
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--crl-meta);
  font-weight: 600;
}

/* nav */
.crl-nav__list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.crl-nav__item { position: relative; margin: 0; }
.crl-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border: 0;
  border-radius: var(--crl-r-pill);
  background: none;
  font-family: var(--crl-font-display);
  font-weight: 600;
  font-size: .92rem;
  letter-spacing: -.012em;
  color: var(--crl-ink-soft);
  transition: background var(--crl-fast) var(--crl-ease), color var(--crl-fast) var(--crl-ease);
}
.crl-nav__link:hover,
.crl-nav__link[aria-expanded="true"] { background: var(--crl-emerald-mist); color: var(--crl-emerald-deep); }
.crl-nav__link[aria-current="page"] { background: var(--crl-emerald-tint); color: var(--crl-emerald-deep); }
.crl-nav__caret {
  width: 7px; height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  border-radius: 1px;
  transform: rotate(45deg) translate(-2px, -2px);
  opacity: .6;
  transition: transform var(--crl-fast) var(--crl-ease);
}
.crl-nav__link[aria-expanded="true"] .crl-nav__caret { transform: rotate(-135deg) translate(-3px, -3px); }

/* mega menu */
.crl-mega {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  z-index: 95;
  display: grid;
  grid-template-columns: 1fr 1fr 1.15fr;
  gap: 26px;
  width: min(880px, 92vw);
  padding: 26px;
  border: 1px solid var(--crl-line);
  border-radius: var(--crl-r-panel);
  background: var(--crl-white);
  box-shadow: var(--crl-sh-3);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 10px);
  transition: opacity var(--crl-med) var(--crl-ease),
              transform var(--crl-med) var(--crl-ease),
              visibility var(--crl-med) var(--crl-ease);
}
.crl-mega.is-open { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.crl-mega__col { min-width: 0; }
.crl-mega__title {
  margin: 0 0 12px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--crl-meta);
}
.crl-mega__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--crl-r-sm);
  font-family: var(--crl-font-display);
  font-weight: 600;
  font-size: .9rem;
  color: var(--crl-ink);
  transition: background var(--crl-fast) var(--crl-ease), color var(--crl-fast) var(--crl-ease);
}
.crl-mega__link:hover { background: var(--crl-emerald-mist); color: var(--crl-emerald-deep); }
.crl-mega__link small { font-family: var(--crl-font-body); font-weight: 500; color: var(--crl-meta); font-size: .74rem; }
.crl-mega__promo {
  position: relative;
  padding: 20px;
  border-radius: var(--crl-r-card);
  background: linear-gradient(150deg, var(--crl-emerald) 0%, var(--crl-emerald-deep) 100%);
  color: rgba(255,255,255,.82);
  overflow: hidden;
}
.crl-mega__promo-title {
  margin: 8px 0 8px;
  color: #fff;
  font-family: var(--crl-font-display);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -.018em;
  line-height: 1.28;
}
.crl-mega__promo .crl-meta { color: rgba(255,255,255,.66); }
.crl-mega__promo .crl-eyebrow { color: var(--crl-gold); }
.crl-mega__promo .crl-link { color: var(--crl-gold); }
.crl-mega__promo .crl-link:hover { color: #e2c250; }

/* burger */
.crl-burger { display: none; }
.crl-burger__box { display: block; width: 18px; }
.crl-burger__box i {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--crl-fast) var(--crl-ease), opacity var(--crl-fast) var(--crl-ease);
}
.crl-burger__box i + i { margin-top: 4px; }
.crl-burger[aria-expanded="true"] .crl-burger__box i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.crl-burger[aria-expanded="true"] .crl-burger__box i:nth-child(2) { opacity: 0; }
.crl-burger[aria-expanded="true"] .crl-burger__box i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* drawer */
.crl-drawer {
  position: fixed;
  inset: var(--crl-header-h) 0 auto 0;
  z-index: 88;
  max-height: calc(100vh - var(--crl-header-h));
  overflow-y: auto;
  padding: 20px var(--crl-gutter) 32px;
  background: var(--crl-white);
  border-bottom: 1px solid var(--crl-line);
  box-shadow: var(--crl-sh-3);
  transform: translateY(-14px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--crl-med) var(--crl-ease),
              transform var(--crl-med) var(--crl-ease),
              visibility var(--crl-med) var(--crl-ease);
}
.crl-drawer.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.crl-drawer__link {
  display: block;
  padding: 13px 16px;
  border-radius: var(--crl-r-card);
  font-family: var(--crl-font-display);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--crl-ink);
}
.crl-drawer__link:hover { background: var(--crl-emerald-mist); color: var(--crl-emerald-deep); }
.crl-drawer__group { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--crl-line-soft); display: grid; gap: 12px; }

/* ==========================================================================
   09. LIVE SCORE STRIP & FIXTURES TICKER
   ========================================================================== */
.crl-strip {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: linear-gradient(90deg, var(--crl-emerald-deep) 0%, var(--crl-emerald) 42%, var(--crl-emerald-deep) 100%);
  color: rgba(255,255,255,.9);
  overflow: hidden;
}
.crl-strip__label {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: rgba(0,0,0,.2);
  font-family: var(--crl-font-display);
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--crl-gold);
  white-space: nowrap;
}
.crl-strip__label span:not(.crl-pulse) { color: rgba(255,255,255,.65); font-weight: 600; }
.crl-strip__track {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.crl-strip__track::-webkit-scrollbar { display: none; }
.crl-strip__game {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border-right: 1px solid rgba(255,255,255,.12);
  white-space: nowrap;
  font-size: .82rem;
  color: rgba(255,255,255,.88);
  transition: background var(--crl-fast) var(--crl-ease);
}
.crl-strip__game:hover { background: rgba(255,255,255,.1); color: #fff; }
.crl-strip__team { font-family: var(--crl-font-display); font-weight: 600; font-size: .78rem; letter-spacing: -.005em; }
.crl-strip__score { color: var(--crl-gold); font-size: .84rem; }
.crl-strip__state {
  padding: 2px 9px;
  border-radius: var(--crl-r-pill);
  background: rgba(255,255,255,.14);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(255,255,255,.8);
}
.crl-strip__state--live { background: var(--crl-gold); color: #29200a; }

/* horizontal auto-scrolling headline ticker */
.crl-ticker {
  display: flex;
  align-items: center;
  background: var(--crl-white);
  border-bottom: 1px solid var(--crl-line-soft);
  overflow: hidden;
}
.crl-ticker__tag {
  flex: 0 0 auto;
  padding: 9px 16px;
  background: var(--crl-gold-tint);
  color: var(--crl-gold-deep);
  font-family: var(--crl-font-display);
  font-weight: 700;
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.crl-ticker__viewport { flex: 1 1 auto; overflow: hidden; }
.crl-ticker__track {
  display: flex;
  gap: 44px;
  white-space: nowrap;
  animation: crlTicker 44s linear infinite;
}
.crl-ticker:hover .crl-ticker__track { animation-play-state: paused; }
.crl-ticker__item { padding: 9px 0; font-size: .85rem; color: var(--crl-ink-soft); }
.crl-ticker__item b { color: var(--crl-emerald); font-weight: 600; }
@keyframes crlTicker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ==========================================================================
   10. HERO & SCOREBOARD SLAB
   ========================================================================== */
.crl-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(46px, 7vw, 96px) clamp(40px, 6vw, 80px);
  background:
    linear-gradient(180deg, #ffffff 0%, var(--crl-paper) 62%, var(--crl-paper) 100%);
}
.crl-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.crl-hero__title { margin: 16px 0 18px; }
.crl-hero__title em { font-style: normal; color: var(--crl-emerald); }
.crl-hero__acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.crl-hero__proof { display: flex; flex-wrap: wrap; gap: clamp(18px, 3vw, 38px); margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--crl-line); }
.crl-hero__proof div { min-width: 90px; }
.crl-hero__proof b {
  display: block;
  font-family: var(--crl-font-mono);
  font-weight: 600;
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
  line-height: 1.05;
  color: var(--crl-emerald);
  letter-spacing: -.03em;
}
.crl-hero__proof span { display: block; margin-top: 3px; font-size: .78rem; color: var(--crl-meta); }

/* the animated scoreboard slab — signature device */
.crl-scoreboard {
  position: relative;
  border-radius: var(--crl-r-panel);
  background: linear-gradient(160deg, #0d7440 0%, var(--crl-emerald-deep) 58%, #043b1f 100%);
  box-shadow: 0 20px 54px rgba(6,74,39,.3), inset 0 1px 0 rgba(255,255,255,.14);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.crl-scoreboard::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0px, rgba(255,255,255,.045) 1px, transparent 1px, transparent 4px);
  pointer-events: none;
  z-index: 0;
}
.crl-scoreboard__head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 22px;
  border-bottom: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
}
.crl-scoreboard__tag {
  font-family: var(--crl-font-display);
  font-weight: 700;
  font-size: .7rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--crl-gold);
}
.crl-scoreboard__venue { margin-left: auto; font-size: .74rem; color: rgba(255,255,255,.6); }
.crl-scoreboard__body { position: relative; z-index: 1; padding: 24px 22px 8px; }
.crl-scoreboard__side {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
}
.crl-scoreboard__side + .crl-scoreboard__side { border-top: 1px solid rgba(255,255,255,.1); }
.crl-scoreboard__team { display: flex; align-items: center; gap: 11px; min-width: 0; }
.crl-scoreboard__crest { width: 34px; height: 34px; flex: 0 0 auto; border-radius: var(--crl-r-pill); }
.crl-scoreboard__name {
  font-family: var(--crl-font-display);
  font-weight: 600;
  font-size: 1rem;
  color: #fff;
  letter-spacing: -.015em;
}
.crl-scoreboard__sub { display: block; font-family: var(--crl-font-body); font-weight: 400; font-size: .74rem; color: rgba(255,255,255,.55); }
.crl-scoreboard__runs {
  font-family: var(--crl-font-mono);
  font-weight: 600;
  font-size: clamp(1.6rem, 3vw, 2.15rem);
  line-height: 1;
  letter-spacing: -.045em;
  color: var(--crl-gold);
  text-align: right;
}
.crl-scoreboard__overs { display: block; margin-top: 4px; font-family: var(--crl-font-mono); font-weight: 500; font-size: .74rem; color: rgba(255,255,255,.55); text-align: right; }
.crl-scoreboard__side--lead .crl-scoreboard__runs { color: #fff; }
.crl-scoreboard__bar {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 14px 22px 18px;
  border-top: 1px solid rgba(255,255,255,.12);
  margin-top: 8px;
}
.crl-scoreboard__note { font-size: .78rem; color: rgba(255,255,255,.7); margin: 0; }
.crl-scoreboard__balls { display: flex; gap: 6px; margin-left: auto; }
.crl-ball {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 27px; height: 27px;
  border-radius: var(--crl-r-pill);
  background: rgba(255,255,255,.13);
  font-family: var(--crl-font-mono);
  font-weight: 600;
  font-size: .74rem;
  color: rgba(255,255,255,.85);
}
.crl-ball--four { background: var(--crl-gold); color: #29200a; }
.crl-ball--six  { background: #fff; color: var(--crl-emerald-deep); }
.crl-ball--wkt  { background: rgba(0,0,0,.4); color: #fff; }

/* ==========================================================================
   11. CARDS
   ========================================================================== */
.crl-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--crl-line);
  border-radius: var(--crl-r-card);
  background: var(--crl-white);
  box-shadow: var(--crl-sh-1);
  overflow: hidden;
  transition: transform var(--crl-med) var(--crl-ease),
              box-shadow var(--crl-med) var(--crl-ease),
              border-color var(--crl-med) var(--crl-ease);
}
.crl-card:hover { transform: translateY(-4px); box-shadow: var(--crl-sh-3); border-color: #cfe0d3; }
.crl-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--crl-sunken);
  overflow: hidden;
}
.crl-card__media--sq { aspect-ratio: 1 / 1; }
.crl-card__media--tall { aspect-ratio: 4 / 5; }
.crl-card__media svg { width: 100%; height: 100%; }
.crl-card__flag {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 2;
}
.crl-card__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 20px 22px 22px; }
.crl-card__title { margin: 8px 0 8px; font-size: 1.1rem; }
.crl-card__title a { color: var(--crl-ink); }
.crl-card__title a:hover { color: var(--crl-emerald); }
.crl-card__excerpt { margin: 0 0 14px; font-size: .9rem; color: var(--crl-ink-soft); }
.crl-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--crl-line-soft);
}
.crl-card--featured {
  border-color: #c8dccd;
  box-shadow: var(--crl-sh-2);
}
.crl-card--featured .crl-card__body { padding: 26px 28px 28px; }
.crl-card--flat { box-shadow: none; }
.crl-card--flat:hover { transform: none; box-shadow: var(--crl-sh-1); }
.crl-card--pad { padding: 24px 26px; }
.crl-card--panel { border-radius: var(--crl-r-panel); padding: clamp(22px, 3vw, 34px); }

/* tournament card — registration CTA variant */
.crl-tour__meta { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 14px; font-size: .82rem; color: var(--crl-meta); }
.crl-tour__meta span { display: inline-flex; align-items: center; gap: 6px; }
.crl-tour__fee {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 14px;
}
.crl-tour__fee b { font-family: var(--crl-font-mono); font-weight: 600; font-size: 1.25rem; color: var(--crl-emerald); letter-spacing: -.03em; }
.crl-tour__fee small { color: var(--crl-meta); font-size: .76rem; }
.crl-tour__slots {
  position: relative;
  height: 7px;
  border-radius: var(--crl-r-pill);
  background: var(--crl-sunken);
  overflow: hidden;
  margin-bottom: 8px;
}
.crl-tour__slots i {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: var(--crl-r-pill);
  background: linear-gradient(90deg, var(--crl-emerald), var(--crl-gold));
}

/* academy row */
.crl-academy {
  display: grid;
  grid-template-columns: 76px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 16px 18px;
  border: 1px solid var(--crl-line);
  border-radius: var(--crl-r-card);
  background: var(--crl-white);
  box-shadow: var(--crl-sh-1);
  transition: transform var(--crl-fast) var(--crl-ease), box-shadow var(--crl-fast) var(--crl-ease);
}
.crl-academy:hover { transform: translateY(-2px); box-shadow: var(--crl-sh-2); }
.crl-academy__badge { width: 76px; height: 76px; border-radius: var(--crl-r-card); background: var(--crl-emerald-mist); overflow: hidden; }
.crl-academy__name { margin: 0 0 4px; font-size: 1.02rem; }
.crl-academy__loc { margin: 0; font-size: .82rem; color: var(--crl-meta); }
.crl-academy__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.crl-academy__rating { text-align: right; }
.crl-academy__rating b { display: block; font-family: var(--crl-font-mono); font-weight: 600; font-size: 1.15rem; color: var(--crl-gold-deep); }
.crl-academy__rating span { font-size: .72rem; color: var(--crl-meta); }

/* coach card */
.crl-coach {
  position: relative;
  padding: 24px 22px 22px;
  border: 1px solid var(--crl-line);
  border-radius: var(--crl-r-card);
  background: var(--crl-white);
  box-shadow: var(--crl-sh-1);
  overflow: hidden;
  text-align: center;
  transition: transform var(--crl-med) var(--crl-ease), box-shadow var(--crl-med) var(--crl-ease);
}
.crl-coach:hover { transform: translateY(-4px); box-shadow: var(--crl-sh-2); }
.crl-coach__avatar {
  width: 84px; height: 84px;
  margin: 0 auto 14px;
  border-radius: var(--crl-r-pill);
  background: var(--crl-emerald-mist);
  border: 3px solid var(--crl-white);
  box-shadow: 0 0 0 2px var(--crl-emerald-tint);
  overflow: hidden;
}
.crl-coach__name { margin: 0 0 3px; font-size: 1.02rem; }
.crl-coach__role { margin: 0 0 12px; font-size: .8rem; color: var(--crl-meta); }
.crl-coach__stats { display: flex; justify-content: center; gap: 18px; padding-top: 14px; border-top: 1px solid var(--crl-line-soft); }
.crl-coach__stats div b { display: block; font-family: var(--crl-font-mono); font-weight: 600; font-size: 1rem; color: var(--crl-emerald); }
.crl-coach__stats div span { font-size: .68rem; color: var(--crl-meta); }

/* ==========================================================================
   12. MATCH / SCORE CARDS & MATCH CENTRE TABS
   ========================================================================== */
.crl-match {
  position: relative;
  padding: 18px 20px;
  border: 1px solid var(--crl-line);
  border-radius: var(--crl-r-card);
  background: var(--crl-white);
  box-shadow: var(--crl-sh-1);
  transition: box-shadow var(--crl-fast) var(--crl-ease), border-color var(--crl-fast) var(--crl-ease);
}
.crl-match:hover { box-shadow: var(--crl-sh-2); border-color: #cfe0d3; }
.crl-match--live { border-color: #ecdca6; background: linear-gradient(180deg, #fffdf5 0%, var(--crl-white) 40%); }
.crl-match__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--crl-line-soft);
}
.crl-match__comp { font-family: var(--crl-font-display); font-weight: 600; font-size: .78rem; color: var(--crl-meta); }
.crl-match__state { margin-left: auto; }
.crl-match__side {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
}
.crl-match__team { display: flex; align-items: center; gap: 10px; font-family: var(--crl-font-display); font-weight: 600; font-size: .95rem; color: var(--crl-ink); }
.crl-match__crest { width: 26px; height: 26px; flex: 0 0 auto; border-radius: var(--crl-r-pill); }
.crl-match__runs { font-family: var(--crl-font-mono); font-weight: 600; font-size: 1.12rem; letter-spacing: -.03em; color: var(--crl-ink); }
.crl-match__overs { display: block; font-family: var(--crl-font-mono); font-weight: 500; font-size: .7rem; color: var(--crl-meta); text-align: right; }
.crl-match__side--lead .crl-match__runs { color: var(--crl-emerald); }
.crl-match__note {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--crl-line-soft);
  font-size: .8rem;
  color: var(--crl-meta);
}
.crl-match__note b { color: var(--crl-emerald); font-weight: 600; }

/* match centre tabs */
.crl-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.crl-tab {
  padding: 9px 18px;
  border: 1px solid var(--crl-line);
  border-radius: var(--crl-r-pill);
  background: var(--crl-white);
  font-family: var(--crl-font-display);
  font-weight: 600;
  font-size: .86rem;
  color: var(--crl-ink-soft);
  transition: all var(--crl-fast) var(--crl-ease);
}
.crl-tab:hover { background: var(--crl-emerald-mist); border-color: #c8dccd; }
.crl-tab[aria-selected="true"] { background: var(--crl-emerald); border-color: var(--crl-emerald); color: #fff; box-shadow: var(--crl-sh-green); }

/* ball-by-ball commentary row */
.crl-comm { display: grid; grid-template-columns: 62px 1fr; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--crl-line-soft); }
.crl-comm:last-child { border-bottom: 0; }
.crl-comm__ball { font-family: var(--crl-font-mono); font-weight: 600; font-size: .82rem; color: var(--crl-gold-deep); }
.crl-comm__text { margin: 0; font-size: .88rem; }
.crl-comm__text b { color: var(--crl-ink); }

/* ==========================================================================
   13. POINTS TABLE & STATISTICS
   ========================================================================== */
.crl-tablewrap {
  border: 1px solid var(--crl-line);
  border-radius: var(--crl-r-card);
  background: var(--crl-white);
  box-shadow: var(--crl-sh-1);
  overflow-x: auto;
}
.crl-table { min-width: 560px; font-size: .88rem; }
.crl-table thead th {
  padding: 13px 14px;
  background: var(--crl-sunken);
  font-family: var(--crl-font-display);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--crl-meta);
  text-align: left;
  white-space: nowrap;
}
.crl-table thead th:first-child { border-top-left-radius: var(--crl-r-card); }
.crl-table thead th:last-child  { border-top-right-radius: var(--crl-r-card); }
.crl-table tbody td { padding: 13px 14px; border-top: 1px solid var(--crl-line-soft); vertical-align: middle; }
.crl-table tbody tr { transition: background var(--crl-fast) var(--crl-ease); }
.crl-table tbody tr:hover { background: var(--crl-emerald-mist); }
.crl-table tbody tr.is-qualified { background: rgba(11,107,58,.045); }
.crl-table tbody tr.is-qualified .crl-table__pos { color: var(--crl-emerald); }
.crl-table__pos { font-family: var(--crl-font-mono); font-weight: 600; color: var(--crl-meta); width: 44px; }
.crl-table__team { display: flex; align-items: center; gap: 10px; font-family: var(--crl-font-display); font-weight: 600; color: var(--crl-ink); white-space: nowrap; }
.crl-table__crest { width: 24px; height: 24px; flex: 0 0 auto; border-radius: var(--crl-r-pill); }
.crl-table__n { font-family: var(--crl-font-mono); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--crl-ink-soft); }
.crl-table__n--hi { color: var(--crl-emerald); }
.crl-table__form { display: flex; gap: 4px; }
.crl-table__form i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px; height: 19px;
  border-radius: var(--crl-r-pill);
  font-family: var(--crl-font-mono);
  font-style: normal;
  font-size: .62rem;
  font-weight: 600;
  background: var(--crl-sunken);
  color: var(--crl-meta);
}
.crl-table__form i.w { background: var(--crl-emerald); color: #fff; }
.crl-table__form i.l { background: rgba(28,33,25,.12); color: var(--crl-ink-soft); }
.crl-table__form i.n { background: var(--crl-gold-tint); color: var(--crl-gold-deep); }
.crl-table__key { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; font-size: .76rem; color: var(--crl-meta); }

/* ==========================================================================
   14. RANKINGS LIST & PLAYER PROFILE
   ========================================================================== */
.crl-rank { display: flex; flex-direction: column; }
.crl-rank__item {
  position: relative;
  display: grid;
  grid-template-columns: 46px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--crl-r-card);
  transition: background var(--crl-fast) var(--crl-ease);
}
.crl-rank__item:hover { background: var(--crl-emerald-mist); }
.crl-rank__item + .crl-rank__item { border-top: 1px solid var(--crl-line-soft); border-radius: 0; }
.crl-rank__n {
  font-family: var(--crl-font-display);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: -.05em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(11,107,58,.32);
}
.crl-rank__item--top .crl-rank__n { color: var(--crl-gold); -webkit-text-stroke: 0; }
.crl-rank__name { display: block; font-family: var(--crl-font-display); font-weight: 600; font-size: .98rem; color: var(--crl-ink); }
.crl-rank__sub { display: block; font-size: .76rem; color: var(--crl-meta); }
.crl-rank__val { font-family: var(--crl-font-mono); font-weight: 600; font-size: 1.02rem; color: var(--crl-emerald); text-align: right; }
.crl-rank__delta { display: block; font-family: var(--crl-font-mono); font-size: .68rem; text-align: right; color: var(--crl-meta); }
.crl-rank__delta--up   { color: var(--crl-emerald); }
.crl-rank__delta--down { color: var(--crl-gold-deep); }

/* player profile card */
.crl-player {
  position: relative;
  padding: 24px;
  border: 1px solid var(--crl-line);
  border-radius: var(--crl-r-panel);
  background: var(--crl-white);
  box-shadow: var(--crl-sh-2);
  overflow: hidden;
}
.crl-player__top { display: flex; align-items: center; gap: 16px; position: relative; z-index: 1; }
.crl-player__avatar { width: 72px; height: 72px; flex: 0 0 auto; border-radius: var(--crl-r-pill); background: var(--crl-emerald-mist); overflow: hidden; }
.crl-player__name { margin: 0 0 2px; font-size: 1.2rem; }
.crl-player__role { margin: 0; font-size: .82rem; color: var(--crl-meta); }
.crl-player__stats { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--crl-line-soft); }
.crl-player__stat b { display: block; font-family: var(--crl-font-mono); font-weight: 600; font-size: 1.15rem; color: var(--crl-emerald); letter-spacing: -.03em; }
.crl-player__stat span { font-size: .68rem; color: var(--crl-meta); text-transform: uppercase; letter-spacing: .05em; }

/* ==========================================================================
   15. FANTASY PREDICTION CARDS
   ========================================================================== */
.crl-fantasy {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 22px;
  border: 1px solid var(--crl-line);
  border-radius: var(--crl-r-card);
  background: linear-gradient(170deg, var(--crl-white) 0%, var(--crl-emerald-mist) 100%);
  box-shadow: var(--crl-sh-1);
  overflow: hidden;
  transition: transform var(--crl-med) var(--crl-ease), box-shadow var(--crl-med) var(--crl-ease);
}
.crl-fantasy:hover { transform: translateY(-4px); box-shadow: var(--crl-sh-2); }
.crl-fantasy__head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.crl-fantasy__title { margin: 0 0 6px; font-size: 1.05rem; }
.crl-fantasy__pick {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
  border-radius: var(--crl-r-sm);
  background: var(--crl-white);
  border: 1px solid var(--crl-line-soft);
}
.crl-fantasy__pick b { font-family: var(--crl-font-display); font-weight: 600; font-size: .92rem; color: var(--crl-ink); }
.crl-fantasy__pick span { display: block; font-size: .74rem; color: var(--crl-meta); }
.crl-fantasy__pts { margin-left: auto; font-family: var(--crl-font-mono); font-weight: 600; font-size: 1.05rem; color: var(--crl-gold-deep); }
.crl-fantasy__conf { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--crl-line-soft); }
.crl-fantasy__meter {
  position: relative;
  height: 8px;
  margin: 8px 0 6px;
  border-radius: var(--crl-r-pill);
  background: var(--crl-sunken);
  overflow: hidden;
}
.crl-fantasy__meter i {
  position: absolute; inset: 0 auto 0 0;
  border-radius: var(--crl-r-pill);
  background: linear-gradient(90deg, var(--crl-emerald), var(--crl-gold));
}

/* ==========================================================================
   16. SHOP PREVIEW & MERCHANDISE
   ========================================================================== */
.crl-product {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--crl-line);
  border-radius: var(--crl-r-card);
  background: var(--crl-white);
  box-shadow: var(--crl-sh-1);
  overflow: hidden;
  transition: transform var(--crl-med) var(--crl-ease), box-shadow var(--crl-med) var(--crl-ease);
}
.crl-product:hover { transform: translateY(-5px); box-shadow: var(--crl-sh-3); }
.crl-product__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: linear-gradient(160deg, var(--crl-emerald-mist), var(--crl-sunken));
  overflow: hidden;
}
.crl-product__media svg { width: 100%; height: 100%; }
.crl-product__tag { position: absolute; top: 11px; right: 11px; z-index: 2; }
.crl-product__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 16px 18px 18px; }
.crl-product__name { margin: 0 0 4px; font-size: .98rem; }
.crl-product__name a { color: var(--crl-ink); }
.crl-product__name a:hover { color: var(--crl-emerald); }
.crl-product__cat { margin: 0 0 12px; font-size: .76rem; color: var(--crl-meta); }
.crl-product__price { display: flex; align-items: baseline; gap: 9px; margin-top: auto; }
.crl-product__price b { font-family: var(--crl-font-mono); font-weight: 600; font-size: 1.12rem; color: var(--crl-emerald); letter-spacing: -.03em; }
.crl-product__price s { font-family: var(--crl-font-mono); font-size: .82rem; color: var(--crl-meta-faint); }
.crl-product__stars { display: inline-flex; gap: 2px; color: var(--crl-gold); }

/* ==========================================================================
   17. HIGHLIGHTS REEL & EVENT CALENDAR
   ========================================================================== */
.crl-reel {
  position: relative;
  display: block;
  border-radius: var(--crl-r-card);
  overflow: hidden;
  background: var(--crl-emerald-deep);
  box-shadow: var(--crl-sh-2);
  transition: transform var(--crl-med) var(--crl-ease);
}
.crl-reel:hover { transform: translateY(-4px); }
.crl-reel__media { aspect-ratio: 16 / 9; }
.crl-reel__media svg { width: 100%; height: 100%; }
.crl-reel__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--crl-r-pill);
  background: rgba(255,255,255,.92);
  color: var(--crl-emerald-deep);
  box-shadow: 0 8px 22px rgba(0,0,0,.24);
  transition: transform var(--crl-fast) var(--crl-ease), background var(--crl-fast) var(--crl-ease);
}
.crl-reel:hover .crl-reel__play { transform: translate(-50%, -50%) scale(1.08); background: var(--crl-gold); }
.crl-reel__time {
  position: absolute;
  right: 11px; bottom: 11px;
  padding: 3px 9px;
  border-radius: var(--crl-r-pill);
  background: rgba(6,74,39,.85);
  font-family: var(--crl-font-mono);
  font-size: .7rem;
  font-weight: 500;
  color: #fff;
}
.crl-reel__cap {
  padding: 14px 16px 16px;
  background: var(--crl-white);
  border: 1px solid var(--crl-line);
  border-top: 0;
  border-radius: 0 0 var(--crl-r-card) var(--crl-r-card);
}
.crl-reel__cap h3 { margin: 0 0 4px; font-size: .96rem; }
.crl-reel__cap h3 a { color: var(--crl-ink); }
.crl-reel__cap h3 a:hover { color: var(--crl-emerald); }

/* event calendar */
.crl-cal { display: flex; flex-direction: column; }
.crl-cal__item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 16px 4px;
  border-bottom: 1px solid var(--crl-line-soft);
}
.crl-cal__item:last-child { border-bottom: 0; }
.crl-cal__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 64px; height: 64px;
  border-radius: var(--crl-r-card);
  background: var(--crl-emerald-tint);
  color: var(--crl-emerald-deep);
}
.crl-cal__date b { font-family: var(--crl-font-mono); font-weight: 600; font-size: 1.28rem; line-height: 1; }
.crl-cal__date span { font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; margin-top: 3px; }
.crl-cal__item--gold .crl-cal__date { background: var(--crl-gold-tint); color: var(--crl-gold-deep); }
.crl-cal__title { margin: 0 0 3px; font-size: .98rem; }
.crl-cal__where { margin: 0; font-size: .78rem; color: var(--crl-meta); }

/* ==========================================================================
   18. COUNTERS, TESTIMONIALS, SPONSORS, CTA BAND
   ========================================================================== */
.crl-counters { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--crl-gap); }
.crl-counter {
  position: relative;
  padding: 26px 24px;
  border: 1px solid var(--crl-line);
  border-radius: var(--crl-r-card);
  background: var(--crl-white);
  box-shadow: var(--crl-sh-1);
  overflow: hidden;
}
.crl-counter__n {
  display: block;
  font-family: var(--crl-font-mono);
  font-weight: 600;
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--crl-emerald);
}
.crl-counter__label { display: block; margin-top: 10px; font-size: .86rem; color: var(--crl-meta); }
.crl-counter--gold .crl-counter__n { color: var(--crl-gold-deep); }

/* testimonial */
.crl-quote {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px 26px 24px;
  border: 1px solid var(--crl-line);
  border-radius: var(--crl-r-card);
  background: var(--crl-white);
  box-shadow: var(--crl-sh-1);
  overflow: hidden;
}
.crl-quote::before {
  content: "\201C";
  position: absolute;
  top: 4px; right: 20px;
  font-family: var(--crl-font-display);
  font-size: 5.5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--crl-emerald-tint);
  pointer-events: none;
}
.crl-quote__stars { display: inline-flex; gap: 2px; margin-bottom: 12px; color: var(--crl-gold); }
.crl-quote__text { position: relative; z-index: 1; margin: 0 0 20px; font-size: .96rem; color: var(--crl-ink-soft); }
.crl-quote__who { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--crl-line-soft); }
.crl-quote__avatar { width: 44px; height: 44px; flex: 0 0 auto; border-radius: var(--crl-r-pill); background: var(--crl-emerald-mist); overflow: hidden; }
.crl-quote__name { display: block; font-family: var(--crl-font-display); font-weight: 600; font-size: .92rem; color: var(--crl-ink); }
.crl-quote__from { display: block; font-size: .76rem; color: var(--crl-meta); }

/* sponsor showcase */
.crl-logos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.crl-logos__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 14px;
  border: 1px solid var(--crl-line);
  border-radius: var(--crl-r-card);
  background: var(--crl-white);
  color: var(--crl-meta);
  transition: all var(--crl-fast) var(--crl-ease);
}
.crl-logos__cell:hover { color: var(--crl-emerald); border-color: #c8dccd; box-shadow: var(--crl-sh-1); transform: translateY(-2px); }

/* CTA band */
.crl-cta {
  position: relative;
  border-radius: var(--crl-r-panel);
  padding: clamp(30px, 5vw, 56px);
  background: linear-gradient(150deg, var(--crl-emerald) 0%, var(--crl-emerald-deep) 100%);
  box-shadow: 0 22px 56px rgba(6,74,39,.26);
  overflow: hidden;
  color: rgba(255,255,255,.82);
}
.crl-cta__inner { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.crl-cta__text { flex: 1 1 340px; min-width: 0; }
.crl-cta__title { margin: 0 0 10px; color: #fff; }
.crl-cta__sub { margin: 0; color: rgba(255,255,255,.72); max-width: 56ch; }
.crl-cta__acts { display: flex; flex-wrap: wrap; gap: 12px; }

/* ==========================================================================
   19. BLOG / ANALYSIS CARDS, BYLINE, BREADCRUMBS, PAGER, SHARE
   ========================================================================== */
.crl-post { /* apply alongside .crl-card */ }
.crl-post__kicker { display: inline-flex; align-items: center; gap: 7px; font-size: .74rem; font-weight: 600; color: var(--crl-gold-deep); }

.crl-byline { display: flex; align-items: center; gap: 11px; }
.crl-byline__avatar { width: 34px; height: 34px; flex: 0 0 auto; border-radius: var(--crl-r-pill); background: var(--crl-emerald-mist); overflow: hidden; }
.crl-byline__name { display: block; font-family: var(--crl-font-display); font-weight: 600; font-size: .82rem; color: var(--crl-ink); }
.crl-byline__role { display: block; font-size: .72rem; color: var(--crl-meta); }

.crl-crumbs { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 16px; padding: 0; font-size: .8rem; color: var(--crl-meta); }
.crl-crumbs li { margin: 0; }
.crl-crumbs li + li::before { content: "/"; margin-right: 6px; opacity: .5; }
.crl-crumbs [aria-current="page"] { color: var(--crl-ink); font-weight: 600; }

.crl-pager { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-top: 34px; }
.crl-pager__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px; height: 40px;
  padding: 0 13px;
  border: 1px solid var(--crl-line);
  border-radius: var(--crl-r-pill);
  background: var(--crl-white);
  font-family: var(--crl-font-mono);
  font-weight: 600;
  font-size: .85rem;
  color: var(--crl-ink-soft);
  transition: all var(--crl-fast) var(--crl-ease);
}
.crl-pager__link:hover { border-color: #c8dccd; background: var(--crl-emerald-mist); color: var(--crl-emerald-deep); }
.crl-pager__link[aria-current="page"] { background: var(--crl-emerald); border-color: var(--crl-emerald); color: #fff; }
.crl-pager__link.is-disabled { opacity: .45; pointer-events: none; }

.crl-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.crl-share__label { font-size: .78rem; color: var(--crl-meta); margin-right: 4px; }
.crl-share__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid var(--crl-line);
  border-radius: var(--crl-r-pill);
  background: var(--crl-white);
  color: var(--crl-ink-soft);
  transition: all var(--crl-fast) var(--crl-ease);
}
.crl-share__btn:hover { border-color: var(--crl-emerald); background: var(--crl-emerald); color: #fff; }
.crl-share__btn.is-copied { border-color: var(--crl-gold); background: var(--crl-gold); color: #29200a; }

/* ==========================================================================
   20. FORMS
   ========================================================================== */
.crl-field { display: block; margin-bottom: 18px; }
.crl-field__label {
  display: block;
  margin-bottom: 7px;
  font-family: var(--crl-font-display);
  font-weight: 600;
  font-size: .82rem;
  color: var(--crl-ink);
}
.crl-field__label span { color: var(--crl-gold-deep); }

.crl-input, .crl-select, .crl-textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--crl-line);
  border-radius: var(--crl-r-card);
  background: var(--crl-white);
  color: var(--crl-ink);
  font-family: var(--crl-font-body);
  font-size: .94rem;
  line-height: 1.5;
  box-shadow: var(--crl-sh-inset);
  transition: border-color var(--crl-fast) var(--crl-ease), box-shadow var(--crl-fast) var(--crl-ease);
}
.crl-input::placeholder, .crl-textarea::placeholder { color: var(--crl-meta-faint); }
.crl-input:focus, .crl-select:focus, .crl-textarea:focus {
  outline: none;
  border-color: var(--crl-emerald);
  box-shadow: 0 0 0 4px rgba(11,107,58,.12);
}
.crl-textarea { min-height: 138px; resize: vertical; }
.crl-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236d776b' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 42px;
}
.crl-check { display: flex; align-items: flex-start; gap: 10px; font-size: .86rem; }
.crl-check input { margin-top: 4px; accent-color: var(--crl-emerald); width: 16px; height: 16px; flex: 0 0 auto; }

.crl-field__error { display: none; margin-top: 6px; font-size: .78rem; color: var(--crl-gold-deep); font-weight: 600; }
.crl-field.has-error .crl-input,
.crl-field.has-error .crl-select,
.crl-field.has-error .crl-textarea { border-color: #b8862a; box-shadow: 0 0 0 4px rgba(201,162,39,.16); }
.crl-field.has-error .crl-field__error { display: block; }

.crl-formnote {
  margin: 14px 0 0;
  padding: 0;
  font-size: .86rem;
  font-weight: 500;
}
.crl-formnote.is-ok  { padding: 12px 16px; border-radius: var(--crl-r-card); background: var(--crl-emerald-tint); color: var(--crl-emerald-deep); }
.crl-formnote.is-bad { padding: 12px 16px; border-radius: var(--crl-r-card); background: var(--crl-gold-tint); color: #8a6a10; }

/* newsletter */
.crl-news {
  position: relative;
  padding: clamp(28px, 4vw, 48px);
  border-radius: var(--crl-r-panel);
  background: var(--crl-white);
  border: 1px solid var(--crl-line);
  box-shadow: var(--crl-sh-2);
  overflow: hidden;
}
.crl-news__form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.crl-news__form .crl-field { flex: 1 1 240px; margin: 0; }

/* ==========================================================================
   21. FAQ ACCORDION & TABS PANELS
   ========================================================================== */
.crl-faq { display: flex; flex-direction: column; gap: 12px; }
.crl-faq__item {
  border: 1px solid var(--crl-line);
  border-radius: var(--crl-r-card);
  background: var(--crl-white);
  box-shadow: var(--crl-sh-1);
  overflow: hidden;
  transition: border-color var(--crl-fast) var(--crl-ease), box-shadow var(--crl-fast) var(--crl-ease);
}
.crl-faq__item:has(> h3 > [aria-expanded="true"]) { border-color: #c8dccd; box-shadow: var(--crl-sh-2); }
.crl-faq__item > h3 { margin: 0; }
.crl-faq__q {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 17px 20px;
  border: 0;
  background: none;
  text-align: left;
  font-family: var(--crl-font-display);
  font-weight: 600;
  font-size: .98rem;
  letter-spacing: -.015em;
  color: var(--crl-ink);
  transition: color var(--crl-fast) var(--crl-ease);
}
.crl-faq__q:hover { color: var(--crl-emerald); }
.crl-faq__sign {
  position: relative;
  flex: 0 0 auto;
  margin-left: auto;
  width: 26px; height: 26px;
  border-radius: var(--crl-r-pill);
  background: var(--crl-emerald-tint);
  transition: background var(--crl-fast) var(--crl-ease), transform var(--crl-med) var(--crl-ease);
}
.crl-faq__sign::before, .crl-faq__sign::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 11px; height: 2px;
  border-radius: 2px;
  background: var(--crl-emerald-deep);
  transform: translate(-50%, -50%);
  transition: transform var(--crl-med) var(--crl-ease), opacity var(--crl-fast) var(--crl-ease);
}
.crl-faq__sign::after { transform: translate(-50%, -50%) rotate(90deg); }
.crl-faq__q[aria-expanded="true"] .crl-faq__sign { background: var(--crl-emerald); }
.crl-faq__q[aria-expanded="true"] .crl-faq__sign::before,
.crl-faq__q[aria-expanded="true"] .crl-faq__sign::after { background: #fff; }
.crl-faq__q[aria-expanded="true"] .crl-faq__sign::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }
.crl-faq__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--crl-slow) var(--crl-ease);
}
.crl-faq__a > div { padding: 0 20px 20px; font-size: .92rem; color: var(--crl-ink-soft); }
.crl-faq__a p:last-child { margin-bottom: 0; }

/* ==========================================================================
   22. INTERIOR PAGE HERO
   ========================================================================== */
.crl-phero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(44px, 6vw, 82px);
  background: linear-gradient(180deg, #ffffff 0%, var(--crl-paper) 100%);
  border-bottom: 1px solid var(--crl-line-soft);
}
.crl-phero__inner { position: relative; z-index: 1; max-width: 760px; }
.crl-phero__title { margin: 12px 0 14px; }
.crl-phero--field {
  background: linear-gradient(150deg, var(--crl-emerald) 0%, var(--crl-emerald-deep) 100%);
  border-bottom: 0;
  color: rgba(255,255,255,.8);
}
.crl-phero--field .crl-phero__title, .crl-phero--field h1 { color: #fff; }
.crl-phero--field .crl-lede { color: rgba(255,255,255,.76); }
.crl-phero--field .crl-eyebrow { color: var(--crl-gold); }
.crl-phero--field .crl-crumbs, .crl-phero--field .crl-crumbs [aria-current="page"] { color: rgba(255,255,255,.72); }
.crl-phero--field .crl-crumbs a { color: rgba(255,255,255,.9); }

/* ==========================================================================
   23. FOOTER
   ========================================================================== */
.crl-footer {
  position: relative;
  margin-top: clamp(48px, 7vw, 88px);
  padding-top: clamp(46px, 6vw, 76px);
  background: linear-gradient(170deg, var(--crl-emerald-deep) 0%, #04351c 100%);
  color: rgba(255,255,255,.7);
  overflow: hidden;
}
.crl-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background-image: repeating-linear-gradient(90deg, var(--crl-gold) 0px, var(--crl-gold) 9px, transparent 9px, transparent 18px);
  opacity: .8;
}
.crl-footer a { color: rgba(255,255,255,.78); }
.crl-footer a:hover { color: var(--crl-gold); }
.crl-footer__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.5fr .85fr .85fr .85fr 1.35fr;
  gap: clamp(22px, 3vw, 40px);
  padding-bottom: clamp(30px, 4vw, 48px);
}
.crl-footer .crl-logo__word, .crl-footer .crl-logo:hover { color: #fff; }
.crl-footer .crl-logo__word em { color: var(--crl-gold); }
.crl-footer .crl-logo__tag { color: rgba(255,255,255,.5); }
.crl-footer__about { margin: 16px 0 18px; font-size: .88rem; color: rgba(255,255,255,.66); max-width: 40ch; }
.crl-footer__title {
  margin: 0 0 14px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--crl-gold);
}
.crl-footer__links { list-style: none; margin: 0; padding: 0; }
.crl-footer__links li { margin-bottom: 9px; }
.crl-footer__links a { font-size: .89rem; }
.crl-footer__contact { list-style: none; margin: 0 0 4px; padding: 0; }
.crl-footer__contact li { display: flex; gap: 11px; margin-bottom: 13px; font-size: .86rem; color: rgba(255,255,255,.66); }
.crl-footer__contact svg { flex: 0 0 auto; margin-top: 3px; color: var(--crl-gold); }
.crl-footer .crl-input {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
  color: #fff;
  box-shadow: none;
}
.crl-footer .crl-input::placeholder { color: rgba(255,255,255,.45); }
.crl-footer .crl-input:focus { border-color: var(--crl-gold); box-shadow: 0 0 0 4px rgba(201,162,39,.18); }
.crl-footer .crl-formnote.is-ok { background: rgba(201,162,39,.16); color: var(--crl-gold); }
.crl-footer .crl-formnote.is-bad { background: rgba(255,255,255,.12); color: #fff; }

.crl-social { display: flex; gap: 8px; }
.crl-social__a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--crl-r-pill);
  color: rgba(255,255,255,.8);
  transition: all var(--crl-fast) var(--crl-ease);
}
.crl-social__a:hover { background: var(--crl-gold); border-color: var(--crl-gold); color: #29200a; transform: translateY(-2px); }

.crl-footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 20px 0;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: .82rem;
  color: rgba(255,255,255,.55);
}
.crl-footer__bar p { margin: 0; }
.crl-footer__legal { margin-left: auto; display: flex; flex-wrap: wrap; gap: 18px; }
.crl-footer__legal a { font-size: .82rem; }
.crl-footer__parent {
  margin: 0;
  padding: 16px 0 22px;
  border-top: 1px solid rgba(255,255,255,.08);
  text-align: center;
  font-size: .82rem;
  color: rgba(255,255,255,.5);
}
.crl-footer__parent strong { color: var(--crl-gold); font-weight: 600; }

/* ==========================================================================
   24. FLOATING UI
   ========================================================================== */
.crl-progress {
  position: fixed;
  top: 0; left: 0;
  z-index: 120;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--crl-emerald), var(--crl-gold));
  border-radius: 0 3px 3px 0;
  transition: width 80ms linear;
}

.crl-wa {
  position: fixed;
  left: 20px; bottom: 22px;
  z-index: 110;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: var(--crl-r-pill);
  background: #128c3e;           /* the single non-token colour: WhatsApp green */
  color: #fff;
  box-shadow: 0 10px 26px rgba(18,140,62,.36);
  transition: transform var(--crl-fast) var(--crl-ease);
}
.crl-wa:hover { transform: translateY(-3px) scale(1.05); color: #fff; }

.crl-top {
  position: fixed;
  right: 20px; bottom: 22px;
  z-index: 110;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border: 1px solid var(--crl-line);
  border-radius: var(--crl-r-pill);
  background: var(--crl-white);
  color: var(--crl-emerald);
  box-shadow: var(--crl-sh-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: all var(--crl-med) var(--crl-ease);
}
.crl-top.is-shown { opacity: 1; visibility: visible; transform: translateY(0); }
.crl-top:hover { background: var(--crl-emerald); color: #fff; border-color: var(--crl-emerald); }

.crl-cookie {
  position: fixed;
  left: 50%; bottom: 20px;
  z-index: 115;
  width: min(760px, calc(100vw - 40px));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  border: 1px solid var(--crl-line);
  border-radius: var(--crl-r-panel);
  background: var(--crl-white);
  box-shadow: var(--crl-sh-3);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 24px);
  transition: all var(--crl-slow) var(--crl-ease-out);
}
.crl-cookie.is-shown { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.crl-cookie__text { flex: 1 1 320px; margin: 0; font-size: .86rem; color: var(--crl-ink-soft); }
.crl-cookie__acts { display: flex; gap: 9px; }

/* ==========================================================================
   25. SCROLL REVEAL & MOTION
   ========================================================================== */
[data-cl-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--crl-reveal) var(--crl-ease-out),
              transform var(--crl-reveal) var(--crl-ease-out);
  will-change: opacity, transform;
}
[data-cl-reveal="left"]  { transform: translateX(-28px); }
[data-cl-reveal="right"] { transform: translateX(28px); }
[data-cl-reveal="fade"]  { transform: none; }
[data-cl-reveal="zoom"]  { transform: scale(.955); }
[data-cl-reveal].is-in   { opacity: 1; transform: none; }

.u-d1 { transition-delay: 70ms; }
.u-d2 { transition-delay: 140ms; }
.u-d3 { transition-delay: 210ms; }
.u-d4 { transition-delay: 280ms; }
.u-d5 { transition-delay: 350ms; }
.u-d6 { transition-delay: 420ms; }

/* ==========================================================================
   26. UTILITIES
   ========================================================================== */
.u-hide { display: none !important; }
.u-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.u-center { text-align: center; }
.u-right  { text-align: right; }
.u-flex   { display: flex; align-items: center; }
.u-between{ display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.u-wrap   { flex-wrap: wrap; }
.u-gap-sm { gap: 8px; }
.u-gap    { gap: 16px; }

.u-mt0 { margin-top: 0 !important; }
.u-mt1 { margin-top: 10px; }
.u-mt2 { margin-top: 20px; }
.u-mt3 { margin-top: 32px; }
.u-mt4 { margin-top: 46px; }
.u-mb0 { margin-bottom: 0 !important; }
.u-mb1 { margin-bottom: 10px; }
.u-mb2 { margin-bottom: 20px; }
.u-mb3 { margin-bottom: 32px; }

.u-green  { color: var(--crl-emerald); }
.u-gold   { color: var(--crl-gold-deep); }
.u-ink    { color: var(--crl-ink); }
.u-muted  { color: var(--crl-meta); }
.u-white  { color: #fff; }
.u-mono   { font-family: var(--crl-font-mono); font-weight: 600; font-variant-numeric: tabular-nums; }
.u-nowrap { white-space: nowrap; }
.u-maxch  { max-width: 62ch; }
.u-full   { grid-column: 1 / -1; }
.u-rel    { position: relative; }

/* ==========================================================================
   27. RESPONSIVE
   ========================================================================== */
@media (max-width: 1180px) {
  .crl-dash, .crl-dash--flip { grid-template-columns: 1.4fr 1fr; }
  .crl-dash__rail { grid-column: 1 / -1; position: static; }
  .crl-logos { grid-template-columns: repeat(3, 1fr); }
  .crl-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
}

@media (max-width: 1020px) {
  :root { --crl-header-h: 66px; }
  .crl-nav { display: none; }
  .crl-burger { display: inline-flex; }
  .crl-hero__grid { grid-template-columns: 1fr; }
  .crl-split, .crl-split--left { grid-template-columns: 1fr; }
  .crl-lean, .crl-lean--rev { grid-template-columns: 1fr; }
  .crl-quad { grid-template-columns: repeat(2, 1fr); }
  .crl-counters { grid-template-columns: repeat(2, 1fr); }
  .u-hide-md { display: none !important; }
}

@media (max-width: 820px) {
  .crl-dash, .crl-dash--flip { grid-template-columns: 1fr; }
  .crl-trio { grid-template-columns: 1fr; }
  .crl-sechead { flex-direction: column; align-items: flex-start; gap: 14px; }
  .crl-sechead__more { padding-bottom: 0; }
  .crl-footer__grid { grid-template-columns: 1fr 1fr; }
  .crl-player__stats { grid-template-columns: repeat(2, 1fr); }
  .crl-cookie { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 620px) {
  body { font-size: 15.5px; }
  .crl-duo { grid-template-columns: 1fr; }
  .crl-quad { grid-template-columns: 1fr; }
  .crl-counters { grid-template-columns: 1fr; }
  .crl-logos { grid-template-columns: repeat(2, 1fr); }
  .crl-footer__grid { grid-template-columns: 1fr; }
  .crl-footer__legal { margin-left: 0; }
  .crl-academy { grid-template-columns: 56px 1fr; }
  .crl-academy__badge { width: 56px; height: 56px; }
  .crl-academy__rating { grid-column: 1 / -1; text-align: left; }
  .crl-cal__item { grid-template-columns: 54px 1fr; }
  .crl-cal__date { width: 54px; height: 54px; }
  .crl-ghostnum { font-size: 5.5rem; }
  .u-hide-sm { display: none !important; }
  .crl-wa { width: 46px; height: 46px; left: 14px; bottom: 16px; }
  .crl-top { width: 42px; height: 42px; right: 14px; bottom: 16px; }
}

/* ==========================================================================
   28. REDUCED MOTION & PRINT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-cl-reveal] { opacity: 1 !important; transform: none !important; }
  .crl-ticker__track { animation: none; }
  .crl-floodlight::before, .crl-floodlight::after { animation: none; }
  .crl-pulse { animation: none; }
  .crl-card:hover, .crl-product:hover, .crl-glass:hover,
  .crl-coach:hover, .crl-fantasy:hover, .crl-reel:hover,
  .crl-btn:hover, .crl-social__a:hover, .crl-logos__cell:hover { transform: none; }
}

@media print {
  .crl-header, .crl-drawer, .crl-strip, .crl-ticker, .crl-wa, .crl-top,
  .crl-cookie, .crl-progress, .crl-mega, .crl-skip { display: none !important; }
  body { background: #fff; color: #000; }
  .crl-footer { background: #fff; color: #000; }
  .crl-card, .crl-match, .crl-tablewrap { box-shadow: none; border-color: #999; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}