.mechanika-page {
  background: var(--color-page);
  color: var(--color-text-muted);
}

.mechanika-page .panel {
  border-radius: 0.75rem;
}

.mechanika-page .technical-label {
  display: inline-flex;
}

.mechanika-hero {
  padding: 3.5rem 0 2.5rem;
}

.mechanika-hero__grid,
.mechanika-driving__grid,
.mechanika-traffic__grid,
.mechanika-finish__top,
.mechanika-verdict__top {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: start;
}

.mechanika-briefing {
  grid-column: span 7;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}

.mechanika-briefing__intro,
.mechanika-score,
.mechanika-briefing__action,
.mechanika-vehicle,
.mechanika-driving__panel,
.mechanika-driving__evidence,
.mechanika-finish__copy,
.mechanika-finish__evidence,
.mechanika-cta__copy,
.mechanika-cta__action {
  min-width: 0;
}

.mechanika-briefing__intro h1 {
  max-width: 23ch;
  margin-top: var(--space-2);
  font-size: var(--text-display);
}

.mechanika-briefing__lead {
  max-width: 60ch;
  margin-bottom: 0;
  font-size: 1.125rem;
  line-height: 1.6;
}

.mechanika-score {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: var(--space-3);
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-rescue-red);
}

.mechanika-score p {
  max-width: 65ch;
  margin: 0;
}

.mechanika-score__metrics,
.mechanika-vehicle__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  width: 100%;
}

.mechanika-score__metrics span,
.mechanika-vehicle__facts span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-1);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

.mechanika-score__metrics b,
.mechanika-vehicle__facts b {
  font-size: var(--text-small);
}

.mechanika-score__metrics small,
.mechanika-vehicle__facts small {
  color: var(--color-meta);
  font-size: var(--text-label);
  line-height: 1.35;
}

.mechanika-briefing__action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.mechanika-briefing__action small,
.mechanika-cta__action small {
  color: var(--color-meta);
}

.mechanika-vehicle {
  grid-column: span 5;
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-3);
}

.mechanika-vehicle__header {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}

.mechanika-vehicle figure,
.mechanika-driving__evidence,
.mechanika-finish__evidence {
  margin: 0;
}

.mechanika-vehicle__media {
  aspect-ratio: 16 / 9;
}

.mechanika-vehicle__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.mechanika-section-heading {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: start;
  margin-bottom: 1.5rem;
}

.mechanika-loop__heading > div {
  grid-column: span 4;
  min-width: 0;
}

.mechanika-loop__heading > p {
  grid-column: 5 / span 6;
  max-width: 66ch;
  margin: 0;
  min-width: 0;
}

.mechanika-loop__stages {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  position: relative;
}

.mechanika-stage {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
}

.mechanika-stage > * {
  margin: 0;
}

.mechanika-stage__number,
.mechanika-step__number {
  color: var(--color-signal-blue-hover);
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
}

.mechanika-stage ul,
.mechanika-route-card ul {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding-left: 1rem;
}

.mechanika-stage small {
  color: var(--color-meta);
}

.mechanika-route-diagram,
.mechanika-mini-route,
.mechanika-turn-route {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 1.5rem;
}

.mechanika-route-diagram i,
.mechanika-mini-route i,
.mechanika-turn-route i {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
  border: 1px solid var(--color-signal-blue);
  border-radius: var(--radius-small);
}

.mechanika-route-diagram::before,
.mechanika-route-diagram::after,
.mechanika-mini-route::after {
  width: 1.5rem;
  height: 1px;
  background: var(--color-slate-600);
  content: "";
}

.mechanika-turn-route i:first-child {
  border-color: var(--color-slate-600);
}

.mechanika-turn-route i:nth-child(2) {
  border-color: var(--color-signal-blue);
  transform: translateY(-0.35rem);
}

.mechanika-driving__panel {
  grid-column: span 7;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.mechanika-driving__panel > * {
  margin: 0;
}

.mechanika-driving__panel h2 {
  max-width: 22ch;
}

.mechanika-driving__lead {
  max-width: 60ch;
  font-size: 1.0625rem;
}

.mechanika-driving__blocks {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.mechanika-tip {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
}

.mechanika-tip > * {
  margin: 0;
}

.mechanika-tip p {
  max-width: 60ch;
}

.mechanika-driving__evidence {
  grid-column: span 5;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.mechanika-driving__evidence .media-frame {
  aspect-ratio: 4 / 3;
}

.mechanika-driving__evidence img,
.mechanika-finish__evidence img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mechanika-driving__evidence figcaption {
  max-width: 45ch;
  margin: 0;
}

.mechanika-traffic__intro {
  grid-column: span 5;
  min-width: 0;
}

.mechanika-traffic__intro h2 {
  max-width: 16ch;
  margin-top: var(--space-2);
}

.mechanika-traffic__intro p {
  max-width: 52ch;
  margin-bottom: 0;
}

.mechanika-traffic__panel {
  grid-column: span 7;
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1.25rem;
}

.mechanika-traffic__panel > * {
  margin: 0;
}

.mechanika-zones {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.mechanika-zones > div {
  min-width: 0;
  padding-right: var(--space-3);
  border-right: 1px solid var(--color-border);
}

.mechanika-zones > div:last-child {
  padding-right: 0;
  border-right: 0;
}

.mechanika-zones p {
  max-width: 56ch;
  margin: var(--space-2) 0 0;
  font-size: var(--text-small);
}

.mechanika-corrections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.mechanika-warning,
.mechanika-recommendation {
  min-width: 0;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
}

.mechanika-warning {
  border-left: 2px solid var(--color-rescue-red);
}

.mechanika-recommendation {
  border-left: 2px solid var(--color-signal-blue);
}

.mechanika-warning p,
.mechanika-recommendation p {
  margin: var(--space-2) 0 0;
}

.mechanika-routes__heading {
  max-width: 70ch;
  margin-bottom: 1.5rem;
}

.mechanika-routes__heading h2 {
  margin-top: var(--space-2);
}

.mechanika-routes__heading p {
  max-width: 66ch;
  margin-bottom: 0;
}

.mechanika-route-cards,
.mechanika-error-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.mechanika-route-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.mechanika-route-card > * {
  margin: 0;
}

.mechanika-route-card p {
  max-width: 52ch;
}

.mechanika-route-card .mechanika-mini-route,
.mechanika-route-card .mechanika-turn-route {
  margin-top: auto;
}

.mechanika-finish__evidence {
  grid-column: span 6;
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-3);
}

.mechanika-finish__evidence .media-frame {
  aspect-ratio: 4 / 3;
}

.mechanika-finish__evidence figcaption {
  margin: 0;
}

.mechanika-finish__copy {
  grid-column: span 6;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.mechanika-finish__copy > * {
  margin: 0;
}

.mechanika-finish__copy h2 {
  max-width: 19ch;
}

.mechanika-finish__copy p {
  max-width: 52ch;
}

.mechanika-finish__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 1.25rem;
}

.mechanika-finish__steps article {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-2);
}

.mechanika-finish__steps article > * {
  margin: 0;
}

.mechanika-errors__heading {
  max-width: 70ch;
  margin-bottom: 1.5rem;
}

.mechanika-errors__heading h2 {
  margin-top: var(--space-2);
}

.mechanika-errors__heading p {
  max-width: 66ch;
  margin-bottom: 0;
}

.mechanika-error {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-3);
}

.mechanika-error > * {
  margin: 0;
}

.mechanika-error > div {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: var(--space-2);
}

.mechanika-error > div p {
  margin: 0;
}

.mechanika-error__fix {
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-signal-blue);
}

.mechanika-verdict__copy {
  grid-column: span 7;
  min-width: 0;
}

.mechanika-verdict__copy h2 {
  max-width: 22ch;
  margin-top: var(--space-2);
}

.mechanika-verdict__copy p {
  max-width: 60ch;
  margin-bottom: 0;
}

.mechanika-rating-board {
  grid-column: 10 / span 3;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
}

.mechanika-rating-board strong {
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 4rem;
  line-height: 0.9;
}

.mechanika-rating-board > span {
  color: var(--color-meta);
  font-family: var(--font-heading);
  font-size: 1.25rem;
}

.mechanika-rating-board small {
  color: var(--color-meta);
}

.mechanika-perspectives {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.mechanika-perspectives article {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-2);
}

.mechanika-perspectives article > * {
  margin: 0;
}

.mechanika-verdict__link {
  display: grid;
  grid-template-columns: auto minmax(0, auto) minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  margin-top: 1.5rem;
  padding: var(--space-4);
  border: var(--border);
  background: rgba(30, 41, 59, 0.5);
}

.mechanika-verdict__link a {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-white);
  font-weight: 600;
}

.mechanika-verdict__link svg {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
}

.mechanika-verdict__link p {
  margin: 0;
  color: var(--color-meta);
  font-size: var(--text-small);
}

.mechanika-cta-section {
  padding-bottom: 3.5rem;
}

.mechanika-cta {
  display: flex;
  width: min(100%, 51.25rem);
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  margin-inline: auto;
}

.mechanika-cta__copy {
  max-width: 35rem;
}

.mechanika-cta__copy h2 {
  margin-top: var(--space-2);
}

.mechanika-cta__copy p {
  max-width: 56ch;
  margin-bottom: 0;
}

.mechanika-cta__action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

@media (max-width: 1199px) {
  .mechanika-hero__grid,
  .mechanika-driving__grid,
  .mechanika-traffic__grid,
  .mechanika-finish__top,
  .mechanika-verdict__top,
  .mechanika-section-heading {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 1rem;
  }

  .mechanika-briefing,
  .mechanika-driving__panel {
    grid-column: span 5;
  }

  .mechanika-vehicle,
  .mechanika-driving__evidence {
    grid-column: span 3;
  }

  .mechanika-loop__heading > div {
    grid-column: span 4;
  }

  .mechanika-loop__heading > p {
    grid-column: 5 / span 4;
  }

  .mechanika-loop__stages {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }

  .mechanika-traffic__intro {
    grid-column: span 3;
  }

  .mechanika-traffic__panel {
    grid-column: span 5;
  }

  .mechanika-finish__evidence,
  .mechanika-finish__copy {
    grid-column: span 4;
  }

  .mechanika-verdict__copy {
    grid-column: span 5;
  }

  .mechanika-rating-board {
    grid-column: 6 / span 3;
  }
}

@media (max-width: 959px) {
  .mechanika-hero__grid,
  .mechanika-driving__grid,
  .mechanika-finish__top,
  .mechanika-verdict__top {
    grid-template-columns: 1fr;
  }

  .mechanika-briefing,
  .mechanika-vehicle,
  .mechanika-driving__panel,
  .mechanika-driving__evidence,
  .mechanika-finish__evidence,
  .mechanika-finish__copy,
  .mechanika-verdict__copy,
  .mechanika-rating-board {
    grid-column: 1;
    width: 100%;
  }

  .mechanika-driving__evidence figcaption {
    max-width: 55ch;
  }

  .mechanika-finish__top {
    gap: 1rem;
  }

  .mechanika-rating-board {
    max-width: 18rem;
  }
}

@media (max-width: 899px) {
  .mechanika-section-heading,
  .mechanika-traffic__grid {
    grid-template-columns: 1fr;
  }

  .mechanika-loop__heading > div,
  .mechanika-loop__heading > p,
  .mechanika-traffic__intro,
  .mechanika-traffic__panel {
    grid-column: 1;
    width: 100%;
  }

  .mechanika-loop__heading > p {
    max-width: 66ch;
  }

  .mechanika-traffic__intro h2 {
    max-width: 22ch;
  }

  .mechanika-route-cards,
  .mechanika-error-grid {
    gap: 1rem;
  }
}

@media (max-width: 767px) {
  .mechanika-hero {
    padding: 2rem 0 1.75rem;
  }

  .mechanika-briefing,
  .mechanika-vehicle,
  .mechanika-driving__panel,
  .mechanika-driving__evidence,
  .mechanika-traffic__panel,
  .mechanika-finish__evidence,
  .mechanika-finish__copy,
  .mechanika-rating-board,
  .mechanika-cta {
    padding: 1rem;
  }

  .mechanika-briefing {
    gap: 1.25rem;
  }

  .mechanika-briefing__intro h1 {
    max-width: 19ch;
    font-size: clamp(2.25rem, 10vw, 2.75rem);
  }

  .mechanika-briefing__lead {
    font-size: 1.125rem;
  }

  .mechanika-score__metrics,
  .mechanika-vehicle__facts,
  .mechanika-zones,
  .mechanika-corrections,
  .mechanika-route-cards,
  .mechanika-error-grid,
  .mechanika-finish__steps,
  .mechanika-perspectives {
    grid-template-columns: 1fr;
  }

  .mechanika-score__metrics,
  .mechanika-vehicle__facts {
    gap: var(--space-2);
  }

  .mechanika-briefing__action .button,
  .mechanika-cta__action .button {
    width: min(100%, 22.5rem);
  }

  .mechanika-vehicle__header {
    flex-direction: column;
  }

  .mechanika-section-heading,
  .mechanika-loop__stages,
  .mechanika-driving__grid,
  .mechanika-traffic__grid,
  .mechanika-finish__top,
  .mechanika-verdict__top {
    gap: 0.75rem;
  }

  .mechanika-loop__stages {
    position: relative;
  }

  .mechanika-stage {
    position: relative;
  }

  .mechanika-stage:not(:last-child)::after {
    position: absolute;
    bottom: -0.75rem;
    left: 1.45rem;
    width: 1px;
    height: 0.75rem;
    background: var(--color-slate-600);
    content: "";
  }

  .mechanika-zones > div {
    padding: 0 0 var(--space-3);
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
  }

  .mechanika-zones > div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .mechanika-routes__heading,
  .mechanika-errors__heading {
    margin-bottom: 1rem;
  }

  .mechanika-route-card,
  .mechanika-error {
    gap: var(--space-3);
  }

  .mechanika-finish__steps {
    margin-top: 0.75rem;
  }

  .mechanika-verdict__link {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .mechanika-rating-board strong {
    font-size: 2.5rem;
  }

  .mechanika-cta-section {
    padding-bottom: 2.5rem;
  }

  .mechanika-cta {
    gap: 1.25rem;
  }
}

@media (max-width: 419px) {
  .mechanika-score {
    padding-left: var(--space-3);
  }

  .mechanika-error > div {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }

  .mechanika-briefing__action .button,
  .mechanika-cta__action .button {
    width: 100%;
  }
}

.mechanika-page ul {
  list-style: none !important;
}

.nav-toggle {
  flex-direction: column;
}