/* Vook v18: mobile responsive fixes */
html,body.vk{max-width:100%;overflow-x:clip}
@media(max-width:720px){
 /* hero headline: rotating word gets its own line, nothing overflows */
 .hero11 h1 .l1{flex-wrap:wrap;justify-content:center;white-space:normal;row-gap:0}
 .hero11 h1 .lead-w{width:100%}
 .rotp{max-width:100%}
 .pw{font-size:1em}
 .hero11 .col,.vk .hero11 .e-con.col{width:100%;max-width:100%}
 .hero11 .sub{padding:0 4px}
 .vk .hero11 .ctas,.vk .hero11 .e-con.ctas{width:100%}
 /* long-form coverflow: no empty gap */
 .hero11.long .stage11{height:calc(88vw * .5625 + 60px)}
 .lfr{top:10px}
 .hero11 .spills{padding-top:18px}
 /* general safety */
 .wrap,.vk .e-con.wrap{--width:calc(100% - 32px)}
 .wrap{width:calc(100% - 32px)}
 .head h2{font-size:clamp(30px,8.6vw,40px)}
 .vk h1,.vk h2{overflow-wrap:break-word}
 img,video{max-width:100%}
}

/* chips on white sections */
.vmeta .vchips span{background:#f2f2f2}
@media(max-width:720px){
 /* final CTA proof row */
 .fproof{flex-direction:column;gap:10px;text-align:center}
 .fproof span:last-child{max-width:240px}
 .final h2{font-size:clamp(32px,9vw,42px)}
 .final p{font-size:16px}
 /* video: simple card on phones, no pinning */
 .vk .e-con.vpin,.vpin{height:auto!important}
 .vk .e-con.vstick,.vstick{position:relative!important;height:auto!important;overflow:visible!important;width:calc(100% - 32px);margin:0 auto}
 .vk .e-con.vframe.vfull,.vframe.vfull{position:relative!important;inset:auto!important;aspect-ratio:4/5!important;height:auto!important;clip-path:none!important;border-radius:24px!important}
 .vframe.vfull:after{transform:none!important}
 .vcap{display:none}
 .vmeta{padding:0 4px;margin-top:16px}
 .vsec{padding-bottom:20px}
 /* long-form arrows below the carousel */
 .hero11.long .stage11{height:calc(88vw * .5625 + 110px)}
 .lfa{display:grid!important;place-items:center;top:auto!important;bottom:6px;width:46px;height:46px;font-size:26px;line-height:1}
 .lfa.prev{left:calc(50% - 56px)!important;right:auto!important}
 .lfa.next{right:calc(50% - 56px)!important;left:auto!important}
 .hero11 .stage11:after{display:none}
}
/* reviews slider */
.qs{position:relative}
.qtrack{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding:4px 2px 6px;-webkit-overflow-scrolling:touch}
.qtrack::-webkit-scrollbar{display:none}
.qtrack .qc{flex:0 0 calc((100% - 28px)/3);scroll-snap-align:start}
.qnav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:28px}
.qb{width:46px;height:46px;border-radius:50%;border:0;background:#fff;font:400 26px/1 var(--fb);cursor:pointer;box-shadow:0 0 0 1px rgba(0,0,0,.08);transition:transform .16s cubic-bezier(.23,1,.32,1),opacity .2s ease,background .2s ease;display:grid;place-items:center}
.qb:active{transform:scale(.93)}
.qb:disabled{opacity:.35;cursor:default}
@media(hover:hover){.qb:not(:disabled):hover{background:#000;color:#fff}}
.qdots{display:flex;gap:6px}
.qdots i{width:7px;height:7px;border-radius:999px;background:#cfcfcf;transition:width .3s cubic-bezier(.23,1,.32,1),background .3s ease}
.qdots i.on{width:22px;background:#000}
@media(max-width:1080px){.qtrack .qc{flex-basis:calc((100% - 14px)/2)}}
@media(max-width:720px){.qtrack .qc{flex-basis:86%}.qtrack{margin:0 -16px;padding:4px 16px 6px;scroll-padding:0 16px}}
/* reviews auto-slide: soft edge fades */
.qs{-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.qs .qnav{-webkit-mask-image:none;mask-image:none}
.qtrack{scroll-behavior:auto}

/* reviews: auto only, no arrows */
.qs .qnav{display:none}
/* tighter vertical rhythm site-wide */
.sec{padding:84px 0}
.head{margin-bottom:40px}
.head h2{margin-top:14px}
.head p{margin-top:12px}
.vsec{padding-bottom:24px}
.vpin,.vk .e-con.vpin{height:165vh}
.vmeta{margin-top:18px}
.wf{margin:-8px auto 28px}
.wkmore,.wkmore2{margin-top:28px}
.hero11{padding-top:130px}
.stage11{margin-top:44px}
.hero11 .spills{padding:18px 0 22px}
.whero,.ahero,.chero,.ihero{padding-top:140px;padding-bottom:64px}
.wpage{padding-top:56px}
.foot{padding-top:24px}
.final{padding:84px 30px}
.fgrid{margin-top:48px;padding-bottom:28px}
.bigword{margin-top:12px}
.ptable{margin-top:36px}
.pquote{margin-top:28px}
.qrate{margin-top:22px}
.nextc{margin-top:44px}
.stack{gap:20px}
@media(max-width:720px){
 .sec{padding:60px 0}
 .head{margin-bottom:28px}
 .hero11{padding-top:108px}
 .stage11{margin-top:32px}
 .whero,.ahero,.chero,.ihero{padding-top:112px;padding-bottom:44px}
 .final{padding:60px 22px}
 .fgrid{margin-top:36px}
 .wpage{padding-top:40px}
}