/* =========================================================
   V94 — Mobile-first responsive layer
   Loaded after the existing site styles so all established
   desktop design/content stays intact while phone/tablet
   layouts are deliberately optimized.
   ========================================================= */

/* Universal responsive safety */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-wrap:anywhere}
img,svg,video,canvas{max-width:100%;height:auto}
iframe{max-width:100%}
input,select,textarea,button{font-size:16px}

@media (max-width:1100px){
  /* Page rhythm and readable line lengths */
  .container,
  .container.intellicore-intro{
    width:min(var(--max),calc(100% - 32px)) !important;
  }
  main{overflow:hidden}
  .section{padding:60px 0}
  .pagehero{padding:48px 0 32px}
  .pagehero h1,.hero h1{font-size:clamp(2.35rem,8vw,4rem);line-height:1;letter-spacing:-.045em}
  .section h2{font-size:clamp(2rem,6.2vw,3.15rem);line-height:1.06}
  .section h3{line-height:1.2}
  .lead{font-size:1.08rem;line-height:1.58;max-width:100%}
  p,li,.check{line-height:1.58}
  .section-head{display:block;margin-bottom:26px}
  .section-head>.cta{margin-top:18px}

  /* Mobile/tablet navigation */
  .topbar{position:sticky;top:0;z-index:1000}
  .nav{height:74px;gap:14px;position:relative}
  .brand{min-width:0}
  .brand img{height:50px;max-width:205px;width:auto;object-fit:contain}
  .hamb{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    min-width:46px;
    min-height:46px;
    margin-left:auto;
    padding:9px 13px;
    border-radius:9px;
    font-size:.92rem;
    cursor:pointer;
  }
  .header-contact{display:none !important}
  .menu{
    display:none !important;
    position:absolute !important;
    top:74px !important;
    left:-16px !important;
    right:-16px !important;
    width:auto !important;
    max-height:calc(100dvh - 74px);
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:12px 16px 22px !important;
    margin:0 !important;
    background:#fff;
    border:0 !important;
    border-bottom:1px solid var(--lp-line,#e7e8e4) !important;
    border-radius:0 !important;
    box-shadow:0 18px 32px rgba(16,18,20,.12) !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:2px !important;
  }
  .menu.open{display:flex !important}
  .dropdown{display:block !important;padding:0 !important;margin:0 !important}
  .menu>a,.dropbtn{
    display:flex !important;
    width:100% !important;
    min-height:48px;
    align-items:center;
    justify-content:space-between;
    padding:12px 8px !important;
    font-size:1rem !important;
    border-radius:8px !important;
  }
  .dropbtn:after{display:block !important;content:"+" !important;font-size:1.15rem;line-height:1;color:#59605c}
  .dropdown.open>.dropbtn:after{content:"−" !important}
  .dropdown-content,
  .dropdown-content.mega,
  .dropdown-content.mega.support-mega{
    display:none !important;
    position:static !important;
    top:auto !important;
    left:auto !important;
    transform:none !important;
    width:100% !important;
    min-width:0 !important;
    margin:0 0 8px !important;
    padding:4px 0 6px 12px !important;
    border:0 !important;
    border-left:2px solid var(--lp-green,#93c52b) !important;
    border-radius:0 !important;
    box-shadow:none !important;
    background:transparent !important;
    grid-template-columns:1fr !important;
    gap:6px !important;
  }
  .dropdown.open>.dropdown-content{display:block !important}
  .dropdown.open>.dropdown-content.mega{display:grid !important}
  .dropdown-content a{min-height:44px;display:flex;align-items:center;padding:10px 12px !important;font-size:.95rem}
  .mega-group h4{margin:8px 0 2px;padding:0 12px}

  /* All common multi-column layouts collapse cleanly */
  .grid,
  .split,
  .configurator,
  .spec-grid,
  .beam-grid,
  .datasheet-preview,
  .function-grid,
  .approval-grid,
  .cyber-grid,
  .security-grid,
  .problem-grid,
  .protocol-grid,
  .how-step-wrap,
  .how-step-wrap.reverse,
  .intellicore-intro,
  .intellilight-intro{
    grid-template-columns:1fr !important;
  }
  .grid,.split,.intellicore-intro,.intellilight-intro{gap:30px !important}
  .cards,.cards.two,.cards.three,.cards.four{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .protocol-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .logos{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .feature-list{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .footer .cols{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:28px 22px}

  /* Cards / touch spacing */
  .card,.config-panel,.spec-block,.function-card,.approval-card,.how-step-text{padding:22px}
  .bank{padding:16px}
  .cta{min-height:46px}
  .hero-actions{gap:12px}
  .check{min-width:0}

  /* Home page: mobile/tablet hero remains the same design, but becomes usable */
  .hero.lp-home-hero{
    width:calc(100% - 24px) !important;
    margin:12px auto 0 !important;
    min-height:auto !important;
    border-radius:16px !important;
  }
  .hero.lp-home-hero::before{
    background-size:auto 47% !important;
    background-position:58% bottom !important;
  }
  .hero.lp-home-hero::after{
    background:linear-gradient(180deg,rgba(250,250,248,1) 0%,rgba(250,250,248,1) 49%,rgba(250,250,248,.86) 62%,rgba(250,250,248,.16) 88%,rgba(250,250,248,0) 100%) !important;
  }
  .lp-hero-inner{min-height:780px !important}
  .lp-hero-copy{
    width:100% !important;
    max-width:none !important;
    min-height:auto !important;
    padding:48px 38px 390px !important;
  }
  .lp-hero-copy h1{font-size:clamp(3rem,8.4vw,4.8rem) !important;max-width:760px}
  .lp-hero-copy .lead{font-size:1.04rem;max-width:620px}
  .lp-pillars{
    width:calc(100% - 24px) !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    margin:12px auto 24px !important;
  }
  .lp-pillar{padding:26px 22px !important}

  /* Homepage / media */
  .how-video,.how-video-inline{width:100%;max-width:100% !important;margin-left:0;margin-right:0}
  .how-video-frame{width:100%;aspect-ratio:16/9}
  .how-video-frame iframe{width:100%;height:100%;display:block}
  .safety-visual img{width:100%;height:auto}

  /* How It Works: consistent text-then-image order on stacked layouts */
  .how-flow{gap:34px}
  .how-step-wrap{gap:18px !important}
  .how-step-wrap.reverse .how-step-text{order:1}
  .how-step-wrap.reverse .how-step-image{order:2}
  .how-step-image img{border-radius:20px !important}
  .how-step-caption{margin-bottom:0}

  /* IntelliCore */
  .product-logo{max-width:100%;height:auto}
  .pagehero .product-logo{max-height:150px;width:auto}
  .intellicore-intro-visual{justify-content:center !important}
  .intellicore-intro-visual img{width:100% !important;max-width:630px !important}

  /* IntelliLight intro */
  .intellilight-intro .product-showcase{justify-self:center !important;width:100% !important}
  .intellilight-intro .product-showcase img{margin:12px auto 0 !important}

  /* Industries and protocol/network layouts */
  .industry-sector-head{gap:14px}
  .industry-tags{display:flex;flex-wrap:wrap;gap:8px}
  .network-row{grid-template-columns:1fr !important;gap:12px !important;padding:20px !important}
  .trust-strip{grid-template-columns:repeat(2,minmax(0,1fr)) !important}

  /* Specs / tables: keep all data accessible rather than squeezing columns */
  .table,.spec-table,.controller-table{
    width:100%;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .table th,.table td,.spec-table th,.spec-table td{padding:12px 13px}
  .spec-nav{top:74px !important;overflow:hidden}
  .spec-nav .container{width:100% !important;padding-left:16px;padding-right:16px;overflow-x:auto;scrollbar-width:none}
  .spec-nav .container::-webkit-scrollbar{display:none}

  /* Forms / configurator */
  select,input,textarea{min-height:46px}
  textarea{min-height:132px}
  .fixed-value{min-height:46px;display:flex;align-items:center}
}

/* Phone-first refinements */
@media (max-width:680px){
  .container,
  .container.intellicore-intro{width:calc(100% - 26px) !important}
  .nav{height:68px}
  .brand img{height:43px;max-width:178px}
  .hamb{min-width:44px;min-height:44px;padding:8px 11px}
  .menu{top:68px !important;max-height:calc(100dvh - 68px)}

  .section{padding:48px 0}
  .pagehero{padding:38px 0 26px}
  .pagehero h1,.hero h1{font-size:clamp(2.2rem,11vw,3.2rem)}
  .section h2{font-size:clamp(1.9rem,9vw,2.75rem)}
  .lead{font-size:1.02rem}

  .cards,.cards.two,.cards.three,.cards.four,
  .protocol-grid,
  .logos,
  .feature-list,
  .trust-strip,
  .footer .cols{
    grid-template-columns:1fr !important;
  }
  .card,.config-panel,.spec-block,.function-card,.approval-card,.how-step-text{padding:19px}
  .hero-actions{display:flex;flex-direction:column;align-items:stretch}
  .hero-actions .cta,.section-head>.cta{width:100%;justify-content:center}

  /* Home phone hero */
  .hero.lp-home-hero{width:calc(100% - 16px) !important;margin-top:8px !important;border-radius:13px !important}
  .hero.lp-home-hero::before{background-size:auto 36% !important;background-position:59% bottom !important}
  .hero.lp-home-hero::after{background:linear-gradient(180deg,rgba(250,250,248,1) 0%,rgba(250,250,248,1) 58%,rgba(250,250,248,.84) 70%,rgba(250,250,248,.15) 94%,rgba(250,250,248,0) 100%) !important}
  .lp-hero-inner{min-height:735px !important}
  .lp-hero-copy{padding:36px 20px 300px !important}
  .lp-hero-copy .eyebrow{font-size:.78rem;margin-bottom:16px}
  .lp-hero-copy h1{font-size:clamp(2.65rem,13.5vw,3.7rem) !important;line-height:.94 !important;margin-bottom:20px}
  .lp-hero-copy .lead{font-size:.99rem;line-height:1.5}
  .lp-hero-copy .hero-actions{margin-top:24px}
  .lp-hero-copy .hero-actions .cta{min-height:48px}
  .lp-pillars{width:calc(100% - 16px) !important;grid-template-columns:1fr !important}
  .lp-pillar{padding:24px 18px !important}

  .step{grid-template-columns:44px 1fr !important;gap:13px !important;padding:16px !important;border-radius:16px !important}
  .step:before{width:44px !important;height:44px !important;border-radius:13px !important;font-size:1.2rem !important}

  .logo-card{min-height:78px;padding:16px}
  .logo-card img{max-height:48px;width:auto}
  .logo-card.dual-logo{grid-template-columns:1fr 1fr !important}

  /* Keep wide comparison/specification tables usable on phones */
  .table,.spec-table,.controller-table{display:block;font-size:.88rem;border-radius:14px}
  .table tbody,.spec-table tbody,.controller-table tbody{min-width:560px;display:table;width:100%}
  .spec-table th{width:190px}

  .protocol-list{columns:1 !important}
  .network-map{overflow-x:auto}
  .notice{padding:15px 16px}

  .product-showcase img{max-width:190px !important}
  .intellicore-intro-visual img{border-radius:16px !important}
  .pagehero .product-logo{max-height:120px}

  /* Prevent long labels / URLs / technical strings from creating overflow */
  .card,.spec-block,.function-card,.approval-card,.bank,.summary-box,.notice{min-width:0}
  td,th,.muted,.lead,p,li{overflow-wrap:anywhere}
}

/* Tablet refinements: retain more information per row without desktop crowding */
@media (min-width:681px) and (max-width:1100px){
  .cards.four{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .footer .cols{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
  .configurator{grid-template-columns:1fr 1fr !important}
  .spec-grid,.beam-grid,.datasheet-preview{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .intellicore-intro{grid-template-columns:1fr 1fr !important;align-items:center}
  .intellicore-intro-visual img{max-width:100% !important}
}