/* ===================================================================
   Solutions · Sports — page-specific layer.
   Loads AFTER base.css (tokens, reset, primitives, buttons, nav, footer).
   Dark default; .section-light blocks flip to the cream theme + field
   green via base.css's token swap. Highlight (.hl) follows --accent, so
   it renders electric green on dark and field green on light automatically.
   =================================================================== */

.hl { color: var(--accent); }

/* Shared section primitives ----------------------------------------- */
.s-block { padding: 14vh 0; position: relative; }
/* Gutter on the inner so content tracks the nav frame (centered --max + 72px)
   above 1440px, matching the other pages. =5vw below 1440. */
.s-block-inner { max-width: var(--max); margin: 0 auto; padding: 0 min(5vw, 72px); }

.s-split {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(360px, 1.05fr);
  gap: 6vw;
  align-items: center;
}
/* reverse column order: visual on the left, copy on the right */
.s-split-rl .s-art   { order: -1; }

/* Activation: keep the copy column wide (so "Simultaneous activation." stays
   on one line) but use the standard --max frame so the section aligns to the
   nav gutter like every other block. */
#activation .s-split { grid-template-columns: 1.25fr 1fr; column-gap: 3vw; }
#activation .s-headline { max-width: none; }

.s-stack-center { display: flex; flex-direction: column; align-items: center; gap: 7vh; }

/* band-flow — the six content bands, in normal document flow.

   This was a "paper-stack" ported from platform.html: every band pinned with
   position:sticky at exactly 100vh, sliding over the previous one, with a
   scroll-snap in js/solutions-sports.js settling between them.

   It was removed because of what 100vh cost. Measured on this page at
   1440x900, content filled 58-72% of each pinned band (one-platform 64%, iq
   60%, activation 58%) — about two screens of the page were empty by
   construction. The height could not simply be reduced: the snap math was one
   viewport per paper, so a shorter band pushed every later pin point out of
   position. Pinning and the empty space were the same decision.

   Worse for the reader, a band that is exactly the viewport can never show
   what is coming. Bands in flow end above the fold and the next one peeks,
   which is the thing that actually pulls someone down a long page.

   What did NOT go with it: the reveal-on-scroll, the word-stagger headlines,
   the IQ tag stagger, the convergence lines. That was always the motion on
   this page. The pinning was scaffolding around it.

   Several rules elsewhere in this file existed only to squeeze a band into
   one viewport — height caps on the IQ and Engage art, tightened IQ card
   padding. Those are gone too: in flow the art can run at its natural size,
   which fills the band with content instead of leaving a void around it. If
   you are tempted to reintroduce a fixed height, that is the trade you are
   making. */
.band-flow > .s-block { padding-block: 8vh; }

/* Designed section artwork (SVG) drops straight into the art column. */
.s-art-img, .s-hero-art-img {
  display: block;
  width: 100%;
  height: auto;
}

.eyebrow { display: block; margin-bottom: 26px; }

.s-headline {
  /* h3-scale section titles (was clamp(34px, 4.6vw, 64px)). Kept as <h2> for
     heading hierarchy; only the visual size drops. */
  font-size: clamp(26px, 3.1vw, 42px);
  line-height: 1.02;
  max-width: 22ch;
  margin-bottom: 22px;
}
.s-copy-center .s-headline { max-width: 24ch; margin-left: auto; margin-right: auto; }

.s-body {
  font-family: var(--body);
  font-weight: 400;
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.6;
  color: var(--dim);
  max-width: 52ch;
}
.s-copy-center { text-align: center; }
.s-body-center { margin-left: auto; margin-right: auto; max-width: 64ch; }

/* ===================================================================
   HERO
   =================================================================== */
.s-hero {
  position: relative;
  background: #000;
  padding: 22vh 0 0;
  overflow: hidden;
  border-bottom: 1px solid var(--hair);
  isolation: isolate;
}
.s-hero-grid-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 84px 84px;
  mask-image: radial-gradient(ellipse at 30% 30%, black 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse at 30% 30%, black 0%, transparent 72%);
}
.s-hero-inner {
  position: relative; z-index: 2;
  max-width: var(--max); margin: 0 auto; padding: 0 min(5vw, 72px);
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(360px, 1.25fr);
  gap: 4vw;
  align-items: center;
  padding-bottom: 10vh;
}

.breadcrumb {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--dim);
  margin-bottom: 30px;
}
.breadcrumb a { color: var(--dim); transition: color .2s var(--ease); }
.breadcrumb a:hover { color: var(--text); }
.crumb-sep { color: var(--dim-2); }

.s-hero-headline {
  margin-bottom: 30px;
}
/* Lead line is deliberately small so "Sports" carries the weight. */
.s-hero-lead {
  display: block;
  font-size: clamp(20px, 2.4vw, 34px);
  line-height: 1.04;
  color: var(--text);
}
.s-hero-sport {
  display: block;
  font-size: clamp(58px, 9.2vw, 132px);
  line-height: .9;
  margin-top: .06em;
}
.s-hero-sub {
  font-family: var(--body);
  font-weight: 400;
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.5;
  color: var(--dim);
  max-width: 46ch;
  margin-bottom: 30px;
}

.aud-line {
  list-style: none; display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px 18px;
  margin-bottom: 38px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--dim);
}
.aud-line li { display: inline-flex; align-items: center; }
.aud-line li:not(:last-child)::after {
  content: "·"; margin-left: 18px; color: var(--accent);
}

.s-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }

/* Hero art column — holds the designed athlete/hexagon SVG */
.s-hero-art { position: relative; display: flex; align-items: center; justify-content: center; }
.hexshot {
  position: absolute;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  overflow: hidden;
  background: var(--bg-2);
}
.hexshot img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06); }
.hexshot-lg { width: 78%; aspect-ratio: 1 / 1.06; top: 4%; right: 0;
  box-shadow: 0 30px 70px rgba(0,0,0,.6); }
.hexshot-sm { width: 44%; aspect-ratio: 1 / 1.06; bottom: 0; left: 0;
  border: 1px solid var(--hair); z-index: 2;
  box-shadow: 0 20px 48px rgba(0,0,0,.55); }
.hexshot-sm::after,
.hexshot-lg::after {
  content: ""; position: absolute; inset: 0;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  box-shadow: inset 0 0 0 1px rgba(182,245,0,.18);
}

/* Customer strip */
.customer-strip {
  position: relative; z-index: 2;
  /* Sits outside .s-hero-inner, so inset it by the nav gutter via MARGIN (not
     max-width centering) — that way both the leagues text AND its border-top
     line up with the hero content frame (252..1548 @1800). =5vw below 1440. */
  margin: 0 max(5vw, calc((100vw - var(--max)) / 2 + 72px));
  border-top: 1px solid var(--hair);
  padding: 30px 0 40px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px 32px;
}
.customer-strip-label { color: var(--dim-2); flex: 0 0 auto; }
.customer-marks {
  list-style: none; display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px 28px;
}
.customer-marks li {
  font-family: 'Oswald', sans-serif; font-weight: 600; text-transform: uppercase;
  font-size: clamp(15px, 1.5vw, 20px); letter-spacing: .03em;
  color: var(--text); opacity: .55;
  transition: opacity .2s var(--ease), color .2s var(--ease);
}
.customer-marks li:hover { opacity: 1; color: var(--accent); }

/* ===================================================================
   HERO ENTRANCE ANIMATION
   Text — each line wipes in left→right, staggered top to bottom.
   Image — "prints" in top→bottom with a traveling print-head bar.
   Auto-plays on load (animation-fill-mode: both holds the pre-state
   during the delay); fully disabled under reduced-motion.
   =================================================================== */
.s-hero-lead .hl-line { display: block; }

/* Only the RIGHT edge animates (the wipe). The other three sit at a negative
   inset so the settled state leaves room for glyph overshoot — Oswald's ink
   box is taller than its line box (the hero's line-height is .9), so a
   settled `inset(0 0 0 0)` clips the caps and descenders of the display type.
   Same trick as `.reveal .s-art` below; clip-path can't transition to `none`.
   The inset is in `em` so it scales with the clamped hero font sizes. */
@keyframes heroTextIn {
  from { clip-path: inset(-0.4em 100% -0.4em -0.4em); transform: translateX(-18px); }
  to   { clip-path: inset(-0.4em);                    transform: translateX(0); }
}
/* Layered word-rise on the hero headline — words fade up in sequence on top
   of the per-line wipe. Each line's words start at that line's wipe delay. */
@keyframes heroWordRise {
  from { opacity: 0; transform: translateY(0.5em); }
  to   { opacity: 1; transform: none; }
}
.s-hero-lead .hw, .s-hero-sport .hw {
  display: inline-block;
  animation: heroWordRise .6s cubic-bezier(.16,1,.3,1) both;
}
.s-hero-lead .hl-line:nth-child(1) .hw { animation-delay: calc(.30s + var(--i) * 70ms); }
.s-hero-lead .hl-line:nth-child(2) .hw { animation-delay: calc(.42s + var(--i) * 70ms); }
.s-hero-sport .hw                       { animation-delay: calc(.56s + var(--i) * 60ms); }
@keyframes heroPrintReveal {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes heroPrintBar {
  0%   { left: 0;    opacity: 0; }
  10%  { opacity: .55; }
  90%  { opacity: .55; }
  100% { left: 100%; opacity: 0; }
}

.s-hero-copy .breadcrumb,
.s-hero-lead .hl-line,
.s-hero-sport,
.s-hero-sub,
.aud-line,
.s-hero-ctas {
  animation: heroTextIn .7s cubic-bezier(.16,1,.3,1) both;
}
.s-hero-copy .breadcrumb            { animation-delay: .15s; }
.s-hero-lead .hl-line:nth-child(1)  { animation-delay: .30s; }
.s-hero-lead .hl-line:nth-child(2)  { animation-delay: .42s; }
.s-hero-sport                       { animation-delay: .56s; animation-duration: .85s; }
.s-hero-sub                         { animation-delay: .85s; }
.aud-line                           { animation-delay: .98s; }
.s-hero-ctas                        { animation-delay: 1.12s; }

/* Image prints top→bottom, with a glowing print-head line tracking the edge */
.s-hero-art-img {
  animation: heroPrintReveal 1.5s cubic-bezier(.45,0,.12,1) .5s both;
}
.s-hero-art::after {
  content: "";
  position: absolute; top: 0; bottom: 0; left: 0;
  width: 1px;
  background: var(--accent);
  box-shadow: 0 0 7px 0 rgba(182,245,0,.35);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  animation: heroPrintBar 1.5s cubic-bezier(.45,0,.12,1) .5s both;
}

@media (prefers-reduced-motion: reduce) {
  .s-hero-copy .breadcrumb,
  .s-hero-lead .hl-line,
  .s-hero-sport,
  .s-hero-sub,
  .aud-line,
  .s-hero-ctas,
  .s-hero-art-img { animation: none; }
  .s-hero-lead .hw, .s-hero-sport .hw { animation: none; }
  .s-hero-art::after { display: none; }
}

/* ===================================================================
   "ONE PLATFORM" — convergence visual
   =================================================================== */
.converge {
  position: relative;
  aspect-ratio: 1.25 / 1;
  border: 1px solid var(--hair);
  background: var(--bg-2);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 32px;
  overflow: hidden;
}
.converge-sources {
  list-style: none; display: flex; flex-direction: column; gap: 12px;
  position: relative; z-index: 2;
}
.converge-sources li {
  padding: 9px 13px; border: 1px solid var(--hair); background: var(--bg-3);
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--dim); width: fit-content;
  border-left: 2px solid var(--accent);
}
.converge-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.converge-lines path {
  stroke: var(--accent); stroke-width: 1; stroke-opacity: .4; fill: none;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.1s var(--ease);
}
.reveal.is-in .converge-lines path { stroke-dashoffset: 0; }
.converge-library {
  position: relative; z-index: 2; justify-self: end;
  width: 132px; height: 152px;
  display: flex; align-items: center; justify-content: center;
}
.converge-hex {
  position: absolute; inset: 0;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: var(--accent); opacity: .12;
  box-shadow: inset 0 0 0 1.5px var(--accent);
}
.converge-lib-label {
  position: relative; z-index: 2; text-align: center;
  font-family: 'Oswald', sans-serif; font-weight: 600; text-transform: uppercase;
  font-size: 18px; line-height: 1; color: var(--text); letter-spacing: .02em;
}

/* ===================================================================
   IQ SUITE — framed asset + resolving tags
   =================================================================== */
.iq-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--hair-strong);
  overflow: hidden;
  background: var(--bg-2);
  box-shadow: 0 30px 70px rgba(0,0,0,.5);
}
.iq-frame img { width: 100%; height: 100%; object-fit: cover; }
.iq-tag {
  position: absolute; left: var(--x); top: var(--y);
  transform: translate(-50%, -50%);
  padding: 7px 11px;
  background: rgba(8,9,10,.86);
  border: 1px solid var(--accent);
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text); white-space: nowrap;
  opacity: 0;
  transition: opacity .5s var(--ease);
}
.iq-tag b { font-weight: 600; }
.iq-tag::after {
  content: ""; position: absolute; left: -5px; top: -5px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 3px rgba(8,9,10,.86);
}
.reveal.is-in .iq-tag { opacity: 1; }
.reveal.is-in .iq-face   { transition-delay: .15s; }
.reveal.is-in .iq-roster { transition-delay: .35s; }
.reveal.is-in .iq-scene  { transition-delay: .55s; }
.reveal.is-in .iq-brand  { transition-delay: .75s; }
.iq-context {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  background: linear-gradient(to top, rgba(0,0,0,.92), rgba(0,0,0,0));
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--dim);
}
.iq-context-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: 0 0 auto;
  animation: pulse 1.8s ease-in-out infinite;
}

/* ---- IQ section layout: header row · headline · asset + detail grid ---- */
.iq-head {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  margin-bottom: 40px;
}
.iq-eyebrow {
  margin-bottom: 0; display: inline-flex; align-items: center; gap: 12px;
}
.iq-eyebrow::before {
  content: ""; width: 9px; height: 9px; background: var(--accent); flex: 0 0 auto;
}
/* Keep the IQ title on a single line (the 30ch cap forced a wrap); released
   below 900px where the grid stacks — see the responsive block. */
.iq-headline { max-width: none; white-space: nowrap; margin-bottom: 56px; }

.iq-grid {
  display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 4vw;
  align-items: start;
}
.iq-asset { display: flex; align-items: flex-start; justify-content: center; }
.iq-asset .s-art-img { max-width: 440px; }
/* In the two-column grid the framed asset fills the column height
   (overrides the standalone 4/5 portrait ratio used elsewhere). */
.iq-grid .iq-frame {
  aspect-ratio: auto; width: 100%; height: 100%; min-height: 460px;
}
.iq-detail { display: flex; flex-direction: column; }

.iq-cards {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--hair); border-left: 1px solid var(--hair);
}
.iq-card {
  border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
  padding: 24px 26px;
}
.iq-card h3 {
  font-family: 'Oswald', sans-serif; font-weight: 600; text-transform: uppercase;
  font-size: 20px; letter-spacing: .01em; color: var(--text); margin-bottom: 12px;
}
.iq-card p {
  font-family: var(--body); font-weight: 400;
  font-size: 14px; line-height: 1.5; color: var(--dim);
}
/* Cards fade up in sequence once the section scrolls in (reveal once). */
.reveal .iq-card {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
}
.reveal.is-in .iq-card { opacity: 1; transform: none; }
.reveal.is-in .iq-card:nth-child(1) { transition-delay: .20s; }
.reveal.is-in .iq-card:nth-child(2) { transition-delay: .32s; }
.reveal.is-in .iq-card:nth-child(3) { transition-delay: .44s; }
.iq-body { margin-top: 28px; max-width: none; }

/* ===================================================================
   FAVORITE APP — phone mockup
   =================================================================== */
.phone-stage { position: relative; display: flex; justify-content: center; padding: 20px 0; }
.phone {
  width: clamp(240px, 26vw, 300px);
  aspect-ratio: 9 / 18.5;
  background: #0a0c0e;
  border: 1px solid var(--hair-strong);
  border-radius: 34px;
  padding: 12px;
  position: relative;
  box-shadow: 0 36px 80px rgba(0,0,0,.5);
}
.phone-notch {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 38%; height: 18px; background: #0a0c0e; border-radius: 0 0 12px 12px; z-index: 3;
}
.phone-screen {
  width: 100%; height: 100%; border-radius: 24px; overflow: hidden;
  background: #050607; display: flex; flex-direction: column;
}
.phone-head {
  display: flex; align-items: center; gap: 10px;
  padding: 26px 16px 14px; border-bottom: 1px solid var(--hair);
}
.phone-avatar {
  width: 34px; height: 34px; flex: 0 0 auto;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  background: var(--accent); opacity: .85;
}
.phone-head-text b {
  display: block; font-family: 'Oswald', sans-serif; font-weight: 500;
  text-transform: uppercase; font-size: 13px; letter-spacing: .02em; color: #f4f5f6;
}
.phone-head-text small {
  font-family: var(--mono); font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; color: #B6F500;
}
.phone-grid {
  flex: 1; display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 4px; padding: 8px; align-content: start;
}
.phone-grid span {
  aspect-ratio: 1; background-size: cover; background-position: center;
  filter: grayscale(.2) contrast(1.04); border-radius: 3px;
}
.phone-share {
  position: absolute; right: -8px; bottom: 36px;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  background: var(--bg-2); border: 1px solid var(--accent);
  box-shadow: 0 18px 40px rgba(0,0,0,.5);
}
.section-light .phone-share { background: #101214; }
.phone-share-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: 0 0 auto;
  animation: pulse 1.8s ease-in-out infinite;
}
.phone-share b {
  display: block; font-family: 'Oswald', sans-serif; font-weight: 500;
  text-transform: uppercase; font-size: 12px; letter-spacing: .03em; color: #f4f5f6;
}
.phone-share small {
  font-family: var(--mono); font-size: 9px; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,.6);
}

/* ===================================================================
   FANS — split (incoming / outgoing)
   =================================================================== */
.fan-split {
  width: 100%;
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 4vw;
  align-items: start;
}
.fan-col { display: flex; flex-direction: column; gap: 18px; }
.fan-dir {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--accent);
}
.fan-arrow { font-size: 15px; line-height: 1; }
.fan-clip {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  border: 1px solid var(--hair); background: var(--bg-2);
}
.fan-clip img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.25) contrast(1.05); }
.fan-tag {
  position: absolute; left: 12px; bottom: 12px;
  padding: 5px 9px; background: rgba(8,9,10,.85); border-left: 2px solid var(--accent);
  font-family: var(--mono); font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text);
}
.fan-note { font-family: var(--body); font-weight: 400; font-size: 14px;
  line-height: 1.5; color: var(--dim); }
.fan-divider { width: 1px; align-self: stretch; background: var(--hair); }

/* Single Engage artwork (replaces the old two-column split) */
.fan-stage { display: flex; justify-content: center; }
.fan-img { max-width: min(100%, 560px); }

/* Engage stacks its copy ABOVE the art rather than beside it, so it runs
   taller than every other band — 732px against 571-634px, which left only
   81px of the next band showing where the others leave 180-240px. One band
   swallowing the viewport is exactly the arrhythmia that made the scroll feel
   clunky. Tighten the column gap and hold the art to a share of the viewport
   so the band tracks the others at any window height (646px at vh=813, 701px
   at vh=913). Viewport-relative, NOT a fixed cap: that was the mistake the
   pinned layout made. */
#fans .s-stack-center { gap: 5vh; }
#fans .fan-img { width: auto; max-height: 34vh; }

/* Fans: wider centered header + body */
#fans .s-headline { max-width: 40ch; }
#fans .s-body { max-width: 92ch; }

/* ===================================================================
   ACTIVATION — stranded vs. everywhere
   =================================================================== */
.spread {
  width: 100%;
  display: grid; grid-template-columns: 1fr auto 1.4fr; gap: 4vw;
  align-items: center;
}
.spread-stranded { display: flex; justify-content: center; }
.sd-card {
  position: relative;
  width: 150px; height: 184px;
  border: 1px solid var(--hair-strong);
  background: var(--bg-3);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 16px; gap: 4px;
  opacity: .6;
}
.section-light .sd-card { background: var(--bg-2); }
.sd-card-notch {
  position: absolute; top: 0; right: 0; width: 40px; height: 28px;
  background: var(--bg); border-left: 1px solid var(--hair-strong); border-bottom: 1px solid var(--hair-strong);
  clip-path: polygon(40% 0, 100% 0, 100% 100%, 0 100%);
}
.sd-card-label {
  font-family: 'Oswald', sans-serif; font-weight: 500; text-transform: uppercase;
  font-size: 16px; letter-spacing: .02em; color: var(--text);
}
.sd-card-cap {
  font-family: var(--mono); font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--dim);
}
.spread-vs {
  font-family: 'Oswald', sans-serif; font-weight: 500; text-transform: uppercase;
  font-size: 18px; color: var(--dim-2); text-align: center;
}
.spread-everywhere { position: relative; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.spread-core {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  width: 120px; height: 138px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: var(--accent); color: #0F0F0F;
  font-family: 'Oswald', sans-serif; font-weight: 600; text-transform: uppercase;
  font-size: 15px; letter-spacing: .02em; line-height: 1.05; padding: 0 12px;
}
.spread-nodes {
  list-style: none; display: grid; grid-template-columns: repeat(2, auto);
  gap: 10px 12px;
}
.spread-nodes li {
  padding: 9px 13px; border: 1px solid var(--hair); background: var(--bg-2);
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--dim); white-space: nowrap;
}
.section-light .spread-nodes li { background: transparent; }

/* ===================================================================
   REVENUE — browser frame / attribution dashboard
   =================================================================== */
.browser {
  border: 1px solid var(--hair-strong);
  background: var(--bg-2);
  box-shadow: 0 30px 70px rgba(0,0,0,.5);
  overflow: hidden;
}
.browser-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; border-bottom: 1px solid var(--hair); background: var(--bg-3);
}
.browser-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--hair-strong); }
.browser-url {
  margin-left: 12px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--dim);
}
.browser-body { padding: 24px; display: flex; flex-direction: column; gap: 20px; }
.dash-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.dash-kpi { border: 1px solid var(--hair); padding: 14px; }
.dash-kpi-label {
  display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--dim); margin-bottom: 8px;
}
.dash-kpi b {
  font-family: 'Oswald', sans-serif; font-weight: 500; font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: -0.01em; color: var(--text);
}
.dash-chart {
  display: flex; align-items: flex-end; gap: 6px; height: 96px;
  padding: 12px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
}
.dash-chart span {
  flex: 1; height: var(--h); background: var(--accent); opacity: .85;
  transform: scaleY(0); transform-origin: bottom;
  transition: transform .6s var(--ease);
}
.reveal.is-in .dash-chart span { transform: scaleY(1); }
.dash-chart span:nth-child(1) { transition-delay: .05s; }
.dash-chart span:nth-child(2) { transition-delay: .11s; }
.dash-chart span:nth-child(3) { transition-delay: .17s; }
.dash-chart span:nth-child(4) { transition-delay: .23s; }
.dash-chart span:nth-child(5) { transition-delay: .29s; }
.dash-chart span:nth-child(6) { transition-delay: .35s; }
.dash-chart span:nth-child(7) { transition-delay: .41s; }
.dash-chart span:nth-child(8) { transition-delay: .47s; }
.dash-rows { display: flex; flex-direction: column; }
.dash-row {
  display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: center;
  padding: 11px 0; border-bottom: 1px solid var(--hair);
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--dim);
}
.dash-row:last-child { border-bottom: 0; }
.dash-row span:first-child { color: var(--text); }
.dash-row b { font-weight: 600; justify-self: end; }

/* ===================================================================
   SILO STAGE — full black, generous negative space, never explained
   =================================================================== */
.silo {
  position: relative;
  background: #000;
  color: #fff;
  /* hairline frame — sets the stage apart from the sections above/below */
  border-top: 1px solid rgba(255,255,255,.12);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
/* Compact panel — no long pinned track. The converge + ignite plays on reveal
   (IntersectionObserver adds .is-in), so the section stays under one viewport. */
.silo-track { height: auto; }
.silo-stage {
  position: relative;
  min-height: 78vh;
  overflow: hidden;
  isolation: isolate;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center;
  padding: 8vh 5vw;
  gap: 5vh;                  /* a beat between the two lines */
}
/* Atmospheric green bloom behind the text — fades up once the punchline lands */
.silo-stage::before {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 56% 60% at 50% 50%, rgba(182,245,0,.10), transparent 70%);
  opacity: 0;
  transition: opacity 1.2s var(--ease-out);
}
.silo.is-in .silo-stage::before { opacity: 1; transition-delay: .55s; }

/* Hexagon honeycomb backdrop — brand container language. Sits behind the
   lines (z-index 0) and is masked to fade out toward the center so the words
   stay clean; the honeycomb reads at the edges and corners. */
.silo-hex {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 78% 72% at 50% 50%, transparent 26%, #000 88%);
          mask-image: radial-gradient(ellipse 78% 72% at 50% 50%, transparent 26%, #000 88%);
}

.silo-line {
  position: relative; z-index: 1;
  font-family: 'Oswald', sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: -0.01em; line-height: .98;
  font-size: clamp(34px, 5.4vw, 82px);
  color: #fff;
  white-space: nowrap;
  /* On reveal: line 1 slides in from the left, line 2 from the right, both
     converging to center. The stage clips the off-screen start. */
  opacity: 0;
  will-change: transform, opacity;
  transition: transform 1s cubic-bezier(.16,1,.3,1), opacity .7s var(--ease-out);
}
.silo-line:nth-of-type(1) { transform: translateX(-60vw); }
.silo-line:nth-of-type(2) { transform: translateX(60vw); }
.silo.is-in .silo-line { transform: none; opacity: 1; }

/* The "I" letters carry a standing green highlight (brand accent); on reveal
   they IGNITE — a bright glow that settles — once the lines have converged. */
.silo-line .hl { color: var(--accent); }
@keyframes siloIgnite {
  0%   { text-shadow: 0 0 0 rgba(182,245,0,0); }
  45%  { text-shadow: 0 0 46px rgba(182,245,0,.95), 0 0 16px rgba(182,245,0,.85); }
  100% { text-shadow: 0 0 20px rgba(182,245,0,.42); }
}
.silo.is-in .hl {
  animation: siloIgnite 1.1s var(--ease) both;
  animation-delay: .8s;           /* fires once the lines have converged */
}
.silo-quote { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .silo-line { opacity: 1; transform: none; transition: none; }
  .silo-line .hl { color: #B6F500; animation: none; text-shadow: 0 0 20px rgba(182,245,0,.42); }
  .silo-stage::before { opacity: 1; transition: none; }
  /* No scroll-pin under reduced motion — both lines just sit on screen. */
  .silo-track { height: auto; }
  .silo-stage { position: static; height: auto; min-height: 60vh; }
}

/* ===================================================================
   RECEIPTS — stat band + quote cards
   =================================================================== */
.receipts-head { margin-bottom: 8vh; }
/* Each metric fades up in sequence when the band scrolls in (reveal once). */
/* Detail reveals on hover — accent highlight on the number + label (homepage parity) */


/* Hover — SCALE: card gently zooms toward the viewer on a soft shadow. */


/* ===================================================================
   CLOSE
   =================================================================== */
.s-close {
  background: #000;
  padding: 18vh 0;
  text-align: center;
  border-top: 1px solid var(--hair);
}
.s-close-inner { max-width: var(--max); margin: 0 auto; padding: 0 min(5vw, 72px); }
.close-stack {
  font-family: 'Oswald', sans-serif; font-weight: 500;
  text-transform: uppercase; letter-spacing: -0.015em; line-height: 1;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.close-line {
  font-size: clamp(40px, 6.6vw, 104px);
  color: #fff;
  /* lines reveal in sequence (JS adds .is-shown when the stack scrolls in) */
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.close-line.is-shown { opacity: 1; transform: none; }
.close-line.final { margin-top: 28px; }
.close-line.final .hl { color: #B6F500; }

/* Typewriter — single rotating word inside the closing line */
.close-typing-line { color: #fff; }
.typewriter { display: inline-block; white-space: nowrap; }
.typewriter-word { color: #fff; font-variant-ligatures: none; }
.typewriter-caret {
  display: inline-block;
  width: .055em; height: .82em;
  margin-left: .06em; vertical-align: -0.06em;
  background: #B6F500;
  animation: typewriter-blink 1.05s steps(2, end) infinite;
}
@keyframes typewriter-blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .close-line { transition: none; }
  .typewriter-caret { animation: none; opacity: .6; }
}
.s-close-ctas { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 48px; }
.signature {
  margin-top: 44px; color: var(--dim-2);
  font-size: 11px; letter-spacing: .24em;
}

/* ===================================================================
   SCROLL REVEAL
   =================================================================== */
/* Section base: a fade paired with a vertical rise so the whole block lifts
   into place. Per-headline movement comes from the data-anim variants below,
   which layer on top of this lift for a more pronounced entrance. */
/* The fade-up is on the INNER wrapper, never on the section.

   It used to sit on .reveal itself, which meant an unrevealed section was
   fully transparent — background included. That was invisible while every
   band was pinned at 100vh, because you never saw a band before you were
   inside it. In flow it broke the thing flow is for: the band peeking at the
   bottom of the screen was still at opacity 0, so instead of the next
   section's colour arriving you saw the dark body background through it. A
   cream band read as a black gap.

   Fading .s-block-inner instead keeps the section's own background painted
   at all times. The peek shows the real colour of what is coming, and the
   content animates in on top of it as you scroll down. Everything keyed off
   .reveal.is-in (the IQ tags, the converge lines, the combo headlines) is
   unaffected — the class still lands on the section. */
.reveal > .s-block-inner {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .8s var(--ease-out), transform .9s cubic-bezier(.16,1,.3,1);
}
.reveal.is-in > .s-block-inner { opacity: 1; transform: none; }

/* Section visual entrance — the artwork wipes in left→right (matching the
   text) with a subtle scale settle, starting just after the headline. */
.reveal .s-art {
  opacity: 0;
  /* Only the right edge animates (the wipe); the other edges sit at a negative
     inset so the settled state leaves overflow room for child hover scale +
     shadow (clip-path can't transition to `none`). */
  clip-path: inset(-80px 100% -80px -80px);
  transform: scale(1.07);
  transition: opacity .8s var(--ease-out) .2s,
              clip-path 1.1s cubic-bezier(.16,1,.3,1) .2s,
              transform 1.1s cubic-bezier(.16,1,.3,1) .2s;
}
.reveal.is-in .s-art { opacity: 1; clip-path: inset(-80px); transform: none; }

/* ===================================================================
   SCROLL-IN HEADLINE ANIMATION — "combo" (matches the hero)
   The headline wipes in left→right (clip-path) while its words fade-rise
   in sequence on top. Fires when the parent .reveal section gains .is-in.
   Words are wrapped in <span class="w"> by js/solutions-sports.js (it
   preserves .hl highlights and <br> breaks).
   =================================================================== */
/* Negative inset on the three non-animating edges, as in `heroTextIn` above —
   a settled `inset(0 0 0 0)` would shave the ink of the section headlines
   (line-height 1.02) and of the `.w` word spans' inline-block boxes. */
[data-anim="combo"] {
  clip-path: inset(-0.4em 100% -0.4em -0.4em);
  transition: clip-path .85s cubic-bezier(.16,1,.3,1);
}
.reveal.is-in [data-anim="combo"] { clip-path: inset(-0.4em); }

[data-anim="combo"] .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(1em);
  transition: opacity .6s var(--ease-out), transform .7s cubic-bezier(.16,1,.3,1);
  transition-delay: calc(var(--i) * 70ms);
  will-change: transform, opacity;
}
.reveal.is-in [data-anim="combo"] .w { opacity: 1; transform: none; }

/* Body copy reuses the combo, but with a tighter word cascade and a small
   head-start delay so it ripples in just after its headline (a 55ms/word
   stagger would crawl across a full paragraph). */
.s-body[data-anim="combo"] { transition-delay: .18s; }
.s-body[data-anim="combo"] .w {
  transform: translateY(0.5em);
  transition-delay: calc(.22s + var(--i) * 10ms);
}

@media (prefers-reduced-motion: reduce) {
  .reveal > .s-block-inner { opacity: 1; transform: none; transition: none; }
  .reveal .s-art { opacity: 1; clip-path: none; transform: none; transition: none; }
  .reveal .iq-card,
  .iq-tag, .dash-chart span, .converge-lines path { transition: none; }
  [data-anim] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  [data-anim] .w { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width: 1024px) {
  .s-split { gap: 5vw; }
}

@media (max-width: 900px) {
  .s-hero { padding-top: 18vh; }
  .s-hero-inner { grid-template-columns: 1fr; gap: 7vh; }
  .s-hero-art-img { max-width: 520px; margin: 0 auto; }
  .s-split, .s-split-rl { grid-template-columns: 1fr; gap: 48px; }
  #activation .s-split { grid-template-columns: 1fr; }  /* ID rule above keeps it 2-up otherwise */
  .s-split .s-art, .s-split-rl .s-art { order: -1; }     /* visuals lead on stacked layout */
  .s-split .s-copy { order: 1; }
  .fan-split { grid-template-columns: 1fr; gap: 36px; }
  .fan-divider { display: none; }
  .spread { grid-template-columns: 1fr; gap: 28px; justify-items: center; }
  .spread-vs { transform: rotate(90deg); }
  .iq-grid { grid-template-columns: 1fr; gap: 40px; }
  .iq-headline { white-space: normal; max-width: 24ch; }   /* allow wrap once stacked */
  .iq-asset { order: -1; }
  .iq-grid .iq-frame { min-height: 320px; }
  /* Grid items default to min-width:auto, so images + the 3-up cards couldn't
     shrink below their intrinsic width and overflowed the viewport once the
     grids stacked. Let every stacked column shrink. */
  .iq-asset, .iq-detail, .iq-card,
  .s-copy, .s-art, .s-hero-copy, .s-hero-art,
  .fan-split > *, .spread > * { min-width: 0; }
  .s-art-img, .s-hero-art-img { max-width: 100%; }
}

@media (max-width: 600px) {
  .s-block { padding: 11vh 0; }   /* gutter lives on .s-block-inner now — avoid doubling */
  .iq-cards { grid-template-columns: 1fr; }   /* stack the 3 IQ cards on phones */
  .silo-track { height: auto; }
  .silo-stage { position: static; height: auto; min-height: 84vh; gap: 11vh; }
  /* allow wrap + no horizontal slide on narrow phones (nowrap would clip) */
  .silo-line { white-space: normal; }
  .silo-line:nth-of-type(1), .silo-line:nth-of-type(2) { transform: none; }
  .dash-kpis { grid-template-columns: 1fr; }
  .phone-share { right: 0; }
  .iq-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .iq-cards { grid-template-columns: 1fr; }
}

/* Quote cards follow the band on this page, so it needs the gap. The rest of
   the receipts component is css/receipts.css. */
.statband { margin-bottom: 8vh; }