/* responsive.css - breakpoints */
@media (max-width:820px){
  .grid--4{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr;gap:28px}
  .trust{grid-template-columns:1fr 1fr}
  .trust__item:nth-child(2){border-right:0}
  .trust__item:nth-child(1),.trust__item:nth-child(2){border-bottom:.5px solid var(--line)}
  .site-footer .container{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  /* the bottom bar wraps to two lines here, so it needs more clearance */
  body{padding-bottom:72px}
  .nav{
    position:fixed;inset:0 0 0 auto;width:min(80vw,300px);
    flex-direction:column;align-items:flex-start;gap:22px;
    background:var(--bg);border-left:.5px solid var(--line);
    padding:80px 28px;transform:translateX(100%);transition:transform .28s ease;z-index:60;
  }
  .nav[data-open="true"]{transform:translateX(0)}
  .nav .btn{width:100%;text-align:center}
  /* dropdown becomes an inline accordion inside the off-canvas panel */
  .nav__group{width:100%}
  .nav__trigger{width:100%;justify-content:space-between}
  .nav .nav__menu{
    position:static;transform:none;opacity:1;visibility:visible;
    min-width:0;padding:0;background:none;border:0;box-shadow:none;
    max-height:0;overflow:hidden;transition:max-height .28s ease;
  }
  .nav .nav__menu[data-open="true"]{max-height:400px;transform:none}
  .nav__menu a{padding:9px 0 9px 14px}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;z-index:70;color:var(--ink)}
  .nav-toggle svg{width:28px;height:28px;stroke-width:1.1}
  /* hero: larger headline, smaller supporting line on phones */
  .hero h1{font-size:32px;line-height:1.1}
  .hero .lede{font-size:13.5px}
  .hero .btn-row,.cta .btn-row,.tphero .btn-row{flex-direction:column}
  .hero .btn,.cta .btn,.tphero .btn{width:100%;text-align:center}
  .grid--4{grid-template-columns:1fr}
  .grid--2{grid-template-columns:1fr}
  .trust{grid-template-columns:1fr 1fr}
  .site-footer .container{grid-template-columns:1fr}
  .imgband{margin-inline:var(--gutter);height:170px}
}