/* Responsive layer for the Beacon Automation site.
   The page markup uses inline styles from the design canvas; these rules adapt it
   for wide screens, tablets and phones. */
html{scroll-behavior:smooth}
*{box-sizing:border-box}
img,svg{max-width:100%}

/* Wide screens: keep content at a 1200px measure, centered */
@media (min-width:1441px){
  .page > nav, .page > section, .page > footer{
    padding-left:calc((100% - 1200px) / 2) !important;
    padding-right:calc((100% - 1200px) / 2) !important;
  }
}

/* Small laptops / tablets landscape */
@media (max-width:1240px){
  .page > nav, .page > section, .page > footer{padding-left:48px !important;padding-right:48px !important}
}

/* Tablets: stack side-by-side layouts */
@media (max-width:1100px){
  nav .nl{display:none}
  .page > section[style*="display:flex"]{flex-direction:column !important;align-items:stretch !important}
  [style*="justify-content:space-between;align-items:flex-end"]{flex-direction:column !important;align-items:flex-start !important;gap:24px !important}
  [style^="width:680px"],[style^="width:540px"],[style^="width:400px"],[style^="width:800px"]{width:auto !important;max-width:800px}
  [style*="repeat(4,"],[style*="repeat(3,"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  section[style*="grid-template-columns:minmax"]{grid-template-columns:1fr !important}
  .row{grid-template-columns:1fr !important;gap:16px !important}
  [style*="gap:80px"]{gap:48px !important}
  footer > div:last-child{flex-direction:column !important;gap:24px !important}
  footer > div:last-child > div{flex-wrap:wrap;white-space:normal !important}
  [style^="display:flex;gap:16px"]{flex-wrap:wrap}
}

/* Phones */
@media (max-width:640px){
  .page > nav{padding-left:20px !important;padding-right:20px !important;height:72px !important}
  .page > section, .page > footer{padding-left:20px !important;padding-right:20px !important}
  .page > section[style*="padding:160px"]{padding-top:88px !important;padding-bottom:64px !important}
  .sec{padding-top:72px !important;padding-bottom:72px !important}
  .page > footer{padding-top:56px !important;padding-bottom:56px !important}
  h1.h{font-size:44px !important;margin-top:20px !important}
  h2.h{font-size:32px !important}
  p.h[style*="font-size:56px"]{font-size:44px !important}
  [style*="grid-template-columns"]{grid-template-columns:1fr !important}
  [style*="margin-top:80px"]{margin-top:40px !important}
  [style*="gap:80px"]{gap:40px !important}
  .card[style*="padding:48px"]{padding:28px !important}
  .card[style*="padding:40px"]{padding:28px !important}
  .btn{white-space:normal;text-align:center;min-height:56px;height:auto !important;padding-top:14px !important;padding-bottom:14px !important}
  nav .btn{min-height:44px;padding:10px 16px !important;font-size:14px}
  [style^="display:flex;gap:16px"] .btn{width:100%}
  .doc h2{font-size:24px !important;margin-top:48px !important}
}