.modes-page {
  overflow: clip;
}

.modes-page section[id] {
  scroll-margin-top: 7rem;
}

.modes-page .eyebrow,
.modes-page .kicker {
  margin: 0;
}

.modes-page h1,
.modes-page h2,
.modes-page h3,
.modes-page p,
.modes-page ul,
.modes-page ol {
  margin: 0;
}

.modes-page a {
  font-weight: 650;
}

.modes-hero {
  padding: var(--space-7) 0 var(--space-8);
}

.modes-hero__shell {
  position: relative;
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  min-height: 35rem;
  overflow: hidden;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}

.modes-hero__media {
  grid-column: 1 / -1;
  grid-row: 1;
  width: 100%;
  min-width: 0;
  margin: 0;
}

.modes-hero__media::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(16 42 67 / 24%), transparent 68%);
  content: "";
}

.modes-hero__media img {
  width: 100%;
  height: 100%;
  min-height: 35rem;
  object-fit: cover;
  object-position: center;
}

.modes-hero__trajectory {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--color-emerald-500);
  fill: none;
  opacity: 0.74;
  pointer-events: none;
  stroke: currentColor;
  stroke-dasharray: 7 9;
  stroke-width: 3;
}

.modes-hero__panel {
  z-index: 1;
  grid-column: 1 / span 5;
  grid-row: 1;
  align-self: center;
  min-width: 0;
  max-width: 31.875rem;
  margin-left: var(--space-7);
  padding: var(--space-7);
  border: var(--border-default);
  border-radius: var(--radius-lg);
  background: rgb(255 252 247 / 94%);
  box-shadow: var(--shadow-card);
}

.modes-hero__panel > * + * {
  margin-top: var(--space-5);
}

.modes-hero__panel h1 {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
}

.modes-hero__lead {
  max-width: 37rem;
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
}

.modes-hero__actions {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.modes-hero__actions > * {
  min-width: 0;
}

.modes-hero__routes {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
}

.modes-hero__routes a {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  color: var(--color-navy-950);
  font-size: var(--text-sm);
}

.modes-hero__routes a::before {
  width: 1.1rem;
  height: 2px;
  margin-right: var(--space-2);
  background: var(--color-emerald-500);
  content: "";
}

.modes-map {
  background: var(--color-pearl-100);
}

.modes-map__intro {
  display: flex;
  grid-column: 1 / span 7;
  flex-direction: column;
  min-width: 0;
  gap: var(--space-4);
  max-width: 44rem;
  margin-bottom: var(--space-7);
}

.modes-map__intro > p:last-child {
  max-width: 64ch;
}

.modes-map__cards {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-5);
}

.modes-format-card,
.modes-decision {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  border: var(--border-default);
  border-radius: var(--radius-md);
  background: var(--color-pearl-50);
  box-shadow: var(--shadow-card);
}

.modes-format-card p:not(.kicker) {
  max-width: 34ch;
}

.modes-format-card > a,
.modes-format-card__links {
  margin-top: auto;
}

.modes-format-card__icon {
  display: flex;
  width: 2.75rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--color-emerald-700);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
}

.modes-format-card--duel { grid-column: 1 / span 4; border-top: 4px solid var(--color-emerald-500); }
.modes-format-card--quick { grid-column: 5 / span 4; border-top: 4px solid var(--color-azure-600); }
.modes-format-card--challenge { grid-column: 9 / span 4; border-top: 4px solid var(--color-sun-400); }
.modes-format-card--competition { grid-column: 1 / span 6; border-top: 4px solid var(--color-coral-500); }

.modes-format-card--quick .modes-format-card__icon { background: var(--color-azure-600); }
.modes-format-card--challenge .modes-format-card__icon { background: var(--color-sun-400); color: var(--color-navy-950); }
.modes-format-card--competition .modes-format-card__icon { background: var(--color-coral-500); }

.modes-format-card__links {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.modes-decision {
  grid-column: 7 / span 6;
  background: var(--color-pearl-100);
  box-shadow: none;
}

.modes-decision__steps {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.modes-decision__steps p {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-2);
}

.modes-decision__steps strong,
.modes-duel__mark,
.modes-timeline__card > .numeric,
.modes-preparation__axis > .numeric {
  color: var(--color-emerald-700);
  font-family: var(--font-heading);
  font-weight: 750;
}

.modes-duel__grid {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: start;
}

.modes-duel__intro {
  display: flex;
  grid-column: 1 / span 5;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-4);
}

.modes-duel__intro > p:last-child {
  max-width: 58ch;
}

.modes-duel__mark {
  font-size: clamp(3rem, 6vw, 5rem);
  line-height: 0.8;
}

.modes-duel__image {
  position: relative;
  grid-column: 6 / span 4;
  grid-row: span 2;
  width: 100%;
  min-width: 0;
  min-height: 34rem;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.modes-duel__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.modes-duel__image svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--color-emerald-500);
  fill: none;
  opacity: 0.8;
  stroke: currentColor;
  stroke-dasharray: 6 8;
  stroke-width: 3;
}

.modes-mechanic,
.modes-routine {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-md);
}

.modes-mechanic p:not(.kicker) { max-width: 32ch; }
.modes-mechanic--wind { grid-column: 10 / span 3; background: var(--color-azure-100); }
.modes-mechanic--spin { grid-column: 10 / span 3; background: var(--color-pearl-100); }
.modes-routine { grid-column: 1 / span 5; background: var(--color-emerald-700); color: var(--color-white); }
.modes-routine h3, .modes-routine .kicker { color: var(--color-white); }
.modes-routine .kicker { color: var(--color-sun-400); }
.modes-routine a { color: var(--color-white); }
.modes-routine ol { padding-inline-start: 1.4rem; }

.modes-practice {
  background: var(--color-pearl-100);
}

.modes-practice > .container > h2 {
  margin-top: var(--space-3);
  margin-bottom: var(--space-6);
}

.modes-practice__grid {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

.modes-practice__solo,
.modes-practice__quick {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  border: var(--border-default);
  border-radius: var(--radius-lg);
}

.modes-practice__solo { background: var(--color-pearl-50); }
.modes-practice__quick { background: var(--color-azure-100); }
.modes-practice__solo p:not(.kicker),
.modes-practice__quick p:not(.kicker) { max-width: 48ch; }
.modes-practice__quick a { margin-top: auto; }

.modes-engagement {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.5fr) minmax(0, 0.7fr);
  gap: var(--space-5);
  align-items: center;
  margin-top: var(--space-5);
  padding: var(--space-5) var(--space-6);
  border: var(--border-default);
  border-radius: var(--radius-md);
  background: var(--color-pearl-50);
}

.modes-engagement > * { min-width: 0; }
.modes-engagement p { max-width: 70ch; }
.modes-engagement .numeric { color: var(--color-azure-600); font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 750; }

.modes-engagement__criteria {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-2);
}

.modes-engagement__criteria span {
  font-family: var(--font-heading);
  font-weight: 700;
}

.modes-challenges > .container > h2 {
  margin-top: var(--space-3);
  margin-bottom: var(--space-6);
}

.modes-challenges__grid {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-5);
}

.modes-checkpoint,
.modes-golden {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
}

.modes-checkpoint { grid-column: 1 / span 7; background: #e6f6ef; border: 1px solid #9bd8c3; }
.modes-golden { position: relative; grid-column: 8 / span 5; background: var(--color-navy-950); color: var(--color-white); }
.modes-golden h3, .modes-golden .kicker { color: var(--color-white); }
.modes-golden .kicker { color: var(--color-sun-400); }
.modes-golden a { margin-top: auto; color: var(--color-white); }
.modes-checkpoint p:not(.kicker), .modes-golden p:not(.kicker) { max-width: 40ch; }
.modes-checkpoint ul { padding-inline-start: 1.4rem; }

.modes-golden__dot {
  width: 2rem;
  min-height: 2rem;
  border-radius: 50%;
  background: var(--color-sun-400);
}

.modes-editorial-note {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding: var(--space-5);
  border: var(--border-default);
  border-radius: var(--radius-md);
}

.modes-editorial-note > p:last-child { max-width: 72ch; }

.modes-competition {
  background: var(--color-azure-100);
}

.modes-competition__heading {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.modes-competition__image {
  width: 100%;
  min-width: 0;
  height: 18rem;
  margin: 0 0 var(--space-6);
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.modes-competition__image img { width: 100%; height: 100%; object-fit: cover; }

.modes-timeline {
  position: relative;
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.modes-timeline::before {
  position: absolute;
  z-index: 0;
  top: 2.2rem;
  left: 10%;
  width: 80%;
  height: 2px;
  background: var(--color-emerald-500);
  content: "";
}

.modes-timeline__card {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  border: var(--border-default);
  border-radius: var(--radius-md);
  background: var(--color-pearl-50);
}

.modes-timeline__card:nth-child(2) { background: var(--color-pearl-100); }
.modes-timeline__card:nth-child(3) { background: var(--color-azure-100); }
.modes-timeline__card > .numeric { font-size: var(--text-2xl); }
.modes-timeline__card p:not(.numeric) { max-width: 38ch; }

.modes-competition__summary {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--space-5);
  align-items: center;
  margin-top: var(--space-5);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-navy-950);
  color: var(--color-white);
}

.modes-competition__summary > * { min-width: 0; }
.modes-competition__summary h3, .modes-competition__summary .eyebrow { color: var(--color-white); }
.modes-competition__summary .eyebrow { color: var(--color-sun-400); }
.modes-competition__summary ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin: 0; padding-inline-start: 1.3rem; }

.modes-preparation__grid {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-6);
  align-items: start;
}

.modes-preparation__content {
  display: flex;
  grid-column: 1 / span 7;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-5);
}

.modes-preparation__image {
  grid-column: 8 / span 5;
  width: 100%;
  min-width: 0;
  min-height: 38rem;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.modes-preparation__image img { width: 100%; height: 100%; object-fit: cover; }

.modes-preparation__axis {
  display: grid;
  min-width: 0;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: var(--space-4);
  padding-left: var(--space-4);
  border-inline-start: 3px solid var(--color-emerald-500);
}

.modes-preparation__axis:nth-of-type(4) { border-inline-start-color: var(--color-azure-600); }
.modes-preparation__axis > .numeric { font-size: var(--text-xl); }
.modes-preparation__axis > div { display: flex; min-width: 0; flex-direction: column; gap: var(--space-3); }
.modes-preparation__axis p { max-width: 54ch; }

.modes-checklist {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  border: var(--border-default);
  border-radius: var(--radius-md);
  background: var(--color-pearl-100);
}

.modes-checklist ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-5); margin: 0; padding-inline-start: 1.4rem; }

.modes-community { background: var(--color-pearl-100); }
.modes-community > .container > h2 { margin-top: var(--space-3); margin-bottom: var(--space-6); }

.modes-community__grid,
.modes-next__cards {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.modes-community-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 20rem;
  flex-direction: column;
  gap: var(--space-4);
  overflow: hidden;
  padding: var(--space-5);
  border: var(--border-default);
  border-radius: var(--radius-md);
  background: var(--color-pearl-50);
}

.modes-community-card--replay { background: var(--color-azure-100); }
.modes-community-card--personal { background: var(--color-pearl-100); border-top: 4px solid var(--color-coral-500); }
.modes-community-card p:not(.kicker) { max-width: 34ch; }
.modes-community-card a { margin-top: auto; }
.modes-community-card svg { position: absolute; right: -2rem; bottom: 1rem; width: 11rem; color: var(--color-emerald-500); fill: none; opacity: 0.3; stroke: currentColor; stroke-width: 3; }

.modes-community__note {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding: var(--space-5);
  border-top: 4px solid var(--color-emerald-700);
  background: var(--color-pearl-50);
}

.modes-community__note p { max-width: 65ch; }

.modes-trust {
  background: var(--color-pearl-50);
}

.modes-trust__panel {
  width: min(100%, 50rem);
  margin-inline: auto;
  padding: var(--space-6);
  border: var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--color-azure-100);
}

.modes-trust__download {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-4);
}

.modes-trust__download p:last-child { max-width: 60ch; }

.modes-trust__details {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-5);
}

.modes-trust__details article {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  border: var(--border-default);
  border-radius: var(--radius-md);
  background: var(--color-pearl-50);
}

.modes-trust__details p { max-width: 66ch; }
.modes-trust__details ul { margin: 0; padding-inline-start: 1.4rem; }

.modes-next { background: var(--color-pearl-100); }
.modes-next__intro { display: flex; min-width: 0; flex-direction: column; gap: var(--space-4); max-width: 40rem; margin-bottom: var(--space-6); }
.modes-next__intro p:last-of-type { max-width: 64ch; }
.modes-next__intro .button { align-self: flex-start; margin-top: var(--space-2); }

.modes-next-card {
  display: flex;
  min-width: 0;
  min-height: 17rem;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  border: var(--border-default);
  border-radius: var(--radius-md);
  background: var(--color-pearl-50);
  box-shadow: var(--shadow-card);
  color: var(--color-text);
  text-decoration: none;
  transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.modes-next-card p { max-width: 34ch; }
.modes-next-card > span:last-child { margin-top: auto; color: var(--color-azure-600); }
.modes-next-card:hover { border-color: var(--color-emerald-500); transform: translateY(-2px); }
.modes-next-card:hover > span:last-child { color: var(--color-emerald-700); }

@media (max-width: 64rem) {
  .modes-hero__panel { grid-column: 1 / span 6; }
  .modes-format-card--duel { grid-column: 1 / span 6; }
  .modes-format-card--quick { grid-column: 7 / span 6; }
  .modes-format-card--challenge { grid-column: 1 / span 6; }
  .modes-format-card--competition { grid-column: 7 / span 6; }
  .modes-decision { grid-column: 1 / -1; }
  .modes-duel__intro { grid-column: 1 / span 6; }
  .modes-duel__image { grid-column: 7 / span 6; }
  .modes-mechanic--wind { grid-column: 1 / span 6; }
  .modes-mechanic--spin { grid-column: 7 / span 6; }
  .modes-routine { grid-column: 1 / -1; }
  .modes-preparation__content { grid-column: 1 / span 7; }
  .modes-preparation__image { grid-column: 8 / span 5; }
}

@media (max-width: 60rem) {
  .modes-competition__summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modes-competition__summary > p { grid-column: 1 / -1; }
  .modes-preparation__grid { grid-template-columns: 1fr; }
  .modes-preparation__image { grid-column: 1; grid-row: 1; min-height: 24rem; }
  .modes-preparation__content { grid-column: 1; grid-row: 2; }
  .modes-next__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 55rem) {
  .modes-challenges__grid { grid-template-columns: 1fr; }
  .modes-checkpoint, .modes-golden { grid-column: 1; }
  .modes-timeline { grid-template-columns: 1fr; padding-left: var(--space-5); }
  .modes-timeline::before { top: 2rem; bottom: 2rem; left: 0.5rem; width: 2px; height: auto; }
  .modes-timeline__card { min-height: 0; }
  .modes-community__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 51.25rem) {
  .modes-practice__grid { grid-template-columns: 1fr; }
  .modes-engagement { grid-template-columns: 1fr; }
  .modes-engagement__criteria { flex-direction: row; flex-wrap: wrap; }
}

@media (max-width: 47.5rem) {
  .modes-hero { padding-top: var(--space-5); }
  .modes-hero__shell { display: flex; min-height: 0; flex-direction: column; overflow: visible; box-shadow: none; border-radius: 0; }
  .modes-hero__media { position: relative; order: 1; height: auto; overflow: hidden; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .modes-hero__media img { min-height: 0; aspect-ratio: 4 / 3; }
  .modes-hero__media::after { display: none; }
  .modes-hero__trajectory { display: none; }
  .modes-hero__panel { order: 2; width: 100%; max-width: none; margin: 0; padding: var(--space-5); border-radius: 0 0 var(--radius-lg) var(--radius-lg); box-shadow: none; }
  .modes-hero__panel h1 { font-size: clamp(2.4rem, 12vw, 3rem); }
  .modes-hero__lead { max-width: none; }
  .modes-hero__actions { flex-direction: column; }
  .modes-hero__actions > * { width: 100%; }
  .modes-map__intro { margin-bottom: var(--space-6); }
  .modes-map__cards { grid-template-columns: 1fr; }
  .modes-format-card--duel, .modes-format-card--quick, .modes-format-card--challenge, .modes-format-card--competition, .modes-decision { grid-column: 1; }
  .modes-decision__steps { grid-template-columns: 1fr; }
  .modes-duel__grid { grid-template-columns: 1fr; }
  .modes-duel__intro, .modes-duel__image, .modes-mechanic--wind, .modes-mechanic--spin, .modes-routine { grid-column: 1; grid-row: auto; }
  .modes-duel__image { order: 2; min-height: 0; aspect-ratio: 4 / 3; }
  .modes-duel__intro { order: 1; }
  .modes-mechanic--wind { order: 3; }
  .modes-mechanic--spin { order: 4; }
  .modes-routine { order: 5; }
  .modes-practice__solo, .modes-practice__quick, .modes-checkpoint, .modes-golden { padding: var(--space-5); }
  .modes-competition__image { height: auto; aspect-ratio: 16 / 9; }
  .modes-competition__summary { grid-template-columns: 1fr; }
  .modes-competition__summary > p { grid-column: 1; }
  .modes-competition__summary ol { grid-template-columns: 1fr; }
  .modes-preparation__image { min-height: 0; aspect-ratio: 4 / 3; }
  .modes-checklist ul { grid-template-columns: 1fr; }
  .modes-community__grid, .modes-next__cards, .modes-trust__details { grid-template-columns: 1fr; }
  .modes-community-card, .modes-next-card { min-height: 0; }
  .modes-trust__panel { padding: var(--space-5); }
  .modes-next__intro .button { width: 100%; min-height: 3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .modes-next-card:hover { transform: none; }
}