/* ============================================================
   WHY NEXORA  (headline block + 4 topped columns) — on --mist

   THIS SECTION IS THE FALLBACK, NOT THE MAIN EVENT.
   The hero now presents this content on the laptop display and
   expands it to fill the viewport (#zoom / #deck, see
   css/hero/deck.css). Showing it again as a flat section a few
   screens later would be the same four columns twice, so it is
   hidden whenever the 3D is running.

   It is NOT deleted, because the deck's zoom never runs when there
   is no 3D — reduced-motion, no WebGL, or the THREE CDN blocked —
   and those visitors would otherwise lose the content entirely.
   js/hero/scene3d.js and js/main.js both set body.nogl in exactly
   those cases, which is what switches this back on.
   ============================================================ */
#s-why{display:none}
body.nogl #s-why{display:block}
.why{padding:clamp(72px,9vw,120px) 0}

.why-head{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(30px,6vw,80px);align-items:end;margin-bottom:clamp(44px,6vw,76px)}
.why-aside{color:var(--ink500)}

.why-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,2.4vw,28px)}
.wcol{border-top:2px solid var(--navy);padding-top:30px;transition:border-color .3s}
.wcol:hover{border-color:var(--b500)}
.wn{font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:.12em;color:var(--b500)}
.wcol h3{font-family:Archivo;font-weight:600;font-size:clamp(16px,1.5vw,20px);
  letter-spacing:-.01em;color:var(--ink900);margin:14px 0 12px;line-height:1.24}
.wcol p{font-size:14px;color:var(--ink500);line-height:1.55}

@media(max-width:1100px){
  .why-head{grid-template-columns:1fr;gap:26px;align-items:start}
  .why-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 26px}
}
@media(max-width:720px){
  .why-grid{grid-template-columns:1fr}
}