/**
 * Public site — TABLET layout (768px–1199.98px)
 * Top-to-bottom section stack with comfortable 2-up grids inside.
 * Applies to all Frontend public pages (home, pricing, about, blog, contact, FAQ, auth).
 */

@media (min-width: 768px) and (max-width: 1199.98px) {
  /* ── Page shell ─────────────────────────────────────────── */
  body.hp-page {
    --hp-tablet-gutter: 28px;
    --hp-tablet-max: 900px;
    --hp-tablet-card: 20px;
  }

  .container,
  .hp2-inner-section .container,
  .hp-section .container {
    width: 100% !important;
    max-width: var(--hp-tablet-max) !important;
    padding-left: var(--hp-tablet-gutter) !important;
    padding-right: var(--hp-tablet-gutter) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Vertical rhythm — clear top→bottom sections */
  .hp2-section,
  .hp-section,
  .hp2-inner-section,
  .hp2-hero {
    padding-top: clamp(56px, 7vw, 80px) !important;
    padding-bottom: clamp(56px, 7vw, 80px) !important;
  }

  .hp2-hero {
    padding-top: calc(72px + 24px) !important; /* header clearance */
  }

  /* ── Header ─────────────────────────────────────────────── */
  .hp-header-inner {
    max-width: var(--hp-tablet-max);
    margin: 0 auto;
    padding-left: var(--hp-tablet-gutter);
    padding-right: var(--hp-tablet-gutter);
    min-height: 60px;
  }

  .hp-header-nav {
    display: none !important; /* use hamburger + dock on tablet */
  }

  .hp-header-actions .hp-btn,
  .hp-header-actions .hp-header-login {
    display: none !important;
  }

  .hp-mobile-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px !important;
    height: 44px !important;
  }

  /* ── Type scale (tablet) ────────────────────────────────── */
  .hp2-hero-content h1,
  .hp2-hero h1,
  .hp-hero h1 {
    font-size: clamp(2rem, 1.7rem + 1.4vw, 2.6rem) !important;
    line-height: 1.18 !important;
    letter-spacing: -0.03em !important;
  }

  .hp2-section-header h2,
  .hp2-roi-left h2,
  .hp2-final-cta h2,
  .hp-section-header h2 {
    font-size: clamp(1.6rem, 1.35rem + 1vw, 2.1rem) !important;
    line-height: 1.25 !important;
  }

  .hp2-section-header {
    max-width: 640px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    margin-bottom: 36px !important;
  }

  .hp2-hero-sub,
  .hp2-section-sub,
  .hp2-pricing-roi-line {
    font-size: 1.05rem !important;
    line-height: 1.55 !important;
  }

  .hp2-overline,
  .hp2-section-overline,
  .hp2-pricing-badge,
  .hp2-popular-badge {
    font-size: 0.7rem !important;
    min-height: 30px !important;
    padding-inline: 14px !important;
  }

  .hp2-btn,
  .hp-btn {
    min-height: 50px !important;
    font-size: 1rem !important;
    padding-inline: 28px !important;
  }

  .hp2-btn-lg {
    min-height: 56px !important;
    font-size: 1.05rem !important;
  }

  /* ── HERO — stacked top → bottom ────────────────────────── */
  .hp2-hero-grid,
  .hp-hero .row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 36px !important;
    text-align: center !important;
  }

  .hp2-hero-content {
    order: 1;
    max-width: 640px;
    margin: 0 auto;
  }

  .hp2-hero-ctas {
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
  }

  .hp2-hero-proof {
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 12px 20px !important;
  }

  .hp2-hero-visual {
    order: 2;
    max-width: 640px !important;
    margin: 0 auto !important;
    width: 100%;
  }

  /* ── TRUST BAR — keep 3 stats on one row ────────────────── */
  .hp2-trust-stats {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(12px, 2.5vw, 28px) !important;
    width: 100%;
  }

  .hp2-trust-stat {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }

  .hp2-trust-stat-num {
    font-size: clamp(1.25rem, 2.2vw, 1.6rem) !important;
  }

  .hp2-trust-stat-text {
    font-size: clamp(0.62rem, 1.1vw, 0.75rem) !important;
    letter-spacing: 0.04em !important;
    text-align: center;
    white-space: nowrap;
  }

  .hp2-trust-stat-sep {
    display: block !important;
    flex-shrink: 0 !important;
    height: 28px !important;
  }

  .hp-results-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px 24px !important;
    justify-items: center;
  }

  .hp2-trust-bottom {
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
  }

  /* ── PROBLEM — stacked cards ────────────────────────────── */
  .hp2-problem-grid {
    grid-template-columns: 1fr !important;
    max-width: 560px !important;
    margin: 0 auto !important;
    gap: 20px !important;
  }

  .hp2-problem-card {
    padding: var(--hp-tablet-card, 20px) !important;
  }

  /* ── FEATURES — text then visual, top→bottom ────────────── */
  .hp2-feature-row,
  .hp2-feature-row-reverse,
  .hp-feature-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    direction: ltr !important;
    margin-bottom: 56px !important;
    text-align: center !important;
  }

  .hp2-feature-text,
  .hp2-feature-checks {
    align-items: center !important;
    text-align: center !important;
  }

  .hp2-feature-visual,
  .hp2-feature-mock {
    max-width: 620px !important;
    margin: 0 auto !important;
    width: 100%;
  }

  .hp2-mockup-staff-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* ── SHOWCASE / LIVE DASH ───────────────────────────────── */
  .hp2-showcase-tabs,
  .hp2-showcase-tablist {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  .hp2-showcase-window,
  .hp2-live-window {
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  .hp2-live-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .hp2-live-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  /* ── ROI / RESULTS — heading then 2×2 cards ─────────────── */
  .hp2-roi-split {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }

  .hp2-roi-left {
    position: static !important;
    text-align: center !important;
    max-width: 560px;
    margin: 0 auto;
  }

  .hp2-roi-left p {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 480px !important;
  }

  .hp2-roi-right {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  .hp2-roi-stat-card {
    padding: 22px 18px !important;
    text-align: left;
  }

  .hp2-roi-stat-number {
    font-size: clamp(1.8rem, 1.4rem + 1.5vw, 2.5rem) !important;
  }

  /* ── PRICING — 2-up cards, top→bottom pages ─────────────── */
  .hp2-pricing-grid,
  .hp2-pricing-page .hp2-pricing-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
    max-width: 820px !important;
    margin: 0 auto !important;
    align-items: stretch !important;
  }

  .hp2-pricing-card,
  .hp2-price-card {
    padding: 28px 22px !important;
    transform: none !important;
  }

  .hp2-pricing-featured {
    transform: none !important;
    order: -1; /* popular first on tablet */
  }

  .hp2-pricing-price,
  .hp2-pricing-page .hp2-price-amount {
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    gap: 4px !important;
  }

  .hp2-price-amount,
  .hp2-pricing-page .hp2-price-current {
    font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem) !important;
  }

  .hp2-price-period {
    font-size: 0.85rem !important;
    flex-shrink: 0 !important;
  }

  /* Odd last card centers nicely */
  .hp2-pricing-grid > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: 380px;
    margin-inline: auto;
    width: 100%;
  }

  /* ── TESTIMONIALS — 2-up ────────────────────────────────── */
  .hp2-testimonials-grid,
  .hp-reviews-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }

  .hp2-testimonial-card,
  .hp-review-card {
    padding: 22px 20px !important;
  }

  /* ── FAQ ────────────────────────────────────────────────── */
  .hp2-faq .hp2-section-header,
  .hp-faq .hp-section-header {
    margin-bottom: 28px !important;
  }

  .hp2-faq-item,
  .hp-faq-item {
    border-radius: 14px !important;
  }

  .hp2-faq-question,
  .hp-faq-question {
    min-height: 52px !important;
    font-size: 1rem !important;
    padding: 14px 18px !important;
  }

  /* ── FINAL CTA ──────────────────────────────────────────── */
  .hp2-final-cta .container {
    text-align: center !important;
  }

  .hp2-final-cta .hp2-hero-ctas,
  .hp2-final-cta .hp2-cta-actions {
    justify-content: center !important;
    flex-wrap: wrap !important;
  }

  /* ── FOOTER — brand then 2×2 link columns ───────────────── */
  .hp2-footer-grid,
  .hp-footer-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 28px 32px !important;
  }

  .hp2-footer-brand,
  .hp-footer-brand {
    grid-column: 1 / -1 !important;
    text-align: center;
  }

  .hp2-footer-social {
    justify-content: center;
  }

  .hp2-footer-bottom,
  .hp-footer-bottom {
    flex-direction: column !important;
    text-align: center !important;
    gap: 12px !important;
  }

  /* ── INNER PAGES (about / contact / blog / pricing / FAQ) ─ */
  .hp2-contact-section .row,
  .hp2-contact-grid,
  .hp-contact-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .hp2-contact-form-card,
  .hp-contact-cards,
  .hp-blog-grid {
    max-width: 720px;
    margin-inline: auto;
  }

  .hp-blog-grid,
  .hp2-blog-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
  }

  .hp2-pricing-page .hp2-price-card {
    height: auto !important;
  }

  /* Auth / forms on tablet */
  .hp-auth-card,
  .hp-auth-wrap,
  .auth-card {
    max-width: 480px !important;
    margin: 40px auto !important;
    padding: 32px 28px !important;
  }

  /* Cards shared */
  .hp2-pricing-card,
  .hp2-price-card,
  .hp2-testimonial-card,
  .hp2-roi-stat-card,
  .hp2-problem-card,
  .card {
    border-radius: 16px !important;
  }

  /* Compare / feature tables scroll safely */
  .table-responsive,
  .hp2-compare-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Landscape tablets that are still “tablet width” but wider content */
@media (min-width: 992px) and (max-width: 1199.98px) {
  body.hp-page {
    --hp-tablet-max: 980px;
    --hp-tablet-gutter: 32px;
  }

  .hp2-pricing-grid,
  .hp2-pricing-page .hp2-pricing-grid {
    max-width: 920px !important;
  }

  .hp2-roi-right {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .hp2-roi-stat-card {
    padding: 18px 14px !important;
  }

  .hp2-roi-stat-number {
    font-size: 1.65rem !important;
  }

  .hp2-roi-stat-label {
    font-size: 0.88rem !important;
  }

  .hp2-roi-stat-card p {
    font-size: 0.75rem !important;
  }

  /* ── Mobile/tablet nav drawer ───────────────────────────── */
  .hp-mm-panel {
    width: min(52vw, 480px) !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .hp-mm-brand-name {
    font-size: 1.45rem !important;
  }

  .hp-mm-brand-tag {
    font-size: 0.8rem !important;
  }

  .hp-mm-link {
    min-height: 64px !important;
    padding: 14px 16px !important;
  }

  .hp-mm-title {
    font-size: 1.08rem !important;
  }

  .hp-mm-hint {
    font-size: 0.82rem !important;
  }

  .hp-mm-auth {
    grid-template-columns: 1fr 1.4fr !important;
  }
}