/* Homepage · Round 1, "Last Light" (2026-09-22); round 2, "One light, one line"
   (2026-09-23); round 3, "One grid, one red, people in the frame" (2026-09-23); round 4,
   "People in the frame, one light" (2026-09-23); round 5, "Faces in the light, one
   construction per idea" (2026-09-23): no chapter eyebrows and three head patterns
   (soft.css's .chapter-head, --center for Trinity, --wide for Families), static app tabs,
   small captioned loupes on desktop only, a sports band that is equal at rest, a
   numbered families list and a closing dock shaped like the hero's. Loads after soft.css
   on / only.

   The story after the hero (order since 2026-10-19, lane Z) is #sports (eight clips from
   the app's own welcome takes; src/sport-band.js) → #trinity (the real-mobile Trinity phone,
   src/trinity-stage.js; trinity.css and trinity-film.css) → #season (four questions, each
   answered by a real app screen in one phone; src/season-collage.js) → #team (one large
   device and a benefit panel with numbered markers; src/app-reel.js) → #parts and #gameday
   (the three audiences, then game day and the web) → #families and #families-promises (a
   parent's TEAMON3 in real captures, then the four /privacy/ facts) → #plans, #fees and
   #close (the plans, the fee graphic, the offer docked into the closing footage). Round-6
   chapter rules sit in lane blocks between "r6:<lane> start/end" markers, the 2026-10-19
   chapters between "r7:<lane>" markers. Retired vocabularies were deleted: the round-5
   sports rules and the Trinity theatre, film dialog and Try preview (round 6); the
   round-3–6 #season vocabulary (.season-card*, .season-sheet, .season-frag*, the runway and
   the event view), the drawn guardian view (.guardian-view, .gv-*), the old comparison table
   (.value-table, .value__*) and the #parts/#gameday status pills (2026-10-19). The round-5
   #team base rules stay: the r6 blocks layer on them and were verified with them present.
   Secondary blocks start on grid
   column 7 ([data-grid-col="7"], soft.css's .grid-12).

   Display headings take soft.css's type utilities (.t-statement, .t-h2, .t-card): no
   rule here sets a display heading's leading or tracking.

   Every rule is scoped to .studio-home so it outranks soft.css, studio.css and
   marketing.css without !important. Values come from soft.css's round-1 tokens
   (--r-*, --e-*, --fs-*, --d-*, --ease-out); nothing here adds a hex value, radius or
   shadow of its own. #151917 is the theatre charcoal soft.css already defines. */

/* ─── Chapters: one column, one rhythm ─────────────────────────────────────────── */
.studio-home :is(.season, .app-module, .sport-band, .trinity-chapter, .families, .closing) {
  width: var(--page);
  margin-inline: auto;
  padding-top: 0;
}
.studio-home .chapter-head h2 {
  margin: 0;
  color: var(--ink);
}
/* A lede on column 7 takes soft.css's chapter-head size and measure (round 4); a lede that
   sits inside a column-7 block (Trinity's aside) reads the same. */
.studio-home .chapter-lede {
  margin: 0;
  color: var(--ink-secondary);
  font-size: var(--fs-20);
  line-height: var(--lh-prose);
  text-wrap: pretty;
}
/* Lucide glyph inside a pill button (Expand film, Close). */
.studio-home .button-icon {
  flex: none;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url('/icons/x.svg') center / 16px 16px no-repeat;
  mask: url('/icons/x.svg') center / 16px 16px no-repeat;
}
.studio-home .button-icon--close {
  -webkit-mask-image: url('/icons/x.svg');
  mask-image: url('/icons/x.svg');
}

/* Desktop. Static: the pile in the left half, under the corner tag. Scrubbed: five fixed
   slots (left/top as a share of the window) chosen so no two fragments' boxes meet at any
   point of the pile-up. */

/* Authored still motion for the two footage windows: a slow 5% push-in as they cross
   the viewport. Scroll-driven where the browser supports it; nothing otherwise. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .studio-home .closing__window > :is(picture > img, video) {
      transform-origin: 40% 50%;
      animation: home-window-drift linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 40%;
    }
  }
}
@keyframes home-window-drift {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.05);
  }
}

/* ─── #team · the app, touched ─────────────────────────────────────────────────── */
/* Round 5 (calls 7, 8, 9): the head is soft.css's chapter pattern; then the tabs, still and
   centred 24px above the stage at every width (nothing here is sticky: a stage that fits
   one viewport gains nothing from a pinned control, and the pinned one rode over the device
   and its tag); then one device centred in a full-width recessed stage, from 1024px with a
   small captioned loupe in each gutter; then the story row (the tab's title and lede in
   columns 1–6; its two points are the loupes' callouts from 1024px and a compact list
   under the lede below that). */
.studio-home .app-module__tabs {
  position: static;
  width: fit-content;
  margin: clamp(32px, 3.4vw, 48px) auto 0;
}
.studio-home .app-module__grid {
  position: relative;
  align-items: start;
  margin-top: 24px;
}
/* The stage: one recessed pearl well across the column. The device rises from its floor,
   48px under its top edge, and fades into it over the last 120px. src/app-reel.js sets
   data-reel-layout="device" at 761px and wider; phones and no JavaScript get "row" (or no
   attribute): a native scroll-snap row of the four screens. */
.studio-home .app-reel {
  --device-w: clamp(300px, 26vw, 380px);
  --row-w: 280px;
  --row-h: calc(56px + var(--row-w) * 844 / 390 * 0.72);
  --loupe-size: clamp(160px, 12.8vw, 184px);
  position: relative;
  grid-column: 1 / -1;
  height: var(--row-h);
  margin: 0;
  border: 1px solid light-dark(rgb(255 255 255 / 55%), rgb(255 255 255 / 6%));
  border-radius: var(--r-40);
  background: var(--surface);
  box-shadow: var(--e-inset-lg);
  overflow: hidden;
}
.studio-home .app-reel__stage {
  position: absolute;
  inset: 0;
  padding: 0;
  border-radius: inherit;
  background: none;
  box-shadow: none;
  perspective: none;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 120px), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - 120px), transparent);
}
.studio-home .app-reel__stage::-webkit-scrollbar {
  display: none;
}
.studio-home .app-reel__track {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: max-content;
  height: 100%;
  padding: 56px calc(50% - var(--row-w) / 2) 0;
  transform: none;
}
.studio-home .app-reel__card {
  flex: none;
  width: var(--row-w);
  margin: 0;
  transform: none;
  scroll-snap-align: center;
}
/* The device: the capture inside a pearl bezel whose corners follow the screen's. */
.studio-home .app-reel__plane {
  --bezel: 8px;
  --corner: calc(var(--row-w) * 0.14);
  position: relative;
  display: block;
  aspect-ratio: 390 / 844;
  overflow: hidden;
  border: var(--bezel) solid var(--surface);
  border-radius: calc(var(--corner) + var(--bezel));
  background: var(--surface);
  box-shadow: var(--e-raised-lg);
  cursor: zoom-in;
}
.studio-home .app-reel__plane:hover {
  border-color: var(--surface);
}
/* In the row (phones, no JavaScript) each screen is cut at 72% of its height, where the
   well ends, so its box never reaches the caption under the well; the well's mask has
   already faded that edge out. */
.studio-home .app-reel:not([data-reel-layout='device']) .app-reel__plane {
  aspect-ratio: auto;
  height: calc(var(--row-w) * 844 / 390 * 0.72);
}
.studio-home .app-reel__plane img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: var(--corner);
}
.studio-home .app-reel__enlarge {
  position: absolute;
  top: 16px;
  right: 16px;
  opacity: 0;
  transition:
    opacity var(--dur-ui) var(--ease-out),
    transform var(--dur-ui) var(--ease-out),
    box-shadow var(--dur-ui) var(--ease-out);
}
.studio-home .app-reel__plane:is(:hover, :focus-visible) .app-reel__enlarge {
  opacity: 1;
}
/* One device, centred; only the selected screen (and one leaving) is drawn. */
.studio-home .app-reel[data-reel-layout='device'] {
  height: min(760px, 88svh);
}
.studio-home .app-reel[data-reel-layout='device'] .app-reel__stage {
  overflow: hidden;
  scroll-snap-type: none;
}
.studio-home .app-reel[data-reel-layout='device'] .app-reel__track {
  position: absolute;
  inset: 0;
  display: block;
  width: auto;
  height: auto;
  padding: 0;
}
.studio-home .app-reel[data-reel-layout='device'] .app-reel__card {
  position: absolute;
  top: 48px;
  left: calc(50% - var(--device-w) / 2);
  width: var(--device-w);
  visibility: hidden;
}
.studio-home
  .app-reel[data-reel-layout='device']
  .app-reel__card:is([data-reel-active], [data-reel-leaving]) {
  visibility: visible;
}
.studio-home .app-reel[data-reel-layout='device'] .app-reel__plane {
  --bezel: 10px;
  --corner: calc(var(--device-w) * 0.14);
}
.studio-home .app-reel:not([data-reel-layout='device']) .app-reel__loupes {
  display: none;
}
.studio-home .loupe-fig:not(.is-ready),
.studio-home .app-reel:not([data-loupes-shown]) :is(.loupe-fig, .loupe-rect, .loupe-tether) {
  opacity: 0;
}
.studio-home .loupe {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  width: var(--loupe-size, 176px);
  height: var(--loupe-size, 176px);
  padding: 6px;
  border-radius: 50%;
}
.studio-home .is-ready > .loupe {
  background: var(--surface);
  box-shadow: var(--e-raised-lg);
}
.studio-home .loupe img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  opacity: 0;
}
.studio-home .is-ready > .loupe img {
  background: #fff;
  opacity: 1;
}
/* The inner edge: a soft recess where the glass meets the ring, and the ring's hairline. */
.studio-home .is-ready > .loupe::after {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  box-shadow:
    var(--e-inset-sm),
    0 0 0 1px rgb(13 15 20 / 16%);
  pointer-events: none;
}
/* The story row: every scene shares one grid cell, so the row is always as tall as the
   tallest story and nothing below moves when the tab changes. The title and lede take
   columns 1–6. From 1024px the two points are the loupes' callouts, so the list is kept for
   assistive technology only; below that it is a compact list under the lede. */
.studio-home .tour-scenes {
  grid-column: 1 / -1;
  display: grid;
  row-gap: 0;
  margin-top: clamp(32px, 3.4vw, 48px);
  padding: 0;
}
.studio-home .app-module .tour-scene {
  display: block;
  grid-area: 1 / 1;
  scroll-margin-top: 104px;
}
.studio-home .app-module__body.is-enhanced .tour-scene[hidden] {
  display: block;
  visibility: hidden;
}
.studio-home .app-module .tour-scene__visual {
  display: none;
}
.studio-home .app-module .tour-scene__story {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  row-gap: 0;
  align-items: start;
  max-width: none;
}
.studio-home .app-module .tour-scene__story > * {
  grid-column: 1 / span 6;
}
.studio-home .app-module .tour-scene__story h3 {
  max-width: 24ch;
  margin: 0 0 16px;
  color: var(--ink);
  text-wrap: balance;
}
.studio-home .app-module .tour-scene__story > p:not(.tour-fee-note) {
  max-width: 52ch;
  margin: 0;
  color: var(--ink-secondary);
  font-size: var(--fs-17);
  line-height: var(--lh-prose);
  text-wrap: pretty;
}
.studio-home .app-module .tour-points {
  display: grid;
  gap: 16px;
  max-width: 52ch;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.studio-home .app-module .tour-points > li {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
}
.studio-home .app-module .tour-points p {
  margin: 0;
}
.studio-home .app-module .tour-points__title {
  color: var(--ink);
  font-size: var(--fs-15);
  font-weight: 600;
  line-height: var(--lh-ui);
}
.studio-home .app-module .tour-points__text {
  color: var(--ink-secondary);
  font-size: var(--fs-15);
  line-height: var(--lh-prose);
  text-wrap: pretty;
}
@media (min-width: 1024px) {
  .studio-home .app-module__body.is-enhanced .tour-points {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .studio-home .app-module .tour-scene.is-entering .tour-scene__story {
    animation: home-story-in var(--dur-reveal) var(--ease-out) both;
  }
}
@keyframes home-story-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}
/* No JavaScript: the row of screens, then every story in turn. */
.studio-home .app-module__body:not(.is-enhanced) .tour-scenes {
  row-gap: 56px;
}
.studio-home .app-module__body:not(.is-enhanced) .tour-scene {
  grid-area: auto;
}
.studio-home .app-module__body:not(.is-enhanced) .tour-scene + .tour-scene {
  margin-top: 0;
}

/* ─── #trinity · one theatre, watch or try ────────────────────────────────────── */
/* Round 5 (call 6): the one centred head (soft.css's .chapter-head--center): the
   signature and its "Coming to TEAMON3" chip on the column's centre line, 16px apart, then
   the statement, then the lede held to 56ch. Left-aligned on phones. */
.studio-home .trinity-chapter__id {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 16px;
  margin: 0;
}
.studio-home .trinity-panels.is-enhanced {
  display: grid;
  align-items: start;
}
.studio-home .trinity-panels.is-enhanced > .trinity-panel {
  grid-area: 1 / 1;
  min-width: 0;
}
.studio-home .trinity-panels:not(.is-enhanced) > .trinity-panel + .trinity-panel {
  margin-top: 72px;
}
.studio-home :is(.director-top, .demo__top) > .seg {
  flex: none;
  margin: 0;
}
/* Watch and Try share one grid cell whose floor is the taller panel (--panels-h, measured
   by src/trinity-flow.js), so switching never moves the page below. */
.studio-home .trinity-panels.is-enhanced {
  min-height: var(--panels-h, 0px);
}
/* The theatre: charcoal with the window's lip. A chrome row inside its top edge carries
   the disclosure pair; the stage below it holds the film's 1200×680 world, scaled to fit
   and centred (src/director-motion.js), capped so the stage and the bottom bar fit one
   viewport under the stuck capsule; the bottom bar carries the scenario chips and the
   transport. */
.studio-home .director-theatre {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-window);
}
.studio-home .director-theatre .director-stage {
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  max-height: min(640px, calc(100svh - var(--capsule-bottom, 78px) - 182px));
  aspect-ratio: 1200 / 680;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
/* A warm pool of light behind the panel in focus: director-motion.js sets --pool-x to its
   centre, and the pool glides there. */
@property --pool-x {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 50%;
}
/* The bottom bar: the caption band, then [scenario chips] [pause] [Ask … Done] [time]. */
.studio-home .director-theatre .director-controls {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 20px;
  min-height: 72px;
  margin: 0;
  padding: 0 24px 4px 12px;
}
.studio-home .director-controls > .icon-button {
  flex: none;
  width: 44px;
  min-width: 0;
  height: 44px;
  min-height: 0;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 75%);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--ctl-rest);
}
@media (hover: hover) {
  .studio-home .director-controls > .icon-button:hover {
    background: var(--surface);
    box-shadow: var(--ctl-hover);
  }
}
.studio-home .director-controls > .icon-button:active {
  box-shadow: var(--ctl-press);
}
.studio-home .director-chapters button[aria-pressed='true'] {
  color: #fff;
}
@media (max-width: 1180px) {
  .studio-home .director-controls > .director-scenarios .seg__long {
    display: none;
  }
  .studio-home .director-controls > .director-scenarios .seg__short {
    display: inline;
  }
}
.studio-home .director-identity .trinity-sig {
  font-size: 34px;
}
/* The theatres' short disclosures are two block lines, never a line that starts with a
   separator. */
.studio-home .seg__short .tag-line {
  display: block;
  white-space: nowrap;
}
.studio-home .trinity-chapter__transcript[open] summary::after {
  transform: rotate(180deg);
}
/* ─── Try the preview · touched on the charcoal stage ─────────────────────────── */
/* The same theatre as the film's, the same size; the pearl card sits on it, 32px in. */
.studio-home .demo {
  max-width: none;
}
.studio-home .demo:is([data-state='ready']) .demo-steps li:nth-child(1),
.studio-home .demo:is([data-state='review']) .demo-steps li:nth-child(2),
.studio-home .demo:is([data-state='complete']) .demo-steps li:nth-child(3) {
  color: var(--ink);
  text-decoration: underline 2px var(--ink);
}
.studio-home .demo:has(.demo-steps):is([data-state='ready']) .demo-steps-compact > :nth-child(1),
.studio-home .demo:has(.demo-steps):is([data-state='review']) .demo-steps-compact > :nth-child(2),
.studio-home
  .demo:has(.demo-steps):is([data-state='complete'])
  .demo-steps-compact
  > :nth-child(3) {
  display: inline;
}
/* Two columns from 1024px: what was asked (context, prompt, reply) on the left, what
   would happen (proposal or receipt, the controls, the status) on the right. */
@media (min-width: 1024px) {
  .studio-home .demo__col--act > :first-child,
  .studio-home .demo__col--act > [hidden] + .demo__complete {
    margin-top: 0;
  }
}
.studio-home .demo[data-state='complete'] .demo__context-value {
  color: var(--ink);
}
.studio-home .demo__change del:not([hidden]) + strong::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 14px;
  background: var(--ink-secondary);
  vertical-align: -0.1em;
  -webkit-mask: url('/icons/arrow-right.svg') center / 20px 20px no-repeat;
  mask: url('/icons/arrow-right.svg') center / 20px 20px no-repeat;
}
.studio-home .families__aside .chapter-lede {
  max-width: 40ch;
  font-size: var(--fs-20);
  line-height: var(--lh-prose);
}
.studio-home .families__link {
  font-size: var(--fs-15);
  font-weight: 600;
  line-height: var(--lh-ui);
}
@media (max-width: 760px) {
  .studio-home .families__aside .chapter-lede {
    font-size: var(--fs-17);
  }
}

/* ─── #plans · the closing bookend ─────────────────────────────────────────────── */
/* Round 5 (call 10): one construction for the offer, the hero's. The pearl dock is a
   centred capsule, min(880px, 100% − 2 × --window-inset) wide, that rises 96px into the
   window's lower edge with 28px shoulders and the hero dock's concave fillets (soft.css's
   .field-window__dock geometry, lifted to the window's edge here), so the window's own
   40px lower corners stay whole on either side: no dark "ears". Inside it, three rows:
   the founder offer (flag, then "Early Team" beside "$99 / season") with the actions on
   the right (the red ask with "Opens your email app" under it, the pearl "See all plans",
   the address with its copy button); the pass note; the other two plans on one line.
   $99 is the only large price. On phones the dock spans the window, square, like the
   phone hero's, and the footage stops 40px above the window's edge on a pearl ground. */
.studio-home .closing {
  --closing-rise: 96px;
  padding-bottom: 0;
}
.studio-home .closing__window {
  width: 100%;
  height: clamp(620px, 58vw, 780px);
}
.studio-home .closing__window img.field-window__media {
  object-position: 50% 30%;
}
.studio-home .closing__scrim {
  background:
    linear-gradient(180deg, rgb(9 12 11 / 58%), rgb(9 12 11 / 0) 46%),
    linear-gradient(90deg, rgb(9 12 11 / 52%), rgb(9 12 11 / 0) 58%);
}
/* The statement starts on --window-inset (soft.css). */
.studio-home .closing__line {
  position: absolute;
  z-index: 2;
  top: var(--window-inset);
  left: 0;
  max-width: calc(var(--window-inset) + 7.4em);
  margin: 0;
  color: #fff;
  text-shadow: 0 6px 36px rgb(4 6 5 / 40%);
}
/* The tag takes the right-hand corner: the statement owns the left. */
.studio-home .closing__window > .closing__tag {
  right: 16px;
  left: auto;
}
.studio-home .closing__offer {
  --dock-radius: var(--r-28);
  --dock-pad: 32px;
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 32px;
  align-items: end;
  box-sizing: border-box;
  width: min(880px, 100% - 2 * var(--window-inset));
  margin: calc(-1 * var(--closing-rise)) auto 0;
  padding: 28px var(--dock-pad) 8px;
  border-radius: var(--dock-radius) var(--dock-radius) 0 0;
}
/* The fillets sit at the window's lower edge, --closing-rise below the dock's top. */
.studio-home .closing__offer::before,
.studio-home .closing__offer::after {
  top: calc(var(--closing-rise) - var(--dock-radius));
  bottom: auto;
}
.studio-home .offer-lead {
  grid-column: 1;
  min-width: 0;
}
.studio-home .offer-lead p {
  margin: 0;
}
.studio-home .offer-lead__flag::before {
  display: none;
}
.studio-home .offer-lead__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  margin-top: 14px;
}
.studio-home .offer-lead__name {
  margin: 0;
  color: var(--ink);
}
.studio-home .offer-lead__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--ink);
}
.studio-home .offer-lead__price > span:first-child {
  font: 700 var(--d-h2) / var(--d-h2-lh) var(--font-display);
  letter-spacing: var(--d-h2-ls);
  font-variant-numeric: lining-nums tabular-nums;
}
.studio-home .offer-lead__price > span:last-child {
  color: var(--ink-secondary);
  font-size: var(--fs-17);
  line-height: var(--lh-ui);
}
/* The actions: [Ask about Early Team] [See all plans] over [Opens your email app]
   [address ⧉]. The note is the ask's description (aria-describedby). */
.studio-home .closing__actions {
  grid-column: 2;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 8px 12px;
  margin: 0;
}
.studio-home .closing__actions .button {
  justify-content: center;
  text-align: center;
}
.studio-home .closing__ask {
  grid-area: 1 / 1;
}
.studio-home .closing__plans {
  grid-area: 1 / 2;
}
.studio-home .closing__ask-note {
  grid-area: 2 / 1;
  justify-self: center;
  margin: 0;
  color: var(--ink-secondary);
  font-size: var(--fs-13);
  line-height: var(--lh-ui);
}
.studio-home .closing__copy {
  grid-area: 2 / 2;
  justify-self: center;
  margin: 0;
}
.studio-home .offer-lead__note {
  grid-column: 1 / -1;
  max-width: 64ch;
  margin: 20px 0 0;
  color: var(--ink-secondary);
  font-size: var(--fs-15);
  line-height: var(--lh-prose);
}
/* The address's hit area is a full 44px: 13px above and below its 13px line. */
.studio-home .closing__copy a {
  padding-block: 13px;
  margin-block: -13px;
  line-height: var(--lh-ui);
}
@media (min-width: 761px) and (max-width: 1023px) {
  /* The actions drop under the offer, the offer's rows keep their order. */
  .studio-home .closing__offer {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 20px;
  }
  .studio-home .closing__actions {
    grid-column: 1;
    justify-self: start;
  }
}

/* ─── Screen lightbox, pearl ───────────────────────────────────────────────────── */
.studio-home .screen-lightbox {
  width: calc(100vw - 48px);
  height: calc(100dvh - 48px);
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  border: 1px solid light-dark(rgb(255 255 255 / 60%), var(--border));
  border-radius: var(--r-40);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--e-float-dark);
}
.studio-home .screen-lightbox::backdrop {
  background: light-dark(rgb(21 25 23 / 60%), rgb(8 9 14 / 72%));
}
.studio-home .screen-lightbox__bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 24px 0 32px;
  border: 0;
  background: none;
}
.studio-home .screen-lightbox__bar > p {
  flex: 1 1 auto;
  margin: 0;
  color: var(--ink);
  font: 700 var(--fs-24) / 1.1 var(--font-display);
}
.studio-home .screen-lightbox .seg > button {
  min-height: 44px;
  padding: 10px 18px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-secondary);
  font-size: var(--fs-15);
}
.studio-home .screen-lightbox .seg > button[aria-pressed='true'] {
  border: 0;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--e-raised-sm);
}
.studio-home .screen-lightbox .button {
  min-height: 44px;
  gap: 8px;
  padding: 10px 20px;
  border: 1px solid light-dark(rgb(255 255 255 / 70%), rgb(255 255 255 / 8%));
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: var(--fs-15);
}
.studio-home .screen-lightbox .icon-button {
  min-height: 0;
  padding: 0;
  border: 1px solid light-dark(rgb(255 255 255 / 70%), rgb(255 255 255 / 8%));
  border-radius: 50%;
  background: var(--surface);
}
.studio-home .screen-lightbox__body {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  gap: 24px;
  min-height: 0;
  padding: 24px;
}
.studio-home .screen-lightbox__sidebar {
  display: flex;
  flex-direction: column;
  padding: 8px;
  border: 0;
}
.studio-home .screen-lightbox__choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  width: 100%;
  border-radius: var(--r-28);
}
.studio-home .screen-lightbox__story {
  margin-top: 36px;
}
.studio-home .screen-lightbox__story h2 {
  margin: 0 0 16px;
}
.studio-home .screen-lightbox__story > p:last-child {
  margin: 0;
  color: var(--ink-secondary);
  font-size: var(--fs-15);
  line-height: 1.6;
}
.studio-home .screen-lightbox__paging {
  gap: 12px;
  border: 0;
  background: none;
}
.studio-home .screen-lightbox__paging span {
  color: var(--ink-secondary);
  font-size: var(--fs-13);
  font-variant-numeric: tabular-nums;
}
.studio-home .screen-lightbox__stage {
  align-items: center;
  padding: 24px;
  border-radius: var(--r-28);
  background: var(--surface);
  box-shadow: var(--e-inset-lg);
}
.studio-home .screen-lightbox__viewport {
  width: 100%;
  padding: 0;
  border-radius: var(--r-16);
}
.studio-home .director-dialog[open] {
  display: grid;
  align-content: center;
}
.studio-home .director-dialog :is(.trinity-film, .director-top, .director-theatre) {
  display: contents;
}
.studio-home .director-dialog .director-theatre::after {
  display: none;
}
@container (max-width: 1100px) {
  .studio-home .director-dialog .director-scenarios .seg__long {
    display: none;
  }
  .studio-home .director-dialog .director-scenarios .seg__short {
    display: inline;
  }
}

/* ─── Tablet ───────────────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  /* Both switches and Expand film keep one row down to 761px. */
  .studio-home :is(.director-top, .demo__top) > .seg > button {
    padding-inline: 14px;
  }
}
@media (max-width: 1023px) {
  /* The story row: the title, the lede and its two points as a compact list, across the
     column (no loupes below 1024px). */
  .studio-home .app-module .tour-scene__story > * {
    grid-column: 1 / -1;
  }
  .studio-home .app-module .tour-scene__story > :is(p, ul) {
    max-width: 60ch;
  }
}

/* ─── Phones ───────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  /* #team: the four screens in a native scroll-snap row, cropped at 72% of the device's
     height and faded into the well. The tabs fit at 390 and 320 without scrolling. */
  .studio-home .app-reel {
    --row-w: min(78vw, 300px);
    border-radius: var(--r-28);
  }
  /* The disclosure is a caption under the row of screens. */
  .studio-home .app-module__grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .studio-home .tour-scenes {
    order: 3;
  }
  .studio-home .app-module__tabs {
    width: 100%;
  }
  .studio-home .app-module__tabs > button {
    flex: 1 1 auto;
    padding-inline: 12px;
  }
  .studio-home .app-module .tour-scene__story {
    grid-template-columns: minmax(0, 1fr);
  }
  .studio-home .app-module .tour-points {
    margin-top: 20px;
  }

  /* #trinity on phones: the marker, the h2, then the signature, its tag and the lede. Each
     panel: one control row ([mode] … [Expand film]), then the charcoal theatre: the chrome
     row with the disclosure pair (wrapping as chips; in Try it starts on the card's text
     edge), the 4:5 stage, and the bottom bar (the chips on their own row, then the
     transport). */
  .studio-home .trinity-chapter__id {
    justify-content: flex-start;
    margin: 0 0 20px;
  }
  .studio-home .director-theatre .director-stage {
    max-height: none;
    aspect-ratio: 4 / 5;
  }
  .studio-home .director-theatre .director-controls {
    flex-wrap: wrap;
    gap: 8px 12px;
    min-height: 0;
    padding: 12px 16px 14px;
  }
  .studio-home :is(.director-scenarios, .demo__scenarios) .seg__long {
    display: none;
  }
  .studio-home :is(.director-scenarios, .demo__scenarios) .seg__short {
    display: inline;
  }
  /* #plans: the line in three short lines. The dock spans the window like the phone hero's:
     square, no fillets, rising 48px; the footage stops 40px above the window's edge on a
     pearl ground, so no charcoal fringes the corners under it. */
  .studio-home .closing {
    --closing-rise: 48px;
  }
  .studio-home .closing__window {
    height: auto;
    background: linear-gradient(#151917 calc(100% - 40px), var(--surface) 0);
  }
  .studio-home .closing__window > picture > img,
  .studio-home .closing__window > :is(video, .closing__scrim) {
    bottom: 40px;
    height: auto;
  }
  .studio-home .closing__line {
    top: 64px;
    right: 0;
    max-width: none;
    padding-inline-end: var(--window-inset);
  }
  .studio-home .closing__scrim {
    /* Keep the full three-line statement readable over the new cream uniforms. */
    background: linear-gradient(
      180deg,
      rgb(9 12 11 / 82%) 0%,
      rgb(9 12 11 / 74%) 55%,
      rgb(9 12 11 / 22%) 75%,
      transparent 100%
    );
  }
  .studio-home .closing__offer {
    --dock-pad: 20px;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 24px;
    width: 100%;
    margin: calc(-1 * var(--closing-rise)) 0 0;
    padding: 24px var(--dock-pad) 0;
    border-radius: 0;
  }
  .studio-home .closing__offer::before,
  .studio-home .closing__offer::after {
    display: none;
  }
  .studio-home :is(.offer-lead, .closing__actions, .offer-lead__note) {
    grid-column: 1;
    margin-top: 0;
  }
  .studio-home .closing__actions {
    grid-template-columns: minmax(0, 1fr);
    justify-items: stretch;
  }
  .studio-home :is(.closing__ask, .closing__ask-note, .closing__plans, .closing__copy) {
    grid-area: auto;
    justify-self: stretch;
    text-align: center;
  }
  .studio-home .closing__plans {
    margin-top: 8px;
  }
  .studio-home .offer-lead__price > span:first-child {
    font-size: var(--d-h1);
    line-height: var(--d-h1-lh);
    letter-spacing: var(--d-h1-ls);
  }

  .studio-home .screen-lightbox {
    width: calc(100vw - 24px);
    height: calc(100dvh - 24px);
    border-radius: var(--r-28);
  }
  .studio-home .screen-lightbox__bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    padding: 16px 16px 0 20px;
  }
  .studio-home .screen-lightbox__modes {
    grid-column: 1 / -1;
    justify-self: center;
  }
  .studio-home .screen-lightbox__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 12px calc(76px + env(safe-area-inset-bottom));
  }
  .studio-home .screen-lightbox__sidebar {
    flex-shrink: 0;
    padding: 0;
  }
  .studio-home .screen-lightbox__choices {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .studio-home .screen-lightbox .screen-lightbox__choices > button {
    padding-inline: 4px;
    font-size: var(--fs-13);
  }
  .studio-home .screen-lightbox__stage {
    flex: 1;
    min-height: 0;
    padding: 12px;
    border-radius: var(--r-16);
  }
  .studio-home .screen-lightbox__paging {
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    border-top: 0;
    background: var(--surface);
  }
  .studio-home .director-dialog[open] {
    align-content: stretch;
  }
}
/* 360px and below. Four tabs at 13px, 10px in. The collage keeps two fragments (the
   group text with its first question, and the sign-up sheet) so the pile stays in the
   upper 55% and clear of the card, which tightens. */
@media (max-width: 360px) {
  .studio-home .app-module__tabs > button {
    padding-inline: 10px;
    font-size: var(--fs-13);
  }
}
/* Five 8px progress segments and one live label; the pause sits on their row. */
@media (max-width: 400px) {
  .studio-home .director-theatre .director-controls,
  .studio-home .director-dialog .director-controls {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-rows: auto 44px auto;
    column-gap: 12px;
    row-gap: 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .studio-home .app-reel__enlarge,
  .studio-home .trinity-chapter__transcript summary::after {
    transition: none;
  }
}
/* The fee chip's row wraps only below 340px (round 5): 13px, one row, down to 340. */

/* Large screens get large stages (round 5, call 16): from 1680px the media stages (the
   season window, the app stage, the sports rail, both Trinity theatres and the closing
   window) take soft.css's --stage-wide, min(1600px, 100% − 160px) of the full-width page,
   centred on the column; headings and text stay on the 1280px column. The stages sit inside
   the column's box, so their width is written against the viewport (--stage-x, the same
   value) and they overhang the column equally on both sides. */
@media (min-width: 1680px) {
  .studio-home {
    --stage-x: min(1600px, 100vw - 160px);
  }
  .studio-home :is(.app-reel, .sport-band__rail, .closing__window) {
    width: var(--stage-x);
    max-width: none;
    margin-inline: calc(50% - var(--stage-x) / 2);
  }
  .studio-home .director-theatre .director-stage {
    max-height: min(800px, calc(100svh - var(--capsule-bottom, 78px) - 182px));
  }
  /* The stage's tag rides the stage's corner, not the column's. */
  .studio-home .closing__window {
    height: min(880px, calc(var(--stage-x) / 1.64));
  }
}

/* r6:families start */
/* ─── r6 · #families · the guardian's own TEAMON3 ─────────────────────────────── */
/* Round 6 (L-families). The head is soft.css's .chapter-head--wide. The scene is one
   window (fix round 2, P1: the baseball batter, new crops of the /pricing/ salvage master in
   public/media/families*.webp, 2:1 at 1280px and wider, 16:9 between, 4:5 on phones) with a
   drawn guardian view: at 1280px and wider it sits on the open field right of the batter,
   inset --window-inset from the right and centred vertically without a transform (so
   [data-reveal]'s transform never fights it), clear of his helmet and bat; the tag keeps the
   left corner, above the bat's tip; below 1280 the view flows under the window on pearl. Its shadow over
   the photograph is the season card's pair (no white bloom on grass); on pearl it takes
   --e-raised-lg. Inside: a 28px panel padded 12px, so its rows nest at --r-inner = 16px, and
   its chips are pills. Type stays on the scale (13/15/17 at 1.4, the date numeral at
   --d-card), so nothing here is lint-exempt. Then the read: three benefit lines in columns
   1–5, the four /privacy/ facts in 7–12 as a hairline list, each fact a prose link. The
   round-5 .families__body/.families__rules rules above are unused by this markup.
   2026-10-19 (lane Z): the drawn guardian view (.guardian-view, .gv-*) was retired by lane F
   (see r7:families-app below) and its rules deleted; the window rules stay. */
.studio-home .families__scene {
  position: relative;
  margin-top: clamp(40px, 4vw, 56px);
}
.studio-home .families__window {
  width: 100%;
  aspect-ratio: 2 / 1;
  min-height: 560px;
}
/* The batter holds the left third of the 2:1 frame; where the window is 16:9 the crop
   gives up the right-hand field first. */
.studio-home .families__window .field-window__media {
  object-position: 30% 50%;
}
/* A light shade on the right, where the panel sits, so its drop reads; the batter stays bare. */
.studio-home .families__scrim {
  background:
    linear-gradient(270deg, rgb(9 12 11 / 30%), rgb(9 12 11 / 0) 52%),
    linear-gradient(0deg, rgb(9 12 11 / 22%), rgb(9 12 11 / 0) 36%);
}
/* Fix round 1 (M5): the window is 16:9 below 1280px. */
@media (max-width: 1279px) {
  .studio-home .families__window {
    aspect-ratio: 16 / 9;
    min-height: 0;
  }
}
/* The promises (2026-10-20 copy diet): the headline and the privacy link on columns 1–5,
   the four facts beside them on 7–12. */
.studio-home .families__read {
  align-items: start;
  margin-top: clamp(40px, 4vw, 56px);
}
.studio-home .families__promise-head {
  grid-column: 1 / 6;
  display: grid;
  justify-items: start;
  gap: var(--space-head);
}
.studio-home .families__promise-head h2 {
  margin: 0;
}
.studio-home .families__trust {
  grid-column: 7 / -1;
}
.studio-home .families__facts {
  margin: 0;
  padding: 0;
  list-style: none;
}
.studio-home .families__facts > li {
  margin: 0;
  padding: 12px 0;
  border-top: 1px solid var(--border);
  color: var(--ink-secondary);
  font-size: var(--fs-15);
  line-height: var(--lh-prose);
  text-wrap: pretty;
}
.studio-home .families__facts > li:last-child {
  border-bottom: 1px solid var(--border);
}
.studio-home .families__facts a {
  color: var(--ink);
  font-weight: 600;
}
/* The link's 44px hit area (.hit-44) keeps its negative margin: the text sits one head gap
   under the heading. */
.studio-home .families__link {
  margin-top: -12px;
}
@media (max-width: 760px) {
  .studio-home .families__scene {
    margin-top: 24px;
  }
  .studio-home .families__window {
    aspect-ratio: 4 / 5;
  }
  .studio-home .families__read {
    row-gap: 32px;
    margin-top: 32px;
  }
  .studio-home :is(.families__promise-head, .families__trust) {
    grid-column: 1 / -1;
  }
}
@media (min-width: 1680px) {
  /* The scene widens with the other media stages; the panel keeps the window's inset. */
  .studio-home .families__window {
    width: var(--stage-x);
    max-width: none;
    margin-inline: calc(50% - var(--stage-x) / 2);
  }
}

/* ─── #plans + #fees · site refresh, 2026-10-19 (lane P) ─────────────────────────────
   The owner asked for "way less wordy and way more visual". Two sections, each one screen:
   #plans: the chapter head, then the three team plans as one grid. The Team pass is the dark
   ticket (--graphite in both schemes' pairs, white text), columns 1–7 over both rows: its
   price in --d-statement, a dashed perforation with page-coloured notches at either edge,
   the team under "One pass" (24 decorative person glyphs drawn here, aria-hidden, 24 to a
   row from 1200px and on a full-width ticket, 12 otherwise), and what Team includes as
   chips. Free and Early Team are raised pearl cards in columns 8–12. Below 1024px the
   ticket spans the row and the two pearl cards share the next one.
   #fees: one recessed pearl stage. The H2 holds columns 1–4; the fee table columns 6–12.
   Each table row is a grid (who / bar + total / parts): one scale for both bars, $2.15 =
   the full track, so the fills are exactly 122/215 and 215/215 of it, and each fill splits
   into its two parts by the same arithmetic. The fills grow once (480ms) while reveal.js
   reveals the stage; reduced motion, no JavaScript and an already-visible stage draw them
   complete. Below 1024px the stage stacks.
   The closing dock (#close) keeps its round-5 rules above; its flag is no longer a truth
   tag (it carries no disclosure), so it takes the recessed pill here. */
.studio-home #plans .pass-plans {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
  margin: var(--space-lede) 0 0;
  padding: 0;
  list-style: none;
}
.studio-home .pass-card {
  --pass-pad: 32px;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: 28px var(--pass-pad);
  border-radius: var(--r-28);
  background: var(--surface);
  box-shadow: var(--e-raised-lg);
  color: var(--ink);
}
.studio-home .pass-card--team {
  --pass-pad: 40px;
  --per-row: 24;
  grid-column: 1 / span 8;
  grid-row: 1 / span 2;
  overflow: hidden;
  padding-block: 32px;
  background: var(--graphite);
  /* The rim keeps the ticket's edge on the dark page, where graphite sits close to it. */
  box-shadow:
    var(--e-raised-lg),
    inset 0 0 0 1px var(--rim-dark);
  color: rgb(255 255 255 / 92%);
}
.studio-home .pass-card--free {
  grid-column: 9 / -1;
  grid-row: 1;
}
.studio-home .pass-card--early {
  grid-column: 9 / -1;
  grid-row: 2;
}
.studio-home .pass-card > p {
  margin: 0;
}
.studio-home .pass-card__name {
  margin: 0;
  color: inherit;
  font: 700 var(--d-card) / var(--d-card-lh) var(--font-display);
  letter-spacing: var(--d-card-ls);
}
.studio-home .pass-card .pass-card__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-top: 12px;
}
.studio-home .pass-card__num {
  font: 700 var(--d-h2) / var(--d-h2-lh) var(--font-display);
  letter-spacing: var(--d-h2-ls);
  font-variant-numeric: lining-nums tabular-nums;
}
.studio-home .pass-card--team .pass-card__num {
  font-size: var(--d-statement);
  line-height: var(--d-statement-lh);
  letter-spacing: var(--d-statement-ls);
}
.studio-home .pass-card__per {
  color: var(--ink-secondary);
  font-size: var(--fs-17);
  line-height: var(--lh-ui);
}
/* Team's two terms stack beside the numeral: the six-month price's, then the year's. */
.studio-home .pass-card__terms {
  display: grid;
}
.studio-home .pass-card--team .pass-card__per,
.studio-home .pass-card .pass-card__alt {
  color: rgb(255 255 255 / 74%);
}
.studio-home .pass-card .pass-card__alt {
  font-size: var(--fs-17);
  line-height: var(--lh-ui);
}
.studio-home .pass-card__alt b {
  color: #fff;
  font: 700 var(--fs-20) / var(--lh-ui) var(--font-display);
  font-variant-numeric: lining-nums tabular-nums;
}
.studio-home .pass-card .pass-card__fact {
  margin-top: auto;
  padding-top: 12px;
  color: var(--ink-secondary);
  font-size: var(--fs-15);
  line-height: var(--lh-prose);
  text-wrap: pretty;
}
.studio-home .pass-card .pass-card__flag {
  position: absolute;
  top: 28px;
  right: var(--pass-pad);
  padding: 4px 12px;
  border-radius: var(--r-pill);
  box-shadow: var(--e-inset-sm);
  color: var(--ink-secondary);
  font-size: var(--fs-13);
  font-weight: 600;
  line-height: var(--lh-ui);
  white-space: nowrap;
}
/* The ticket: the perforation, its two notches in the page's own colour, then the team. */
.studio-home .pass-team {
  position: relative;
  display: grid;
  justify-content: start;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 2px dashed rgb(255 255 255 / 24%);
}
.studio-home .pass-team::before,
.studio-home .pass-team::after {
  content: '';
  position: absolute;
  top: -15px;
  left: calc(-1 * var(--pass-pad) - 14px);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface);
}
.studio-home .pass-team::after {
  right: calc(-1 * var(--pass-pad) - 14px);
  left: auto;
}
.studio-home .pass-team .pass-team__label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 10px;
  color: #fff;
  font: 700 var(--fs-20) / var(--lh-ui) var(--font-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
/* The bracket: a line out to each end of the row of people, with a short drop at the end. */
.studio-home .pass-team__label::before,
.studio-home .pass-team__label::after {
  content: '';
  flex: 1;
  height: 8px;
  margin-top: 8px;
  border-top: 2px solid rgb(255 255 255 / 56%);
}
.studio-home .pass-team__label::before {
  border-left: 2px solid rgb(255 255 255 / 56%);
}
.studio-home .pass-team__label::after {
  border-right: 2px solid rgb(255 255 255 / 56%);
}
.studio-home .pass-team__people {
  display: grid;
  grid-template-columns: repeat(var(--per-row), minmax(0, 18px));
  align-items: end;
  gap: 10px 7px;
  color: rgb(255 255 255 / 86%);
}
/* A person: a round head over rounded shoulders; every third one an adult, a little taller. */
.studio-home .pass-team__people > span {
  position: relative;
  height: 23px;
}
.studio-home .pass-team__people > span:nth-child(3n + 1) {
  height: 29px;
}
.studio-home .pass-team__people > span::before,
.studio-home .pass-team__people > span::after {
  content: '';
  position: absolute;
  left: 50%;
  translate: -50% 0;
  background: currentColor;
}
.studio-home .pass-team__people > span::before {
  top: 0;
  width: 50%;
  aspect-ratio: 1;
  border-radius: 50%;
}
.studio-home .pass-team__people > span::after {
  bottom: 0;
  width: 88%;
  height: calc(100% - 11px);
  border-radius: 999px 999px 0 0;
}
.studio-home .pass-team .pass-team__caption {
  width: 0;
  min-width: 100%;
  margin: 10px 0 0;
  color: rgb(255 255 255 / 74%);
  font-size: var(--fs-15);
  line-height: var(--lh-ui);
}
.studio-home .pass-card__includes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: auto 0 0;
  padding: 24px 0 0;
  list-style: none;
}
.studio-home .pass-card__includes > li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  margin: 0;
  padding: 0 14px 0 10px;
  border-radius: var(--r-pill);
  background: rgb(255 255 255 / 8%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 14%);
  color: #fff;
  font-size: var(--fs-15);
  font-weight: 600;
  line-height: var(--lh-ui);
  white-space: nowrap;
}
.studio-home .pass-card__includes > li::before {
  content: '';
  flex: none;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url('/icons/check.svg') center / 16px 16px no-repeat;
  mask: url('/icons/check.svg') center / 16px 16px no-repeat;
}
.studio-home #close .offer-lead__flag {
  display: inline-block;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  box-shadow: var(--e-inset-sm);
  color: var(--ink-secondary);
  font-size: var(--fs-13);
  font-weight: 600;
  line-height: var(--lh-ui);
  white-space: nowrap;
}

/* #fees: the stage, then the table. */
.studio-home #fees .fees__stage {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
  gap: 16px var(--grid-gap);
  margin: 0;
  padding: clamp(28px, 3.4vw, 48px);
  border-radius: var(--r-40);
  box-shadow: var(--e-inset-lg);
}
.studio-home #fees .fees__title {
  grid-column: 1 / span 4;
  grid-row: 1 / span 3;
  margin: 0;
  color: var(--ink);
  font: 700 var(--d-h2) / var(--d-h2-lh) var(--font-display);
  letter-spacing: var(--d-h2-ls);
  text-wrap: balance;
}
.studio-home #fees :is(.fee-bars, .fees__link) {
  grid-column: 6 / -1;
}
.studio-home .fee-bars {
  display: block;
  width: 100%;
  margin: 0;
  border-collapse: collapse;
}
.studio-home .fee-bars tbody {
  display: grid;
  gap: 28px;
}
.studio-home .fee-bars__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  grid-template-areas:
    'who who'
    'detail total';
  gap: 8px 20px;
}
.studio-home .fee-bars :is(th, td) {
  padding: 0;
  font-weight: 400;
  text-align: left;
}
.studio-home .fee-bars .fee-bars__who {
  grid-area: who;
  color: var(--ink);
  font-size: var(--fs-17);
  font-weight: 600;
  line-height: var(--lh-ui);
}
.studio-home .fee-bars__source {
  margin-left: 8px;
  color: var(--ink-secondary);
  font-size: var(--fs-13);
  font-weight: 400;
  line-height: var(--lh-ui);
  white-space: nowrap;
}
.studio-home .fee-bars .fee-bars__total {
  grid-area: total;
  align-self: start;
  color: var(--ink);
  font: 700 var(--d-price) / var(--d-price-lh) var(--font-display);
  font-variant-numeric: lining-nums tabular-nums;
  text-align: right;
}
.studio-home .fee-bars__row--them .fee-bars__total {
  color: var(--ink-secondary);
}
.studio-home .fee-bars__detail {
  grid-area: detail;
  display: grid;
  gap: 8px;
}
.studio-home .fee-bars__track {
  display: block;
  height: 32px;
  margin-top: 4px;
  border-radius: var(--r-pill);
  box-shadow: var(--e-inset-sm);
}
.studio-home .fee-bars__fill {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--r-pill);
  transform-origin: left center;
}
.studio-home .fee-bars__row--us .fee-bars__fill {
  width: calc(100% * 122 / 215);
}
.studio-home .fee-bars__seg {
  display: block;
  height: 100%;
}
.studio-home .fee-bars__row--us .fee-bars__seg--a {
  width: calc(100% * 30 / 122);
  background: var(--ink);
}
.studio-home .fee-bars__row--us .fee-bars__seg--b {
  width: calc(100% * 92 / 122);
  background: color-mix(in srgb, var(--ink) 72%, var(--surface));
}
.studio-home .fee-bars__row--them .fee-bars__seg--a {
  width: calc(100% * 65 / 215);
  background: var(--ink-secondary);
}
.studio-home .fee-bars__row--them .fee-bars__seg--b {
  width: calc(100% * 150 / 215);
  background: color-mix(in srgb, var(--ink-secondary) 62%, var(--surface));
}
/* The parts' divide: a hairline of page drawn inside the second part, so no length changes. */
.studio-home .fee-bars__seg--b {
  box-shadow: inset 2px 0 0 var(--surface);
}
.studio-home .fee-bars__parts {
  color: var(--ink-secondary);
  font-size: var(--fs-13);
  line-height: var(--lh-ui);
}
.studio-home #fees .fees__link {
  justify-self: start;
  font-size: var(--fs-15);
}
@keyframes fee-grow {
  from {
    transform: scaleX(0);
  }
}
.studio-home .fees__stage[data-reveal-state='armed'] .fee-bars__fill {
  transform: scaleX(0);
}
.studio-home .fees__stage[data-reveal-state='revealing'] .fee-bars__fill {
  animation: fee-grow 480ms var(--ease-out) both;
}
.studio-home .fees__stage[data-reveal-state='revealing'] .fee-bars__row--them .fee-bars__fill {
  animation-delay: 60ms;
}
@media (prefers-reduced-motion: reduce) {
  .studio-home .fees__stage .fee-bars__fill {
    transform: none;
    animation: none;
  }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .studio-home .pass-card--team {
    --per-row: 12;
  }
}
/* Short desktop screens (1280x720, 1366x768): the H2 and the Team numeral step down to
   --d-h2 and the ticket tightens, so the chapter stays one screen. */
@media (max-height: 820px) and (min-width: 1024px) {
  .studio-home #plans .chapter-head h2 {
    font-size: var(--d-h2);
    line-height: var(--d-h2-lh);
    letter-spacing: var(--d-h2-ls);
  }

  .studio-home .pass-card {
    padding-block: 20px;
  }
  .studio-home .pass-card .pass-card__flag {
    top: 20px;
  }
  .studio-home .pass-card--team {
    padding-block: 24px;
  }
  .studio-home .pass-card--team .pass-card__num {
    font-size: var(--d-h2);
    line-height: var(--d-h2-lh);
    letter-spacing: var(--d-h2-ls);
  }
  .studio-home .pass-team {
    margin-top: 16px;
    padding-top: 14px;
  }
  .studio-home .pass-card__includes {
    padding-top: 16px;
  }
}
@media (max-width: 1023px) {
  .studio-home #plans .pass-plans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .studio-home .pass-card--team {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .studio-home .pass-card--free {
    grid-column: 1;
    grid-row: 2;
  }
  .studio-home .pass-card--early {
    grid-column: 2;
    grid-row: 2;
  }
  .studio-home #fees .fees__stage {
    grid-template-columns: minmax(0, 1fr);
  }
  .studio-home #fees .fees__title,
  .studio-home #fees :is(.fee-bars, .fees__link) {
    grid-column: 1;
    grid-row: auto;
  }
}
@media (max-width: 760px) {
  .studio-home #plans .chapter-head h2,
  .studio-home .pass-card--team .pass-card__num {
    font-size: var(--d-h2);
    line-height: var(--d-h2-lh);
    letter-spacing: var(--d-h2-ls);
  }

  .studio-home .pass-card {
    --pass-pad: 16px;
    padding-block: 16px;
  }
  /* One row of sixteen people on a phone: the picture, not the count, carries it. */
  .studio-home .pass-card--team {
    --pass-pad: 20px;
    --per-row: 16;
    padding-block: 20px;
  }
  .studio-home .pass-team__people > span:nth-child(n + 17) {
    display: none;
  }
  .studio-home .pass-card .pass-card__price {
    margin-top: 6px;
  }
  .studio-home .pass-card .pass-card__flag {
    position: static;
    align-self: start;
    margin-top: 6px;
  }
  .studio-home .pass-card .pass-card__fact {
    font-size: var(--fs-13);
    line-height: var(--lh-ui);
  }
  .studio-home :is(.pass-card__per, .pass-card .pass-card__alt) {
    font-size: var(--fs-15);
  }
  .studio-home .pass-team {
    margin-top: 12px;
    padding-top: 12px;
  }
  .studio-home .pass-team .pass-team__label {
    margin-bottom: 6px;
  }
  .studio-home .pass-team .pass-team__caption {
    margin-top: 6px;
  }
  .studio-home .pass-team__people {
    grid-template-columns: repeat(var(--per-row), minmax(0, 16px));
    gap: 6px 3px;
  }
  .studio-home .pass-team__people > span {
    height: 19px;
  }
  .studio-home .pass-team__people > span:nth-child(3n + 1) {
    height: 24px;
  }
  .studio-home .pass-card__includes {
    gap: 6px;
    padding-top: 14px;
  }
  .studio-home .pass-card__includes > li {
    gap: 4px;
    min-height: 28px;
    padding: 0 10px 0 7px;
    font-size: var(--fs-13);
  }
  .studio-home .pass-card__includes > li::before {
    width: 14px;
    height: 14px;
    -webkit-mask-size: 14px 14px;
    mask-size: 14px 14px;
  }
  .studio-home #fees .fees__stage {
    padding: 20px;
    border-radius: var(--r-28);
  }
  .studio-home .fee-bars tbody {
    gap: 20px;
  }
  .studio-home .fee-bars__row {
    grid-template-columns: minmax(0, 1fr) 72px;
    column-gap: 12px;
  }
  .studio-home .fee-bars__source {
    display: block;
    margin-left: 0;
  }
  .studio-home .fee-bars .fee-bars__total {
    font-size: var(--d-card);
    line-height: var(--d-card-lh);
  }
  .studio-home .fee-bars__track {
    height: 24px;
  }
}
/* The narrowest phones: "Early Team" stays on one line in its half-width card. */
@media (max-width: 360px) {
  .studio-home .pass-card:not(.pass-card--team) .pass-card__name {
    font-size: var(--fs-20);
    line-height: var(--lh-ui);
  }
}
/* r6:families end */

/* r6:season start */
/* ─── #season · four questions, four real screens (site refresh 2026-10-19) ───────── */
/* The bleachers photograph is the backdrop only, under a heavy charcoal shade, so the stage
   reads dark in both page schemes and the real screens are the subject. Inside it, one
   grid-12 on the page column (.season__grid): the questions with their one-line answers in
   columns 1–6 (.season-asks, pearl cards on the dark stage), and on column 7
   (.season-device, data-grid-col="7", check-grid.py) one phone holding the selected real
   app screen, with the label, the selected screen's caption and the Pause / Play / Replay
   control beside it. src/season-collage.js sets data-season-state on the stage: without it
   (no JavaScript) the four phones sit in a scrolling row and every question is a link to
   its phone. The phone is sized from the viewport's height so the chapter fits one screen
   at every desktop size (1280×720 to 1920×1080); on phones the list and the phone sit side
   by side and only the selected question opens its answer. */
.studio-home .season {
  --season-pad: clamp(16px, 2.6svh, 28px);
  --season-bezel: 8px;
  --season-phone-h: clamp(380px, calc(100svh - 356px), 620px);
  --season-screen-w: calc((var(--season-phone-h) - 2 * var(--season-bezel)) * 1206 / 2622);
  --season-phone-w: calc(var(--season-screen-w) + 2 * var(--season-bezel));
  --season-ring-ink: light-dark(var(--app-accent), #0060fc);
}
.studio-home .season__scene {
  width: 100%;
  margin: 0;
}
.studio-home .season__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgb(9 12 11 / 64%),
    rgb(9 12 11 / 52%) 55%,
    rgb(9 12 11 / 70%)
  );
  pointer-events: none;
}
.studio-home .season__grid {
  position: relative;
  z-index: 2;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-height: calc(var(--season-phone-h) + 2 * var(--season-pad));
  padding-block: var(--season-pad);
}

/* The questions: pearl cards, each a link to its screen. The selected one presses in and
   carries the chapter's orange bar; every answer stays on show. */
.studio-home .season-asks {
  grid-column: 1 / 7;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0 0 0 var(--window-inset);
  list-style: none;
}
.studio-home .season-ask {
  margin: 0;
}
.studio-home .season-ask__link {
  position: relative;
  display: grid;
  gap: 2px;
  min-height: 44px;
  padding: 10px 16px 12px 20px;
  border: 1px solid light-dark(rgb(255 255 255 / 70%), var(--rim-dark));
  border-radius: var(--r-16);
  background: var(--surface);
  box-shadow: var(--e-float-dark);
  color: var(--ink);
  text-decoration: none;
  transition:
    box-shadow var(--dur-ui) var(--ease-out),
    background-color var(--dur-ui) var(--ease-out);
}
.studio-home .season-ask__link::before {
  content: '';
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 8px;
  width: 3px;
  border-radius: 2px;
  background: var(--sport-orange);
  opacity: 0;
  transition: opacity var(--dur-ui) var(--ease-out);
}
.studio-home .season-ask__link[aria-current='true'] {
  background: var(--surface-lift);
  box-shadow: var(--e-inset-sm);
}
.studio-home .season-ask__link[aria-current='true']::before {
  opacity: 1;
}
@media (hover: hover) {
  .studio-home .season-ask__link:not([aria-current='true']):hover {
    background: var(--surface-lift);
  }
}
.studio-home .season-ask__link:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}
.studio-home .season-ask__q {
  font-size: var(--fs-17);
  font-weight: 650;
  line-height: var(--lh-ui);
  text-wrap: balance;
}
.studio-home .season-ask__a {
  color: var(--ink);
  font-size: var(--fs-15);
  line-height: var(--lh-ui);
  text-wrap: pretty;
}
/* The answer's numbers are the rings' numbers on the phone. */
.studio-home .season-n {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin: 0 6px 0 2px;
  border-radius: 50%;
  background: var(--season-ring-ink);
  color: #fff;
  font-size: var(--fs-13);
  font-weight: 600;
  line-height: var(--lh-ui);
  vertical-align: 1px;
}
.studio-home .season-ask__a > .season-n:first-child {
  margin-left: 0;
}

/* The phone: one pearl bezel whose corners follow the screen's (the 402-point iPhone
   screen's corner is 13.7% of its width). Each screen is a figure with its own bezel; with
   JavaScript the four are stacked in one place, so the frame never moves. */
.studio-home .season-device {
  grid-column: 7 / 13;
  display: flex;
  align-items: stretch;
  gap: 28px;
  min-width: 0;
  padding-right: var(--window-inset);
}
.studio-home .season-phone {
  position: relative;
  flex: none;
  width: var(--season-phone-w);
  height: var(--season-phone-h);
  outline: none;
}
.studio-home .season-screen {
  --corner: calc(var(--season-screen-w) * 0.137);
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  margin: 0;
  border: var(--season-bezel) solid var(--surface);
  border-radius: calc(var(--corner) + var(--season-bezel));
  background: var(--surface);
  box-shadow:
    0 30px 60px -20px rgb(6 8 7 / 60%),
    0 2px 6px rgb(6 8 7 / 16%);
}
.studio-home .season-screen > img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--corner);
  object-fit: cover;
  object-position: top;
}
.studio-home [data-season-state] .season-screen:not([data-active], [data-leaving]) {
  visibility: hidden;
}
.studio-home [data-season-state] .season-screen[data-active] {
  z-index: 1;
}
.studio-home [data-season-state] .season-screen__caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The rings: an app-blue outline around the element that answers the question, placed in
   percentages of the capture (1206×2622; x, y, w, h measured on the image's own pixels),
   with the answer's number on its top-left corner. */
.studio-home .season-rings {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.studio-home .season-ring {
  --air: 4px;
  position: absolute;
  top: calc(var(--y) - var(--air));
  left: calc(var(--x) - var(--air));
  box-sizing: border-box;
  width: calc(var(--w) + 2 * var(--air));
  height: calc(var(--h) + 2 * var(--air));
  border: 2px solid var(--season-ring-ink);
  border-radius: 8px;
  box-shadow: 0 0 0 3px rgb(0 96 252 / 16%);
}
/* The number sits just outside the ring's left edge, centred on it, so it never covers the
   text the ring names (on the right edge for the Sign up button, whose left neighbour is the
   task's own line, and for the reply, whose left neighbour is the sender's avatar). */
.studio-home .season-ring::before {
  content: attr(data-n);
  position: absolute;
  top: calc(50% - 10px);
  left: -25px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--season-ring-ink);
  box-shadow: 0 0 0 2px #fff;
  color: #fff;
  font: 600 13px / 1 var(--font-body);
}
.studio-home [data-season-state='ready'] .season-ring {
  opacity: 0;
}
/* event-detail: the date and time; Northfield Rec · Field 2; Is Eli C. going? */
.studio-home [data-ring='event-1'] {
  --x: 3.85%;
  --y: 15.21%;
  --w: 57.69%;
  --h: 2.71%;
}
.studio-home [data-ring='event-2'] {
  --x: 7.69%;
  --y: 33.02%;
  --w: 37.82%;
  --h: 2.36%;
}
.studio-home [data-ring='event-3'] {
  --x: 7.95%;
  --y: 41.63%;
  --w: 84.1%;
  --h: 4.25%;
}
/* chat-thread: the coach's event card (Creekside Eagles, Sat, Nov 7, 10:00 AM); Raj
   Patel's "Owen is in." */
.studio-home [data-ring='chat-1'] {
  --x: 13.97%;
  --y: 22.76%;
  --w: 62.31%;
  --h: 15.45%;
}
.studio-home [data-ring='chat-2'] {
  --x: 13.97%;
  --y: 71.11%;
  --w: 63.97%;
  --h: 8.96%;
}
/* tasks: Bring snacks for the Fall Classic, 1/3 FILLED; its Sign up button. */
.studio-home [data-ring='tasks-1'] {
  --x: 8.21%;
  --y: 35.85%;
  --w: 10%;
  --h: 4.36%;
}
.studio-home [data-ring='tasks-2'] {
  --x: 74.1%;
  --y: 36.08%;
  --w: 18.46%;
  --h: 3.6%;
}
.studio-home :is([data-ring='tasks-2'], [data-ring='chat-2'])::before {
  right: -25px;
  left: auto;
}
/* payments-detail: Collected $350 of $490; Lena Chen, $35 for Eli C., Unpaid. */
.studio-home [data-ring='fees-1'] {
  --x: 64.74%;
  --y: 16.63%;
  --w: 27.56%;
  --h: 2.24%;
}
.studio-home [data-ring='fees-2'] {
  --x: 7.69%;
  --y: 57.37%;
  --w: 84.87%;
  --h: 5.54%;
}

/* Beside the phone: the label, the selected screen's caption, the control. */
.studio-home .season-device__side {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
  padding-block: 8px;
}
.studio-home .season-device__caption {
  margin: 0;
  color: #fff;
  font-size: var(--fs-15);
  line-height: var(--lh-prose);
  text-wrap: pretty;
}
.studio-home .season-device__caption:empty,
.studio-home .season-device__answer {
  display: none;
}
.studio-home .season__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding: 10px 18px 10px 14px;
  box-shadow: var(--e-float-dark);
}
.studio-home .season__toggle[hidden] {
  display: none;
}
.studio-home .season__toggle:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}
.studio-home .season__toggle-icon {
  -webkit-mask-image: url('/icons/rotate-ccw.svg');
  mask-image: url('/icons/rotate-ccw.svg');
}
.studio-home .season__toggle[data-mode='pause'] .season__toggle-icon {
  -webkit-mask-image: url('/icons/pause.svg');
  mask-image: url('/icons/pause.svg');
}
.studio-home .season__toggle[data-mode='play'] .season__toggle-icon {
  -webkit-mask-image: url('/icons/play.svg');
  mask-image: url('/icons/play.svg');
}

/* No JavaScript: the four phones in a row that scrolls sideways, each with its caption
   under it; the questions link to them. */
.studio-home .season__scene:not([data-season-state]) .season-phone {
  display: flex;
  gap: 24px;
  width: auto;
  min-width: 0;
  height: auto;
  /* Room on both sides for the ring numbers that sit outside a screen's edge. */
  padding: 0 28px 8px;
  overflow-x: auto;
  scroll-padding-inline: 28px;
  scroll-snap-type: x mandatory;
}
.studio-home .season__scene:not([data-season-state]) .season-device {
  flex-direction: column;
}
.studio-home .season__scene:not([data-season-state]) .season-device__side {
  flex: none;
  padding: 0;
}
.studio-home .season__scene:not([data-season-state]) .season-screen {
  position: relative;
  inset: auto;
  flex: none;
  width: var(--season-phone-w);
  height: var(--season-phone-h);
  margin-bottom: 52px;
  scroll-snap-align: start;
}
.studio-home .season__scene:not([data-season-state]) .season-screen__caption {
  position: absolute;
  top: calc(100% + var(--season-bezel) + 8px);
  left: 0;
  right: 0;
  color: #fff;
  font-size: var(--fs-13);
  line-height: var(--lh-ui);
}

/* Short desktop windows keep the cards compact; tall ones give the question more room. */
@media (min-width: 1024px) and (min-height: 860px) {
  .studio-home .season-asks {
    gap: 14px;
  }
  .studio-home .season-ask__link {
    padding: 14px 20px 16px 24px;
  }
  .studio-home .season-ask__q {
    font-size: var(--fs-20);
  }
}
@media (min-width: 1024px) and (max-height: 759px) {
  .studio-home .season-asks {
    gap: 8px;
  }
  .studio-home .season-ask__link {
    gap: 0;
    padding: 7px 14px 8px 20px;
  }
}

/* Tablets: the same two halves, the label and the control under the phone. */
@media (max-width: 1023px) {
  .studio-home .season {
    --season-phone-h: clamp(380px, calc(100svh - 400px), 560px);
  }
  .studio-home .season-asks {
    grid-column: 1 / 7;
  }
  .studio-home .season-device {
    grid-column: 7 / 13;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  .studio-home .season-device__side {
    flex: none;
    align-items: center;
    padding: 0;
  }
  .studio-home .season__toggle {
    margin-top: 0;
  }
}

/* Phones: the list and the phone side by side; only the selected question opens its
   answer (all four open without JavaScript); the label and the control sit under both. */
@media (max-width: 760px) {
  .studio-home .season {
    --season-pad: 12px;
    --season-bezel: 5px;
    --season-phone-h: clamp(300px, calc(100svh - 340px), 330px);
  }
  .studio-home .season__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 10px;
    row-gap: 8px;
    align-items: start;
    min-height: 0;
    padding-inline: var(--season-pad);
  }
  .studio-home .season-asks {
    grid-column: 1;
    gap: 6px;
    padding: 0;
  }
  .studio-home .season-ask__link {
    padding: 8px 10px 8px 14px;
  }
  .studio-home .season-ask__link::before {
    top: 10px;
    bottom: 10px;
    left: 5px;
  }
  .studio-home .season-ask__q {
    font-size: var(--fs-15);
  }
  .studio-home .season-ask__a {
    font-size: var(--fs-13);
  }
  .studio-home .season-n {
    width: 18px;
    height: 18px;
    margin-right: 4px;
  }
  .studio-home [data-season-state] .season-ask__a {
    display: none;
  }
  .studio-home [data-season-state] .season-device__answer:not(:empty) {
    display: block;
    flex: 1 0 100%;
    margin: 0;
    padding: 10px 12px;
    border-radius: var(--r-16);
    background: var(--surface);
    box-shadow: var(--e-float-dark);
    color: var(--ink);
    font-size: var(--fs-13);
    line-height: var(--lh-ui);
    text-wrap: pretty;
  }
  .studio-home .season-device__answer > .season-n:first-child {
    margin-left: 0;
  }
  .studio-home .season-device {
    display: contents;
  }
  .studio-home .season-phone {
    grid-column: 2;
    grid-row: 1;
  }
  .studio-home .season-device__side {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0;
  }
  .studio-home .season-device__caption {
    display: none;
  }
  /* The control is its icon on phones (its aria-label names it), so the label and the
     control share one row. */
  .studio-home .season__toggle {
    justify-content: center;
    width: 44px;
    min-width: 44px;
    margin: 0;
    padding: 0;
  }
  .studio-home .season__toggle [data-season-toggle-label] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .studio-home .season-ring {
    --air: 3px;
    border-width: 1.5px;
    border-radius: 5px;
  }
  .studio-home .season-ring::before {
    top: calc(50% - 7.5px);
    left: -18px;
    width: 15px;
    height: 15px;
    font-size: 11px;
  }
  .studio-home :is([data-ring='tasks-2'], [data-ring='chat-2'])::before {
    right: -18px;
    left: auto;
  }
  .studio-home .season__scene:not([data-season-state]) .season-phone {
    grid-column: 1 / -1;
    grid-row: 2;
    padding-inline: 20px;
    scroll-padding-inline: 20px;
  }
  .studio-home .season__scene:not([data-season-state]) .season-asks {
    grid-column: 1 / -1;
  }
}
/* r6:season end */

/* r6:sports start */
/* ─── #sports · round 6 (L-sports, 2026-09-24): eight clips from the welcome takes ──── */
/* Supersedes the round-5 "#sports · breadth, watched" block above (the same selectors,
   later in the cascade, so these win; that block can be deleted once this one is in).
   Eight portrait windows of the app's own welcome footage (public/media/sports/, built by
   scripts/build-sport-tiles.py from apps/mobile/assets/video/cuts.tsv with the welcome's
   grade), equal at rest. Each tile is one button (its window and its name), at least 44px
   tall at every width, with the focus ring drawn around the window. From 1024px the eight
   share one row across the column (the stage width from 1680px): at rest every tile is
   the same slit, framed on its athlete (--focus, from the tile's rest-frame focal point);
   pointer, focus or a tap opens one to exactly 3:4 at flex 2.4 (420ms) while the others
   narrow to slits framed by --focus-slit, and src/sport-band.js returns the row to equal
   600ms after the pointer leaves it. The height never changes, so nothing below moves.
   Reduced motion opens a tile instantly and plays nothing (the video is hidden). Without
   JavaScript: eight equal 3:4 posters. Below 1024px a native scroll-snap row that starts
   on the column's edge. No still tile remains: volleyball is a clip. */
.studio-home .sport-band__head > .sport-band__tag {
  grid-column: 7 / -1;
  margin-top: 20px;
}
.studio-home .sport-band__rail {
  --gap: 16px;
  --tiles: 8;
  --unit: calc((100cqw - (var(--tiles) - 1) * var(--gap)) / var(--tiles));
  container-type: inline-size;
  display: flex;
  gap: var(--gap);
  /* Block margins only: from 1680px the shared stage rule (home.css, "Large screens get
     large stages") sets the rail's inline margins to centre --stage-x on the column. */
  margin-block: var(--space-lede) 0;
  padding: 0;
  list-style: none;
}
.studio-home .sport-tile {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
}
/* The whole tile is the button: a plain block, no chrome of its own. */
.studio-home .sport-tile__hit {
  display: grid;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--r-28);
  background: none;
  box-shadow: none;
  color: var(--ink-secondary);
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.studio-home .sport-tile__hit:focus-visible {
  outline: none;
}
.studio-home .sport-tile__window {
  display: block;
  height: calc(var(--unit) * 4 / 3);
  border-radius: var(--r-28);
  outline: 3px solid transparent;
  outline-offset: 3px;
  transition: outline-color var(--dur-ui) var(--ease-out);
}
.studio-home .sport-tile__hit:focus-visible .sport-tile__window {
  outline-color: var(--ink);
}
.studio-home .sport-tile__window .field-window__media {
  object-position: var(--focus, 50% 50%);
  transform: none;
}
.studio-home .sport-tile__window img.field-window__media {
  transition: object-position 420ms var(--ease-out);
}
/* Each tile's rest frame (its poster, the clip's last frame) has a focal point, the
   athlete's centre in percent of the 720×960 frame (build-sport-tiles.py FOCAL, recorded in
   the sidecars). The slit shows a share f of the frame's width, so the object-position that
   puts the focal x mid-slit is p = (x − f/2) / (1 − f): at rest f = 146 / 298 (0.49) at
   1440, and beside an open tile f = 124 / 298 (0.417). y as recorded. */
.studio-home .sport-tile[data-sport='baseball'] {
  --focus: 7% 36%;
  --focus-slit: 12% 36%;
}
.studio-home .sport-tile[data-sport='basketball'] {
  --focus: 50% 55%;
  --focus-slit: 50% 55%;
}
.studio-home .sport-tile[data-sport='volleyball'] {
  --focus: 70% 66%;
  --focus-slit: 67% 66%;
}
.studio-home .sport-tile[data-sport='football'] {
  /* The rest frame is the line after the throw (cuts.tsv's window ends on the blocking):
     the slit holds the near lineman's helmet and jersey rather than the haze beside him. */
  --focus: 12% 55%;
  --focus-slit: 16% 55%;
}
.studio-home .sport-tile[data-sport='softball'] {
  --focus: 30% 50%;
  --focus-slit: 33% 50%;
}
.studio-home .sport-tile[data-sport='soccer'] {
  --focus: 66% 45%;
  --focus-slit: 64% 45%;
}
.studio-home .sport-tile[data-sport='lacrosse'] {
  --focus: 70% 52%;
  --focus-slit: 67% 52%;
}
.studio-home .sport-tile[data-sport='hockey'] {
  --focus: 30% 45%;
  --focus-slit: 33% 45%;
}
/* The clip fades in over its poster in 120ms once it plays, and stays on its last frame,
   which is the poster: nothing jumps when its source is dropped. */
.studio-home .sport-tile__video {
  opacity: 0;
  transition: opacity 120ms linear;
}
.studio-home
  .sport-tile:is([data-video-state='playing'], [data-video-state='ended'])
  .sport-tile__video {
  opacity: 1;
}
.studio-home .sport-tile__name {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: inherit;
  text-overflow: clip;
  white-space: nowrap;
  transition: color var(--dur-ui) var(--ease-out);
}
.studio-home .sport-tile:is([data-active], :hover) .sport-tile__hit {
  color: var(--ink);
}
@media (min-width: 1024px) {
  /* One open tile is exactly 3:4 at flex 2.4 of (tiles − 1) + 2.4 shares; every window
     keeps that height, open or at rest. */
  .studio-home .sport-band__rail.is-enhanced {
    --unit: calc((100cqw - (var(--tiles) - 1) * var(--gap)) / (var(--tiles) - 1 + 2.4));
  }
  .studio-home .sport-band__rail.is-enhanced .sport-tile__window {
    height: calc(var(--unit) * 2.4 * 4 / 3);
  }
  .studio-home .sport-band__rail.is-enhanced .sport-tile {
    transition: flex-grow 420ms var(--ease-out);
  }
  .studio-home .sport-band__rail.is-enhanced .sport-tile[data-active] {
    flex-grow: 2.4;
  }
  .studio-home
    .sport-band__rail.is-enhanced:has([data-active])
    .sport-tile:not([data-active])
    .field-window__media {
    object-position: var(--focus-slit, var(--focus, 50% 50%));
  }
  /* The open tile shows the whole 3:4 frame: no object-position bias. */
  .studio-home .sport-band__rail.is-enhanced .sport-tile[data-active] .field-window__media {
    object-position: 50% 50%;
  }
}
@media (max-width: 1023px) {
  .studio-home .sport-band__head > .sport-band__tag {
    grid-column: 1 / -1;
  }
  /* A scroll-snap row across the page's full width; its first tile starts on the page
     column's edge and every tile snaps there. Only the far edge fades. */
  .studio-home .sport-band__rail {
    --tile: min(36vw, 300px);
    --edge: max(20px, calc(50vw - var(--page) / 2));
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    padding: 4px var(--edge) 4px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-padding-inline: var(--edge);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
  }
  .studio-home .sport-band__rail::-webkit-scrollbar {
    display: none;
  }
  .studio-home .sport-tile {
    flex: 0 0 var(--tile);
    scroll-snap-align: start;
  }
  .studio-home .sport-tile__window {
    height: calc(var(--tile) * 4 / 3);
  }
  /* A whole 3:4 tile shows the whole frame. */
  .studio-home .sport-tile__window .field-window__media {
    object-position: 50% 50%;
  }
}
@media (max-width: 760px) {
  .studio-home .sport-band__rail {
    --tile: 64vw;
    --edge: 20px;
  }
  .studio-home .sport-tile__hit {
    gap: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .studio-home .sport-tile__video {
    display: none;
  }
  .studio-home .sport-band__rail.is-enhanced .sport-tile,
  .studio-home .sport-tile__window img.field-window__media {
    transition: none;
  }
}
/* Fix round 2 (P4): at the end of the snap row nothing lies past the far edge, so its fade
   goes (src/sport-band.js sets data-rail-end) and the last tile and its ring show whole. */
@media (max-width: 1023px) {
  .studio-home .sport-band__rail[data-rail-end] {
    -webkit-mask-image: none;
    mask-image: none;
  }
}
/* r6:sports end */

/* r6:team start */
/* ─── #team · round 6: one device, a benefit panel, numbered markers ──────────────── */
/* Chapter 4 (round 6, 2026-09-24). The stage (a recessed pearl well) takes columns 1–6
   and, on column 7, the benefit panel: the tabs, then the selected tab's title, lede and
   two or three numbered notes at body size, each naming a real element of the capture on
   show; the same numbers sit on the screen as markers. The panel's tabs start level with
   the device's top (the grid's first row is the device's inset). Below 1024px the panel
   goes under the stage; on phones the tabs lead, then the row of screens, the caption tag,
   the panel and the link. The loupes, their discs, tethers and callouts are gone; the rules
   above for .loupe*, .app-reel__loupes and .tour-points are dead and can be deleted. This
   block overrides every earlier .app-module / .app-reel / .tour-* rule it needs to. */
.studio-home .app-module__grid {
  position: relative;
  align-items: start;
  margin-top: clamp(32px, 3.4vw, 48px);
}
/* The stage. The well is exactly as tall as the device needs: 48px above it (clear of the
   corner tag), 712 of the capture's 844 board px, then a 40px fade into the well's floor,
   so every marked element is whole and unfaded at any viewport height. */
.studio-home .app-reel {
  --device-w: clamp(300px, 26.4vw, 380px);
  --row-w: 280px;
  --row-h: calc(56px + var(--row-w) * 844 / 390 * 0.84);
  position: relative;
  grid-column: 1 / span 6;
  grid-row: 1 / -1;
  width: auto;
  max-width: none;
  height: var(--row-h);
  margin: 0;
  border: 1px solid light-dark(rgb(255 255 255 / 55%), rgb(255 255 255 / 6%));
  border-radius: var(--r-40);
  background: var(--surface);
  box-shadow: var(--e-inset-lg);
  overflow: hidden;
}
.studio-home .app-reel[data-reel-layout='device'] {
  height: calc(48px + var(--device-w) * 712 / 390 + 40px);
}
.studio-home .app-reel__stage {
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - 40px), transparent);
}
.studio-home .app-reel:not([data-reel-layout='device']) .app-reel__plane {
  aspect-ratio: auto;
  height: calc(var(--row-w) * 844 / 390 * 0.84);
}
/* Focus (fix round 2, P3). A screen runs past the well's floor by design (the device is cut
   at 712 of 844 board px, the row at 84%), so an outline on the link is clipped by the
   stage and faded by its mask. The ring is drawn inside the screen instead, on the part
   the well shows unfaded: a 3px ink line with a 2px white keyline inside it, following the
   screen's corners, ending just above the 40px fade (2px at 390 and 1440, measured). */
.studio-home .app-reel__plane:focus-visible {
  outline: none;
}
.studio-home .app-reel__plane::after {
  content: '';
  position: absolute;
  z-index: 2;
  inset: 0 0 36px;
  border-radius: var(--corner);
  box-shadow:
    inset 0 0 0 3px var(--ink),
    inset 0 0 0 5px rgb(255 255 255 / 92%);
  opacity: 0;
  pointer-events: none;
}
.studio-home .app-reel[data-reel-layout='device'] .app-reel__plane::after {
  bottom: auto;
  height: calc(var(--device-w) * 712 / 390 - var(--bezel) - 4px);
}
.studio-home .app-reel__plane:focus-visible::after {
  opacity: 1;
}
/* Markers on the screen: a layer the exact shape of the capture (390×844) over the image,
   so a marker's percentages are board coordinates at every width, in the row too. */
.studio-home .app-reel__marks {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 390 / 844;
  pointer-events: none;
}
.studio-home .app-reel__mark {
  --mark: 24px;
  position: absolute;
  top: var(--my);
  left: var(--mx);
  box-sizing: border-box;
  width: var(--mark);
  height: var(--mark);
  margin: calc(var(--mark) / -2) 0 0 calc(var(--mark) / -2);
  border-radius: 50%;
  background: var(--ink);
  box-shadow:
    0 0 0 2px rgb(255 255 255 / 92%),
    0 2px 6px rgb(13 15 20 / 35%);
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--fs-13);
  font-weight: 600;
  line-height: var(--lh-ui);
  display: grid;
  place-items: center;
  pointer-events: auto;
  transition:
    opacity var(--dur-ui) var(--ease-out),
    transform var(--dur-ui) var(--ease-out);
}
/* Where each marker sits, from the capture's own points. Site refresh 2026-10-19 (lane D1):
   the ring shows real app captures (public/previews/app-real/, iPhone 17 Pro, 402x874 pt,
   delivered as 390-wide webps, 390x848); x / 390 and y / 844, the plane's own shape, since the
   capture fills the plane from its top edge at the plane's width. */
.studio-home [data-mark='schedule-1'] {
  --mx: 5.13%;
  --my: 50.4%;
} /* the Next up card: Tuesday's practice */
.studio-home [data-mark='schedule-2'] {
  --mx: 5.13%;
  --my: 68.4%;
} /* Is Eli C. going? Going / Can't */
.studio-home [data-mark='schedule-3'] {
  --mx: 95%;
  --my: 29.7%;
} /* the last game, 4-1 over the Creekside Eagles */
.studio-home [data-mark='messages-1'] {
  --mx: 5.13%;
  --my: 37.7%;
} /* Team Chat, pinned first */
.studio-home [data-mark='messages-2'] {
  --mx: 95%;
  --my: 44.5%;
} /* the treasurer's direct message */
.studio-home [data-mark='messages-3'] {
  --mx: 5.13%;
  --my: 58.3%;
} /* the Fall Classic carpool group */
.studio-home [data-mark='roster-1'] {
  --mx: 5.13%;
  --my: 34.6%;
} /* People · Fan · Stats · Media · More */
.studio-home [data-mark='roster-2'] {
  --mx: 95%;
  --my: 42.3%;
} /* Eli C. with Lena Chen */
.studio-home [data-mark='roster-3'] {
  --mx: 95%;
  --my: 86.6%;
} /* Add more team members */
.studio-home [data-mark='payments-1'] {
  --mx: 50%;
  --my: 17.7%;
} /* $350 of $490 collected */
.studio-home [data-mark='payments-2'] {
  --mx: 50%;
  --my: 22.9%;
} /* Due Nov 6 at 8:00 AM */
.studio-home [data-mark='payments-3'] {
  --mx: 62%;
  --my: 60%;
} /* Who has paid: Lena Chen unpaid */
/* Note ↔ marker: pointing at one lifts the other and quiets the rest. */
.studio-home .app-reel[data-note-hover] .app-reel__mark {
  opacity: 0.4;
}
.studio-home .app-reel[data-note-hover='1'] .app-reel__mark[data-n='1'],
.studio-home .app-reel[data-note-hover='2'] .app-reel__mark[data-n='2'],
.studio-home .app-reel[data-note-hover='3'] .app-reel__mark[data-n='3'] {
  opacity: 1;
  transform: scale(1.18);
}
.studio-home .app-module__body[data-mark-hover] .app-note {
  opacity: 0.55;
}
.studio-home .app-module__body[data-mark-hover='1'] .app-note[data-n='1'],
.studio-home .app-module__body[data-mark-hover='2'] .app-note[data-n='2'],
.studio-home .app-module__body[data-mark-hover='3'] .app-note[data-n='3'] {
  opacity: 1;
}
.studio-home .app-module__body[data-mark-hover='1'] .app-note[data-n='1'] .app-note__n,
.studio-home .app-module__body[data-mark-hover='2'] .app-note[data-n='2'] .app-note__n,
.studio-home .app-module__body[data-mark-hover='3'] .app-note[data-n='3'] .app-note__n {
  transform: scale(1.18);
}
/* The panel column: the tabs lead it, left-aligned on column 7, one tab stop, never
   sticky; then the panels in one shared cell; then the chapter's link. */
.studio-home .app-module__tabs {
  position: static;
  grid-column: 7 / -1;
  grid-row: 2;
  width: fit-content;
  max-width: 100%;
  margin: 0;
}
.studio-home .tour-scenes {
  grid-column: 7 / -1;
  grid-row: 3;
  display: grid;
  row-gap: 0;
  margin-top: 32px;
  padding: 0;
}
.studio-home .app-module .tour-scene {
  display: block;
  grid-area: 1 / 1;
  scroll-margin-top: 104px;
}
.studio-home .app-module__body.is-enhanced .tour-scene[hidden] {
  display: block;
  visibility: hidden;
}
/* The screen's name shows only without JavaScript, when every panel is listed in turn. */
.studio-home .tour-scene__screen {
  display: none;
  margin: 0 0 8px;
  color: var(--ink-secondary);
  font-size: var(--fs-15);
  font-weight: 600;
  line-height: var(--lh-ui);
}
.studio-home .app-module__body:not(.is-enhanced) .tour-scene__screen {
  display: block;
}
.studio-home .app-module .tour-scene__story {
  display: block;
  max-width: 52ch;
}
.studio-home .app-module .tour-scene__story > * {
  grid-column: auto;
}
.studio-home .app-module .tour-scene__story h3 {
  max-width: 24ch;
  margin: 0 0 12px;
  color: var(--ink);
  text-wrap: balance;
}
.studio-home .app-module .tour-scene__story > p:not(.tour-fee-note) {
  max-width: 52ch;
  margin: 0;
  color: var(--ink-secondary);
  font-size: var(--fs-17);
  line-height: var(--lh-prose);
  text-wrap: pretty;
}
/* The notes: body size, in ink, each led by the marker's number. */
.studio-home .app-notes {
  display: grid;
  gap: 14px;
  max-width: 52ch;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.studio-home .app-note {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  column-gap: 14px;
  align-items: start;
  margin: 0;
  padding: 0;
  transition: opacity var(--dur-ui) var(--ease-out);
}
.studio-home .app-note__n {
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 2px rgb(255 255 255 / 92%);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: var(--fs-13);
  font-weight: 600;
  line-height: var(--lh-ui);
  transition: transform var(--dur-ui) var(--ease-out);
}
.studio-home .app-note__text {
  color: var(--ink);
  font-size: var(--fs-17);
  line-height: var(--lh-prose);
  text-wrap: pretty;
}
.studio-home .app-module__more {
  grid-column: 7 / -1;
  grid-row: 4;
  margin: 28px 0 0;
  font-size: var(--fs-17);
  font-weight: 600;
  line-height: var(--lh-ui);
}
/* Entrance on a tab change: the panel rises (home.css's home-story-in) and its notes
   follow, 60ms apart. */
.studio-home .app-note:nth-child(2) {
  --i: 1;
}
.studio-home .app-note:nth-child(3) {
  --i: 2;
}
@media (prefers-reduced-motion: no-preference) {
  .studio-home .app-module .tour-scene.is-entering .tour-scene__story {
    animation: home-story-in var(--dur-reveal) var(--ease-out) both;
  }
  .studio-home .app-module .tour-scene.is-entering .app-note {
    animation: home-note-in 320ms var(--ease-out) both;
    animation-delay: calc(80ms + var(--i, 0) * 60ms);
  }
}
/* Restated here so this block stands alone once the round-5 #team rules are deleted. */
@keyframes home-story-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}
@keyframes home-note-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .studio-home .app-reel__mark,
  .studio-home .app-note,
  .studio-home .app-note__n {
    transition: none;
  }
  .studio-home .app-reel[data-note-hover] .app-reel__mark,
  .studio-home .app-module__body[data-mark-hover] .app-note .app-note__n {
    transform: none;
  }
}
/* The panel group (.app-module__panel: the tabs, the panels, the link). Below 1024px it is
   display: contents, so its three children stay items of the grid (and of the phone flex
   column) exactly as before. */
.studio-home .app-module__panel {
  display: contents;
}
/* From 1024px the panel group is top-aligned with the device (fix round 1, M1): row 1 is
   the well's 1px edge plus the device's 48px inset, so the tabs' top sits level with the
   screen's top. Fix round 2 (P2): the group is one sticky box in row 2, which runs to the
   well's floor, so it travels beside the device as the chapter scrolls, 24px under the
   capsule's resting lower edge (78px, the same fallback --season-cap uses; site.js
   measures --capsule-bottom on the header only, so it does not reach here), and stops
   with its bottom on the grid's, the well's bottom. Top-aligned and static, it left
   ~300px of empty pearl under the link beside the 782px well at 1440. The tabs inside
   stay position: static. */
@media (min-width: 1024px) {
  .studio-home .app-module__grid {
    grid-template-rows: 49px minmax(0, 1fr);
  }
  .studio-home .app-module__panel {
    position: sticky;
    top: calc(78px + 24px);
    display: block;
    grid-column: 7 / -1;
    grid-row: 2;
    align-self: start;
    min-width: 0;
  }
  .studio-home .app-module__body:not(.is-enhanced) .tour-scenes {
    margin-top: 0;
  }
}
/* Below 1024px the panel goes under the stage: the tabs centred above it, the well across
   the column, then the panel and the link. */
@media (max-width: 1023px) {
  .studio-home .app-module__grid {
    grid-template-rows: none;
  }
  .studio-home .app-module__tabs {
    order: 1;
    grid-column: 1 / -1;
    grid-row: auto;
    justify-self: center;
    margin: 0;
  }
  .studio-home .app-reel {
    order: 2;
    grid-column: 1 / -1;
    grid-row: auto;
    margin-top: 24px;
  }
  /* The corner tag rides the well, which now sits under the 52px tabs and their 24px gap. */
  .studio-home .tour-scenes {
    order: 3;
    grid-column: 1 / -1;
    grid-row: auto;
    margin-top: 32px;
  }
  .studio-home .app-module .tour-scene__story {
    max-width: 60ch;
  }
  .studio-home .app-module__more {
    order: 4;
    grid-column: 1 / -1;
    grid-row: auto;
  }
}
/* Phones: the four screens in a native scroll-snap row (cut at 84% of the device's height,
   below every marker, and faded into the well), the caption tag under the row (soft.css
   order 2), then the panel and the link. Markers shrink with the screen. */
@media (max-width: 760px) {
  .studio-home .app-reel {
    --row-w: min(78vw, 300px);
    border-radius: var(--r-28);
  }
  .studio-home .app-reel__mark {
    --mark: 22px;
  }
  .studio-home .app-module__grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .studio-home .app-module__tabs {
    width: 100%;
    max-width: none;
  }
  .studio-home .tour-scenes {
    order: 4;
    margin-top: 28px;
  }
  .studio-home .app-module__more {
    order: 5;
    margin-top: 24px;
  }
  .studio-home .app-notes {
    gap: 12px;
  }
}
/* No JavaScript (fix round 1, M2): one screen, Schedule, with its three markers, and the
   Schedule panel, named; the other three screens and panels are not drawn (the tabs that
   would reach them need the script, and "Explore the app →" carries the rest). From 761px
   the one screen takes the device's size and inset, so the well reads as it does with the
   script. */
.studio-home .app-module__body:not(.is-enhanced) .app-reel__card:not([data-reel-key='schedule']),
.studio-home .app-module__body:not(.is-enhanced) .tour-scene:not([data-tour-panel='schedule']) {
  display: none;
}
.studio-home .app-module__body:not(.is-enhanced) .tour-scene {
  grid-area: auto;
}
@media (min-width: 761px) {
  .studio-home .app-module__body:not(.is-enhanced) .app-reel {
    --row-w: var(--device-w);
    height: calc(48px + var(--device-w) * 712 / 390 + 40px);
  }
  .studio-home .app-module__body:not(.is-enhanced) .app-reel__track {
    padding-top: 48px;
  }
  .studio-home .app-module__body:not(.is-enhanced) .app-reel__plane {
    --bezel: 10px;
  }
}
/* Large screens (round 5, call 16) widened the app stage to --stage-wide; the stage now
   shares the column with the panel, so it stays on its six columns and its tag on its
   corner. */
@media (min-width: 1680px) {
  .studio-home .app-reel {
    width: auto;
    max-width: none;
    margin-inline: 0;
  }
}
/* r6:team end */

/* r6:trinity start */
/* L-trinity, round 6: every #trinity rule lives in public/trinity.css, which the homepage
   head already links after home.css. Nothing to append here. The retired theatre's rules
   in home.css (.trinity-panels, .director-*, .demo__*, .trinity-chapter__transcript) are
   unused by the new fragment and can be removed by the integrator at leisure. */
/* r6:trinity end */

/* Astra visual finish: app blue identifies exploration, never payment/status.
   Numbered annotations keep their labels and shape; selected tabs retain the raised thumb. */
.studio-home .app-module__tabs > [aria-pressed='true'] {
  color: var(--app-accent-ink);
}
.studio-home .app-module__tabs > [aria-pressed='true']::after {
  content: '';
  position: absolute;
  bottom: 6px;
  left: calc(50% - 10px);
  width: 20px;
  height: 2px;
  background: var(--app-accent);
  pointer-events: none;
}
.studio-home :is(.app-reel__mark, .app-note__n) {
  /* The marks sit on the light app captures in both schemes, so dark keeps the light blue
     (white numerals at 5:1); the dark accent would put them at 2.8:1. */
  background: light-dark(var(--app-accent), #0060fc);
}
.studio-home .app-module__more a {
  color: var(--app-accent-ink);
  text-decoration-color: currentColor;
}
.studio-home .app-module__body[data-mark-hover] .app-note {
  opacity: 1;
}
.studio-home .app-reel__plane:focus-visible::after {
  box-shadow:
    inset 0 0 0 3px light-dark(var(--app-accent), #0060fc),
    inset 0 0 0 5px white;
}
@media (forced-colors: active) {
  .studio-home :is(.app-reel__mark, .app-note__n) {
    background: CanvasText;
    color: Canvas;
  }
}

/* Astra execution: the existing chapters become a coherent sports-product story.
   Backgrounds stay quiet; accents identify product state and useful annotations. */
.studio-home .chapter-head {
  position: relative;
}
.studio-home :is(.season, .app-module, .sport-band, .families, .closing) > .chapter-head {
  border-top: 1px solid var(--border);
  padding-top: 36px;
}
/* Quiet Pearl stages: depth belongs to the product, not drawn court markings. */
.studio-home .app-reel {
  background: linear-gradient(145deg, var(--surface-lift), var(--surface));
  box-shadow: inset 0 1px 0 light-dark(rgb(255 255 255 / 70%), rgb(255 255 255 / 5%));
}
.studio-home .app-reel__stage {
  z-index: 1;
}
.studio-home .app-module__panel {
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid light-dark(rgb(255 255 255 / 65%), rgb(255 255 255 / 6%));
  border-radius: var(--r-28);
  box-shadow: var(--e-raised-lg);
  background: var(--surface);
}
.studio-home .app-module__tabs {
  margin-bottom: 32px;
}
.studio-home .app-note {
  padding-block: 18px;
  border-top: 1px solid var(--border);
}
.studio-home .app-note__n {
  background: var(--app-accent-wash);
  color: var(--app-accent-ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app-accent) 20%, var(--surface));
}
.studio-home .app-module__more {
  margin-top: 24px;
}
/* Room for the tiles' rings and shadows under the rail, taken back so it adds no gap. */
.studio-home .sport-band__rail {
  padding-bottom: 20px;
  margin-bottom: -20px;
}
.studio-home .sport-tile__window {
  transition: box-shadow 300ms var(--ease-athletic);
}
.studio-home .sport-tile__hit:hover .sport-tile__window,
.studio-home .sport-tile__hit:focus-visible .sport-tile__window {
  box-shadow: 0 18px 28px -18px rgb(9 14 18 / 50%);
}
.studio-home .sport-tile__name {
  padding-top: 14px;
}
.studio-home .sport-tile__hit[aria-pressed='true'] .sport-tile__name {
  color: var(--app-accent-ink);
}

.studio-home .families__scene {
  position: relative;
}
.studio-home .families__trust {
  border-radius: var(--r-28);
  padding: 28px;
  box-shadow: var(--e-inset-lg);
}
@media (max-width: 1023px) {
  .studio-home .app-module__panel {
    padding: 24px;
  }
  .studio-home .app-module__tabs {
    margin-bottom: 0;
  }
}
@media (min-width: 1024px) and (max-width: 1180px) {
  .studio-home .app-module__panel {
    padding: 24px;
  }
  .studio-home .app-module__tabs {
    margin-bottom: 24px;
  }
  .studio-home .app-note {
    padding-block: 12px;
  }
}
@media (max-width: 760px) {
  .studio-home :is(.season, .app-module, .sport-band, .families, .closing) > .chapter-head {
    padding-top: 28px;
  }
  .studio-home .families__trust {
    padding: 24px;
  }
}

/* Opus finish, 2026-09-24: measured rhythm. Every chapter opened with 128px of shell, a
   rule and 36px more, so 150–185px of nothing sat between one chapter's last content and
   the next heading at 1440 (a fifth of the viewport). The shell tightens here only, where
   each chapter already carries its own rule; the other pages keep soft.css's gap. */
.studio-home {
  --section-gap: clamp(64px, 7vw, 104px);
}
.studio-home :is(.season, .app-module, .sport-band, .families, .closing) > .chapter-head {
  padding-top: 30px;
}
/* The chapter rule becomes a lineup marker: a short bar in the chapter's app role, set on the
   rule's left end. Blue is context and the app's selected state, orange is getting ready,
   green is going, and the sports band takes the welcome ramp. Decorative, no text. */
.studio-home :is(.season, .app-module, .sport-band, .families, .closing) > .chapter-head::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  width: 56px;
  height: 3px;
  border-radius: 0 0 2px 2px;
  background: var(--chapter-accent, var(--app-accent));
  pointer-events: none;
}
.studio-home .season {
  --chapter-accent: var(--sport-orange);
}
.studio-home .app-module {
  --chapter-accent: var(--app-accent);
}
.studio-home .sport-band {
  --chapter-accent: linear-gradient(
    90deg,
    var(--masthead-orange, #ff7c2a),
    var(--masthead-red, #ff2a43),
    var(--masthead-magenta, #c52a92)
  );
}
.studio-home .families {
  --chapter-accent: var(--sport-green);
}
.studio-home .closing {
  --chapter-accent: var(--brand-red, #ff2a43);
}
@media (max-width: 760px) {
  .studio-home :is(.season, .app-module, .sport-band, .families, .closing) > .chapter-head {
    padding-top: 24px;
  }
  .studio-home :is(.season, .app-module, .sport-band, .families, .closing) > .chapter-head::before {
    width: 40px;
  }
}

/* Lane H · viewport fit, 2026-09-25. Each chapter budgets its own heading and
   media against the viewport; disclosures expand in document flow. */
.studio-home :is(.season, .app-module, .sport-band, .families, .closing) {
  --fit-header: 96px;
  --fit-pad: clamp(16px, 2.5svh, 28px);
  padding-block: 0;
}
.studio-home :is(.season, .app-module, .sport-band, .families, .closing) > .chapter-head {
  padding-top: 16px;
}
.studio-home :is(.app-module__grid, .sport-band__rail, .families__scene, .value) {
  margin-top: var(--space-lede);
}
.studio-home :is(.season, .families) {
  display: flex;
  flex-direction: column;
  gap: var(--space-lede);
}
.studio-home :is(.families__scene) {
  margin-top: 0;
}
.studio-home .app-module__panel {
  position: static;
  padding: 20px;
}
.studio-home .app-module__tabs {
  margin-bottom: 16px;
}
.studio-home .tour-scenes {
  margin-top: 16px;
}
.studio-home .app-notes {
  margin-top: 16px;
  gap: 8px;
}
.studio-home .app-note {
  padding-block: 8px;
}
.studio-home .app-module__more {
  margin-top: 12px;
}
.studio-home .app-reel {
  --device-w: min(380px, calc((100svh - 330px) * 390 / 844));
}
.studio-home .app-reel[data-reel-layout='device'] {
  height: calc(60px + var(--device-w) * 844 / 390);
}
.studio-home .app-module__grid {
  grid-template-rows: 24px minmax(0, 1fr);
}
.studio-home .app-reel[data-reel-layout='device'] .app-reel__track {
  padding-top: 40px;
}
.studio-home .app-reel__stage {
  mask-image: none;
  -webkit-mask-image: none;
}
.studio-home .sport-band__rail.is-enhanced .sport-tile__window {
  height: min(calc(var(--unit) * 2.4 * 4 / 3), calc(100svh - 370px));
}
.studio-home .sport-tile__name {
  padding-top: 0;
}
.studio-home .sport-band__head > .sport-band__tag {
  margin-top: 8px;
}
.studio-home .families__head {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
}
.studio-home .families__head > * {
  grid-column: auto;
}
.studio-home .families__head h2 {
  font-size: var(--d-h2);
  line-height: var(--d-h2-lh);
  letter-spacing: var(--d-h2-ls);
}
.studio-home .families__window {
  width: 100%;
  margin: 0;
  height: max(410px, calc(100svh - 300px));
  min-height: 0;
  aspect-ratio: auto;
}
.studio-home .families__read {
  margin-top: 0;
}
.studio-home .families__trust {
  padding: 24px;
}
.studio-home .families__facts > li {
  padding-block: 10px;
}
.studio-home .value {
  row-gap: 12px;
}

@media (max-height: 820px) and (min-width: 1024px) {
  .studio-home :is(.season, .app-module, .sport-band, .families, .closing) {
    --fit-pad: 12px;
  }
  .studio-home :is(.season, .app-module, .sport-band, .families, .closing) > .chapter-head {
    padding-top: 12px;
  }
  .studio-home :is(.season, .app-module, .families) .chapter-lede {
    font-size: var(--fs-17);
  }
  .studio-home .app-module__panel {
    padding: 16px;
  }
  .studio-home .app-note__text {
    font-size: var(--fs-15);
    line-height: 1.35;
  }
  .studio-home .app-module .tour-scene__story > p:not(.tour-fee-note) {
    font-size: var(--fs-15);
  }
  .studio-home .families__window {
    height: calc(100svh - 260px);
  }
  .studio-home .value {
    margin-top: 12px;
    row-gap: 8px;
  }
}
@media (max-width: 760px) {
  .studio-home :is(.season, .app-module, .sport-band, .families, .closing) {
    --fit-header: 76px;
    --fit-pad: 16px;
  }
  .studio-home :is(.season, .app-module, .sport-band, .families, .closing) > .chapter-head {
    padding-top: 12px;
    gap: 12px;
  }
  .studio-home :is(.season, .app-module, .sport-band, .families, .closing) .chapter-lede {
    font-size: var(--fs-15);
    line-height: 1.4;
  }
  .studio-home :is(.season, .families) {
    gap: 16px;
  }
  .studio-home .app-module__grid {
    margin-top: 12px;
    gap: 0;
  }
  .studio-home .app-module__panel {
    padding: 0;
  }
  .studio-home .app-module__tabs {
    margin: 0;
  }
  .studio-home .app-reel {
    --row-w: min(58vw, calc(40svh * 390 / 844));
    --row-h: calc(24px + var(--row-w) * 844 / 390);
    height: var(--row-h);
    margin-top: 12px;
  }
  .studio-home .app-reel:not([data-reel-layout='device']) .app-reel__plane {
    height: auto;
    aspect-ratio: 390 / 844;
  }
  .studio-home .app-reel__track {
    padding-block: 12px;
  }
  .studio-home .tour-scenes {
    margin-top: 12px;
  }
  .studio-home .app-module .tour-scene__story h3 {
    margin-bottom: 8px;
  }
  .studio-home .app-module .tour-scene__story > p:not(.tour-fee-note) {
    font-size: var(--fs-15);
    line-height: 1.35;
  }
  .studio-home .app-notes {
    display: flex;
    max-width: none;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    margin-top: 10px;
    padding: 2px;
  }
  .studio-home .app-note {
    flex: 0 0 87%;
    scroll-snap-align: start;
    column-gap: 10px;
  }
  .studio-home .app-note__text {
    font-size: var(--fs-15);
    line-height: 1.35;
  }
  .studio-home .app-module__more {
    margin-top: 4px;
  }
  .studio-home .sport-band__rail {
    --tile: min(74vw, calc((100svh - 320px) * 3 / 4));
  }
  .studio-home .sport-band__rail.is-enhanced .sport-tile__window {
    height: calc(var(--tile) * 4 / 3);
  }
  .studio-home .families__head {
    grid-template-columns: 1fr;
  }
  .studio-home .families__window {
    height: 480px;
  }
  .studio-home .families__read {
    row-gap: 16px;
  }
  .studio-home .families__trust {
    padding: 20px;
  }
  .studio-home .families__facts > li {
    padding-block: 8px;
  }
}
/* Keep chapter copy on the shared type scale; override the older :root head rules. */
.studio-home
  :is(.season, .app-module, .sport-band, .families, .closing)
  > .chapter-head
  > .chapter-lede {
  margin: 0;
  padding: 0;
  font-size: var(--fs-17);
  line-height: var(--lh-ui);
}
.studio-home .families > .chapter-head.chapter-head--wide > h2 {
  grid-column: 1;
}
.studio-home .families > .chapter-head.chapter-head--wide > h2 + .chapter-lede {
  grid-column: 2;
}
@media (max-height: 820px) and (min-width: 1024px) {
  .studio-home .app-note__text {
    line-height: var(--lh-ui);
  }
}
@media (max-width: 760px) {
  .studio-home
    :is(.season, .app-module, .sport-band, .families, .closing)
    > .chapter-head
    > .chapter-lede {
    font-size: var(--fs-15);
  }
  .studio-home .families > .chapter-head.chapter-head--wide > :is(h2, .chapter-lede) {
    grid-column: 1;
  }
  .studio-home .app-note__text,
  .studio-home .app-module .tour-scene__story > p:not(.tour-fee-note) {
    line-height: var(--lh-ui);
  }
  .studio-home .app-reel {
    --row-w: min(58vw, calc(34svh * 390 / 844));
  }
  .studio-home .app-module__body.is-enhanced .tour-scene[hidden] {
    display: none;
  }
}
.studio-home .families__window {
  height: max(410px, calc(100svh - 310px));
}
@media (min-width: 761px) {
  .studio-home #plans > .chapter-head {
    padding-top: 12px;
  }
  .studio-home .value {
    margin-top: 12px;
    gap: 8px var(--grid-gap);
  }
}
@media (max-height: 820px) and (min-width: 1024px) {
  .studio-home .families__window {
    height: calc(100svh - 270px);
  }
}
@media (max-width: 760px) {
  .studio-home .app-reel {
    --row-w: min(58vw, calc(30svh * 390 / 844));
  }
  .studio-home .app-module .tour-scene__story h3 {
    font-size: var(--fs-20);
    line-height: var(--lh-ui);
    letter-spacing: 0;
    max-width: none;
  }
  .studio-home .families__window {
    height: 480px;
  }
}
@media (min-width: 761px) {
  .studio-home :is(.season, .app-module, .sport-band) > .chapter-head > .chapter-lede {
    padding-top: 6px;
  }
}
@media (max-height: 820px) and (min-width: 1024px) {
  .studio-home #plans .value {
    margin-top: 8px;
    row-gap: 4px;
  }
}
.studio-home .fit-rail-hint {
  display: none;
}
@media (max-width: 760px) {
  .studio-home :is(.season, .app-module, .families-promises) {
    --fit-pad: 8px;
  }
  .studio-home .fit-rail-hint {
    display: block;
    color: var(--ink-secondary);
    font-size: var(--fs-13);
    line-height: var(--lh-ui);
    margin: 0;
  }
  .studio-home .app-notes::before {
    content: '3 notes →';
    position: sticky;
    left: 0;
    align-self: start;
    flex: 0 0 44px;
    font-size: var(--fs-13);
    line-height: var(--lh-ui);
    background: var(--surface);
  }
  .studio-home .sport-band__rail::before {
    content: '8 sports →';
    flex: 0 0 44px;
    font-size: var(--fs-13);
    line-height: var(--lh-ui);
  }
}
@media (min-width: 761px) {
  .studio-home .families__window {
    height: max(410px, calc(100svh - 322px));
  }
}
@media (max-height: 820px) and (min-width: 1024px) {
  .studio-home .families__window {
    height: calc(100svh - 282px);
  }
}
@media (min-width: 761px) {
  .studio-home .app-module__body:not(.is-enhanced) .app-reel {
    height: calc(60px + var(--device-w) * 844 / 390);
  }
  .studio-home .app-module__body:not(.is-enhanced) .app-reel__plane {
    height: auto;
    aspect-ratio: 390 / 844;
  }
}
@media (max-width: 760px) {
  .studio-home .families > .chapter-head.chapter-head--wide > h2 + .chapter-lede {
    grid-column: 1;
  }
}
@media (min-width: 761px) and (max-width: 1023px) {
  .studio-home .app-module__grid {
    grid-template-rows: none;
  }
}
@media (max-width: 760px) {
  .studio-home .app-note--detail {
    display: block;
  }
}
@media (max-width: 760px) {
  .studio-home .app-reel {
    --row-w: min(58vw, calc(38svh * 390 / 844));
  }
  .studio-home .app-note--intro {
    display: block;
  }
  .studio-home .app-note--intro > p {
    margin: 0;
    font-size: var(--fs-15);
    line-height: var(--lh-ui);
  }
  .studio-home .app-notes::before {
    content: 'About + 3 notes →';
    position: static;
  }
}
@media (min-width: 761px) and (max-width: 1023px) {
  .studio-home .app-module__tabs {
    margin-bottom: 0;
  }
}
@media (max-width: 360px) {
  .studio-home .families__window {
    height: 540px;
  }
}
@media (max-width: 760px) {
  .studio-home .app-notes::before {
    content: none;
  }
  .studio-home .app-module .tour-scene__story > .fit-rail-hint {
    font-size: var(--fs-13);
    line-height: var(--lh-ui);
    margin: 0;
  }
}
@media (max-width: 360px) {
  .studio-home .families__scene {
    display: grid;
  }
  .studio-home .families__window {
    grid-area: 1 / 1;
    height: 100%;
    min-height: 540px;
  }
}

/* Lane SP (2026-10-20): one section gap (soft.css spacing scale) between every homepage
   section, hero included, and from the last section to the footer. The fit frames carry no
   padding of their own, so a gap is never netted against one. */
.studio-home main > section:not(.sports-hero) {
  margin-top: var(--space-section);
}
.studio-home .foot {
  padding-top: var(--space-section);
}

/* Restore the pearl dock at the photo edge. Budget its hang below the photo,
   retaining the original centred stage bleed and concave edge fillets. */
.studio-home #close {
  padding-bottom: 0;
  --closing-hang: 160px;
  --closing-type: var(--d-statement);
  --closing-leading: var(--d-statement-lh);
  --closing-inset: var(--window-inset);
}
.studio-home #close .closing__window {
  margin-top: 0;
  /* One extra pixel covers fractional line-box rounding at intermediate widths. */
  min-height: calc(
    3 * var(--closing-type) * var(--closing-leading) + var(--closing-inset) + 24px + 1px +
      var(--closing-rise)
  );
  height: min(
    clamp(620px, 58vw, 780px),
    calc(100svh - var(--fit-header) - var(--closing-hang) - var(--fit-pad))
  );
}
.studio-home #close .closing__window img.field-window__media {
  object-position: 50% 0%;
}
.studio-home #close .offer-lead__note {
  margin-top: 12px;
}
@media (min-width: 1680px) {
  .studio-home #close .closing__window {
    height: min(
      880px,
      calc(var(--stage-x) / 1.64),
      calc(100svh - var(--fit-header) - var(--closing-hang) - var(--fit-pad))
    );
  }
}
@media (max-height: 820px) and (min-width: 761px) {
  .studio-home #close {
    --closing-type: var(--d-h2);
    --closing-leading: var(--d-h2-lh);
  }
  .studio-home #close .closing__line {
    font-size: var(--d-h2);
    line-height: var(--d-h2-lh);
    letter-spacing: var(--d-h2-ls);
  }
}
@media (min-width: 761px) and (max-width: 1023px) {
  .studio-home #close {
    --closing-hang: 312px;
  }
  .studio-home #close .closing__window {
    height: min(
      calc((100vw - 80px) / 1.64),
      calc(100svh - var(--fit-header) - var(--closing-hang) - var(--fit-pad))
    );
  }
}
@media (max-width: 760px) {
  .studio-home #close {
    --closing-hang: 413px;
    --closing-inset: 64px;
  }
  .studio-home #close .closing__window {
    height: min(
      calc((100vw - 40px) * 5 / 4),
      max(320px, calc(100svh - var(--fit-header) - var(--closing-hang) - var(--fit-pad)))
    );
  }
  .studio-home #close .closing__window > picture > img,
  .studio-home #close .closing__window > .closing__scrim {
    height: 100%;
    bottom: 0;
  }
  .studio-home #close .closing__window img.field-window__media {
    object-position: 50% 0%;
  }
  .studio-home #close .closing__line {
    top: var(--closing-inset);
    font-size: var(--closing-type);
    line-height: var(--closing-leading);
    letter-spacing: var(--d-statement-ls);
    max-width: calc(var(--window-inset) * 2 + 7.4em);
  }
  .studio-home #close .closing__scrim {
    background: linear-gradient(
      180deg,
      rgb(9 12 11 / 82%) 0%,
      rgb(9 12 11 / 74%) 55%,
      rgb(9 12 11 / 22%) 75%,
      transparent 100%
    );
  }
  .studio-home #close .closing__offer {
    row-gap: 16px;
    padding-top: 16px;
  }
  .studio-home #close .closing__copy {
    margin-top: 8px;
  }
  .studio-home #close .offer-lead__head {
    margin-top: 8px;
  }
  .studio-home #close .offer-lead__price > span:first-child {
    font-size: var(--d-h2);
    line-height: var(--d-h2-lh);
    letter-spacing: var(--d-h2-ls);
  }
  .studio-home #close .closing__plans {
    margin-top: 0;
  }
  .studio-home #close .offer-lead__note {
    margin-top: 0;
    line-height: var(--lh-ui);
  }
}

/* r7:parts start */
/* ─── #parts + #gameday · site refresh, 2026-10-19 (lane D1) ─────────────────────────
   One chapter after #team, in two sections so each fits its viewport (DESIGN.md fit rule).
   #parts: three audience cards, each a raised pearl panel holding a footage window (a
   photograph already in public/media, decorative) over its name, one line and an honest
   status. #gameday: one recessed well with four raised tiles. Every card is one link: the
   heading's anchor is at least 44px tall and its ::after covers the card, so the whole card
   is the target and the accessible name stays the heading. Status pills carry a dot (green
   "Built, in testing", orange "In development"); the words carry the meaning, the dot only
   repeats it. From 1024px the cards share one row of the 12-column page; below it they
   become a native scroll-snap row that starts on the page column's edge, like #sports. */
.studio-home :is(.parts, .gameday) {
  --fit-pad: clamp(16px, 2.5svh, 28px);
  width: var(--page);
  margin-inline: auto;
  padding-block: 0;
}
.studio-home .parts {
  --chapter-accent: var(--app-accent);
}
.studio-home .parts > .chapter-head {
  border-top: 1px solid var(--border);
  padding-top: 16px;
}
.studio-home .parts > .chapter-head::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  width: 56px;
  height: 3px;
  border-radius: 0 0 2px 2px;
  background: var(--chapter-accent);
  pointer-events: none;
}
.studio-home .parts__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.studio-home .part {
  --r-outer: var(--r-28);
  --pad: 12px;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--pad);
  border-radius: var(--r-outer);
  background: var(--surface);
  box-shadow: var(--e-raised-lg);
  transition: box-shadow var(--dur-ui) var(--ease-out);
}
.studio-home .part__window {
  flex: none;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-16);
}
.studio-home .part__window .field-window__media {
  transition: transform 560ms var(--ease-athletic);
}
.studio-home .part[data-part='coaches'] .field-window__media {
  object-position: 62% 40%;
}
.studio-home .part[data-part='families'] .field-window__media {
  object-position: 50% 30%;
}
.studio-home .part[data-part='organizations'] .field-window__media {
  object-position: 50% 60%;
}
.studio-home .part__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  padding: 16px 12px 4px;
}
.studio-home .part__name {
  margin: 0;
}
.studio-home :is(.part__link, .day__link) {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
}
.studio-home :is(.part__link, .day__link)::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
}
.studio-home .part__line {
  margin: 0;
  color: var(--ink-secondary);
  font-size: var(--fs-15);
  line-height: var(--lh-prose);
}
.studio-home .part__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin: auto 0 0;
  padding-top: 12px;
}
/* The arrow: a raised pearl disc, the card's "go" affordance; decorative. */
.studio-home .part__go {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--e-raised-sm);
  color: var(--ink);
  transition:
    box-shadow var(--dur-ui) var(--ease-out),
    transform var(--dur-ui) var(--ease-out);
}
.studio-home .part__go::before {
  content: '';
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url('/icons/arrow-right.svg') center / 18px 18px no-repeat;
  mask: url('/icons/arrow-right.svg') center / 18px 18px no-repeat;
}
/* #gameday: one recessed well, a short head, four raised tiles. */
.studio-home .gameday__panel {
  display: grid;
  gap: 20px;
  padding: 28px;
  border-radius: var(--r-28);
  box-shadow: var(--e-inset-lg);
}
.studio-home .gameday__head {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: var(--grid-gap);
  align-items: baseline;
}
.studio-home .gameday__head h2 {
  margin: 0;
  color: var(--ink);
}
.studio-home .gameday__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.studio-home .day {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 20px 20px;
  border-radius: var(--r-16);
  background: var(--surface);
  box-shadow: var(--e-raised-sm);
  transition: box-shadow var(--dur-ui) var(--ease-out);
}
.studio-home .day__name {
  margin: 0;
  font: 600 var(--fs-17) / var(--lh-ui) var(--font-body);
}
.studio-home .day__link::before {
  content: '';
  flex: none;
  order: 2;
  width: 16px;
  height: 16px;
  margin-left: auto;
  background: currentColor;
  -webkit-mask: url('/icons/arrow-right.svg') center / 16px 16px no-repeat;
  mask: url('/icons/arrow-right.svg') center / 16px 16px no-repeat;
}
.studio-home .day__line {
  margin: 0;
  color: var(--ink-secondary);
  font-size: var(--fs-15);
  line-height: var(--lh-prose);
}
.studio-home .day__foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin: auto 0 0;
  padding-top: 4px;
}
.studio-home .day__plan {
  color: var(--ink-secondary);
  font-size: var(--fs-13);
  line-height: var(--lh-ui);
}
/* Hover and focus: the card lifts a step and its arrow presses forward; the photograph
   eases in. Focus draws the ring around the whole card (the link is the card's target). */
@media (hover: hover) {
  .studio-home .part:hover .part__go {
    box-shadow: var(--e-raised-lg);
    transform: translateX(2px);
  }
  .studio-home .part:hover .part__window .field-window__media {
    transform: scale(1.03);
  }
  .studio-home .day:hover {
    box-shadow: var(--e-raised-lg);
  }
}
.studio-home :is(.part, .day):has(:is(.part__link, .day__link):focus-visible) {
  outline: 3px solid var(--app-accent);
  outline-offset: 4px;
}
@supports selector(:has(a)) {
  .studio-home :is(.part__link, .day__link):focus-visible {
    outline: none;
  }
}
@media (max-width: 1180px) and (min-width: 1024px) {
  .studio-home .gameday__list {
    gap: 16px;
  }
  .studio-home .day {
    padding: 16px;
  }
}
@media (max-width: 1023px) {
  /* The audience cards become a scroll-snap row across the page's full width; the first
     card starts on the column's edge, only the far edge fades, and the row keeps room
     for the cards' raised shadow. */
  .studio-home .parts__list {
    --card: min(46vw, 400px);
    --edge: max(20px, calc(50vw - var(--page) / 2));
    display: flex;
    gap: 20px;
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    padding: 8px var(--edge) 28px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-padding-inline: var(--edge);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
  }
  .studio-home .parts__list::-webkit-scrollbar {
    display: none;
  }
  .studio-home .part {
    flex: 0 0 var(--card);
    scroll-snap-align: start;
    box-shadow: var(--e-raised-sm);
  }
  .studio-home .gameday__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .studio-home .parts > .chapter-head {
    padding-top: 24px;
  }
  .studio-home .parts > .chapter-head::before {
    width: 40px;
  }
  .studio-home .parts__list {
    --card: 78vw;
    --edge: 20px;
    gap: 16px;
    margin-top: 16px;
  }
  .studio-home .part__window {
    aspect-ratio: 3 / 2;
  }
  .studio-home .part__body {
    padding: 12px 8px 0;
  }
  .studio-home .gameday__panel {
    gap: 16px;
    padding: 16px;
  }
  .studio-home .gameday__head {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 8px;
  }
  /* One tile per row on phones: the status pill and its plan sit side by side under the
     line, so nothing is cut at the tile's edge. */
  .studio-home .gameday__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .studio-home .day {
    gap: 2px;
    padding: 8px 16px 14px;
  }
  .studio-home .day__line {
    font-size: var(--fs-13);
    line-height: var(--lh-ui);
  }
  .studio-home .day__foot {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    padding-top: 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .studio-home :is(.part, .day, .part__go, .part__window .field-window__media) {
    transition: none;
  }
  .studio-home .part:hover .part__window .field-window__media {
    transform: none;
  }
}
/* r7:parts end */

/* r7:families-app start */
/* ─── #families · a parent's TEAMON3, as the app draws it (2026-10-19, lane F) ────────── */
/* The owner asked for an accurate mobile app depiction: three real captures signed in as the
   sample parent replace the drawn guardian card (its .guardian-view / .gv-* rules were
   deleted by lane Z). The sideline window keeps its height rules and becomes a dark stage
   (the photo under a heavy scrim in both page themes, so the phones are the subject) and a
   size container, so the phones are sized from the window they stand in.

   Fix round (owner, 2026-10-19: ragged tops, an empty phone body, dark strips under the
   phones, rings crowding their text). One frame for all three phones: the same width, the
   same top edge and the same visible crop, 1.4 screen-widths tall (1688 of the capture's
   2622 rows), and every phone stands on the window's foot, cut by it and faded into it over
   28px. The group (notes, then phones) is packed against the foot (align-content: end), so
   any spare height goes above the notes, never into a phone; the three columns are centred,
   so the gutters either side match. Each screen fills its frame from the crop's first row:
   event detail and Team Chat from the top of the screen, notifications from row 865 (the
   hairline under the carpool and first Team Chat rows), so the "$35.00 due" row sits inside
   the crop at every size without pinning anything to the foot.

   Frame size: --fam-s is the screen width. It is the smaller of the width share (three
   columns, two gaps, the side padding) and the height share ((window - top padding - an
   84px note - 16px - the 8px top bezel) / 1.4), between 150px and 440px.

   The rings: one per phone, an outline drawn outside its target, placed from the capture
   PNG's own pixels (1206x2622, measured with a row/column profile) as percentages of the
   full image (also the ring layer's box). Each outer box is the target plus an even margin:
     event-rsvp  the event card's RSVP section ("Is Eli C. going?" + Going / Can't), from
                 its divider (y 979) to the card's foot (1238), x 48-1157; plus 12 rows/px
                 each side: x 36-1170, y 967-1250; corner = the card's (85 px) + 12
     chat-post   the coach's name and his event card (Sat Nov 7), x 168-920, y 551-1383;
                 plus 40 above and to each side (the name sits in the card's corner)
                 and 24 below (the coach's note bubble starts at 1384): x 128-960, y 511-1407
     alerts-fee  the "$35.00 due — Fall Classic …" row between its hairlines (y 2146-2327),
                 icon x 48 to time x 1155; ring x 24-1182
   So each ring keeps 10-15 capture px clear of its target's text at every size. The
   captures are light screens in both page themes, so the ring and the note numbers keep
   the light-theme app blue; the notes are on-dark ink over the scrim. Below 1024px the
   columns become a scroll-snap rail inside the window. */
.studio-home .families__window--app {
  container-type: size;
  --fam-ring: #0060fc;
}
.studio-home .families__window--app .families__scrim {
  background:
    linear-gradient(180deg, rgb(9 12 11 / 90%), rgb(9 12 11 / 74%) 40%, rgb(9 12 11 / 84%)),
    rgb(9 12 11 / 10%);
}
.studio-home .families__shots {
  --fam-pad: clamp(20px, 3.2cqw, 48px);
  --fam-note: 84px;
  --fam-gap: clamp(24px, 4cqw, 64px);
  --fam-s: clamp(
    150px,
    min(
      (100cqw - 2 * var(--fam-pad) - 2 * var(--fam-gap)) / 3 - 16px,
      (100cqh - var(--fam-pad) - var(--fam-note) - 24px) / 1.4
    ),
    440px
  );
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, calc(var(--fam-s) + 16px));
  grid-template-rows: auto auto;
  align-content: safe end;
  justify-content: center;
  column-gap: var(--fam-gap);
  margin: 0;
  padding: var(--fam-pad) var(--fam-pad) 0;
  list-style: none;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent);
}
.studio-home .fam-shot {
  grid-row: 1 / span 2;
  display: grid;
  grid-template-rows: subgrid;
  min-width: 0;
  margin: 0;
}
.studio-home .fam-shot__note {
  display: grid;
  align-content: start;
  gap: 4px;
  margin: 0 0 16px;
  color: var(--on-dark-secondary);
  font-size: var(--fs-13);
  line-height: var(--lh-ui);
  text-wrap: pretty;
}
.studio-home .fam-shot__note > b {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--on-dark);
  font-size: var(--fs-15);
  font-weight: 600;
  line-height: var(--lh-ui);
}
.studio-home .fam-shot__note > span {
  padding-inline-start: 32px;
}
.studio-home .fam-shot__n {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--fam-ring);
  color: var(--on-dark);
  font-size: var(--fs-13);
  font-weight: 600;
  line-height: var(--lh-ui);
  font-variant-numeric: lining-nums tabular-nums;
}
/* The frame: the /app/ page's pearl bezel on three sides, the screen's 14% corners at the
   top, square where the window's foot cuts it. Exactly as tall as its crop, so no bezel
   interior ever shows. */
.studio-home .fam-device {
  --bezel: 8px;
  --corner: calc(var(--fam-s) * 0.14);
  position: relative;
  display: block;
  box-sizing: border-box;
  align-self: end;
  width: calc(var(--fam-s) + 2 * var(--bezel));
  height: calc(var(--fam-s) * 1.4 + var(--bezel));
  border: var(--bezel) solid var(--surface);
  border-bottom: 0;
  border-radius: calc(var(--corner) + var(--bezel)) calc(var(--corner) + var(--bezel)) 0 0;
  background: var(--surface);
  box-shadow:
    0 30px 60px -20px rgb(6 8 7 / 60%),
    0 0 0 1px rgb(255 255 255 / 8%),
    inset 0 1px 0 var(--soft-light);
  color: inherit;
  text-decoration: none;
  transition: transform var(--dur-ui) var(--ease-out);
}
.studio-home .fam-device:focus-visible {
  outline: 3px solid var(--on-dark);
  outline-offset: 3px;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .studio-home .fam-device:hover {
    transform: translateY(-4px);
  }
}
.studio-home .fam-device__screen {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--corner) var(--corner) 0 0;
}
.studio-home .fam-device__screen > img,
.studio-home .fam-device__rings {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1206 / 2622;
  margin: 0;
}
/* Notifications start at row 865 of 2622 (32.99% of the capture's height). */
.studio-home .fam-device--crop :is(.fam-device__screen > img, .fam-device__rings) {
  transform: translateY(-32.99%);
}
.studio-home .fam-ring {
  position: absolute;
  top: var(--y);
  left: var(--x);
  box-sizing: border-box;
  width: var(--w);
  height: var(--h);
  border: 2px solid var(--fam-ring);
  border-radius: calc(var(--fam-s) * var(--r));
  box-shadow:
    0 0 0 3px rgb(0 96 252 / 16%),
    0 6px 16px -6px rgb(6 8 7 / 40%);
}
.studio-home [data-ring='event-rsvp'] {
  --x: 2.99%;
  --y: 36.88%;
  --w: 94.03%;
  --h: 10.79%;
  --r: 0.08;
}
.studio-home [data-ring='chat-post'] {
  --x: 10.61%;
  --y: 19.49%;
  --w: 68.99%;
  --h: 34.17%;
  --r: 0.04;
}
.studio-home [data-ring='alerts-fee'] {
  --x: 1.99%;
  --y: 81.85%;
  --w: 96.02%;
  --h: 6.94%;
  --r: 0.03;
}
/* Below 1024px the three columns become a rail that scrolls inside the window: one phone and
   a peek of the next, snapping to the window's inset; the frame keeps its proportions. */
@media (max-width: 1023px) {
  .studio-home .families__shots {
    --fam-pad: var(--window-inset);
    --fam-gap: 16px;
    --fam-note: 100px;
    --fam-s: clamp(
      150px,
      min(
        100cqw - 2 * var(--window-inset) - 96px,
        (100cqh - var(--fam-pad) - var(--fam-note) - 24px) / 1.4
      ),
      320px
    );
    justify-content: start;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--window-inset);
    scrollbar-width: none;
  }
  .studio-home .families__shots::-webkit-scrollbar {
    display: none;
  }
  .studio-home .fam-shot {
    scroll-snap-align: start;
  }
}
@media (max-width: 760px) {
  .studio-home .families__shots {
    --fam-s: clamp(
      150px,
      min(
        216px,
        100cqw - 2 * var(--window-inset) - 80px,
        (100cqh - var(--fam-pad) - var(--fam-note) - 24px) / 1.4
      ),
      216px
    );
  }
}
/* r7:families-app end */

/* ─── Lane SP (2026-10-20): chapter internals on the soft.css spacing scale ─────────
   The final layer: sections carry no padding of their own (their gap is a margin, above);
   card rows use --grid-gap; a scroll row's padding is room for its cards' shadows and is
   taken back so it adds no gap. */
.studio-home main > section:not(.sports-hero) {
  padding-block: 0;
}
.studio-home #fees .fees__stage {
  row-gap: var(--space-block);
}
.studio-home .gameday__list {
  gap: var(--grid-gap);
}
.studio-home .parts__list {
  margin-top: var(--space-head);
}
@media (max-width: 1023px) {
  .studio-home .parts__list {
    gap: var(--grid-gap);
    margin-block: calc(var(--space-head) - 8px) -28px;
  }
  .studio-home .families__read {
    row-gap: var(--space-block);
  }
  .studio-home .app-module__more {
    margin-top: var(--space-block);
  }
  .studio-home #fees .fees__stage {
    row-gap: var(--space-head);
  }
}
@media (max-width: 760px) {
  .studio-home .app-module__grid {
    margin-top: var(--space-lede);
  }
}