/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 900px) {
  .hero { min-height: auto; }
  .hero__grid { grid-template-columns: 1fr; gap: 48px; }
  .hero__copy {
    text-align: center;
    max-width: 720px;
    margin-inline: auto;
    min-width: 0;
  }
  .hero__sub { margin-inline: auto; }
  .hero__cta { justify-content: center; }
  .refgate { margin-inline: auto; max-width: 460px; }
  .hero__trust-pills { justify-content: center; }
  .hero__why { display: inline-flex; justify-content: center; width: 100%; }
  .grid--3 {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
  }
  .grid--3 > :nth-child(1) { grid-column: span 2; grid-row: span 1; }
  .grid--3 > :nth-child(2) { grid-column: span 1; }
  .grid--3 > :nth-child(3) { grid-column: span 1; }
  .grid--3 > :nth-child(4) { grid-column: span 1; }
  .grid--3 > :nth-child(5) { grid-column: span 1; }
  .grid--3 > :nth-child(6) { grid-column: span 2; }
  .steps { grid-template-columns: 1fr; }
  .icp__grid { grid-template-columns: 1fr; gap: 16px; }
  .referral__grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; gap: 16px; }
  .privacy__inner { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 760px) {
  /* Mobile nav */
  .nav {
    position: fixed;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: min(94%, 1100px);
    margin: 0;
    border-radius: 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    z-index: 1000;
  }
  [data-theme="dark"] .nav {
    background: var(--bg);
    border-color: rgba(255, 255, 255, .08);
  }
  [data-theme="dark"] .nav__links { background: var(--bg); }
  main {
    padding-top: 78px;
  }
  .nav__inner { min-height: 54px; padding: 0 6px; }
  .brand__word { font-size: 1.08rem; }
  .hero { padding-top: 18px; padding-bottom: 28px; }
  .hero__grid { gap: 26px; }
  .hero__title { font-size: clamp(1.85rem, 7.2vw, 2.6rem); margin-bottom: 14px; }
  .hero__sub { font-size: 1rem; line-height: 1.6; margin-bottom: 22px; }
  .hero__copy { max-width: 100%; }
  .hero__cta {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .hero__cta .btn { width: 100%; justify-content: center; }
  .hero__note { font-size: .85rem; }
  .hero__trust-pills { gap: 8px 10px; margin-top: 18px; }
  .hero__why { margin-top: 16px; }
  /* Adjust spacing for #heroOfferSlide on mobile to equalize height with Slide 1 */
  #heroOfferSlide .hero__copy .hero__sub {
    margin-bottom: 62px; /* Increased from 22px */
  }
  #heroOfferSlide .hero__copy .hero__cta {
    margin-bottom: 56px; /* Increased from 16px */
  }
  #heroOfferSlide .hero__copy .hero__trust-pills {
    margin-top: 29px; /* Added new rule */
  }
  /* Mobile hero banner: hide the phone mockup */
  .hero__art { display: none; }
  .section { padding: 44px 0; }
  .section__head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .section__lead { max-width: none; }
  .cta-card { padding: 32px 24px; }
  .cta-card__actions { width: 100%; }
  .cta-card__actions .btn { width: 100%; justify-content: center; }
  .footer__inner { flex-direction: column; align-items: flex-start; }
  .nav__actions {
    gap: 6px;
    margin-left: auto;
    padding: 2px 0;
  }
  .theme-toggle {
    width: 38px;
    height: 38px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.04);
  }
  .nav__toggle { display: flex; }
  .nav__links {
    position: fixed;
    top: 62px;
    left: 3%;
    right: 3%;
    z-index: 9999;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
    padding: 14px 16px 18px;
    display: none;
  }
  .nav__links.is-open { display: flex; }
  .nav__links a { padding: 12px 4px; font-size: 1rem; border-bottom: 1px solid var(--border); }
  .nav__links a:last-child { border-bottom: none; }
  .nav__links .nav__cta { text-align: center; margin-top: 8px; }

  /* Pricing: stack the plans and the enterprise band */
  .pricing__grid { grid-template-columns: 1fr; max-width: 440px; gap: 22px; }
  .pricing__ent { flex-direction: column; align-items: flex-start; text-align: left; max-width: 440px; }
  .pricing__ent-btn { width: 100%; }
}

@media (max-width: 560px) {
  .grid--3 {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
  .grid--3 > :nth-child(1) { grid-column: span 1; }
  .grid--3 > :nth-child(6) { grid-column: span 1; }
  .container { padding-inline: 16px; }
  .hero__title { font-size: clamp(1.9rem, 8vw, 2.45rem); }
  .hero__sub { font-size: 1rem; }
  .hero__note, .hero__why { font-size: .88rem; }
  .hero__trust-pills {
    justify-content: center;
    align-items: center;
  }
  .trust-pill { width: auto; padding: 4px 10px; font-size: .74rem; }
  .phone { width: min(270px, 82vw); }
  .icp__grid { grid-template-columns: 1fr; }
  .privacy__points li { padding: 15px 16px; }
  .card, .pricing__card, .referral__card, .faq__item, .cta-card { border-radius: 18px; }
}

/* Small phones (≈375px): tighten type, keep the phone in frame */
@media (max-width: 400px) {
  .container { padding-inline: 15px; }
  .hero__title { font-size: clamp(1.85rem, 8.5vw, 2.3rem); }
  .hero__sub { font-size: 1.02rem; }
  .phone { width: 100%; max-width: 300px; }
  .ptoggle { width: 100%; }
  .ptoggle__btn { flex: 1; justify-content: center; padding: 9px 12px; }
  .ptoggle__hint { display: none; }
  .cta-card p, .section__lead { font-size: 1rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .card { transition: none; }
}
/* Hero carousel: hide the round arrows on small screens (dots remain) */
@media (max-width: 760px) {
  .hero-carousel__arrow { display: none; }
  .hero-carousel__nav { margin-top: 20px; }
}

@media (max-width: 560px) {
  .hero-carousel__dot { width: 7px; height: 7px; }
  .hero-carousel__dot.is-active { width: 22px; }
  .pricing__card-inner { padding: 30px 20px 26px; }
  .pricing__amount { font-size: 2.5rem; }
}

@media (max-width: 400px) {
  .pricing__card-inner { padding: 28px 18px 26px; }
  .pricing__amount { font-size: 2.3rem; }
}