/* Pearl / TEAMON3 red. One material: raised objects, recessed spaces, open copy.
   Native app captures retain their original pixels and approved identity. */
:root {
  --surface: light-dark(#e8e9e5, #1a1d28);
  --surface-muted: light-dark(#e8e9e5, #1a1d28);
  --surface-subtle: light-dark(#e8e9e5, #1a1d28);
  --paper: light-dark(#e8e9e5, #1a1d28);
  --ink: light-dark(#292e2c, #f2f3f7);
  --ink-secondary: light-dark(#585e59, #a8abba);
  --ink-secondary-on-fill: light-dark(#585e59, #a8abba);
  --ink-tertiary: light-dark(#585e59, #a8abba);
  --graphite: light-dark(#353b37, #0f1118);
  --border: light-dark(#c9ccc6, #3a3e4d);
  /* Dark pearl: the same one-material neumorphism, light from the upper left. The highlight
     is a lifted step of the page (#1a1d28 -> #2a2f40), the shade is deeper than the page. */
  --soft-light: light-dark(#fff, #2a2f40);
  --soft-shadow: light-dark(#c7c9c4, #0d0f16);
  /* Dark only: the pearl's white rim (55-85% white in light, light-dark() per use) becomes a
     faint lifted edge, so a raised or recessed object keeps its outline without glowing. */
  --rim-dark: rgb(255 255 255 / 7%);
  /* Astra finish: exact app accent (packages/ui/src/tokens/color.ts).
     Foreground variants are web-only: >=4.5:1 on this pearl, not app/logo edits. */
  --app-accent: light-dark(#0060fc, #5b9bff);
  --app-accent-ink: light-dark(#0059eb, #6fa8ff);
  --app-accent-wash: color-mix(in srgb, var(--app-accent) 6%, var(--surface));
  --trinity-accent: light-dark(#c52a92, #e05cb4);
  --trinity-accent-ink: light-dark(#b92186, #f07cc9);
  --trinity-accent-wash: color-mix(in srgb, var(--trinity-accent) 6%, var(--surface));

  /* Round 1 system tokens (DESIGN.md). Radius: inner = outer − inset. Round 4: these four
     steps (plus 0 and 50%) are the whole scale, and scripts/check-tokens.py holds every
     visible element to them or to a nested radius (--r-inner, below). */
  --r-pill: 999px;
  --r-16: 16px;
  --r-28: 28px;
  --r-40: 40px;
  --r-window: var(--r-40);
  /* Deprecated round 4 (DESIGN.md): the nearest step, for one round. */
  --r-stage: var(--r-40);
  --r-panel: var(--r-28);
  --r-invite: var(--r-28);
  --r-product: var(--r-28);
  /* Elevation. Light from the upper left: white highlight up-left, shade down-right. */
  --e-raised-sm: 5px 5px 11px var(--soft-shadow), -5px -5px 11px var(--soft-light);
  --e-raised-lg: 12px 12px 26px var(--soft-shadow), -12px -12px 26px var(--soft-light);
  --e-inset-sm: inset 3px 3px 6px var(--soft-shadow), inset -3px -3px 6px var(--soft-light);
  --e-inset-lg: inset 9px 9px 20px var(--soft-shadow), inset -9px -9px 20px var(--soft-light);
  --e-press-red: inset 3px 3px 6px #c81f33, inset -2px -2px 5px rgb(255 255 255 / 35%);
  /* The footage window's lip, verbatim from the sports hero: shade under the top edge
     and a faint rim. Inset, so it is painted by an overlay above the media. */
  --e-window: inset 0 22px 34px -22px rgb(6 8 7 / 70%), inset 0 0 0 1px rgb(255 255 255 / 7%);
  /* A pearl object floating over imagery: the capsule's dark drop. */
  --e-float-dark:
    0 18px 40px -14px rgb(6 8 7 / 50%), 0 2px 6px rgb(6 8 7 / 12%), inset 0 1px 0 var(--soft-light);
  /* Type. System text uses these four steps at weights 400 and 600 only, at one of two
     leadings: --lh-ui for labels, controls and short lines, --lh-prose for running text
     (round 4; .t-13 … .t-20 and .t-prose below). */
  --fs-13: 13px;
  --fs-15: 15px;
  --fs-17: 17px;
  --fs-20: 20px;
  --lh-ui: 1.4;
  --lh-prose: 1.6;
  /* Deprecated round 4: 24px is off the scale. Its uses are Barlow card titles, so it
     resolves to the card step (28px) for one round. */
  --fs-24: var(--d-card);
  /* Display type (round 2). Every display heading takes one triple: size, leading
     (-lh) and tracking (-ls), so a 96px h1 or a 64px h2 reads the same on every route.
     Barlow Condensed 700 throughout. */
  --d-hero: clamp(64px, min(9.4vw, 14.6svh), 148px);
  --d-hero-lh: 0.86;
  --d-hero-ls: -0.005em;
  /* Round 4: back to a 96px cap; the statement sits in columns 1–6 and wraps there. */
  --d-statement: clamp(56px, 6.4vw, 96px);
  --d-statement-lh: 0.92;
  --d-statement-ls: -0.02em;
  --d-h1: clamp(56px, 7.4vw, 96px);
  --d-h1-lh: 0.96;
  --d-h1-ls: -0.02em;
  --d-h2: clamp(40px, 4.6vw, 64px);
  --d-h2-lh: 0.98;
  --d-h2-ls: -0.015em;
  /* Round 4: 28px at every width. */
  --d-card: 28px;
  --d-card-lh: 1.05;
  --d-card-ls: -0.01em;
  --d-price: 40px;
  --d-price-lh: 1;
  /* The footer's closing line (round 4: capped at 64px). */
  --d-signoff: clamp(40px, 6vw, 64px);
  --d-signoff-lh: 0.92;
  /* Buttons: one height per role. Paired buttons take the group's size (below). */
  --btn-sm: 44px;
  --btn-md: 48px;
  --btn-lg: 54px;
  /* A pearl control over footage steps up to this as it lifts. */
  --surface-lift: light-dark(#f2f3ef, #20243a);
  /* Motion. */
  --dur-ui: 180ms;
  --dur-reveal: 420ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  /* Round 3: one 12-column grid on the page column (.grid-12, below). */
  --grid-gap: 32px;

  /* Earlier names, kept as aliases so nothing that reads them breaks. */
  --soft-raised: var(--e-raised-lg);
  --soft-inset: var(--e-inset-lg);
  --soft-control: var(--e-raised-sm);
}
@media (max-width: 760px) {
  :root {
    --grid-gap: 20px;
    --r-window: var(--r-28);
    /* Round 4: the phone hero keeps the one token; it resolves to the two-line size. */
    --d-hero: clamp(50px, 15.4vw, 76px);
    --d-statement: clamp(44px, 12.5vw, 56px);
    --d-h1: clamp(44px, 12.5vw, 56px);
    --d-h2: clamp(36px, 10vw, 48px);
  }
}
/* ─── Spacing scale (lane SP, 2026-10-20) ───────────────────────────────────────────
   One rhythm on every route (DESIGN.md, Spacing scale; scripts/check-spacing.py holds it).
   Gaps are measured between visible content, so a section frame carries no gap of its own:
   sections are spaced with margin, never padding, and the viewport-fit frames stay tight.
     --space-top      header capsule to a page's first content
     --space-section  between sections; hero to the first section; last section to the
                      footer's first content
     --space-head     an h1/h2 to whatever follows it
     --space-lede     a heading's lede to whatever follows it
     --space-block    one block to the next inside a section
     --space-caption  media to its caption, or a label to the strip it names
     --space-hint     an action to the note under it (.mailto-note)
     --pad-card       inside a raised card or panel
     --pad-well       a recessed media well to the screen it holds */
:root {
  --space-top: 40px;
  --space-section: 128px;
  --space-head: 20px;
  --space-lede: 28px;
  --space-block: 24px;
  --space-caption: 16px;
  --space-hint: 8px;
  --pad-card: 28px;
  --pad-well: 56px;
}
@media (max-width: 1023px) {
  :root {
    --space-top: 32px;
    --space-section: 104px;
    --space-lede: 24px;
    --space-block: 20px;
    --pad-well: 48px;
  }
}
@media (max-width: 760px) {
  :root {
    --space-top: 24px;
    --space-section: 80px;
    --space-head: 16px;
    --space-lede: 20px;
    --space-block: 16px;
    --pad-card: 20px;
    --pad-well: 40px;
  }
}
/* 'MORE TIME / FOR THE GAME.' holds two lines down to 320px. */
@media (max-width: 360px) {
  :root {
    --d-hero: clamp(46px, 14.6vw, 56px);
  }
}
body {
  background: var(--surface);
}
::selection {
  background: var(--ink);
  color: var(--surface);
}
/* ─── Header: one capsule on every route (round 1, geometry round 2) ─────────────────
   The capsule is .top__inner. On the homepage it rides inside the hero window's top
   edge (the sports hero block below); everywhere else it sits in flow, 14px from the
   top, and sticks there. site.js sets data-header on .top: top | stuck | hidden
   (phones, scrolling down). data-header-scrim adds the pearl band behind it. The
   capsule is never transparent: the homepage hand-off fades the hero dock's content
   instead (--dock-fade, below).
   One geometry on every route: .top spans the page, and the capsule is the column plus
   32px each side (never closer than 16px to the viewport), with its start padding
   computed so the logo's left edge lands on the column's left edge. Both lengths
   resolve their percentages against .top, which is as wide as the column's parent.
   Selectors carry .top so they outrank any leftover route-scoped header rules. */
.top {
  --cap-w: min(calc(var(--page) + 64px), 100% - 32px);
  position: sticky;
  top: 14px;
  z-index: 20;
  width: auto;
  margin: 14px 0 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  pointer-events: none;
}
/* The band behind the stuck capsule (round 5, call 17): it reaches 8px past the
   capsule's lower edge (--capsule-bottom, measured by site.js) and fades over its last
   16px, so it covers only what passes under the capsule. site.js turns it on only while
   plain page, not media, sits under the capsule's lower edge. */
.top::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: -1;
  display: block;
  height: calc(var(--capsule-bottom, 78px) + 8px);
  background: linear-gradient(
    light-dark(#e8e9e5, #1a1d28) 0 calc(100% - 16px),
    light-dark(rgb(232 233 229 / 0), rgb(26 29 40 / 0))
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-ui) var(--ease-out);
}
.top[data-header-scrim]::before {
  opacity: 1;
}
/* While the band is off (media under the capsule), the 14px above the stuck capsule stays
   pearl, so nothing scrolling up past it (a caption tag, a heading, the top of a window)
   ever peeks out over the capsule: a picture is seen only beside and below it. Solid, to
   the capsule's top edge. */
.top::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: -1;
  display: block;
  height: 14px;
  background: var(--surface);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-ui) var(--ease-out);
}
.top[data-header='stuck']::after {
  opacity: 1;
}
.top .top__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 32px;
  width: var(--cap-w);
  max-width: none;
  min-height: 64px;
  margin: 0 auto;
  /* Start padding = (capsule − column) / 2 − the 1px border: 31px when the capsule is
     the column plus 64px, 23px when the viewport's 16px margin governs. */
  padding: 8px 10px 8px calc((var(--cap-w) - var(--page)) / 2 - 1px);
  border: 1px solid light-dark(rgb(255 255 255 / 75%), var(--rim-dark));
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--e-float-dark);
  pointer-events: auto;
  transition:
    transform 220ms var(--ease-out),
    box-shadow 180ms var(--ease-out),
    min-height var(--dur-ui) var(--ease-out),
    padding var(--dur-ui) var(--ease-out);
}
/* Both mark markups: the homepage's .welcome-mark__stage img, and picture > img.top__logo. */
.top .top__mark {
  display: flex;
  flex: none;
  text-decoration: none;
  align-items: center;
  width: 142px;
  min-height: 44px;
  padding-block: 0;
  visibility: visible;
  opacity: 1;
}
/* The wordmark scales (transform, not width) when the phone capsule tightens, so the
   change never lays the header out again frame by frame. */
.top .top__mark img {
  transform-origin: 0 50%;
  transition: transform var(--dur-ui) var(--ease-out);
}
.top .top__mark picture,
.top .top__mark .welcome-mark__stage {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: auto;
}
.top .top__mark img {
  position: static;
  display: block;
  width: 100%;
  height: auto;
}
.top .top__nav {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-end;
  gap: 28px;
  margin-left: 0;
}
.top .top__nav > .button {
  margin-left: 0;
}
/* Nav links: a 2px underline grows from the left on hover and focus, and stays for the
   current page. */
.top .top__link {
  /* Round 6 (S3): a 44 × 44 target at every width. The text is centred in the box, so it
     sits where the old 41px box put it; --u-y below keeps the underline 2px under it. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding-block: 10px;
  color: var(--ink);
  font: 400 var(--fs-15) / 1.4 var(--font-body);
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 6px) / 0 2px no-repeat;
  transition: background-size var(--dur-ui) var(--ease-out);
}
.top .top__link:hover,
.top .top__link:focus-visible,
.top .top__link[aria-current='page'] {
  color: var(--ink);
  text-decoration: none;
  background-size: 100% 2px;
}
.top .top__menu {
  display: none;
}
.top .top__nav > * {
  white-space: nowrap;
}
/* Tablet widths: the full row (with pricing's longer action) still fits on one line. */
@media (min-width: 761px) and (max-width: 960px) {
  .top .top__inner {
    gap: 18px;
  }
  .top .top__mark {
    width: 124px;
  }
  .top .top__nav {
    gap: 18px;
  }
  .top .top__nav > .button {
    padding-inline: 16px;
  }
}
@media (max-width: 760px) {
  /* The flow box keeps the capsule's resting height, so the stuck capsule can shrink
     60→52px without moving the page under it. */
  .top {
    --cap-w: calc(100% - 20px);
    min-height: 60px;
  }
  .top .top__inner {
    flex-wrap: wrap;
    gap: 0 12px;
    min-height: 60px;
    padding: 6px 8px 6px 20px;
    border-radius: var(--r-pill);
  }
  .top .top__mark {
    width: 118px;
    min-height: 48px;
  }
  .top[data-header='stuck'] .top__inner {
    min-height: 52px;
    padding-block: 3px;
  }
  .top[data-header='stuck'] .top__mark {
    min-height: 40px;
  }
  /* 104 / 118: the stuck wordmark, drawn by scale. */
  .top[data-header='stuck'] .top__mark img {
    transform: scale(0.8814);
  }
  /* Hidden (round 3): 64px past its own height and with no drop, so neither the capsule
     nor its shadow leaves a smear along the top of the screen. */
  .top[data-header='hidden'] .top__inner {
    transform: translateY(calc(-100% - 64px));
    box-shadow: none;
    pointer-events: none;
  }
  .top[data-header='hidden']::before {
    opacity: 0;
  }
  /* Without JavaScript the links stay a visible row inside the capsule. */
  .top .top__nav {
    flex-basis: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 4px 18px;
    padding: 0 0 10px;
  }
  .top .top__nav .button {
    display: none;
  }
  .has-menu .top .top__menu {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
  }
  .has-menu .top .top__nav {
    display: none;
  }
  /* The open menu is a panel that overlays the page below the capsule. */
  /* Offsets are from the capsule's padding box: 1px of border, then 8px of air. */
  .has-menu .top .top__nav.is-open {
    position: absolute;
    top: calc(100% + 9px);
    inset-inline: -1px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 16px 24px 24px;
    border: 1px solid light-dark(rgb(255 255 255 / 75%), var(--rim-dark));
    border-radius: var(--r-28);
    background: var(--surface);
    box-shadow: var(--e-raised-lg);
  }
  /* Over the hero footage the white highlight would glow: the panel floats instead. */
  .has-menu .studio-home .top:not([data-header-scrim]) .top__nav.is-open {
    box-shadow: var(--e-float-dark);
  }
  .has-menu .top .top__nav.is-open .top__link {
    display: flex;
    align-items: center;
    min-height: 56px;
    margin-inline: -12px;
    padding: 0 12px;
    border: 0;
    border-radius: var(--r-16);
    font-size: var(--fs-17);
    background: none;
    transition:
      box-shadow var(--dur-ui) var(--ease-out),
      background-color var(--dur-ui) var(--ease-out);
  }
  /* The current page keeps the nav's 2px underline; raised is reserved for hover. */
  .has-menu .top .top__nav.is-open .top__link[aria-current='page'] {
    text-decoration: underline 2px;
    text-underline-offset: 8px;
  }
  .has-menu .top .top__nav.is-open .button {
    display: inline-flex;
    width: 100%;
    margin-top: 16px;
  }
}
@media (max-width: 760px) and (hover: hover) {
  .has-menu .top .top__nav.is-open .top__link:hover {
    box-shadow: var(--e-raised-sm);
  }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  /* Reduced motion never hides the header. */
  .top[data-header='hidden'] .top__inner {
    transform: none;
    pointer-events: auto;
  }
}
@media (max-width: 760px) and (hover: none) {
  .has-menu .top .top__nav.is-open .top__link:active {
    box-shadow: var(--e-inset-sm);
  }
}

/* ─── One control state machine (round 1) ────────────────────────────────────────
   .button (all variants), .top__menu, the hero's secondary and video controls,
   .seg > button and .icon-button share it. Rest: raised. Hover (pointer devices):
   lifts 2px to the large raise. Active: presses into the surface; red darkens and
   takes a red inner shade. Transitions name only transform, box-shadow and
   background-color. Over imagery the rest and hover elevations switch to the dark
   float (--ctl-rest / --ctl-hover), the grammar stays the same. */
.button,
.site-home .button,
.studio-home .button,
.top .top__menu,
.sports-hero__toggle,
.icon-button {
  --ctl-rest: var(--e-raised-sm);
  --ctl-hover: var(--e-raised-lg);
  --ctl-press: var(--e-inset-sm);
  border: 1px solid light-dark(rgb(255 255 255 / 70%), var(--rim-dark));
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--ctl-rest);
  transition:
    transform var(--dur-ui) var(--ease-out),
    box-shadow var(--dur-ui) var(--ease-out),
    background-color var(--dur-ui) var(--ease-out);
}
.button,
.site-home .button,
.studio-home .button {
  min-height: var(--btn-md);
  gap: 10px;
  padding: 12px 24px;
  font-size: var(--fs-15);
  font-weight: 600;
  line-height: var(--lh-ui);
}
.button--small,
.site-home .button--small,
.studio-home .button--small {
  min-height: var(--btn-sm);
  padding: 10px 20px;
  font-size: var(--fs-15);
}
.button--primary,
.site-home .button--primary,
.studio-home .button--primary {
  --ctl-rest: var(--e-raised-sm), inset 0 1px 1px rgb(255 255 255 / 40%);
  --ctl-hover: var(--e-raised-lg), inset 0 1px 1px rgb(255 255 255 / 40%);
  --ctl-press: var(--e-press-red);
  border-color: rgb(255 255 255 / 35%);
  background: var(--brand);
  /* §6.2 (amended 2026-09-25): a label on a solid brand.primary fill is white in light. */
  color: #fff;
}
.button--outline,
.site-home .button--outline,
.studio-home .button--outline {
  border-color: light-dark(rgb(255 255 255 / 70%), var(--rim-dark));
  background: var(--surface);
  color: var(--ink);
}
@media (hover: hover) {
  .button:hover,
  .top .top__menu:hover,
  .sports-hero__toggle:hover,
  .icon-button:hover {
    transform: translateY(-2px);
    box-shadow: var(--ctl-hover);
  }
  .button--primary:hover,
  .site-home .button--primary:hover,
  .studio-home .button--primary:hover {
    background: var(--brand);
    color: #fff;
  }
}
.button:active,
.top .top__menu:active,
.sports-hero__toggle:active,
.icon-button:active {
  transform: translateY(0);
  box-shadow: var(--ctl-press);
}
.button--primary:active,
.site-home .button--primary:active,
.studio-home .button--primary:active {
  background: #f5263e;
  color: #fff;
}
@media (prefers-reduced-motion: reduce) {
  .button:hover,
  .top .top__menu:hover,
  .sports-hero__toggle:hover,
  .icon-button:hover {
    transform: none;
  }
}
.top .top__menu {
  min-height: 44px;
  padding: 8px 18px;
  font: 600 var(--fs-15) / var(--lh-ui) var(--font-body);
}
.studio-home .studio-showcase {
  padding-top: 80px;
}
.studio-section-heading {
  padding-inline: 30px;
}
.studio-section-heading h2,
.studio-product .marketing-heading h2,
.studio-manual .try-trinity__copy h2,
.team-invitation h2 {
  font-family: var(--font-display);
  font-size: var(--d-h2);
  font-weight: 700;
  letter-spacing: var(--d-h2-ls);
  line-height: var(--d-h2-lh);
}
.studio-section-heading > div > p,
.studio-product .marketing-heading > p {
  color: var(--ink-secondary);
}
.trinity-wordmark,
.try-trinity__demo .trinity-wordmark {
  background: none;
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
}
.director-film {
  background: transparent;
}
.director-stage {
  background: var(--surface);
  box-shadow: var(--soft-inset);
  border-radius: var(--r-40);
  border: 1px solid light-dark(rgb(255 255 255 / 50%), var(--rim-dark));
}
.director-floor {
  background: transparent;
}
.director-scenarios {
  gap: 14px;
  margin-bottom: 26px;
}
.director-scenarios button {
  padding: 12px 20px;
  border-radius: var(--r-pill);
  color: var(--ink-secondary);
}
.director-scenarios button::after {
  display: none;
}
.director-scenarios button[aria-pressed='true'] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--e-raised-sm);
}
/* Film and reel transport buttons follow the control state machine: raised at rest,
   lifted on hover, pressed in on click. (They used to press in on hover.) */
.director-controls > button,
.app-reel__motion {
  border: 0;
  border-radius: var(--r-pill);
  color: var(--ink);
  background: var(--surface);
  box-shadow: var(--e-raised-sm);
  transition:
    transform var(--dur-ui) var(--ease-out),
    box-shadow var(--dur-ui) var(--ease-out),
    background-color var(--dur-ui) var(--ease-out);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .director-controls > button:hover,
  .app-reel__motion:hover {
    transform: translateY(-2px);
  }
}
@media (hover: hover) {
  .director-controls > button:hover,
  .app-reel__motion:hover {
    background: var(--surface);
    box-shadow: var(--e-raised-lg);
  }
}
.director-controls > button:active,
.app-reel__motion:active {
  transform: translateY(0);
  box-shadow: var(--e-inset-sm);
}
.director-chapters button,
.director-timer,
.director-captions,
.studio-film-foot,
.studio-film-foot > p > span {
  color: var(--ink-secondary);
}
.director-chapters button > i {
  background: light-dark(#c6c9c1, #3a3e4d);
}
.studio-transcript > div {
  background: var(--surface);
  border: 0;
  box-shadow: var(--soft-inset);
  color: var(--ink-secondary);
}
.studio-home .studio-product {
  padding-top: 110px;
  padding-bottom: 30px;
}
.studio-product .app-reel__stage {
  background: var(--surface);
  border-radius: var(--r-40);
  box-shadow: var(--soft-inset);
}
.app-reel__plane {
  box-shadow:
    14px 20px 28px light-dark(#bdc1b7, #0d0f16),
    -6px -6px 16px var(--soft-light);
}
.app-reel__label,
.app-reel__footer p {
  color: var(--ink-secondary);
}
.tour-selector {
  gap: 14px;
}
.tour-choice {
  border: 0;
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink-secondary);
  padding: 13px 24px;
}
.tour-choice[aria-pressed='true'] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--e-raised-sm);
}
.tour-choice[aria-pressed='true']::after {
  display: none;
}
.tour-scene__visual {
  background: var(--surface);
  border-radius: var(--r-40);
  box-shadow: var(--soft-inset);
}
.device-phone--product {
  border: 7px solid var(--surface);
  border-radius: var(--r-28);
  overflow: hidden;
  box-shadow:
    14px 18px 26px light-dark(#bfc3b9, #0d0f16),
    -7px -7px 16px var(--soft-light);
}
.tour-scene__story h3 {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.studio-home .studio-manual {
  padding-top: 100px;
  padding-bottom: 110px;
}
@media (min-width: 1024px) {
  .studio-manual .try-trinity__copy {
    position: sticky;
    top: 104px;
    align-self: start;
  }
}
.try-trinity__demo .demo__shell {
  background: var(--surface);
  border: 1px solid light-dark(rgb(255 255 255 / 60%), var(--rim-dark));
  border-radius: var(--r-28);
  box-shadow: var(--soft-raised);
}
.try-trinity__demo .demo__bar,
.try-trinity__demo .demo__body {
  background: var(--surface);
}
.try-trinity__demo .demo__context,
.try-trinity__demo .demo__proposal,
.try-trinity__demo .demo__prompt {
  background: var(--surface);
  border: 0;
  border-radius: var(--r-16);
  box-shadow:
    inset 4px 4px 9px var(--soft-shadow),
    inset -4px -4px 9px var(--soft-light);
}
.try-trinity__demo .demo__context-detail {
  color: var(--ink-secondary);
}
.try-trinity__demo .demo__scenario {
  background: var(--surface);
  border: 0;
  border-radius: var(--r-pill);
  color: var(--ink-secondary);
}
.try-trinity__demo .demo__scenario[aria-pressed='true'] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--soft-control);
}
.try-trinity__demo .tag {
  background: var(--surface);
  color: var(--ink-secondary);
}
.studio-home .team-invitation {
  margin: 0 40px 70px;
  padding: 60px 0;
  border: 1px solid light-dark(rgb(255 255 255 / 60%), var(--rim-dark));
  border-radius: var(--r-40);
  box-shadow: var(--soft-raised);
}
.foot,
.site-home .foot {
  background: var(--surface);
  border-top-color: var(--border);
}
/* Secondary routes inherit the same touchable controls and continuous canvas. */
.pages-intro {
  padding-top: 80px;
}
.plans-grid {
  gap: 30px;
  padding-block: 32px;
}
.plan-card,
.pricing-page .plan-card,
.organization-panel,
.support-page .support-contact-main {
  background: var(--surface);
  border: 1px solid light-dark(rgb(255 255 255 / 65%), var(--rim-dark));
  border-radius: var(--r-28);
  box-shadow: var(--soft-raised);
}
/* Early Team is the featured plan: it rises further than its neighbours. */
.plan-card--early {
  box-shadow: var(--e-raised-lg);
}
.period-control:not(.seg),
.pricing-page .period-control:not(.seg) {
  background: var(--surface);
  box-shadow: var(--soft-inset);
  padding: 6px;
}
.period-control button[aria-pressed='true'],
.pricing-page .period-control button[aria-pressed='true'] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--soft-control);
  border-color: light-dark(rgb(255 255 255 / 70%), var(--rim-dark));
}
.comparison-scroll {
  border: 0;
  border-radius: var(--r-28);
  padding: 8px 24px;
  box-shadow: var(--soft-inset);
}
.support-page .faq-search input {
  background: var(--surface);
  border: 1px solid light-dark(rgb(255 255 255 / 60%), var(--rim-dark));
  border-radius: var(--r-pill);
  padding-inline: 22px;
  box-shadow: var(--soft-inset);
}
.faq-item summary {
  padding-left: 8px;
}
.legal__summary {
  background: var(--surface);
  border: 0;
  border-radius: var(--r-28);
  box-shadow: var(--soft-inset);
}
.legal-nav {
  border-radius: var(--r-28);
  padding: 24px;
  box-shadow: var(--soft-control);
}
.screen-lightbox,
.screen-lightbox__bar,
.screen-lightbox__stage,
.director-dialog {
  background: var(--surface);
}
.screen-lightbox::backdrop,
.director-dialog::backdrop {
  background: light-dark(rgb(41 46 44 / 65%), rgb(8 9 14 / 78%));
}
.screen-lightbox__close,
.director-dialog__close {
  background: var(--surface);
  border: 0;
  border-radius: var(--r-pill);
  box-shadow: var(--soft-control);
}
@media (max-width: 760px) {
  .studio-home .studio-showcase {
    padding-top: 56px;
  }
  .studio-section-heading {
    padding-inline: 8px;
    gap: 24px;
  }
  .director-scenarios {
    margin-inline: 0;
    gap: 8px;
  }
  .director-scenarios button {
    padding: 10px 12px;
    font-size: var(--fs-13);
  }
  .director-stage {
    border-radius: var(--r-28);
  }
  .director-controls {
    gap: 8px;
    padding-inline: 0;
  }
  .director-controls > button {
    padding-inline: 10px;
  }
  .studio-film-foot {
    margin-inline: 8px;
  }
  .studio-home .studio-product {
    padding-top: 76px;
  }
  .studio-product .app-reel__stage {
    border-radius: var(--r-28);
  }
  .tour-selector {
    gap: 4px;
  }
  .tour-choice {
    padding: 12px 10px;
  }
  .tour-scene__visual {
    border-radius: var(--r-28);
  }
  .tour-scene__story h3 {
    font-size: 42px;
  }
  .studio-home .studio-manual {
    padding: 70px 8px 80px;
  }
  .studio-home .team-invitation {
    margin: 0 20px 50px;
    padding: 36px 0;
    border-radius: var(--r-28);
  }
  .team-invitation__grid {
    padding-inline: 24px;
  }
  .plans-grid {
    gap: 26px;
  }
  .pages-intro {
    padding-top: 48px;
  }
  .comparison-scroll {
    padding-inline: 12px;
  }
  .legal-nav {
    padding: 14px 20px;
  }
}
@media print {
  body {
    background: white;
  }
  .legal__summary {
    box-shadow: none;
    border: 1px solid #777;
  }
}

/* Finish review: authored film text must remain readable on both pearl and white.
   Canonical native screenshots keep their original pixels. */
.director-source,
.director-identity > span,
.director-prompt__foot,
.director-proposal__change > span,
.director-proposal > p,
.director-proposal > small,
.director-app__header > span,
.director-event__time > span,
.director-event__place,
.director-attendance span,
.director-chat-date,
.director-message > div > span,
.director-message--new > small,
.director-compose,
.director-fee-heading p,
.director-fee-heading span,
.director-fee-tally,
.director-fee-row > span,
.director-fee-note,
.director-receipt p,
.director-captions,
.director-chapters button,
.director-timer {
  color: var(--ink-secondary);
}
.director-proposal h3 {
  margin-top: 0;
}
.soft-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.12em;
  flex: none;
}
.director-proposal__change .soft-icon {
  width: 24px;
  height: 24px;
}
.director-prompt__foot .soft-icon {
  filter: invert(1);
  width: 20px;
  height: 20px;
}
.director-receipt__check .soft-icon {
  width: 16px;
  height: 16px;
}

/* Sports video hero · 2026-09-22. The user's GameChanger reference, reinterpreted:
   one large rounded window of fictional team footage inset into the pearl page,
   the offer centered over a charcoal scrim, and a pearl navigation capsule riding
   its top edge. The page rises into the window's lower edge as the dock carrying
   the preview label and video control, then continues as the Trinity film. */
/* On the homepage the header box spans the page and overlaps the window by 96px; the
   capsule inside it rides 16px within the window's top edge and sticks 14px from the
   viewport top after 18px of scroll. The box itself lets clicks through to the hero. */
.studio-home .top,
.has-menu .studio-home .top {
  /* Inside the hero the capsule never meets the window's sides: it stays 16px inside
     them (the window is inset 16px). At 1408px and wider that is the sitewide geometry
     and the logo sits on the column; narrower, the capsule keeps a 23px start padding
     rather than touching the window, and the logo sits up to 16px inside the column. */
  --cap-w: min(calc(var(--page) + 64px), 100% - 64px);
  top: -18px;
  width: auto;
  margin: 0 0 -96px;
  padding: 32px 0 0;
  pointer-events: none;
}
.studio-home .top .top__inner {
  padding-left: max(23px, calc((var(--cap-w) - var(--page)) / 2 - 1px));
}
/* ─── Footage windows (round 1) ──────────────────────────────────────────────────
   .field-window is the hero's window, generalised: a recessed charcoal window with
   the pearl lip under its top edge. The sports hero shares these rules without a
   markup change, so its pixels stay as they were. The lip (--e-window) is inset, so
   it is painted by ::after above the media rather than on the box, where the media
   would cover it. Layers: media 0, scrim and lip 1, copy 2, tags, docks, controls 3. */
.field-window,
.sports-hero__window {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0;
  border-radius: var(--r-window);
  background: #151917;
}
.field-window::after,
.sports-hero__window::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  box-shadow: var(--e-window);
  pointer-events: none;
}
.field-window__media,
.field-window > picture > img,
.field-window > video,
.field-window .pearl-loop__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 0;
  object-fit: cover;
}
picture.field-window__media > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* White copy reads over the lower left, where __copy sits by default. */
.field-window__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(0deg, rgb(9 12 11 / 72%), rgb(9 12 11 / 18%) 46%, rgb(9 12 11 / 0) 72%),
    linear-gradient(90deg, rgb(9 12 11 / 46%), rgb(9 12 11 / 0) 60%);
  pointer-events: none;
}
.field-window__copy {
  position: relative;
  z-index: 2;
  color: #fff;
}
.field-window--16x9 {
  aspect-ratio: 16 / 9;
}
.field-window--4x3 {
  aspect-ratio: 4 / 3;
}
.field-window--5x4 {
  aspect-ratio: 5 / 4;
}
.field-window--4x5 {
  aspect-ratio: 4 / 5;
}
.field-window--2x1 {
  aspect-ratio: 2 / 1;
}
@media (max-width: 760px) {
  .field-window--m4x5 {
    aspect-ratio: 4 / 5;
  }
}
/* The film theatre: the same window with no footage. */
.field-window--theatre {
  background: #151917;
}
/* A pearl panel rising into a window's lower edge: rounded top corners and concave
   fillets, so the page appears to grow up into the footage. */
.field-window__dock,
.sports-hero__dock {
  --dock-radius: var(--r-28);
  position: relative;
  z-index: 3;
  border-radius: var(--dock-radius) var(--dock-radius) 0 0;
  background: var(--surface);
}
.field-window > .field-window__dock {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.field-window__dock::before,
.field-window__dock::after,
.sports-hero__dock::before,
.sports-hero__dock::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: var(--dock-radius);
  height: var(--dock-radius);
  pointer-events: none;
}
.field-window__dock::before,
.sports-hero__dock::before {
  right: calc(100% - 0.5px);
  background: radial-gradient(
    circle at 0 0,
    transparent calc(var(--dock-radius) - 0.5px),
    var(--surface) var(--dock-radius)
  );
}
.field-window__dock::after,
.sports-hero__dock::after {
  left: calc(100% - 0.5px);
  background: radial-gradient(
    circle at 100% 0,
    transparent calc(var(--dock-radius) - 0.5px),
    var(--surface) var(--dock-radius)
  );
}

/* ─── Sports hero ─────────────────────────────────────────────────────────────── */
.sports-hero {
  --hero-inset: 16px;
  --hero-radius: var(--r-40);
  --hero-dock-radius: var(--r-28);
  padding: var(--hero-inset) var(--hero-inset) 0;
}
.sports-hero__window {
  display: grid;
  /* Round 6 fix 1: one track the window's own width, so no content (a long dock label, a
     150% text size) can widen the window past the page and push the dock off screen. */
  grid-template-columns: minmax(0, 1fr);
  /* Round 3: capped at 1920px and centred, so the 1080p masters are never upscaled. */
  max-width: 1920px;
  min-height: clamp(600px, calc(100svh - var(--hero-inset) * 2), 1020px);
  margin-inline: auto;
  border-radius: var(--hero-radius);
}
.sports-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.sports-hero__poster,
.sports-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}
.sports-hero__video {
  opacity: 0;
  /* Round 3: 600ms (was 480ms), long enough that the first frame dissolves in. */
  transition: opacity 600ms ease;
}
.sports-hero[data-video-frame] .sports-hero__video {
  opacity: 1;
}
.sports-hero__scrim {
  position: absolute;
  inset: 0;
  /* Landscape (round 3): a smaller neutral pool behind the centred copy, a low band for
     the lede and availability, and a light top band for the capsule. The round-2 warm pool
     browned the ice; this one is neutral charcoal and leaves the upper corners lit
     (check-hero-motion.py's brightness probe holds them at >=85% of the bare poster).
     Tuned against the contrast gate: the brief's 52% pool at 50% 50% left the lede at
     4.34:1 and the availability line at 4.06:1 (1440x900) and 3.81:1 (1280x720). Pool
     alpha alone could not reach the availability line, which sits below the pool (76%
     still read 4.36 and 4.00), so the pool took one 4% step (56%) and moved its centre
     down to 58%, behind the lede and availability; the 148px headline keeps 7.7:1. */
  background:
    radial-gradient(ellipse 46% 34% at 50% 58%, rgb(8 10 12 / 56%), rgb(8 10 12 / 0) 100%),
    linear-gradient(to top, rgb(8 10 12 / 55%) 0, rgb(8 10 12 / 0) 42%),
    linear-gradient(rgb(8 10 12 / 30%), transparent 18%);
}
/* Portrait tablets: portrait footage puts bright sky behind the centred headline; the
   copy band gets more shade. (Phones take the bottom-weighted scrim below.) */
@media (min-width: 761px) and (max-aspect-ratio: 1/1) {
  .sports-hero__scrim {
    background:
      radial-gradient(ellipse 95% 44% at 50% 44%, rgb(9 12 11 / 46%), rgb(9 12 11 / 0%)),
      linear-gradient(
        180deg,
        rgb(9 12 11 / 68%) 0%,
        rgb(9 12 11 / 36%) 22%,
        rgb(9 12 11 / 36%) 64%,
        rgb(9 12 11 / 80%) 100%
      );
  }
}
.sports-hero__copy {
  position: relative;
  z-index: 2;
  grid-area: 1 / 1;
  align-self: center;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 1040px);
  padding: 124px 40px 116px;
  color: #fff;
  text-align: center;
}
.sports-hero h1 {
  margin: 0 0 22px;
  font: 700 var(--d-hero) / var(--d-hero-lh) var(--font-display);
  letter-spacing: var(--d-hero-ls);
  text-transform: uppercase;
  text-shadow: 0 2px 28px rgb(0 0 0 / 28%);
}
.sports-hero__actions {
  justify-content: center;
  gap: 16px;
}
/* Both actions float over footage: same state machine, dark float elevations. */
.sports-hero__actions .button {
  --ctl-rest: var(--e-float-dark);
  --ctl-hover:
    0 26px 44px -14px rgb(6 8 7 / 58%), 0 4px 10px rgb(6 8 7 / 16%), inset 0 1px 0 var(--soft-light);
}
.sports-hero__actions .button--primary {
  --ctl-rest:
    0 18px 40px -14px rgb(6 8 7 / 50%), 0 2px 6px rgb(6 8 7 / 12%),
    inset 0 1px 1px rgb(255 255 255 / 40%);
  --ctl-hover:
    0 26px 44px -14px rgb(6 8 7 / 58%), 0 4px 10px rgb(6 8 7 / 16%),
    inset 0 1px 1px rgb(255 255 255 / 40%);
}
.studio-home .sports-hero .button {
  min-height: 54px;
  padding: 14px 30px;
  font-size: var(--fs-15);
}
.studio-home .sports-hero .sports-hero__secondary {
  border-color: light-dark(rgb(255 255 255 / 85%), var(--rim-dark));
}
.sports-hero__availability {
  margin: 28px 0 0;
  font-size: var(--fs-15);
  line-height: 1.6;
  text-wrap: balance;
  color: rgb(255 255 255 / 86%);
  text-shadow: 0 1px 12px rgb(0 0 0 / 35%);
}
.sports-hero__dock {
  --dock-radius: var(--hero-dock-radius);
  grid-area: 1 / 1;
  align-self: end;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 64px;
  /* Equal side padding: the pause control sits in the middle of the notch (it carried 30px on
     the left for a label that no longer shares the dock). */
  padding: 10px 20px 2px;
}
.sports-hero__label {
  margin: 0;
  font-size: var(--fs-13);
  line-height: 1.4;
  color: var(--ink-secondary);
}
/* The video control: a pearl pill on the pearl dock, in the shared state machine,
   with the Lucide pause/play glyph. */
.sports-hero__toggle {
  display: inline-flex;
  /* Round 6 fix 1 (H5): the control keeps its words on one line and its width; the label
     beside it is what gives way (the short form, then a wrap; soft-motion.js). */
  flex: none;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px 10px 14px;
  font: 600 var(--fs-13) / var(--lh-ui) var(--font-body);
  white-space: nowrap;
}
.sports-hero__toggle::before {
  content: '';
  flex: none;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url('/icons/pause.svg') center / 16px 16px no-repeat;
  mask: url('/icons/pause.svg') center / 16px 16px no-repeat;
}
.sports-hero[data-video-state='paused'] .sports-hero__toggle::before {
  -webkit-mask-image: url('/icons/play.svg');
  mask-image: url('/icons/play.svg');
}
@media (max-width: 760px) {
  .studio-home .top,
  .has-menu .studio-home .top {
    /* 10px inside the 10px-inset window, as on desktop. */
    --cap-w: calc(100% - 40px);
    top: -8px;
    min-height: 80px;
    padding: 20px 0 0;
    margin-bottom: 0;
  }
  .studio-home .top .top__inner {
    padding-left: 20px;
  }
  /* Without JavaScript the links stay visible as a row inside the capsule, so the
     header keeps its own place above the window instead of covering the offer. */
  .has-menu .studio-home .top {
    margin-bottom: -80px;
  }
  html:not(.has-menu) .studio-home .sports-hero__copy {
    padding-top: 36px;
  }
  .sports-hero {
    --hero-inset: 10px;
    --hero-radius: var(--r-28);
    --hero-dock-radius: var(--r-28);
    --hero-dock-h: 58px;
    /* The capsule's lower edge inside the window: the header's 20px top padding and its
       60px capsule, less the window's own inset from the page. */
    --capsule-bottom-in-window: calc(80px - var(--hero-inset));
  }
  /* Phone composition (round 4, call 3): the portrait masters put the athlete low with
     open sky above, so the copy moves up into the sky, 36px under the capsule, and the
     footage owns the lower half. The window is the viewport less its insets, as on
     desktop, so the copy's share of it stays under 55% at 390x844 (70% at 320x640). */
  .sports-hero__window {
    min-height: clamp(560px, calc(100svh - 2 * var(--hero-inset)), 820px);
    /* Pearl under the dock, so the window's rounded lower corners anti-alias pearl on
       pearl instead of leaving a charcoal hairline around the dock. */
    background: linear-gradient(#151917 calc(100% - 40px), var(--surface) 0);
  }
  /* The footage stops 40px above the window's lower edge, under the dock, so no layer of
     it reaches the rounded corners to fringe their anti-aliasing. */
  .sports-hero__media {
    bottom: 40px;
  }
  .sports-hero__copy {
    align-self: start;
    justify-content: flex-start;
    padding: calc(var(--capsule-bottom-in-window) + 36px) 20px calc(var(--hero-dock-h) + 24px);
  }
  /* One top-down shade behind the copy only; the lower footage is left bare. It is drawn
     on the copy's own box (window top to 82px under the availability line), so it ends
     where the copy ends on every phone height. The brief's window-relative stops (72% /
     55% at 38% / 0 at 62%) left the availability line in bare footage at 320x640 (1.95:1
     on the brightest sky of the re-ordered loop); tuned by check-hero-motion.py's
     portrait contrast gate. */
  .sports-hero__scrim {
    background: none;
  }
  .sports-hero__copy::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
      to bottom,
      rgb(9 12 11 / 72%) 0%,
      rgb(9 12 11 / 55%) 50%,
      rgb(9 12 11 / 55%) calc(100% - 82px),
      rgb(9 12 11 / 0%) 100%
    );
    pointer-events: none;
  }
  .sports-hero h1 {
    margin-bottom: 16px;
  }
  /* Two actions side by side at 360px and wider, one 48px row. Round 6 fix 1 (H6): at a
     larger text size a pill grows instead of spilling its words (height from its content,
     never under 48px), and the pair stacks, each full width, once both labels will not sit
     on one line at their natural width (min-width: fit-content is the label's one-line
     width, or the row's when even that is wider). 12px side padding keeps both labels on
     one line side by side from 360px (291px of a 300px row), where 16px wrapped them. */
  .sports-hero__actions {
    flex-wrap: wrap;
    width: 100%;
    max-width: 400px;
    gap: 12px;
  }
  .studio-home .sports-hero .sports-hero__actions .button {
    flex: 1 1 0;
    min-width: fit-content;
    height: auto;
    min-height: var(--btn-md);
    padding: 10px 12px;
    text-align: center;
  }
  .sports-hero__availability {
    margin-top: 16px;
    font-size: var(--fs-13);
    line-height: var(--lh-ui);
  }
  /* The dock spans the window: its top edge is one straight line where the footage
     ends, with no fillets, and the window's 28px lower corners round it off. */
  .sports-hero__dock {
    justify-self: stretch;
    gap: 12px;
    min-height: var(--hero-dock-h);
    padding: 8px 8px 8px 20px;
    border-radius: 0 0 var(--r-28) var(--r-28);
  }
  .sports-hero__dock::before,
  .sports-hero__dock::after {
    content: none;
  }
  .sports-hero__label:not(.truth-tag) {
    display: grid;
  }
  .sports-hero__dot {
    display: none;
  }
  .sports-hero__toggle {
    min-height: 44px;
    margin-left: auto;
    padding: 8px 14px 8px 12px;
  }
}
/* Below 360px the two actions stack and the gaps tighten. */
@media (max-width: 359px) {
  .sports-hero h1 {
    margin-bottom: 12px;
  }
  .sports-hero__availability {
    margin-top: 12px;
  }
  .sports-hero__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .studio-home .sports-hero .sports-hero__actions .button {
    flex: none;
  }
}
/* The dock's label: the long form only where it fits beside the worded control. Round 6
   fix 1 (H5): measured, the long form (312px) and the worded control (128px, 140px as
   "Resume video") need a 500px dock plus 20px of slack, so it starts at 540px, not 421px
   (from 421px to 499px it ran under "Pause video" and widened the window). soft-motion.js
   re-measures the fit on resize, font and label changes and sets data-label-fit on the dock
   (short, or wrap for text sizes where even the short form cannot sit on one line). */
@media (min-width: 540px) and (max-width: 760px) {
  .sports-hero__label .seg__long {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
  }
  .sports-hero__label .seg__short {
    display: none;
  }
}
@media (max-width: 360px) {
  .sports-hero__label:not(.truth-tag) {
    font-size: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sports-hero__video {
    transition: none;
  }
}

/* Pearl finish · homepage, 2026-09-22 (.impeccable/finish/pearl-finish-brief.md §3).
   Scoped to .studio-home: other routes carry their own finish rules. R1 one display
   weight (700), R2 one content column, one section rhythm, the sideline window with
   its finite loop, and the plaster clipboard beside the manual preview. */
.studio-home {
  --page: min(1280px, 100% - 80px);
  --section-gap: clamp(72px, 9vw, 128px);
}
@media (max-width: 760px) {
  .studio-home {
    --page: calc(100% - 40px);
  }
}
/* R2: the header's column, text on its edge, footer included. */
.studio-home .studio-wrap,
.studio-home .studio-product .marketing-wrap,
.studio-home .foot .wrap {
  width: var(--page);
  max-width: none;
  margin-inline: auto;
  padding-inline: 0;
}
.studio-home .studio-showcase {
  padding-bottom: 0;
}
/* Heading rows share one 12-column grid: the heading on columns 1–7, its companion on
   8–12, both resting on the heading's last baseline. */
.studio-home .studio-section-heading,
.studio-home .studio-product .marketing-heading {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  align-items: end;
  align-items: last baseline;
  padding-inline: 0;
}
.studio-home .studio-section-heading > h2,
.studio-home .studio-product .marketing-heading > h2 {
  grid-column: 1 / 8;
  max-width: none;
}
.studio-home .studio-section-heading > div,
.studio-home .studio-product .marketing-heading > p {
  grid-column: 8 / 13;
  max-width: 27em;
  text-align: left;
}
.studio-home .studio-section-heading .studio-meet {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 10px;
  font-size: 15px;
  color: var(--ink-secondary);
}
.studio-home .director-scenarios,
.studio-home .studio-film-foot {
  margin-inline: 0;
}
/* H8: the three reel labels leave the tilted planes and share one baseline, set
   under the lowest (dropped) plane so no screen covers its neighbour's label. */
@media (min-width: 761px) {
  .studio-home .app-reel__stage {
    padding-bottom: 72px;
  }
  .studio-home .app-reel__label {
    position: absolute;
    top: calc(100% + 16px);
    left: 0;
    right: 0;
    margin: 0;
    line-height: 1.4;
  }
}
@media (min-width: 761px) and (min-height: 601px) and (prefers-reduced-motion: no-preference) {
  .studio-home .app-reel__label {
    transform: rotateZ(calc(var(--reel-roll, -2deg) * -1)) rotateY(calc(var(--reel-yaw, 9deg) * -1))
      translateY(calc(28px - var(--reel-y, 0px)));
  }
}
/* One section rhythm: each entry after the film is the same gap. */
.studio-home .studio-product {
  padding-top: var(--section-gap);
  padding-bottom: 0;
}
.studio-home .studio-manual {
  margin-top: 0;
  padding: var(--section-gap) 0 0;
}
.studio-home .studio-manual .try-trinity__copy > .preview-disclosure {
  margin: 20px 0 0;
  font-size: 13px;
  line-height: var(--lh-ui);
  color: var(--ink-secondary);
}
/* M5: plaster clipboard fills the sticky column, only where the viewport holds it. */
.studio-home .pearl-object {
  display: block;
  max-width: 100%;
  height: auto;
  -webkit-mask-image:
    linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent),
    linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent),
    linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent);
  mask-composite: intersect;
}
.studio-home .pearl-manual__art {
  display: none;
}
@media (min-width: 1024px) and (min-height: 820px) {
  .studio-home .pearl-manual__art {
    display: block;
    width: min(380px, calc((100vh - 464px) * 4 / 3));
    max-width: calc(100% + 18px);
    margin: 28px 0 0 -18px;
  }
}
/* The invitation: a raised panel holding a recessed sideline window and the offer. */
.studio-home .team-invitation {
  width: var(--page);
  margin: var(--section-gap) auto 96px;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.studio-home .team-invitation__panel {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: 48px;
  align-items: center;
  padding: 16px;
  border: 1px solid light-dark(rgb(255 255 255 / 60%), var(--rim-dark));
  border-radius: var(--r-40);
  background: var(--surface);
  box-shadow: var(--soft-raised);
}
/* Radii stay concentric: panel 44 − 16 = well 28; well 28 − 10 = picture 18. */
/* The well fills its grid row, so the loop control (a later sibling placed in the same
   cell, after the offer on the tab path) always sits inside the picture's corner. */
.studio-home .pearl-well {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 10px;
  border: 1px solid light-dark(rgb(255 255 255 / 55%), var(--rim-dark));
  border-radius: var(--r-28);
  background: var(--surface);
  box-shadow: var(--soft-inset);
}
.studio-home .pearl-well img {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-16);
}
.studio-home .pearl-well::after {
  content: '';
  position: absolute;
  inset: 10px;
  z-index: 1;
  border-radius: var(--r-16);
  box-shadow:
    inset 7px 7px 16px light-dark(rgb(41 46 44 / 20%), rgb(6 8 12 / 45%)),
    inset -5px -5px 12px light-dark(rgb(255 255 255 / 30%), rgb(255 255 255 / 4%));
  pointer-events: none;
}
.pearl-loop__video {
  opacity: 0;
  transition: opacity 480ms ease;
}
.studio-home .pearl-well .pearl-loop__video {
  position: absolute;
  inset: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  object-fit: cover;
  border-radius: var(--r-16);
}
.pearl-loop[data-loop-state='playing'] .pearl-loop__video,
.pearl-loop[data-loop-state='paused'] .pearl-loop__video,
.pearl-loop[data-loop-state='suspended'] .pearl-loop__video,
.pearl-loop[data-loop-state='finished'] .pearl-loop__video,
.pearl-loop[data-loop-state='ended'] .pearl-loop__video {
  opacity: 1;
}
/* Same pill and glyphs as the hero's video control; it floats over imagery, so it
   takes the capsule's dark drop instead of the white-highlight pair. */
.studio-home .pearl-loop__control:not(.icon-button) {
  position: relative;
  z-index: 2;
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  margin: 0 22px 22px 0;
  padding: 8px 16px 8px 14px;
  border: 1px solid light-dark(rgb(255 255 255 / 75%), var(--rim-dark));
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  font: 600 13px/1.2 var(--font-body);
  box-shadow:
    0 12px 26px -10px rgb(6 8 7 / 55%),
    0 2px 6px rgb(6 8 7 / 14%),
    inset 0 1px 0 var(--soft-light);
  transition: box-shadow 180ms ease;
}
.studio-home .pearl-loop__control:not(.icon-button)[hidden] {
  display: none;
}
.studio-home .pearl-loop__control:not(.icon-button):hover {
  box-shadow:
    0 16px 30px -10px rgb(6 8 7 / 60%),
    0 2px 6px rgb(6 8 7 / 14%),
    inset 0 1px 0 var(--soft-light);
}
.studio-home .pearl-loop__control:not(.icon-button):active {
  box-shadow:
    inset 3px 3px 7px var(--soft-shadow),
    inset -3px -3px 7px var(--soft-light);
}
.studio-home .pearl-loop__control:not(.icon-button)::before {
  content: '';
  flex: none;
  width: 10px;
  height: 12px;
  background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65%);
}
.studio-home .pearl-loop__control:not(.icon-button)[data-loop-state='paused']::before,
.studio-home .pearl-loop__control:not(.icon-button)[data-loop-state='finished']::before {
  width: 11px;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.studio-home .team-invitation__offer {
  grid-column: 2;
  grid-row: 1;
  padding: 24px 40px 24px 0;
}
.studio-home .team-invitation h2 {
  margin: 0;
}
.studio-home .team-invitation .team-invitation__caption {
  margin: 14px 0 0;
  font-size: var(--fs-17);
  line-height: 1.6;
  color: var(--ink-secondary);
}
/* Label / numeral / note sit on shared rows, so both prices keep one baseline. */
.studio-home .team-invitation__plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, auto);
  column-gap: 24px;
  align-items: start;
  margin: 32px 0;
}
.studio-home .team-invitation .plan-glance {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 8px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.studio-home .team-invitation .plan-glance > span {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}
.studio-home .team-invitation .plan-glance > strong {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.005em;
  font-variant-numeric: lining-nums tabular-nums;
}
.studio-home .team-invitation .plan-glance > strong small {
  font: 400 var(--fs-15) / 1 var(--font-body);
  letter-spacing: 0;
  color: var(--ink-secondary);
}
.studio-home .team-invitation .plan-glance > small {
  font-size: 13px;
  line-height: var(--lh-ui);
  color: var(--ink-secondary);
}
/* Tablet: the fixed 390px chapter rail yields so the timer and Expand stay on one line. */
@media (min-width: 761px) and (max-width: 1050px) {
  .studio-home .director-chapters {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }
  .studio-home .director-timer,
  .studio-home .director-controls .director-expand {
    flex: none;
    white-space: nowrap;
  }
}
@media (max-width: 900px) {
  .studio-home .team-invitation__panel {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 28px;
  }
  .studio-home .team-invitation__offer {
    grid-column: 1;
    grid-row: 2;
    padding: 0 16px 16px;
  }
}
@media (max-width: 760px) {
  .studio-home .studio-section-heading,
  .studio-home .studio-product .marketing-heading {
    display: block;
  }
  /* HM4: the meet line and its description stack under the heading, full width. */
  .studio-home .studio-section-heading h2 {
    margin-bottom: 20px;
  }
  .studio-home .studio-section-heading > div {
    display: block;
    max-width: none;
  }
  .studio-home .studio-section-heading .studio-meet {
    margin-bottom: 6px;
    font-size: 15px;
  }
  .studio-home .studio-meet .trinity-wordmark {
    display: inline;
    margin: 0;
    font-size: 37px;
  }
  .studio-home .studio-section-heading > div > p:not(.studio-meet) {
    font-size: 15px;
  }
  /* HM2: one scrolling, snapping row of film scenarios. (A .seg--scroll row brings its
     own track, snap and fade.) */
  .studio-home .director-scenarios:not(.seg) {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 8px;
    margin: 0 -20px 14px;
    padding: 10px 20px 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 20px;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .studio-home .director-scenarios:not(.seg)::-webkit-scrollbar {
    display: none;
  }
  .studio-home .director-scenarios button {
    flex: none;
    min-height: 44px;
    padding: 10px 16px;
    white-space: nowrap;
    scroll-snap-align: start;
    font-size: 13px;
  }
  /* HM3: Play and chapters, then the timer and a normal Expand pill on a second line. */
  .studio-home .director-chapters {
    flex: 1 1 calc(100% - 72px);
  }
  .studio-home .director-timer {
    display: block;
    font-size: var(--fs-13);
  }
  .studio-home .director-controls .director-expand {
    flex: none;
    width: auto;
    min-height: 44px;
    margin-left: auto;
    padding: 10px 16px;
    font-size: var(--fs-13);
    text-align: center;
    box-shadow: var(--soft-control);
  }
  .studio-home .studio-film-foot {
    margin-inline: 0;
  }
  .studio-home .studio-manual {
    padding-inline: 0;
  }
  .studio-home .team-invitation {
    margin-bottom: 56px;
  }
  .studio-home .team-invitation__panel {
    row-gap: 22px;
    padding: 10px;
    border-radius: var(--r-28);
  }
  .studio-home .pearl-well {
    padding: 7px;
    border-radius: var(--r-16);
  }
  .studio-home .pearl-well img,
  .studio-home .pearl-well::after,
  .studio-home .pearl-well .pearl-loop__video {
    border-radius: var(--r-16);
  }
  .studio-home .pearl-well::after,
  .studio-home .pearl-well .pearl-loop__video {
    inset: 7px;
  }
  .studio-home .pearl-well .pearl-loop__video {
    width: calc(100% - 14px);
    height: calc(100% - 14px);
  }
  .studio-home .pearl-loop__control:not(.icon-button) {
    min-height: 40px;
    margin: 0 14px 14px 0;
    padding: 8px 14px 8px 12px;
    font-size: var(--fs-13);
  }
  .studio-home .team-invitation__offer {
    padding: 0 12px 14px;
  }
  /* HM6: one price per row, label and note left, numeral right. */
  .studio-home .team-invitation__plans {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    margin: 24px 0 26px;
  }
  .studio-home .team-invitation .plan-glance {
    grid-row: auto;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    grid-template-areas: 'label price' 'note note';
    column-gap: 16px;
    row-gap: 2px;
    align-items: baseline;
    padding-block: 14px;
  }
  .studio-home .team-invitation .plan-glance > span {
    grid-area: label;
  }
  .studio-home .team-invitation .plan-glance > strong {
    grid-area: price;
    font-size: 44px;
    text-align: right;
  }
  .studio-home .team-invitation .plan-glance > small {
    grid-area: note;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pearl-loop__video,
  .pearl-loop__control {
    display: none !important;
  }
}

/* Pearl fix batch · 2026-09-22 (finish-review findings). One block so the reasons stay
   next to the rules. Nothing here edits legal article bytes or pricing figures. */

/* Display fallback matched to Barlow Condensed Bold, so the swap from fallback to the
   webfont does not reflow headings (the hero wrapped to three lines in the old
   sans-serif fallback and moved ~57px on swap). size-adjust matches advance widths
   measured with fontTools over this site's headings; the overrides are Barlow's
   1.0/0.2em ascent/descent divided by that factor. Arial Narrow ships with macOS and
   Office; Liberation Sans Narrow is its metric twin on Linux. The caps face is tuned
   for the uppercase hero, whose letters run wider than mixed case. */
@font-face {
  font-family: 'Barlow Condensed Fallback';
  src:
    local('Arial Narrow Bold'), local('ArialNarrow-Bold'), local('Liberation Sans Narrow Bold'),
    local('LiberationSansNarrow-Bold');
  font-weight: 700;
  size-adjust: 91.3%;
  ascent-override: 109.5%;
  descent-override: 21.9%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Barlow Condensed Caps Fallback';
  src:
    local('Arial Narrow Bold'), local('ArialNarrow-Bold'), local('Liberation Sans Narrow Bold'),
    local('LiberationSansNarrow-Bold');
  font-weight: 700;
  size-adjust: 81.9%;
  ascent-override: 122.1%;
  descent-override: 24.4%;
  line-gap-override: 0%;
}
:root {
  --font-display: 'Barlow Condensed', 'Barlow Condensed Fallback', sans-serif;
  /* R2's column, shared by every route that loads this file. */
  --page: min(1280px, 100% - 80px);
  /* Round 5 (call 16): large screens get large stages. Media stages (never text) take
     this width; it is the column until 1680px, then grows to 1600px with 80px margins.
     Like --page, its percentage resolves against the stage's containing block, so a
     stage that uses it sits in a full-width section, not inside the 1280px column. */
  --stage-wide: var(--page);
}
@media (max-width: 760px) {
  :root {
    --page: calc(100% - 40px);
  }
}
@media (min-width: 1680px) {
  :root {
    --stage-wide: min(1600px, 100% - 160px);
  }
}
.sports-hero h1 {
  font-family: 'Barlow Condensed', 'Barlow Condensed Caps Fallback', sans-serif;
}

/* R1: one display weight everywhere, the authored film included, so no route ever
   requests the Black face (110KB saved on the homepage). */
.display,
.title {
  font-weight: 700;
}
.legal h1 {
  font-weight: 700;
}
.director-event__title > strong,
.director-fee-heading strong {
  font-weight: 700;
}

/* R2 on the legal routes and every footer: the header's column, text on its edge. The
   article keeps its 720px measure beside the document navigation. */
.legal-layout.wrap,
.foot .wrap {
  width: var(--page);
  max-width: none;
  margin-inline: auto;
  padding-inline: 0;
}
.legal-layout {
  grid-template-columns: 240px minmax(0, 720px);
  justify-content: start;
  column-gap: clamp(48px, 7vw, 120px);
}
@media (max-width: 1100px) {
  .legal-layout {
    grid-template-columns: 180px minmax(0, 1fr);
    column-gap: 40px;
  }
}
@media (max-width: 760px) {
  .legal-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  /* L2: the three document links wrap on a tight row. */
  .legal-nav {
    gap: 8px 20px;
  }
  /* L3: the summary inset starts at its own padding, not the heading's margin. */
  .legal__summary {
    padding-top: 24px;
  }
  .legal__summary > h2:first-child {
    margin-top: 0;
  }
}

/* Hero dock: the video control's slot is reserved wherever the footage may play, so
   the fictional-players label does not slide sideways when the control appears. */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  /* !important only to outrank styles.css's global [hidden] rule; still unfocusable
     and out of the accessibility tree while hidden. */
  .sports-hero__toggle[hidden] {
    display: inline-flex !important;
    visibility: hidden;
  }
}
/* Round 6 fix 1 (H4): the control is in the markup without `hidden`, so it is on screen and
   operable from first paint rather than after the reveal (WCAG 2.2.2's pause mechanism for
   the footage, the reveal and the rotating word). Without scripts nothing moves and under
   reduced motion nothing plays, so it is not drawn in either; soft-motion.js hides it (into
   the reserved slot above) once the poster is final (Save-Data, a slow link, a failed load). */
@media (scripting: none), (prefers-reduced-motion: reduce) {
  .sports-hero__toggle {
    display: none;
  }
}

/* Sideline loop control: the full name ("Pause sideline video") on wide screens; on
   phones the noun is visually hidden and the pill shrinks to its verb, so it no
   longer covers the photo's subject. The accessible name stays whole. */
.pearl-loop__control .pearl-loop__noun {
  white-space: pre;
}
@media (max-width: 760px) {
  .studio-home .pearl-loop__control:not(.icon-button) {
    gap: 8px;
    margin: 0 10px 10px 0;
    padding: 8px 13px 8px 11px;
  }
  .pearl-loop__control .pearl-loop__noun {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Manual preview: inactive scenario tabs read as faintly raised pearl controls, not
   ghosts, and clear the card's cast shadow. The selected tab keeps this family's
   convention (DESIGN.md): it rises further, to the full control shadow. */
.studio-home .try-trinity__demo .demo__scenarios {
  gap: 10px;
  padding-top: 20px;
}
.studio-home .try-trinity__demo .demo__scenario:not(.seg > *) {
  border: 1px solid light-dark(rgb(255 255 255 / 60%), var(--rim-dark));
  box-shadow:
    2px 2px 5px var(--soft-shadow),
    -2px -2px 5px var(--soft-light);
}
.studio-home .try-trinity__demo .demo__scenario[aria-pressed='true'] {
  color: var(--ink);
  box-shadow: var(--e-raised-sm);
}

/* App reel on the page column at every width (it used to outdent: 32px each side on
   desktop, 20px to the viewport edge on phones). */
.studio-home .app-reel {
  margin-inline: 0;
}
/* Payments on phones: crop the capture's empty tail, as the wide layout does. */
@media (max-width: 760px) {
  .app-reel__card--payments .app-reel__plane {
    aspect-ratio: 390 / 500;
  }
}

/* Film scenarios on phones: the scrolling chip row fades at its right edge instead of
   cutting a chip in half. */
@media (max-width: 760px) {
  .studio-home .director-scenarios:not(.seg) {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent);
  }
}

/* Expanded film: the disclosure line travels with it. */
.director-dialog__note {
  position: fixed;
  top: 12px;
  left: 22px;
  z-index: 10;
  display: flex;
  align-items: center;
  min-height: 38px;
  margin: 0;
  color: var(--ink-secondary);
  font-size: 13px;
  line-height: 1.4;
}
@media (max-width: 760px) {
  .director-dialog__note {
    position: static;
    min-height: 0;
    margin: 0 0 14px;
    font-size: var(--fs-13);
  }
}

/* ─── Round 1 shared components (DESIGN.md → components) ─────────────────────────
   Class names are the contract the homepage and secondary routes build against. */

/* Segmented control: an inset track; options are flat until chosen, and the chosen
   one is a raised pill in ink. Red never marks selection. */
.seg {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 4px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--e-inset-sm);
}
.seg > button,
.seg > a {
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 10px 18px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-secondary);
  font: 600 var(--fs-15) / var(--lh-ui) var(--font-body);
  text-align: center;
  text-decoration: none;
  box-shadow: none;
  transition:
    box-shadow var(--dur-ui) var(--ease-out),
    background-color var(--dur-ui) var(--ease-out);
}
.seg > button::after,
.seg > a::after {
  display: none;
}
.seg > [aria-pressed='true'],
.seg > [aria-current]:not([aria-current='false']),
.seg > [aria-selected='true'] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--e-raised-sm);
}
@media (hover: hover) {
  .seg
    > :is(button, a):not(
      [aria-pressed='true'],
      [aria-current='page'],
      [aria-current='true'],
      [aria-selected='true']
    ):hover {
    color: var(--ink);
    box-shadow:
      5px 5px 11px light-dark(rgb(199 201 196 / 60%), rgb(13 15 22 / 60%)),
      -5px -5px 11px light-dark(rgb(255 255 255 / 60%), rgb(42 47 64 / 60%));
  }
}
.seg > :is(button, a):active {
  box-shadow: var(--e-inset-sm);
}
/* One row that scrolls and snaps when it outgrows its column. */
.seg--scroll {
  display: flex;
  width: fit-content;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 4px;
  scrollbar-width: none;
}
.seg--scroll::-webkit-scrollbar {
  display: none;
}
.seg--scroll > * {
  flex: none;
  white-space: nowrap;
  scroll-snap-align: start;
}
@media (max-width: 420px) {
  .seg > button,
  .seg > a {
    padding-inline: 12px;
    font-size: var(--fs-13);
  }
}
/* An edge fades only while there is more that way: site.js sets --overflow-start while
   the row is scrolled from its start, and --overflow-end until its end is reached. A row
   that fits never fades. */
.seg--scroll.seg--overflow-end {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
}
.seg--scroll.seg--overflow-start {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px);
  mask-image: linear-gradient(90deg, transparent, #000 40px);
}
.seg--scroll.seg--overflow-start.seg--overflow-end {
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 40px,
    #000 calc(100% - 40px),
    transparent
  );
  mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}
/* Long and short labels: the short one shows at 760px and below, where the long one
   stays in the accessibility tree as visually hidden text (never removed). */
.seg__short {
  display: none;
}
@media (max-width: 760px) {
  .seg__long {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .seg__short {
    display: inline;
  }
}
.seg--stack {
  flex-direction: column;
  align-items: stretch;
  border-radius: var(--r-28);
}
.seg--stack > button,
.seg--stack > a {
  justify-content: flex-start;
  border-radius: calc(var(--r-28) - 4px);
  text-align: left;
}

/* Icon button: a 44px pearl circle carrying one Lucide glyph as a mask, with its
   name in visually hidden text. Same state machine as .button. */
.icon-button {
  --icon: url('/icons/x.svg');
  position: relative;
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  min-height: 0;
  padding: 0;
  border-radius: 50%;
  line-height: 0;
}
.icon-button::before {
  content: '';
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--icon) center / 18px 18px no-repeat;
  mask: var(--icon) center / 18px 18px no-repeat;
}
/* Anything but the glyph stays readable to assistive technology only. */
.icon-button > * {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.icon-button--prev {
  --icon: url('/icons/chevron-left.svg');
}
.icon-button--next {
  --icon: url('/icons/chevron-right.svg');
}
.icon-button--close {
  --icon: url('/icons/x.svg');
}
.icon-button--pause {
  --icon: url('/icons/pause.svg');
}
.icon-button--play {
  --icon: url('/icons/play.svg');
}
.icon-button--replay {
  --icon: url('/icons/rotate-ccw.svg');
}
.icon-button--copy {
  --icon: url('/icons/copy.svg');
}
.icon-button--expand {
  --icon: url('/icons/maximize-2.svg');
}
/* 36px to the eye, 44px to the finger. */
.icon-button--small {
  width: 36px;
  height: 36px;
}
.icon-button--small::before {
  width: 16px;
  height: 16px;
  -webkit-mask-size: 16px 16px;
  mask-size: 16px 16px;
}
.icon-button--small::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
}
/* Over imagery the white upper-left highlight would read as a glow: take the dark float. */
.icon-button--on-dark {
  --ctl-rest: var(--e-float-dark);
  --ctl-hover:
    0 26px 44px -14px rgb(6 8 7 / 58%), 0 4px 10px rgb(6 8 7 / 16%), inset 0 1px 0 var(--soft-light);
  border-color: light-dark(rgb(255 255 255 / 75%), var(--rim-dark));
}
/* A loop's control shows what pressing it will do: pause while playing, play when
   paused or refused, replay once it has come to rest. */
.pearl-loop__control.icon-button {
  --icon: url('/icons/pause.svg');
}
.pearl-loop__control.icon-button:is([data-loop-state='paused'], [data-loop-state='blocked']) {
  --icon: url('/icons/play.svg');
}
.pearl-loop__control.icon-button:is([data-loop-state='ended'], [data-loop-state='finished']) {
  --icon: url('/icons/rotate-ccw.svg');
}

/* Offer flag ("Founder offer" on /pricing/ and /early-team/). The truth-tag pills it was
   drawn with were removed sitewide (owner directive 2026-10-19); it keeps their recessed
   pearl pill, without the info mark; 13px on every width. */
.offer-flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 6px 12px 6px 10px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--e-inset-sm);
  color: light-dark(#585e59, #a8abba);
  font: 600 var(--fs-13) / var(--lh-ui) var(--font-body);
  letter-spacing: 0;
  text-transform: none;
  /* One line (round 4). text-wrap-mode is set with it, so no text-wrap shorthand later in
     the cascade (text-wrap: balance resets the mode to wrap) can turn wrapping back on. */
  white-space: nowrap;
  text-wrap-mode: nowrap;
}

/* The line under every mailto action. site.js adds a copy button on fine pointers. */
.mailto-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 6px;
  margin: var(--space-hint) 0 0;
  color: light-dark(#585e59, #a8abba);
  font: 400 var(--fs-13) / var(--lh-ui) var(--font-body);
}
.mailto-note a {
  color: var(--ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}
.copy-address {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.copy-status {
  white-space: normal;
  color: var(--ink);
  font: 600 var(--fs-13) / var(--lh-ui) var(--font-body);
}

/* ─── Focus, anchors, text links ───────────────────────────────────────────────────
   The ring itself (3px ink, 3px offset) is styles.css's :focus-visible. */
/* Rings wrap text links, nav links, tabs and summaries as a soft pill. */
.top__link:focus-visible,
.text-link:focus-visible,
.foot__links a:focus-visible,
.foot__bottom a:focus-visible,
.mailto-note a:focus-visible,
:where(p, li, dd, td, small) > a:not(.button):focus-visible,
[role='tab']:focus-visible,
summary:focus-visible {
  border-radius: var(--r-16);
}
/* Over footage the charcoal ring would disappear; docks are pearl again. */
:is(.field-window, .sports-hero) :focus-visible {
  outline-color: #fff;
}
:is(.field-window__dock, .sports-hero__dock) :focus-visible {
  outline-color: var(--ink);
}
/* Anchored sections land below the sticky capsule; focused controls get the same
   clearance. (styles.css no longer sets a scroll-padding that would add to it.) */
:where(main [id], main :focus) {
  scroll-margin-top: 104px;
}

/* ─── Display type (round 2) ───────────────────────────────────────────────────────
   One triple per role (size, leading, tracking; :root above). The shared selectors the
   routes already use read the same triples as the utilities, so a 96px h1 or a 64px h2
   computes identically on every route. Routes set no local leading or tracking on a
   display heading. */
.t-statement,
.t-h1,
.t-h2,
.t-card,
.pages-title,
.pages-section-title,
.chapter-head h2,
.legal h1,
.link-fallback__title {
  font-family: var(--font-display);
  font-weight: 700;
  text-wrap: balance;
}
.pages-title,
.display.pages-title,
.not-found .pages-title,
.legal h1,
.link-fallback__title {
  font-size: var(--d-h1);
  line-height: var(--d-h1-lh);
  letter-spacing: var(--d-h1-ls);
}
.pages-section-title,
.support-questions .pages-section-title,
.chapter-head h2 {
  font-size: var(--d-h2);
  line-height: var(--d-h2-lh);
  letter-spacing: var(--d-h2-ls);
}
/* The utilities carry :root so they outrank the shared selectors above (.chapter-head h2
   is one class and one element): an h2 marked .t-statement is a statement. */
:root .t-statement {
  font-size: var(--d-statement);
  line-height: var(--d-statement-lh);
  letter-spacing: var(--d-statement-ls);
}
:root .t-h1 {
  font-size: var(--d-h1);
  line-height: var(--d-h1-lh);
  letter-spacing: var(--d-h1-ls);
}
:root .t-h2 {
  font-size: var(--d-h2);
  line-height: var(--d-h2-lh);
  letter-spacing: var(--d-h2-ls);
}
:root .t-card {
  font-size: var(--d-card);
  line-height: var(--d-card-lh);
  letter-spacing: var(--d-card-ls);
}

/* ─── Footer on every route ──────────────────────────────────────────────────────── */
.foot,
.site-home .foot {
  padding: clamp(72px, 8vw, 112px) 0 28px;
  border-top: 0;
  background: var(--surface);
}
.foot .foot__main {
  align-items: end;
}
/* The closing bookend: the hero's line again, in ink, at card-title size (the owner found the
   64px sign-off too large, 2026-10-19). */
.foot__signoff {
  max-width: none;
  margin: 20px 0 0;
  color: var(--ink);
  font: 700 var(--d-card) / var(--d-card-lh) var(--font-display);
  letter-spacing: -0.005em;
  text-transform: uppercase;
  text-wrap: balance;
}
.foot .foot__links {
  gap: 10px 28px;
}
.foot .foot__links a {
  padding-block: 6px;
  color: var(--ink);
  font-size: var(--fs-15);
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 2px) / 0 2px no-repeat;
  transition: background-size var(--dur-ui) var(--ease-out);
}
.foot .foot__links a:hover,
.foot .foot__links a:focus-visible {
  text-decoration: none;
  background-size: 100% 2px;
}
.foot .foot__bottom {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  color: var(--ink-secondary);
  font-size: var(--fs-13);
}
@media (max-width: 760px) {
  .foot .foot__main {
    align-items: start;
  }
  /* Three columns of links on every route, the legal pages included. */
  .foot .foot__links {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: start;
    gap: 4px 28px;
  }
  .foot .foot__links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 0;
    background-position: 0 calc(100% - 10px);
  }
  .foot .foot__bottom {
    margin-top: 24px;
  }
}

/* ─── Round 2 system (2026-09-23) ──────────────────────────────────────────────────
   DESIGN.md → round 2. Buttons, wrapping, the hero's dock and control, the header
   hand-off and action, the phone action dock and the menu scrim. */

/* Buttons: paired buttons share one height, the group's size. */
:is(.actions, .button-row, .demo__controls, .closing__actions, .plan-action) .button {
  height: var(--btn-md);
}
.sports-hero__actions .button {
  height: var(--btn-lg);
}

/* Wrapping: running text avoids a lone last word; headings and short lines balance. */
p,
li,
figcaption,
dd {
  text-wrap: pretty;
}
h1,
h2,
h3,
h4,
.sports-hero__availability {
  text-wrap: balance;
}
/* Two lines: "Opens your email app" over the address (and its copy button). The copy
   status drops in under the note, so it never reflows a card. */
.mailto-note {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  row-gap: 2px;
}
.mailto-note > span:not(.copy-address, .copy-status) {
  flex-basis: 100%;
}
.mailto-note .copy-status {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
}

/* Round 6 fix 1 (H5): soft-motion.js measured that the shown form does not fit beside the
   control (a larger text size, "Resume video"): the short form at any width, with the long
   one kept as visually hidden text as .seg__long is below 760px; 'wrap' lets the short form
   take a second line when even it cannot sit on one. */
.sports-hero__dock[data-label-fit] .sports-hero__label .seg__long {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.sports-hero__dock[data-label-fit] .sports-hero__label .seg__short {
  display: inline;
}
/* The video control: its glyph follows state (pause while playing, play otherwise). */
.sports-hero__toggle:has(.sports-hero__toggle-icon)::before {
  content: none;
}
.sports-hero__toggle-icon {
  flex: none;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url('/icons/pause.svg') center / 16px 16px no-repeat;
  mask: url('/icons/pause.svg') center / 16px 16px no-repeat;
}
.sports-hero[data-video-state='paused'] .sports-hero__toggle-icon {
  -webkit-mask-image: url('/icons/play.svg');
  mask-image: url('/icons/play.svg');
}
/* 420px and below: a 44px round icon button; the words stay its accessible name. */
@media (max-width: 420px) {
  .sports-hero__toggle:has(.sports-hero__toggle-text) {
    justify-content: center;
    width: 44px;
    height: 44px;
    min-height: 0;
    padding: 0;
    border-radius: 50%;
  }
  .sports-hero__toggle-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
@media (max-width: 360px) {
  .sports-hero__dock {
    gap: 8px;
    padding-left: 12px;
  }
}
/* The header hand-off: as the dock nears the stuck capsule, its content fades
   (--dock-fade, 1 at 48px to 0 at touching, set by site.js on the scroll frame). The
   capsule itself never fades. */
.sports-hero__dock > * {
  opacity: var(--dock-fade, 1);
}

/* A pearl header action (invite and link fallbacks): raised pearl at the capsule's size. */
.top .top__nav > .button:not(.button--primary) {
  min-height: var(--btn-sm);
  padding: 10px 20px;
}

/* Pearl controls over footage step up to a lighter pearl as they lift. */
@media (hover: hover) {
  .studio-home .sports-hero .sports-hero__secondary:hover,
  .field-window .button:not(.button--primary):hover {
    background: var(--surface-lift);
  }
}

/* Phone action dock (homepage, 760px and below, JavaScript only): the offer and one red
   action, floating over the page once the hero has gone, and hidden while the closing
   offer, #trinity or the footer is on screen (round 3: nothing is reserved under the
   footer any more, because the dock is never over it). */
.action-dock {
  display: none;
}
/* Round 6 fix 2 (S2, WCAG 2.4.11): while the dock is shown, the lower scroll edge is
   padded by its height, its 12px inset and 16px of air, so a control that focus scrolls
   into view lands above the dock rather than under it. Only while shown (integrate-3): on
   every page load the hero's own motion control sits in that bottom 84px with the dock
   hidden, and a standing pad made keyboard focus on it scroll the page 422px. */
@media (max-width: 760px) {
  html.has-action-dock:has(.action-dock[data-shown]) {
    scroll-padding-bottom: calc(84px + env(safe-area-inset-bottom));
  }
}
@media (max-width: 760px) {
  .action-dock {
    position: fixed;
    right: 10px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    left: 10px;
    z-index: 18;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 56px;
    padding: 0 6px 0 22px;
    border: 1px solid light-dark(rgb(255 255 255 / 75%), var(--rim-dark));
    border-radius: var(--r-pill);
    background: var(--surface);
    box-shadow: var(--e-float-dark);
    transform: translateY(calc(100% + 24px + env(safe-area-inset-bottom)));
    transition: transform 220ms var(--ease-out);
  }
  .action-dock[data-shown] {
    transform: none;
  }
  .action-dock__offer {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    margin: 0;
    color: var(--ink);
    font: 400 var(--fs-15) / var(--lh-ui) var(--font-body);
    white-space: nowrap;
  }
  .action-dock__offer b {
    font-weight: 600;
  }
  .action-dock__offer span {
    color: var(--ink-secondary);
    font-variant-numeric: tabular-nums;
  }
  .action-dock .action-dock__ask {
    flex: none;
    height: var(--btn-sm);
    min-height: var(--btn-sm);
    padding: 0 24px;
  }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .action-dock {
    opacity: 0;
    transform: none;
    transition: opacity 220ms var(--ease-out);
  }
  .action-dock[data-shown] {
    opacity: 1;
  }
}

/* Menu scrim: while the phone menu is open the page behind it frosts, so the panel
   reads as the only thing to act on. A tap on it closes the menu (site.js). */
.menu-scrim {
  position: fixed;
  inset: 0;
  z-index: 19;
  background: light-dark(rgb(232 233 229 / 72%), rgb(26 29 40 / 72%));
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity var(--dur-ui) var(--ease-out);
}
.menu-scrim[data-shown] {
  opacity: 1;
}
@supports not ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
  .menu-scrim {
    background: light-dark(rgb(232 233 229 / 92%), rgb(26 29 40 / 92%));
  }
}
@media (prefers-reduced-transparency: reduce) {
  .menu-scrim {
    background: light-dark(rgb(232 233 229 / 92%), rgb(26 29 40 / 92%));
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ─── Round 3 system (2026-09-23) ──────────────────────────────────────────────────
   DESIGN.md → round 3: one grid, one red, the Trinity signature, the header's quiet
   action and hand-off, the phone menu, the seg thumb, presses, and the hero's load
   moment. Lanes A and C build against these class names. */

/* One grid. 12 columns on the page column, 32px gutters (20px at 760px and below). Routes
   place children with grid-column in their own CSS; a block that starts at column 7
   carries data-grid-col="7", which scripts/check-grid.py holds to x=736 at 1440 and
   x=976 at 1920 (column left + 6 × (column + gutter), ±1px). */
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
}

/* Wrapping. Centred ledes and short centred lines balance; left-aligned ledes avoid a
   lone last word and hold a 60ch measure (zero specificity, so a route's own measure
   wins). */
.chapter-head--center .chapter-lede,
.closing__line,
.link-fallback__title {
  text-wrap: balance;
}
:where(.chapter-lede, .pages-lede) {
  max-width: 60ch;
  text-wrap: pretty;
}

/* 44px targets for standalone text links: 24px of padding, taken back by the margin, so
   the hit area grows and the line box does not. */
.hit-44,
.mailto-note a {
  display: inline-block;
  padding-block: 12px;
  margin-block: -12px;
}
@media (min-width: 761px) {
  .foot .foot__links a {
    display: inline-block;
    padding-block: 12px;
    margin-block: -12px;
    /* The hover underline stays 4px under the text inside the taller box. */
    background-position: 0 calc(100% - 8px);
  }
}
.foot .foot__bottom a {
  display: inline-block;
  padding-block: 12px;
  margin-block: -12px;
}
/* The footer logo link: 44px tall, the logo centred in it. */
.foot a:has(.foot__logo) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* ─── Trinity signature ────────────────────────────────────────────────────────────
   The app's own launcher identity (§6.4, AI-28): the approved coloured 3 beside the
   "Trinity" wordmark painted with §6.4's palindrome ramp. Markup:
   <span class="trinity-sig trinity-sig--md" role="img" aria-label="Trinity"><img alt=""
   class="trinity-sig__three" height="323" src="/teamon3-logo-3.svg" width="224" /><span
   aria-hidden="true" class="trinity-sig__word">Trinity</span></span>
   The ramp's stops are docs/ui/lib/canvas-trinity.css's --trinity-wordmark-gradient,
   verbatim; the angle is §6.4's 20° lean (110deg; the board draws it flat, a gap it
   records). It carries six mirrored cycles, so background-size 1200% makes one period
   twice the word's width, as packages/ui's TRINITY_TICKER_PERIOD_SCALE (2) does: about
   half a cycle, one warm-to-cool sweep, is on the letters at any instant. Nothing is
   drawn outside the letters: no glow, outline or pulse. */
.trinity-sig {
  --brand-orange: #ff7c2a;
  --brand-primary: #ff2a43;
  --brand-purple: #742aff;
  --trinity-wordmark-gradient: linear-gradient(
    110deg,
    var(--brand-orange) 0%,
    var(--brand-primary) 3.1667%,
    color-mix(in srgb, var(--brand-primary) 58%, var(--brand-purple)) 6%,
    var(--brand-purple) 8.3333%,
    color-mix(in srgb, var(--brand-primary) 58%, var(--brand-purple)) 10.6667%,
    var(--brand-primary) 13.5%,
    var(--brand-orange) 16.6667%,
    var(--brand-primary) 19.8333%,
    color-mix(in srgb, var(--brand-primary) 58%, var(--brand-purple)) 22.6667%,
    var(--brand-purple) 25%,
    color-mix(in srgb, var(--brand-primary) 58%, var(--brand-purple)) 27.3333%,
    var(--brand-primary) 30.1667%,
    var(--brand-orange) 33.3333%,
    var(--brand-primary) 36.5%,
    color-mix(in srgb, var(--brand-primary) 58%, var(--brand-purple)) 39.3333%,
    var(--brand-purple) 41.6667%,
    color-mix(in srgb, var(--brand-primary) 58%, var(--brand-purple)) 44%,
    var(--brand-primary) 46.8333%,
    var(--brand-orange) 50%,
    var(--brand-primary) 53.1667%,
    color-mix(in srgb, var(--brand-primary) 58%, var(--brand-purple)) 56%,
    var(--brand-purple) 58.3333%,
    color-mix(in srgb, var(--brand-primary) 58%, var(--brand-purple)) 60.6667%,
    var(--brand-primary) 63.5%,
    var(--brand-orange) 66.6667%,
    var(--brand-primary) 69.8333%,
    color-mix(in srgb, var(--brand-primary) 58%, var(--brand-purple)) 72.6667%,
    var(--brand-purple) 75%,
    color-mix(in srgb, var(--brand-primary) 58%, var(--brand-purple)) 77.3333%,
    var(--brand-primary) 80.1667%,
    var(--brand-orange) 83.3333%,
    var(--brand-primary) 86.5%,
    color-mix(in srgb, var(--brand-primary) 58%, var(--brand-purple)) 89.3333%,
    var(--brand-purple) 91.6667%,
    color-mix(in srgb, var(--brand-primary) 58%, var(--brand-purple)) 94%,
    var(--brand-primary) 96.8333%,
    var(--brand-orange) 100%
  );
  display: inline-flex;
  align-items: center;
  gap: 0.28em;
  font-size: 28px;
  line-height: 1;
  vertical-align: middle;
}
.trinity-sig--sm {
  font-size: 16px;
}
.trinity-sig--md {
  font-size: 28px;
}
.trinity-sig--lg {
  font-size: 44px;
}
/* Leading 1.2 holds Barlow's full ascent and descent (1.0 + 0.2em), so the painted box
   covers every glyph (the y's tail included) and its height is known: 1.2em. */
.trinity-sig__word {
  display: inline-block;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font: 700 1em / 1.2 var(--font-display);
  letter-spacing: 0.01em;
  white-space: nowrap;
  /* 9.0909% is the rest phase, half a period (packages/ui's TRINITY_TICKER_REST). */
  background: var(--trinity-wordmark-gradient) 9.0909% 50% / 1200% 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .trinity-sig__word {
    color: var(--ink);
    -webkit-text-fill-color: var(--ink);
    background: none;
  }
}
/* The flow: one period per 4.5s, one direction, at constant speed (easing would stutter
   at the seam). A period is 2 × the word's width along the row; because the ramp leans,
   a level step of one period advances it by less than one, so the step adds the lean's
   share of the box height: H·cot(70°)/6 = 1.2em × 0.0607 = 0.0728em. The 18.1818% is
   2W over the (W − 12W) positioning range. The animation is always attached and paused;
   [data-trinity-flow="on"] (the film playing, the preview in Review) runs it, so the
   ramp freezes where it is instead of snapping back when the flow stops. */
@keyframes trinity-flow {
  from {
    background-position: 9.0909% 50%;
  }
  to {
    background-position: calc(27.2727% - 0.0728em) 50%;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .trinity-sig__word {
    animation: trinity-flow 4.5s linear infinite paused;
  }
  [data-trinity-flow='on'] .trinity-sig__word {
    animation-play-state: running;
  }
}
@media (forced-colors: active) {
  .trinity-sig__word {
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
    background: none;
    animation: none;
  }
}

/* ─── One red per viewport ─────────────────────────────────────────────────────────
   site.js sets data-header-action="quiet" on .top while any other visible red primary is
   at least half inside the viewport below the capsule; the header's action then renders
   as the raised pearl button (same metrics, ink text, a 180ms crossfade). The legal
   routes are for reading: their header action is always pearl. Above 760px only: the
   phone menu's red offer is its own surface and stays red. */
@media (min-width: 761px) {
  .top .top__nav .button--primary {
    transition:
      transform var(--dur-ui) var(--ease-out),
      box-shadow var(--dur-ui) var(--ease-out),
      background-color var(--dur-ui) var(--ease-out),
      border-color var(--dur-ui) var(--ease-out),
      color var(--dur-ui) var(--ease-out);
  }
  .top[data-header-action='quiet'] .top__nav .button--primary,
  .header-action-pending .top .top__nav .button--primary,
  .legal-page .top .top__nav .button--primary {
    --ctl-rest: var(--e-raised-sm);
    --ctl-hover: var(--e-raised-lg);
    --ctl-press: var(--e-inset-sm);
    border-color: light-dark(rgb(255 255 255 / 70%), var(--rim-dark));
    background-color: var(--surface);
    color: var(--ink);
  }
  /* Before site.js decides (menu-early.js's first-paint mark), pearl without a fade. */
  .header-action-pending .top .top__nav .button--primary {
    transition: none;
  }
}

/* The phone action dock's visible label is "Email us" (its accessible name stays "Ask
   about Early Team by email"); a 44px pill at the dock's right. */
@media (max-width: 760px) {
  .action-dock .action-dock__ask {
    min-width: 44px;
    padding-inline: 20px;
  }
}

/* ─── Phone menu choreography ──────────────────────────────────────────────────────
   Links in Barlow Condensed 700 caps, 56px rows; the current page underlined 2px in ink.
   Open: the panel fades and settles 8px (200ms), then each link rises 8px into place
   (240ms, 30ms apart), the red offer last. Close: the panel fades (160ms; site.js holds
   it as .is-closing meanwhile). Reduced motion: opacity only, no stagger. */
@media (max-width: 760px) {
  .has-menu .top .top__nav.is-open .top__link {
    min-height: 56px;
    color: var(--ink);
    font: 700 clamp(36px, 11vw, 44px) / 1.05 var(--font-display);
    letter-spacing: 0;
    text-transform: uppercase;
  }
  .has-menu .top .top__nav.is-open .top__link[aria-current='page'] {
    text-decoration: underline 2px var(--ink);
    text-underline-offset: 6px;
  }
  .has-menu .top .top__nav.is-open {
    animation: menu-panel-in 200ms var(--ease-out) both;
  }
  .has-menu .top .top__nav.is-open > * {
    animation: menu-link-in 240ms var(--ease-out) backwards;
  }
  .has-menu .top .top__nav.is-open > :nth-child(2) {
    animation-delay: 30ms;
  }
  .has-menu .top .top__nav.is-open > :nth-child(3) {
    animation-delay: 60ms;
  }
  .has-menu .top .top__nav.is-open > :nth-child(4) {
    animation-delay: 90ms;
  }
  .has-menu .top .top__nav.is-open > :nth-child(5) {
    animation-delay: 120ms;
  }
  .has-menu .top .top__nav.is-open > :nth-child(6) {
    animation-delay: 150ms;
  }
  .has-menu .top .top__nav.is-open > :nth-child(7) {
    animation-delay: 180ms;
  }
  .has-menu .top .top__nav.is-open > :nth-child(8) {
    animation-delay: 210ms;
  }
  .has-menu .top .top__nav.is-open.is-closing {
    pointer-events: none;
    animation: menu-panel-out 160ms var(--ease-out) both;
  }
  .has-menu .top .top__nav.is-open.is-closing > * {
    animation: none;
  }
}
/* Reduced motion keeps the fades (opacity only, nothing travels). They outrank
   styles.css's blanket animation: none !important on purpose, and only here. */
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .has-menu .top .top__nav.is-open {
    animation: menu-fade-in 200ms var(--ease-out) both !important;
  }
  .has-menu .top .top__nav.is-open.is-closing {
    animation: menu-panel-out 160ms var(--ease-out) both !important;
  }
  .has-menu .top .top__nav.is-open > * {
    animation: none;
  }
}
@keyframes menu-panel-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}
@keyframes menu-link-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
@keyframes menu-panel-out {
  to {
    opacity: 0;
  }
}
@keyframes menu-fade-in {
  from {
    opacity: 0;
  }
}

/* ─── Folded header (round 6 fix 2, S3) ────────────────────────────────────────────
   Above 760px a header row that does not fit its capsule (larger text, a longer action)
   folds into the phone menu: menu-early.js measures the row and sets data-nav-fold on
   .top, and site.js runs the toggle, panel, scrim and focus wrap exactly as on phones.
   The panel is the phone panel at a fixed display size; its red offer stays red (the
   one-red rule's quiet pearl is for the row, and the scrim hides everything else). */
@media (min-width: 761px) {
  .has-menu .top[data-nav-fold] .top__menu {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
  }
  .has-menu .top[data-nav-fold] .top__nav {
    display: none;
  }
  .has-menu .top[data-nav-fold] .top__nav.is-open {
    position: absolute;
    top: calc(100% + 9px);
    inset-inline: -1px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 16px 24px 24px;
    border: 1px solid light-dark(rgb(255 255 255 / 75%), var(--rim-dark));
    border-radius: var(--r-28);
    background: var(--surface);
    box-shadow: var(--e-raised-lg);
    animation: menu-panel-in 200ms var(--ease-out) both;
  }
  .has-menu .studio-home .top[data-nav-fold]:not([data-header-scrim]) .top__nav.is-open {
    box-shadow: var(--e-float-dark);
  }
  .has-menu .top[data-nav-fold] .top__nav.is-open .top__link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 56px;
    margin-inline: -12px;
    padding: 0 12px;
    border: 0;
    border-radius: var(--r-16);
    background: none;
    color: var(--ink);
    font: 700 44px / 1.05 var(--font-display);
    letter-spacing: 0;
    text-transform: uppercase;
    white-space: normal;
  }
  .has-menu .top[data-nav-fold] .top__nav.is-open .top__link[aria-current='page'] {
    text-decoration: underline 2px var(--ink);
    text-underline-offset: 6px;
  }
  .has-menu .top[data-nav-fold] .top__nav.is-open .button {
    display: inline-flex;
    width: 100%;
    margin-top: 16px;
    white-space: normal;
  }
  .has-menu .top[data-nav-fold] .top__nav.is-open .button--primary {
    --ctl-rest: var(--e-raised-sm), inset 0 1px 1px rgb(255 255 255 / 40%);
    --ctl-hover: var(--e-raised-lg), inset 0 1px 1px rgb(255 255 255 / 40%);
    --ctl-press: var(--e-press-red);
    border-color: rgb(255 255 255 / 35%);
    background-color: var(--brand);
    color: #fff;
  }
  .has-menu .top[data-nav-fold] .top__nav.is-open > * {
    animation: menu-link-in 240ms var(--ease-out) backwards;
  }
  .has-menu .top[data-nav-fold] .top__nav.is-open.is-closing {
    pointer-events: none;
    animation: menu-panel-out 160ms var(--ease-out) both;
  }
  .has-menu .top[data-nav-fold] .top__nav.is-open.is-closing > * {
    animation: none;
  }
}
@media (min-width: 761px) and (hover: hover) {
  .has-menu .top[data-nav-fold] .top__nav.is-open .top__link:hover {
    box-shadow: var(--e-raised-sm);
  }
}
@media (min-width: 761px) and (prefers-reduced-motion: reduce) {
  .has-menu .top[data-nav-fold] .top__nav.is-open {
    animation: menu-fade-in 200ms var(--ease-out) both !important;
  }
  .has-menu .top[data-nav-fold] .top__nav.is-open.is-closing {
    animation: menu-panel-out 160ms var(--ease-out) both !important;
  }
  .has-menu .top[data-nav-fold] .top__nav.is-open > * {
    animation: none;
  }
}

/* ─── Segmented control thumb ──────────────────────────────────────────────────────
   site.js puts one .seg__thumb in every .seg[role=group] and sets --thumb-x/-y/-w/-h
   from the pressed option; the raised pearl pill then slides between options (240ms)
   and the pressed option itself drops its own raise. Without JavaScript nothing is
   injected, and the pressed option keeps its own raised pill. */
.seg.seg--thumbed {
  position: relative;
  isolation: isolate;
}
.seg__thumb {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: var(--thumb-w, 0px);
  height: var(--thumb-h, 0px);
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--e-raised-sm);
  opacity: 0;
  transform: translate(var(--thumb-x, 0px), var(--thumb-y, 0px));
  pointer-events: none;
}
.seg--stack > .seg__thumb {
  border-radius: calc(var(--r-28) - 4px);
}
.seg[data-thumb='on'] > .seg__thumb {
  opacity: 1;
}
.seg[data-thumb-live] > .seg__thumb {
  transition:
    transform 240ms var(--ease-out),
    width 240ms var(--ease-out),
    height 240ms var(--ease-out);
}
:root .seg.seg--thumbed[role='group'] > :is(button, a) {
  position: relative;
  z-index: 1;
}
:root .seg.seg--thumbed[data-thumb='on'][role='group'] > :is(button, a)[aria-pressed='true'] {
  background: transparent;
  box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
  .seg[data-thumb-live] > .seg__thumb {
    transition: none;
  }
}

/* ─── Presses ──────────────────────────────────────────────────────────────────────
   A press sinks into the surface in 90ms; release eases out over the usual 180ms. Red
   keeps its own red inner shade (--ctl-press on .button--primary). */
.button:active,
.top .top__menu:active,
.icon-button:active,
.sports-hero__toggle:active {
  transition-duration: 90ms;
}
.seg > :is(button, a):active {
  box-shadow: var(--e-inset-sm);
  transition-duration: 90ms;
}

/* ─── Hero: the load moment, small phones ────────────────────────────────────────
   Round 6: the h1 is the welcome masthead (rules at the end of this file), so the round-3
   line unmask is retired. menu-early.js still adds .hero-intro to <html> before first paint
   when motion is allowed, and site.js removes it at 1600ms: the masthead waits for the
   wordmark reveal to land (welcome-logo.js), while the actions and the availability line rise
   8px into view (420ms from 120ms, 60ms apart; no lede since 2026-10-19). Round 6 fix 1 (H4): the dock's content no
   longer waits (it rose 320ms from 700ms, and read as missing for ~2.5s on a slow link): the
   footage disclosure and the pause control are there from first paint. Only transform and
   opacity move, so the poster stays the LCP element and nothing shifts layout; without
   JavaScript or with reduced motion the class never arrives and nothing is hidden. */
@media (prefers-reduced-motion: no-preference) {
  .hero-intro .sports-hero .sports-hero__actions,
  .hero-intro .sports-hero .sports-hero__availability {
    animation: hero-rise-in 420ms var(--ease-out) 120ms backwards;
  }
  .hero-intro .sports-hero .sports-hero__availability {
    animation-delay: 180ms;
  }
}
@keyframes hero-rise-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
/* (Round 4: the 360px hero rules moved into the phone block above.) */

/* ─── Round 4 contract (2026-09-23) ────────────────────────────────────────────────
   DESIGN.md → round 4. One type scale, one radius scale, the chapter-head pattern, the
   window inset, truth-tag placements, the on-dark segmented control, icon discs, the
   one text-link hover and the disclosure row. Lanes A and C build against these names;
   scripts/check-tokens.py and scripts/check-truth-tags.py hold the results. */

/* Text: four sizes, two leadings. A size utility sets the UI leading; .t-prose (after
   them, so it wins) switches running text to the prose leading. :root lifts them over a
   route's single-class rules. */
:root .t-13 {
  font-size: var(--fs-13);
  line-height: var(--lh-ui);
}
:root .t-15 {
  font-size: var(--fs-15);
  line-height: var(--lh-ui);
}
:root .t-17 {
  font-size: var(--fs-17);
  line-height: var(--lh-ui);
}
:root .t-20 {
  font-size: var(--fs-20);
  line-height: var(--lh-ui);
}
:root .t-prose {
  line-height: var(--lh-prose);
}

/* The marker voice: Barlow Condensed 700 at 13px, spaced caps in secondary ink. Round 5
   (call 6) retires it as a chapter eyebrow: no chapter head carries one, and its 24px
   hairline is gone everywhere. It survives as the sport tiles' label voice. */
.t-marker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  color: var(--ink-secondary);
  font: 700 var(--fs-13) / var(--lh-ui) var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-wrap: balance;
}
:is(button, a, span).t-marker {
  display: inline-flex;
  margin: 0;
}

/* The chapter head: marker on its own row, the H2 in columns 1–6, the lede on column 7,
   top-aligned so the lede's first cap top sits on the H2's cap top (±4px, the grid gate).
   A line box's cap top is ((leading + ascent − descent) / 2 − cap height) × size. Barlow
   Condensed: 1.0 / 0.2 / 0.7, so leading / 2 − 0.3. The system text face, measured in
   Chrome on macOS: 0.97 / 0.21 / 0.705, so leading / 2 − 0.3246. The offset is the H2's
   cap top less the lede's, per display token, never negative. */
.chapter-head {
  --head-fs: var(--d-h2);
  --head-lh: var(--d-h2-lh);
  --lede-fs: var(--fs-20);
  --lede-lh: var(--lh-prose);
  --lede-cap-offset: max(
    0px,
    calc(
      var(--head-fs) * (var(--head-lh) / 2 - 0.3) - var(--lede-fs) * (var(--lede-lh) / 2 - 0.3246)
    )
  );
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  align-items: start;
}
.chapter-head:has(> .t-statement) {
  --head-fs: var(--d-statement);
  --head-lh: var(--d-statement-lh);
}
.chapter-head:has(> .t-h1) {
  --head-fs: var(--d-h1);
  --head-lh: var(--d-h1-lh);
}
.chapter-head > * {
  grid-column: 1 / -1;
}
:root .chapter-head > h2 {
  grid-column: 1 / 7;
  margin: 0;
  text-align: left;
}
:root .chapter-head > [data-grid-col='7'] {
  grid-column: 7 / -1;
  margin: 0;
  padding-top: var(--lede-cap-offset);
  text-align: left;
}
:root .chapter-head > p[data-grid-col='7'] {
  max-width: none;
  font-size: var(--lede-fs);
  line-height: var(--lede-lh);
}
@media (max-width: 760px) {
  .chapter-head {
    --lede-fs: var(--fs-17);
  }
  :root .chapter-head > h2,
  :root .chapter-head > [data-grid-col='7'] {
    grid-column: 1 / -1;
  }
  :root .chapter-head > [data-grid-col='7'] {
    max-width: 60ch;
    margin-top: 16px;
    padding-top: 0;
  }
}

/* Round 5 (call 6): three chapter-head patterns, and none carries an eyebrow.
   1. The default above: H2 in columns 1–6, the lede on column 7, cap tops level.
   2. .chapter-head--center, the statement (Trinity): one centred column across 2–11, every
      child centred and balanced, the lede held to 56ch under the H2.
   3. .chapter-head--wide (Families): the H2 across the whole column; a following
      .chapter-lede sits under it in columns 1–6 (full width from 761px to 1023px).
   At 760px and below all three are the default phone head: left-aligned, full width, the
   lede 16px under the H2 at 17px. */
/* (No :root here, so the centred and wide rules below outrank it.) */
.chapter-head > h2 + .chapter-lede:where(:not([data-grid-col])) {
  margin: 24px 0 0;
  padding-top: 0;
  font-size: var(--lede-fs);
  line-height: var(--lede-lh);
}
@media (min-width: 761px) {
  :root .chapter-head.chapter-head--center > * {
    grid-column: 2 / 12;
    justify-self: center;
    max-width: 100%;
    margin: 0;
    padding-top: 0;
    text-align: center;
    text-wrap: balance;
  }
  :root .chapter-head.chapter-head--center > * + * {
    margin-top: 24px;
  }
  :root .chapter-head.chapter-head--center > :is(.chapter-lede, [data-grid-col='7']) {
    max-width: 56ch;
    margin-inline: auto;
    font-size: var(--lede-fs);
    line-height: var(--lede-lh);
  }
  :root .chapter-head.chapter-head--wide > h2 {
    grid-column: 1 / -1;
  }
  :root .chapter-head.chapter-head--wide > h2 + .chapter-lede {
    grid-column: 1 / -1;
    max-width: 60ch;
    margin: 24px 0 0;
    padding-top: 0;
  }
}
@media (min-width: 1024px) {
  :root .chapter-head.chapter-head--wide > h2 + .chapter-lede {
    grid-column: 1 / 7;
    max-width: none;
  }
}
@media (max-width: 760px) {
  .chapter-head > h2 + .chapter-lede:where(:not([data-grid-col])) {
    max-width: 60ch;
    margin-top: 16px;
  }
}

/* Wrapping (round 4): headings and the marker balance; running text avoids a lone word. */
h1,
h2,
h3,
.t-marker {
  text-wrap: balance;
}
p,
li {
  text-wrap: pretty;
}

/* Nested radius: the parent sets --r-outer and --pad and the class .r-nest; a rounded
   child inside it takes border-radius: var(--r-inner), never less than 8px. */
.r-nest {
  --r-inner: max(8px, calc(var(--r-outer, var(--r-28)) - var(--pad, 0px)));
}

/* The window inset: copy and headlines inside a footage window start this far in, and a
   pearl dock (inside the window or rising into it as its next sibling) starts one
   --dock-pad earlier, so its text lands on the same line. Defined on :root as well, so a
   sibling dock reads the same value. */
:root,
.field-window {
  --window-inset: clamp(24px, 4.4vw, 64px);
}
@media (max-width: 760px) {
  :root,
  .field-window {
    --window-inset: 20px;
  }
}
.field-window__copy,
.field-window > :is(h1, h2, .t-h1, .t-h2, .t-statement) {
  padding-inline-start: var(--window-inset);
}
.field-window__dock {
  --dock-pad: 24px;
  margin-inline-start: calc(var(--window-inset) - var(--dock-pad));
  padding-inline-start: var(--dock-pad);
}
.field-window > .field-window__dock {
  left: 0;
  margin-inline-start: calc(var(--window-inset) - var(--dock-pad));
  transform: none;
}

/* The segmented control on charcoal (the Trinity theatre's bottom bar): a faint inset
   track, unpressed options in white at 72%, the pressed option the pearl thumb with ink
   text, focus a 3px white ring. */
.seg.seg--on-dark {
  background: rgb(255 255 255 / 8%);
  box-shadow:
    inset 0 1px 2px rgb(0 0 0 / 45%),
    inset 0 0 0 1px rgb(255 255 255 / 6%);
}
.seg.seg--on-dark > :is(button, a) {
  color: rgb(255 255 255 / 72%);
}
.seg.seg--on-dark > :is([aria-pressed='true'], [aria-selected='true'], [aria-current='true']) {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 8px 18px -8px rgb(0 0 0 / 60%);
}
.seg.seg--on-dark > .seg__thumb {
  background: var(--surface);
  box-shadow: 0 8px 18px -8px rgb(0 0 0 / 60%);
}
:root .seg.seg--on-dark.seg--thumbed[data-thumb='on'] > [aria-pressed='true'] {
  color: var(--ink);
}
@media (hover: hover) {
  .seg.seg--on-dark
    > :is(button, a):not(
      [aria-pressed='true'],
      [aria-selected='true'],
      [aria-current='true']
    ):hover {
    color: #fff;
    box-shadow: none;
    background: rgb(255 255 255 / 8%);
  }
}
.seg.seg--on-dark > :is(button, a):active {
  box-shadow: inset 0 2px 4px rgb(0 0 0 / 50%);
}
.seg.seg--on-dark > :is(button, a):focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* Icon discs: a recessed pearl disc holding one Lucide glyph (public/icons/, ISC) in
   secondary ink. 32px with a 16px glyph; --lg is 44px with a 20px glyph. Decorative:
   the markup gives the disc aria-hidden="true". */
.icon-disc {
  --icon: url('/icons/info.svg');
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--e-inset-sm);
  color: var(--ink-secondary);
}
.icon-disc::before {
  content: '';
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: var(--icon) center / 16px 16px no-repeat;
  mask: var(--icon) center / 16px 16px no-repeat;
}
.icon-disc--lg {
  width: 44px;
  height: 44px;
}
.icon-disc--lg::before {
  width: 20px;
  height: 20px;
  -webkit-mask-size: 20px 20px;
  mask-size: 20px 20px;
}
.icon-disc[data-icon='shield-check'] {
  --icon: url('/icons/shield-check.svg');
}
.icon-disc[data-icon='eye'] {
  --icon: url('/icons/eye.svg');
}
.icon-disc[data-icon='ban'] {
  --icon: url('/icons/ban.svg');
}
.icon-disc[data-icon='image-off'] {
  --icon: url('/icons/image-off.svg');
}
.icon-disc[data-icon='calendar'] {
  --icon: url('/icons/calendar.svg');
}
.icon-disc[data-icon='users'] {
  --icon: url('/icons/users.svg');
}
.icon-disc[data-icon='message-circle'] {
  --icon: url('/icons/message-circle.svg');
}
.icon-disc[data-icon='paperclip'] {
  --icon: url('/icons/paperclip.svg');
}
.icon-disc[data-icon='receipt'] {
  --icon: url('/icons/receipt.svg');
}
.icon-disc[data-icon='circle-check'] {
  --icon: url('/icons/circle-check.svg');
}

/* The one text-link hover (call 15): a 2px ink underline grows from the left over 180ms.
   In copy, a 1px line at rest keeps the link findable without colour (WCAG 1.4.1); the
   header's and footer's links are navigation and rest bare. --u-y moves the line up
   inside a link padded to a 44px target. */
.text-link,
.top .top__link,
.foot .foot__links a,
.foot .foot__bottom a {
  --u-y: 100%;
  --link-rest: light-dark(rgb(41 46 44 / 38%), rgb(242 243 247 / 38%));
  color: var(--ink);
  text-decoration: none;
  background:
    linear-gradient(currentColor, currentColor) 0 var(--u-y) / 0 2px no-repeat,
    linear-gradient(var(--link-rest), var(--link-rest)) 0 var(--u-y) / 100% 1px no-repeat;
  transition: background-size var(--dur-ui) var(--ease-out);
}
.top .top__link,
.foot .foot__links a,
.foot .foot__bottom a,
:is(.top, .foot) .text-link {
  --link-rest: transparent;
}
.top .top__link {
  /* 7.5px: the 44px box (S3) is 3px taller than the 41px one this was set for. */
  --u-y: calc(100% - 7.5px);
}
.hit-44.text-link,
.mailto-note a.text-link,
.foot .foot__bottom a {
  --u-y: calc(100% - 10px);
}
/* Round 5 (§3.3, WCAG 2.5.8): a link inside running text is at least 24px tall. 4px of
   inline padding grows its box without moving a line (13px text: 16 + 8), and the
   underline stays on the text. Zero-specificity selectors, so any classed link (a
   .button, a .hit-44) keeps its own geometry. */
:where(main)
  :where(p, li, dd, td, figcaption, blockquote)
  a:where(:not([class*='button'], .hit-44)) {
  padding-block: 4px;
}
:where(main) :where(p, li, dd, td, figcaption, blockquote) .text-link:where(:not(.hit-44)) {
  --u-y: calc(100% - 4px);
}
@media (min-width: 761px) {
  .foot .foot__links a {
    --u-y: calc(100% - 8px);
  }
}
@media (max-width: 760px) {
  .foot .foot__links a {
    --u-y: calc(100% - 10px);
  }
}
.text-link:hover,
.text-link:focus-visible,
.top .top__link:hover,
.top .top__link:focus-visible,
.top .top__link[aria-current='page'],
.foot .foot__links a:hover,
.foot .foot__links a:focus-visible,
.foot .foot__links a[aria-current='page'],
.foot .foot__bottom a:hover,
.foot .foot__bottom a:focus-visible {
  color: var(--ink);
  text-decoration: none;
  background-size:
    100% 2px,
    100% 1px;
}

/* The disclosure row (FAQ and similar <details>): no underline on the summary; a raised
   pearl row fades in behind it on hover (180ms), reaching 12px past the text so the
   text stays on its rules; the chevron turns 90° over 180ms when open. */
.disclosure > summary {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  text-decoration: none;
}
.disclosure > summary::-webkit-details-marker {
  display: none;
}
.disclosure > summary::before {
  content: '';
  position: absolute;
  inset: 0 -12px;
  z-index: -1;
  border-radius: var(--r-16);
  background: var(--surface);
  box-shadow: var(--e-raised-sm);
  opacity: 0;
  transition: opacity var(--dur-ui) var(--ease-out);
  pointer-events: none;
}
@media (hover: hover) {
  .disclosure > summary:hover::before {
    opacity: 1;
  }
}
.disclosure__chevron {
  flex: none;
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: url('/icons/chevron-right.svg') center / 20px 20px no-repeat;
  mask: url('/icons/chevron-right.svg') center / 20px 20px no-repeat;
  transition: transform var(--dur-ui) var(--ease-out);
}
.disclosure[open] .disclosure__chevron {
  transform: rotate(90deg);
}

/* The logo's focus ring follows the capsule's shape: 16px corners. */
.top .top__mark:focus-visible,
.foot a:has(.foot__logo):focus-visible {
  border-radius: var(--r-16);
  outline-offset: 4px;
}

/* ─── Round 4: hero exit, phone action dock, anchors ──────────────────────────────── */

/* The hero leaves cleanly (call 4). site.js sets --hero-exit (0 → 1 as the window's lower
   edge travels from 200px below the stuck capsule to the capsule) and data-hero-exit while
   it is above 0. The footage layer (poster, video and scrim), not the window, dissolves
   from its lower edge: a transparent tail up to 108px and a 52px feather above it, both
   reached at 40% of the exit, so by the time the edge is 120px from the capsule nothing of
   the footage shows 12–40px under it and the dark corners beside the dock notch never
   appear. The window drops its charcoal ground meanwhile, and the pearl dock stays whole
   until its own fade (--dock-fade). The pearl band still arrives at 72px (site.js). */
@media (min-width: 761px) {
  .sports-hero[data-hero-exit] .sports-hero__window {
    background: transparent;
  }
  /* The lip and rim go with the footage (gone by 40% of the exit), so no faint outline of
     the window's corners is left under the pearl band. */
  .sports-hero[data-hero-exit] .sports-hero__window::after {
    opacity: max(0, 1 - var(--hero-exit, 0) * 2.5);
  }
  .sports-hero[data-hero-exit] .sports-hero__media {
    --exit-t: min(108px, calc(270px * var(--hero-exit, 0)));
    --exit-f: min(52px, calc(130px * var(--hero-exit, 0)));
    -webkit-mask-image: linear-gradient(
      to bottom,
      #000 calc(100% - var(--exit-t) - var(--exit-f)),
      transparent calc(100% - var(--exit-t))
    );
    mask-image: linear-gradient(
      to bottom,
      #000 calc(100% - var(--exit-t) - var(--exit-f)),
      transparent calc(100% - var(--exit-t))
    );
  }
}

/* The phone action dock (call 11): "Ask about Early Team" (named "… by email"). The offer
   stacks the plan's name over its price; below 375px the name goes (the button already
   says it) and the price reads "$99 / season" on one line. A pearl fade sits behind it. */
@media (max-width: 760px) {
  .action-dock {
    padding: 0 6px 0 20px;
  }
  .action-dock .action-dock__offer {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    min-width: 0;
    line-height: var(--lh-ui);
  }
  .action-dock .action-dock__name {
    color: var(--ink-secondary);
    font-size: var(--fs-13);
    font-weight: 600;
  }
  .action-dock .action-dock__price {
    color: var(--ink);
    font-size: var(--fs-15);
    font-weight: 600;
  }
  .action-dock .action-dock__ask {
    padding-inline: 18px;
    font-size: var(--fs-15);
    white-space: nowrap;
  }
  .action-dock__fade {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 17;
    height: calc(12px + 56px + 24px + env(safe-area-inset-bottom));
    background: linear-gradient(
      to top,
      var(--surface) 60%,
      light-dark(rgb(232 233 229 / 0), rgb(26 29 40 / 0))
    );
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms var(--ease-out);
  }
  .action-dock__fade[data-shown] {
    opacity: 1;
  }
}
@media (max-width: 374px) {
  .action-dock {
    right: 8px;
    left: 8px;
    gap: 8px;
    padding-left: 14px;
  }
  .action-dock .action-dock__name {
    display: none;
  }
  .action-dock {
    gap: 6px;
    padding-left: 12px;
  }
  .action-dock .action-dock__price {
    font-size: var(--fs-13);
  }
  .action-dock .action-dock__ask {
    padding-inline: 10px;
  }
}
@media (min-width: 761px) {
  .action-dock__fade {
    display: none;
  }
}

/* A section focused by an in-page link (site.js gives it tabindex=-1) takes focus for the
   next Tab, without drawing a ring around the whole chapter. */
main [id][tabindex='-1']:focus {
  outline: none;
}

/* ─── Round 6 (2026-09-24): the welcome identity in the hero ─────────────────────────
   DIRECTION.md → round 6, chapter 1. The hero window keeps its layout, capsule, dock, CTAs
   and availability line; its identity is the app's welcome screen (WelcomeScreen.tsx at
   origin/main a2960a7c). Inside the window, over the footage: the UnifiedBrandReveal port
   (public/welcome-logo.js) draws the wordmark large and centred once per load, then the
   masthead rises 350ms after it lands — the RotatingWord port (src/welcome-masthead.js)
   cycling Coach / Watch / Play over "the game", the brand ramp on the moving word — and
   the tagline "experience what matters" in the app's lowercase. The lede, actions and
   availability line follow as the offer. Phones (the welcome loop itself, with its baked
   vertical scrim) take the app's own arrangement: the identity in the upper band, the
   offer in the lower one, the athletes in the open middle. */
:root {
  /* packages/ui mastheadRamp.ts: Trinity's warm run, minus the cool end — orange, brand
     red and the 58% red/purple magenta; the same three hues the lockup's 3 runs. */
  --masthead-orange: #ff7c2a;
  --masthead-red: #ff2a43;
  --masthead-magenta: #c52a92;
}
@supports (color: color-mix(in srgb, #000 50%, #fff)) {
  :root {
    --masthead-magenta: color-mix(in srgb, #ff2a43 58%, #742aff);
  }
}
.sports-hero__identity,
.sports-hero__offer,
.sports-hero__masthead {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.sports-hero__identity {
  position: relative;
}
/* The wordmark: the settled artwork's box; the reveal's canvas is centred on it and taller
   (the play's routes and pens draw above and below the letters, UnifiedBrandReveal's
   sketch padding of 200 units on a 330-unit mark). */
.sports-hero__mark {
  position: relative;
  width: min(100%, clamp(280px, 36vw, 560px));
  margin: 0 0 28px;
}
.sports-hero__mark-still {
  display: block;
  width: 100%;
  height: auto;
}
.sports-hero__mark-canvas {
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  width: 100%;
  aspect-ratio: 1853 / 730;
  transform: translateY(-50%);
  pointer-events: none;
}
.sports-hero__mark-canvas[hidden] {
  display: none;
}
/* While the reveal draws, the artwork keeps its box (welcome-logo.js sets `hidden` on it) so
   the identity never changes height at the landing: the canvas is out of flow. !important
   only to outrank styles.css's global [hidden] rule; the picture is still invisible. */
.sports-hero__mark-still[hidden] {
  display: block !important;
  visibility: hidden;
}
/* The masthead waits behind the reveal (welcome-logo.js rises it on the app's curve at the
   landing, then marks the region settled). .hero-intro covers the frames before the script
   has mounted; both come off on their own, so nothing stays hidden without JavaScript or
   under reduced motion. */
.hero-intro .sports-hero__masthead,
.sports-hero__identity[data-logo-state='loading'] .sports-hero__masthead,
.sports-hero__identity[data-logo-state='playing'] .sports-hero__masthead,
.sports-hero__identity[data-logo-state='paused'] .sports-hero__masthead {
  opacity: 0;
}
.sports-hero h1.masthead {
  display: flex;
  flex-wrap: nowrap;
  gap: 0 0.24em;
  align-items: baseline;
  justify-content: center;
  margin: 0 0 16px;
  font:
    700 var(--d-hero) / var(--d-hero-lh) 'Barlow Condensed',
    'Barlow Condensed Caps Fallback',
    sans-serif;
  letter-spacing: var(--d-hero-ls);
  text-transform: uppercase;
  text-shadow: 0 2px 28px rgb(0 0 0 / 28%);
}
/* The word's slot: the layers stack in one cell, so the slot is its widest word — the app's
   column, fixed, and nothing in the line is ever laid out again (CLS 0 through every swap).
   The current word hugs "the game" at the slot's end. src/welcome-masthead.js pins
   --masthead-shift to 0px once at mount: the slot is fixed, so there is no slack to
   re-centre, and the h1's translate by it is a no-layout hook, nothing more. The clip is
   horizontal only: an outgoing word leaves to the left, across the slack and out at the
   slot's edge, and the next arrives from the right, exactly as RotatingWord clips at its
   column; the vertical overshoot keeps Barlow's ascenders and the smear's lean whole. */
.masthead__slot {
  position: relative;
  display: inline-grid;
  justify-items: end;
  clip-path: inset(-0.3em 0);
}
.sports-hero h1.masthead {
  transform: translateX(var(--masthead-shift, 0px));
  transition: transform 620ms cubic-bezier(0.65, 0, 0.35, 1);
}
.masthead__word {
  grid-area: 1 / 1;
  white-space: nowrap;
  opacity: 0;
  color: transparent;
  text-shadow: none;
  /* mastheadRamp.ts: a horizontal palindrome, warm → cool → warm, one period 1.6× the
     word; five periods across the image so a drift of exactly one period is a fixed
     percentage (22.857142857% of the 7× surplus = 1.6 word widths) and the loop is
     seamless. 5200ms per period, linear, as MASTHEAD_RAMP_DRIFT_MS. */
  background-image: linear-gradient(
    90deg,
    var(--masthead-orange) 0%,
    var(--masthead-red) 5%,
    var(--masthead-magenta) 10%,
    var(--masthead-red) 15%,
    var(--masthead-orange) 20%,
    var(--masthead-red) 25%,
    var(--masthead-magenta) 30%,
    var(--masthead-red) 35%,
    var(--masthead-orange) 40%,
    var(--masthead-red) 45%,
    var(--masthead-magenta) 50%,
    var(--masthead-red) 55%,
    var(--masthead-orange) 60%,
    var(--masthead-red) 65%,
    var(--masthead-magenta) 70%,
    var(--masthead-red) 75%,
    var(--masthead-orange) 80%,
    var(--masthead-red) 85%,
    var(--masthead-magenta) 90%,
    var(--masthead-red) 95%,
    var(--masthead-orange) 100%
  );
  background-size: 800% 100%;
  background-repeat: repeat-x;
  background-position: 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: masthead-drift 5200ms linear infinite;
  animation-play-state: paused;
  will-change: transform, opacity;
}
.masthead__word.is-current {
  opacity: 1;
}
.sports-hero[data-masthead-state='cycling'] .masthead__word {
  animation-play-state: running;
}
@keyframes masthead-drift {
  from {
    background-position-x: 0%;
  }
  to {
    background-position-x: 22.857142857%;
  }
}
.masthead__object {
  white-space: nowrap;
}
.sports-hero__tagline {
  margin: 0;
  font-size: var(--fs-17);
  line-height: var(--lh-ui);
  text-transform: none;
  color: rgb(255 255 255 / 92%);
  text-shadow: 0 1px 12px rgb(0 0 0 / 35%);
}
.sports-hero__offer {
  margin-top: 28px;
}
.sports-hero__copy {
  padding-top: clamp(88px, 12svh, 124px);
  padding-bottom: clamp(88px, 12svh, 116px);
}
@media (prefers-reduced-motion: reduce) {
  .sports-hero h1.masthead {
    transition: none;
  }
  .masthead__word {
    animation: none;
  }
}
/* Without scripts one word exists, at rest (RotatingWord under Reduce Motion), and the
   slot is its width. */
@media (scripting: none) {
  .masthead__word:not(.is-current) {
    display: none;
  }
}
@media (forced-colors: active) {
  .masthead__word {
    color: CanvasText;
    background: none;
    -webkit-text-fill-color: currentColor;
  }
}
/* Round 6 fix 1 (H3): legibility for the ramp word without touching its colours (the app's
   orange / brand red / magenta stay exactly as mastheadRamp.ts has them). A soft ink halo
   follows the glyphs: drop-shadow on the h1, not on the word, because the word's slot clips
   horizontally for the transit and would cut a halo into a hard-edged box (measured, and
   seen); on the h1 it follows whatever the slot shows and lets "the game" carry the same
   halo, so the line reads as one. text-shadow is not an option on a background-clip: text
   word (it tints the gradient). On desktop a soft ink pool also sits behind the masthead
   band, never over the footage as a whole. Phones, where the pool would sit on the app's own
   baked scrim, take a wider halo instead. Measured by check-hero-motion.py's `ramp` section
   (every 6th frame, 95th-percentile background with the halo kept, its report's
   `ramp_contrast`): orange and red clear 3:1 on every sampled frame at 1440, 1920 and 390;
   magenta (#c52a92, luminance 0.146) does not reach 3:1 without a near-black field. */
.sports-hero h1.masthead {
  filter: drop-shadow(0 0 0.04em rgb(13 15 20 / 90%)) drop-shadow(0 0 0.1em rgb(13 15 20 / 80%))
    drop-shadow(0 0 0.3em rgb(13 15 20 / 50%));
}
@media (max-width: 760px) {
  .sports-hero h1.masthead {
    filter: drop-shadow(0 0 0.05em rgb(13 15 20 / 95%)) drop-shadow(0 0 0.14em rgb(13 15 20 / 90%))
      drop-shadow(0 0 0.3em rgb(13 15 20 / 75%)) drop-shadow(0 0 0.6em rgb(13 15 20 / 50%));
  }
}
@media (forced-colors: active) {
  .sports-hero h1.masthead {
    filter: none;
  }
}
@media (min-width: 761px) {
  .sports-hero__masthead {
    position: relative;
  }
  .sports-hero__masthead::before {
    content: '';
    position: absolute;
    /* No horizontal overshoot: the band is already the copy's width, and anything past it
       would widen the window's scrollable area. */
    inset: -20% 0 -14%;
    z-index: -1;
    background: radial-gradient(
      closest-side,
      rgb(13 15 20 / 45%),
      rgb(13 15 20 / 28%) 62%,
      rgb(13 15 20 / 0%)
    );
    pointer-events: none;
  }
  /* Round 6 fix 1 (H7): on short windows the identity block sat 15-20px under the capsule
     at 1280x720 and filled the window top to dock. The wordmark and the offer's gaps now
     scale with the window's height as well as its width (the masthead already does, through
     --d-hero's svh term), so 1280x720, 1366x768 and 1440x900 get room under the capsule and
     above the dock; every value reaches its old maximum by 1080px, so 1920x1080 and
     portrait tablets are unchanged, and phones keep their own rules below. */
  .sports-hero__mark {
    width: min(100%, clamp(280px, min(36vw, 58svh), 560px));
    margin-bottom: clamp(18px, 2.6svh, 28px);
  }
  .sports-hero__offer {
    margin-top: clamp(16px, 2.6svh, 28px);
  }
  .sports-hero__availability {
    margin-top: clamp(16px, 2.6svh, 28px);
  }
}
/* Phones: the app's own arrangement over its own footage. The copy spans the window; the
   identity sits in the loop's upper band (the mark 36px under the capsule, the masthead in
   two lines and the tagline flush with the mark's left edge, the column the mark's width,
   as WelcomeScreen sets it), the offer in the lower band above the dock, and the middle
   stays open for the athletes. The loop carries make_scrim.py's scrim (0.62 → 0.58 over
   the top half, 0.10 through the middle, 0.58 → 0.70 from 82%); the offer's own shade
   below backs the offer where the copy starts before the loop's lower rise. */
@media (max-width: 760px) {
  .sports-hero__copy {
    align-self: stretch;
    justify-content: space-between;
    /* The mark's box sits 56px under the capsule: the reveal's canvas overshoots the box by
       200/330 of its height above and below (the play's routes), 20px of it at 332px wide,
       so the strokes never reach the capsule. */
    padding: calc(var(--capsule-bottom-in-window) + 56px) 20px calc(var(--hero-dock-h) + 20px);
  }
  .sports-hero__copy::before {
    content: none;
  }
  .sports-hero__identity {
    width: min(100%, 332px);
    align-items: flex-start;
    margin-inline: auto;
    text-align: left;
  }
  .sports-hero__mark {
    width: 100%;
    margin-bottom: 24px;
  }
  .sports-hero__masthead {
    align-items: flex-start;
  }
  .sports-hero h1.masthead {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    margin-bottom: 14px;
    /* Two flush-left lines: the word starts the slot and nothing re-centres. */
    transform: none;
  }
  .masthead__slot {
    justify-items: start;
  }
  .sports-hero__tagline {
    margin-left: 2px;
  }
  .sports-hero__offer {
    position: relative;
    margin-top: 24px;
  }
  .sports-hero__offer::before {
    content: '';
    position: absolute;
    inset: -56px -20px calc(-1 * var(--hero-dock-h) - 20px);
    z-index: -1;
    background: linear-gradient(
      to bottom,
      rgb(13 15 20 / 0%) 0,
      rgb(13 15 20 / 42%) 56px,
      rgb(13 15 20 / 48%) 100%
    );
    pointer-events: none;
  }
  .sports-hero__availability {
    margin-top: 14px;
  }
}
@media (max-width: 359px) {
  .sports-hero__mark {
    margin-bottom: 18px;
  }
  .sports-hero h1.masthead {
    margin-bottom: 10px;
  }
  .sports-hero__offer {
    margin-top: 16px;
  }
}

/* Astra hero-only treatment. The original #c52a92 headline stop required a nearly
   opaque field over the athletes. This named web-only magenta lifts its luminance;
   stop order, orange/red, app assets and logo artwork remain unchanged. */
.sports-hero[data-video-prefix='astra-v1'] {
  --hero-masthead-magenta: #e14ba7;
  --masthead-magenta: var(--hero-masthead-magenta);
}
/* Broad, feathered text-safe bands follow the existing desktop/phone copy positions.
   No hard oval masks: the athletes stay visible through the open action band. */
.sports-hero[data-video-prefix='astra-v1'] .sports-hero__masthead::before,
.sports-hero[data-video-prefix='astra-v1'] .sports-hero__masthead::after {
  content: none;
}
.sports-hero[data-video-prefix='astra-v1'] .sports-hero__scrim {
  background:
    radial-gradient(ellipse 65% 40% at 50% 42%, rgb(7 10 14 / 82%), transparent 100%),
    radial-gradient(ellipse 72% 46% at 50% 63%, rgb(7 10 14 / 78%) 24%, transparent 100%),
    linear-gradient(to top, rgb(7 10 14 / 60%), transparent 48%),
    linear-gradient(rgb(7 10 14 / 40%), transparent 32%);
}
@media (max-width: 760px) {
  .sports-hero[data-video-prefix='astra-v1'] .sports-hero__scrim {
    background: linear-gradient(
      180deg,
      rgb(7 10 14 / 62%),
      rgb(7 10 14 / 81%) 24%,
      rgb(7 10 14 / 81%) 42%,
      transparent 62%,
      rgb(7 10 14 / 55%) 88%,
      rgb(7 10 14 / 72%)
    );
  }
}
@media (min-width: 761px) and (max-aspect-ratio: 1/1) {
  .sports-hero[data-video-prefix='astra-v1'] .sports-hero__scrim {
    background:
      radial-gradient(ellipse 90% 45% at 50% 55%, rgb(7 10 14 / 85%) 35%, transparent 100%),
      linear-gradient(rgb(7 10 14 / 42%), rgb(7 10 14 / 42%));
  }
}
/* Keep the app's mark reveal, while the headline and actions are usable from paint.
   The rotating word still waits for the preserved mark animation to settle. */
.sports-hero[data-video-prefix='astra-v1'] .sports-hero__masthead {
  opacity: 1;
}
.sports-hero[data-video-prefix='astra-v1'] .sports-hero__actions {
  animation: none;
  opacity: 1;
  transform: none;
}

/* Lane P: phone capsule bottoms at 62px, preserving its four interaction states. */
@media (max-width: 760px) {
  .top {
    top: 6px;
    margin-top: 6px;
    min-height: 56px;
  }
  .top .top__inner {
    min-height: 56px;
    padding-block: 5px;
  }
  .top .top__mark,
  .top[data-header='stuck'] .top__mark {
    min-height: 44px;
  }
  .top[data-header='stuck'] .top__inner {
    min-height: 52px;
    padding-block: 3px;
  }
  .top::after {
    height: 6px;
  }
  .studio-home .top {
    top: 6px;
  }
}
@media (max-width: 760px) {
  .studio-home .top,
  .has-menu .studio-home .top {
    top: 6px;
    min-height: 56px;
    padding-top: 0;
    margin: 6px 0 -62px;
  }
}

/* Lane S: chapter rhythm lives outside the viewport-fit section frames. */
@property --gap-chapter {
  syntax: '<length>';
  inherits: true;
  initial-value: 0px;
}
@property --gap-continue {
  syntax: '<length>';
  inherits: true;
  initial-value: 0px;
}
:root {
  --gap-chapter: clamp(80px, 11svh + 3vw, 184px);
  --gap-continue: clamp(40px, 5svh + 1.5vw, 96px);
}