/* 08 · Why VOC Lighting — 底色修复：与 07 / 09 统一为 #f4f2ec
   ══════════════════════════════════════════════════════════════
   线上实测根因（在 Ueeshop 编辑器画布 iframe 内用 getComputedStyle 实测）：

   本模块自身一直都是正确的 #f4f2ec，灰底并非来自本模块，而是云端打包的
   旧 CSS 文件里残留了一段针对 #voc-why 的深色渐变遮罩：

     #voc-why{position:relative;isolation:isolate}
     #voc-why::before{
       content:"";position:absolute;inset:0;z-index:-1;
       background:linear-gradient(120deg,
         rgba(7,11,19,.28) 0%, rgba(9,14,25,.18) 55%, rgba(12,18,32,.12) 100%)}

   关键点：isolation:isolate 让 #voc-why 自成层叠上下文，于是本该压在背景
   之后的 z-index:-1 伪元素，反而盖到了自身背景之上——
   #f4f2ec 被 0.28 的深色叠成 rgb(178,182,177)，也就是截图里那条灰带。
   07 与 09 没有这段伪元素，所以三屏里只有 08 发灰。

   修法（已在线上实测通过）：关掉该伪元素、复位 isolation，并强制同一底色。
   ══════════════════════════════════════════════════════════════ */
html body #voc-why{background:#f4f2ec!important;background-image:none!important;isolation:auto!important}
html body #voc-why::before,html body #voc-why::after{content:none!important;display:none!important;background:none!important}

#voc-why,#voc-why *{box-sizing:border-box}
#voc-why{width:100%;padding:90px 0;background:#f4f2ec;color:#11120f;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.5;text-align:left}
#voc-why .vwy-wrap{width:calc(100% - 40px);max-width:1240px;margin:0 auto}
#voc-why .vwy-head{display:grid;grid-template-columns:1.35fr 1fr;align-items:end;gap:60px;margin-bottom:36px}
#voc-why .vwy-eyebrow{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
#voc-why h2{margin:8px 0 0;padding:0;color:#11120f;font-size:clamp(34px,4.2vw,60px);font-weight:750;line-height:1;letter-spacing:-.05em;text-transform:none}
#voc-why .vwy-head>p{margin:0;padding:0;color:#686b63;font-size:16px;line-height:1.65}
#voc-why .vwy-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
#voc-why .vwy-item{min-width:0;border-top:3px solid #f2c230;padding:22px 0 0}
#voc-why h3{margin:0 0 8px;padding:0;color:#11120f;font-size:20px;font-weight:750;line-height:1.25;letter-spacing:-.02em;text-transform:none;overflow-wrap:break-word}
#voc-why .vwy-item p{margin:0;padding:0;color:#686b63;font-size:14px;line-height:1.55}
@media(max-width:1000px){#voc-why .vwy-head{grid-template-columns:1fr;gap:20px}#voc-why .vwy-head>p{max-width:640px}#voc-why .vwy-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:850px){#voc-why{padding:68px 0}}
@media(max-width:560px){#voc-why{padding:56px 0}#voc-why .vwy-wrap{width:calc(100% - 32px)}#voc-why .vwy-grid{grid-template-columns:1fr}#voc-why h2{font-size:34px;line-height:1.06}#voc-why .vwy-eyebrow{font-size:11px}#voc-why .vwy-head{margin-bottom:28px}}