/*
  The public storefront (slice R1, docs/H1-REBUILD-PLAN.md): the league home, the club page, a player's sell
  page, the all packages list, the sponsor wall, a sponsor's page and the error pages. BOARDS H1-Pub-LeagueHome,
  -ClubPage, -SellPage, -PlayerSellStates, -MinorsSell, -AllPackages, -SponsorWall, -SponsorPage and -ErrorPages.

  Loaded by those pages only. These are the parts the H1 library does not have: the hero without a photo, the
  raised block's extras, the club rows, the team sheet, the sponsor logo tiles, the steps, the sponsor page and
  the error band. They follow the rules in h1.css (square, nothing under 12px, no filter, no blur, 44px targets)
  and read the surface properties the H1 shells set, so they sit on night or paper like every other H1 part.
  Every class starts with h1-sf.
*/

/* ---------- The page ---------- */

/* One short header link ("Sponsors") on a phone. From 1024px the header nav has it. */
@media (min-width: 1024px) {
  .h1-sf-body .h1-header-end {
    display: none;
  }
}

.h1-sf-in {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--gzs-content-max);
  margin: 0 auto;
}

.h1-sf-band {
  box-sizing: border-box;
}

.h1-sf-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.h1-sf-head-row {
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.h1-sf-h2 {
  margin: 0;
  overflow-wrap: anywhere;
}

.h1-sf-intro {
  margin: 0;
  font-family: var(--gzs-font-body);
  font-size: 15px;
  line-height: 22px;
  color: var(--h1-fg-2);
}

.h1-sf-sub {
  margin: 0;
  font-family: var(--gzs-font-mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--h1-fg-2);
}

.h1-sf-lead {
  margin: 0;
  font-family: var(--gzs-font-body);
  font-size: 16px;
  line-height: 24px;
  color: var(--h1-fg-bright);
}

.h1-sf-count {
  display: block;
  margin-top: 14px;
  font-family: var(--gzs-font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--h1-fg);
}

.h1-sf-center {
  align-self: center;
}

.h1-sf-eyebrow .h1-badge {
  flex: none;
}

/* ---------- The hero ---------- */

.h1-sf-hero {
  box-sizing: border-box;
  padding: 32px var(--gzs-gutter-public) 24px;
}

.h1-sf-hero-in {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.h1-sf-hero-text {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.h1-sf-hero-slim .h1-sf-in {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.h1-sf-title {
  margin: 0;
  font-family: var(--gzs-font-display);
  font-size: 56px;
  line-height: 0.9;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--h1-fg-strong);
  overflow-wrap: anywhere;
}

.h1-sf-title-player {
  font-size: 40px;
  line-height: 0.95;
}

.h1-sf-title-list,
.h1-sf-title-error {
  font-size: 44px;
  line-height: 0.95;
}

.h1-sf-notice {
  margin-bottom: 4px;
}

.h1-sf-aside {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.h1-sf-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.h1-sf-from {
  margin: 8px 0 0;
  min-height: 24px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.h1-sf-from-label {
  font-family: var(--gzs-font-mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--h1-fg-2);
}

.h1-sf-from-value {
  font-family: var(--gzs-font-display);
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--h1-fg-strong);
}

/* A player's page: the team in one line, then the player's block. */
.h1-sf-teamctx {
  margin: 0;
  font-family: var(--gzs-font-mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--h1-fg-2);
}

.h1-sf-player-head {
  display: flex;
  align-items: center;
  gap: 16px;
}

.h1-sf-player-title {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.h1-sf-mark {
  box-sizing: border-box;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  background: var(--gzs-raised);
  border: 2px solid var(--h1-outline);
  font-family: var(--gzs-font-display);
  font-size: 30px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--h1-fg-strong);
}

.h1-sf-mark-photo {
  display: block;
  object-fit: cover;
}

.h1-sf-why {
  margin: 0;
  font-family: var(--gzs-font-body);
  font-size: 18px;
  line-height: 26px;
  color: var(--h1-fg-bright);
  overflow-wrap: anywhere;
}

/* ---------- The raised block ---------- */

.h1-sf-raised {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.h1-sf-legend {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-family: var(--gzs-font-mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--h1-fg-2);
}

.h1-sf-legend-left {
  display: inline-flex;
}

.h1-sf-over,
.h1-sf-personal,
.h1-sf-chipnote {
  margin: 0;
  font-family: var(--gzs-font-body);
  font-size: 15px;
  line-height: 22px;
  color: var(--h1-fg-2);
}

.h1-sf-teamline {
  margin: 0;
  font-family: var(--gzs-font-body);
  font-size: 13px;
  line-height: 19px;
  color: var(--h1-fg-2);
}

.h1-sf-live {
  margin-top: -4px;
}

.h1-sf-live .h1-livelink {
  font-size: 13px;
  line-height: 18px;
}

.h1-sf-live-ago {
  color: var(--h1-fg-2);
}

/* ---------- The clubs on the league home ---------- */

.h1-sf-clubs-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.h1-sf-clublist {
  list-style: none;
  margin: 0;
  padding: 0;
}

.h1-sf-club {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 0 20px;
  border-top: 1px solid var(--h1-line);
}

.h1-sf-club-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.h1-sf-club-name {
  margin: 0;
  min-width: 0;
}

.h1-sf-club-name a {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--h1-fg-strong);
  text-decoration: none;
  font-family: var(--gzs-font-display);
  font-size: 28px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.03em;
}

/* The name takes what the badge leaves and wraps between words. A word is never cut in two (only a word longer than the whole column breaks). */
.h1-sf-club-name a > span:last-child {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: manual;
}

.h1-sf-club-link {
  flex: none;
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--h1-fg-strong);
  font-family: var(--gzs-font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
}

.h1-sf-club-meter {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.h1-sf-club-figures {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.h1-sf-club-num {
  font-family: var(--gzs-font-display);
  font-size: 36px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--h1-fg-strong);
}

.h1-sf-club-of {
  font-family: var(--gzs-font-body);
  font-size: 15px;
  line-height: 20px;
  color: var(--h1-fg-2);
}

/* The share of the goal, amber on night (BOARD H1-Pub-LeagueHome). Mono, so the figure never shifts the line. */
.h1-sf-club-pct {
  margin-left: auto;
  font-family: var(--gzs-font-mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gzs-waiting);
}

.h1-sf-club-togo {
  margin: 0;
  font-family: var(--gzs-font-body);
  font-size: 13px;
  line-height: 19px;
  color: var(--h1-fg-2);
}

/* ---------- The package picker and lists ---------- */

.h1-sf-picker-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.h1-sf-picker {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 20px;
}

.h1-sf-tiles {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Only the chosen tile opens up. Without :has support every tile stays open, which is still correct. */
.h1-sf-picker .h1-package-tile-radio:not(:has(.h1-check-input:checked)) .h1-bullets,
.h1-sf-picker .h1-package-tile-radio:not(:has(.h1-check-input:checked)) .h1-package-tile-art,
.h1-sf-picker .h1-package-tile-radio:not(:has(.h1-check-input:checked)) .h1-package-tile-lastday,
.h1-sf-picker .h1-package-tile-radio:not(:has(.h1-check-input:checked)) .h1-package-tile-photo {
  display: none;
}

/* The label is a flex row, which drops the space after "Continue ·" in front of the price. A gap puts it back. */
.h1-sf-picker .h1-main-label {
  column-gap: 0.3em;
}

.h1-sf-also {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
}

.h1-sf-note {
  margin: 0;
  color: var(--h1-fg-2);
}

.h1-sf-trust {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--gzs-font-body);
  font-size: 13px;
  line-height: 20px;
  color: var(--h1-fg-2);
}

.h1-sf-trust .h1-icon {
  margin-top: 2px;
}

.h1-sf-all {
  display: flex;
  flex-direction: column;
}

.h1-sf-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 32px;
}

.h1-sf-group .h1-sf-tiles {
  margin-top: 6px;
}

.h1-sf-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.h1-sf-jump a {
  min-height: 44px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border: 1px solid var(--h1-line-strong);
  color: var(--h1-fg);
  text-decoration: none;
  font-family: var(--gzs-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.h1-sf-backband {
  padding-top: 16px;
  padding-bottom: 16px;
}

/* ---------- The team sheet ---------- */

.h1-sf-roster {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  border-top: 1px solid var(--h1-line);
}

.h1-sf-player {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 8px 0;
  border-bottom: 1px solid var(--h1-line);
}

.h1-sf-player-id {
  flex: none;
  display: flex;
}

.h1-sf-player-photo {
  display: block;
  width: 36px;
  height: 36px;
  object-fit: cover;
  border: 1px solid var(--h1-line-strong);
}

.h1-sf-player-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.h1-sf-player-name {
  font-family: var(--gzs-font-display);
  font-size: 18px;
  line-height: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--h1-fg-strong);
  overflow-wrap: anywhere;
}

.h1-sf-player-sub {
  font-family: var(--gzs-font-body);
  font-size: 13px;
  line-height: 19px;
  color: var(--h1-fg-2);
}

.h1-sf-player-end {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.h1-sf-player-amt {
  font-family: var(--gzs-font-display);
  font-size: 22px;
  line-height: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--h1-fg-strong);
}

.h1-sf-signin {
  margin: 12px 0 0;
}

/* ---------- Backers, sponsors, notes ---------- */

.h1-sf-gifttile {
  box-sizing: border-box;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--gzs-raised);
  border: 1px solid var(--h1-line-strong);
  color: var(--h1-fg);
}

.h1-sf-backers-band .h1-nightlist {
  margin-top: 16px;
}

.h1-sf-empty {
  margin-top: 4px;
}

.h1-sf-slot {
  margin-top: 16px;
}

.h1-sf-logowall {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.h1-sf-logowall + .h1-sf-logowall {
  margin-top: 8px;
}

.h1-sf-logotile {
  box-sizing: border-box;
  min-height: 96px;
  height: 100%;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  background: var(--h1-card-bg);
  border: 1px solid var(--h1-card-border);
  color: var(--h1-fg-strong);
  text-decoration: none;
}

.h1-sf-logoimg {
  display: block;
  max-width: 100%;
  max-height: 56px;
  object-fit: contain;
}

.h1-sf-logoname {
  font-family: var(--gzs-font-display);
  font-size: 17px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.h1-sf-logoname-small {
  font-family: var(--gzs-font-body);
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--h1-fg-2);
}

.h1-sf-logowall-feature .h1-sf-logotile {
  min-height: 140px;
}

.h1-sf-notes {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.h1-sf-notelist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.h1-sf-quote {
  margin: 0;
  padding: 0 0 0 16px;
  border-left: 4px solid var(--h1-outline);
}

.h1-sf-quote p {
  margin: 0;
  font-family: var(--gzs-font-body);
  font-size: 18px;
  line-height: 26px;
  color: var(--h1-fg-bright);
  overflow-wrap: anywhere;
}

.h1-sf-quote footer {
  margin-top: 8px;
  font-family: var(--gzs-font-mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--h1-fg-2);
}

.h1-sf-chipband .h1-sf-in {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.h1-sf-small-h {
  margin: 0;
  font-family: var(--gzs-font-mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--h1-fg-2);
}

.h1-sf-linkrow {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
}

.h1-sf-players .h1-sf-in {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.h1-sf-openspots .h1-sf-in {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.h1-sf-openspots .h1-main {
  align-self: stretch;
}

/* ---------- How sponsoring works ---------- */

.h1-sf-steps {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
}

.h1-sf-steps li {
  display: grid;
  grid-template-columns: 44px 1fr;
  column-gap: 12px;
  row-gap: 4px;
  padding: 16px 0;
  border-top: 1px solid var(--h1-line);
}

.h1-sf-step-n {
  grid-row: span 2;
  font-family: var(--gzs-font-mono);
  font-size: 13px;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gzs-waiting);
}

.h1-sf-step-t {
  margin: 0;
  font-family: var(--gzs-font-display);
  font-size: 20px;
  line-height: 24px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--h1-fg-strong);
}

.h1-sf-step-s {
  margin: 0;
  font-family: var(--gzs-font-body);
  font-size: 15px;
  line-height: 22px;
  color: var(--h1-fg-2);
}

/* ---------- A sponsor's page ---------- */

.h1-sf-sponsor-in {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.h1-sf-sponsor-name {
  margin: 0;
  font-family: var(--gzs-font-display);
  font-size: 48px;
  line-height: 0.92;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--h1-fg-strong);
  overflow-wrap: anywhere;
}

.h1-sf-sponsor-logo {
  box-sizing: border-box;
  align-self: flex-start;
  display: block;
  max-width: 220px;
  max-height: 110px;
  padding: 8px;
  object-fit: contain;
  background: var(--gzs-surface);
  border: 1px solid var(--h1-card-border);
}

.h1-sf-sponsor-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 520px;
}

.h1-sf-about-in {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.h1-sf-about-text {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.h1-sf-contact {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.h1-sf-contact li {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  border-top: 1px solid var(--h1-row-line);
}

.h1-sf-contact-label {
  flex: none;
  width: 84px;
  font-family: var(--gzs-font-mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--h1-fg-2);
}

.h1-sf-contact-value {
  min-width: 0;
  font-family: var(--gzs-font-body);
  font-size: 15px;
  line-height: 22px;
  overflow-wrap: anywhere;
}

.h1-sf-contact-value a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.h1-sf-thanks-grid {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.h1-sf-thanks-grid > div {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ---------- The error pages ---------- */

.h1-sf-error {
  box-sizing: border-box;
  padding: 40px var(--gzs-gutter-public) 56px;
}

.h1-sf-error-in {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  max-width: 720px;
  margin: 0;
}

/* The big outlined status (BOARD H1-Pub-ErrorPages-Phone): 120px, or 160px for the "!" of a plain reason. The outline is
   drawn over a transparent fill, so it stays decorative and the h1 below carries the meaning. */
.h1-sf-errmark {
  margin: 0 0 6px;
  font-family: var(--gzs-font-display);
  font-size: 120px;
  line-height: 0.8;
  font-weight: 800;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 2px rgba(255, 255, 255, 0.62);
}

.h1-sf-errmark-sign {
  font-size: 160px;
}

.h1-sf-error .h1-sf-title-error {
  font-size: 40px;
  line-height: 0.92;
}

.h1-sf-error .h1-sf-lead {
  margin-top: 2px;
  font-size: 18px;
  line-height: 28px;
}

.h1-sf-error-action {
  align-self: stretch;
  margin-top: 8px;
  max-width: 420px;
}

/* ---------- From 1024px ---------- */

@media (min-width: 1024px) {
  .h1-sf-hero {
    padding: 64px var(--gzs-gutter-desktop) 56px;
  }

  .h1-sf-hero-in {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 540px;
    gap: 60px;
    align-items: end;
  }

  .h1-sf-aside {
    padding: 28px 32px 24px;
    background: var(--gzs-night);
    border: 1px solid var(--h1-line);
  }

  .h1-sf-title {
    font-size: 120px;
    line-height: 0.8;
    letter-spacing: -0.045em;
  }

  .h1-sf-title-player {
    font-size: 88px;
  }

  .h1-sf-title-list,
  .h1-sf-title-error {
    font-size: 84px;
  }

  .h1-sf-lead {
    font-size: 20px;
    line-height: 30px;
  }

  .h1-sf-error .h1-sf-lead {
    font-size: 22px;
    line-height: 32px;
  }

  .h1-sf-intro {
    font-size: 18px;
    line-height: 28px;
  }

  .h1-sf-mark {
    width: 96px;
    height: 96px;
    font-size: 38px;
  }

  /* A row is the name (the badge and the name wrapping between words), the meter and the link. The name column takes
     whatever the other two leave, so a long club name gets a wide column and a short one a tidy row. */
  .h1-sf-club {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 300px) auto;
    align-items: center;
    gap: 24px;
    min-height: 128px;
    padding: 0;
    border-top: 0;
    border-bottom: 1px solid var(--h1-line);
  }

  .h1-sf-club-top {
    display: contents;
  }

  .h1-sf-club-name {
    grid-column: 1;
    grid-row: 1;
  }

  .h1-sf-club-name a {
    gap: 24px;
    font-size: 44px;
  }

  .h1-sf-club-name a > span:last-child {
    line-height: 1.02;
  }

  .h1-sf-club-name .h1-badge {
    width: 56px;
    height: 56px;
    font-size: 30px;
  }

  .h1-sf-club-meter {
    grid-column: 2;
    grid-row: 1;
  }

  .h1-sf-club-link {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  .h1-sf-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    align-items: start;
    gap: 12px;
  }

  /* The package section (BOARDS H1-Pub-LeagueHome-Desktop, H1-Pub-ClubPage-Desktop): the packages stack as full-width rows with the
     link, the button and the trust line under them, never as a grid of tiles with uneven heights. The same for the list of
     packages that cannot be picked. The 480px heading column beside them comes from 1200px, below that the heading sits above. */
  .h1-sf-picker-band .h1-sf-tiles {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .h1-sf-picker .h1-main {
    max-width: 520px;
  }

  .h1-sf-roster {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 60px;
  }

  .h1-sf-logowall {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
  }

  .h1-sf-logowall-feature {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .h1-sf-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 32px;
  }

  .h1-sf-steps li {
    grid-template-columns: 1fr;
    border-top: 2px solid var(--h1-line-strong);
  }

  .h1-sf-step-n {
    grid-row: auto;
  }

  .h1-sf-notelist {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 60px;
  }

  .h1-sf-sponsor-name {
    font-size: 96px;
  }

  .h1-sf-about-in {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 80px;
    align-items: start;
  }

  .h1-sf-thanks-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 80px;
  }

  .h1-sf-error {
    padding: 80px var(--gzs-gutter-desktop) 96px;
  }

  .h1-sf-errmark {
    font-size: 200px;
    -webkit-text-stroke-width: 3px;
  }

  .h1-sf-errmark-sign {
    font-size: 240px;
  }

  .h1-sf-error .h1-sf-title-error {
    font-size: 84px;
    line-height: 0.95;
  }
}

/* The package section's 480px heading column on the left and its rows on the right, where the rows keep room for a price. */
@media (min-width: 1200px) {
  .h1-sf-picker-band > .h1-sf-in {
    display: grid;
    grid-template-columns: 480px minmax(0, 1fr);
    column-gap: 72px;
    align-items: start;
  }

  .h1-sf-picker-band .h1-sf-picker-head {
    grid-column: 1;
    grid-row: 1;
  }

  .h1-sf-picker-band .h1-sf-picker,
  .h1-sf-picker-band > .h1-sf-in > .h1-sf-tiles {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0;
  }
}

/* The heading column and the list of clubs sit side by side only where the list is wide enough for a long club name. */
@media (min-width: 1400px) {
  .h1-sf-clubs-grid {
    display: grid;
    grid-template-columns: 380px minmax(0, 1fr);
    gap: 80px;
  }
}