/* door55 (+door56 wiring: plate links/buttons, Board/Wall mini buttons, Secret popup used by /assets/why56.js): "Ask The Boss" tip line under the Ask box + "why-here" chrome plates. Self-contained: rules scoped to .ask-tip and .why55.
   Remove this file, its <link>, the <p class="ask-tip"> and the <!-- WHY HERE SECTION --> block in index.html together. */
.ask-tip{max-width:760px;margin:10px auto 0;padding:0 20px;text-align:center;font-size:13px;line-height:1.45;color:#b3c3e2;
  text-shadow:0 1px 2px #05070f,0 0 12px rgba(5,7,15,.95)}
.ask-tip b{color:#8fd3ff;font-weight:700;white-space:nowrap}
.why55{position:relative;isolation:isolate;max-width:1040px;margin:22px auto 10px;padding:26px 20px 32px}
.why55::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 50% 62% at 50% 50%,rgba(47,123,255,.15),rgba(47,123,255,.04) 62%,transparent 100%)}
.why55 .w55-h{margin:0 0 18px;text-align:center;font-family:Orbitron,sans-serif;font-weight:800;font-size:15px;letter-spacing:.2em;color:#cfe0ff;
  text-shadow:0 1px 2px #05070f,0 0 14px rgba(61,139,255,.55)}
.why55 .w55-row li{display:flex}
.why55 .w55-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
/* the plate: dark polished chrome frame (outer) with a brushed chrome face (inner) */
.why55 .w55-p{--cut:13px;position:relative;display:flex;height:100%;padding:5px;color:#141a26;text-decoration:none;
  clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut));
  background:linear-gradient(160deg,#f2f6fb 0%,#3a4252 14%,#0c111c 30%,#8fd3ff 44%,#1a2232 52%,#d5dbe4 64%,#141a26 78%,#3d8bff 90%,#e6ebf2 100%);
  filter:drop-shadow(0 0 10px rgba(47,123,255,.45)) drop-shadow(0 5px 7px rgba(0,0,0,.65));transition:filter .2s,transform .2s}
.why55 .w55-f{--cut:10px;position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:112px;padding:15px 14px 18px;
  clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut));
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.07) 0 1px,rgba(0,0,0,.05) 1px 2px,rgba(255,255,255,0) 2px 3px),
    linear-gradient(180deg,rgba(255,255,255,.6) 0%,rgba(255,255,255,.1) 22%,rgba(0,0,0,0) 55%,rgba(20,45,100,.22) 100%),
    linear-gradient(100deg,#8b95a4 0%,#dfe4eb 16%,#a9b2bf 31%,#f1f4f8 47%,#9ea8b6 63%,#d6dce4 80%,#87909f 100%);
  box-shadow:inset 0 0 0 1px rgba(5,10,22,.9),inset 0 2px 1px 1px rgba(255,255,255,.7),inset 0 -2px 2px 1px rgba(10,20,40,.45),inset 0 0 16px rgba(61,139,255,.28)}
/* blue glow strip, like the lit bar on the Board/Wall plates */
.why55 .w55-f::after{content:"";position:absolute;left:18%;right:18%;bottom:8px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,#3d8bff 20%,#8fd3ff 50%,#3d8bff 80%,transparent);box-shadow:0 0 8px #3d8bff,0 0 14px rgba(61,139,255,.7)}
/* engraved/embossed dark title */
.why55 .w55-t{display:block;margin:0 0 6px;font-family:Orbitron,sans-serif;font-weight:900;font-size:14px;line-height:1.2;letter-spacing:.08em;text-transform:uppercase;color:#1a2232;
  text-shadow:0 1px 0 rgba(255,255,255,.85),0 -1px 0 rgba(0,0,0,.35)}
.why55 .w55-d{display:block;margin:0 0 6px;font-family:'Space Grotesk',system-ui,sans-serif;font-weight:500;font-size:13.5px;line-height:1.38;color:#1f2838;text-shadow:0 1px 0 rgba(255,255,255,.55)}
/* door56: every plate works. Button reset so <button class="w55-p"> renders exactly like the <a> plates */
button.w55-p{-webkit-appearance:none;appearance:none;border:0;margin:0;width:100%;font:inherit;text-align:center;cursor:pointer}
a.w55-p,button.w55-p{cursor:pointer;-webkit-tap-highlight-color:transparent}
a.w55-p:hover,a.w55-p:focus-visible,button.w55-p:hover,button.w55-p:focus-visible,.w55-split:has(.w55-mini:hover),.w55-split:has(.w55-mini:focus-visible){filter:brightness(1.08) drop-shadow(0 0 16px rgba(61,139,255,.8)) drop-shadow(0 0 4px rgba(143,211,255,.6)) drop-shadow(0 4px 6px rgba(0,0,0,.6));transform:translateY(-2px)}
a.w55-p:active,button.w55-p:active{transform:translateY(0);filter:brightness(1.02) drop-shadow(0 0 12px rgba(61,139,255,.7)) drop-shadow(0 3px 5px rgba(0,0,0,.6))}
/* clip-path hides outlines, so the focus ring is drawn inside the face instead */
a.w55-p:focus-visible .w55-f,button.w55-p:focus-visible .w55-f{box-shadow:inset 0 0 0 2px #2f7bff,inset 0 0 0 4px rgba(143,211,255,.85),inset 0 0 18px rgba(61,139,255,.45)}
a.w55-p:focus,button.w55-p:focus{outline:none}
/* Board / Wall: two small chrome buttons inside one plate */
.why55 .w55-pair{display:flex;gap:8px;width:100%;justify-content:center;margin:4px 0 4px}
.why55 .w55-mini{--c:6px;flex:1 1 0;max-width:118px;min-height:40px;display:flex;align-items:center;justify-content:center;padding:0 8px;
  font-family:Orbitron,sans-serif;font-weight:800;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:#e6f1ff;
  clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c));
  background:linear-gradient(180deg,rgba(143,211,255,.22),rgba(0,0,0,0) 45%),linear-gradient(180deg,#26324a,#0c111c 60%,#152443);
  box-shadow:inset 0 0 0 1px #8fd3ff,inset 0 0 0 2px rgba(5,10,22,.9),inset 0 1px 0 2px rgba(255,255,255,.25),inset 0 0 12px rgba(61,139,255,.55);
  text-shadow:0 0 8px rgba(61,139,255,.9);cursor:pointer;transition:filter .2s,transform .2s;-webkit-tap-highlight-color:transparent}
.why55 .w55-mini:hover,.why55 .w55-mini:focus-visible{filter:brightness(1.3);transform:translateY(-1px);box-shadow:inset 0 0 0 1px #cfe9ff,inset 0 0 0 2px rgba(5,10,22,.9),inset 0 1px 0 2px rgba(255,255,255,.35),inset 0 0 16px rgba(61,139,255,.95)}
.why55 .w55-mini:focus{outline:none}
.why55 .w55-mini:focus-visible{box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 3px #2f7bff,inset 0 0 16px rgba(61,139,255,.95)}
/* Secret popup (built by /assets/why56.js) */
.w56-back{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(3,6,14,.72);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:w56-fade .18s ease-out}
.w56-back[hidden]{display:none}
.w56-box{--cut:14px;position:relative;width:min(420px,100%);padding:3px;
  clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut));
  background:linear-gradient(160deg,#f2f6fb 0%,#3a4252 14%,#0c111c 30%,#8fd3ff 44%,#1a2232 52%,#d5dbe4 64%,#141a26 78%,#3d8bff 90%,#e6ebf2 100%);
  filter:drop-shadow(0 0 22px rgba(47,123,255,.7)) drop-shadow(0 10px 20px rgba(0,0,0,.7));animation:w56-pop .2s ease-out}
.w56-in{--cut:12px;position:relative;padding:30px 24px 22px;text-align:center;color:#cfe0ff;
  clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut));
  background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(61,139,255,.28),transparent 70%),linear-gradient(180deg,#121a2b,#070b14);
  box-shadow:inset 0 0 0 1px rgba(143,211,255,.35),inset 0 0 26px rgba(61,139,255,.3)}
.w56-stamp{display:inline-block;margin:0 0 14px;padding:5px 12px;border:2px solid #ff4d5e;border-radius:3px;transform:rotate(-4deg);
  font-family:Orbitron,sans-serif;font-weight:900;font-size:12px;letter-spacing:.24em;color:#ff6b78;text-shadow:0 0 8px rgba(255,77,94,.6);
  box-shadow:0 0 0 1px rgba(255,77,94,.25),inset 0 0 8px rgba(255,77,94,.25);opacity:.92}
.w56-t{margin:0 0 10px;font-family:Orbitron,sans-serif;font-weight:800;font-size:20px;letter-spacing:.04em;color:#e6f1ff;text-shadow:0 0 14px rgba(61,139,255,.75)}
.w56-p{margin:0 0 20px;font-family:'Space Grotesk',system-ui,sans-serif;font-size:15px;line-height:1.5;color:#b3c3e2}
.w56-btn{--c:7px;-webkit-appearance:none;appearance:none;border:0;min-width:140px;min-height:44px;padding:0 22px;cursor:pointer;
  font-family:Orbitron,sans-serif;font-weight:800;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:#e6f1ff;
  clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c));
  background:linear-gradient(180deg,rgba(143,211,255,.3),rgba(0,0,0,0) 45%),linear-gradient(180deg,#2f7bff,#173f8f);
  box-shadow:inset 0 0 0 1px #8fd3ff,inset 0 1px 0 2px rgba(255,255,255,.25),inset 0 0 14px rgba(143,211,255,.5);text-shadow:0 1px 2px rgba(0,0,0,.5);transition:filter .2s}
.w56-btn:hover,.w56-btn:focus-visible{filter:brightness(1.18)}
.w56-btn:focus{outline:none}.w56-btn:focus-visible{box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 4px #2f7bff,inset 0 0 14px rgba(143,211,255,.6)}
@keyframes w56-fade{from{opacity:0}to{opacity:1}}
@keyframes w56-pop{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
@media (max-width:900px){.why55 .w55-row{grid-template-columns:repeat(2,minmax(0,1fr));max-width:640px;margin:0 auto}}
@media (max-width:520px){
  .ask-tip{padding:0 14px;font-size:12.5px}
  .why55{margin-top:26px;padding:22px 12px 26px}
  .why55 .w55-h{font-size:13px;margin-bottom:14px}
  .why55 .w55-row{gap:10px}
  .why55 .w55-p{padding:4px;--cut:11px}
  .why55 .w55-f{min-height:128px;padding:12px 9px 16px;--cut:8px}
  .why55 .w55-t{font-size:11.5px;letter-spacing:.05em;margin-bottom:5px}
  .why55 .w55-d{font-size:12.5px;line-height:1.35}
  .why55 .w55-pair{gap:6px}
  .why55 .w55-mini{min-height:42px;font-size:10.5px;letter-spacing:.1em;padding:0 4px}
  .w56-in{padding:26px 18px 20px}
  .w56-t{font-size:18px}
  .w56-p{font-size:14.5px}
}
@media (prefers-reduced-motion:reduce){.why55 .w55-p,.why55 .w55-mini{transition:none}.why55 .w55-p:hover,.why55 .w55-p:focus-visible,.why55 .w55-p:active,.w55-split:has(.w55-mini:hover),.w55-split:has(.w55-mini:focus-visible),.why55 .w55-mini:hover,.why55 .w55-mini:focus-visible{transform:none}.w56-back,.w56-box{animation:none}}
/* door103: the section now sits inside #below (between AI/Bot News and "Latest from us"). Undo #below's 20px side padding so the plates keep their old width and centering. */
.below>.why55{margin-left:max(-20px,calc((100% - 1040px)/2));margin-right:max(-20px,calc((100% - 1040px)/2))}