/* Authentic — responsive layer.
   The source design was fixed-width desktop with all layout in inline style="".
   Overrides use !important (author !important beats an inline style).

   Three gotchas this file works around:
   1. authentic-anim.js writes to element.style on [data-anim]/[data-stagger] nodes,
      which re-serializes the style attribute WITH spaces ("font-size: 66px").
      So value-based [style*="..."] selectors silently miss once JS runs — we drive
      type from element selectors (main h1/h2) and match grids on the property NAME.
   2. CSS grid tracks default to min-width:auto, so a track can't shrink below its
      content. We stack grids as blocks on phones.
   3. Flex rows and other boxes also default to min-width:auto, giving the content a
      ~470px floor that overflows a phone and gets clipped. `main *{min-width:0}`
      lets everything shrink so text and button rows wrap instead of overflowing. */

/* ===== Mobile nav: hamburger + dropdown (base state) ===== */
#ath-nav-toggle{display:none}          /* also set inline; shown at the breakpoint */
#ath-mobile-menu{display:none}         /* closed until toggled open */

#ath-nav-toggle .ath-ico-open{display:inline-flex}
#ath-nav-toggle .ath-ico-close{display:none}
#ath-nav-toggle[aria-expanded="true"] .ath-ico-open{display:none}
#ath-nav-toggle[aria-expanded="true"] .ath-ico-close{display:inline-flex}

/* no sideways scroll from the fixed-width source layout (desktop unaffected) */
@media (max-width:1024px){
  html{overflow-x:hidden}
}

@media (max-width:860px){
  [data-nav-links],
  #ath-nav-cta{display:none !important}
  #ath-nav-toggle{display:inline-flex !important}
}
@media (min-width:861px){
  #ath-mobile-menu{display:none !important}   /* if widened while open */
}

/* ===== Tablet (768–1024px): thin the densest grids ===== */
@media (min-width:768px) and (max-width:1024px){
  main [style*="grid-template-columns:repeat(3,1fr)"],
  main [style*="grid-template-columns: repeat(3,1fr)"]{grid-template-columns:1fr 1fr !important}
  main [style*="grid-template-columns:repeat(4,1fr)"],
  main [style*="grid-template-columns: repeat(4,1fr)"]{grid-template-columns:1fr 1fr !important}
  footer [style*="grid-template-columns"]{grid-template-columns:1fr 1fr !important}
  main [style*="grid-template-columns"] > *{min-width:0 !important}
}

/* ===== Phone (<=767px) ===== */
@media (max-width:767px){

  /* Let every box shrink below its content's intrinsic width so flex rows and
     text wrap instead of forcing horizontal overflow. This is the key fix. */
  body *{min-width:0 !important;max-width:100% !important}

  /* Stack every multi-column grid as plain blocks (avoids grid track min sizing).
     margin-bottom re-creates the lost grid gap. */
  main [style*="grid-template-columns"]{display:block !important}
  main [style*="grid-template-columns"] > *{max-width:100% !important;margin-bottom:20px !important}
  main [style*="grid-template-columns"] > *:last-child{margin-bottom:0 !important}
  footer [style*="grid-template-columns"]{display:block !important}
  footer [style*="grid-template-columns"] > *{margin-bottom:30px !important}

  /* typography — element-based so JS style re-serialization can't dodge it */
  main h1{font-size:clamp(30px,8.6vw,40px) !important;line-height:1.06 !important}
  main h2{font-size:clamp(24px,6.6vw,32px) !important;line-height:1.1 !important}
  main h1,main h2,main h3{overflow-wrap:break-word}

  /* generous, even side padding on phones (per request) + a calmer vertical rhythm */
  main > section{padding-left:26px !important;padding-right:26px !important}
  main [style*="padding:104px 32px"]{padding-top:64px !important;padding-bottom:64px !important}
  main [style*="padding:96px 32px"]{padding-top:60px !important;padding-bottom:60px !important}
  main [style*="padding:74px 32px 96px"]{padding-top:28px !important;padding-bottom:56px !important}
  main [style*="padding:70px 32px 96px"]{padding-top:24px !important;padding-bottom:56px !important}

  /* large inner horizontal paddings (match unspaced + JS-serialized spaced forms) */
  main [style*="padding:78px 64px"],main [style*="padding: 78px 64px"]{padding:44px 24px !important}
  main [style*="padding:40px 44px"],main [style*="padding: 40px 44px"]{padding:30px 22px !important}
  main [style*="padding:44px 40px"],main [style*="padding: 44px 40px"]{padding:30px 22px !important}
  main [style*="padding:36px 40px"],main [style*="padding: 36px 40px"]{padding:26px 22px !important}

  /* hero visual card: a touch shorter */
  main [style*="height:520px"],main [style*="height: 520px"]{height:440px !important}

  /* comparison table fits a phone column */
  main table{font-size:13px !important}
  main table th,
  main table td{padding-left:10px !important;padding-right:10px !important}
  main table th:first-child,
  main table td:first-child{padding-left:16px !important}
}