.rules-hero-copy {
  position: relative;
  z-index: 1;
  max-width: 760px
}

.rules-block {
  scroll-margin-top: 110px
}

.rules-card-number {
  display: grid;
  flex: 0 0 31px;
  width: 31px;
  height: 31px;
  place-items: center;
  border-radius: 8px;
  background: #25365b;
  color: #a9baff;
  font-size: 10px;
  font-weight: 800
}

.rules-sanction {
  display: block;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #ffffff12;
  color: #bdc9dc;
  font-size: 12px;
  line-height: 1.55
}

.rules-sanction b {
  margin-right: 5px;
  color: #8fa8ff;
  font-size: 11px
}

.rules-outcome {
  display: grid;
  gap: 0
}

.rules-outcome-row {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 13px 3px;
  border-top: 1px solid #ffffff10
}

.rules-outcome-icon {
  display: grid;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid #34486e;
  border-radius: 9px;
  background: #1b2a43;
  color: #a8baff;
  font-size: 10px;
  font-weight: 800
}

.rules-outcome-row > div {
  padding-top: 1px
}

.rules-outcome-row b {
  color: #e4ebf8;
  font-size: 13px
}

.rules-outcome-row p {
  margin-top: 4px;
  color: #aab8cc;
  font-size: 13px;
  line-height: 1.6
}

.rules-outcome-final .rules-outcome-icon {
  border-color: #73505e;
  background: #3a2632;
  color: #ffa2b2
}

.rules-footnote {
  margin-top: 14px;
  color: #a4b2c7;
  font-size: 12px;
  line-height: 1.65
}

.rules-page { --accent: #86a5f7; --blue: #9bb1ff; --cyan: #61d3ff; }
.rules-page .rules-hero {
  border-color: color-mix(in oklab, var(--accent) 28%, var(--line-strong));
  border-radius: var(--r-lg);
  background: linear-gradient(125deg, #131e31, #101722);
  box-shadow: none;
}
.rules-page .rules-hero h1 {
  color: var(--text);
  font: 800 clamp(30px, 4vw, 42px)/1.12 var(--font-ui);
  letter-spacing: -.035em;
}
.rules-page .rules-hero p { color: #aab9d0; }
.rules-page .eyebrow.blue { color: var(--blue); }
.rules-card-number,
.rules-outcome-icon {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface-raised);
  color: var(--accent);
}
.rules-sanction,
.rules-outcome-row p,
.rules-footnote { color: var(--muted); }
.rules-sanction { border-top-color: var(--line); }
.rules-sanction b,
.rules-outcome-final .rules-outcome-icon { color: var(--offline); }
.rules-outcome-row { border-top-color: var(--line); }
.rules-outcome-row b { color: var(--text); }
.rules-outcome-final .rules-outcome-icon { border-color: var(--line-strong); background: var(--surface-raised); }