/* Amplifia v1.5 responsive layer.
 * Desktop design remains unchanged; rules below harden tablet/mobile layouts.
 */
html,body{max-width:100%;overflow-x:hidden}
#root{width:100%;max-width:100%;overflow-x:clip}
.amp-wrap,.amp-block,.amp-hsplit,.amp-foot,.amp-nav{min-width:0}
.amp-menu-toggle{display:none;width:46px;height:46px;padding:0;border:1px solid #DFE3E8;border-radius:4px;background:#fff;align-items:center;justify-content:center;flex-direction:column;gap:5px;cursor:pointer;flex:0 0 auto;position:relative;z-index:302;-webkit-tap-highlight-color:transparent}
.amp-menu-toggle>span{display:block;width:21px;height:1.5px;background:#151A22;border-radius:2px;transition:transform .2s ease,opacity .2s ease}
.amp-menu-toggle.is-open>span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.amp-menu-toggle.is-open>span:nth-child(2){opacity:0}
.amp-menu-toggle.is-open>span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.amp-menu-toggle:focus-visible{outline:2px solid #0072BC;outline-offset:2px}
.amp-icp-link:hover,.amp-icp-link:focus-visible{color:#0072BC!important;text-decoration:underline!important;text-underline-offset:3px}

@media(max-width:1000px){
  .amp-nav{height:84px!important;min-height:84px!important;flex-wrap:nowrap!important;padding-top:0!important;padding-bottom:0!important;gap:16px!important;position:relative}
  .amp-logo{height:64px!important;max-width:min(58vw,260px)!important;object-fit:contain}
  .amp-menu-toggle{display:inline-flex}
  .amp-nav-links{display:none!important;position:absolute;top:calc(100% - 1px);left:40px;right:40px;width:auto!important;max-height:calc(100dvh - 110px);overflow-y:auto;overscroll-behavior:contain;flex-direction:column!important;align-items:stretch!important;gap:0!important;padding:8px;background:rgba(255,255,255,.98);border:1px solid #DFE3E8;border-radius:0 0 6px 6px;box-shadow:0 16px 36px rgba(11,16,23,.14);z-index:301}
  .amp-nav-links.is-open{display:flex!important}
  .amp-nav-links a{display:block!important;width:100%!important;padding:12px 14px!important;font-size:15px!important;line-height:1.35!important;white-space:normal!important;border-bottom:1px solid #EDEFF2;text-align:left}
  .amp-nav-links a span{display:none!important}
  .amp-nav-links>button{width:100%!important;max-width:none!important;margin:10px 0 0!important;min-height:46px!important;height:auto!important;padding:13px 16px!important;white-space:normal!important}
}

@media(max-width:760px){
  #root{zoom:1!important}
  .amp-wrap{padding-left:20px!important;padding-right:20px!important}
  .amp-nav{padding-left:20px!important;padding-right:20px!important;height:76px!important;min-height:76px!important}
  .amp-nav-links{left:20px;right:20px;max-height:calc(100dvh - 96px)}
  .amp-logo{height:56px!important;max-width:min(62vw,235px)!important}

  .amp-block{padding-top:60px!important;padding-bottom:60px!important}
  .amp-hsplit{padding-left:20px!important;padding-right:20px!important;min-height:0!important}
  .amp-hcopy{padding:44px 0 34px!important}
  .amp-hcopy-in{width:100%!important;max-width:100%!important}
  .amp-hphoto{height:clamp(300px,92vw,390px)!important}
  .amp-hphoto img{inset:16px 0!important;height:calc(100% - 32px)!important;max-width:100%!important}

  #root *{min-width:0}
  #root img{max-width:100%}
  #root h1,#root h2,#root h3,#root h4,#root p,#root label,#root a{max-width:100%;overflow-wrap:anywhere;word-break:normal}
  #root [style*="white-space: nowrap"]:not(button){white-space:normal!important}
  #root input,#root select,#root textarea{max-width:100%!important;width:100%;font-size:16px!important}
  #root button{max-width:100%}
  #root button:not(.amp-menu-toggle){white-space:normal!important;height:auto!important;min-height:44px!important;padding-top:12px!important;padding-bottom:12px!important;line-height:1.25!important}

  #root h1{font-size:clamp(29px,8.2vw,38px)!important;line-height:1.16!important;letter-spacing:-.025em!important}
  .amp-h2,#root h2{font-size:clamp(28px,7.4vw,36px)!important;line-height:1.25!important}
  .amp-h3,#root h3{font-size:clamp(19px,5.3vw,23px)!important;line-height:1.42!important}
  .amp-stat-value,.amp-metric-value{font-size:clamp(42px,14vw,64px)!important;line-height:.98!important}
  .amp-metric-unit{font-size:clamp(15px,4.5vw,20px)!important}
  #root div[style*="letter-spacing: 0.12em"]{white-space:normal!important;overflow-wrap:anywhere}

  .amp-hero,.amp-arch,.amp-split2,.amp-ev,.amp-value,.amp-cap,.amp-pair2,.amp-pair3,.amp-nodes,.amp-gates,.amp-two,.amp-q,.amp-pain,.amp-chain,.amp-less,.amp-less-light,.amp-labor,.amp-stats,.amp-bill,.amp-four,.amp-mag-stats,.amp-spec-row,.amp-shift,.amp-metric3{grid-template-columns:1fr!important}
  .amp-pain-core{grid-column:auto!important;grid-row:auto!important}
  .amp-shift-to{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .amp-ev-item{grid-template-columns:1fr!important;gap:22px!important}
  .amp-ev-img{width:100%!important;max-width:300px!important;margin-left:auto!important;margin-right:auto!important}
  .amp-hero-img{width:100%!important;max-width:440px!important;margin-left:auto!important;margin-right:auto!important}
  .amp-cta{align-items:stretch!important;gap:24px!important}
  .amp-cta>div{width:100%}
  .amp-flow{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .amp-foot{gap:32px!important}
  .amp-foot-cols{grid-template-columns:1fr 1fr!important;gap:28px 22px!important}
  .amp-logo-foot{max-width:min(78vw,280px)!important;height:auto!important}
}

@media(max-width:560px){
  .amp-wrap{padding-left:18px!important;padding-right:18px!important}
  .amp-nav{padding-left:18px!important;padding-right:18px!important}
  .amp-nav-links{left:18px;right:18px}
  .amp-logo{height:52px!important;max-width:min(65vw,220px)!important}
  .amp-menu-toggle{width:44px;height:44px}
  .amp-block{padding-top:52px!important;padding-bottom:52px!important}
  .amp-hsplit{padding-left:18px!important;padding-right:18px!important}
  .amp-hphoto{height:clamp(280px,92vw,350px)!important}
  .amp-pairsq,.amp-pairtall{grid-template-columns:1fr!important;gap:16px!important;max-width:420px;margin-left:auto!important;margin-right:auto!important}
  .amp-shift-to{grid-template-columns:1fr!important}
  .amp-foot-cols{grid-template-columns:1fr!important;gap:26px!important}
  .amp-cta button{width:100%!important}
  #root h1 br{display:none}
}

@media(max-width:380px){
  .amp-wrap{padding-left:16px!important;padding-right:16px!important}
  .amp-nav{padding-left:16px!important;padding-right:16px!important}
  .amp-nav-links{left:16px;right:16px}
  .amp-logo{height:48px!important;max-width:64vw!important}
  #root h1{font-size:28px!important}
  .amp-h2,#root h2{font-size:27px!important}
}

/* v1.6 — fluid desktop/laptop hardening
 * Covers common 20–24 inch displays, browser zoom and OS scaling where the
 * viewport sits between mobile/tablet and a very wide desktop.
 */
#root h1,#root h2,#root h3,#root h4,#root p{overflow-wrap:break-word}

@media (min-width:1181px) and (max-width:1900px){
  /* Prevent long hero copy from intruding into the product-image column. */
  .amp-hcopy-in{max-width:100%!important}
  .amp-hcopy h1{max-width:100%!important;text-wrap:balance!important}
  .amp-hcopy h1 span{white-space:normal!important}
  .amp-hcopy{padding-right:clamp(28px,3vw,52px)!important}
  .amp-hphoto img{max-width:100%!important}
}

@media (min-width:1181px) and (max-width:1600px){
  /* Compact-desktop tuning for 1366/1440/1536/1600 CSS-pixel viewports. */
  .amp-nav{height:104px!important}
  .amp-logo{height:76px!important}
  .amp-nav-links a{font-size:14px!important;padding-left:8px!important;padding-right:8px!important}
  .amp-nav-links>button{margin-left:6px!important}
  .amp-hcopy{padding-top:58px!important;padding-bottom:58px!important}
  .amp-hcopy h1{font-size:clamp(30px,2.35vw,38px)!important;line-height:1.13!important}
  .amp-hcopy p{font-size:17px!important}
  .amp-oneline{white-space:normal!important}
}

/* Switch to the burger earlier than phone-only widths. This prevents the long
   EN/CN navigation plus CTA from colliding on tablets and small laptops. */
@media(max-width:1180px){
  .amp-nav{height:84px!important;min-height:84px!important;flex-wrap:nowrap!important;padding-top:0!important;padding-bottom:0!important;gap:16px!important;position:relative}
  .amp-logo{height:64px!important;max-width:min(58vw,260px)!important;object-fit:contain}
  .amp-menu-toggle{display:inline-flex!important}
  .amp-nav-links{display:none!important;position:absolute;top:calc(100% - 1px);left:40px;right:40px;width:auto!important;max-height:calc(100dvh - 110px);overflow-y:auto;overscroll-behavior:contain;flex-direction:column!important;align-items:stretch!important;gap:0!important;padding:8px;background:rgba(255,255,255,.98);border:1px solid #DFE3E8;border-radius:0 0 6px 6px;box-shadow:0 16px 36px rgba(11,16,23,.14);z-index:301}
  .amp-nav-links.is-open{display:flex!important}
  .amp-nav-links a{display:block!important;width:100%!important;padding:12px 14px!important;font-size:15px!important;line-height:1.35!important;white-space:normal!important;border-bottom:1px solid #EDEFF2;text-align:left}
  .amp-nav-links a span{display:none!important}
  .amp-nav-links>button{width:100%!important;max-width:none!important;margin:10px 0 0!important;min-height:46px!important;height:auto!important;padding:13px 16px!important;white-space:normal!important}
}
