.solution-hero {
  max-width: 900px;
}

.solution-hero h1 {
  max-width: none;
  font-size: 3.5rem;
}

#principles-title {
  max-width: none;
}

.solution-hero .notice {
  max-width: 760px;
  margin-top: 32px;
}

.context-list {
  display: grid;
  gap: clamp(68px, 9vw, 112px);
}

.context-row {
  scroll-margin-top: 110px;
}

.context-row__header {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: clamp(20px, 4vw, 48px);
  max-width: 900px;
  margin-bottom: 32px;
}

.context-row__header > span {
  color: var(--ocean-600);
  font-size: var(--type-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
}

.context-row__header .english-label {
  margin-bottom: 10px;
  color: var(--ocean-700);
}

.context-row__header h2 {
  max-width: none;
}

.context-row__header p:last-child {
  color: var(--muted);
}

.context-flow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 0;
  margin: 0;
  border-top: var(--border-strong);
  list-style: none;
}

.context-flow li {
  min-width: 0;
  padding: 24px 20px;
  border-bottom: var(--border-strong);
}

.context-flow li + li {
  border-left: var(--border-strong);
}

.context-flow span {
  display: block;
  margin-bottom: 12px;
  color: var(--ocean-700);
  font-size: var(--type-label);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.context-flow p {
  margin-bottom: 0;
  color: var(--muted);
}

.principle-grid .card {
  box-shadow: none;
}

.solution-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 28px);
}

.solution-links .card {
  color: inherit;
  text-decoration: none;
  transition: transform var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}

.solution-links .card:hover {
  border-color: var(--ocean-600);
  transform: translateY(-2px);
}

@media (max-width: 1040px) {
  .solution-hero h1 {
    font-size: 2.5rem;
  }

  .context-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .context-flow li + li {
    border-left: 0;
  }

  .context-flow li:nth-child(even) {
    border-left: var(--border-strong);
  }
}

@media (max-width: 760px) {
  .solution-links {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .solution-hero h1 {
    font-size: 1.75rem;
  }

  .context-row__header,
  .context-flow {
    grid-template-columns: 1fr;
  }

  .context-row__header {
    gap: 10px;
  }

  .context-flow li,
  .context-flow li:nth-child(even) {
    padding-inline: 0;
    border-left: 0;
  }
}