/* WagerWiener sections — workstream B. Primitives (.wrap/.section/.card/.chip/.btn/.mono)
   come from base.css; nothing here redefines a color, font or focus style.
   Reveals are opacity/clip-path only — never translate (CLS budget, SPEC-003 #29). */

/* ============================================================ 3 · Value / the board */
.v-head {
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.v-head-lead {
  max-width: 44ch;
}
/* The leagues and the sportsbook note ride in the header's right half instead of costing
   two further rows at the bottom of the section. */
.v-head-aside {
  display: grid;
  gap: 0.6rem;
  margin-top: 1.25rem;
}
.v-lede {
  margin-top: 1rem;
}
.v-grid {
  display: grid;
  gap: clamp(0.875rem, 1.6vw, 1.25rem);
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Narrow screens run the index number beside the title instead of on its own line: three
   stacked lines per card is a row of dead width down the left of every card. */
.v-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 0.4rem 0.6rem;
  padding: clamp(1.1rem, 2.4vw, 1.75rem);
  transition:
    border-color var(--transition-interactive),
    box-shadow var(--transition-interactive);
}
.v-card:hover {
  border-color: rgba(212, 175, 55, 0.45);
  box-shadow: var(--shadow-md);
}
.v-index {
  color: var(--gold);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.18em;
}
.v-card-title {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
}
.v-card-body {
  grid-column: 1 / -1;
  color: var(--text-muted);
  font-size: var(--text-small);
  max-width: 34ch;
}
.v-card-line {
  display: block;
}
.v-leagues {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.35rem 0 0;
  padding: 0;
  list-style: none;
}
.v-league {
  padding: 0.28rem 0.6rem;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--text);
}
@media (min-width: 720px) {
  .v-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Wide cards have the room for the index to sit above the title again. */
  .v-card {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 0.75rem;
  }
}

@media (min-width: 900px) {
  .v-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
    column-gap: clamp(2rem, 5vw, 5rem);
  }
  .v-head-aside {
    margin-top: 0;
    justify-items: end;
    text-align: right;
  }
  .v-head-aside .v-leagues {
    justify-content: flex-end;
  }
  .v-head-aside .how-foot {
    margin-top: 0;
  }
}
@media (min-width: 1080px) {
  .v-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .v-card-body {
    max-width: none;
  }
}

/* ============================================================ 4 · How it works */
.how {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(11, 61, 46, 0.55) 0%, transparent 62%),
    var(--ink);
  border-block: 1px solid var(--line);
}
.how-head {
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.how-steps {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.how-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 1.75rem);
  align-items: start;
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--line);
  position: relative;
}
.how-step:last-child {
  border-bottom: 1px solid var(--line);
}
.how-num {
  font-size: clamp(3rem, 9vw, 5.25rem);
  font-weight: 700;
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--gold);
  min-width: 1.6ch;
  text-align: center;
}
.how-step-title {
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  margin-bottom: 0.5rem;
}
.how-copy {
  color: var(--text-muted);
  font-size: var(--text-small);
}
.how-foot {
  margin-top: 1.5rem;
  font-size: var(--text-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
@media (min-width: 900px) {
  .how-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.5rem, 3vw, 2.5rem);
  }
  .how-step {
    /* Number beside the copy rather than stacked above it: stacking cost ~90px of blank
       space per step, and the three copy blocks no longer share a top edge because they
       wrap to different line counts. */
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    gap: clamp(0.75rem, 1.5vw, 1.1rem);
    border-top: 1px solid var(--line);
    border-bottom: 0;
    padding-block: 1.25rem 0;
  }
  .how-num {
    font-size: clamp(2.25rem, 3.4vw, 3.25rem);
  }
  .how-step-title {
    display: block;
    margin-bottom: 0.25rem;
  }
  .how-step:last-child {
    border-bottom: 0;
  }
  /* the connecting rule: a gold tick sitting on the top border of each step */
  .how-step::before {
    content: '';
    position: absolute;
    inset-block-start: -1px;
    inset-inline-start: 0;
    width: 44px;
    height: 3px;
    background: var(--gold);
  }
  .how-num {
    text-align: left;
    margin-bottom: 1rem;
  }
}

/* ============================================================ 5 · Illustrative concepts */
.proof {
  overflow: hidden;
}
.proof-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.proof-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Pure texture: a soft floodlight wash plus a fine dot grid. The brand
     identity board was legible even at 5% opacity, so it is not used here —
     that also removes a 92 KB image request from every page load. */
  background:
    radial-gradient(80% 60% at 12% 0%, rgba(11, 61, 46, 0.55) 0%, transparent 60%),
    radial-gradient(70% 60% at 92% 100%, rgba(212, 175, 55, 0.1) 0%, transparent 62%),
    radial-gradient(circle at center, rgba(248, 245, 233, 0.05) 0.5px, transparent 0.6px) 0 0 / 22px 22px;
}
/* scrim so the board art never competes with the examples or the disclaimer */
.proof-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 35%, rgba(5, 16, 11, 0.72) 0%, rgba(5, 16, 11, 0.96) 100%),
    linear-gradient(180deg, var(--ink) 0%, transparent 22%, transparent 78%, var(--ink) 100%);
}
.proof-inner {
  position: relative;
}
.proof-head {
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}
.proof-lede {
  margin-top: 1rem;
  max-width: 52ch;
}
.proof-tablewrap {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(13, 42, 32, 0.92), rgba(7, 35, 24, 0.92));
}
.proof-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.proof-table thead {
  display: none;
}
/* Narrow screens stack each row into a small card. `display: grid` on a <tr> drops the
   implicit table roles, so the markup restates them explicitly — otherwise a screen reader
   loses the row and column structure this section depends on. */
.proof-row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: baseline;
  gap: 0.3rem 0.6rem;
  padding: 0.85rem clamp(0.875rem, 3vw, 1.5rem);
  border-top: 1px solid var(--line);
}
.proof-table tbody .proof-row:first-child {
  border-top: 0;
}
.proof-row td {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0;
  color: var(--text-muted);
  font-size: var(--text-small);
}
/* Row 1 is the metadata line: example number, league, then the type pushed to the right.
   Row 2 is the ticket, row 3 the leg count. */
.proof-row td:nth-child(3) {
  grid-column: 1 / -1;
  grid-row: 2;
  color: var(--text);
}
.proof-row td.proof-num {
  grid-column: 1 / -1;
  grid-row: 3;
}
.proof-row td.proof-res {
  grid-column: 3;
  grid-row: 1;
  justify-content: flex-end;
}
/* The per-cell labels are dropped on narrow screens: five repeated mono labels per row cost
   more height than the data and read as noise once the row is a card. The information they
   carried is in the column headers, which assistive tech reads from the restored roles. */
.proof-row td::before {
  content: none;
}
.proof-row td.proof-num::before {
  content: attr(data-l);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.proof-chip {
  padding: 0.22rem 0.55rem;
  font-size: 0.6875rem;
  color: var(--text);
  border-color: rgba(212, 175, 55, 0.45);
}
.proof-legs {
  color: var(--gold);
  font-size: 1.125rem;
  font-weight: 700;
}
.proof-res {
  justify-content: flex-end;
}
.proof-flag {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.proof-disclaimer {
  margin-top: 1.25rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--gold);
  border-radius: var(--r-sm);
  background: rgba(5, 16, 11, 0.72);
  color: var(--text);
  font-size: var(--text-small);
  max-width: 78ch;
}
.proof-disclaimer-tag {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
@media (min-width: 860px) {
  .proof-table thead {
    display: table-header-group;
  }
  .proof-table thead th {
    padding: 0.9rem clamp(1rem, 2vw, 1.5rem);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-faint);
    border-bottom: 1px solid var(--line);
  }
  .proof-table thead .proof-num,
  .proof-table thead .proof-res {
    text-align: right;
  }
  .proof-row {
    display: table-row;
    padding: 0;
  }
  .proof-row td {
    display: table-cell;
    padding: 1rem clamp(1rem, 2vw, 1.5rem);
    border-top: 1px solid var(--line);
    vertical-align: middle;
  }
  /* Reset every narrow-screen grid placement: the row is a real table row again. */
  .proof-row td:nth-child(3),
  .proof-row td.proof-num,
  .proof-row td.proof-res {
    grid-column: auto;
    grid-row: auto;
  }
  .proof-row td.proof-num,
  .proof-row td.proof-res {
    text-align: right;
    white-space: nowrap;
  }
  .proof-row td::before,
  .proof-row td.proof-num::before {
    content: none;
  }
  .proof-flag {
    justify-content: flex-end;
  }
}

/* ============================================================ 6 · Pricing */
.price-head {
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}
.price-lede {
  margin-top: 1rem;
  max-width: 52ch;
}
.price-region {
  margin-top: 1.25rem;
  text-transform: none;
  letter-spacing: 0.04em;
  min-height: 34px;
}
.price-grid {
  display: grid;
  gap: clamp(0.875rem, 2vw, 1.5rem);
  grid-template-columns: 1fr;
  align-items: stretch;
}
.price-card {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: clamp(1.5rem, 3vw, 2rem);
}
.price-card--best {
  border-color: rgba(212, 175, 55, 0.55);
  box-shadow: var(--shadow-gold);
}
.price-flag {
  align-self: flex-start;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: var(--gold);
  color: var(--ink);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.price-plan {
  font-size: 1.5rem;
}
.price-amount {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
  min-height: 3rem;
}
.price-figure {
  font-size: clamp(2.5rem, 5vw, 3.25rem);
  font-weight: 700;
  line-height: 1;
  color: var(--bone);
}
.price-period {
  font-size: var(--text-small);
  color: var(--text-muted);
}
.price-note {
  margin-top: 0.4rem;
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--win);
  min-height: 1.2em;
}
.price-list {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--text-muted);
  font-size: var(--text-small);
  flex: 1 1 auto;
  align-content: start;
}
.price-list li {
  position: relative;
  padding-left: 1.4rem;
}
.price-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border: 1px solid var(--gold);
  border-radius: 2px;
}
.price-cta {
  width: 100%;
  min-height: 52px;
}
.price-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  padding: 1rem 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.price-trust-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.price-trust-item::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
}
@media (min-width: 800px) {
  .price-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ============================================================ 7 · Join */
.join {
  background:
    radial-gradient(90% 70% at 85% 15%, rgba(11, 61, 46, 0.6) 0%, transparent 60%),
    var(--ink);
  border-block: 1px solid var(--line);
}
.join-inner {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: 1fr;
  /* Stretch, not start: the copy column has to match the panel's height so the mascot can
     sit on the same baseline as the panel's bottom edge instead of leaving a dead corner. */
  align-items: stretch;
}
.join-copy {
  display: flex;
  flex-direction: column;
}
.join-lede {
  margin-top: 1rem;
  max-width: 46ch;
}
.join-founders {
  margin-top: clamp(1.5rem, 3vw, 2rem);
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(13, 42, 32, 0.6);
}
.join-founders-figure {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.6rem;
  min-height: 2.75rem;
}
.join-count {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  line-height: 1;
  color: var(--gold);
}
.join-cap {
  font-size: var(--text-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.join-founders-note {
  margin-top: 0.4rem;
  font-size: var(--text-small);
  color: var(--text-muted);
}
.join-mascot {
  width: min(240px, 62%);
  height: auto;
  /* auto pushes the art to the bottom of the copy column, so it closes the column off
     against the panel rather than floating with empty space underneath. */
  margin-top: auto;
  padding-top: clamp(1.5rem, 3vw, 2rem);
  opacity: 0.92;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.55));
}
.join-form {
  display: grid;
  gap: 1.25rem;
  padding: clamp(1.25rem, 3vw, 2rem);
}
.join-fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}
.join-legend {
  padding: 0;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.join-plans {
  display: grid;
  gap: 0.6rem;
  margin-top: 0.75rem;
}
.join-plan {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 64px;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: rgba(5, 16, 11, 0.45);
  cursor: pointer;
  transition:
    border-color var(--transition-interactive),
    background var(--transition-interactive);
}
.join-plan:hover {
  border-color: var(--line-strong);
}
.join-plan input {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  accent-color: var(--gold);
  margin: 0;
}
.join-plan:has(input:checked) {
  border-color: var(--gold);
  background: rgba(212, 175, 55, 0.08);
}
.join-plan-body {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.75rem;
}
.join-plan-name {
  font-weight: 500;
}
.join-plan-price {
  font-size: var(--text-small);
  color: var(--text-muted);
}
.join-plan-note {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--win);
}
.join-field {
  display: grid;
  gap: 0.45rem;
}
.join-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.join-input {
  width: 100%;
  min-height: 52px;
  padding: 0 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: rgba(5, 16, 11, 0.6);
  color: var(--text);
  font-size: 1rem;
  transition: border-color var(--transition-interactive);
}
.join-input::placeholder {
  color: var(--text-faint);
}
.join-input:hover {
  border-color: rgba(212, 175, 55, 0.5);
}
.join-input[aria-invalid='true'] {
  border-color: var(--loss);
}
.join-hint {
  font-size: 0.8125rem;
  color: var(--text-muted);
}
.join-error {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8125rem;
  color: var(--loss);
}
.join-error::before {
  content: '×';
  font-family: var(--font-mono);
  font-weight: 700;
}
.join-error[hidden] {
  display: none;
}
.join-submit {
  width: 100%;
}
/* No margin of its own: the grid gap already separates it, and the extra margin opened a
   visible hole between the button and the assurances. */
/* Two even columns rather than a wrapping flex row, which left "no wagers here" and "18+"
   sharing a line under two full-width items. */
.join-form .price-trust {
  margin-top: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem 1rem;
}
.join-status {
  min-height: 1.25rem;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.join-terms {
  font-size: 0.8125rem;
  color: var(--text-muted);
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}
@media (min-width: 900px) {
  .join-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
  }
  .join-mascot {
    /* Larger and bled into the left gutter: this column is otherwise 300px of empty
       background next to a tall panel. Sized to fill the height the copy leaves — the
       founder counter above it is hidden until the first subscription, and at 420px the
       column held roughly 200px of nothing between the lede and the art. */
    width: min(520px, 100%);
    margin-left: calc(var(--gutter) * -0.5);
  }
}

/* ============================================================ 8 · FAQ */
.faq-inner {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 3rem);
  grid-template-columns: 1fr;
  align-items: start;
}
.faq-list {
  border-top: 1px solid var(--line);
}
.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 60px;
  padding-block: 1rem;
  cursor: pointer;
  list-style: none;
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--text);
}
.faq-q::-webkit-details-marker {
  display: none;
}
.faq-q:hover {
  color: var(--bone);
}
.faq-q:hover .faq-mark {
  border-color: var(--gold);
}
.faq-q-text {
  max-width: 46ch;
}
.faq-a a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  overflow-wrap: anywhere;
  max-width: 100%;
}
.faq-mark {
  position: relative;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  transition: border-color var(--transition-interactive);
}
.faq-mark::before,
.faq-mark::after {
  content: '';
  position: absolute;
  inset-inline: 7px;
  inset-block-start: calc(50% - 0.5px);
  height: 1px;
  background: var(--gold);
}
.faq-mark::after {
  transform: rotate(90deg);
  transition: opacity 200ms var(--ease-out);
}
.faq-item[open] .faq-mark::after {
  opacity: 0;
}
.faq-item[open] .faq-mark {
  border-color: var(--gold);
}
/* grid-template-rows height animation — no max-height hacks */
.faq-a-outer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 320ms var(--ease-out);
}
.faq-item[open] .faq-a-outer {
  grid-template-rows: 1fr;
}
.faq-a {
  overflow: hidden;
  min-height: 0;
}
.faq-a p {
  padding-bottom: 1.25rem;
  max-width: 62ch;
  color: var(--text-muted);
  font-size: var(--text-small);
}
@media (prefers-reduced-motion: reduce) {
  .faq-a-outer {
    transition: none;
  }
  /* Native toggling bypasses the animated wrapper's inline row value. */
  .faq-item[open] [data-faq-panel] {
    grid-template-rows: 1fr !important;
  }
}
@media (min-width: 900px) {
  .faq-inner {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  }
}

/* ============================================================ 9 · Footer */
.foot {
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, var(--ink) 0%, #030a07 100%);
  padding-block: clamp(3rem, 6vw, 4.5rem) 1.5rem;
}
/* Narrow screens put the brand across the top and the three link blocks in two columns.
   One stacked column ran the footer past 1000px of mostly empty gutter. */
.foot-inner {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem) 1.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.foot-brand {
  grid-column: 1 / -1;
}
.foot-help {
  grid-column: 1 / -1;
}
.foot-wordmark {
  width: clamp(150px, 22vw, 200px);
  height: auto;
}
.brand-tagline {
  display: block;
  margin-top: 0.5rem;
  font-size: clamp(0.8125rem, 0.9vw, 0.9375rem);
  font-style: italic;
  font-weight: 500;
  color: var(--bone);
}
.foot-tagline {
  margin-top: 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.foot-h {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 0.85rem;
}
.foot-links {
  display: grid;
  gap: 0 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.foot-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  max-width: 100%;
  overflow-wrap: anywhere;
  color: var(--text-muted);
  text-decoration: none;
  font-size: var(--text-small);
}
.foot-links a:hover {
  color: var(--gold-bright);
}
.foot-mail a {
  display: inline-block;
  min-height: 44px;
  max-width: 100%;
  padding-block: 0.65rem;
  overflow-wrap: anywhere;
  font-family: var(--font-mono);
  font-size: var(--text-small);
}
.foot-contact-note,
.foot-help-note {
  margin-top: 0.35rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
  max-width: 34ch;
}
.foot-legal {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 0.75rem;
}
.foot-legal-line {
  font-size: 0.8125rem;
  color: var(--text-muted);
  max-width: 92ch;
}
.foot-copy {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--text-faint);
}
@media (min-width: 760px) {
  .foot-inner {
    grid-template-columns: 1.2fr 0.8fr 1fr 1.2fr;
  }
  .foot-brand,
  .foot-help {
    grid-column: auto;
  }
  .foot-links {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.15rem;
  }
  .foot-legal {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
  .foot-copy {
    text-align: right;
  }
}

/* ── Polish pass: balance, density and short-viewport fit ─────────────── */

/* League chips read as a rail under the four cards, so every card carries the
   same visual weight instead of card 04 growing a tail. */
.v-leagues {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  padding: 0;
}
/* The card's own layout is defined once at the top of this file (grid, index beside the title
   on narrow screens). An earlier polish pass redeclared it as a flex column here and silently
   won on source order, which is why the narrow-screen change appeared to do nothing. */
/* Bodies sit directly under their titles. Bottom-aligning them left card 04 with a gap because
   its copy is shorter than the others. */
.v-card-body {
  margin-top: 0;
}

/* ── Member sign-in (/login) ──────────────────────────────────────────── */

.auth {
  min-height: 66vh;
  display: flex;
  align-items: center;
}
.auth-inner {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.auth-title {
  margin-top: 0.75rem;
  max-width: 14ch;
}
.auth-lede {
  margin-top: 1.25rem;
  max-width: 42ch;
}
.auth-notes {
  list-style: none;
  margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.auth-notes li {
  display: flex;
  gap: 0.6rem;
}
.auth-notes li::before {
  content: '—';
  color: var(--gold);
}
.auth-form {
  display: grid;
  gap: 1.25rem;
  padding: clamp(1.25rem, 3vw, 2rem);
}
.auth-submit {
  width: 100%;
}
.auth-alt {
  font-size: 0.8125rem;
  color: var(--text-muted);
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}
.auth-alt a,
.waitlist-support {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  max-width: 100%;
  overflow-wrap: anywhere;
}

@media (min-width: 900px) {
  .auth-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
  }
}

/* ==========================================================================
   SPEC-006 §3 — motion affordances
   Every rule here animates transform / opacity / filter / background-position /
   stroke-dashoffset only, so none of it can move layout (§3.30, §3.31).
   ========================================================================== */

/* Section hairline that wipes in from the left on enter (§3.28). Absolutely positioned,
   so it occupies no space and cannot change section height. */
.section {
  position: relative;
}
.section-rule {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(212, 175, 55, 0.55) 0%,
    var(--line-strong) 32%,
    var(--line) 70%,
    transparent 100%
  );
  transform-origin: left center;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  html.js .section-rule {
    transform: scaleX(0);
  }
  html.js .section-rule.is-drawn {
    transform: scaleX(1);
    transition: transform 900ms var(--ease-out);
  }
}

/* Gold sheen that follows the pointer across a card (§3.27). The gradient is painted on a
   ::after layer at opacity 0 so there is nothing to composite until the pointer arrives. */
.card {
  position: relative;
  isolation: isolate;
}
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    22rem 22rem at var(--sheen-x, 50%) var(--sheen-y, 0%),
    rgba(212, 175, 55, 0.16),
    rgba(212, 175, 55, 0) 62%
  );
  transition: opacity 260ms var(--ease-out);
}
.card.is-sheened::after {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce), (pointer: coarse) {
  .card::after {
    display: none;
  }
}

/* The price figures flip on their X axis when the resolved currency changes (§3.29). */
.is-flipping {
  animation: price-flip 460ms var(--ease-out);
}
@keyframes price-flip {
  0% {
    transform: rotateX(0deg);
    opacity: 1;
  }
  45% {
    transform: rotateX(-90deg);
    opacity: 0.15;
  }
  100% {
    transform: rotateX(0deg);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .is-flipping {
    animation: none;
  }
}

/* ── Join panel: the plan tiles are the price list and the chooser (SPEC-006 §2.10) ── */

.join-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  width: 100%;
  margin-bottom: 0.9rem;
  padding: 0;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.join-region {
  font-size: 0.625rem;
  color: var(--gold);
  border-color: rgba(212, 175, 55, 0.35);
}
.join-plan-line {
  font-size: 0.8125rem;
  color: var(--text-muted);
}
.join-plan-note {
  margin-left: 0.35rem;
  color: var(--gold);
}
/* The recommended tile carries a gold edge rather than a floating badge, so the two tiles
   stay the same height and the grid keeps its rhythm. */
.join-plan--best .join-plan-body {
  border-color: rgba(212, 175, 55, 0.42);
}