@media (min-width: 521px) {
      .tool-grid .info-card {
        justify-content: flex-start;
        gap: 12px;
      }

      .tool-grid .info-card strong {
        min-height: 2.5em;
      }
    }

    @media (max-width: 840px) {
      .page-shell {
        width: 100%;
        padding: 0;
        display: block;
      }

      .visual {
        position: relative;
        top: auto;
        height: auto;
        min-height: 292px;
        border-radius: 0 0 28px 28px;
        box-shadow: none;
      }

      .hero-image {
        right: auto;
        left: 5%;
        width: 90%;
        object-position: 50% 0;
      }

      .brand-chip {
        top: 16px;
        left: 16px;
        width: 176px;
      }

      .award-badge {
        top: 18px;
        right: 16px;
        font-size: 11px;
      }

      .visual-copy {
        right: 20px;
        bottom: 28px;
        left: 20px;
      }

      .visual-copy h1 {
        max-width: 440px;
        font-size: clamp(34px, 9vw, 50px);
      }

      .visual-copy p:last-child {
        display: none;
      }

      .action-panel {
        position: relative;
        z-index: 2;
        margin: -18px 12px 12px;
        padding: 25px 18px 24px;
        border-radius: 25px;
        box-shadow: 0 18px 46px rgba(45, 33, 25, 0.12);
      }

      .footer {
        margin-top: 28px;
      }
    }

    @media (max-width: 380px) {
      .visual {
        min-height: 286px;
      }

      .award-badge {
        display: none;
      }

      .panel-head h2 {
        font-size: 17px;
      }

      .action-card {
        min-height: 72px;
        padding: 13px;
        grid-template-columns: 40px 1fr 20px;
      }

      .action-icon {
        width: 40px;
        height: 40px;
      }

      .info-grid {
        grid-template-columns: 1fr;
      }

      .route-actions {
        grid-template-columns: 1fr;
      }

      .info-card {
        min-height: 90px;
      }
    }

    @media (max-width: 520px) {
      .survey-grid {
        grid-template-columns: 1fr;
      }

      .info-grid,
      .tool-grid {
        grid-template-columns: 1fr;
      }

      #route-dialog {
        width: calc(100vw - 20px);
        max-height: calc(100dvh - 20px);
      }

      .route-dialog-body video {
        max-height: calc(100dvh - 170px);
      }

      .socials {
        grid-template-columns: repeat(2, 1fr);
      }

      .info-card {
        min-height: 94px;
        padding: 16px 18px;
        display: grid;
        grid-template-columns: 38px 1fr;
        align-items: center;
        justify-content: initial;
        gap: 13px;
      }

      .info-card.course {
        min-height: 106px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }

      *,
      *::before,
      *::after {
        transition-duration: 0.01ms !important;
      }

      .loading-mark {
        animation: none;
        border-top-color: #dfd4c9;
      }
    }