:root {
  --rms-color-navy: #192952;
  --rms-color-navy-light: #2d3e6a;
  --rms-color-red: #d7372c;
  --rms-color-red-dark: #b32a1f;
  --rms-color-gold: #e59e0c;
  --rms-color-cream: #fce8c4;
  --rms-color-logo-box: #d7372c;
  --rms-color-ink: #111111;
  --rms-color-muted: #5c5c5c;
  --rms-color-line: #c2c2c2;
  --rms-color-rule: #eeeeee;
  --rms-color-totals-rule: #000000;
  --rms-color-stripe: #f8f8f8;
  --rms-color-paper: #ffffff;
  --rms-color-on-dark: #ffffff;
  --rms-color-positive: #287a3b;
  --rms-color-negative: #b42318;
  --rms-color-dark-surface: #1a1a1a;
  --rms-color-dark-raised: #333333;
  --rms-color-red-on-dark: #ff8f86;
  --rms-color-scrim: rgba(17, 17, 17, 0.55);
  --rms-font-heading: Rokkitt, Rockwell, Georgia, serif;
  --rms-font-body: Lato, "Helvetica Neue", Arial, sans-serif;
  --rms-font-numeric: tabular-nums;
  --rms-size-tiny: 0.75rem;
  --rms-size-small: 0.875rem;
  --rms-size-base: 1rem;
  --rms-size-large: 1.25rem;
  --rms-size-h3: 1.5rem;
  --rms-size-h2: 1.6rem;
  --rms-size-h1: 2.1rem;
  --rms-size-h1-line-height: 2.6rem;
  --rms-size-text-line-height: 1.6;
  --rms-size-hero-line-height: 0.9;
  --rms-size-control-line-height: 1.25rem;
  --rms-size-display: clamp(2.6rem, 6vw, 5.2rem);
  --rms-size-price: clamp(4.5rem, 12vw, 8rem);
  --rms-space-hairline: 1px;
  --rms-space-xs: 4px;
  --rms-space-xs-plus: 5px;
  --rms-space-sm: 8px;
  --rms-space-sm-plus: 10px;
  --rms-space-md: 16px;
  --rms-space-md-plus: 20px;
  --rms-space-lg: 24px;
  --rms-space-xl: 40px;
  --rms-radius-small: 4px;
  --rms-radius-medium: 6px;
  --rms-radius-large: 8px;
  --rms-logo-max-height: 60px;
  --rms-logo-max-width: 360px;
  --rms-logo-max-height-phone: 38px;
  --rms-logo-max-width-phone: 192px;
  --rms-shadow-card: 0 14px 34px rgba(25, 41, 82, 0.14);
  --rms-shadow-popover: 0 6px 18px rgba(25, 41, 82, 0.22);
}

/* The one base typography of every RunMySport surface (docs/STYLE_GUIDE.md, Typography and rich text; owner, 2026-11-07, #1307). The league sites, the members
   app and the platform pages get it through `leagues.scss`; the promo site gets it through `promo.scss`, which includes this same file in front of
   `_promoSite.scss`. It is plain CSS: no Sass variable, mixin or nesting. A page, section or component never sets its own heading size,
   weight, family or line height, or its own list spacing: a different look means a different element (heading level), never a different rule.

     h1                    size.h1 over size.h1LineHeight
     h2                    size.h2
     h3                    size.h3
     h4                    size.base
     .display              size.display over size.heroLineHeight: the promo hero headline only (Display)
     .lead                 size.large over size.textLineHeight: the one larger paragraph under a hero headline, and a footer's name (Lead)
     .price                size.h3, heading font, bold: a price in a box (Prices)
     .price-headline       size.price over size.heroLineHeight, heading font, bold: the price band's headline (Prices)
     .link-list            a list of links drawn as a row: no bullets, no margin, no padding (Link lists)
     p, li                 line height size.textLineHeight
     ul, ol                margin space.md above and below, on every list: prose or component (List margins)
     prose list            indent space.lg, space.sm between items, nested list space.sm under its item

   Every `ul` and `ol` has the one margin above, so a list in a flex or grid component is never packed against what is beside it and no component states a list margin of its own.
   A flow container's own rule (Spacing) is more specific and sets the margins of its children; `.link-list` draws a row and has none.
   A prose list is an unclassed `ul` or `ol` (the commissioner's bullets in a bylaws page, a news post or a page) or one with the shared class `site-list`.
   A list that is a component (a menu, a grid of cards, a row of tabs) carries the component's own class and is not styled here.
   The gap from a heading to its list and from a paragraph to a list are the page rhythm (Spacing), written once in `scss/leagues.scss` and `scss/_promoSite.scss`. */
h1,
h2,
h3,
h4 {
  margin: 0;
  padding: 0;
  font-family: var(--rms-font-heading);
  font-weight: 700;
  line-height: 1.25;
}

h1 {
  font-size: var(--rms-size-h1);
  line-height: var(--rms-size-h1-line-height);
}

h2 {
  font-size: var(--rms-size-h2);
}

h3 {
  font-size: var(--rms-size-h3);
}

h4 {
  font-size: var(--rms-size-base);
}

/* Display: the promo hero headline only. The one named exception to the heading sizes; it is a class on the promo hero `h1`, never a rule on a page. */
.display {
  font-size: var(--rms-size-display);
  line-height: var(--rms-size-hero-line-height);
}

/* Lead: the paragraph under a hero headline, and the name in a footer. One larger paragraph, never a size written on a page. */
.lead {
  font-size: var(--rms-size-large);
  line-height: var(--rms-size-text-line-height);
}

/* Prices: a price is a paragraph in the heading font, not a heading. `.price` sits in a box (h3 size); `.price-headline` is the price band's headline (the large price size). */
.price,
.price-headline {
  font-family: var(--rms-font-heading);
  font-weight: 700;
  line-height: 1.25;
}

.price {
  font-size: var(--rms-size-h3);
}

.price-headline {
  font-size: var(--rms-size-price);
  line-height: var(--rms-size-hero-line-height);
}

/* Link lists: a `ul` of links drawn as a row (the promo header's menu, a footer's links, the sport links). The component adds its own layout and gaps; the list itself never shows
   bullets, indent or the browser's margins. */
.link-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

p,
li {
  line-height: var(--rms-size-text-line-height);
}

/* A paragraph's gap is one margin on its top edge, the block gap, as the page rhythm is (Spacing), so two paragraphs are one block gap apart whether the parent is a block, a flex or a grid
   container (flex and grid margins never collapse), and the first child of any container (a card, a band, a box, the hero) sits at the container's edge. */
:where(p) {
  margin-top: var(--rms-space-md);
  margin-bottom: 0;
}

:where(p:first-child) {
  margin-top: 0;
}

/* A link that is its own block after a paragraph (the hero's sample link) is one block gap under it; an inline link in a paragraph's text is not a sibling and takes none. */
:where(p + a) {
  margin-top: var(--rms-space-md);
}

ul,
ol {
  margin-top: var(--rms-space-md);
  margin-bottom: var(--rms-space-md);
}

:where(ul:not([class]), ol:not([class]), .site-list) {
  padding-left: var(--rms-space-lg);
}

:where(ul:not([class]), ol:not([class]), .site-list) > li + li {
  margin-top: var(--rms-space-sm);
}

:where(ul:not([class]), ol:not([class]), .site-list) > li > :where(ul, ol) {
  margin-top: var(--rms-space-sm);
  margin-bottom: 0;
}

@font-face {
  font-family: Rokkitt;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("rokkitt-v36-latin-regular.74e8e62d8f3cce03.woff2") format("woff2");
}
@font-face {
  font-family: Rokkitt;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("rokkitt-v36-latin-700.599c526d617d6b04.woff2") format("woff2");
}
@font-face {
  font-family: Lato;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("lato-v24-latin-regular.918b7dc3e2e2d015.woff2") format("woff2");
}
@font-face {
  font-family: Lato;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("lato-v24-latin-700.c447dd7677b419db.woff2") format("woff2");
}
@font-face {
  font-family: Lato;
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("lato-v24-latin-900.08664859baab5ed9.woff2") format("woff2");
}
:root {
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--rms-color-paper);
  scroll-behavior: smooth;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  color: var(--rms-color-ink);
  background: var(--rms-color-paper);
  font-family: var(--rms-font-body);
  line-height: 1.5;
}

a {
  color: var(--rms-color-muted);
  text-decoration: underline;
}

a:hover {
  color: var(--rms-color-ink);
}

a:focus-visible {
  outline: 3px solid var(--rms-color-navy);
  outline-offset: 3px;
}

table {
  border-collapse: collapse;
}

.skip-link {
  position: absolute;
  left: -10000px;
  top: 0;
  z-index: 100;
  padding: 10px 16px;
  background: var(--rms-color-navy);
  color: var(--rms-color-on-dark);
}

.skip-link:focus {
  left: 8px;
  top: 8px;
}

.skip-link:hover {
  color: var(--rms-color-on-dark);
}

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 14px 40px;
  background: var(--rms-color-navy);
  border-bottom: 4px solid var(--rms-color-gold);
}

.site-header__brand {
  display: flex;
  align-items: baseline;
  gap: 14px;
  text-decoration: none;
}

.site-header__brand:focus-visible {
  outline: 3px solid var(--rms-color-cream);
  outline-offset: 3px;
}

.site-header__logo {
  display: block;
  flex-shrink: 0;
}

.site-header__logo img {
  display: block;
  width: 50px;
  height: 50px;
  object-fit: contain;
}

.site-header__wordmark {
  font-family: var(--rms-font-heading);
  font-size: 48px;
  font-weight: 700;
  color: var(--rms-color-cream);
  line-height: 1;
}

.site-header__cycle {
  align-self: center;
  position: relative;
  display: inline-block;
  min-width: 11ch;
  height: 1.25em;
  overflow: hidden;
  color: var(--rms-color-gold);
  font-family: var(--rms-font-heading);
  font-size: var(--rms-size-h3);
  font-weight: 700;
  line-height: 1.25;
}

.site-header__cycle span {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  animation: cycle-word 12s infinite;
}

.site-header__cycle span:nth-child(2) {
  animation-delay: 3s;
}

.site-header__cycle span:nth-child(3) {
  animation-delay: 6s;
}

.site-header__cycle span:nth-child(4) {
  animation-delay: 9s;
}

@keyframes cycle-word {
  0% {
    opacity: 0;
    transform: translateY(60%);
  }
  4%, 22% {
    opacity: 1;
    transform: translateY(0);
  }
  26%, 100% {
    opacity: 0;
    transform: translateY(-60%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-header__cycle span {
    animation: none;
  }
  .site-header__cycle span:first-child {
    opacity: 1;
  }
}
.site-header__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 22px;
}

.site-header__menu a {
  color: var(--rms-color-on-dark);
  font-weight: 900;
  text-decoration: none;
}

.site-header__menu a:hover {
  text-decoration: underline;
}

.site-header__signin {
  flex-shrink: 0;
  padding: 9px 18px;
  border: 1px solid var(--rms-color-on-dark);
  border-radius: var(--rms-radius-medium);
  color: var(--rms-color-on-dark);
  font-size: var(--rms-size-small);
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}

.site-header__signin:hover {
  border-color: var(--rms-color-on-dark);
  background: var(--rms-color-navy-light);
  color: var(--rms-color-on-dark);
}

.site-header__signin:focus-visible,
.site-header__menu a:focus-visible {
  outline: 3px solid var(--rms-color-cream);
  outline-offset: 3px;
}

main {
  display: block;
  flex: 1 0 auto;
}

main > :first-child {
  margin-top: var(--rms-space-lg);
}

main > * + * {
  margin-top: var(--rms-space-xl);
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 48px;
  align-items: center;
  max-width: 1240px;
  margin-right: auto;
  margin-left: auto;
  padding: 0 40px;
}

.hero h1 {
  color: var(--rms-color-navy);
}

.hero__collage {
  position: relative;
  width: 100%;
  aspect-ratio: 1/0.86;
}

.hero-shot {
  position: absolute;
  display: block;
  overflow: hidden;
  border: 1px solid var(--rms-color-line);
  border-radius: var(--rms-radius-large);
  background: var(--rms-color-paper);
  box-shadow: var(--rms-shadow-card);
}

.hero-shot img {
  display: block;
  width: 100%;
  height: auto;
}

.hero-shot--right {
  top: 9%;
  right: 0;
  z-index: 3;
  width: 28%;
  border: 0;
  border-radius: var(--rms-radius-large);
  box-shadow: var(--rms-shadow-popover);
  transform: rotate(4deg);
}

.hero-shot--front {
  right: 3%;
  bottom: 0;
  z-index: 4;
  width: 36%;
  border: 0;
  border-radius: var(--rms-radius-large);
  box-shadow: var(--rms-shadow-popover);
  transform: rotate(-2.5deg);
}

.hero-shot--back {
  top: 38%;
  left: 0;
  z-index: 5;
  width: 61%;
  transform: rotate(-1.8deg);
}

@media (min-width: 1400px) {
  .hero__collage {
    width: 112%;
    margin-right: -12%;
  }
}
.price-band {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 64px 40px;
  background: var(--rms-color-navy);
  text-align: center;
}

.price-band__eyebrow {
  color: var(--rms-color-on-dark);
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.price-band__price {
  color: var(--rms-color-on-dark);
  font-variant-numeric: tabular-nums;
}

.price-band__values {
  max-width: 46ch;
  color: var(--rms-color-on-dark);
}

.price-band__link {
  margin-top: var(--rms-space-sm);
  color: var(--rms-color-on-dark);
  font-size: var(--rms-size-base);
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.price-band__link:hover {
  color: var(--rms-color-on-dark);
  text-decoration-color: var(--rms-color-red);
}

.price-band__link:focus-visible {
  outline: 3px solid var(--rms-color-cream);
  outline-offset: 3px;
}

.price-band__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 16px 30px;
  background: var(--rms-color-red);
  border-radius: var(--rms-radius-medium);
  color: var(--rms-color-on-dark);
  font-size: var(--rms-size-base);
  font-weight: 900;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.price-band__cta:hover {
  background: var(--rms-color-red-dark);
  color: var(--rms-color-on-dark);
}

.price-band__cta:focus-visible {
  outline: 3px solid var(--rms-color-cream);
  outline-offset: 3px;
}

.features {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1240px;
  margin-right: auto;
  margin-left: auto;
  padding: 0 40px;
}

.features > * + * {
  margin-top: var(--rms-space-md);
}

.features > h1 + * {
  margin-top: var(--rms-space-lg);
}

.features > * + h2 {
  margin-top: var(--rms-space-xl);
}

.features h2 {
  color: var(--rms-color-navy);
  text-align: center;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--rms-space-md);
  width: 100%;
}

.feature-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--rms-color-paper);
  border: 1px solid var(--rms-color-line);
  border-radius: var(--rms-radius-large);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.feature-card:hover,
.feature-card:focus-within {
  border-color: var(--rms-color-navy);
  box-shadow: var(--rms-shadow-card);
}

.feature-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px 18px 18px;
}

.feature-card__title {
  color: var(--rms-color-navy);
}

.feature-card__title a {
  color: inherit;
  text-decoration: none;
}

.feature-card__title a:hover {
  color: var(--rms-color-ink);
}

.feature-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  color: var(--rms-color-muted);
  font-weight: 900;
  text-decoration: underline;
}

.feature-card__link:hover {
  color: var(--rms-color-ink);
}

.feature-card__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--rms-space-md);
}

.feature-card__group {
  color: var(--rms-color-navy);
}

.feature-card__list {
  color: var(--rms-color-muted);
}

.feature-card__description {
  color: var(--rms-color-muted);
  font-size: var(--rms-size-base);
}

.site-footer {
  margin-top: var(--rms-space-xl);
  background: var(--rms-color-navy);
  border-top: 4px solid var(--rms-color-gold);
  color: var(--rms-color-on-dark);
}

.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px 32px;
  max-width: 1240px;
  margin-right: auto;
  margin-left: auto;
  padding: 26px 40px;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.site-footer__links a {
  color: var(--rms-color-on-dark);
  font-weight: 900;
  text-decoration: none;
}

.site-footer__links a:hover {
  text-decoration: underline;
}

.site-footer__links a:focus-visible {
  outline: 3px solid var(--rms-color-cream);
  outline-offset: 3px;
}

.pricing-page h1 {
  color: var(--rms-color-navy);
  text-align: center;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--rms-space-md);
  width: 100%;
}

.pricing-box {
  display: flex;
  flex-direction: column;
  padding: 26px 24px 28px;
  background: var(--rms-color-paper);
  border: 1px solid var(--rms-color-line);
  border-radius: var(--rms-radius-large);
}

.features .pricing-box__name {
  text-align: left;
  color: var(--rms-color-navy);
}

.pricing-box__price {
  color: var(--rms-color-navy);
}

.pricing-box__features {
  flex: 1;
  color: var(--rms-color-muted);
}

.pricing-box .price-band__cta {
  align-self: center;
  margin-top: var(--rms-space-xl);
}

.contact-form {
  display: grid;
  gap: 8px;
  width: 100%;
  max-width: 520px;
  margin-right: auto;
  margin-left: auto;
}

.contact-form label {
  margin-top: 8px;
  color: var(--rms-color-navy);
  font-weight: 700;
}

.contact-form input,
.contact-form textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--rms-color-muted);
  border-radius: var(--rms-radius-medium);
  color: var(--rms-color-ink);
  background: var(--rms-color-paper);
  font: inherit;
}

.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
  outline: 3px solid var(--rms-color-navy);
  outline-offset: 2px;
}

.contact-form .price-band__cta {
  justify-self: start;
  border: 0;
  cursor: pointer;
}

.contact-form__trap {
  display: none;
}

.pricing-values {
  max-width: 52ch;
  color: var(--rms-color-navy);
  text-align: center;
}

@media (max-width: 900px) {
  .pricing-grid {
    grid-template-columns: 1fr;
  }
  .site-footer__inner {
    flex-direction: column;
    padding: 22px 18px;
    text-align: center;
  }
  .site-footer__links {
    justify-content: center;
  }
  .site-header {
    flex-direction: column;
    gap: 10px;
    padding: 14px 18px;
    text-align: center;
  }
  .site-header__cycle {
    min-width: 11ch;
    font-size: var(--rms-size-base);
  }
  .hero {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 0 18px;
  }
  .hero__collage {
    width: min(520px, 100%);
    margin: 0 auto;
    aspect-ratio: 1/1.22;
  }
  .hero-shot--back {
    top: 0;
    left: 0;
    width: 82%;
    z-index: 2;
  }
  .hero-shot--right {
    top: 9%;
    width: 40%;
    z-index: 3;
  }
  .hero-shot--front {
    right: auto;
    left: 2%;
    width: 58%;
    z-index: 4;
  }
  .price-band {
    padding: 48px 18px;
  }
  .price-band__eyebrow {
    letter-spacing: 0.18em;
  }
  .features {
    padding: 0 18px;
  }
  .feature-grid {
    grid-template-columns: 1fr;
  }
  .feature-card__body {
    padding: 12px 14px 16px;
  }
}
@media (max-width: 640px) {
  .site-header__brand {
    flex-wrap: wrap;
    justify-content: center;
  }
  .site-header__logo img {
    width: 32px;
    height: 32px;
  }
  .site-header__wordmark {
    font-size: 31px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}
.hero--leagues {
  align-items: center;
}

.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero__pitch {
  max-width: 34ch;
  color: var(--rms-color-ink);
}

.hero__sample {
  margin-top: var(--rms-space-md);
  margin-bottom: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--rms-color-muted);
  font-size: var(--rms-size-base);
  font-weight: 900;
  text-decoration-color: var(--rms-color-red);
  text-underline-offset: 4px;
}

.hero--text {
  grid-template-columns: minmax(0, 1fr);
}

.hero--text .hero__pitch {
  max-width: 46ch;
}

.hero__collage--panels {
  aspect-ratio: 1/0.78;
}

.hero__collage--panels .hero-shot--back {
  top: 0;
  left: 0;
  z-index: 2;
  width: 64%;
  border: 1px solid var(--rms-color-line);
  border-radius: var(--rms-radius-large);
}

.hero__collage--panels .hero-shot--right {
  top: 20%;
  right: 0;
  z-index: 5;
  width: 50%;
  border: 1px solid var(--rms-color-line);
  border-radius: var(--rms-radius-large);
}

.hero__collage--panels .hero-shot--front {
  right: auto;
  bottom: 0;
  left: 8%;
  z-index: 4;
  width: 54%;
  border: 1px solid var(--rms-color-line);
  border-radius: var(--rms-radius-large);
}

.hero-shot {
  display: block;
  color: inherit;
  text-decoration: none;
}

.hero-shot:focus-visible {
  outline: 3px solid var(--rms-color-navy);
  outline-offset: 3px;
}

.hero-panel__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
}

.sport-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--rms-space-md);
}

.sport-links a {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid var(--rms-color-line);
  border-radius: var(--rms-radius-medium);
  color: var(--rms-color-muted);
  font-weight: 900;
  text-decoration: underline;
}

.sport-links a:hover {
  border-color: var(--rms-color-navy);
  color: var(--rms-color-ink);
}

.sport-links a[aria-current=page] {
  border-color: var(--rms-color-navy);
  background: var(--rms-color-navy);
  color: var(--rms-color-on-dark);
  text-decoration: none;
}

.terms {
  max-width: 1240px;
  margin-right: auto;
  margin-left: auto;
  padding: 0 40px;
}

.terms h2 {
  color: var(--rms-color-navy);
}

.terms p {
  max-width: 70ch;
}

.terms > .terms__section + .terms__section {
  margin-top: var(--rms-space-xl);
}

.terms .terms__section > * + * {
  margin-top: var(--rms-space-md);
}

@media (max-width: 900px) {
  .terms {
    padding: 0 18px;
  }
  .hero__copy {
    align-items: center;
    text-align: center;
  }
  .hero__collage--panels {
    width: min(520px, 100%);
    aspect-ratio: 1/1.2;
  }
  .hero__collage--panels .hero-shot--back {
    top: 0;
    left: 0;
    width: 70%;
  }
  .hero__collage--panels .hero-shot--right {
    top: 40%;
    right: 0;
    width: 56%;
  }
  .hero__collage--panels .hero-shot--front {
    bottom: 0;
    left: 0;
    width: 58%;
  }
}
@media (max-width: 374px) {
  .site-header__cycle {
    display: none;
  }
}
.sign-in-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--rms-space-md);
  width: 100%;
}

.sign-in-block .form-container {
  box-sizing: border-box;
  width: min(300px, 100%);
  padding: var(--rms-space-sm-plus);
  border: 1px solid var(--rms-color-line);
  border-radius: var(--rms-radius-medium);
  text-align: left;
}

.sign-in-block .form-container form {
  display: flex;
  flex-direction: column;
  gap: var(--rms-space-md-plus);
}

.sign-in-block label {
  display: block;
  margin-left: var(--rms-space-hairline);
  font-size: var(--rms-size-tiny);
  line-height: normal;
}

.sign-in-block input {
  box-sizing: border-box;
  width: 100%;
  padding: var(--rms-space-sm-plus) var(--rms-space-xs-plus);
  border: 1px solid var(--rms-color-line);
  border-radius: var(--rms-radius-medium);
  font-family: inherit;
  font-size: var(--rms-size-small);
  line-height: var(--rms-size-control-line-height);
}

@media (hover: none) and (pointer: coarse) {
  .sign-in-block input {
    font-size: var(--rms-size-base);
  }
}
.sign-in-block input:focus-visible,
.sign-in-block .submit-button:focus-visible {
  outline: 3px solid var(--rms-color-navy);
  outline-offset: 2px;
}

.sign-in-block .submit-button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin-bottom: var(--rms-space-sm-plus);
  border: 0;
  font-family: inherit;
  font-size: var(--rms-size-base);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.sign-in-block .message {
  box-sizing: border-box;
  width: min(720px, 100vw - 2 * var(--rms-space-md));
  padding: var(--rms-space-md-plus);
  border: 1px solid var(--rms-color-line);
  border-radius: var(--rms-radius-medium);
  background: var(--rms-color-stripe);
  text-align: left;
}

.submit-button {
  width: auto;
  max-width: 100%;
  padding: 0 var(--rms-space-md);
  background-color: var(--league-button, var(--rms-color-red));
  border-radius: var(--rms-radius-medium);
  color: var(--league-on-button, var(--rms-color-on-dark));
}

.submit-button:hover {
  background-color: var(--league-button-hover, var(--rms-color-red-dark));
  color: var(--league-on-button-hover, var(--rms-color-on-dark));
}

.submit-button:disabled {
  background-color: var(--rms-color-rule);
  color: var(--rms-color-muted);
  cursor: not-allowed;
}

.form-container .submit-button {
  box-sizing: border-box;
  width: 100%;
}