/* compsreviews.com round 9 (11/7/2026). Loads after home8.css. */

/* ---------- glow: on by default, turned down a touch ---------- */
html[data-glow="on"] :is(.tb,.board,.gmap,.ansbox,.o3 > div,.nrb,.bcard,.fr,.idc,details,form.find,.float4),
html[data-glow="on"] #guarantee li{box-shadow:0 0 0 1.5px rgba(140,198,255,.5),0 0 16px rgba(80,160,240,.12),0 12px 26px rgba(13,34,56,.08)!important}
html[data-glow="on"] .hx form.find,html[data-glow="on"] .closer form.find{box-shadow:0 0 0 1.5px rgba(140,198,255,.65),0 0 34px rgba(140,198,255,.3)!important}
/* offer: the box row clipped the glow; let it show */
html[data-glow="on"] .o3{overflow:visible}
html[data-glow="on"] .o3x > div{box-shadow:0 0 0 1.5px rgba(140,198,255,.5),0 0 16px rgba(80,160,240,.12),0 12px 26px rgba(13,34,56,.08)!important}

/* ---------- app -> average client bar: no dark band under the phone ---------- */
.app6 .ph4,.app6.glow .ph4,html[data-glow="on"] .app6 .ph4{box-shadow:0 0 60px rgba(140,198,255,.45)!important}

.app4.app6{overflow:visible;z-index:2}
.bar6{background:linear-gradient(180deg,#3b8fe0 0%,#3b8fe0 38%,#7fb6ea 74%,var(--b2) 100%)}

/* ---------- menu: half the height, and it stays open on the way down ---------- */
.mega3{min-height:0;grid-template-columns:320px 1fr;transition:opacity .18s .3s,visibility 0s .48s}
.mi:hover .mega3,.mi.open .mega3{transition-delay:0s}
.mega3 .m3-row,.mega3 .m3-strip{display:none}
.mega3 .m3-side{padding:22px 24px!important;gap:12px!important}
.mega3 .m3-side h3{font-size:24px!important;margin:0 0 4px!important}
.mega3 .m3-side p{margin:0!important;font-size:14px!important}
.mega3 .m3-agency{padding:12px 14px!important}
.mega3 .m3-main{padding:20px 26px!important}
.mega3 .m3-cols a{padding-top:5px!important;padding-bottom:5px!important}
.mega3 .m3-cols h4{margin-bottom:6px!important}

.mega3 .m3-agency{font-size:14px!important;padding:10px 12px!important}
.mega3 .m3-side p{font-size:13.5px!important;line-height:1.4!important}

/* ---------- tablet: the desktop page, scaled; no screen-height hero ---------- */
html.tabv .hx.h6 .wrap,html.phv .hx.h6 .wrap{height:auto;min-height:0;padding:90px 0 110px}
html.tabv .h7 h1,html.phv .h7 h1{margin-top:0}
html.tabv .h7 .find{margin-top:56px}
html.tabv .h7 .chipsrow{margin-top:56px}

/* ---------- phone: the desktop layout at 640 wide, shown smaller ---------- */

html.phv .hx h1{font-size:50px;line-height:1.08}
html.phv .h7 .find{margin-top:44px}
html.phv .h7 .chipsrow{margin-top:40px}
html.phv main :is(.tb,.o3 p,.nrb p,details p,.st5 p){font-size:16.5px}
/* app: the whole desktop stage, scaled to fit */
html.phv .app6 .stage4{width:1232px;max-width:none;zoom:.5;margin-left:calc((640px - 616px) / 2 / .5)}
html.phv .app4 .wrap{padding:0;max-width:none}
/* what we do: 2 by 2 */
html.phv .hk6{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:22px}
/* race board, why, values: words on top, the picture under it */
html.phv .race2,html.phv .v6,html.phv .v6:has(.c8){grid-template-columns:minmax(0,1fr)!important;row-gap:34px}
html.phv .race2 .board{order:0}
html.phv #why .wrap > div,html.phv #why [class*="wrap"]{grid-template-columns:minmax(0,1fr)!important}
html.phv .gwrap{justify-self:center}
html.phv .vleft:has(.c8){align-items:center}
/* offer box: buttons under the words */
html.phv .nrb{grid-template-columns:minmax(0,1fr);gap:16px}
html.phv .nrb .btns{flex-wrap:nowrap}

html.tabv .hx,html.phv .hx{min-height:0!important;height:auto!important}

.mega3 .m3-agency span{font-size:13.5px!important;line-height:1.35!important}.mega3 .m3-agency b{display:inline!important;margin-right:4px}.mega3 .m3-side p{display:none!important}.mega3 .m3-side h3{margin-bottom:10px!important}