/* =====================================================================
   biztechmgt.com — universal responsive layer
   Loads AFTER the inline <style> blocks, so equal-specificity rules win.
   Fixes: mobile horizontal overflow, Chrome font-boosting, header/H1
   collision, fixed hero height, tablet gap, big-screen dead space.
   Safe: additive only. Delete this file + its <link> to fully revert.
   ===================================================================== */

/* ---------- 1. GLOBAL GUARDS (all devices) ---------- */

html{
  -webkit-text-size-adjust:100%;      /* stops Chrome-Android font boosting */
  text-size-adjust:100%;
}

*,*::before,*::after{box-sizing:border-box}

body{
  overflow-x:clip;                    /* clip, not hidden: keeps sticky working */
  max-width:100%;
}

/* flex/grid children default to min-width:auto and refuse to shrink */
.wrap > *, .nav > *, .nav__right > *, .sticky__in > *, .sticky__r > *,
.hero__in > *, .foot__top > *, .hero__row > *{ min-width:0 }

img,svg,video,canvas,iframe{max-width:100%;height:auto}
pre,table{max-width:100%;overflow-x:auto}

/* long URLs / unbroken strings never push the page wide */
p,li,h1,h2,h3,h4,h5,td,th,summary,a{overflow-wrap:anywhere}

/* decorative SVG scenes must never create scroll */
.hero__scene,.hero__scene svg{max-width:100%}

/* ---------- 2. FLUID CONTAINER ---------- */

:root{ --maxw:1240px; --gutter:clamp(16px,4vw,28px); }

.wrap,.sticky__in{
  width:100%;
  max-width:var(--maxw);
  padding-left:var(--gutter);
  padding-right:var(--gutter);
  margin-inline:auto;
}

/* ---------- 3. FLUID TYPE (scales every screen, no jumps) ---------- */

.hero h1   { font-size:clamp(27px,7.2vw,66px); line-height:1.08; letter-spacing:-.015em }
.hero__sub { font-size:clamp(15px,3.6vw,18px); max-width:58ch }
.sh h2     { font-size:clamp(24px,5.2vw,48px); line-height:1.15 }
.sh p      { font-size:clamp(15px,3.4vw,17px) }
.cap h2    { font-size:clamp(24px,4.6vw,44px); line-height:1.15 }
.cap p.lead{ font-size:clamp(15px,3.4vw,17px) }
.part h2   { font-size:clamp(23px,4.4vw,42px); line-height:1.16 }
.part p    { font-size:clamp(15px,3.4vw,16.5px) }
.faq__h h2 { font-size:clamp(24px,5vw,46px); line-height:1.15 }
.qa summary{ font-size:clamp(15px,3.6vw,17px) }
.qa__a     { font-size:clamp(14px,3.3vw,15px); max-width:100% }
.capbox .big{ font-size:clamp(28px,6.4vw,46px) }
.hero__stats .s b{ font-size:clamp(22px,5.4vw,32px) }
.pcard__head h3{ font-size:clamp(20px,4.4vw,26px) }
.pcard__head p { font-size:clamp(13.5px,3.2vw,14.5px); max-width:100% }
.tcard h4  { font-size:clamp(18px,4vw,22px) }
.biz h3    { font-size:clamp(18px,4vw,22px) }
.sticky__l { font-size:clamp(14px,3.4vw,20px) }

/* nothing below 12px anywhere (readability + Lighthouse) */
.inc p,.biz p,.foot__brand p,.fcol a,.disc,.capbox .pillar span,
.hero__stats .s span,.biz__meta .ready{ font-size:max(12.5px,1em) }
.disc{font-size:12.5px}

/* ---------- 4. HEADER — stop the logo/H1 collision ---------- */

.nav{position:absolute;top:0;left:0;right:0;z-index:40}
.nav .wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:nowrap;
}
.brand{flex:0 1 auto;min-width:0;align-items:center}
.brand b{
  font-size:clamp(13px,3.2vw,17px);
  line-height:1.15;
  display:block;
}
.mark{flex:none;width:clamp(26px,7vw,34px);height:clamp(26px,7vw,34px)}
.nav__right{flex:none;gap:10px}
.nav__burger{flex:none;min-width:44px;min-height:44px;display:none}

/* ---------- 5. HERO — height follows content, never a fixed 840px ---------- */

.hero{
  min-height:min(840px,100svh);
  align-items:center;
}
.hero__in{
  max-width:900px;
  padding-top:clamp(104px,24vw,120px);
  padding-bottom:clamp(56px,14vw,96px);
}

/* ---------- 6. STICKY BOTTOM BAR — a repeat overflow source ---------- */

.sticky__in{flex-wrap:nowrap;gap:12px}
.sticky__l{min-width:0;overflow:hidden}
.sticky__r{flex:none;gap:12px;min-width:0}
.sticky .btn{padding:12px 18px;font-size:clamp(13px,3.2vw,15px)}

/* ---------- 7. BUTTONS & TAP TARGETS (WCAG 2.5.5) ---------- */

.btn{min-height:44px;white-space:nowrap}
.nav__links a,.fcol a,.nav__right .login{
  min-height:44px;display:flex;align-items:center;
}
.fcol a{display:block;padding-block:9px;margin-bottom:0}
.qa summary{min-height:48px}

/* ---------- 8. FOOTER ---------- */

.foot__top{grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:clamp(22px,4vw,34px)}
.nlform{min-width:0;flex:1 1 260px;max-width:540px}
.nlform input{min-width:0}

/* =====================================================================
   BREAKPOINTS
   ===================================================================== */

/* ---- BIG SCREENS: 1600px+ — stop the empty-margin look ---- */
@media (min-width:1600px){
  :root{--maxw:1440px;--gutter:40px}
  .hero__in{max-width:1040px}
  .sec{padding:120px 0}
}
@media (min-width:2000px){
  :root{--maxw:1600px}
  .hero{min-height:min(920px,86svh)}
  .sec{padding:132px 0}
}

/* ---- LAPTOP: 1041–1439 ---- */
@media (min-width:1041px) and (max-width:1439px){
  :root{--gutter:26px}
  .hero{min-height:min(780px,100svh)}
  .hero__stats{gap:clamp(24px,3.4vw,50px)}
}

/* ---- TABLET LANDSCAPE / SMALL LAPTOP: 901–1040 ---- */
@media (max-width:1040px){
  .nav__burger{display:block}
  .hero{min-height:auto}
  .hero__in{padding-top:clamp(112px,16vw,132px)}
  .cat,.tri,.incl{gap:18px}
  .sec{padding:84px 0}
}

/* ---- TABLET PORTRAIT: 681–900 (the gap that had no rules) ---- */
@media (max-width:900px){
  .incl{grid-template-columns:repeat(2,1fr)}
  .cat{grid-template-columns:repeat(2,1fr)}
  .tri{grid-template-columns:repeat(2,1fr)}
  .foot__top{grid-template-columns:repeat(3,1fr)}
  .hero__stats{gap:clamp(20px,4vw,40px)}
  .part{padding:clamp(28px,5vw,40px)}
  .pcard__head{padding:26px 26px 30px}
  .sec{padding:76px 0}
}

/* ---- MOBILE: ≤680 ---- */
@media (max-width:680px){
  .sec{padding:clamp(48px,12vw,72px) 0}
  .incl,.cat,.tri{grid-template-columns:1fr}
  .foot__top{grid-template-columns:1fr 1fr}
  .hero__stats{gap:22px 28px}
  .hero__row{gap:12px}
  .hero__row .btn{flex:1 1 100%}
  .sticky__meta{display:none}
  .nlform{flex-wrap:wrap}
  .nlform input{border-right:1px solid var(--line-2);border-radius:8px;flex:1 1 180px}
  .nlform button{border-radius:8px;flex:0 0 auto}
  .proc__nav{gap:8px}
  .pcard__head{padding:22px 20px 26px}
  .biz{padding:20px}
  .biz p{min-height:0}
  .qa summary{padding:18px 18px}
  .qa__a{padding:0 18px 20px}
}

/* ---- SMALL PHONES: ≤480 — where the overflow actually bit ---- */
@media (max-width:480px){
  .nav .wrap{padding-top:14px;padding-bottom:14px}
  .nav__right .btn{padding:11px 14px;font-size:13px}
  .brand b span{display:none}        /* drops the "Inc" line, kills 3-line wrap */
  .hero__in{padding-top:clamp(96px,26vw,116px)}
  .foot__top{grid-template-columns:1fr}
  .sticky__l{font-size:13.5px;line-height:1.25}
  .sticky .btn{padding:11px 14px}
  .proc__item{padding:9px 12px}
}

/* ---- TINY PHONES: ≤390 — Get-the-Catalog button was the overflow ---- */
@media (max-width:390px){
  .nav__right .btn{display:none}     /* CTA lives in the burger menu + hero */
  .brand b{font-size:12.5px}
  .mark{width:24px;height:24px;gap:2px}
  .sticky__in{gap:10px}
}

/* ---- LANDSCAPE PHONES: short viewports ---- */
@media (max-height:520px) and (orientation:landscape){
  .hero{min-height:auto}
  .hero__in{padding-top:92px;padding-bottom:48px}
  .sticky{position:static}
  body{padding-bottom:0}
}

/* ---- PRINT ---- */
@media print{
  .nav,.sticky,.hero__scene,.hero__overlay{display:none!important}
  body{background:#fff;color:#000;padding-bottom:0}
  .sec{padding:18px 0}
}