/* FelizTV shared responsive layer
   Loaded after each page's legacy stylesheet so the same mobile rules apply
   to the home, pricing, guide, multi-device, support, review, offer, legal,
   redirect and completion routes. */

:root {
  --mobile-gutter: clamp(16px, 4vw, 28px);
  --mobile-touch: 48px;
}

html {
  width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

img,
svg,
video,
iframe {
  max-width: 100%;
}

video,
iframe {
  display: block;
}

button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

button,
a.btn,
a[class*="btn"],
.btn,
.human-pill,
.toggle-btn,
.duration-btn,
.lang-btn,
.fil,
.app-tab,
.mob-tog,
.menu {
  min-height: var(--mobile-touch);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #1f7650;
  outline-offset: 3px;
}

/* The legacy pages use a fixed 60px header. Keep anchors and content clear. */
body:not(.human-home) {
  scroll-padding-top: 76px;
}

body:not(.human-home) .wrap,
body:not(.human-home) .container,
body:not(.human-home) .inner {
  width: min(100% - (var(--mobile-gutter) * 2), 1200px);
  margin-inline: auto;
}

/* Shared legacy header: the existing menu button remains keyboard and touch usable. */
body:not(.human-home) nav.top,
body:not(.human-home) .navbar,
body:not(.human-home) .top {
  max-width: 100%;
}

.mob-tog,
.menu {
  width: var(--mobile-touch);
  height: var(--mobile-touch);
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--mobile-touch);
}

body:not(.human-home) .nav-l.is-open,
body:not(.human-home) .nav-links.is-open {
  max-height: calc(100svh - 60px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

body:not(.human-home) .nav-l.is-open a,
body:not(.human-home) .nav-links.is-open a {
  display: flex;
  align-items: center;
  min-height: var(--mobile-touch);
  width: 100%;
  padding: 10px 4px;
}

/* Keep horizontal collections intentional instead of letting cards push the viewport. */
.comparison-wrap,
.table-wrap,
.human-table-wrap,
.plan-slider-shell,
.story-scroll,
.story-slider,
.proof-chat-rail,
.channel-showcase,
.apps-tabs,
.duration-options {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

.comparison-table,
.human-price-table,
.table-wrap table {
  min-width: 680px;
}

.comparison-wrap,
.table-wrap,
.human-table-wrap {
  scrollbar-width: thin;
}

.comparison-wrap::-webkit-scrollbar,
.table-wrap::-webkit-scrollbar,
.human-table-wrap::-webkit-scrollbar,
.plan-slider-shell::-webkit-scrollbar,
.story-scroll::-webkit-scrollbar {
  height: 8px;
}

/* Prevent large legacy grids and media blocks from overflowing. */
.hero-grid,
.why-grid,
.how-grid,
.lt-grid,
.test-layout,
.support-section,
.fb-grid,
.ft-grid,
.footer-grid,
.offer-grid,
.video-feature-grid,
.cross-perks,
.special-faq-grid,
.channels-grid,
.issues-grid,
.stats-grid,
.features-grid,
.gift-banner,
.value-banner {
  min-width: 0;
}

.hero h1,
.hero-sub,
.section-title,
.section-subtitle,
.sec-hdr h2,
.fcta h2,
.support-box h2,
.final-cta h2 {
  overflow-wrap: anywhere;
}

input,
select,
textarea {
  max-width: 100%;
}

@media (max-width: 960px) {
  .hero-grid,
  .why-grid,
  .how-grid,
  .lt-grid,
  .test-layout,
  .support-section,
  .fb-grid,
  .offer-grid,
  .video-feature-grid,
  .cross-perks,
  .special-faq-grid,
  .channels-grid,
  .issues-grid,
  .stats-grid,
  .features-grid,
  .value-banner {
    grid-template-columns: 1fr;
  }

  .hero,
  .price-hero {
    padding-top: 108px;
  }

  .hero-visual,
  .hero-video-card,
  .hero-video {
    width: min(100%, 620px);
    margin-inline: auto;
  }

  .support-section,
  .lt-card,
  .offer-plan-card,
  .special-final,
  .fcta,
  .support-box,
  .final-cta {
    max-width: 100%;
  }

  .p-grid,
  .plans,
  .human-plan-grid,
  .human-trust-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .plan.popular,
  .human-plan.featured {
    transform: none;
  }

  .device-grid,
  .devices,
  .guide-grid,
  .compat-grid,
  .steps-grid,
  .features-grid-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nav-cta,
  .nav .btn-primary {
    display: none;
  }
}

@media (max-width: 680px) {
  :root {
    --mobile-gutter: 14px;
  }

  .section,
  .section-padding,
  .human-seo-section {
    padding-block: 52px;
  }

  .hero,
  .price-hero {
    padding: 92px 0 48px;
  }

  .hero h1,
  .price-hero h1 {
    font-size: clamp(34px, 10vw, 48px);
    line-height: 1.08;
  }

  .hero-sub,
  .lead,
  .human-hero-copy > p,
  .section-subtitle,
  .section-heading p {
    font-size: 16px;
  }

  .hero-ctas,
  .hero-actions,
  .human-actions,
  .pricing-actions,
  .guar-ctas,
  .thanks-actions,
  .contact-btns,
  .fcta-ctas,
  .sales-link-row {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .hero-ctas .btn,
  .hero-actions .btn,
  .human-actions .human-pill,
  .pricing-actions .btn,
  .guar-ctas .btn,
  .thanks-actions .btn,
  .contact-btns .contact-btn,
  .fcta-ctas .btn,
  .sales-link-row .btn {
    width: 100%;
  }

  .p-grid,
  .plans,
  .human-plan-grid,
  .human-trust-grid,
  .device-grid,
  .devices,
  .guide-grid,
  .compat-grid,
  .steps-grid,
  .features-grid-6,
  .why-cards,
  .guar-grid,
  .footer-grid,
  .ft-grid,
  .stats-grid,
  .support-stats,
  .trust-grid,
  .human-info-grid,
  .human-steps {
    grid-template-columns: 1fr;
  }

  .pc,
  .plan,
  .human-plan,
  .feature-card-clean,
  .device-card,
  .testimonial-card,
  .tp-card,
  .wc,
  .offer-plan-card,
  .offer-feature-card,
  .special-faq-grid .faq-card,
  .channel,
  .issue,
  .metric,
  .stat-card,
  .support-box,
  .final-cta,
  .fcta,
  .thanks-card,
  .box {
    padding: 22px;
  }

  .human-support-card {
    min-height: 0;
    padding: 28px 22px;
    border-radius: 26px;
  }

  .human-support-card h2,
  .support-box h2,
  .final-cta h2 {
    font-size: clamp(28px, 8vw, 36px);
  }

  .human-story blockquote {
    font-size: clamp(25px, 7vw, 32px);
  }

  .lt-card,
  .support-section,
  .human-pricing-cta,
  .special-final {
    padding: 24px 20px;
  }

  .lt-top,
  .human-footer-top,
  .human-footer-bottom,
  .ft-bottom,
  .fb-grid {
    display: block;
  }

  .lt-countdown,
  .offer-facts,
  .hero-proof,
  .hero-features,
  .trust-row,
  .trust-strip,
  .human-trust-grid,
  .pricing-facts {
    flex-wrap: wrap;
  }

  .duration-options,
  .device-toggle,
  .apps-tabs,
  .filters {
    justify-content: flex-start;
    width: 100%;
    border-radius: 18px;
    padding: 6px;
  }

  .duration-btn,
  .toggle-btn,
  .app-tab,
  .fil {
    flex: 0 0 auto;
    padding-inline: 14px;
  }

  .support-form,
  .ticket-form,
  .tk-row-2,
  .tk-row,
  .form-row,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .support-form input,
  .support-form select,
  .support-form textarea,
  .ticket-form input,
  .ticket-form select,
  .ticket-form textarea,
  .req input,
  .req select,
  .req textarea,
  input,
  select,
  textarea {
    width: 100%;
    min-height: var(--mobile-touch);
    font-size: 16px;
  }

  textarea {
    min-height: 120px;
  }

  .wa-float {
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom));
    width: 54px;
    height: 54px;
  }

  .mobile-bar {
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }

  .footer,
  .human-footer {
    padding-bottom: calc(88px + env(safe-area-inset-bottom));
  }

  .live-pop {
    left: 14px;
    right: 14px;
    max-width: none;
    bottom: calc(76px + env(safe-area-inset-bottom));
  }

  .hero-video,
  .hero-video-card video,
  .video-feature-card video,
  .story-video video {
    aspect-ratio: 16 / 9;
    height: auto;
  }

  .code-text,
  pre,
  code {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}