/* Track2Map — responsive.css. Breakpoints: 1024, 760, 480. */

@media (max-width: 1024px){
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  
  .contact-grid{ grid-template-columns:1fr; gap:2.5rem; }
  .twocol{ gap:2.5rem; }
}

@media (max-width: 760px){
  :root{ --section: 3.4rem; }
  /* the phone would be a thumbnail beside the console at this width, so give
     each its own row and let the phone sit at a readable size */
  .shot__pair{ flex-direction:column; align-items:center; gap:1.6rem; }
  .shot__phone{ flex:0 0 auto; width:min(58%, 230px); }
  .s-head--row{ flex-direction:column; align-items:flex-start; gap:1.2rem; }
  .privacy{ padding:1.3rem 1.2rem; }
  .privacy__claims{ grid-template-columns:1fr 1fr; }
  .dom{ flex:0 0 80vw; width:80vw; min-height:400px; }
  .dom.is-open{ flex-basis:80vw; width:80vw; }
  .nav{ gap:1rem; }
  .nav .nav-link{ display:none; }
  .grid-3,.grid-2,.people{ grid-template-columns:1fr; }
  .qrow{ grid-template-columns:repeat(2,1fr); }
  .hero h1{ max-width:none; }
  .hero .cta-row .btn{ width:100%; justify-content:center; }
  .site-foot .shell{ flex-direction:column; align-items:flex-start; }
}

@media (max-width: 480px){
  .qrow{ grid-template-columns:1fr; }
  .privacy__claims{ grid-template-columns:1fr; }
  .card{ padding:1.35rem 1.25rem; }
  .person{ gap:.9rem; }
}

@media print{
  .site-head,.site-foot,.cta-row,.form{ display:none; }
  body{ background:#fff; }
}