/* Mobile spacing and touch controls. Keep the established desktop design. */
@media screen and (max-width: 640px) {
  /* Clear separation between the hero copy, action and reassurance. */
  .hero-copy .hero-sub { margin-bottom: 1.75rem; }
  .hero-ctas, .hero-t-ctas { width: 100%; gap: .75rem; }
  .hero-ctas { margin-bottom: 2rem; }
  .hero-ctas .btn, .hero-t-ctas .btn, .hero-cta .btn { width: 100%; }
  .hero-trust { padding-top: 1.5rem; }

  /* Long labels wrap inside the button; the arrow keeps its own space. */
  .btn {
    max-width: 100%; min-width: 0; min-height: 3.5rem;
    padding: .625rem .625rem .625rem 1.125rem;
    gap: .75rem; line-height: 1.45; text-align: center;
    white-space: normal; overflow-wrap: anywhere;
  }
  .btn:has(.arr) { justify-content: space-between; }
  .btn:not(:has(.arr)) { padding: 1rem 1.125rem; }
  .btn .arr { width: 2.5rem; height: 2.5rem; }
  .ba-cta .btn, .ba-cta-dark .btn, .diff-cta .btn, .testi-cta .btn,
  .rev-cta .btn, .smt-cta .btn, .ig-cta .btn, .guar-cta .btn,
  #cta .btn, .prog-panel .btn { width: 100%; }

  .mob-btn { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
  .mob-menu { padding-inline: 1.5rem; padding-bottom: max(1.5rem, env(safe-area-inset-bottom)); gap: .625rem; }
  .mob-menu a { min-height: 44px; display: flex; align-items: center; }
  .mob-menu .mob-cta { max-width: 100%; padding: 1rem 1.25rem; font-size: 1rem; }
  .ba-mute, .testi-arrow, .rev-arrow { width: 44px; height: 44px; flex-shrink: 0; }
  .prog-tab { min-height: 48px; min-width: 0; }
  .ba-tabs .ba-tab { min-height: 52px; }

  /* Dot targets used negative margins and overlapped their neighbours. */
  .testi-nav, .rev-nav { gap: .25rem; }
  .testi-dots, .rev-dots { gap: 0; justify-content: center; }
  .testi-dot, .testi-dot.on, .rev-dot, .rev-dot.on {
    position: relative; box-sizing: border-box; flex: 0 0 24px;
    width: 24px; height: 44px; margin: 0; padding: 0;
    background: transparent; border-radius: .5rem;
  }
  .testi-dot::before, .rev-dot::before {
    content: ''; position: absolute; top: 50%; left: 50%;
    width: 6px; height: 6px; border-radius: 999px;
    transform: translate(-50%, -50%); background: rgba(24,32,25,.25);
  }
  .testi-dot.on::before, .rev-dot.on::before { width: 18px; background: var(--green); }

  /* Allow both comparison columns to shrink instead of clipping the right one. */
  .vs-table { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .vs-us, .vs-them, .vs-h-us, .vs-h-them { min-width: 0; padding: 1rem .75rem; overflow-wrap: anywhere; }
  .vs-us, .vs-them { gap: .5rem; font-size: .875rem; line-height: 1.6; }
  .vs-h-us, .vs-h-them { font-size: .9375rem; }

  /* Readable form text and enough room for touch, including the back action. */
  .form-input, .form-textarea, .fz-input, .interesse-input { font-size: 1rem; min-height: 48px; min-width: 0; }
  .form-chip span { min-height: 44px; }
  .form-row { margin-bottom: 0; }
  .form-row > div { min-width: 0; }
  .fz-back { min-height: 44px; padding: .625rem .75rem; }
  .fz-btn, .fz-comm-btn, .form-submit { min-height: 52px; white-space: normal; line-height: 1.45; }
  .interesse-form { gap: .75rem; }
  .interesse-btn { width: 100%; }
  .faq-btn { gap: 1rem; line-height: 1.5; }
  .faq-icon { flex-shrink: 0; }
  #cta { padding-block: 4rem; }
}
@media screen and (max-width: 360px) {
  .testi-nav, .rev-nav { flex-wrap: wrap; column-gap: 1rem; row-gap: .25rem; }
  .testi-dots, .rev-dots { order: 3; flex-basis: 100%; }
  .ba-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* The free guides keep A4 pages for print, and flow naturally on phones. */
@media screen and (max-width: 640px) {
  body:has(> .pg) { padding: 0; }
  .pg { width: 100%; min-height: 0; padding: 2.5rem 1.5rem 1.5rem; }
  .pg + .pg { margin-top: 1rem; }
  .pg.pg-cover { padding: 0; }
  .pg .cover-in { min-height: 100svh; padding: 1.5rem; }
  .pg .cover-body { padding-top: 12rem; }
  .pg .cover-h1 { font-size: clamp(2rem, 9vw, 3rem); }
  .pg .cover-pill { max-width: 100%; border-radius: 1rem; font-size: .8125rem; }
  .pg .cover-foot { gap: .75rem; flex-wrap: wrap; margin-top: 2rem; }
  .pg .about, .pg .compare { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .pg .ph { width: 100%; max-width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .pg .h-pg { font-size: 1.875rem; }
  .pg .card, .pg .callout, .pg .opt, .pg .compare .card { padding: 1.25rem; }
  .pg .reason { grid-template-columns: 2.5rem minmax(0, 1fr); padding: 1.125rem; gap: .875rem; }
  .pg .num-row, .pg .x-row { gap: .75rem; }
  .pg .opt-head { flex-wrap: wrap; }
  .pg .btn { width: 100%; }
}