/* Breakpoints: 1180 laptop, 980 tablet, 720 large phone, 400 small phone */

@media (max-width: 1180px) {
  .nav__links { gap: 0; }
  .nav__links a { padding: 8px 9px; font-size: 14.5px; }
  .hero__visual .phone--main { --pw: 270px; }
  .aud, .rev { grid-template-columns: repeat(2, 1fr); }
  .step .phone { --pw: 220px; }
}

@media (max-width: 1080px) {
  .nav__links, .nav__cta { display: none; }
  .burger { display: inline-flex; }
}

@media (max-width: 980px) {
  .section { padding: 84px 0; }
}
@media (max-width: 1080px) {
  .mnav {
    display: block; position: fixed; inset: 72px 0 auto 0; background: #fff; border-bottom: 1px solid var(--line);
    padding: 12px 24px 24px; box-shadow: var(--shadow); transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity .2s, transform .2s, visibility .2s; z-index: 49; max-height: calc(100vh - 72px); overflow-y: auto;
  }
  .mnav.open { opacity: 1; visibility: visible; transform: none; }
  .mnav a:not(.btn) { display: block; padding: 14px 4px; font-weight: 700; font-size: 17px; border-bottom: 1px solid var(--line); }
  .mnav .btn { margin-top: 18px; width: 100%; }
}
@media (max-width: 980px) {

  .hero { padding: 48px 0 72px; }
  .hero__grid { grid-template-columns: 1fr; gap: 24px; }
  .hero__copy { text-align: center; }
  .hero__sub { margin: 0 auto; }
  .ticks { margin-left: auto; margin-right: auto; text-align: left; }
  .hero__ctas { justify-content: center; }
  .hero__note { justify-content: center; }
  .hero__visual { height: 600px; max-width: 560px; width: 100%; margin: 0 auto; }

  .split, .gain { grid-template-columns: 1fr; gap: 40px; }
  .split--rev > :first-child { order: 0; }
  .photo--tall { aspect-ratio: 4 / 3; }
  .gain__photos { height: 440px; }

  .steps { grid-template-columns: 1fr; gap: 56px; max-width: 420px; margin: 0 auto; }
  .steps::before { display: none; }
  .step .phone { --pw: 240px; }

  .ba { grid-template-columns: 1fr; }
  .ba__mid span { transform: rotate(90deg); }

  .feat { grid-template-columns: repeat(2, 1fr); }
  .fcard--hero { grid-column: span 2; }

  .final__box { grid-template-columns: 1fr; padding: 56px 32px 0; text-align: center; }
  .final__copy p { margin-left: auto; margin-right: auto; }
  .final__phones { height: 320px; max-width: 420px; width: 100%; margin: 0 auto; overflow: hidden; }

  .foot__grid { grid-template-columns: 1fr 1fr; }
  .mcta { display: flex; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .wrap { padding: 0 16px; }
  .section { padding: 68px 0; }
  .head { margin-bottom: 40px; }
  .head p { font-size: 17px; }
  .announce { font-size: 13px; }
  .announce .pill { display: none; }
  .nav__in { height: 64px; }
  .mnav { inset: 64px 0 auto 0; max-height: calc(100vh - 64px); }
  .hero__sub { font-size: 17px; }
  .ticks { grid-template-columns: 1fr 1fr; gap: 10px 12px; }
  .ticks li { font-size: 14.5px; }
  .hero__ctas .btn { width: 100%; }

  /* Hero visual: shrink both phones together */
  .hero__visual { height: 500px; }
  .hero__visual .phone--main { --pw: 220px; transform: translateX(-80%) rotate(-3deg); }
  .hero__visual .phone--side { --pw: 220px; top: 110px; right: 2%; transform: rotate(5deg) scale(.82); }
  .float-icon { width: 46px; height: 46px; border-radius: 13px; }
  .float-icon svg { width: 26px; height: 26px; }
  .fi-1 { left: 0; top: 30px; } .fi-2 { left: 0; top: 300px; } .fi-3 { right: 30%; top: -10px; } .fi-4 { right: 0; bottom: 6px; }
  .flow-tag { font-size: 12px; padding: 8px 10px; }
  .flow-tag--1 { left: 0; top: 400px; }
  .flow-tag--2 { right: 0; top: 60px; }
  .flow-arrow { display: none; }

  .aud { grid-template-columns: 1fr; }
  .aud-card h3 { font-size: 17px; }

  .gain__cards { grid-template-columns: 1fr; }
  .gain__photos { height: 340px; }
  .ba__col { padding: 24px; }
  .callout { padding: 22px; }

  .feat { grid-template-columns: 1fr; }
  .fcard--hero { grid-column: auto; grid-template-columns: 1fr; text-align: left; }
  .fcard--hero .phone { --pw: 190px; margin: 8px auto -130px; }

  .car__item .phone { --pw: 236px; }
  .car__track { gap: 20px; padding: 16px 16px 32px; }
  .rev { grid-template-columns: 1fr; }

  .plans { grid-template-columns: 1fr; }
  .plan { padding: 30px 24px; }
  .price b { font-size: 44px; }

  .cmp th, .cmp td { padding: 14px 12px; font-size: 14.5px; }
  .cmp td span { gap: 8px; }

  .qa button { padding: 18px; font-size: 16px; }
  .qa__a p { padding: 0 18px 18px; font-size: 15px; }

  .final { padding-bottom: 72px; }
  .final__box { border-radius: 26px; padding: 44px 20px 0; }
  .final__phones { height: 280px; }
  .final__phones .phone { --pw: 170px; }

  .foot__grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .foot__grid > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 400px) {
  .hero h1 { font-size: 34px; }
  .ticks { grid-template-columns: 1fr; max-width: 260px; }
  .hero__visual { height: 440px; }
  .hero__visual .phone--main { --pw: 196px; }
  .hero__visual .phone--side { --pw: 190px; top: 100px; }
  .flow-tag--1 { top: 360px; }
  .car__item .phone { --pw: 220px; }
  .mcta small { display: none; }
}

@media (min-width: 1600px) {
  :root { --wrap: 1280px; }
  .hero { padding: 96px 0 120px; }
}

/* Keep long CTAs inside narrow containers */
.final__box > *, .split > *, .gain > * { min-width: 0; }
@media (max-width: 720px) {
  .final .btn, .center-cta .btn { white-space: normal; text-align: center; width: 100%; padding: 12px 20px; }
}