/* Release 2026-10-06. Rules added for this release; assets/site.css stays as it is. */

/* Purchase terms: one short line directly under every Become a member button that opens checkout.
   The markup is <p class="buy-terms" data-buy-terms></p>; the text is filled in at release.
   Empty, it takes no space. */
.buy-terms {
  margin: 8px 0 0;
  max-width: 46ch;
  font-size: .8125rem;
  line-height: 1.45;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-2, #4C5A67);
}
.buy-terms:empty { display: none; }

/* In a button row the line takes its own row under the buttons, so the row never breaks apart. */
.btn-row > .buy-terms { flex: 0 0 100%; order: 99; margin-top: -6px; }

/* Full-width buttons in plan cards: the line sits centred under the button. */
.plan-card .btn + .buy-terms { max-width: none; text-align: center; }
/* The membership card keeps its button at natural width on wide screens, so the line aligns left with it. */
@media (min-width: 768px) {
  .plan-card.mem-plan .btn + .buy-terms { text-align: left; }
}

/* On film, photos and dark bands the line turns light. */
.hero-film .buy-terms,
.hero-still-block .buy-terms,
.talk-band .buy-terms,
.dash-band .buy-terms,
.on-dark .buy-terms,
.sticky-bar .buy-terms { color: rgba(255, 255, 255, .88); }

/* Sticky bar: beside the button on wide screens, under it on phones. */
.sticky-bar__inner > .buy-terms { flex: 0 1 26ch; margin: 0; font-size: .75rem; }
@media (max-width: 767px) {
  .sticky-bar__inner > .buy-terms { flex: 0 0 auto; max-width: none; margin-top: -6px; text-align: center; }
}

/* Home photo band: two team-sport stills, no title or scrim. */
.photo-band.photo-band--two { height: 420px; }
.photo-band.photo-band--two::after { content: none; }
.photo-band.photo-band--two .photo-band__cell > img { object-position: 50% 30%; }
@media (max-width: 1024px) { .photo-band.photo-band--two { height: auto; aspect-ratio: 1440 / 480; } }
@media (max-width: 767px) { .photo-band.photo-band--two { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 62vw; aspect-ratio: auto; height: auto; } }

/* The home page header carries no talk pill, so below 1024 the bar is one row (no empty second row) */
@media (max-width: 1023px) {
  :root.js:not(:has(.site-header__talk)),
  :root.js:has(.site-nav__main > li:nth-child(4):not([hidden])):not(:has(.site-header__talk)) { --header-h: 64px; }
  .js .site-header:not(:has(.site-header__talk)) .site-header__inner,
  .js .site-header:has(.site-nav__main > li:nth-child(4):not([hidden])):not(:has(.site-header__talk)) .site-header__inner {
    grid-template-areas: "brand crisis toggle"; row-gap: 0; padding: 10px 20px;
  }
}

/* Dashboard close band, below 768px: the copy sits at the bottom of the film, so the pause button
   moves to the top corner, as on the hero films. Same button, same size. */
@media (max-width: 767px) {
  .dash-band > .loop-pause { top: 12px; bottom: auto; }
}