@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --c-bg: #0c150f;
  --c-page-light: #ebeee9;
  --c-ink: #101710;
  --c-paper: #fbfcf8;
  --c-club: #f0f4ee;
  --c-player: #c6f151;
  --c-coach: #2fd394;
  --c-coach-text: #4ee5ab;
  --c-club-on-light: #1d2a1c;
  --c-player-on-light: #9fcf22;
  --c-coach-on-light: #22c487;
  --c-break: #ff6b57;
  --c-break-glow: rgba(255, 107, 87, .38);
  --c-on-dark: #f0f4ee;
  --c-on-dark-2: #c9d1c4;
  --c-on-dark-3: #8a9a88;
  --c-on-dark-4: #71836f;
  --c-on-light-2: #4c5a4b;
  --c-on-light-3: #6c7a6b;
  --c-on-light-4: #8a9486;
  --c-line-on-dark: rgba(240, 244, 238, .14);
  --c-line-on-light: #e3e7dc;
  --c-glass: rgba(12, 21, 15, .6);
  --c-glass-light: rgba(235, 238, 233, .74);
  --c-logo-glow: rgba(16, 54, 28, .6);
  --c-logo-glow-faint: rgba(16, 54, 28, .2);
  --c-logo-shade: rgba(8, 16, 10, .62);
  --c-placeholder: #b9c2ae;
  --c-video-tint: #3f7049;
  --c-shade-light: rgba(12, 21, 15, .35);
  --c-shade: rgba(12, 21, 15, .55);
  --c-shade-edge: rgba(8, 16, 10, .94);
  --c-panel: rgba(12, 21, 15, .86);
  --c-wash-on-dark: rgba(240, 244, 238, .045);
  --c-player-wash: rgba(198, 241, 81, .08);
  --c-shadow-soft: rgba(16, 23, 16, .08);
  --c-league-teal: #23e3d2;
  --c-league-pink: #ff2e7e;
  --c-league-amber: #ffb03a;
  --c-league-orange: #e8451a;
  --c-league-paper: rgba(255, 255, 255, .16);
  --bg-dark: linear-gradient(165deg, #1c2b15 0%, #101d12 32%, #0c150f 68%, #0a120d 100%);
  --bg-light: linear-gradient(165deg, #e0ebc9 0%, #e9ede4 30%, #ebeee9 100%);
  --bg-league-ocean: linear-gradient(170deg, #4c6f86 0%, #22384a 45%, #0d1720 100%);
  --bg-league-sunset: linear-gradient(170deg, #c9743d 0%, #6a3420 45%, #1d0f0a 100%);
  --bg-dawn: linear-gradient(180deg, #16303a 0%, #0f2024 40%, #0c150f 100%);
  --bg-dusk: linear-gradient(180deg, #3a1d14 0%, #22140f 40%, #0c150f 100%);
  --c-sun: #ffd27a;
  --c-sun-glow: rgba(255, 190, 90, .35);

  /* Type scale: each size grows linearly from a 390px to a 1280px viewport */
  --font: "Archivo", system-ui, sans-serif;
  --fs-number: clamp(48px, 34px + 3.6vw, 80px);
  --fs-display: clamp(28px, 18.4px + 2.47vw, 50px);
  --fs-title: clamp(20px, 17.8px + .56vw, 25px);
  --fs-lead: clamp(16px, 15.1px + .22vw, 18px);
  --fs-body: 15px;
  --fs-small: 13px;
  --fs-label: clamp(11px, 10.6px + .11vw, 12px);

  --gutter: clamp(20px, 4.5vw, 80px);
  --gutter-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  --gutter-right: max(var(--gutter), env(safe-area-inset-right, 0px));
  --container: 1280px;
  --lines-bleed: 12vh;
  /* How far the lines layer reaches below the screen: Safari on the iPhone shows the page under its toolbar further down
     than the large viewport, so the rays go on to the bottom edge */
  --lines-reach: 25lvh;
  /* Height of the pinned full-screen stages: they reach on below the screen, so the page goes on under Safari's
     toolbar however far it is expanded, and give that overhang back below themselves */
  --pin-height: 120lvh;
  --section-pad: clamp(96px, 9vw, 144px);
  --radius-lg: 28px;
  --radius-md: 16px;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--c-bg);
}

/* What shows when the page is pulled past its end matches the light last section (page-ends.js) */
html.is-lower-half { background: var(--c-page-light); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Only touch screens with a collapsing toolbar uncover the halo's reach below the screen; elsewhere it would be drawn
   for nothing */
@media (hover: hover) and (pointer: fine) {
  :root { --lines-reach: 0px; }
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-on-dark);
  font: 400 var(--fs-body)/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--c-player); outline-offset: 3px; }

.glass {
  background: var(--c-glass);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.eyebrow {
  font: 800 var(--fs-label)/1.2 var(--font);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--eyebrow-color, var(--c-on-dark-3));
}

.display {
  font: 900 var(--fs-display)/.96 var(--font);
  letter-spacing: -.02em;
  text-transform: uppercase;
  text-wrap: balance;
}

.lead {
  font: 500 var(--fs-lead)/1.5 var(--font);
  color: var(--lead-color, var(--c-on-dark-2));
  text-wrap: pretty;
}

.label {
  font: 800 var(--fs-label)/1.2 var(--font);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--label-color, var(--c-on-dark-4));
}

.section {
  position: relative;
  padding-block: var(--section-pad);
  padding-left: var(--gutter-left);
  padding-right: var(--gutter-right);
}

.section--dark {
  background: var(--bg-dark);
  color: var(--c-on-dark);
}

.section--light {
  background: var(--bg-light);
  color: var(--c-ink);
  --eyebrow-color: var(--c-on-light-3);
  --lead-color: var(--c-on-light-2);
  --label-color: var(--c-on-light-4);
}

.container {
  max-width: var(--container);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 72px);
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.4vw, 20px);
  max-width: 920px;
}

.site-header {
  position: fixed;
  top: calc(clamp(16px, 2.2vw, 32px) + env(safe-area-inset-top, 0px));
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 0 var(--gutter-right) 0 var(--gutter-left);
  pointer-events: none;
}

.nav, .logo { pointer-events: auto; }

.nav {
  display: flex;
  flex-direction: column;
  padding: 4px;
  border-radius: 14px;
}

.nav-list { display: flex; gap: 2px; }

.nav-link, .nav-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px clamp(9px, 1vw, 13px);
  border-radius: 10px;
  font: 800 var(--fs-label)/1 var(--font);
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav-link {
  color: var(--c-on-dark-2);
  transition: color .25s, background-color .25s;
}

.nav-link:hover { color: var(--c-on-dark); }

.nav-link[aria-current] {
  color: var(--c-player);
  background: rgba(198, 241, 81, .1);
}

.nav-toggle {
  display: none;
  color: var(--c-player);
}

.nav-toggle-icon {
  width: 11px;
  height: 8px;
  transition: transform .25s;
}

.nav.is-open .nav-toggle-icon { transform: rotate(180deg); }

.nav-backdrop { display: none; }

/* On phones the menu opens out of its button over a slightly dimmed page, in the same glass: larger entries with room
   between them, cascading in. The button folds into the corner, and its label moves to the current entry (nav.js), so
   the section is named once */
@media (max-width: 899px) {
  .nav-toggle { display: flex; }
  .nav-list { display: none; flex-direction: column; }

  /* The dim is sticky, and on iOS carried along with the page like the lines (carry.js), so it also dims under
     Safari's status bar and toolbar, where a fixed or stuck sticky box is not drawn. It takes no room in the page and
     stays in place, hidden while the menu is closed, so opening the menu is smooth */
  .nav-backdrop {
    display: block;
    position: sticky;
    top: -25lvh;
    z-index: 49;
    height: 150lvh;
    margin-bottom: -150lvh;
    visibility: hidden;
    transition: visibility 0s .35s;
  }

  /* Color and blur fade in themselves: under a fading opacity the blur would only show once it is complete */
  .nav-backdrop::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: transparent;
    -webkit-backdrop-filter: blur(0);
    backdrop-filter: blur(0);
    transition: background-color .35s ease, -webkit-backdrop-filter .35s ease, backdrop-filter .35s ease;
  }

  :root:has(.nav.is-open) .nav-backdrop {
    visibility: visible;
    transition: none;
  }

  :root:has(.nav.is-open) .nav-backdrop::before {
    background-color: var(--c-shade-light);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }

  .nav.is-open {
    position: relative;
    min-width: 248px;
    padding: 8px;
    border-radius: 22px;
    animation: nav-unfold .5s var(--ease-out);
  }

  .nav.is-open .nav-toggle {
    position: absolute;
    top: 8px;
    right: 8px;
    height: 47px;
    padding: 0 16px;
  }

  .nav.is-open .nav-toggle-label { display: none; }

  .nav.is-open .nav-list {
    display: flex;
    gap: 4px;
    margin-right: 40px;
  }

  .nav.is-open .nav-link {
    padding: 17px 18px;
    border-radius: 14px;
    font-size: var(--fs-small);
  }

  .nav.is-open .nav-list li { animation: nav-item-in .5s var(--ease-out) both; animation-delay: calc(80ms + var(--i) * 45ms); }
  .nav.is-open .nav-list li:has(> [aria-current]) { animation: none; }
  .nav-list li { --i: 0; }
  .nav-list li:nth-child(2) { --i: 1; }
  .nav-list li:nth-child(3) { --i: 2; }
  .nav-list li:nth-child(4) { --i: 3; }
  .nav-list li:nth-child(5) { --i: 4; }
  .nav-list li:nth-child(6) { --i: 5; }

  @keyframes nav-unfold {
    from { clip-path: inset(0 38% 86% 0 round 14px); }
    to { clip-path: inset(0 0 0 0 round 22px); }
  }

  @keyframes nav-item-in {
    from { opacity: 0; transform: translateX(-14px); }
  }
}

@media (max-width: 899px) and (prefers-reduced-motion: reduce) {
  .nav.is-open, .nav.is-open .nav-list li { animation: none; }
}

/* The large logo over the intro's rays stands on a dark glow, which fades as the logo shrinks */
.logo {
  position: relative;
  display: block;
}

.logo::before {
  content: "";
  position: absolute;
  inset: -95% -60%;
  z-index: -1;
  background: radial-gradient(closest-side, var(--c-logo-shade), 45%, transparent);
  pointer-events: none;
  transition: opacity .4s ease;
}

.site-header.is-scrolled .logo::before { opacity: 0; }

.logo img {
  width: clamp(100px, 8.5vw, 132px);
  filter: drop-shadow(0 0 14px var(--c-logo-glow)) drop-shadow(0 0 36px var(--c-logo-glow));
  transform-origin: right top;
  transition: transform .4s ease, filter .4s ease;
}

/* The small logo keeps only a faint glow */
.site-header.is-scrolled .logo img {
  filter: drop-shadow(0 0 12px var(--c-logo-glow-faint)) drop-shadow(0 0 30px var(--c-logo-glow-faint));
  transform: scale(.72);
}
.hero {
  position: relative;
  height: 100vh;
  height: 100lvh;
  min-height: 560px;
  overflow: hidden;
  background: var(--c-bg);
}

.hero-media {
  position: absolute;
  inset: 0;
  isolation: isolate;
}

/* Scrolling out of the intro fades the clip and the text into the page background; the browser runs it
   off the main thread, from the top of the intro (past the runway) over 20% of its height */
@supports (animation-timeline: scroll()) {
  .hero-media,
  .hero-content {
    animation: intro-fade linear both;
    animation-timeline: scroll(root);
    animation-range: env(safe-area-inset-top, 0px) calc(env(safe-area-inset-top, 0px) + 20lvh);
  }
}

@keyframes intro-fade {
  to { opacity: 0; }
}

/* The call to action leaves with the intro clip and stays away for the rest of the page for now */
@supports (animation-timeline: scroll()) {
  .cta {
    animation: intro-leave linear both;
    animation-timeline: scroll(root);
    animation-range: env(safe-area-inset-top, 0px) calc(env(safe-area-inset-top, 0px) + 20lvh);
  }
}

@keyframes intro-leave {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

.hero-media::before,
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero-media::before {
  background: var(--c-video-tint);
  mix-blend-mode: multiply;
  opacity: .8;
}

.hero-media::after {
  background: radial-gradient(ellipse 78% 74% at 50% 48.4%, var(--c-shade) 0%, var(--c-shade-light) 42%, var(--c-shade-edge) 100%);
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .9s ease;
}

.hero-video.is-active { opacity: 1; }

/* Clipping lets the page end with its last section, although the sticky lines layer reaches a screen further */
main { overflow-y: clip; }

/* iOS draws the page under the status bar only once it is scrolled past the top inset; the page starts just past it */
.runway { height: env(safe-area-inset-top, 0px); }

.hero-content {
  position: absolute;
  z-index: 41;
  left: 50%;
  top: 48.4%;
  transform: translate(-50%, -50%);
  width: min(1100px, 92vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 2.4vw, 32px);
  text-align: center;
  color: var(--c-on-dark);
}

.hero-kicker {
  font: 800 var(--fs-lead)/1.3 var(--font);
  letter-spacing: .3em;
  text-transform: uppercase;
}

/* The title shrinks with the halo around it, which follows the screen's width and height */
.hero-title {
  font: 900 min(var(--fs-number), 5.4vw, 9.6vh)/.94 var(--font);
  letter-spacing: -.02em;
  text-transform: uppercase;
}

.hero-roles {
  display: flex;
  justify-content: center;
  gap: clamp(20px, 3vw, 44px);
  padding-top: clamp(4px, .8vw, 12px);
  font: 800 var(--fs-lead)/1 var(--font);
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* The progress line runs above the label, away from the rays that reach for it. Hovering a role switches to it, so
   the labels act like controls rather than text */
.hero-role {
  display: flex;
  flex-direction: column-reverse;
  cursor: default;
  user-select: none;
  gap: 10px;
  padding-block: 4px;
  color: var(--role-color);
}

@media (min-width: 600px) {
  .hero-break--narrow { display: none; }
}

/* The intro opens on the logo alone over the page background while its clip loads. Then the clip comes up from behind,
   the halo builds, and the text, the roles, the call to action and the menu follow in turn. The parts that also fade
   with the scroll position are hidden through filter, so the two never fight over opacity */
.hero-loader {
  position: absolute;
  inset: 0;
  display: none;
  background: var(--c-bg);
  pointer-events: none;
}

.has-loader .hero-loader { display: block; }

.hero-loader-mark {
  position: absolute;
  left: 50%;
  top: 48.4%;
  width: clamp(150px, 16vw, 230px);
  transform: translate(-50%, -50%);
}

.hero-loader-mark img {
  display: block;
  width: 100%;
  height: auto;
  animation: loader-breathe 1.4s ease-in-out infinite alternate;
}

@keyframes loader-breathe {
  from { opacity: .45; }
}

/* Below the logo, a line like the role bars fills as the page's clips load */
.hero-loader-bar {
  position: absolute;
  left: 50%;
  top: calc(48.4% + clamp(150px, 16vw, 230px) * .217 + clamp(26px, 3vw, 40px));
  width: clamp(150px, 16vw, 230px);
  height: 2px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--c-line-on-dark);
  transform: translateX(-50%);
}

.hero-loader-fill {
  display: block;
  height: 100%;
  background: var(--c-player);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s ease-out;
}

.has-loader:not(.is-loaded) :is(.hero-kicker, .hero-title, .hero-roles, .cta, .site-header) {
  filter: opacity(0);
  pointer-events: none;
}

.has-loader.is-loaded .hero-loader {
  opacity: 0;
  visibility: hidden;
  transition: opacity 2.6s ease .3s, visibility 0s 2.9s;
}

.has-loader.is-loaded :is(.hero-loader-mark, .hero-loader-bar) {
  opacity: 0;
  transition: opacity .5s ease;
}

.has-loader.is-loaded :is(.hero-kicker, .hero-title) { transition: filter .9s ease .9s; }
.has-loader.is-loaded .hero-roles { transition: filter .8s ease 1.4s; }
.has-loader.is-loaded .cta { transition: filter .8s ease 2.1s, transform .25s, box-shadow .25s, opacity .3s, visibility .3s; }
.has-loader.is-loaded .site-header { transition: filter .8s ease 2.4s; }

/* On phones the intro text sits a little higher and smaller, so the roles keep their distance from the halo below */
@media (max-width: 599px) {
  .hero-content { top: 45%; }
  .hero-kicker { font-size: var(--fs-small); }
  .hero-title { font-size: min(var(--fs-number), 10.5vw); }
  .hero-roles { gap: 26px; letter-spacing: .12em; font-size: var(--fs-small); }
}

.hero-role--club { --role-color: var(--c-club); }
.hero-role--player { --role-color: var(--c-player); }
.hero-role--coach { --role-color: var(--c-coach); }

.hero-role-label {
  opacity: .42;
  transition: opacity .7s ease, transform .7s var(--ease-out);
}

.hero-role-bar {
  height: 2px;
  border-radius: 2px;
  overflow: hidden;
  background: rgba(240, 244, 238, .18);
  opacity: 0;
  transition: opacity .5s ease;
}

.hero-role-fill {
  display: block;
  height: 100%;
  background: var(--role-color);
  transform: scaleX(0);
  transform-origin: left;
}

.hero-role.is-active .hero-role-label { opacity: 1; transform: scale(1.3); }
.hero-role.is-active .hero-role-bar { opacity: 1; }
.hero-role.is-active .hero-role-fill { transform: scaleX(1); transition: transform var(--role-duration, 5s) linear; }

@media (max-width: 599px) {
  .hero-role.is-active .hero-role-label { transform: scale(1.45); }
}

.cta {
  position: fixed;
  z-index: 45;
  left: 50%;
  bottom: calc(clamp(16px, 4vh, 32px) + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  padding: 16px 24px;
  border-radius: var(--radius-md);
  background: var(--c-paper);
  color: var(--c-ink);
  box-shadow: 0 14px 34px rgba(12, 21, 15, .45);
  font: 800 var(--fs-body)/1 var(--font);
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform .25s, box-shadow .25s, opacity .3s, visibility .3s;
}

.cta:hover {
  transform: translateX(-50%) translateY(-3px);
  box-shadow: 0 20px 40px rgba(12, 21, 15, .55);
}

@media (max-width: 599px) {
  .cta { padding: 13px 20px; border-radius: 13px; font-size: var(--fs-small); }
}

/* The lines ride along the opening, reaching past both edges of the screen so Safari does not tint its bars. On iOS
   carry.js moves the layer with the scroll as this sticky position would, so it belongs to the scrolled page and shows
   under Safari's status bar and toolbar, where a stuck sticky box is not drawn */
.lines {
  position: sticky;
  top: calc(-1 * var(--lines-bleed));
  z-index: 40;
  height: calc(100lvh + var(--lines-bleed) + var(--lines-reach));
  margin-top: calc(-1 * var(--lines-bleed));
  margin-bottom: calc(-100lvh - var(--lines-reach));
  pointer-events: none;
  will-change: transform;
}

/* On iOS carry.js moves each [data-carry] box with the scroll instead of leaving it sticky, and writes its keyframes
   and where its hold starts and ends. A carried box takes no second scroll-driven animation: Safari loses it then */
@supports (animation-timeline: scroll()) {
  [data-carry].is-carried {
    position: relative;
    top: auto;
    animation: var(--carry-name) linear both;
    animation-timeline: scroll(root);
    animation-range: var(--carry-from) var(--carry-to);
  }
}

/* A full-screen stage is pinned by its cover: a colorless sticky box reaching a screen past the stage above and below,
   in which the stage comes in, holds and leaves as if it were sticky itself. So the cover covers the whole screen
   whenever the stage shows: Safari 26 and later paint a sticky box that covers only part of the screen into their
   status bar and toolbar, but leave one alone that covers all of it. pin-cover.js hides the cover while its section is
   off screen, when it covers only part, but never the stage: Safari holds back a muted clip in a hidden box until well
   after it shows. The section holds the cover's margins (flow-root) */
.pin-cover {
  position: sticky;
  top: -100lvh;
  margin: -100lvh 0;
  padding: 100lvh 0;
  pointer-events: none;
}

.pin-cover > * {
  visibility: visible;
  pointer-events: auto;
}

.pin-cover.is-offscreen { visibility: hidden; }

.lines-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* The network's names sit in the middle of their rings and the gap label in the empty middle between them; lines.js
   places them and shows them with the broken links */
.lines-labels {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.lines-label {
  position: absolute;
  translate: -50% -50%;
  font: 900 var(--fs-title)/1 var(--font);
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c-on-dark);
}

.lines-label--club { color: var(--c-club); }
.lines-label--player { color: var(--c-player); }
.lines-label--coach { color: var(--c-coach-text); }

.lines-label--gap {
  font: 800 var(--fs-label)/1.2 var(--font);
  letter-spacing: .2em;
  color: var(--c-break);
}

@media (max-width: 599px) {
  .lines-label { font-size: var(--fs-small); letter-spacing: .06em; }
  .lines-label--gap { width: min-content; font-size: var(--fs-label); letter-spacing: .14em; text-align: center; white-space: normal; }
}

/* A short step between the verdict and the answer, in which the halo shows the three parts apart */
.network-step {
  position: relative;
  height: 100svh;
  pointer-events: none;
}

/* Golf today in one line, straight after the intro. It starts well up the intro, so it arrives quickly, and scrolls
   past with the page while the halo's rings part behind it; the tools that do not talk to each other drift around it.
   connect.js sets --enter as it comes up the screen */
.verdict {
  --enter: 0;
  --eyebrow-color: var(--c-on-dark-2);
  position: relative;
  display: grid;
  place-items: center;
  height: 100svh;
  margin-top: -40svh;
  padding: 0 var(--gutter-right) 0 var(--gutter-left);
  pointer-events: none;
}

.verdict-content {
  --in: clamp(0, (var(--enter) - .45) / .3, 1);
  position: relative;
  z-index: 41;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 1.8vw, 26px);
  max-width: 760px;
  text-align: center;
  opacity: var(--in);
  scale: calc(.92 + var(--in) * .08);
}

.verdict-title,
.connect-title {
  font: 900 var(--fs-number)/1 var(--font);
  letter-spacing: -.02em;
  text-transform: uppercase;
  text-wrap: balance;
}

/* The words before the verdict and the answer stand larger than an eyebrow; the longer one before the experience a
   little smaller */
:is(.verdict, .connect-step) .eyebrow {
  font-size: var(--fs-title);
  letter-spacing: .3em;
}

.connect-step--experience .eyebrow {
  font-size: var(--fs-lead);
  letter-spacing: .24em;
}

.nowrap { white-space: nowrap; }

/* The tools that do not talk to each other run as red tapes across the screen, crossing at their own angles. tools.js
   whips each in from the side with a flicker as the verdict arrives, runs them, faster while the page moves, and lets
   them fall away before the answer. The middle stays clear for the verdict */
.verdict-tape {
  position: absolute;
  inset: 0;
  z-index: 41;
  overflow: clip;
  opacity: clamp(0, (var(--enter) - .45) / .3, 1);
  -webkit-mask-image: radial-gradient(ellipse 42% 26% at 50% 50%, transparent 52%, var(--c-ink) 100%);
  mask-image: radial-gradient(ellipse 42% 26% at 50% 50%, transparent 52%, var(--c-ink) 100%);
}

.verdict-tape.is-moving { opacity: 1; }

.tape {
  position: absolute;
  will-change: transform, opacity;
  left: -15%;
  right: -15%;
  top: var(--y);
  translate: 0 -50%;
  rotate: var(--r);
}

.tape-track {
  display: flex;
  width: max-content;
  will-change: transform;
}

.tape-track span {
  display: flex;
  align-items: center;
  font: 900 var(--fs-number)/1 var(--font);
  letter-spacing: -.01em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c-break);
  text-shadow: 0 0 28px var(--c-break-glow);
}

/* A short slash between the words */
.tape-track span::after {
  content: "";
  width: .5em;
  height: .09em;
  margin: 0 .55em;
  background: var(--c-break);
  rotate: -62deg;
}

.tape--back .tape-track span { font-size: var(--fs-display); }
.tape--back .tape-track { opacity: .55; }

.tape--outline .tape-track span {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--c-break);
  text-shadow: none;
}

.tape.is-hit .tape-track { animation: tape-flicker .42s steps(1, end); }

@keyframes tape-flicker {
  0% { opacity: 1; }
  14% { opacity: .1; }
  28% { opacity: 1; }
  42% { opacity: .25; }
  56%, 100% { opacity: 1; }
}

@media (max-width: 599px) {
  .verdict-title,
  .connect-title { font-size: min(var(--fs-number), 11vw); }

  .tape-track span { font-size: min(var(--fs-number), 12vw); }
  .tape--back .tape-track span { font-size: var(--fs-display); }
  .tape--outline .tape-track span { -webkit-text-stroke-width: 1px; }
}

/* The answer opens like the intro: it scrolls in with its clip and the halo forms again around it. Then it holds on screen
   over a short --hold of scrolling, in which the answer turns into the experience it makes, before halo and clip let go.
   Each claim plays in line by line on its own once its moment is there. connect.js sets --enter as the section comes up
   and --p from 0 to 1 over the hold, and switches the moments with is-connected and is-experience */
.connect {
  --hold: 110svh;
  --p: 0;
  --enter: 0;
  position: relative;
  display: flow-root;
  height: calc(100svh + var(--hold));
  overflow-y: clip;
  background: var(--c-bg);
}

/* Pinned by a .pin-cover and --pin-height tall; the overhang below the screen is given back with a negative margin and
   kept out of the content's way with padding */
.connect-stage {
  --overhang: calc(var(--pin-height) - 100svh);
  position: relative;
  display: grid;
  place-items: center;
  height: var(--pin-height);
  margin-bottom: calc(-1 * var(--overhang));
  padding: var(--section-pad) var(--gutter-right) calc(var(--section-pad) + var(--overhang)) var(--gutter-left);
  overflow: hidden;
  background: var(--c-bg);
}

/* The clip comes up only as the answer nears the middle of the screen, and pushes in slowly while it holds; its box clips
   it, so the grown clip never shows below the fade at the box's edge */
.connect-media {
  position: absolute;
  inset: 0 0 var(--overhang);
  isolation: isolate;
  overflow: hidden;
  opacity: clamp(0, (var(--enter) - .7) / .3, 1);
}

.connect-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (prefers-reduced-motion: no-preference) {
  .connect-video { scale: calc(1 + var(--p) * .08); }
}

/* The shade lightens for the experience, but the clip always fades out completely at the top and bottom of the screen */
.connect-media::before,
.connect-media::after {
  content: "";
  position: absolute;
  inset: 0;
}

.connect-media::before {
  z-index: 1;
  background: linear-gradient(to bottom, var(--c-bg) 0%, transparent 24%, transparent 76%, var(--c-bg) 100%);
}

.connect-media::after {
  background: radial-gradient(ellipse 78% 74% at 50% 48.4%, var(--c-shade) 0%, var(--c-shade-light) 42%, var(--c-shade-edge) 100%);
  transition: opacity 1s ease;
}

/* The clip brightens as the experience comes in */
.is-experience .connect-media::after { opacity: .7; }

.connect-step {
  --eyebrow-color: var(--c-player);
  position: relative;
  z-index: 41;
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 1.8vw, 26px);
  max-width: 760px;
  text-align: center;
}

/* The texts glide with the scroll while clip and halo hold still, so the page never stands: the answer rises out of
   the halo and fades, the experience comes up from below into the middle and keeps drifting gently until the stage
   lets go */
.connect-step--everything {
  --rise: clamp(0, var(--p) / .55, 1);
  --fade: clamp(0, (var(--p) - .3) / .2, 1);
  translate: 0 calc(var(--rise) * -40svh);
}

.connect-step--everything > * { opacity: calc(1 - var(--fade)); }

.connect-step--experience {
  --rise: clamp(0, (var(--p) - .25) / .4, 1);
  --drift: clamp(0, (var(--p) - .65) / .35, 1);
  translate: 0 calc((1 - var(--rise)) * 40svh - var(--drift) * 12svh);
  opacity: clamp(0, (var(--p) - .4) / .2, 1);
}

/* A light in the role colors runs through the word once the experience is there */
.connect-experience {
  background: linear-gradient(100deg, var(--c-on-dark) 40%, var(--c-club) 44%, var(--c-player) 48%, var(--c-coach) 52%, var(--c-on-dark) 58%) 80% 0 / 300% 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.is-experience .connect-experience { animation: experience-sweep 2.6s var(--ease-out) .5s both; }

@keyframes experience-sweep {
  to { background-position: 18% 0; }
}

.connect-claim {
  max-width: 22em;
  font: 900 var(--fs-title)/1.25 var(--font);
  letter-spacing: .01em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--c-on-dark-2);
}

/* The claim's three phrases stand on lines of their own and play in one by one once their moment is there */
.connect-claim span {
  display: block;
  white-space: nowrap;
  opacity: 0;
  translate: 0 .5em;
  transition: opacity .6s ease, translate .7s var(--ease-out);
  transition-delay: calc(.35s + var(--k) * .32s);
}

.is-connected .connect-claim span,
.is-experience .connect-step--experience .connect-claim span {
  opacity: 1;
  translate: none;
}

.connect-step--experience .connect-claim span { transition-delay: calc(.3s + var(--k) * .32s); }

.connect-stage:not(.is-experience) .connect-step--experience .connect-claim span {
  opacity: 0;
  transition-delay: 0s;
}

@media (max-width: 599px) {
  .connect-claim { font-size: var(--fs-lead); }
}

.quiet { color: var(--c-on-light-3); }

[data-reveal] { transition: opacity .8s ease var(--reveal-delay, 0ms), transform .8s var(--ease-out) var(--reveal-delay, 0ms); }
.js-reveal [data-reveal]:not(.is-visible) { opacity: 0; transform: translateY(24px); }

/* Where the browser can, content rises in with the scroll itself rather than all at once as it reaches the screen */
@supports (animation-timeline: view()) {
  .js-reveal [data-reveal] {
    transition: none;
    animation: reveal-rise linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 90%;
  }

  .js-reveal [data-reveal]:not(.is-visible) { transform: none; }
}

@keyframes reveal-rise {
  from {
    opacity: 0;
    translate: 0 48px;
    scale: .96;
  }

  to {
    opacity: 1;
    translate: none;
    scale: none;
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.quiet-dark { color: var(--c-on-dark-3); }

/* The product: each role on a stage of its own, its clip behind the app on the device it lives on. Its highlights take
   turns while the stage is in view, each bringing its own screen, and a button opens the role's window */
.product .container { gap: clamp(128px, 15vw, 232px); }

/* Each role opens with its name in its color and its promise in large type */
.product-role {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 4.4vw, 64px);
  scroll-margin-top: clamp(84px, 11vh, 128px);
}

.product-head {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vw, 22px);
}

.product-body {
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 88px);
}

.product-role--club { --role-color: var(--c-club); }
.product-role--player { --role-color: var(--c-player); }
.product-role--coach { --role-color: var(--c-coach-text); }

.product-role--player .product-stage { order: 1; }

.product-stage {
  position: relative;
  isolation: isolate;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--c-ink);
  box-shadow: 0 30px 80px var(--c-shade);
}

.product-stage-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The clip stays in the back: darkened, with a glow in the role's color behind the device */
.product-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(closest-side, color-mix(in srgb, var(--role-color) 22%, transparent), transparent 80%),
    linear-gradient(180deg, var(--c-shade-light), var(--c-shade) 70%, var(--c-shade-edge));
}

.product-screens {
  position: absolute;
  inset: 0;
}

.product-stage .product-screen {
  position: absolute;
  inset: auto;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  opacity: 0;
  transform: translateY(18px) scale(.96);
  transition: opacity .5s ease, transform .9s var(--ease-out);
}

.product-stage .product-screen.is-active {
  opacity: 1;
  transform: none;
}

.product-stage .story-device--tablet { width: 76%; }
.product-stage .story-device--phone { width: 27%; border-width: 6px; }
.product-stage .story-device--watch { width: 32%; }

.product-photo {
  width: 78%;
  overflow: hidden;
  border-radius: var(--radius-md);
  box-shadow: 0 24px 60px var(--c-shade);
}

.product-photo img {
  display: block;
  width: 100%;
  height: auto;
}

.product-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(18px, 2vw, 24px);
}

.product-role-name {
  display: flex;
  align-items: center;
  gap: 14px;
  font: 800 var(--fs-title)/1 var(--font);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--role-color);
}

.product-role-name::before {
  content: "";
  width: clamp(24px, 3vw, 40px);
  height: 2px;
  background: currentColor;
}

.product-claim {
  font: 900 var(--fs-number)/.94 var(--font);
  letter-spacing: -.02em;
  text-transform: uppercase;
}

.product-points {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

/* Each highlight sits on a rail that fills in the role's color while it is on stage */
.product-point {
  position: relative;
  display: grid;
  width: 100%;
  padding: 14px 0 14px 22px;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.product-point::before, .product-point::after {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: var(--c-line-on-dark);
}

.product-point::after {
  background: var(--role-color);
  transform: scaleY(0);
  transform-origin: top;
}

.product-point.is-active::after { transform: scaleY(1); }
.product-role.is-auto .product-point.is-active::after { animation: point-fill 6.5s linear both; }
.product-role.is-auto.is-paused .product-point.is-active::after { animation-play-state: paused; }

@keyframes point-fill {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

.product-point-title {
  font: 800 var(--fs-title)/1.2 var(--font);
  color: var(--c-on-dark-3);
  transition: color .3s;
}

.product-point.is-active .product-point-title, .product-point:hover .product-point-title { color: var(--c-on-dark); }

.product-point-text {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .5s var(--ease-out), opacity .4s ease;
}

.product-point-text > span {
  overflow: hidden;
  max-width: 34em;
  padding-top: 0;
  font: 500 var(--fs-body)/1.55 var(--font);
  color: var(--c-on-dark-2);
  transition: padding-top .5s var(--ease-out);
}

.product-point.is-active .product-point-text {
  grid-template-rows: 1fr;
  opacity: 1;
}

.product-point.is-active .product-point-text > span { padding-top: 8px; }

.product-point:focus-visible { outline: 2px solid var(--role-color); outline-offset: 4px; }

/* Below each stage, everything else the role gets: a line icon in the role's color over a title and one line, in
   roomy columns under a hairline that fills with the role's color as the pointer passes */
.product-features {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 40px);
  padding-top: clamp(40px, 5vw, 72px);
}

.product-features-head {
  font: 800 var(--fs-label)/1.2 var(--font);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--role-color);
}

.product-features ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: clamp(36px, 4vw, 56px) clamp(28px, 3.4vw, 56px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.product-features li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 22px;
  border-top: 1px solid var(--c-line-on-dark);
}

.product-features li::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;
  background: var(--role-color);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease-out);
}

@media (hover: hover) {
  .product-features li:hover::before { transform: none; }
  .product-features li:hover .product-feature-icon { transform: translateY(-2px); }
}

.product-feature-icon {
  width: 30px;
  height: 30px;
  margin-bottom: 8px;
  fill: none;
  stroke: var(--role-color);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .4s var(--ease-out);
}

.product-features strong {
  font: 800 var(--fs-lead)/1.3 var(--font);
  color: var(--c-on-dark);
}

.product-features span {
  font: 500 var(--fs-body)/1.55 var(--font);
  color: var(--c-on-dark-3);
}

@media (max-width: 599px) {
  .product-features ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 18px; }
  .product-features strong { font-size: var(--fs-body); }
  .product-features span { font-size: var(--fs-small); }
  .product-feature-icon { width: 26px; height: 26px; }
}


@media (max-width: 899px) {
  .product-body { grid-template-columns: minmax(0, 1fr); }
  .product-role--player .product-stage { order: 0; }
  .product-stage {
    aspect-ratio: 5 / 4;
    margin-inline: calc(-1 * var(--gutter-left)) calc(-1 * var(--gutter-right));
    border-radius: 0;
  }
  .product-stage .story-device--tablet { width: 80%; }
  .product-stage .story-device--phone { width: 30%; border-width: 5px; }
  .product-stage .story-device--watch { width: 38%; }
  .product-photo { width: 84%; }
}

@media (max-width: 899px) and (min-width: 600px) {
  .product-stage { aspect-ratio: 4 / 3; margin-inline: 0; border-radius: var(--radius-lg); }
  .product-stage .story-device--phone { width: 30%; }
  .product-stage .story-device--watch { width: 34%; }
}

@media (prefers-reduced-motion: reduce) {
  .product-stage .product-screen, .product-point-text, .product-point-text > span { transition: none; }
}

@media (max-width: 599px) {
  .product-claim { font-size: min(var(--fs-number), 11vw); }
  .product-role-name { font-size: var(--fs-lead); }
}

/* The day is no fourth role but a short film of all three together: a slim player bar with its moments on a timeline */
.day-teaser {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}

.day-teaser-lead {
  font: 600 var(--fs-lead)/1.4 var(--font);
  color: var(--c-on-dark-3);
}

.day-strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(16px, 2vw, 28px);
  width: min(100%, 720px);
  padding: 10px 10px 10px 10px;
  border: 1px solid var(--c-line-on-dark);
  border-radius: 999px;
  background: var(--c-wash-on-dark);
  text-align: left;
  transition: background-color .3s, border-color .3s;
}

.day-strip-media {
  width: clamp(56px, 6vw, 76px);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  background: var(--c-ink);
}

.day-strip-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.day-strip-text {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.day-strip-title {
  font: 900 var(--fs-title)/1.1 var(--font);
  text-transform: uppercase;
  color: var(--c-on-dark);
}

.day-strip-time {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 800 var(--fs-label)/1 var(--font);
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
  color: var(--c-on-dark-3);
}

/* Nine moments on the line of the day */
.day-strip-ticks {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(var(--c-line-on-dark), var(--c-line-on-dark)) center / 100% 2px no-repeat;
}

.day-strip-ticks i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-on-dark-4);
  transition: background-color .3s, transform .3s var(--ease-out);
}

.day-strip-play {
  display: grid;
  place-items: center;
  width: clamp(48px, 5vw, 60px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--c-player);
  color: var(--c-ink);
  transition: transform .3s var(--ease-out);
}

.day-strip-play svg {
  width: 40%;
  height: 40%;
  margin-left: 8%;
  fill: currentColor;
}

@media (hover: hover) {
  .day-strip:hover { border-color: var(--c-on-dark-4); background: var(--c-player-wash); }
  .day-strip:hover .day-strip-play { transform: scale(1.08); }
  .day-strip:hover .day-strip-ticks i { background: var(--c-player); }
  .day-strip:hover .day-strip-ticks i:nth-child(odd) { transform: scale(1.3); }
}

@media (max-width: 599px) {
  .day-strip-title { font-size: var(--fs-lead); }
  .day-strip-time { gap: 8px; }
  .day-strip-ticks i { width: 5px; height: 5px; }
}

.door-button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.door-button {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 12px;
  padding: 16px 22px;
  border-radius: var(--radius-md);
  background: var(--c-player);
  color: var(--c-ink);
  font: 800 var(--fs-body)/1 var(--font);
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: transform .25s, box-shadow .25s;
}

.door-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px var(--c-player-wash);
}

/* A day with LIVEGOLF in its window: nine scenes, each a clip with the app on a device beside its story */
.story-verdict {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(24px, 3vw, 40px);
  font: 900 var(--fs-number)/1 var(--font);
  letter-spacing: -.02em;
  text-transform: uppercase;
  text-align: center;
  text-wrap: balance;
}

/* A line in the role colors over the solution's verdict */
.story-verdict::before {
  content: "";
  width: min(520px, 70%);
  height: 2px;
  background: linear-gradient(90deg, var(--c-club), var(--c-player), var(--c-coach));
}

.story-verdict {
  font-size: var(--fs-display);
  color: var(--c-on-dark-3);
}

.story-verdict span {
  font-size: var(--fs-number);
  color: var(--c-on-dark);
}


.story { overflow-x: clip; }
.story .container { gap: clamp(88px, 10vw, 160px); }

.story-intro { text-align: center; }

.story-scene {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: clamp(32px, 5vw, 88px);
}

.story-scene:nth-of-type(even) .story-visual { order: 2; }

.story-scene--club { --role-color: var(--c-club); }
.story-scene--player { --role-color: var(--c-player); }
.story-scene--replay { --role-color: var(--c-coach-text); }

.story-visual { position: relative; }

.story-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--c-ink);
}

.story-copy {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 520px;
}

.story-time {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font: 800 var(--fs-label)/1.2 var(--font);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-on-dark-3);
}

.story-time span {
  font: 800 var(--fs-title)/1 var(--font);
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  color: var(--role-color);
}

.story-title {
  font: 800 var(--fs-display)/1.04 var(--font);
  letter-spacing: -.02em;
  text-wrap: balance;
}

.story-text {
  font: 500 var(--fs-lead)/1.55 var(--font);
  color: var(--c-on-dark-2);
  text-wrap: pretty;
}

.story-role {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 800 var(--fs-label)/1 var(--font);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-on-dark-3);
}

.story-role::before {
  content: "";
  width: 18px;
  height: 2px;
  background: var(--role-color);
}

/* App recordings in device frames that overlap the scene. The recording sets the screen's height from its own
   proportions and the frame is drawn around it, so no browser trims an edge of the recording */
.story-device {
  position: absolute;
  box-sizing: content-box;
  border: 1px solid var(--c-line-on-dark);
  background: linear-gradient(160deg, var(--c-ink), var(--c-bg));
  box-shadow: 0 24px 60px var(--c-shade);
  overflow: hidden;
}

.story-device--phone {
  right: 6%;
  bottom: -16%;
  width: 27%;
  border: 5px solid var(--c-ink);
  border-radius: clamp(22px, 3vw, 40px);
}

.story-device--watch {
  right: 6%;
  bottom: -12%;
  width: 24%;
  border: 6px solid var(--c-ink);
  border-radius: 28%;
}

.story-device--tablet {
  right: -6%;
  bottom: -16%;
  width: 54%;
  border: 7px solid var(--c-ink);
  /* An iPad's screen corners are tight for its size, so the recording's status bar stays whole */
  border-radius: 12px;
}

/* Scenes told by a screen alone show it centered on a soft glow */
:is(.story-scene--replay, .story-scene--screen) .story-visual {
  display: flex;
  justify-content: center;
}

:is(.story-scene--replay, .story-scene--screen) .story-visual::before {
  content: "";
  position: absolute;
  inset: 4% 0;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c-player) 20%, transparent), transparent);
}

.story-device--live {
  position: relative;
  width: min(320px, 70%);
  border: 8px solid var(--c-ink);
  border-radius: clamp(32px, 3.4vw, 46px);
  box-shadow: 0 0 0 1px var(--c-line-on-dark), 0 30px 80px var(--c-shade);
}

.story-device video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 884 / 1920;
  object-fit: contain;
}

.story-device--watch video { aspect-ratio: 416 / 496; }
.story-device--tablet video { aspect-ratio: 4 / 3; }

@media (max-width: 599px) {
  /* Scenes stand further apart than a scene's picture and text. The devices hang below the clip by a share of its
     height, three quarters of the screen width, and the text keeps the same distance below them */
  .story .container { gap: 136px; }

  .story-scene {
    grid-template-columns: 1fr;
    row-gap: 40px;
  }

  .story-visual:has(.story-device--phone) { margin-bottom: 12vw; }
  .story-visual:has(.story-device--watch) { margin-bottom: 9vw; }
  .story-visual:has(.story-device--tablet) { margin-bottom: 13.5vw; }
  .story-device--live { width: 56%; }

  .story-scene:nth-of-type(even) .story-visual { order: 0; }

  .story-video {
    width: calc(100% + var(--gutter-left) + var(--gutter-right));
    margin-left: calc(-1 * var(--gutter-left));
    aspect-ratio: 4 / 3;
    border-radius: 0;
  }

  .story-device--tablet { right: 3%; bottom: -18%; width: 62%; }
  .story-device--phone { width: 32%; }
  .story-device--watch { width: 30%; }
}

/* Fullscreen detail views over the page, each its own scroller with a bar to close it */
.detail {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg-dark);
  color: var(--c-on-dark);
}

.detail:focus { outline: none; }

.detail::backdrop { background: var(--c-shade); }
.detail[open] { animation: detail-in .5s var(--ease-out); }
.detail.is-closing { animation: detail-out .32s ease forwards; }

@keyframes detail-in {
  from { opacity: 0; transform: translateY(36px) scale(.985); }
}

@keyframes detail-out {
  to { opacity: 0; transform: translateY(28px); }
}

html:has(.detail[open]) { overflow: hidden; }

.detail-bar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: calc(12px + env(safe-area-inset-top, 0px)) var(--gutter-right) 12px var(--gutter-left);
  background: var(--c-glass);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.detail-title {
  font: 800 var(--fs-label)/1.2 var(--font);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-on-dark-2);
}

.detail-close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--c-player);
  color: var(--c-ink);
  cursor: pointer;
  transition: transform .25s var(--ease-out);
}

.detail-close:hover { transform: rotate(90deg); }

.detail-close svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
}

.detail-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px 22px;
  padding: clamp(40px, 7vw, 88px) var(--gutter-right) calc(clamp(64px, 10vw, 120px) + env(safe-area-inset-bottom, 0px)) var(--gutter-left);
}

.detail-foot .door-button { align-self: auto; }

.detail-back {
  padding: 16px 22px;
  border: 1px solid var(--c-line-on-dark);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--c-on-dark);
  font: 800 var(--fs-body)/1 var(--font);
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
}


/* Design partner and team on the light ground */
.partner .container { gap: clamp(88px, 12vw, 160px); }

.partner-block {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 24px);
  max-width: 980px;
}

.partner-text {
  font: 900 var(--fs-display)/1.04 var(--font);
  letter-spacing: -.02em;
  text-transform: uppercase;
  text-wrap: balance;
}

.partner-intro {
  display: flex;
  flex-direction: column;
  gap: clamp(36px, 5vw, 64px);
}

/* The course itself, drifting slowly inside its frame while it passes */
.partner-photo {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 21 / 10;
  border-radius: var(--radius-lg);
  background: var(--c-line-on-light);
}

.partner-photo img {
  display: block;
  width: 100%;
  height: 114%;
  object-fit: cover;
}

.partner-photo::after {
  content: "";
  position: absolute;
  inset: 55% 0 0;
  background: linear-gradient(transparent, var(--c-shade));
  pointer-events: none;
}

.partner-photo figcaption {
  position: absolute;
  z-index: 1;
  left: clamp(18px, 2.4vw, 32px);
  bottom: clamp(16px, 2vw, 28px);
  font: 800 var(--fs-label)/1.2 var(--font);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-on-dark);
}

@media (max-width: 699px) {
  .partner-photo { aspect-ratio: 4 / 3; }
  .partner-photo img { object-position: 30% 50%; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .partner-photo img {
      animation: partner-drift linear both;
      animation-timeline: view();
    }
  }
}

@keyframes partner-drift {
  from { transform: translateY(-12%); }
  to { transform: translateY(0); }
}

.team {
  scroll-margin-top: clamp(84px, 11vh, 128px);
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 64px);
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: clamp(20px, 2.6vw, 40px);
}

@media (min-width: 700px) {
  .team-card:nth-child(2) { margin-top: clamp(40px, 6vw, 96px); }
}

/* On phones the founders zigzag down the screen: each name stands beside its own portrait, level with its lower edge,
   on the side away from the screen's edge */
@media (max-width: 699px) {
  .team-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, .68fr) minmax(0, 1fr);
    grid-template-areas: "photo1 photo1 text1" "text2 photo2 photo2" "photo3 photo3 text3";
    gap: 32px 14px;
  }

  .team-grid .team-card { display: contents; }
  .team-card:nth-child(1) .team-photo { grid-area: photo1; }
  .team-card:nth-child(1) .team-text { grid-area: text1; }
  .team-card:nth-child(2) .team-photo { grid-area: photo2; }
  .team-card:nth-child(2) .team-text { grid-area: text2; align-items: flex-end; text-align: right; }
  .team-card:nth-child(3) .team-photo { grid-area: photo3; }
  .team-card:nth-child(3) .team-text { grid-area: text3; }
  .team-grid .team-text { align-self: end; padding-bottom: 6px; }
  .team-grid .team-name { font-size: min(var(--fs-title), 4.7vw); }
  .team-grid .team-role { letter-spacing: .14em; }
}

.team-card {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2vw, 26px);
}

.team-photo {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  background: var(--c-line-on-light);
}

.team-photo :is(img, video) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
  transition: transform 1.6s var(--ease-out);
}

/* The living portrait lies over the photo and fades in once it plays */
.team-photo video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: transform 1.6s var(--ease-out), opacity .8s ease;
}

.team-photo video.is-live { opacity: 1; }

.js-reveal .team-photo[data-reveal]:not(.is-visible) :is(img, video) { transform: scale(1.08); }

@media (hover: hover) {
  .team-card:hover .team-photo :is(img, video) { transform: scale(1.03); }
}

.team-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.team-role {
  font: 800 var(--fs-label)/1.2 var(--font);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-on-light-3);
}

.team-name {
  font: 900 var(--fs-title)/1.1 var(--font);
  letter-spacing: -.01em;
  text-transform: uppercase;
}

/* Beside the founders: the golf pro with his portrait next to his name, the ambassadors smaller on his right */
.team-helpers {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(32px, 4vw, 64px);
  padding-top: clamp(18px, 2vw, 26px);
  border-top: 2px solid var(--c-ink);
}

@media (max-width: 899px) {
  .team-helpers { grid-template-columns: minmax(0, 1fr); }
}

.team-advisor {
  display: grid;
  grid-template-columns: clamp(150px, 20vw, 280px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(18px, 2.4vw, 32px);
}

:is(.team-advisor, .team-ambassador) .team-photo { border-radius: var(--radius-md); }

.team-advisor-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.team-advisor-name {
  font: 900 var(--fs-lead)/1.2 var(--font);
  text-transform: uppercase;
}

.team-advisor-role {
  font: 500 var(--fs-small)/1.5 var(--font);
  color: var(--c-on-light-3);
}

.team-advisor-bio {
  max-width: 34em;
  font: 500 var(--fs-body)/1.5 var(--font);
  color: var(--c-on-light-2);
}

.team-ambassadors {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.team-ambassador-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 200px));
  gap: clamp(16px, 2vw, 28px);
}

.team-ambassador {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.team-ambassador-name {
  font: 900 var(--fs-lead)/1.2 var(--font);
  text-transform: uppercase;
}

.team-ambassador-note {
  max-width: 28em;
  font: 500 var(--fs-body)/1.5 var(--font);
  color: var(--c-on-light-2);
}

/* The finale: on the light ground the team stands on, the halo forms once more around the call to action. It fades
   out toward the section's edges, so it flows on into the team above and the footer below */
.finale {
  position: relative;
  z-index: 41;
  display: grid;
  place-items: center;
  min-height: 100svh;
  overflow: hidden;
  padding: var(--section-pad) var(--gutter-right) var(--section-pad) var(--gutter-left);
  background: radial-gradient(ellipse 55% 45% at 50% 50%, var(--c-paper), var(--c-page-light) 72%);
  color: var(--c-ink);
  --eyebrow-color: var(--c-on-light-3);
  --lead-color: var(--c-on-light-2);
}

.finale-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -webkit-mask-image: linear-gradient(transparent, var(--c-ink) 22%, var(--c-ink) 78%, transparent);
  mask-image: linear-gradient(transparent, var(--c-ink) 22%, var(--c-ink) 78%, transparent);
}

.finale-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 2vw, 24px);
  max-width: 560px;
  text-align: center;
}

.finale-title {
  font: 900 var(--fs-number)/.94 var(--font);
  letter-spacing: -.02em;
  text-transform: uppercase;
  text-wrap: balance;
}

.finale-button {
  margin-top: 8px;
  padding: 18px 28px;
  border-radius: var(--radius-md);
  background: var(--c-paper);
  color: var(--c-ink);
  box-shadow: 0 14px 34px var(--c-shade);
  font: 800 var(--fs-lead)/1 var(--font);
  letter-spacing: .02em;
  transition: transform .25s, box-shadow .25s;
}

.finale-button:hover { transform: translateY(-3px); }

.finale .finale-button {
  background: var(--c-ink);
  color: var(--c-paper);
  box-shadow: 0 14px 34px var(--c-shade-light);
}

@media (max-width: 599px) {
  .finale-title { font-size: var(--fs-display); }
}

/* The footer goes on in the finale's light: the brand, the ways around the page and to us, and the legal pages */
.site-footer {
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 6vw, 80px);
  padding: clamp(56px, 7vw, 96px) var(--gutter-right) calc(clamp(28px, 3vw, 40px) + env(safe-area-inset-bottom, 0px)) var(--gutter-left);
  background: var(--c-page-light);
  color: var(--c-on-light-2);
  font: 500 var(--fs-body)/1.5 var(--font);
}

.site-footer-main {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: clamp(36px, 5vw, 72px);
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
}

.site-footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

/* The white logo drawn in ink */
.site-footer-logo {
  display: block;
  width: 132px;
  aspect-ratio: 1000 / 434;
  background: var(--c-ink);
  -webkit-mask: url("../img/logo-white.png") center / contain no-repeat;
  mask: url("../img/logo-white.png") center / contain no-repeat;
}

.site-footer-claim {
  font: 800 var(--fs-label)/1.3 var(--font);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-on-light-2);
}

.site-footer-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.site-footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer-label {
  font: 800 var(--fs-label)/1.2 var(--font);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-ink);
}

.site-footer a { transition: color .2s; }
.site-footer a:hover { color: var(--c-ink); }

.site-footer-mail {
  font: 800 var(--fs-lead)/1.3 var(--font);
  color: var(--c-ink);
}

.site-footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-top: 24px;
  border-top: 1px solid var(--c-line-on-light);
  font: 600 var(--fs-small)/1.4 var(--font);
  color: var(--c-on-light-2);
}

.site-footer-legal ul {
  display: flex;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 699px) {
  .site-footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer-brand { grid-column: 1 / -1; }
}

/* The legal pages: the footer's light, the logo at the top and the text in a column */
.legal-page {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  background: var(--c-page-light);
  color: var(--c-ink);
  --eyebrow-color: var(--c-on-light-3);
  --lead-color: var(--c-on-light-2);
}

.legal-head { padding: calc(28px + env(safe-area-inset-top, 0px)) var(--gutter-right) 0 var(--gutter-left); }

.legal {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
  padding: clamp(64px, 10vw, 128px) var(--gutter-right) clamp(64px, 10vw, 128px) var(--gutter-left);
  overflow: visible;
}

.legal a { text-decoration: underline; text-underline-offset: 3px; }

.legal-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--c-line-on-light);
}

.legal-block h2 {
  font: 800 var(--fs-label)/1.2 var(--font);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-ink);
}

.legal-block :is(p, address, li) {
  font: 500 var(--fs-body)/1.6 var(--font);
  font-style: normal;
  color: var(--c-on-light-2);
}

.legal-block ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 1.1em;
  list-style: disc;
}

.legal-block h3 {
  margin-top: 8px;
  font: 800 var(--fs-body)/1.4 var(--font);
  color: var(--c-ink);
}

.legal strong { color: var(--c-ink); font-weight: 700; }

.legal-note {
  padding: 16px 20px;
  border: 1px solid var(--c-line-on-light);
  border-radius: var(--radius-md);
  background: var(--c-paper);
}

.legal-note p {
  font: 500 var(--fs-body)/1.6 var(--font);
  color: var(--c-on-light-2);
}

.site-footer-legal a[aria-current] { color: var(--c-ink); }

.legal-page .site-footer { padding-top: 0; }