.about-main {
  padding-top: 1.85rem;
}

.about-head {
  margin-bottom: 1rem;
}

.about-head .section-lead {
  max-width: 70ch;
}

.about-route {
  --about-route-gap: clamp(1.45rem, 3vw, 2.6rem);
  --about-route-shoulder: rgb(229 233 226 / 98%);
  --about-route-surface: rgb(76 85 93 / 98%);
  --about-route-lane: rgb(246 244 232 / 96%);
  display: grid;
  gap: clamp(2.4rem, 6vw, 5rem);
  position: relative;
  margin-bottom: 2rem;
  padding: 0.45rem 0 2rem;
  isolation: isolate;
}

.about-road-shell {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}

.about-road {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
  opacity: 1;
  filter: none;
}

.about-road-shoulder,
.about-road-surface,
.about-road-lane {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.about-road-shoulder {
  stroke: var(--about-route-shoulder);
  stroke-width: var(--about-road-shoulder-width, 34px);
}

.about-road-surface {
  stroke: var(--about-route-surface);
  stroke-width: var(--about-road-width, 24px);
}

.about-road-lane {
  stroke: var(--about-route-lane);
  stroke-width: var(--about-road-lane-width, 4px);
  stroke-dasharray: var(--about-road-dash, 14 12);
  opacity: 1;
}

.about-stop {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--about-route-gap);
}

.about-stop-cluster {
  display: grid;
  gap: clamp(1.2rem, 2.8vw, 1.9rem);
  position: relative;
  z-index: 1;
  isolation: isolate;
}

.about-stop-left .about-stop-cluster {
  grid-column: 1;
  justify-items: start;
}

.about-stop-right .about-stop-cluster {
  grid-column: 2;
  justify-items: end;
}

.about-card {
  --panel-surface: var(--gradient-ui-panel);
  width: min(100%, 54rem);
  padding: clamp(1rem, 2.2vw, 1.35rem);
  background: transparent;
  overflow: visible;
  z-index: 1;
}

.about-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgb(67 84 149 / 96%) 0%, rgb(42 61 114 / 98%) 100%);
  z-index: -2;
  pointer-events: none;
}

.about-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--panel-surface);
  z-index: -1;
  pointer-events: none;
}

.about-stop-left .about-card::before {
  transform: translate(0.92rem, 1rem) rotate(-2.8deg);
}

.about-stop-right .about-card::before {
  transform: translate(0.92rem, 1rem) rotate(2.8deg);
}

.about-card-main {
  width: min(100%, 52rem);
}

.about-card-side {
  width: min(100%, 36rem);
}

.about-stop-left .about-card-main {
  transform: rotate(-0.3deg);
}

.about-stop-right .about-card-main {
  transform: rotate(0.3deg);
}

.about-stop-left .about-card-side {
  margin-left: auto;
  transform: translateX(clamp(0.75rem, 2.1vw, 1.75rem)) rotate(-1deg);
}

.about-stop-right .about-card-side {
  margin-right: auto;
  transform: translateX(calc(-1 * clamp(0.75rem, 2.1vw, 1.75rem))) rotate(1deg);
}

.about-intro-card,
.about-powerups-card,
.about-technology-card {
  --panel-surface: var(--gradient-ui-panel);
}

.about-card > :first-child {
  margin-top: 0;
}

.about-card > :last-child {
  margin-bottom: 0;
}

.about-card h3 {
  margin-bottom: 0;
}

.about-card > p {
  margin-bottom: 0;
}

.about-card > h3 + p,
.about-card > h3 + .roles,
.about-card > h3 + .powerup-gallery,
.about-card > h3 + .score-roles,
.about-card > h3 + .growth-figure,
.about-card > h3 + .smart-feedback-gallery,
.about-card > h3 + .technology-layout {
  margin-top: 1rem;
}

.about-card > p + .score-roles,
.about-card > p + .growth-figure,
.about-card > p + .smart-feedback-gallery {
  margin-top: 1rem;
}

.about-feature-copy {
  display: grid;
  gap: 0.75rem;
}

.about-feature-copy > * {
  margin: 0;
}

.core-loop-copy {
  font-weight: 700;
  max-width: 46ch;
}

.about-media-card {
  padding: clamp(0.7rem, 1.5vw, 0.85rem);
}

.about-media-card .media-frame {
  padding: 0;
  background: transparent;
}

.core-loop-figure {
  margin: 0;
}

.core-loop-figure img,
.growth-figure img,
.growth-figure video {
  background: var(--panel-bg-strong);
}

.roles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: start;
  margin-top: 1rem;
}

.about .panel-subpanel {
  min-height: 100%;
  background: var(--panel-face-fill-strong);
}

.role-card {
  display: grid;
  gap: 0.8rem;
  align-content: start;
}

.about .panel-subpanel p {
  margin: 0;
  font-weight: 700;
}

.role-card h4 {
  margin: 0;
}

.role-figure {
  margin: 0;
}

.role-figure.media-frame {
  padding: 0;
  background: transparent;
}

.role-figure img,
.role-figure picture > img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  background: transparent;
}

.chapter-sketch {
  margin: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chapter-sketch img,
.chapter-sketch video {
  height: 100%;
  object-fit: contain;
}

.powerup-gallery {
  --powerup-media-size: clamp(10.75rem, 18vw, 13rem);
  position: relative;
  margin-top: 1rem;
  padding: 0 clamp(2.8rem, 5.6vw, 4rem) 2.45rem;
}

.powerup-gallery-viewport {
  overflow: hidden;
  min-height: var(--powerup-media-size);
}

.powerup-gallery-slide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--powerup-media-size);
  align-items: center;
  gap: clamp(0.9rem, 2.4vw, 1.35rem);
  min-height: var(--powerup-media-size);
}

.powerup-gallery-slide[hidden] {
  display: none !important;
}

.powerup-gallery-copy {
  display: grid;
  gap: 0.45rem;
  align-content: center;
  justify-self: center;
  min-height: var(--powerup-media-size);
  padding-block: 0.2rem;
  width: min(100%, 14rem);
}

.powerup-gallery-copy h4,
.powerup-gallery-copy p {
  margin: 0;
}

.powerup-gallery-copy p {
  max-width: 40ch;
}

.powerup-gallery-media {
  margin: 0;
  justify-self: end;
  width: var(--powerup-media-size);
  aspect-ratio: 1;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}

.powerup-gallery-media.media-frame {
  padding: 0;
  overflow: hidden;
  background: transparent;
}

.powerup-gallery-media img,
.powerup-gallery-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  background: transparent;
}

.powerup-gallery-slide:nth-child(odd) .powerup-gallery-media {
  transform: rotate(-1.25deg);
}

.powerup-gallery-slide:nth-child(even) .powerup-gallery-media {
  transform: rotate(1.25deg);
}

.powerup-gallery-arrow {
  position: absolute;
  top: 44%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  border: 0;
  border-radius: 18px;
  background: var(--gradient-elit-button-primary);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 800;
  box-shadow: none;
  transition: transform 180ms ease, background 180ms ease, color 180ms ease;
}

.powerup-gallery-arrow.is-prev {
  left: 0.1rem;
}

.powerup-gallery-arrow.is-next {
  right: 0.1rem;
}

.powerup-gallery-arrow:hover,
.powerup-gallery-arrow:focus-visible {
  background: rgb(236 240 255 / 98%);
  color: var(--ink);
  transform: translateY(-50%) scale(1.05);
}

.powerup-gallery-dots {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  display: inline-flex;
  gap: 0.52rem;
}

.powerup-gallery-dot {
  width: 3.1rem;
  height: 0.7rem;
  border-radius: var(--radius-chip);
  border: 0;
  background: rgb(127 145 214 / 72%);
  transition: transform 180ms ease, background 180ms ease;
}

.powerup-gallery-dot:hover,
.powerup-gallery-dot:focus-visible {
  transform: scale(1.04);
}

.powerup-gallery-dot.is-active {
  background: var(--gradient-elit-button-primary);
}

.score-roles {
  display: grid;
  gap: 0.85rem;
}

.point-system-block .score-roles {
  grid-template-columns: 1fr;
}

.point-system-block .panel-subpanel h4 {
  font-size: 1.05rem;
  margin-bottom: 0.25rem;
}

.point-system-block .panel-subpanel p {
  margin: 0;
}

.growth-figure {
  margin: 0 auto;
  max-width: 460px;
}

.tamed-growth-block {
  display: grid;
  gap: 1rem;
  align-content: start;
}

.tamed-growth-block .growth-figure {
  margin-top: auto;
}

.smart-feedback-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.smart-feedback-shot {
  margin: 0;
}

.smart-feedback-shot img {
  border: 0;
}

.technology-layout {
  display: grid;
  gap: 1rem;
  align-items: start;
}

.about-technology-card .technology-sketch {
  width: min(100%, 360px);
  justify-self: center;
}

.technology-copy {
  display: grid;
  gap: 0.75rem;
}

.technology-copy > * {
  margin: 0;
}

@media (min-width: 700px) {
  .roles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (min-width: 861px) {
  .about-route {
    gap: clamp(2rem, 4vw, 3.6rem);
  }

  .about-stop {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .about-stop-intro .about-stop-cluster {
    grid-column: 1 / 6;
  }

  .about-stop-roles {
    margin-top: clamp(2rem, 3.6vw, 3rem);
  }

  .about-stop-roles .about-stop-cluster {
    grid-column: 5 / -1;
  }

  .about-stop-scoring {
    margin-top: clamp(2.2rem, 3.8vw, 3.2rem);
  }

  .about-stop-scoring .about-stop-cluster {
    grid-column: 1 / 8;
  }

  .about-stop-feedback {
    margin-top: clamp(2.2rem, 3.8vw, 3.2rem);
  }

  .about-stop-feedback .about-stop-cluster {
    grid-column: 6 / -1;
  }

  .about-stop-roles .about-stop-cluster,
  .about-stop-scoring .about-stop-cluster,
  .about-stop-feedback .about-stop-cluster {
    gap: clamp(1.5rem, 2.8vw, 2.1rem);
  }

  .about-stop-roles .about-card-side,
  .about-stop-scoring .about-card-side,
  .about-stop-feedback .about-card-side {
    margin-top: clamp(0.9rem, 1.7vw, 1.5rem);
  }

  .about-stop-left .about-card-main {
    transform: rotate(-0.3deg);
  }

  .about-stop-right .about-card-main {
    transform: rotate(0.3deg);
  }

  .about-stop-intro .about-card-side {
    width: min(100%, 31rem);
    transform: translateX(clamp(0.25rem, 0.9vw, 0.7rem)) rotate(-0.8deg);
  }

  .about-stop-roles .about-card-side,
  .about-stop-feedback .about-card-side {
    transform: translateX(calc(-1 * clamp(0.18rem, 0.55vw, 0.4rem))) rotate(0.8deg);
  }

  .about-stop-feedback .about-technology-card {
    transform: translateX(calc(-1 * clamp(1.4rem, 3.4vw, 3rem))) rotate(0.8deg);
  }

  .about-stop-roles .about-card-main {
    width: min(100%, 58rem);
  }

  .about-stop-scoring .about-card-side {
    transform: translateX(clamp(0.18rem, 0.55vw, 0.4rem)) rotate(-0.8deg);
  }
}

@media (min-width: 1400px) {
  .score-roles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .about-route {
    --about-route-gap: clamp(1.2rem, 3vw, 1.9rem);
  }

  .about-card-main {
    width: min(100%, 46rem);
  }

  .about-card-side {
    width: min(100%, 31rem);
  }
}

@media (max-width: 860px) {
  .about-main {
    padding-top: 1.45rem;
  }

  .about-route {
    gap: clamp(1.2rem, 4vw, 1.6rem);
    margin-bottom: 1.6rem;
    padding: 0.45rem 0 1.4rem;
  }

  .about-stop {
    display: block;
    min-height: 0;
    padding-left: 0;
  }

  .about-stop-cluster,
  .about-stop-left .about-stop-cluster,
  .about-stop-right .about-stop-cluster {
    gap: clamp(1.05rem, 3.8vw, 1.45rem);
    justify-items: stretch;
  }

  .about-card,
  .about-card-main,
  .about-card-side {
    width: 100%;
    max-width: none;
    margin: 0;
    transform: none;
    background: var(--panel-surface);
    overflow: hidden;
  }

  .about-stop-cluster > .about-card,
  .about-stop-cluster > .about-card-main,
  .about-stop-cluster > .about-card-side {
    margin-left: 0;
    margin-right: 0;
    transform: none;
  }

  .about-card::before,
  .about-card::after {
    content: none;
  }

  .about-road {
    filter: drop-shadow(0 16px 20px rgb(3 10 18 / 16%));
  }

  .about-route .paint-highlight {
    --paint-highlight-rotate: 0deg;
    --paint-highlight-under-rotate: 0deg;
  }

  .roles,
  .smart-feedback-gallery,
  .technology-layout,
  .powerup-gallery-slide {
    grid-template-columns: 1fr;
  }

  .chapter-sketch,
  .about-technology-card .technology-sketch {
    width: min(100%, 540px);
    justify-self: center;
  }

  .powerup-gallery {
    --powerup-media-size: min(100%, 15.5rem);
    padding: 0 0.9rem 3rem;
  }

  .powerup-gallery-viewport {
    min-height: calc(var(--powerup-media-size) + 8.75rem);
  }

  .powerup-gallery-slide {
    min-height: calc(var(--powerup-media-size) + 8.75rem);
    align-content: start;
  }

  .powerup-gallery-copy {
    justify-self: center;
    min-height: 7.75rem;
    width: min(100%, 18rem);
  }

  .powerup-gallery-copy p {
    max-width: none;
  }

  .powerup-gallery-media {
    justify-self: center;
    width: min(100%, var(--powerup-media-size));
  }

  .powerup-gallery-slide:nth-child(odd) .powerup-gallery-media,
  .powerup-gallery-slide:nth-child(even) .powerup-gallery-media {
    transform: none;
  }

  .powerup-gallery-arrow {
    top: 50%;
    bottom: auto;
    z-index: 2;
    transform: translateY(-50%);
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
  }

  .powerup-gallery-arrow.is-prev {
    left: 0.1rem;
  }

  .powerup-gallery-arrow.is-next {
    right: 0.1rem;
  }

  .powerup-gallery-arrow:hover,
  .powerup-gallery-arrow:focus-visible {
    transform: translateY(-50%) scale(1.05);
  }

  .powerup-gallery-dots {
    bottom: 0.55rem;
  }
}

@media (max-width: 540px) {
  .about-card {
    padding: 0.95rem;
  }

  .score-roles {
    grid-template-columns: 1fr;
  }
}