/* ==========================================================================
   PLATFORM MEGA MENU — "Why Cranium" feature card.
   Own file (not style.css) because the October / December homepage takeovers
   dequeue style.css and carry a scoped copy of the header CSS. Enqueued on
   every page, self-contained (literal values, own resets), and every selector
   is prefixed #header .mega-feat.mega-feat--why so it out-ranks both
   style.css and the takeovers' scoped #header .mega-feat rules.
   ========================================================================== */
@property --mfw-a{syntax:'<angle>';inherits:false;initial-value:0deg}
#header .mega-feat.mega-feat--why,#header .mega-feat.mega-feat--why *{box-sizing:border-box}
#header .mega-feat.mega-feat--why :where(h4,ul,li,small,b,em,span,div){margin:0;padding:0}
#header .mega-feat.mega-feat--why{position:relative;display:flex;flex-direction:column;min-height:300px;border-radius:16px;overflow:hidden;text-decoration:none;color:#f4f1ff;
  border:1px solid transparent;
  background:linear-gradient(170deg,#140a33,#0a0518 62%) padding-box,
             conic-gradient(from var(--mfw-a),rgba(69,0,249,.9),#cd82ff 18%,rgba(135,82,250,.15) 38%,rgba(135,82,250,.15) 62%,#8752fa 82%,rgba(69,0,249,.9)) border-box;
  box-shadow:0 30px 70px -30px rgba(69,0,249,.75);transition:transform .6s cubic-bezier(.19,1,.22,1),box-shadow .6s cubic-bezier(.19,1,.22,1)}
#header .mega-feat.mega-feat--why:hover{transform:translateY(-3px);box-shadow:0 40px 90px -30px rgba(105,40,250,.95)}
@media (prefers-reduced-motion:no-preference){#header .mega-feat.mega-feat--why{animation:mfwSpin 7s linear infinite}}
@keyframes mfwSpin{to{--mfw-a:360deg}}

/* thumb: mini live-calls feed */
#header .mega-feat.mega-feat--why .mf-why{position:relative;flex:none;height:140px;overflow:hidden;background:
  radial-gradient(70% 60% at 50% 52%,rgba(135,82,250,.45),transparent 70%),
  radial-gradient(60% 80% at 100% 0%,rgba(205,130,255,.35),transparent 60%),
  linear-gradient(160deg,#1b0a55,#0d0626 70%)}
#header .mega-feat.mega-feat--why .mf-why::after{display:none}
#header .mega-feat.mega-feat--why .mf-why::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(205,130,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(205,130,255,.08) 1px,transparent 1px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(75% 75% at 50% 55%,#000,transparent);mask-image:radial-gradient(75% 75% at 50% 55%,#000,transparent)}
#header .mega-feat.mega-feat--why .mfw-tag{position:absolute;left:14px;top:12px;z-index:4;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:9.5px;line-height:1.2;letter-spacing:.2em;text-transform:uppercase;color:#fff;padding:5px 10px;border-radius:999px;background:linear-gradient(118deg,#4500f9,#8752fa 55%,#cd82ff);box-shadow:0 6px 20px rgba(105,40,250,.6)}
#header .mega-feat.mega-feat--why .mfw-live{position:absolute;right:14px;top:15px;z-index:4;display:inline-flex;align-items:center;gap:6px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:9px;line-height:1.2;letter-spacing:.2em;text-transform:uppercase;color:#e9e3ff}
#header .mega-feat.mega-feat--why .mfw-live i{display:block;width:6px;height:6px;border-radius:50%;background:#cd82ff;box-shadow:0 0 8px #cd82ff}
#header .mega-feat.mega-feat--why .mfw-lane{position:absolute;inset:0;z-index:2;
  -webkit-mask-image:linear-gradient(180deg,transparent 22%,#000 40%,#000 88%,transparent 100%);mask-image:linear-gradient(180deg,transparent 22%,#000 40%,#000 88%,transparent 100%)}
#header .mega-feat.mega-feat--why .mfw-gate{position:absolute;left:0;right:0;top:60%;height:2px;z-index:1;background:linear-gradient(90deg,transparent,#8752fa 15%,#fff 50%,#8752fa 85%,transparent);box-shadow:0 0 12px #cd82ff,0 0 34px rgba(135,82,250,.9)}
#header .mega-feat.mega-feat--why .mfw-chip{position:absolute;left:50%;top:60%;width:78%;display:flex;align-items:center;gap:7px;padding:7px 10px;border-radius:10px;border:1px solid rgba(168,150,255,.25);background:rgba(12,6,32,.92);
  font-family:'Space Grotesk',sans-serif;font-size:10px;line-height:1.3;white-space:nowrap;transform:translate(-50%,56px);opacity:0}
#header .mega-feat.mega-feat--why .mfw-chip b{color:#fff;font-weight:600}
#header .mega-feat.mega-feat--why .mfw-chip em{font-style:normal;color:#6b6491;font-size:9px;letter-spacing:.06em;text-transform:uppercase}
#header .mega-feat.mega-feat--why .mfw-v{margin-left:auto;font-weight:700;font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;padding:3px 8px;border-radius:999px}
#header .mega-feat.mega-feat--why .mfw-p{color:#6b6491;border:1px dashed rgba(168,150,255,.35)}
#header .mega-feat.mega-feat--why .mfw-c{position:absolute;right:10px;color:#fff;opacity:0}
#header .mega-feat.mega-feat--why .mfw-pass{border:1px solid #cd82ff;background:rgba(205,130,255,.18)}
#header .mega-feat.mega-feat--why .mfw-modify{background:#8752fa}
#header .mega-feat.mega-feat--why .mfw-block{background:linear-gradient(118deg,#4500f9,#8752fa 55%,#cd82ff);box-shadow:0 0 12px rgba(205,130,255,.8)}
@media (prefers-reduced-motion:no-preference){
  #header .mega-feat.mega-feat--why .mfw-chip{animation:mfwUp 7s linear infinite;animation-delay:var(--d)}
  #header .mega-feat.mega-feat--why .mfw-chip .mfw-p{animation:mfwPend 7s linear infinite;animation-delay:var(--d)}
  #header .mega-feat.mega-feat--why .mfw-chip .mfw-c{animation:mfwCall 7s linear infinite;animation-delay:var(--d)}
}
@media (prefers-reduced-motion:reduce){
  #header .mega-feat.mega-feat--why .mfw-chip:nth-child(1){opacity:1;transform:translate(-50%,-40px)}
  #header .mega-feat.mega-feat--why .mfw-chip:nth-child(2){opacity:1;transform:translate(-50%,8px)}
  #header .mega-feat.mega-feat--why .mfw-chip:nth-child(1) .mfw-c{opacity:1}
  #header .mega-feat.mega-feat--why .mfw-chip:nth-child(1) .mfw-p{opacity:0}
}
@keyframes mfwUp{0%{transform:translate(-50%,56px);opacity:0}10%{opacity:1}88%{opacity:1}100%{transform:translate(-50%,-88px);opacity:0}}
@keyframes mfwPend{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes mfwCall{0%,49%{opacity:0;transform:scale(1.9)}54%{opacity:1;transform:scale(.9)}58%,100%{opacity:1;transform:scale(1)}}
/* pause the loops while the menu is closed */
#header .nav-item:not(:hover):not(:focus-within) .mega-feat.mega-feat--why,
#header .nav-item:not(:hover):not(:focus-within) .mega-feat.mega-feat--why *{animation-play-state:paused}

/* body */
#header .mega-feat.mega-feat--why .mf-body{display:flex;flex-direction:column;flex:1;padding:18px 20px 20px}
#header .mega-feat.mega-feat--why h4{font-family:'Outfit',sans-serif;font-weight:500;font-size:1.32rem;line-height:1.12;letter-spacing:-.005em;color:#f4f1ff}
#header .mega-feat.mega-feat--why .mfw-grad{background:linear-gradient(118deg,#4500f9,#8752fa 55%,#cd82ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
#header .mega-feat.mega-feat--why .mfw-list{list-style:none;display:flex;flex-direction:column;gap:8px;margin:14px 0 16px}
#header .mega-feat.mega-feat--why .mfw-list li{display:flex;align-items:center;gap:11px;list-style:none}
#header .mega-feat.mega-feat--why .mfw-list li::before,#header .mega-feat.mega-feat--why .mfw-list li::marker{content:none}
#header .mega-feat.mega-feat--why .mfw-n{flex:none;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:10.5px;color:#fff;background:rgba(135,82,250,.18);border:1px solid rgba(205,130,255,.3);transition:background .4s}
#header .mega-feat.mega-feat--why .mfw-list li > span:last-child{display:flex;flex-direction:column;line-height:1.2}
#header .mega-feat.mega-feat--why .mfw-list b{display:block;font-family:'Outfit',sans-serif;font-weight:600;font-size:.92rem;color:#fff}
#header .mega-feat.mega-feat--why .mfw-list small{display:block;font-family:'Montserrat',sans-serif;font-size:.76rem;color:#a59fc4;margin-top:2px}
#header .mega-feat.mega-feat--why:hover .mfw-n{background:linear-gradient(118deg,#4500f9,#8752fa 55%,#cd82ff);border-color:transparent}
#header .mega-feat.mega-feat--why .mfw-cta{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:auto;padding:11px 16px;border-radius:999px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:13px;line-height:1.2;color:#fff;background:linear-gradient(118deg,#4500f9,#8752fa 55%,#cd82ff);box-shadow:0 8px 26px rgba(105,40,250,.45);transition:box-shadow .5s cubic-bezier(.19,1,.22,1)}
#header .mega-feat.mega-feat--why:hover .mfw-cta{box-shadow:0 10px 34px rgba(160,90,255,.75)}
#header .mega-feat.mega-feat--why .mfw-cta span{display:inline-block;transition:transform .45s cubic-bezier(.19,1,.22,1)}
#header .mega-feat.mega-feat--why:hover .mfw-cta span{transform:translateX(4px)}