/* _phone.css, 2026-10-17. Phone-only polish shared by every public page
   (Jesse: "optimize mobile so it looks clean", then "keep enhancing").
   Nothing here applies above 768px, so desktop is untouched. Found by a
   headless audit of 39 pages at 375px: headings ending on a lone word, and
   tap targets under 40px. Tap areas grow with an invisible ::after, so the
   controls keep their measured look. */
@media (max-width:768px){
  /* headings: even lines, no single word left on the last one */
  h1,h2,h3,h4,.h3-lg{text-wrap:balance}

  /* nav: logo (30px), Try free (36px) and menu (36px) answer a 44px finger */
  #nav .brand,#nav .nav-burger,#nav .nav-right .btn-black{position:relative}
  #nav .brand::after{content:"";position:absolute;inset:-7px -4px}
  #nav .nav-burger::after,#nav .nav-right .btn-black::after{content:"";position:absolute;inset:-4px -2px}

  /* text links with an arrow ("Explore automation", "Back to the blog") */
  .vh-link,.ixh-link{padding-top:10px;padding-bottom:10px}
  .fx-link,.ix-more,.post-back,.abh-link,.wn-more{position:relative}
  .fx-link::after,.ix-more::after,.post-back::after,.abh-link::after,.wn-more::after{content:"";position:absolute;inset:-10px -4px}

  /* guide jump chips (35px) and the home film transcript toggle (33px) */
  .g-jump a{padding-top:10px;padding-bottom:10px}
  .how-transcript summary{padding-top:12px;padding-bottom:12px}

  /* FAQ rows, filter toggles, segmented switches */
  .faq-q{min-height:44px}
  .fcell-btn,.mp-seg{min-height:40px}

  /* section rhythm: feature pages stacked 48 + 80 + 48 = 176px of air
     between sections on a phone; 40 + 56 + 40 reads tighter, still airy */
  .bands{row-gap:56px}
  .int-feat{padding-top:40px;padding-bottom:40px}

  /* calculator fields */
  .calc-amt input,.calc-amt select{min-height:40px}
  .calc-check input[type=checkbox]{width:22px;height:22px}
}