/* ============================================================
   BlinQ leads site · responsive.css
   Breakpoints (1080 / 900 / 720 / 640) and reduced-motion overrides.
   Loaded last so it can override every other stylesheet.
   ============================================================ */

@media (max-width:1080px){
  .onboarding{grid-template-columns:1fr;gap:40px}
}

@media (max-width:900px){
  .booking{grid-template-columns:1fr;gap:40px}
  .mockup{
    inset:0 0 -8% 4%;
    grid-template-columns:1fr;
    transform:rotateY(-7deg) rotateX(3deg);
  }
  .mockup aside{display:none}
  .screen{aspect-ratio:16/11}

  /* How it works: story above the workflow card */
  .stage{grid-template-columns:minmax(0,1fr)}

  /* FAQ: topics become a row of pills above the questions, scrolling sideways */
  .faqx{grid-template-columns:minmax(0,1fr);gap:28px}
  .faqx__nav{position:static;min-width:0}
  .faqx__browse{margin-bottom:10px}
  .faqx__topics{
    display:flex;
    gap:8px;
    overflow-x:auto;
    scrollbar-width:none;
    margin:0 calc(var(--gutter) * -1);
    padding:0 var(--gutter) 4px;
  }
  .faqx__topics::-webkit-scrollbar{display:none}
  .faqx__topics li{flex:none}
  .faqx__topic{align-items:center;gap:8px;padding:9px 14px;border:1px solid var(--line-2);border-radius:999px;white-space:nowrap;font-size:14px}
  .faqx__topic.is-active{border-color:var(--red);background:rgba(240,52,31,.1)}
}

@media (max-width:720px){
  /* Testimonials: tabs on their own row, arrows underneath on the right */
  .testi{padding:28px 20px 0}
  .testi__nav{flex-direction:column;align-items:stretch;gap:0}
  .testi__tabs{gap:20px}
  .testi__arrows{justify-content:flex-end;border-top:1px solid rgba(255,255,255,.08);padding:12px 0 16px}
}

@media (max-width:640px){
  header{padding:14px 20px}
  .logo img{height:34px}
  .navcta{padding:9px 14px;font-size:13px}

  .hero h1{font-size:clamp(32px,9vw,44px)}
  .hero .intro{font-size:15px}
  .previewtop{padding:11px 16px;font-size:11px}
  .previewtop span:last-child{display:none}
  .videofoot{padding:12px 16px;font-size:11.5px;flex-direction:column;align-items:flex-start;gap:4px}
  .play{width:68px;height:68px}
  .play svg{width:22px;height:22px}
  .videoClose{top:52px;right:14px;font-size:11px;padding:7px 12px}
  .screen{aspect-ratio:16/12}
  .mockup{inset:0 0 -6% 2%;transform:rotateY(-5deg) rotateX(2deg)}

  .hero .button{padding:16px 26px;font-size:14.5px}

  .stages__tabs{margin:0 calc(var(--gutter) * -1) 16px;padding:2px var(--gutter)}
  .stages__tab{padding:11px 16px;font-size:13.5px}
  .stage__actions{flex-direction:column;align-items:flex-start}
  .stage__mock{padding:18px}
  .stage__steps li{padding:12px 14px}

  .formcard{padding:22px 20px 22px}
  .formGrid{grid-template-columns:1fr}
  .formTitle{font-size:19px}
  .formTopRow{font-size:11px}

  .integration{padding:22px 16px}
  .integration-logos{gap:8px}
  .integration-logos li{height:42px;padding:0 14px}
  .integration-logos img{height:20px}

  .testi__slide blockquote{font-size:19px}

  .faqx__head{flex-direction:column;align-items:flex-start;gap:12px}
  .faqx__item summary{gap:16px;padding:18px 0;font-size:15px}
  .faqx__icon{width:26px;height:26px}
  .faqx__answer{padding:0 0 20px}
  .faqx__answer p{font-size:14.5px}

  .onboardingIntro h2{font-size:clamp(34px,10vw,48px)}
  .ready{grid-template-columns:1fr;gap:8px}

  .industry div{gap:12px;font-size:17px}

  .footerTop{flex-direction:column;align-items:flex-start;gap:20px}
  .footerRight{gap:20px}

  footer{padding-bottom:110px}

  .mobilecta{
    display:inline-flex;
    position:fixed;
    left:16px;
    right:16px;
    bottom:16px;
    z-index:60;
    justify-content:center;
    background:var(--red);
    opacity:0;
    pointer-events:none;
    transform:translateY(24px);
    transition:opacity .35s ease,transform .35s var(--ease);
    box-shadow:0 18px 40px -14px rgba(240,52,31,.6);
  }
  .mobilecta.show{opacity:1;pointer-events:auto;transform:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{opacity:1;transform:none}
  .stages.is-ready .stage{transition:none}
  .testi__slide{transition:none}
  .testi__tab.is-active .testi__bar{animation:none;transform:scaleX(1)}
}