/* 2026-10-30 phone + tablet pass for the public marketing pages.
   Everything here is inside max-width media queries, so desktop (>1024px) is unchanged.
   Goal: headline, one-line value prop and the main CTA in the first phone screen; no oversized boxes. */

/* ---------- Tablet + phone (<=1024px) ---------- */
@media (max-width:1024px){
  /* Contact / quote pages: the headline + intro come before the form, not after it */
  .site-main .builder-column:has(>.builder-form-section)>.builder-text-section{order:-1}
  .site-main .builder-container-section[style*="padding-top:80px"],
  .site-main .builder-container-section[style*="padding-top:96px"]{padding-top:56px!important}
  .site-main .builder-container-section[style*="padding-bottom:80px"],
  .site-main .builder-container-section[style*="padding-bottom:96px"]{padding-bottom:56px!important}
  /* home hero: no need to fill 78% of a tall tablet screen */
  .site-main .bdm-r section[style*="url("]{min-height:0!important;padding-top:72px!important;padding-bottom:64px!important}
}

/* ---------- Small tablet / large phone landscape (601-768px): 2 columns where it fits ---------- */
@media (min-width:601px) and (max-width:768px){
  .site-main .bdm-r [data-bdm-grid]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .site-main .builder-cols-3,.site-main .builder-cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- Phone + small tablet (<=768px) ---------- */
@media (max-width:768px){
  /* compact sticky header */
  .site-header-inner{min-height:58px}
  .site-logo img{max-height:46px!important;width:auto!important}
  .mobile-menu-button{min-width:44px;min-height:44px}
  .header-client-login{min-height:44px;display:inline-flex;align-items:center}
  .site-navigation{top:58px}

  /* section padding: 60-96px blocks -> 32px */
  .site-main .builder-container-section[style*="padding-top"]{padding-top:32px!important}
  .site-main .builder-container-section[style*="padding-bottom"]{padding-bottom:32px!important}
  .site-main .builder-inner{gap:16px}

  /* hero: short, headline + value prop + CTA all on screen 1 */
  .site-main .bdm-r section[style*="url("]{min-height:0!important;padding:28px 16px 30px!important}
  .site-main .bdm-r section[style*="url("] h2:first-child{font-size:13px!important;margin-bottom:10px!important}
  .site-main .bdm-r section[style*="url("] h1,
  .site-main .bdm-r section[style*="url("] h1.bdm-h1-as-h2{font-size:28px!important;margin-bottom:12px!important;font-weight:400!important}
  .site-main .bdm-r section[style*="url("] h1~h2{font-size:16px!important;line-height:1.45!important;margin-bottom:14px!important}
  .site-main .bdm-r section[style*="url("] a[href]{margin-top:4px!important;padding:14px 24px!important;font-size:16px!important}
  /* hero-only banners with just the brand name (contact, quote): keep, but slim */
  .site-main .bdm-r:first-child>section[style*="url("]:not(:has(h1,a)){padding:22px 16px!important}

  /* smaller text that the old 1.75rem rule blew up (eyebrows / sub-heads written at 13-20px) */
  .site-main h2[style*="font-size:13px"],.site-main h2[style*="font-size:14px"],.site-main h2[style*="font-size:15px"],
  .site-main h2[style*="font-size:16px"],.site-main h2[style*="font-size:17px"],.site-main h2[style*="font-size:18px"],
  .site-main h2[style*="font-size:19px"],.site-main h2[style*="font-size:20px"]{font-size:1.02rem!important;letter-spacing:.02em!important;line-height:1.5!important}
  .site-main h2[style*="font-size:55px"],.site-main h2[style*="font-size:4"],.site-main h2[style*="font-size:5"]{font-size:1.6rem!important}
  .site-main h4[style*="font-size:1.6rem"][style*="uppercase"]{font-size:.95rem!important}

  /* home industry tiles: 2 small tiles per row instead of 8 tall full-width boxes */
  .site-main .bdm-r [data-bdm-grid].bdm-ind-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px}
  .bdm-ind-tile{padding:14px 10px!important;border-radius:12px}
  .bdm-ind-tile>div:first-child{width:42px!important;height:42px!important;margin-bottom:8px!important}
  .bdm-ind-tile>div:first-child span,.bdm-ind-tile>div:first-child svg{width:20px!important;height:20px!important}
  .site-main .bdm-ind-tile h3[style*="font-size"]{font-size:15px!important;margin-bottom:4px!important}
  .bdm-ind-tile p{font-size:13px!important;line-height:1.4}

  /* content cards (steps, callouts): less padding, normal-size text */
  .site-main .bdm-r [data-bdm-grid]{row-gap:12px!important;column-gap:12px!important}
  .site-main .bdm-r div[style*="padding-block-start:2rem"],.site-main .bdm-r div[style*="padding-block-start:3rem"]{padding:16px!important;row-gap:6px!important}
  .site-main .bdm-r div[style*="padding-block-start"] h3[style*="font-size"],
  .site-main .bdm-r div[style*="padding-block-start"] h4[style*="font-size"]{font-size:1.15rem!important;margin:0!important}
  .site-main .bdm-r div[style*="padding-block-start"] p[style*="font-size"]{font-size:1rem!important;margin:0!important}
  .site-main .bdm-r a[style*="font-size:1.95rem"]{font-size:1.05rem!important;padding:13px 22px!important;min-height:44px}
  /* large purely decorative icons inside cards (e.g. the compliance scale) */
  .site-main .bdm-r div[style*="padding-block-start"]>div:first-child svg{width:56px!important;height:56px!important}

  /* tall images: cap them so a photo never fills the whole screen */
  .site-main .builder-image{max-height:300px;width:auto;margin-left:auto;margin-right:auto;object-fit:contain}

  /* tap targets */
  .site-main .builder-button{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .site-main .builder-button-section .builder-container a{min-height:44px}
  .site-footer a,.site-footer-legal a{display:inline-flex;align-items:center;min-height:44px}
  .site-footer-inner{padding:20px 0!important}
}

@media (max-width:380px){
  .site-main .bdm-r section[style*="url("] h1,.site-main .bdm-r section[style*="url("] h1.bdm-h1-as-h2{font-size:25px!important}
}

/* 2026-10-30 batch 2 */
.bdm-contact-short{display:none}
@media (max-width:1024px){
  /* contact: short intro instead of the long paragraph (desktop keeps the full text) */
  .site-main div:has(>.bdm-contact-short){font-size:0!important;line-height:0}
  .site-main div:has(>.bdm-contact-short)>h1{font-size:1.75rem;line-height:1.2}
  .site-main div:has(>.bdm-contact-short)>*:not(h1):not(.bdm-contact-short){display:none!important}
  .site-main .bdm-contact-short{display:block;font-size:16px;line-height:1.5;margin:8px 0 0}
}
@media (max-width:768px){
  /* slimmer bottom bar; body padding so it never hides the end of the page */
  body{padding-bottom:calc(60px + env(safe-area-inset-bottom))!important}
  .mobile-cta-bar{padding:6px 8px calc(6px + env(safe-area-inset-bottom))!important;gap:6px!important}
  .mobile-cta-bar a{min-height:44px!important;font-size:14px!important;border-radius:9px!important}
  /* smaller chat bubble sitting just above the bar, not on it */
  body #ar-wrapper .ar-bubble{width:48px!important;height:48px!important;bottom:calc(66px + env(safe-area-inset-bottom))!important;right:12px!important}
  body #ar-wrapper .ar-bubble svg{width:22px;height:22px}
  body #ar-wrapper .ar-popup{bottom:calc(122px + env(safe-area-inset-bottom))!important}
}