/*
  Checkout (slice R2, docs/H1-REBUILD-PLAN.md): the buy page, the unavailable states, donate, the thanks pages,
  the receipt and the demo checkout. BOARDS H1-Buy-* and H1-Pub-Donate*.

  Loaded by those pages only. These are the parts the H1 library does not have: the bands and their type, the
  part tabs of the buy form, the package summary, the logo slot and the chosen files, the totals, the hold and
  invoice notes, the amount card, the "Where this stands" and perks lists, and the numbered lists. 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-co.
*/

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

.h1-co-in {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--gzs-content-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.h1-co-narrow {
  max-width: 640px;
}

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

.h1-co-hero {
  padding-top: 32px;
  padding-bottom: 28px;
}

.h1-co-eyebrow {
  margin: 0;
}

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

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

.h1-co-title-md {
  font-size: 40px;
  line-height: 0.95;
}

.h1-co-title-sm {
  font-size: 28px;
  line-height: 1;
  text-transform: none;
  letter-spacing: -0.02em;
}

.h1-co-title-name {
  font-size: 48px;
}

.h1-co-title-sub {
  display: block;
  margin-top: 10px;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--h1-fg-bright);
}

.h1-co-lead {
  margin: 0;
  font-family: var(--gzs-font-body);
  font-size: 17px;
  line-height: 25px;
  color: var(--h1-fg-bright);
  overflow-wrap: anywhere;
}

.h1-co-text,
.h1-co-text-paper,
.h1-co-intro,
.h1-co-questions {
  margin: 0;
  font-family: var(--gzs-font-body);
  font-size: 15px;
  line-height: 22px;
  color: var(--h1-fg-2);
  overflow-wrap: anywhere;
}

.h1-co-text-paper,
.h1-co-questions {
  color: var(--h1-fg-body);
}

.h1-co-note,
.h1-co-small,
.h1-co-small-night,
.h1-co-bar-note {
  margin: 0;
  font-family: var(--gzs-font-body);
  font-size: 13px;
  line-height: 19px;
  color: var(--h1-fg-2);
}

.h1-co-actions {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

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

/* The part headings (BOARDS H1-Buy-* and H1-Pub-Donate*): 28px on a phone, 36px on desktop, tracking -0.03em. This sheet loads
   before h1.css, so a bare .h1-co-h2 lost to .h1-h2 (40px, then 64px). The body class makes these win without touching .h1-h2. */
.h1-co-body .h1-co-h2 {
  font-size: 28px;
  line-height: 0.95;
  letter-spacing: -0.03em;
}

.h1-co-h2-sm {
  margin: 0;
  font-family: var(--gzs-font-display);
  font-size: 24px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--h1-fg-strong);
}

.h1-co-h3 {
  margin: 0;
  font-family: var(--gzs-font-display);
  font-size: 22px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--h1-fg-strong);
}

.h1-co-h3-sm {
  margin: 0;
  font-family: var(--gzs-font-body);
  font-size: 16px;
  line-height: 22px;
  font-weight: 700;
  color: var(--h1-fg-strong);
}

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

.h1-co-trust .h1-icon {
  flex: none;
  margin-top: 1px;
}

.h1-co-questions a {
  font-weight: 700;
}

/* ---------- The band over the buy form ---------- */

/* Part 1 and desktop keep the big band. On parts 2 and 3 of a phone checkout.js sets data-co-part on it and it becomes the short band
   of BOARDS H1-Buy-Details-Phone and H1-Buy-Pay-Phone: "Sponsor Chris Larsen of the Hawks", the name at 36px beside a 64px jersey, and
   a "Your sponsorship $500 · Change" row. The server also sets data-co-part from the first error, so a page sent back opens right. */
.h1-co-titlerow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.h1-co-ey-short,
.h1-co-titleart,
.h1-co-yours {
  display: none;
}

.h1-co-titleart {
  box-sizing: border-box;
  flex: none;
  width: 64px;
  height: 64px;
  align-items: center;
  justify-content: center;
  background: var(--gzs-surface);
}

.h1-co-yours {
  box-sizing: border-box;
  min-height: 60px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--gzs-hairline);
  border-bottom: 1px solid var(--gzs-hairline);
}

.h1-co-yours-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.h1-co-yours-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-co-yours-num {
  font-family: var(--gzs-font-display);
  font-size: 28px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--h1-fg-strong);
}

.h1-co-yours-change {
  box-sizing: border-box;
  min-height: 44px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  font-family: var(--gzs-font-body);
  font-size: 15px;
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 1023.98px) {
  .h1-co-hero[data-co-part='2'],
  .h1-co-hero[data-co-part='3'] {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .h1-co-hero[data-co-part='2'] .h1-co-in,
  .h1-co-hero[data-co-part='3'] .h1-co-in {
    gap: 10px;
  }

  .h1-co-hero[data-co-part='2'] .h1-co-ey-full,
  .h1-co-hero[data-co-part='3'] .h1-co-ey-full {
    display: none;
  }

  .h1-co-hero[data-co-part='2'] .h1-co-ey-short,
  .h1-co-hero[data-co-part='3'] .h1-co-ey-short {
    display: inline;
  }

  .h1-co-hero[data-co-part='2'] .h1-co-title,
  .h1-co-hero[data-co-part='3'] .h1-co-title {
    font-size: 36px;
    line-height: 0.92;
  }

  .h1-co-hero[data-co-part='2'] .h1-co-titleart,
  .h1-co-hero[data-co-part='3'] .h1-co-titleart {
    display: flex;
  }

  .h1-co-hero[data-co-part='2'] .h1-co-yours,
  .h1-co-hero[data-co-part='3'] .h1-co-yours {
    display: flex;
    margin-top: 4px;
  }
}

/* ---------- The buy form ---------- */

.h1-co-grid {
  gap: 24px;
}

.h1-co-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.h1-co-step {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  padding-top: 12px;
}

.h1-co-parthead {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.h1-co-partnum {
  font-family: var(--gzs-font-mono);
  font-size: 13px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--h1-fg-2);
}

/* The three parts of step 2 (BOARD H1-Buy-Package-Phone "1 · Amount", "2 · Business", "3 · Pay"). */
.h1-co-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.h1-co-steps-link {
  box-sizing: border-box;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  text-decoration: none;
  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-co-steps-bar {
  height: 4px;
  background: var(--gzs-track);
}

.h1-co-steps-link[aria-current='step'],
.h1-co-steps-link.h1-co-steps-done {
  color: var(--gzs-ink);
  font-weight: 700;
}

.h1-co-steps-link[aria-current='step'] .h1-co-steps-bar,
.h1-co-steps-link.h1-co-steps-done .h1-co-steps-bar {
  background: var(--gzs-ink);
}

/* The package summary at the top of the form (BOARD H1-Buy-Package-Phone). */
.h1-co-summary {
  box-sizing: border-box;
  padding: 14px;
  background: var(--gzs-surface);
  border: 1px solid var(--gzs-card-border);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.h1-co-summary-who {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  font-family: var(--gzs-font-body);
  font-size: 15px;
  line-height: 20px;
  font-weight: 700;
  color: var(--gzs-ink);
  overflow-wrap: anywhere;
}

.h1-co-summary-who .h1-tile,
.h1-co-summary-who .h1-badge {
  flex: none;
}

.h1-co-summary-body {
  padding-top: 12px;
  border-top: 1px solid var(--gzs-row-line);
}

.h1-co-summary-body-art {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.h1-co-summary-art {
  display: flex;
  justify-content: center;
}

.h1-co-summary-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.h1-co-summary-day {
  margin: 2px 0 0;
  font-family: var(--gzs-font-body);
  font-size: 13px;
  line-height: 18px;
  color: var(--gzs-text-secondary);
}

.h1-co-subhead {
  margin-top: 8px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.h1-co-tips {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  background: var(--gzs-surface);
  border: 1px solid var(--gzs-card-border);
}

.h1-co-tip {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
}

.h1-co-tip dt {
  font-family: var(--gzs-font-mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gzs-text-secondary);
}

.h1-co-tip dd {
  margin: 0;
  font-family: var(--gzs-font-body);
  font-size: 14px;
  line-height: 20px;
  color: var(--gzs-text-body);
}

/* The logo slot: a dashed box around the file field (guide 4.x empty slot on paper). */
.h1-co-files {
  gap: 8px;
}

.h1-co-drop {
  position: relative;
  box-sizing: border-box;
  min-height: 112px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  padding: 16px;
  background: var(--gzs-surface-alt);
  border: 2px dashed var(--gzs-ink);
  cursor: pointer;
}

.h1-co-drop-error {
  border-color: var(--h1-error);
}

.h1-co-drop-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--gzs-font-body);
  font-size: 16px;
  line-height: 22px;
  font-weight: 700;
  color: var(--gzs-ink);
}

.h1-co-drop-hint {
  font-family: var(--gzs-font-body);
  font-size: 13px;
  line-height: 18px;
  color: var(--gzs-text-secondary);
}

/* The browser's own "Choose Files / No file chosen" control is hidden the accessible way (BOARD H1-Buy-Details-Phone): still in the
   page, still focusable, still the field that is sent, but 1px and see-through. The label around it is the target, so a tap
   anywhere in the slot opens the picker, and it works with no JavaScript. Focus shows on the slot, where the eye is. */
.h1-co-file {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.h1-co-drop:has(.h1-co-file:focus-visible) {
  outline: 3px solid var(--h1-focus);
  outline-offset: 2px;
}

.h1-co-files-count {
  margin: 4px 0 0;
  font-family: var(--gzs-font-mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gzs-text-secondary);
}

.h1-co-files-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.h1-co-fileitem {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  background: var(--gzs-surface);
  border: 1px solid var(--gzs-card-border);
}

.h1-co-fileitem-bad {
  background: var(--gzs-warm);
  border-color: var(--gzs-input-border);
}

.h1-co-fileitem-ext {
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gzs-input-border);
  font-family: var(--gzs-font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--gzs-ink);
}

.h1-co-fileitem-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.h1-co-fileitem-name {
  font-family: var(--gzs-font-mono);
  font-size: 14px;
  line-height: 18px;
  color: var(--gzs-ink);
  overflow-wrap: anywhere;
}

.h1-co-fileitem-size {
  font-family: var(--gzs-font-body);
  font-size: 13px;
  line-height: 18px;
  color: var(--gzs-text-secondary);
}

.h1-co-fileitem-remove {
  box-sizing: border-box;
  min-height: 44px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--gzs-input-border);
  border-radius: 0;
  background: var(--gzs-surface);
  color: var(--gzs-ink);
  font-family: var(--gzs-font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.h1-co-fileitem-remove:focus-visible {
  outline: 3px solid var(--h1-focus);
  outline-offset: 2px;
}

.h1-co-fileitem .h1-field-error {
  grid-column: 1 / -1;
}

.h1-co-more {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 8px;
}

.h1-co-colors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.h1-co-color {
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  padding: 4px;
  background: var(--gzs-surface);
  border: 1px solid var(--gzs-input-border);
  border-radius: 0;
  cursor: pointer;
}

.h1-co-color:focus-visible {
  outline: 3px solid var(--h1-focus);
  outline-offset: 2px;
}

.h1-co-pair {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.h1-co-terms {
  box-sizing: border-box;
  padding: 14px 16px;
  background: var(--gzs-surface);
  border: 1px solid var(--gzs-card-border);
}

.h1-co-terms-title {
  margin: 0 0 6px;
  font-family: var(--gzs-font-body);
  font-size: 15px;
  line-height: 20px;
  font-weight: 700;
  color: var(--gzs-ink);
}

.h1-co-terms p {
  margin: 0;
  font-family: var(--gzs-font-body);
  font-size: 14px;
  line-height: 20px;
  color: var(--gzs-text-body);
}

.h1-co-boxes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.h1-co-boxnote {
  margin: 8px 0 0;
  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-co-total {
  margin-top: 8px;
  padding-top: 14px;
  border-top: 2px solid var(--gzs-ink);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.h1-co-total-label {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.h1-co-total-word {
  font-family: var(--gzs-font-body);
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  color: var(--h1-fg-strong);
}

.h1-co-total-pkg {
  font-family: var(--gzs-font-body);
  font-size: 13px;
  line-height: 18px;
  color: var(--h1-fg-2);
  overflow-wrap: anywhere;
}

.h1-co-total-num {
  font-family: var(--gzs-font-display);
  font-size: 40px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--gzs-ink);
}

.h1-co-hold {
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  background: var(--gzs-surface);
  border: 1px solid var(--gzs-card-border);
  color: var(--gzs-ink);
}

.h1-co-hold .h1-icon {
  flex: none;
  margin-top: 1px;
}

.h1-co-hold p {
  margin: 0;
  font-family: var(--gzs-font-body);
  font-size: 15px;
  line-height: 22px;
  color: var(--gzs-text-body);
}

.h1-co-hold strong {
  color: var(--gzs-ink);
}

.h1-co-invoice-facts {
  box-sizing: border-box;
  padding: 14px 16px;
  background: var(--gzs-surface);
  border: 1px solid var(--gzs-card-border);
  flex-direction: column;
  gap: 10px;
}

.h1-co-facts {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.h1-co-fact {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.h1-co-fact dt {
  font-family: var(--gzs-font-mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gzs-text-secondary);
}

.h1-co-fact dd {
  margin: 0;
  font-family: var(--gzs-font-body);
  font-size: 15px;
  line-height: 22px;
  color: var(--gzs-text-body);
}

.h1-co-fact strong {
  color: var(--gzs-ink);
}

/* The bars with the red button, stuck to the bottom of the screen while their part is in view (BOARDS H1-Buy-*-Phone and
   H1-Pub-Donate-Phone: night, a hairline above, 60px button). A sticky bar only sticks inside its parent, and the two wrappers were
   exactly as tall as the bar, so it never left its place at the end of the page. The wrappers now add no box of their own
   (display: contents), so the bar's parent is the whole part (the buy form's section, the donate form), which is as tall as the
   page. The page sits on night and the bar is in a paper band, so the bar takes the night colors itself. */
.h1-co-next,
.h1-co-submit {
  display: contents;
}

.h1-co-next[hidden] {
  display: none;
}

.h1-co-next .h1-sticky-bar,
.h1-co-submit .h1-sticky-bar {
  margin: 8px calc(-1 * var(--gzs-gutter-public)) 0;
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
}

@media (max-width: 1023.98px) {
  .h1-co-next .h1-sticky-bar,
  .h1-co-submit .h1-sticky-bar {
    --h1-bar-bg: var(--gzs-night);
    --h1-bar-rule: 1px solid var(--gzs-hairline);
    --h1-fg: var(--gzs-text-on-night);
    --h1-fg-2: var(--gzs-text-secondary-night);
    --h1-focus: var(--gzs-waiting);
  }
}

/* Invoice or pay now (RC2). Without :has, every part shows and the button keeps "Continue to payment", as v1
   did; checkout.js keeps them in step either way. */
.h1-co-label-invoice {
  display: none;
}

.h1-co-invoice-only {
  display: flex;
  flex-direction: column;
}

@supports selector(:has(a)) {
  .h1-co-invoice-only {
    display: none;
  }

  .h1-co-grid:has(input[name='pay_method'][value='invoice']:checked) .h1-co-invoice-only {
    display: flex;
  }

  .h1-co-grid:has(input[name='pay_method'][value='invoice']:checked) .h1-co-checkout-only {
    display: none;
  }

  .h1-co-grid:has(input[name='pay_method'][value='invoice']:checked) .h1-co-label-invoice {
    display: inline;
  }

  .h1-co-grid:has(input[name='pay_method'][value='invoice']:checked) .h1-co-label-checkout {
    display: none;
  }
}

/* One part at a time on a phone, once checkout.js runs. Desktop always shows the whole form. */
@media (max-width: 1023.98px) {
  .h1-co-js .h1-co-step-off {
    display: none;
  }
}

@media (min-width: 1024px) {
  .h1-co-steps,
  .h1-co-next {
    display: none;
  }

  .h1-co-hero {
    padding-top: 48px;
    padding-bottom: 40px;
  }

  .h1-co-title {
    font-size: 72px;
  }

  .h1-co-title-md {
    font-size: 56px;
  }

  .h1-co-title-sm {
    font-size: 36px;
  }

  .h1-co-body .h1-co-h2 {
    font-size: 36px;
  }

  .h1-co-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--gzs-aside);
    gap: 48px;
    align-items: start;
  }

  .h1-co-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .h1-co-more {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .h1-co-more .h1-field:has(.h1-textarea) {
    grid-column: 1 / -1;
  }

  .h1-co-step {
    padding-top: 24px;
    border-top: 1px solid var(--gzs-card-border);
  }

  .h1-co-submit .h1-sticky-bar {
    position: static;
    margin: 8px 0 0;
    padding: 0;
    background: transparent;
    border-top: 0;
  }
}

/* The night summary beside the form on desktop (BOARD H1-Buy-Checkout-Desktop). */
.h1-co-aside {
  box-sizing: border-box;
  position: sticky;
  top: 24px;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--gzs-hairline);
}

.h1-co-aside-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.h1-co-aside-change {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-family: var(--gzs-font-body);
  font-size: 15px;
  font-weight: 700;
}

.h1-co-aside-pkg {
  display: flex;
  align-items: center;
  gap: 14px;
}

.h1-co-aside-art {
  flex: none;
  padding: 4px;
  background: var(--gzs-surface);
}

.h1-co-aside-what {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.h1-co-aside-name {
  font-family: var(--gzs-font-display);
  font-size: 26px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--h1-fg-strong);
  overflow-wrap: anywhere;
}

.h1-co-aside-for {
  font-family: var(--gzs-font-body);
  font-size: 15px;
  line-height: 20px;
  color: var(--h1-fg-2);
}

.h1-co-aside-total {
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--gzs-hairline);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.h1-co-aside-num {
  font-family: var(--gzs-font-display);
  font-size: 72px;
  line-height: 0.9;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--h1-fg-strong);
}

.h1-co-aside .h1-co-hold {
  background: var(--gzs-raised);
  border-color: var(--gzs-hairline);
  color: var(--h1-fg);
}

.h1-co-aside .h1-co-hold p {
  color: var(--h1-fg-bright);
}

.h1-co-aside .h1-co-hold strong {
  color: var(--h1-fg-strong);
}

.h1-co-aside .h1-co-checkout-only > * + * {
  margin-top: 12px;
}

@media (min-width: 1024px) {
  .h1-co-aside.h1-desktop-only {
    display: flex;
  }
}

/* ---------- Night cards: the amount, the hold, the status ---------- */

.h1-co-amount {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  background: var(--gzs-raised);
  border: 1px solid var(--gzs-hairline);
}

.h1-co-amount-label {
  margin: 0;
  display: flex;
  justify-content: space-between;
  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-co-amount-figure {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
}

.h1-co-amount-total {
  flex-basis: 100%;
  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-co-amount-num {
  font-family: var(--gzs-font-display);
  font-size: 64px;
  line-height: 0.9;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--h1-fg-strong);
}

.h1-co-amount-method {
  font-family: var(--gzs-font-display);
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  color: var(--h1-fg-bright);
}

.h1-co-amount-foot {
  margin: 0;
  font-family: var(--gzs-font-body);
  font-size: 13px;
  line-height: 18px;
  color: var(--h1-fg-2);
  overflow-wrap: anywhere;
}

.h1-co-amount-what {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--gzs-hairline);
}

.h1-co-amount-what .h1-badge {
  flex: none;
}

.h1-co-amount-what-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.h1-co-amount-title {
  font-family: var(--gzs-font-display);
  font-size: 20px;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--h1-fg-strong);
  overflow-wrap: anywhere;
}

.h1-co-amount-sub {
  font-family: var(--gzs-font-body);
  font-size: 14px;
  line-height: 20px;
  color: var(--h1-fg-2);
  overflow-wrap: anywhere;
}

.h1-co-amount-note {
  display: block;
  margin-top: 4px;
  font-family: var(--gzs-font-body);
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--h1-fg-2);
}

.h1-co-held,
.h1-co-blurry {
  box-sizing: border-box;
  display: flex;
  gap: 12px;
  padding: 16px 18px;
  background: var(--gzs-raised);
  border: 1px solid var(--gzs-hairline);
}

.h1-co-blurry {
  flex-direction: column;
  border-top: 3px solid var(--gzs-waiting);
}

.h1-co-held .h1-icon {
  flex: none;
  color: var(--h1-waiting-fg);
}

.h1-co-held-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.h1-co-held-title {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--gzs-font-body);
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  color: var(--h1-fg-strong);
}

.h1-co-blurry .h1-co-held-title .h1-icon {
  flex: none;
  margin-top: 3px;
  color: var(--h1-waiting-fg);
}

.h1-co-held-text {
  margin: 0;
  font-family: var(--gzs-font-body);
  font-size: 15px;
  line-height: 22px;
  color: var(--h1-fg-bright);
}

.h1-co-status {
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--gzs-raised);
  border: 1px solid var(--gzs-hairline);
}

.h1-co-status-mark {
  box-sizing: border-box;
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--gzs-control);
}

.h1-co-status-ok .h1-co-status-mark {
  background: var(--gzs-text-on-night);
  border-color: var(--gzs-text-on-night);
  color: var(--gzs-ink);
}

.h1-co-status-waiting .h1-co-status-mark {
  background: var(--gzs-waiting);
  border-color: var(--gzs-waiting);
}

.h1-co-status-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.h1-co-status-title {
  font-family: var(--gzs-font-body);
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  color: var(--h1-fg-strong);
}

.h1-co-status-sub {
  font-family: var(--gzs-font-body);
  font-size: 14px;
  line-height: 20px;
  color: var(--h1-fg-bright);
}

.h1-co-paid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.h1-co-paid-pkg {
  font-family: var(--gzs-font-display);
  font-size: 20px;
  line-height: 1.1;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--h1-fg-bright);
  overflow-wrap: anywhere;
}

.h1-co-state-chip {
  display: flex;
}

/* ---------- Lists on paper ---------- */

/* "Where this stands" (BOARD H1-Buy-Thanks-Phone): done, waiting, next. */
.h1-co-stands {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--gzs-surface);
  border: 1px solid var(--gzs-card-border);
}

.h1-co-stand {
  box-sizing: border-box;
  min-height: 56px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-top: 1px solid var(--gzs-row-line);
  font-family: var(--gzs-font-body);
  font-size: 16px;
  line-height: 22px;
  color: var(--gzs-ink);
}

.h1-co-stand:first-child {
  border-top: 0;
}

.h1-co-stand-waiting {
  font-weight: 700;
  box-shadow: inset 4px 0 0 var(--gzs-waiting);
}

.h1-co-stand-box {
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--gzs-control);
  background: var(--gzs-surface);
}

.h1-co-stand-done .h1-co-stand-box {
  background: var(--gzs-ink);
  border-color: var(--gzs-ink);
  color: var(--gzs-surface);
}

.h1-co-stand-dot {
  width: 8px;
  height: 8px;
  background: var(--gzs-waiting);
}

.h1-co-stand-label {
  min-width: 0;
  overflow-wrap: anywhere;
}

.h1-co-stand-word {
  font-family: var(--gzs-font-mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gzs-text-secondary);
}

/* Mono numbered list ("01 No card number is asked for"). */
.h1-co-numbered {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}

.h1-co-numbered-item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 8px;
  padding: 12px 0;
  border-top: 1px solid var(--h1-line);
  font-family: var(--gzs-font-body);
  font-size: 16px;
  line-height: 22px;
  color: var(--h1-fg);
}

.h1-co-numbered-num {
  font-family: var(--gzs-font-mono);
  font-size: 13px;
  line-height: 22px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--h1-fg-2);
}

/* The receipt's record, perks and files. */
.h1-co-record,
.h1-co-perks,
.h1-co-logos {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.h1-co-receipt-paper .h1-co-in {
  gap: 32px;
  max-width: 760px;
}

.h1-co-perks-count {
  margin: 0;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-family: var(--gzs-font-mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gzs-text-secondary);
}

.h1-co-perks-list {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--gzs-surface);
  border: 1px solid var(--gzs-card-border);
}

.h1-co-perk {
  box-sizing: border-box;
  min-height: 56px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px;
  border-top: 1px solid var(--gzs-row-line);
}

.h1-co-perk:first-child {
  border-top: 0;
}

.h1-co-perk-box {
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--gzs-control);
  background: var(--gzs-surface);
}

.h1-co-perk-done .h1-co-perk-box {
  background: var(--gzs-ink);
  border-color: var(--gzs-ink);
  color: var(--gzs-surface);
}

.h1-co-perk-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.h1-co-perk-label {
  font-family: var(--gzs-font-body);
  font-size: 15px;
  line-height: 22px;
  color: var(--gzs-ink);
  overflow-wrap: anywhere;
}

.h1-co-perk-date {
  font-family: var(--gzs-font-body);
  font-size: 13px;
  line-height: 18px;
  color: var(--gzs-text-secondary);
}

.h1-co-logos-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.h1-co-logos-tips {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ---------- Donate ---------- */

.h1-co-paycard {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  background: var(--gzs-surface);
  border: 1px solid var(--gzs-card-border);
}

.h1-co-paycard p {
  margin: 0;
  font-family: var(--gzs-font-body);
  font-size: 14px;
  line-height: 20px;
  color: var(--gzs-text-body);
}

.h1-co-paycard .h1-co-paychips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.h1-co-gift-hero .h1-co-in {
  max-width: 640px;
}

[data-co-label-blank][hidden],
[data-co-label-amount][hidden],
[data-co-dot][hidden] {
  display: none;
}

@media (min-width: 1024px) {
  .h1-co-numbered-item {
    font-size: 17px;
  }

  .h1-co-amount-num {
    font-size: 76px;
  }
}

/* Where :has is missing, checkout.js marks the choice on the grid instead (h1-co-pay-checkout or h1-co-pay-invoice). */
.h1-co-grid.h1-co-pay-checkout .h1-co-invoice-only,
.h1-co-grid.h1-co-pay-invoice .h1-co-checkout-only,
.h1-co-grid.h1-co-pay-invoice .h1-co-label-checkout {
  display: none;
}

.h1-co-grid.h1-co-pay-invoice .h1-co-label-invoice {
  display: inline;
}

/* ---------- The amount cards on the buy page (BOARDS H1-Buy-Package-Phone and H1-Buy-Checkout-Desktop) ---------- */

/* 88px cards with the big figure at the top left, the square at the top right and the small words at the bottom; two across on a
   phone, four across on desktop. The donate amounts keep the H1 amount card (64px, the square at the left), which is what
   BOARD H1-Pub-Donate-Phone draws. These rules sit under .h1-co-buy because this sheet loads before h1.css. */
.h1-co-buy .h1-radio-cards-grid .h1-radio-card {
  grid-template-columns: minmax(0, 1fr) 22px;
  align-items: stretch;
  min-height: 88px;
  padding: 12px 14px;
}

.h1-co-buy .h1-radio-cards-grid .h1-radio-card:has(.h1-check-input:checked) {
  padding: 11px 13px;
}

.h1-co-buy .h1-radio-cards-grid .h1-radio-card .h1-box {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
}

.h1-co-buy .h1-radio-cards-grid .h1-radio-card-text {
  grid-column: 1;
  grid-row: 1;
  gap: 8px;
  justify-content: space-between;
}

.h1-co-buy .h1-radio-cards-grid .h1-radio-card .h1-radio-card-title,
.h1-co-buy .h1-radio-cards-grid .h1-radio-card:has(.h1-check-input:checked) .h1-radio-card-title {
  font-size: 32px;
  line-height: 0.9;
  letter-spacing: -0.04em;
}

/* Four across needs a wide column (a $1,000 figure at 44px is 139px wide and the card has 132px to give at 1440px), so from 1400px.
   Between 1024px and 1399px desktop keeps two across, as on a phone. The figure is 40px until the cards are wide enough for the
   board's 44px. */
@media (min-width: 1400px) {
  .h1-co-buy .h1-radio-cards-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }

  .h1-co-buy .h1-radio-cards-grid .h1-radio-card {
    min-height: 112px;
    padding: 16px 20px;
  }

  .h1-co-buy .h1-radio-cards-grid .h1-radio-card:has(.h1-check-input:checked) {
    padding: 15px 19px;
  }

  .h1-co-buy .h1-radio-cards-grid .h1-radio-card .h1-radio-card-title,
  .h1-co-buy .h1-radio-cards-grid .h1-radio-card:has(.h1-check-input:checked) .h1-radio-card-title {
    font-size: 40px;
  }

  .h1-co-buy .h1-radio-cards-grid .h1-radio-card-sub {
    font-size: 14px;
  }
}

@media (min-width: 1520px) {
  .h1-co-buy .h1-radio-cards-grid .h1-radio-card .h1-radio-card-title,
  .h1-co-buy .h1-radio-cards-grid .h1-radio-card:has(.h1-check-input:checked) .h1-radio-card-title {
    font-size: 44px;
  }
}

/* ---------- The demo checkout title (BOARD H1-Buy-DemoCheckout-Phone: 56px) ---------- */

.h1-co-title.h1-co-title-xl {
  font-size: 56px;
  line-height: 0.9;
}

/* "Cancel and go back" sits centered under the Pay button, as drawn. */
.h1-co-actions .h1-link {
  align-self: center;
}

@media (min-width: 1024px) {
  .h1-co-title.h1-co-title-xl {
    font-size: 72px;
  }
}