/* ══════════════════════════════════════════════════════════
   HUE-SUITE — RESPONSIVE BREAKPOINTS
   Mobile-first approach
   ══════════════════════════════════════════════════════════ */

/* ── Tablet (max-width: 1024px) ────────────────────────── */
@media (max-width: 1024px) {
  .hs-container {
    padding: 0 24px;
  }

  .hs-nav {
    padding: 0 24px;
  }

  .hs-hero__content {
    grid-template-columns: 1fr;
    gap: var(--hs-space-2xl);
    text-align: center;
  }

  .hs-hero__left {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .hs-hero__subtitle {
    margin-left: auto;
    margin-right: auto;
  }

  .hs-hero__actions {
    justify-content: center;
  }

  .hs-hero__trust {
    justify-content: center;
  }

  .hs-hero__right {
    max-width: 500px;
    margin: 0 auto;
  }

  .hs-phone-scene__image {
    display: none;
  }

  .hs-features__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hs-marketplace__content {
    grid-template-columns: 1fr;
    gap: var(--hs-space-2xl);
  }

  .hs-academy__layout {
    grid-template-columns: 1fr;
    gap: var(--hs-space-2xl);
  }

  .hs-academy__text-side {
    text-align: center;
  }

  .hs-academy__text-side .hs-section__title {
    text-align: center;
  }

  .hs-academy__text-side .hs-section__subtitle {
    text-align: center !important;
  }

  .hs-academy__highlights {
    justify-content: center;
  }

  .hs-academy__text-side .hs-btn {
    margin: 0 auto;
  }

  .hs-testimonials__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hs-testimonials__grid .hs-testimonial:last-child {
    grid-column: span 2;
    max-width: 50%;
    margin: 0 auto;
  }

  .hs-painpoints__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hs-why-pro__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hs-pricing__plans {
    grid-template-columns: repeat(2, 1fr);
  }

  .hs-pricing__plans .hs-pricing-card:last-child {
    grid-column: span 2;
    max-width: 50%;
    margin: 0 auto;
  }

  .hs-pricing-card--featured {
    transform: none;
  }

  .hs-pricing-card--featured:hover {
    transform: translateY(-8px);
  }

  .hs-ai-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hs-ai-grid .hs-ai-card:last-child {
    grid-column: span 2;
    max-width: 50%;
    margin: 0 auto;
  }

  .hs-team-trial__grid {
    grid-template-columns: 1fr;
    gap: var(--hs-space-2xl);
  }

  .hs-dash-main__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hs-dash-main__cols {
    grid-template-columns: 1fr;
  }

  .hs-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--hs-space-xl);
  }
}

/* ── Mobile (max-width: 768px) ─────────────────────────── */
@media (max-width: 768px) {
  .hs-announce {
    padding: 8px 40px 8px 16px;
  }

  .hs-announce__inner {
    font-size: 12px;
    gap: 8px;
  }

  .hs-announce__badge {
    font-size: 9px;
    padding: 2px 8px;
  }

  .hs-announce__close {
    right: 8px;
  }
  .hs-container {
    padding: 0 20px;
  }

  .hs-nav {
    padding: 0 20px;
  }

  .hs-nav__links {
    display: none;
  }

  .hs-nav__hamburger {
    display: flex;
  }

  .hs-section {
    padding: var(--hs-space-3xl) 0;
  }

  .hs-hero {
    min-height: auto;
    padding: 120px 0 60px;
  }

  .hs-hero__title {
    font-size: clamp(32px, 8vw, 48px);
  }

  .hs-hero__subtitle {
    font-size: 15px;
  }

  .hs-hero__actions {
    flex-direction: column;
    align-items: center;
    gap: var(--hs-space-sm);
    width: 100%;
  }

  .hs-hero__actions .hs-btn {
    width: 100%;
    max-width: 280px;
  }

  .hs-hero__scroll {
    display: none;
  }

  /* App Preview: simplify dashboard on mobile */
  .hs-dash-sidebar {
    display: none;
  }

  .hs-dash-main__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hs-dash-main__cols {
    grid-template-columns: 1fr;
  }

  .hs-browser-frame__content {
    min-height: auto;
  }

  .hs-features__grid {
    grid-template-columns: 1fr;
  }

  .hs-painpoints__grid {
    grid-template-columns: 1fr;
  }

  .hs-why-pro__grid {
    grid-template-columns: 1fr 1fr;
  }

  .hs-pricing__plans {
    grid-template-columns: 1fr;
  }

  .hs-pricing__plans .hs-pricing-card:last-child {
    grid-column: span 1;
    max-width: 100%;
  }

  .hs-ai-grid {
    grid-template-columns: 1fr;
  }

  .hs-ai-grid .hs-ai-card:last-child {
    grid-column: span 1;
    max-width: 100%;
  }

  .hs-ai-bundle__table {
    max-width: 100%;
  }

  .hs-ai-compare__table td,
  .hs-ai-compare__table th {
    font-size: 12px;
    padding: 10px 6px;
  }

  .hs-team-trial__grid {
    grid-template-columns: 1fr;
  }

  .hs-team-trial__col-title {
    font-size: 24px;
  }

  .hs-testimonials__grid {
    grid-template-columns: 1fr;
  }

  .hs-testimonials__grid .hs-testimonial:last-child {
    grid-column: span 1;
    max-width: 100%;
  }

  .hs-how__steps {
    flex-direction: column;
    gap: var(--hs-space-xl);
  }

  .hs-how__divider {
    width: 60px;
    height: 1px;
    margin: 0 auto;
  }

  .hs-marketplace__content {
    grid-template-columns: 1fr;
  }

  .hs-marketplace__text {
    text-align: center;
  }

  .hs-marketplace__list {
    align-items: flex-start;
    text-align: left;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }

  .hs-academy__layout {
    grid-template-columns: 1fr;
  }

  .hs-academy__highlights {
    justify-content: center;
  }

  .hs-footer__grid {
    grid-template-columns: 1fr;
    gap: var(--hs-space-xl);
  }

  .hs-footer__bottom {
    flex-direction: column;
    gap: var(--hs-space-sm);
    text-align: center;
  }

  .hs-section__title {
    font-size: clamp(28px, 6vw, 40px);
  }

  .hs-cta-final__title {
    font-size: clamp(30px, 7vw, 48px);
  }

  .hs-cta-final__actions {
    flex-direction: column;
    align-items: center;
  }
}

/* ── Small Mobile (max-width: 480px) ───────────────────── */
@media (max-width: 480px) {
  .hs-container {
    padding: 0 16px;
  }

  .hs-nav {
    padding: 0 16px;
  }

  .hs-hero {
    padding: 100px 0 48px;
  }

  .hs-phone {
    width: 240px !important;
  }

  .hs-dash-main__grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .hs-dash-stat__num {
    font-size: 22px;
  }

  .hs-dash-main {
    padding: 14px 16px;
  }

  .hs-dash-main__greeting {
    font-size: 16px;
  }

  .hs-feature-card {
    padding: var(--hs-space-lg);
  }

  .hs-testimonial {
    padding: var(--hs-space-lg);
  }

  .hs-testimonial__quote {
    font-size: 15px;
  }

  .hs-academy__card {
    padding: var(--hs-space-lg);
  }

  .hs-academy__highlights {
    gap: var(--hs-space-lg);
  }

  .hs-why-pro__grid {
    grid-template-columns: 1fr;
  }

  .hs-painpoint-card {
    padding: var(--hs-space-lg);
  }

  .hs-pricing-card {
    padding: var(--hs-space-lg) 20px;
  }

  .hs-ai-card__header {
    padding: 24px 20px 16px;
  }

  .hs-ai-card__features {
    padding: 16px 20px 24px;
  }

  .hs-ai-card__pricing {
    padding: 12px 20px;
  }

  .hs-ai-bundle {
    padding: var(--hs-space-lg);
  }

  .hs-ai-compare {
    padding: var(--hs-space-lg);
  }

  .hs-btn {
    padding: 12px 24px;
    font-size: 12px;
  }

  .hs-btn--lg {
    padding: 14px 32px;
  }
}