/* The public scrimmage pages, in New Game Taekwondo's look: the newgametkd.com trial page
   (NEW GAME/_NEW GAME HTML/trialsignup-scheduler.html, css/main.css). Roboto, white, black text,
   #0055ff buttons with 10px corners, light grey panels, centred headings.

   The brand is light only, so these tokens override layout.css for both colour schemes. The admin
   page keeps layout.css as it is. Restyling means editing the tokens below. */

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('/scrimmage/assets/brand/roboto-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('/scrimmage/assets/brand/roboto-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

.scrim {
  --bg: #ffffff;
  --surface: #f8f9fa;
  --panel: #f3f4f6;
  --text: #000000;
  --muted: #4b5563;
  --soft: #666666;
  --border: #dee2e6;
  --rule: #e5e7eb;
  --ink: #111827;
  --accent: #0055ff;
  --accent-hover: #0044cc;
  --accent-text: #ffffff;
  --selected: #0d6efd;
  --selected-bg: #e7f3ff;
  --offer: #ffcc00;
  --danger: #dc3545;
  --radius: 10px;
  --radius-field: 6px;
  --font: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: light;
  font-size: 18px;
  line-height: 1.6;
}

.scrim a {
  color: var(--accent);
}

.scrim .scrim-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--space-3);
}

/* ----------- Header ----------- */
.scrim-hero {
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  padding: var(--space-3) 0 var(--space-4);
  text-align: center;
}

/* The logo on the left, the page links on the right. */
.scrim-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.brand-logo {
  display: block;
  height: 64px;
  width: auto;
}

@media (min-width: 992px) {
  .brand-logo {
    height: 80px;
  }
}

.scrim-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-3);
  font-size: 1rem;
}

.scrim .scrim-nav a {
  color: var(--text);
  font-weight: 500;
  text-decoration: none;
}

.scrim .scrim-nav a:hover {
  text-decoration: underline;
}

.scrim .scrim-nav a[aria-current='page'] {
  font-weight: 700;
  text-decoration: none;
  cursor: default;
}

/* Sized like the trial page's fold headline: about 30px on a phone, 44px at most. */
.scrim-hero h1 {
  font-size: clamp(28px, 7.6vw, 44px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: var(--space-2) 0;
}

.eyebrow {
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 500;
  margin: 0;
}

.scrim .eyebrow a {
  color: inherit;
  text-decoration: none;
}

.scrim .eyebrow a:hover {
  text-decoration: underline;
}

.hero-when {
  font-weight: 700;
  margin: 0;
}

.hero-tagline {
  color: var(--muted);
  margin: var(--space-2) 0 0;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-3) 0 0;
}

/* The event page's hero, built for phones first: one photo of the dojang (img/hero04.jpg), from
   the ceiling down to the mat's front edge. All its text is in capitals. Copy from
   docs/copy-deck/norcal-scrimmage-registration-site-copy.md, section 1.
   - On the bare wall above the scoreboard: the New Game logo where a banner would hang; "The /
     NorCal Scrimmage / Series"; then the date line.
   - On the mat below the gear (.hero-band): the headline in black, the subhead, Register, the link
     to who's registered and the note about paying at the door, over a light haze in the mat's own
     blue that only starts below the gear.

   The geometry: the scoreboard starts 34% of the way down the photo and the gear ends at 54.6%,
   with deep-blue mat below it (#014b9e at the bottom edge, the stage's own colour too).
   On a phone the crop (hero7-phone.jpg, 1300×2518, the scoreboard and gear) is scaled to the
   screen's width, 193.7vw tall, anchored at the top: the scoreboard starts at 66vw and the gear
   ends at 105.7vw, so the wall text is sized in vw and always ends above the scoreboard, and the
   wall block's min-height starts the band just under the gear. The stage ends where the band does,
   trimming whatever mat is left over. From 768px the whole photo (hero7-wide.jpg, 1.67:1, flags
   included) covers a stage at least 880px tall, room for the two-line date and place above the
   scoreboard and for the band under the gear, growing
   at 59.8vw so a wide screen shows the photo whole. */
.scrim-hero.hero-photo {
  padding: 0;
  border-bottom: 0;
  text-align: center;
  text-transform: uppercase;
}

.hero-stage {
  display: flex;
  flex-direction: column;
  padding: 6vw 0 9vw;
  background-color: #014b9e;
  background-image: url('/scrimmage/assets/brand/hero7-phone.jpg');
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center top;
}

.hero-photo .brand-logo {
  display: block;
  height: 12vw;
  width: auto;
  margin: 0 auto 3vw;
}

/* Black on the wall, with a white glow so a long name stays legible if it reaches a flag. */
.hero-photo h1,
.hero-photo .hero-when {
  color: #000000;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.9), 0 0 2px rgba(255, 255, 255, 0.9);
}

/* "The" / NAME / "Series": the name large, the words around it small, each on its own line. */
.hero-photo h1 {
  margin: 0 0 4vw;
  line-height: 1.05;
}

.hero-photo h1 span {
  display: block;
}

.hero-the,
.hero-series {
  font-size: 4.1vw;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.hero-the {
  margin-bottom: 1vw;
}

.hero-series {
  margin-top: 1vw;
}

.hero-photo .hero-name {
  font-size: 8.6vw;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* The date line: "Saturday, December 19 · New Game Taekwondo, Antioch". */
.hero-photo .hero-when {
  font-size: 4.8vw;
  font-weight: 700;
  line-height: 1.15;
  text-wrap: balance;
  margin: 0;
}

/* On a phone the wall block reaches down past the gear (64.3% of the 164.2vw photo, plus a gap),
   so the band always starts on the mat however much text it holds. */
.hero-wall {
  min-height: 102vw;
}

.hero-photo .hero-sub {
  color: #000000;
  font-size: 4.3vw;
  font-weight: 500;
  line-height: 1.25;
  text-wrap: balance;
  margin: 2.5vw auto 0;
}

/* Under the buttons: "Register online or pay at the door." */
.hero-photo .hero-note {
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 500;
  text-shadow: 0 1px 3px rgba(20, 70, 120, 0.45);
  margin: 2.5vw 0 0;
}

.hero-photo .hero-tagline {
  color: #000000;
  font-size: 6.6vw;
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-wrap: balance;
  max-width: 34ch;
  margin: 0 auto;
}

.hero-photo .hero-actions {
  margin-top: 5vw;
}

.hero-link {
  margin: 4.5vw 0 0;
  line-height: 1.2;
}

.scrim .hero-link a {
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
  text-underline-offset: 4px;
  text-shadow: 0 1px 3px rgba(20, 70, 120, 0.45);
}

@media (min-width: 768px) {
  .hero-stage {
    min-height: clamp(880px, 59.8vw, 1000px);
    padding: 28px 0 44px;
    background-color: #014b9e;
    background-image: url('/scrimmage/assets/brand/hero7-wide.jpg');
    background-size: cover;
    background-position: center top;
  }

  .hero-photo .brand-logo {
    height: 72px;
    margin-bottom: 14px;
  }

  .hero-photo h1 {
    margin-bottom: 18px;
  }

  .hero-the,
  .hero-series {
    font-size: 18px;
  }

  .hero-the {
    margin-bottom: 4px;
  }

  .hero-series {
    margin-top: 4px;
  }

  .hero-photo .hero-name {
    font-size: 44px;
  }

  .hero-photo .hero-when {
    font-size: 22px;
  }

  /* On a desktop the photo covers the whole stage and the band sits at its foot. */
  .hero-wall {
    min-height: 0;
  }

  .scrim .scrim-wrap.hero-band {
    margin-top: auto;
  }

  /* One line on a desktop, so the band fits the mat under the gear. */
  .hero-photo .hero-tagline {
    font-size: 30px;
    max-width: none;
  }

  .hero-photo .hero-sub {
    font-size: 19px;
    margin-top: 10px;
  }

  .hero-photo .hero-actions {
    margin-top: 20px;
  }

  .hero-link {
    margin-top: 18px;
  }

  .hero-photo .hero-note {
    margin-top: 10px;
  }
}

.chip {
  display: inline-block;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: var(--space-1) var(--space-3);
  font-size: 0.875rem;
  font-weight: 700;
}

/* Open: the site's offer yellow. */
.chip-open,
.chip-closing_soon {
  background: var(--offer);
  border-color: var(--offer);
  color: #000000;
}

.chip-closed {
  color: var(--muted);
}

.chip-waitlist,
.chip-opens_soon {
  border-color: var(--text);
}

/* ----------- Buttons ----------- */
.scrim .btn {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-text);
  border-radius: var(--radius);
  padding: 12px 24px;
  font-weight: 500;
  text-decoration: none;
  text-align: center;
  transition: background-color 0.2s ease;
}

.scrim .btn:hover {
  background: var(--accent-hover);
}

.scrim .btn-quiet {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}

/* Every main button on the public pages, styled as the hero's REGISTER NOW: capitals, bold, the
   same size. A Register button also says "Register now" (data-label, read by page.js). */
.scrim .btn-large {
  min-width: 214px;
  padding: 12px 36px;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.scrim .btn[disabled],
.scrim .btn[disabled]:hover {
  background: var(--accent);
  opacity: 0.6;
  cursor: progress;
}

/* ----------- Sections ----------- */
.scrim-section {
  padding: 40px 0;
  border-bottom: 1px solid var(--rule);
}

/* The footer draws its own rule. */
.scrim-section:last-child {
  border-bottom: 0;
}

.scrim-section h2 {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}

.scrim-section p {
  margin: 0 0 var(--space-3);
}

.scrim .muted {
  color: var(--muted);
}

/* Details: a grey panel, like the trial page's coach strip. */
.details-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  background: var(--panel);
  border-radius: 12px;
  padding: var(--space-3) 20px;
}

.details-grid dt {
  color: var(--muted);
  font-weight: 500;
}

.details-grid dd {
  margin: 0;
}

.table-scroll {
  overflow-x: auto;
}

.scrim table {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: var(--space-3);
}

.scrim th,
.scrim td {
  text-align: left;
  padding: var(--space-2);
  border-bottom: 1px solid var(--border);
}

.scrim th {
  font-weight: 700;
}

.nowrap {
  white-space: nowrap;
}

/* Why scrimmage: a lead line, four short titled points (two across on a wide screen), then the
   value and Gen 3 notes. */
.why-lead {
  font-size: 1.15rem;
  font-weight: 700;
}

.why-points {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

@media (min-width: 640px) {
  .why-points {
    grid-template-columns: 1fr 1fr;
  }
}

.why-point {
  background: var(--panel);
  border-radius: 12px;
  padding: var(--space-3) 20px;
}

.why-point h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 var(--space-1);
}

.scrim .why-point p {
  margin: 0;
}

.scrim .why-note {
  color: var(--muted);
}

/* Systems: one line per ring. */
.ring-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-3);
}

.ring-list li {
  margin-bottom: var(--space-2);
}

/* Who's registered: the nudge under the roster (its own line, body size), and the share line on
   its own page. */
.scrim .roster-nudge {
  margin: var(--space-3) 0 0;
}

.share-line {
  font-weight: 700;
  margin-top: var(--space-3);
}

/* What to bring: the trial page's tick list. */
.checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-3);
}

.checklist li {
  position: relative;
  padding-left: 30px;
  margin-bottom: var(--space-2);
}

.checklist li::before {
  content: '✓';
  position: absolute;
  left: 4px;
  font-weight: 700;
}

.callout {
  border-left: 4px solid var(--selected);
  border-radius: var(--radius-field);
  background: var(--selected-bg);
  padding: var(--space-3) 20px;
}

.notice {
  border-radius: 12px;
  background: var(--panel);
  padding: var(--space-3) 20px;
  margin: var(--space-3) 0;
}

/* FAQ: black rules between questions, as on the site. */
.faq-item {
  border-bottom: 1px solid #000000;
  padding: var(--space-4) 0;
}

.faq-item:first-child {
  padding-top: 0;
}

.faq-item:last-child {
  border-bottom: none;
}

.faq-item h3 {
  font-size: 1.125rem;
  font-weight: 500;
  margin: 0 0 var(--space-2);
}

.scrim .faq-item p {
  color: var(--soft);
  margin: 0;
}

/* ----------- Who's registered ----------- */
/* A heading per session, its age-group rows below. */
.roster-session {
  margin-top: var(--space-4);
}

.roster-session-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin-bottom: var(--space-2);
}

.roster-session-head h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
}

.roster-session-head .muted {
  font-weight: 400;
  font-size: 1rem;
}

.roster-session-head .count {
  color: var(--muted);
  white-space: nowrap;
}

/* "8 seats left" or "Full · waitlist only", after the session's count. */
.roster-session-head .seats {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--offer);
  color: #000000;
  font-size: 0.8rem;
  font-weight: 700;
}

.roster-session-head .seats-full {
  background: var(--ink);
  color: #ffffff;
}

/* An accordion of age-group rows, each holding its division rows. Black rules, as the FAQ. */
.roster-group {
  border-bottom: 1px solid #000000;
}

.roster-group:first-of-type {
  border-top: 1px solid #000000;
}

.roster-group > summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  padding: 20px 0;
  cursor: pointer;
  font-size: 1.125rem;
  font-weight: 500;
  list-style: none;
}

.roster-group[open] > summary {
  color: var(--accent);
}

.roster-group > summary::-webkit-details-marker {
  display: none;
}

/* A chevron that turns when the row opens, in place of the default triangle. */
.roster-group > summary .group-name::before {
  content: '▸';
  display: inline-block;
  width: 1.25em;
  transition: transform 0.15s ease;
}

.roster-group[open] > summary .group-name::before {
  transform: rotate(90deg);
}

.roster-group > summary .muted {
  font-weight: 400;
}

.roster-group > summary .count {
  color: var(--muted);
  font-weight: 400;
  white-space: nowrap;
}

.roster-group.is-empty > summary {
  color: var(--muted);
}

.roster-group-body {
  padding: 0 0 var(--space-3) var(--space-4);
}

/* The middle level: Female / Male within an age group. Same chevron, lighter weight. */
.roster-gender > summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-2) 0;
  cursor: pointer;
  font-weight: 500;
  list-style: none;
}

.roster-gender > summary::-webkit-details-marker {
  display: none;
}

.roster-gender > summary .group-name::before {
  content: '▸';
  display: inline-block;
  width: 1.25em;
  transition: transform 0.15s ease;
}

.roster-gender[open] > summary .group-name::before {
  transform: rotate(90deg);
}

.roster-gender > summary .count {
  color: var(--muted);
  font-weight: 400;
  white-space: nowrap;
}

.roster-gender.is-empty > summary {
  color: var(--muted);
}

.roster-gender-body {
  padding: 0 0 var(--space-2) var(--space-4);
}

@media (prefers-reduced-motion: reduce) {
  .roster-group > summary .group-name::before,
  .roster-gender > summary .group-name::before {
    transition: none;
  }
}

/* A division: the trial page's slot tile, a grey box with a 2px border. */
.division {
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  margin-bottom: var(--space-2);
}

.division summary {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  font-weight: 500;
}

.division > p,
.division > ul {
  padding: 0 var(--space-3) var(--space-2);
  margin: 0;
}

/* Greyed by colour and a dashed border, not opacity, so the text keeps its contrast. */
.division.is-empty {
  border-style: dashed;
  background: transparent;
  color: var(--muted);
}

.division .count {
  color: var(--muted);
  font-weight: 400;
  white-space: nowrap;
}

.entries {
  list-style: none;
}

.entries li {
  padding: var(--space-1) 0;
}

.ref {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ----------- The registration form ----------- */
/* No boxes: each group sits on the page under a heading, as the trial page's details form does. */
.scrim .reg-form .card {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--rule);
  border-radius: 0;
  padding: var(--space-4) 0 0;
  margin: 0 0 var(--space-3);
  min-width: 0;
}

.scrim .reg-form .card:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.scrim .reg-form legend {
  float: left;
  width: 100%;
  font-size: 1.25rem;
  font-weight: 500;
  padding: 0;
  margin-bottom: var(--space-3);
}

.scrim .reg-form legend + * {
  clear: both;
}

.scrim label {
  color: var(--text);
  font-size: 1rem;
  gap: 6px;
}

/* Side by side in a row only. In the form's column a 220px basis is a 220px height. */
.reg-form .row > label {
  flex: 1 1 220px;
}

.scrim #register > p {
  margin-top: var(--space-3);
}

.reg-form .row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Bootstrap's form-control, which the site uses: white, 48px tall, 6px corners, a blue ring on focus. */
.scrim input,
.scrim select,
.scrim textarea {
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-field);
  padding: 10px 12px;
}

/* One height for text fields and dropdowns. Safari (all of iOS) draws a native select at its own
   height and ignores min-height, so selects drop the native look and draw their own arrow. */
.scrim input:not([type='checkbox']):not([type='radio']),
.scrim select {
  height: 48px;
  line-height: 1.2;
}

.scrim select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px 12px;
}

.scrim input:focus,
.scrim select:focus,
.scrim textarea:focus {
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.scrim input[type='checkbox'],
.scrim input[type='radio'] {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--selected);
}

/* Filled in from elsewhere and locked: the contact's name while "I am 18+" is on. */
.scrim input[readonly] {
  background: var(--surface);
  color: var(--muted);
}

/* "I am 18+": a switch, the checkbox hidden over its track so it still takes taps, focus and
   screen readers (role="switch"). Blue when on, as the site's own toggles. */
.scrim .reg-form label.toggle {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  position: relative;
  align-self: flex-start;
  font-weight: 500;
  cursor: pointer;
}

.scrim .reg-form label.toggle input {
  position: absolute;
  left: 0;
  top: 50%;
  width: 52px;
  height: 32px;
  margin: 0;
  transform: translateY(-50%);
  opacity: 0;
  cursor: pointer;
}

.toggle-track {
  position: relative;
  flex: 0 0 52px;
  width: 52px;
  height: 32px;
  border-radius: 999px;
  background: #ced4da;
  transition: background-color 0.2s ease;
}

.toggle-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease;
}

.toggle input:checked + .toggle-track {
  background: var(--selected);
}

.toggle input:checked + .toggle-track::after {
  transform: translateX(20px);
}

.toggle input:focus-visible + .toggle-track {
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.scrim .reg-form label.toggle:has(input:disabled) {
  color: var(--muted);
  cursor: not-allowed;
}

.toggle input:disabled + .toggle-track {
  opacity: 0.5;
}

@media (prefers-reduced-motion: reduce) {
  .toggle-track,
  .toggle-track::after {
    transition: none;
  }
}

.reg-form label.inline {
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
}

.scrim .reg-form .election {
  border: 1px dashed var(--selected);
  border-radius: var(--radius);
  padding: var(--space-3);
}

.scrim .reg-form .election legend {
  float: none;
  font-size: 1rem;
  margin: 0;
  padding: 0 var(--space-1);
}

/* The division it will place you in: the trial page's "Selected time" panel. */
.preview {
  border-left: 4px solid var(--selected);
  border-radius: var(--radius-field);
  background: var(--selected-bg);
  padding: var(--space-3) 20px;
  color: var(--text);
}

.preview strong {
  display: block;
}

.scrim .hint {
  color: var(--muted);
  font-size: 0.875rem;
  margin: 0;
}

.field-invalid,
.scrim .field-invalid {
  border-color: var(--danger);
}

.field-error {
  color: var(--danger);
  font-size: 0.875rem;
}

.waiver {
  max-height: 14rem;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-field);
  padding: var(--space-3);
  background: var(--surface);
  white-space: pre-wrap;
  font-size: 0.95rem;
}

.reg-form .coupon {
  max-width: 22rem;
}

.reg-form .coupon input {
  text-transform: uppercase;
}

/* The submit button runs the full width, as the trial page's Confirm button does. */
.scrim .reg-form button[type='submit'] {
  width: 100%;
  align-self: stretch;
}

/* ----------- pay.html ----------- */
/* Where the Stripe Payment Element mounts. The dashed box is the stub; Stripe replaces the text
   with its own iframe. */
#payment-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

#payment-form .btn {
  width: 100%;
}

.payment-element {
  min-height: 12rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: var(--space-3);
  background: var(--surface);
  color: var(--muted);
}

/* ----------- After the content ----------- */
/* The Register button after the FAQ, so nobody scrolls back to the top to sign up. */
.closing-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-3);
  padding: 40px 0;
  margin: 0;
}

/* The Register bar that slides down once the page scrolls (sliding-cta.js), as on the
   newgametkd.com home page: black, full width, the button centred. */
.sliding-cta {
  position: fixed;
  top: -150px;
  left: 0;
  width: 100%;
  z-index: 1050;
  background-color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4) 0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: top 0.5s ease-in-out;
}

.sliding-cta.visible {
  top: 0;
}

@media (prefers-reduced-motion: reduce) {
  .sliding-cta {
    transition: none;
  }
}

/* The site's footer: who we are, where, the affiliations and the legal links. */
.scrim-footer {
  margin-top: 40px;
  padding: 40px 0;
  border-top: 1px solid var(--rule);
  font-size: 1rem;
}

.scrim-footer h2 {
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  margin: 0;
}

.scrim-footer .footer-tag {
  text-align: center;
  margin: 0 0 var(--space-4);
}

.scrim-footer p {
  margin: 0 0 var(--space-2);
}

.scrim .scrim-footer a {
  color: #000000;
  text-decoration: none;
}

.scrim .scrim-footer a:hover {
  text-decoration: underline;
}

.affiliations {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-4) 0;
}

.affiliations h3 {
  width: 100%;
  font-size: 1.1rem;
  font-weight: 500;
  margin: 0;
}

.affiliations img {
  height: 64px;
  width: auto;
}

.footer-legal {
  font-size: 0.875rem;
  color: var(--muted);
}

.footer-legal a {
  margin-right: var(--space-3);
}