/**
 * Sales pages (/branch-writing, /nested-notes): mobile type floor + iPad/tablet layout.
 * Load after page-inline-map.css and cookie-consent/sy-consent.css.
 * Tokens: variables.css (--bw-mobile-min-font*, --bw-tablet-*).
 */

@media screen and (max-width: 767px) {
  /* Nav — floor for 14px brand on small screens */
  .bw-navbar-brand {
    font-size: var(--bw-mobile-min-font) !important;
  }

  /* Inline YouTube fallback (before hydration) */
  #__next .youtube-comment-username,
  #__next .youtube-comment-text {
    font-size: var(--bw-mobile-min-font) !important;
    line-height: 1.45 !important;
  }

  /* Hero / cards — overrides rem sizes below the floor */
  .bw-hero-support-copy {
    font-size: var(--bw-mobile-min-font) !important;
  }

  .bw-hero-mini-card-title {
    font-size: var(--bw-mobile-min-font) !important;
  }

  .bw-hero-mini-card-copy {
    font-size: var(--bw-mobile-min-font) !important;
  }

  .bw-emphasis-line {
    font-size: var(--bw-mobile-min-font) !important;
  }

  .bw-feature-card-stack .bw-feature-card-body,
  .bw-feature-pair-stack .bw-feature-card-body {
    font-size: var(--bw-mobile-min-font) !important;
  }

  /* Pricing — beat inline + page-inline-map */
  #__next .pricing-label,
  #__next .pricing-label-premium,
  #__next .pricing-term,
  #__next .pricing-savings {
    font-size: var(--bw-mobile-min-font) !important;
  }

  #__next .pricing-guarantee {
    font-size: var(--bw-mobile-min-font) !important;
  }

  #__next .pricing-feature {
    font-size: var(--bw-mobile-min-font) !important;
  }

  #__next .pricing-badge {
    font-size: var(--bw-mobile-min-font) !important;
    padding: 8px 14px !important;
    white-space: normal !important;
    text-align: center !important;
    max-width: calc(100vw - 2.5rem);
  }

  #__next .pricing-badge .badge-icon {
    font-size: 1em !important;
  }

  #__next .pricing-btn,
  #__next .pricing-btn-standard,
  #__next .pricing-btn-premium {
    font-size: var(--bw-mobile-min-font) !important;
  }

  #__next .pricing-link {
    font-size: var(--bw-mobile-min-font) !important;
  }

  /* Tailwind utility sizes often map below 18px */
  #__next .text-xs,
  #__next .text-sm {
    font-size: var(--bw-mobile-min-font) !important;
  }

  /* Testimonials (scoped to #__next so /ai and other routes are unaffected) */
  #__next .bw-testimonial-db__quote {
    font-size: var(--bw-mobile-min-font) !important;
    line-height: 1.55 !important;
  }

  #__next .bw-testimonial-db__name {
    font-size: var(--bw-mobile-min-font) !important;
  }

  #__next .bw-testimonial-load-error {
    font-size: var(--bw-mobile-min-font) !important;
  }

  /* Cookie banner on pages that load this stylesheet only */
  .sy-cookie-consent-banner {
    --sy-cookie-consent-text-font-size: var(--bw-mobile-min-font);
  }

  .sy-cookie-consent-btn {
    font-size: var(--bw-mobile-min-font) !important;
  }
}

/* ---------- iPad / tablet: narrower measure + gutters (avoids “too wide” blocks) ---------- */

/* Portrait & small tablet (~768px–1023px) */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .bw-page-gutter {
    padding-left: max(var(--bw-tablet-padding-x), env(safe-area-inset-left, 0px)) !important;
    padding-right: max(var(--bw-tablet-padding-x), env(safe-area-inset-right, 0px)) !important;
  }

  #__next .max-w-6xl {
    max-width: min(100%, var(--bw-tablet-content-max)) !important;
  }

  #__next .bw-narrow {
    max-width: min(100%, var(--bw-tablet-pricing-max)) !important;
  }

  #__next .bw-content-wide {
    max-width: min(100%, var(--bw-tablet-content-max)) !important;
  }

  #__next .pricing-grid {
    max-width: min(100%, var(--bw-tablet-pricing-max)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Nested Notes FAQ section */
  #__next .bw-faq-list {
    max-width: min(100%, var(--bw-tablet-content-max)) !important;
  }
}

/* Large iPad landscape & small laptops (~1024px–1279px): softer cap without affecting 1280px+ desktops */
@media screen and (min-width: 1024px) and (max-width: 1279px) {
  .bw-page-gutter {
    padding-left: max(2rem, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(2rem, env(safe-area-inset-right, 0px)) !important;
  }

  #__next .max-w-6xl {
    max-width: min(100%, var(--bw-tablet-content-max-lg)) !important;
  }

  #__next .pricing-grid {
    max-width: min(100%, 52rem) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #__next .bw-faq-list {
    max-width: min(100%, var(--bw-tablet-content-max-lg)) !important;
  }
}