/* ==========================================================================
   Cloud Locks — responsive rules
   Breakpoints: 1399 · 1199 · 991 · 767 · 575
   ========================================================================== */

/* Desktop nav is always visible (overrides Bootstrap .collapse) */
@media (min-width: 992px) {
  .cl-menu.collapse { display: flex !important; height: auto !important; }
}

/* --------------------------------------------------------------- ≤1399px */
@media (max-width: 1399.98px) {
  .cl-menu { gap: 20px; }
  .cl-menu__link { padding: 9px 12px; font-size: 14.5px; }
}

/* --------------------------------------------------------------- ≤1199px */
@media (max-width: 1199.98px) {
  :root { --cl-section-y: 96px; }

  .cl-hero { padding-top: 152px; }
  .cl-collage__cell--sm { height: 170px; }
  .cl-collage__cell--md { height: 222px; }
  .cl-collage__cell--lg { height: 292px; border-width: 6px; }
  .cl-collage { margin-bottom: -96px; }
  .cl-logos { padding-top: 148px; }

  .cl-fcard { grid-template-columns: .92fr 1fr; }
  .cl-fcard__body { padding: 32px 32px 0; }
  .cl-fcard__action { margin-inline: -32px; padding-inline: 32px; }
  .cl-meta { gap: 36px; }

  .cl-plan--feature { padding: 34px; }
  .cl-price__num { font-size: 54px; }

  .cl-menu__actions { gap: 12px; }
}

/* ---------------------------------------------------------------- ≤991px */
@media (max-width: 991.98px) {
  :root { --cl-section-y: 78px; }

  /* Header → mobile panel */
  .cl-nav { position: relative; }
  .cl-burger { display: block; }
  .cl-menu {
    position: absolute;
    left: 0; right: 0;
    top: calc(100% + 16px);
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 18px;
    border-radius: var(--cl-r-md);
    background: #fff;
    border: 1px solid var(--cl-line);
    box-shadow: var(--cl-shadow-lg);
  }
  .cl-menu__list { flex-direction: column; align-items: stretch; gap: 2px; }
  .cl-menu__link { color: var(--cl-ink); padding: 12px 14px; border-radius: var(--cl-r-sm); }
  .cl-menu__link:hover,
  .cl-menu__link.is-active { color: var(--cl-blue); background: var(--cl-blue-050); }
  .cl-menu__actions {
    justify-content: space-between;
    padding-top: 14px;
    margin-top: 4px;
    border-top: 1px solid var(--cl-line);
  }
  .cl-link-quiet { color: var(--cl-ink); }

  /* Hero */
  .cl-hero { padding-top: 130px; }
  .cl-hero__title { letter-spacing: -.028em; }
  .cl-hero__aside { margin-top: 26px; }
  .cl-hero__aside p { max-width: 560px; }
  .cl-collage { gap: 12px; margin-top: 52px; margin-bottom: -80px; }
  .cl-collage__cell--sm { display: none; }
  .cl-collage__cell--md { height: 180px; }
  .cl-collage__cell--lg { height: 250px; }
  .cl-logos { padding-top: 118px; }
  .cl-logos__row { gap: 14px 38px; }
  .cl-logos__row li { font-size: 17px; }

  /* Features */
  .cl-fcards { margin-top: 44px; gap: 20px; }
  .cl-fcard { grid-template-columns: 1fr; }
  .cl-fcard__media { padding: 18px 18px 0; }
  .cl-mock { min-height: 0; }
  .cl-fcard__body { padding: 28px 26px 0; }
  .cl-fcard__action { margin-inline: -26px; padding: 18px 26px; }
  .cl-meta { margin: 24px 0 28px; padding-top: 22px; }

  /* How it works */
  .cl-steps { margin-top: 30px; }
  .cl-step__btn { padding: 18px 20px; }
  .cl-sky { margin-top: 44px; min-height: 460px; }

  /* Why us */
  .cl-why { padding: 84px 0; }
  .cl-why__cards { margin-top: 40px; }
  .cl-why__foot { margin-top: 38px; }

  /* Pricing */
  .cl-plan-stack { margin-top: 0; }
  .cl-plan--feature .cl-plan__list { margin-top: 28px; }
  .cl-pricing__foot { gap: 12px 28px; margin-top: 36px; }

  /* FAQ */
  .cl-faq__aside { position: static; margin-bottom: 38px; }
  .cl-acc__btn { font-size: 16.5px; padding: 20px 58px 20px 22px; }
  .cl-acc__body { padding: 0 24px 22px 22px; }

  /* Support */
  .cl-support__panel { padding: 56px 26px 52px; }

  /* Footer */
  .cl-footer { padding-top: 64px; }
  .cl-footer__top { padding-bottom: 40px; }
  .cl-footer__blurb { max-width: 48ch; }
}

/* ---------------------------------------------------------------- ≤767px */
@media (max-width: 767.98px) {
  :root { --cl-section-y: 66px; }

  .container { padding-inline: 20px; }

  .cl-hero { padding-top: 118px; }
  .cl-hero__title { font-size: clamp(33px, 9vw, 46px); }
  .cl-trustline { gap: 10px; margin-bottom: 26px; }
  .cl-avatars img { width: 34px; height: 34px; }
  .cl-trustline__text { font-size: 13.5px; }
  .cl-hero__cta { gap: 10px; }
  .cl-hero__cta .cl-btn { flex: 1 1 auto; justify-content: center; }

  .cl-collage { margin-top: 42px; margin-bottom: -56px; }
  .cl-collage__cell--md { display: none; }
  .cl-collage__cell--lg { height: 230px; border-width: 5px; border-radius: var(--cl-r-md); }
  .cl-collage__badge { left: 12px; bottom: 12px; padding: 8px 12px; font-size: 11.5px; }
  .cl-logos { padding-top: 92px; }
  .cl-features {
    padding-top: 130px;
  }

  .cl-h2 { font-size: clamp(27px, 7.4vw, 34px); }
  .cl-sub { font-size: 15.5px; }

  .cl-mock { padding: 15px; gap: 12px; }
  .cl-tile { padding: 11px; }
  .cl-tile b { font-size: 12.5px; }
  .cl-speed { flex-direction: column; align-items: flex-start; gap: 6px; }
  .cl-speed__wave { width: 100%; }
  .cl-prog li { grid-template-columns: 1fr 60px 36px; gap: 10px; font-size: 12px; }
  .cl-results u { display: none; }
  .cl-swap { flex-direction: column; align-items: flex-start; }

  .cl-fcard__body { padding: 24px 22px 0; }
  .cl-fcard__action { margin-inline: -22px; padding: 16px 22px; font-size: 14.4px; }
  .cl-meta { gap: 28px; flex-wrap: wrap; }
  .cl-meta dd { font-size: 16px; }

  .cl-step__btn { padding: 16px 16px; gap: 13px; }
  .cl-step__title { font-size: 17px; }
  .cl-step__desc { font-size: 14px; }
  .cl-sky { min-height: 0; margin-top: 34px; }
  .cl-hstage { padding: 22px 16px; }
  .cl-hcard { max-width: 100%; padding: 16px; gap: 11px; }
  .cl-hcard__title { font-size: 15px; }
  .cl-hstats { grid-template-columns: 1fr; }
  .cl-hbadge { font-size: 8.5px; padding: 8px 12px; }

  .cl-wcard { padding: 26px 24px 28px; }

  .cl-plan--feature { padding: 28px 24px; }
  .cl-plan--quiet { padding: 24px 22px; }
  .cl-price__num { font-size: 48px; }
  .cl-plan__row { flex-direction: column; gap: 12px; }
  .cl-pricing__foot { flex-direction: column; align-items: flex-start; gap: 10px; }

  .cl-support__panel { padding: 46px 20px 44px; border-radius: var(--cl-r-lg); }
  .cl-support__cta { flex-direction: column; align-items: stretch; }
  .cl-support__team { flex-direction: column; gap: 10px; }

  .cl-footer__bar { justify-content: flex-start; }
  .cl-totop { right: 16px; bottom: 16px; }
}

/* ---------------------------------------------------------------- ≤575px */
@media (max-width: 575.98px) {
  .cl-logo__text { font-size: 19px; }
  .cl-logos__row { gap: 12px 26px; }
  .cl-logos__row li { font-size: 15px; }
  .cl-toggle { width: 100%; justify-content: center; }
  .cl-toggle__btn { padding: 11px 16px; font-size: 13.5px; }
  .cl-acc__btn { font-size: 15.6px; padding: 18px 52px 18px 18px; }
  .cl-acc__btn::after { right: 16px; }
  .cl-acc__btn::before { right: 24px; }
  .cl-acc__body { padding: 0 20px 20px 18px; font-size: 14.8px; }
  .cl-speed__num { font-size: 30px; }
  .cl-footer__legal { gap: 18px; }
}