.six-ways-overview {
  padding: clamp(8rem, 12vw, 10rem) var(--pad) clamp(4rem, 7vw, 6rem);
}

.six-ways-overview h1 {
  margin: 0;
  font-size: clamp(2.1rem, 4vw, 4rem);
  font-weight: 900;
  letter-spacing: -0.055em;
  line-height: 0.98;
}

/* Overview-only state swap: Core Accent at rest, existing Soft Field on interaction. */
.six-ways-page .way-question { --way-field: var(--way-question-field); }
.six-ways-page .way-move { --way-field: var(--way-move-field); }
.six-ways-page .way-fortify { --way-field: var(--way-fortify-field); }
.six-ways-page .way-express { --way-field: var(--way-express-field); }
.six-ways-page .way-create { --way-field: var(--way-create-field); }
.six-ways-page .way-celebrate { --way-field: var(--way-celebrate-field); }
.six-ways-page .homepage-participation .way-card {
  background: var(--way-field);
  color: #0B0C0E;
}
.six-ways-page .homepage-participation .way-card::before {
  background: var(--way-accent);
}
.six-ways-page .homepage-participation .way-card::after {
  border-color: var(--way-accent);
}
.six-ways-page .homepage-participation .way-card h3 {
  color: var(--way-accent);
  /* Keep the exact bright fill legible on Soft Fields without darkening the palette. */
  -webkit-text-stroke: 1.5px #0B0C0E;
  paint-order: stroke fill;
}
.six-ways-page .homepage-participation .way-card :is(p, .way-number) {
  color: #0B0C0E;
}
.six-ways-page .homepage-participation .way-card .way-link {
  color: var(--way-accent);
  -webkit-text-stroke: 1px #0B0C0E;
  paint-order: stroke fill;
  text-decoration: underline;
  text-decoration-color: var(--way-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
}
.six-ways-page .homepage-participation .way-card:not(:is(:hover, :focus-visible, :active)) {
  background: var(--way-accent);
  color: #0B0C0E;
}
.six-ways-page .homepage-participation .way-card:not(:is(:hover, :focus-visible, :active)) :is(h3, p, .way-number, .way-link) {
  color: #0B0C0E;
  -webkit-text-stroke: 0;
  text-decoration-color: currentColor;
}
.six-ways-page .way-card:not(:is(:hover, :focus-visible, :active)) .way-link span {
  transform: translateX(0.25rem);
}
.six-ways-page .homepage-participation .way-card:focus-visible {
  outline: 3px solid #0B0C0E !important;
  outline-offset: -7px;
  box-shadow: inset 0 0 0 3px var(--paper);
}

/* Move the existing icon and arrow treatments with their original color states. */
.six-ways-page .way-card .way-symbol {
  opacity: 1;
  transform: translateY(-45%) scale(1);
}
.six-ways-page .way-card:is(:hover, :focus-visible, :active) .way-symbol {
  opacity: 0;
  transform: translateY(-45%) scale(0.82);
}
.six-ways-page .way-card:is(:hover, :focus-visible, :active) .way-link span {
  transform: none;
}