/* Shared phone and tablet layouts. Keep the original artwork and motion. */
html{scroll-padding-top:100px;-webkit-text-size-adjust:100%}
body{overflow-wrap:break-word}
.wrap,.hero-grid>*,.about-grid>*,.install>*,.faq-grid>*,.safety-grid>*,.foot>*,.blog-card{min-width:0}
.table-wrap{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.table-wrap table{min-width:660px}
.foot p{max-width:100%}
.foot a,.info-page main a{overflow-wrap:anywhere}
.menu a,.burger,.faq-tabs button,.back-top{min-height:44px}
.burger{flex-shrink:0}
.faq summary{gap:16px;line-height:1.5}
.faq .pm{flex-shrink:0}
.blog-grid{align-items:start}
.blog-card summary:focus-visible{outline:3px solid var(--green);outline-offset:-4px}
.info-page main>article{overflow-wrap:anywhere}
@media(max-width:1100px) and (min-width:981px){
  .nav{gap:8px;padding-left:14px}.menu{gap:0}.menu a{padding:8px;font-size:.8rem;gap:5px}.nav .btn{padding:11px 15px}
  .foot{gap:32px}
}
@media(max-width:980px){
  header{top:12px}.nav{width:calc(100% - 24px)}
  .menu{visibility:hidden;max-height:calc(100svh - 110px);overflow-y:auto;overscroll-behavior:contain;align-items:stretch}
  .menu.open{visibility:visible}.menu li{width:100%}.menu a{width:100%;min-height:48px}
  .foot{grid-template-columns:1fr 1fr;gap:32px}.footer-intro{grid-column:1/-1}.foot p{max-width:680px}
  .about-grid,.install,.safety-grid,.faq-grid{gap:36px}
  .facts{align-self:start!important}.quote{grid-template-columns:56px minmax(0,1fr);gap:18px}.qmark{font-size:3rem}
  .info-page main.wrap{padding-top:115px}
}
@media(min-width:768px) and (max-width:980px){
  .hero-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:24px}
  .hero .stage{order:initial;height:320px}.hero{min-height:100svh;padding:110px 0 40px}
  .hero h1.hero-inline-title{font-size:36px}.hero-detail p{font-size:.95rem;line-height:1.7}
  .hero-grid>div:first-child{width:100%;max-width:none}
  .hero-actions{gap:10px}.hero-actions .btn{padding:13px 18px;font-size:.85rem}
  .hero-meta div{padding-right:16px;margin-right:16px;font-size:.8rem}
}
@media(max-width:767px){
  section{padding:64px 0;scroll-margin-top:90px}.wrap{padding-inline:20px}
  .hero{padding:106px 0 32px;min-height:auto}.hero-grid{gap:24px;grid-template-columns:minmax(0,1fr)}
  .hero .stage{order:initial;height:280px}.hero-grid>div:first-child{max-width:none}
  .hero-detail p{font-size:1rem;line-height:1.75}.hero .chip{letter-spacing:.04em}
  .hero h1.hero-inline-title{font-size:36px}.hero-meta{justify-content:flex-start}
  .flow{gap:32px}.step .dot{margin-bottom:18px}
  .feat{padding:24px 0;grid-template-columns:32px minmax(0,1fr);column-gap:12px}.feat h3{font-size:1.15rem}
  .feat-list{margin-top:32px}.use{padding:26px 0}.use h3{font-size:1.2rem}
  .note{padding:18px}.req{margin-top:22px}.steps li{padding-bottom:32px}
  .table-wrap{margin-top:28px;border-radius:14px}th,td{padding:16px;font-size:.85rem}
  .quote{grid-template-columns:minmax(0,1fr);padding:28px 0;gap:12px}.quote blockquote{font-size:1.1rem}
  .faq-tabs{gap:8px}.faq-tabs button{flex:1 1 auto;justify-content:center;padding:10px 12px}
  .faq summary{font-size:1rem;padding-block:18px}.faq .ans p{font-size:.95rem}
  .cta{padding:64px 0}.cta h2{font-size:clamp(1.8rem,7vw,2.6rem)}
  .guide-page main{padding-top:96px!important}.guide-page #blogs{padding-top:28px}
  .blog-grid{gap:20px;margin-top:28px}.blog-card h3{font-size:1.15rem;line-height:1.35}
  .foot{gap:28px}.foot li a{display:inline-flex;align-items:center;min-height:44px;padding-block:7px}
  .foot ul{gap:0}.foot h2{margin-bottom:12px}.footer-bottom{padding-top:22px}
  .copy{font-size:.75rem;line-height:1.9}.info-page main.wrap{padding:108px 20px 48px}
  .info-page main>article{padding:26px}.info-page main h1{font-size:2rem}
}
@media(max-width:480px){
  .wrap{padding-inline:16px}.hero h1.hero-inline-title{font-size:32px}
  .hero-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
  .hero-actions .btn{justify-content:center;min-height:48px;font-size:.9rem;padding:13px 20px}
  .hero-meta{gap:12px}.hero-meta div{flex:1 1 0;padding-right:12px;margin-right:0;font-size:.72rem}
  .hero-meta strong{font-size:1.1rem}.hero .chip{max-width:100%;font-size:.63rem;gap:7px;padding-right:12px}
  .hero .stage{height:260px}.foot{grid-template-columns:minmax(0,1fr);gap:28px}.footer-intro{grid-column:auto}
  .foot h2{margin-top:0}.foot .brand{font-size:1.4rem}.foot li a{font-size:.9rem}
  footer{padding:42px 0 22px}.foot{padding-bottom:28px}
  .info-page main.wrap{padding-inline:16px}.info-page main>article{padding:22px 18px;border-radius:18px}
  .info-page main{font-size:1rem}.info-page main h1{font-size:1.85rem}
  .blog-card summary{padding:20px}.blog-image{width:calc(100% + 40px);margin:-20px -20px 18px;height:160px}
  .blog-body{padding:20px}.blog-category{margin-bottom:12px}
}
@media(max-width:360px){
  .hero h1.hero-inline-title{font-size:30px}.hero-meta div{padding-right:8px;font-size:.68rem}
  .faq-tabs{flex-direction:column}.faq-tabs button{width:100%}
}
@media(max-height:500px) and (orientation:landscape){
  header{top:8px}.menu{max-height:calc(100svh - 95px)}.hero{min-height:auto}
}