/* Below desktop — shared by tablet (768–1199) and mobile (≤767).
   Desktop at 1200px+ is unchanged. */
@media (max-width: 1199px) {
  :root {
    --page-min-width: 0px;
  }

  html,
  body {
    overflow-x: hidden;
  }

  body {
    min-width: 0;
  }

  .container {
    width: 100%;
  }

  .phone-layer {
    display: none;
  }

  .phone-frame--static {
    display: block;
  }

  .phone-frame--hero {
    position: absolute;
    left: 50%;
    z-index: var(--z-phone);
    transform: translateX(-50%);
  }

  .why-ruvio__table-wrapper {
    display: none;
  }
}

/* Mobile layout — Figma "Mobile 360" (393px). */
@media (max-width: 767px) {
  :root {
    --hero-height: 928px;
    --hero-media-top: 500px;
  }

  /* Navigation: pill spans the viewport minus 32px; logo icon only */
  .top-nav {
    top: 16px;
    left: 32px;
    right: 32px;
    width: auto;
    transform: none;
    justify-content: space-between;
    gap: 8px;
  }

  .top-nav .btn--secondary {
    flex-shrink: 0;
  }

  .top-nav__logo {
    width: auto;
  }

  .top-nav__logo-full {
    display: none;
  }

  .top-nav__logo-mark {
    display: block;
  }

  .top-nav__links {
    display: none;
  }

  /* Hero */
  .hero__badge {
    display: none;
  }

  .hero__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    height: auto;
    padding: 124px 32px 0;
  }

  .hero__title-block,
  .hero__text-container {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    width: 100%;
  }

  .hero__title {
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -0.64px;
    text-align: center;
  }

  .hero__title-highlight::before {
    left: 0;
    right: 0;
    height: 40px;
    transform: translateY(-50%);
  }

  .hero__text-container {
    align-items: stretch;
    gap: 32px;
  }

  .hero__description {
    text-align: center;
  }

  .hero__description br {
    display: none;
  }

  .hero__text-container .btn--primary {
    width: 100%;
  }

  .phone-frame--hero {
    top: 390px;
    width: 200px;
    height: calc(200px * var(--phone-height) / var(--phone-width));
    border-radius: 26px;
    box-shadow:
      0 0 0 8.5px rgba(255, 255, 255, 0.48),
      inset 0 0 0 1px #f3f3f3;
  }

  .phone-frame--hero .phone-frame__screen {
    border-radius: 26px;
  }

  .phone-frame--step {
    position: relative;
    z-index: 1;
    width: 200px;
    height: calc(200px * var(--phone-height) / var(--phone-width));
    border-radius: 26px;
    box-shadow:
      0 0 0 8.5px var(--color-phone-ring),
      inset 0 0 0 1px var(--color-alpha-dark-6);
  }

  .phone-frame--step .phone-frame__screen {
    border-radius: 26px;
  }

  /* How it works: copy, then hatching + static phone */
  .how-it-works__band {
    height: auto;
  }

  .how-it-works__band--first {
    margin-top: 0;
    border-top: none;
  }

  .how-it-works__grid {
    display: flex;
    flex-direction: column;
    height: auto;
  }

  .how-it-works__col {
    width: 100%;
    background: var(--color-background);
  }

  .how-it-works__col:first-child,
  .how-it-works__col:last-child {
    border: none;
    text-align: center;
  }

  .how-it-works__col:first-child {
    order: 1;
    padding: 48px 32px 0;
  }

  .how-it-works__col:last-child {
    order: 2;
    padding: 24px 32px 48px;
    border-bottom: 1px solid var(--color-border);
  }

  .how-it-works__col--center {
    order: 3;
    padding: 48px;
    border-inline: none;
  }

  .how-it-works__heading,
  .how-it-works__body {
    width: 100%;
  }

  /* Problem: copy only, no mileage table */
  .why-ruvio {
    padding-bottom: 64px;
  }

  .why-ruvio__content {
    gap: 0;
  }

  .why-ruvio__copy-block {
    gap: 32px;
    padding: 100px 32px;
    border: none;
    border-bottom: 1px solid var(--color-border);
  }

  .why-ruvio__heading,
  .why-ruvio__text-block,
  .why-ruvio__cta-heading,
  .why-ruvio__cta-text {
    width: 100%;
  }

  .why-ruvio__cta-content {
    padding: 64px 32px;
  }

  .why-ruvio__cta-content .btn--primary {
    width: 100%;
  }

  /* Footer: privacy first, then copyright */
  .footer__inner {
    flex-direction: column-reverse;
    justify-content: center;
    gap: 16px;
    padding: 24px 32px;
    text-align: center;
  }

  /* Waitlist modal */
  .waitlist-modal {
    width: calc(100vw - 32px);
    max-width: calc(100vw - 32px);
    padding: 24px;
  }

      .waitlist-modal__form,
      .waitlist-modal__legal {
        width: 100%;
        max-width: 100%;
      }
}