/* ===== Restructure: Learn / Teach / Build pillars ===== */
/* hero may let the pillar panels overflow below it; videos stay clipped */
.hero{overflow-x:clip!important;overflow-y:visible!important;z-index:5}
.hero .vids{overflow:hidden}
.hero h1.bh{margin-bottom:22px!important;padding-top:20px!important}
.hero h1.bh+p{margin-top:calc(.16 * clamp(48px,12.6vw,220px))!important;margin-bottom:22px!important;padding-top:20px!important}
@media(max-height:760px) and (min-width:861px){.hero h1.bh+p{margin-top:calc(.16 * min(12.6vw,17vh))!important}}
@media(max-width:600px){.hero h1.bh+p{margin-top:calc(.16 * clamp(48px,19.4vw,96px))!important}}
/* --- crystal pillar buttons --- */
.pillars{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:18px;margin:0 0 30px;position:relative;z-index:6}
.pw{position:relative}
.pb{--g:0;position:relative;display:flex;align-items:center;gap:14px;padding:16px 18px 16px 16px;border-radius:20px;color:#fff;text-decoration:none;isolation:isolate;
 background:linear-gradient(160deg,rgba(255,255,255,.24) 0%,rgba(255,255,255,.08) 34%,rgba(255,255,255,.03) 62%,rgba(255,255,255,.12) 100%),rgba(10,14,36,.18);
 -webkit-backdrop-filter:blur(18px) saturate(170%) brightness(1.08);backdrop-filter:blur(18px) saturate(170%) brightness(1.08);
 box-shadow:inset 0 1.5px 0 rgba(255,255,255,.75),inset 0 14px 18px -14px rgba(255,255,255,.5),inset 0 -10px 18px -12px rgba(103,232,249,.35),inset -1px -1px 0 rgba(4,8,24,.3),
  0 26px 34px -22px rgba(0,0,0,.7),0 20px 44px -26px rgba(124,58,237,.8),0 12px 34px -24px rgba(34,211,238,.9);
 transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s;animation:pbFloat 5.2s ease-in-out infinite}
.pw:nth-child(2) .pb{animation-duration:5.8s;animation-delay:-1.6s}.pw:nth-child(3) .pb{animation-duration:5.5s;animation-delay:-3s}
@keyframes pbFloat{0%,100%{translate:0 1px}50%{translate:0 -3px}}
/* iridescent hairline edge */
.pb::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.2px;z-index:-1;pointer-events:none;
 background:linear-gradient(120deg,rgba(255,255,255,.95),rgba(103,232,249,.8) 16%,rgba(255,255,255,.1) 36%,rgba(244,114,182,.55) 58%,rgba(250,204,21,.35) 70%,rgba(167,139,250,.85) 86%,rgba(255,255,255,.75));
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
/* glossy top reflection + slow light sweep */
.pb::after{content:"";position:absolute;inset:1px 1px 52% 1px;border-radius:19px 19px 40% 40%/19px 19px 14px 14px;pointer-events:none;z-index:-1;
 background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0))}
.pb .pi{width:30px;height:30px;flex:none;color:#a5f3fc;filter:drop-shadow(0 0 8px rgba(34,211,238,.95)) drop-shadow(0 1px 1px rgba(0,0,0,.5))}
.pb .pt{display:flex;flex-direction:column;min-width:0}
.pb .pt b{font-size:22px;font-weight:800;letter-spacing:-.4px;line-height:1.05;text-shadow:0 1px 3px rgba(0,0,0,.55)}
.pb .pt small{font-size:12.5px;font-weight:500;color:#dbeafe;opacity:.92;margin-top:3px;white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.pb .chev{width:18px;height:18px;margin-left:auto;padding-left:4px;box-sizing:content-box;flex:none;color:#a5f3fc;opacity:.8;transition:transform .3s}
.pw:hover .pb,.pw.open .pb,.pb:focus-visible{transform:translateY(-4px);outline:none;
 box-shadow:inset 0 1.5px 0 rgba(255,255,255,.85),inset 0 14px 18px -14px rgba(255,255,255,.6),inset 0 -10px 18px -10px rgba(103,232,249,.5),inset -1px -1px 0 rgba(4,8,24,.3),
  0 0 0 1px rgba(165,243,252,.35),0 0 30px -4px rgba(34,211,238,.7),0 34px 40px -22px rgba(0,0,0,.75),0 24px 50px -24px rgba(124,58,237,.9)}
.pw:hover .chev,.pw.open .chev{transform:rotate(180deg)}
/* glass mega-panel */
.pp{position:absolute;top:calc(100% + 12px);left:0;width:340px;padding:14px;border-radius:18px;z-index:30;
 background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.04)),rgba(9,13,34,.72);
 -webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);
 border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 30px 60px -20px rgba(0,0,0,.7),0 0 40px -14px rgba(34,211,238,.45);
 opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);transform-origin:top left;transition:opacity .22s,transform .25s cubic-bezier(.2,.7,.2,1),visibility .22s}
.pp::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px} /* hover bridge */
.pw:hover .pp,.pw:focus-within .pp,.pw.open .pp{opacity:1;visibility:visible;transform:none}
.pph{font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:#67e8f9;padding:2px 8px 10px}.pph span{color:#94a3b8}
.pp>a{display:flex;align-items:flex-start;gap:11px;padding:10px 10px;border-radius:12px;color:#f1f5f9;text-decoration:none;transition:background .2s}
.pp>a:hover{background:rgba(103,232,249,.1)}
.pp>a i{flex:none;width:7px;height:7px;margin-top:7px;border-radius:2px;background:#67e8f9;box-shadow:0 0 8px rgba(34,211,238,.9)}
.pp>a b{display:block;font-size:14.5px;font-weight:700}.pp>a em{display:block;font-style:normal;font-size:12.5px;color:#94a3b8;margin-top:1px}
.pp>a.ppall{margin-top:4px;border-top:1px solid rgba(255,255,255,.1);border-radius:0 0 12px 12px;padding-top:12px;font-size:13px;font-weight:700;color:#a5f3fc}
.pw:nth-child(3) .pp{left:auto;right:0;transform-origin:top right}
@media(max-width:1000px){.pillars{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.pb{padding:14px 12px;gap:10px}.pb .pt b{font-size:19px}.pb .pt small{font-size:11.5px}}
@media(max-width:700px){.pillars{grid-template-columns:1fr;gap:10px;max-width:420px}.pb{padding:13px 16px}.pb .pi{width:26px;height:26px}
 .pp{position:static;width:auto;margin-top:8px;display:none;opacity:1;visibility:visible;transform:none}.pw:hover .pp,.pw:focus-within .pp{display:none}.pw.open .pp{display:block}
 .pw:hover .pb{transform:none}}
@media(prefers-reduced-motion:reduce){.pb{animation:none;transition:none}.pp{transition:none}}
/* sub-item anchors land below the fixed nav */
[id^="learn-"],[id^="teach-"],[id^="build-"]{scroll-margin-top:110px}
.grid4 .mk{display:flex;flex-direction:column}
/* ===== Bigger nav brand (mark 1.5x + bigger wordmark; effects = live sl-scan.js on the mark only) ===== */
.nb{height:84px}
.brand{font-size:30px;gap:12px;letter-spacing:-.7px}
.brand svg.slm{width:60px!important;height:60px!important}
@media(max-width:860px){.menu{top:84px!important}.nb{height:74px}.brand{font-size:24px;gap:9px}.brand svg.slm{width:48px!important;height:48px!important}}
@media(max-width:380px){.brand{font-size:21px}.brand svg.slm{width:42px!important;height:42px!important}}
.nb .brand svg.slm .ss{transition:none!important}
/* compact two-column mega-panel on desktop + flip upward when the fold is too close */
@media(min-width:701px){
 .pp{width:540px;display:grid;grid-template-columns:1fr 1fr;column-gap:4px}
 .pph,.pp>a.ppall{grid-column:1/-1}
 .pw:nth-child(2) .pp{left:50%;margin-left:-270px;transform-origin:top center}
 .pw.up .pp{top:auto;bottom:calc(100% + 12px);transform-origin:bottom left}
 .pw.up .pp::before{top:auto;bottom:-14px}
 .pw.up:nth-child(3) .pp{transform-origin:bottom right}
 .pw.up:not(:hover):not(:focus-within):not(.open) .pp{transform:translateY(6px) scale(.98)}
}
@media(min-width:701px) and (max-width:1000px){.pp{width:440px}.pw:nth-child(2) .pp{margin-left:-220px}}