/* An exploded architectural stack: clear edges, one focused sheet, quiet labels. */
.glass-foundation{padding:75px 0 80px}
.glass-foundation .foundation-layout{grid-template-columns:.85fr 1.15fr;gap:70px;align-items:center;max-width:1240px}
.glass-foundation .foundation-heading h2{font-size:clamp(36px,3.3vw,47px)}
.glass-foundation .layer-tabs{display:grid;grid-template-columns:1fr 1fr;gap:0 22px;margin-bottom:29px}
.glass-foundation .layer-tabs button{justify-content:start;text-align:left;gap:13px;padding:13px 0;border:0;border-bottom:1px solid #ffffff1c;border-radius:0;min-height:47px;font-size:13px;color:#94a9c4;background:transparent;box-shadow:none}
.glass-foundation .layer-tabs button[aria-selected=true]{background:transparent;border-color:#00cfd6;color:#fff;box-shadow:none}.layer-tab-index{font-size:9px;letter-spacing:.04em;color:#647d9e}.glass-foundation .layer-tabs button[aria-selected=true] .layer-tab-index{color:#00d0d9}
.glass-foundation .layer-explanation{min-height:154px}.glass-foundation .layer-explanation h3{font-size:27px}.glass-foundation .layer-explanation>p:not(.layer-detail){font-size:15px;max-width:340px}
.glass-foundation .foundation-visual{height:610px;perspective:1800px;max-width:680px;isolation:isolate;background:radial-gradient(ellipse at 44% 52%,#0059ff09,transparent 66%)}
.glass-foundation .foundation-stack{--sheet-step:47px;--sheet-drop:34px;left:50%;top:68px;width:480px;height:500px;transform:translateX(-50%) rotateY(var(--stack-yaw,0deg));translate:0 var(--layer-rise);rotate:x var(--layer-tilt);transform-style:preserve-3d;transition:none}
.glass-foundation .foundation-plane{width:240px;height:300px;left:calc(var(--layer)*var(--sheet-step)*(.6 + var(--layer-open)*.4));top:calc(var(--layer)*var(--sheet-drop)*(.65 + var(--layer-open)*.35));transform:translateZ(calc(var(--layer)*-20px)) rotateY(-33deg) rotateX(6deg) rotateZ(-6deg);z-index:calc(6 - var(--layer));opacity:1;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.glass-foundation .foundation-plane.selected{transform:translate3d(-20px,-10px,60px) rotateY(-33deg) rotateX(6deg) rotateZ(-6deg);z-index:12}
.glass-foundation .plane-surface{border:1px solid #a2c6e761;border-radius:11px;background:linear-gradient(145deg,#8fc8ef06,#1a32481a);box-shadow:3px 3px 0 #526f8715,0 18px 35px #00000025,inset 0 1px #d9f2ff0a;backdrop-filter:none}
.glass-foundation .plane-surface:before{inset:4px;border-color:#e6f4ff05;border-radius:8px}.glass-foundation .plane-surface:after{display:none}
.glass-foundation .foundation-plane.selected .plane-surface{background:linear-gradient(145deg,#152940dd,#10202ed9);border-color:#7abceeb5;box-shadow:3px 3px 0 #4984a82b,0 27px 55px #0004,inset 0 1px #e2f9ff18}
.glass-foundation .plane-graphic{opacity:0;stroke:#77c5ed;stroke-width:1.25;transition:opacity .35s}.glass-foundation .foundation-plane.selected .plane-graphic{opacity:.88}
.glass-foundation .plane-index{position:absolute;top:18px;left:20px;font-size:10px;letter-spacing:.06em;color:#8fc3dc;opacity:.5}.glass-foundation .foundation-plane.selected .plane-index{opacity:1;color:#b4e1f4}
.glass-foundation .plane-name{display:none}
.layer-labels{position:absolute;right:0;top:119px;width:102px;display:flex;flex-direction:column;gap:17px;font-size:11px;color:#8ca2bd}
.layer-labels>span{height:17px;display:flex;align-items:center;gap:10px;white-space:nowrap;position:relative;line-height:1.5}.layer-labels>span:before{content:'';position:absolute;right:calc(100% + 9px);width:24px;height:1px;background:#6988ac45}.layer-labels i{font-style:normal;font-size:8px;color:#506b8e}.layer-labels>span.selected{color:#d9f2ff}.layer-labels>span.selected:before{background:linear-gradient(90deg,#0059ff,#00d5d9)}.layer-labels>span.selected i{color:#00c9db}
@media(max-width:1100px){.glass-foundation .foundation-layout{gap:35px}.glass-foundation .foundation-visual{height:550px}.glass-foundation .foundation-stack{--sheet-step:33px;--sheet-drop:32px;width:390px;top:65px}.glass-foundation .foundation-plane{width:200px;height:270px}.glass-foundation .foundation-plane.selected{transform:translate3d(-14px,-8px,45px) rotateY(-33deg) rotateX(6deg) rotateZ(-6deg)}.layer-labels{width:85px;font-size:10px;top:108px;gap:15px}.layer-labels>span{gap:7px}.layer-labels>span:before{width:17px}.glass-foundation .layer-tabs button{font-size:12px}}
@media(max-width:900px){.glass-foundation .foundation-layout{grid-template-columns:1fr;gap:15px}.glass-foundation .foundation-controls{max-width:600px;margin:auto;width:100%}.glass-foundation .foundation-heading{text-align:center}.glass-foundation .foundation-visual{width:100%;max-width:650px;margin:auto;height:600px}.glass-foundation .foundation-stack{--sheet-step:45px;--sheet-drop:34px;width:490px;top:68px}.glass-foundation .foundation-plane{width:245px;height:300px}.glass-foundation .foundation-plane.selected{transform:translate3d(-20px,-10px,60px) rotateY(-33deg) rotateX(6deg) rotateZ(-6deg)}.layer-labels{width:90px;font-size:11px;top:119px;gap:17px}.glass-foundation .layer-explanation{text-align:center}.glass-foundation .layer-explanation>p:not(.layer-detail){max-width:480px;margin-inline:auto}}
@media(max-width:600px){.glass-foundation{padding:55px 0 60px}.glass-foundation .foundation-heading h2{font-size:35px}.glass-foundation .layer-tabs{gap:0 20px}.glass-foundation .layer-tabs button{min-height:45px;padding-block:12px;font-size:12px;gap:10px}.glass-foundation .layer-explanation{min-height:145px}.glass-foundation .layer-explanation h3{font-size:25px}.glass-foundation .layer-explanation>p:not(.layer-detail){font-size:14px}.glass-foundation .foundation-visual{height:425px}.glass-foundation .foundation-stack{--sheet-step:21px;--sheet-drop:28px;width:275px;left:calc(50% - 16px);height:360px;top:42px}.glass-foundation .foundation-plane{width:130px;height:200px;transform:translateZ(calc(var(--layer)*-10px)) rotateY(-32deg) rotateX(4deg) rotateZ(-4deg)}.glass-foundation .foundation-plane.selected{transform:translate3d(-8px,-5px,25px) rotateY(-32deg) rotateX(4deg) rotateZ(-4deg)}.glass-foundation .plane-index{left:13px;top:13px;font-size:8px}.glass-foundation .plane-surface{border-radius:8px}.glass-foundation .plane-surface:before{border-radius:5px}.layer-labels{right:4px;top:76px;width:67px;font-size:9px;gap:11px}.layer-labels>span{gap:5px}.layer-labels i{font-size:7px}.layer-labels>span:before{width:12px;right:calc(100% + 6px)}}
@media(prefers-reduced-motion:reduce){.glass-foundation .foundation-stack{translate:none;rotate:none}.glass-foundation .foundation-plane{left:calc(var(--layer)*var(--sheet-step));top:calc(var(--layer)*var(--sheet-drop));transition:none}.glass-foundation .plane-graphic{transition:none}}

/* Brand accents frame the shared control plane without flooding the glass sheets. */
.glass-foundation .foundation-plane.selected .plane-surface{border-color:transparent;background:linear-gradient(145deg,#13243b,#10282c) padding-box,linear-gradient(140deg,#0059ff,#00ffd4) border-box;box-shadow:3px 3px 0 #00c9d51b,0 27px 55px #0004,0 0 27px #0059ff10,inset 0 1px #e2f9ff0d}
.glass-foundation .foundation-plane.selected .plane-graphic{opacity:1}
.glass-foundation .foundation-plane.selected .plane-graphic image{opacity:1}
.glass-foundation .layer-tabs button[aria-selected=true]{border-image:linear-gradient(90deg,#0059ff,#00ffd4) 1}
.glass-foundation .layer-explanation h3{max-width:470px;line-height:1.2}
.glass-foundation .layer-explanation{min-height:185px}
@media(max-width:600px){.glass-foundation .layer-tabs button{font-size:11px}.glass-foundation .layer-explanation{min-height:192px}.glass-foundation .layer-explanation>p:not(.layer-detail){max-width:325px}.glass-foundation .foundation-layout{gap:10px}}
@media(forced-colors:active){.glass-foundation .foundation-plane.selected .plane-surface{border-color:Highlight;background:Canvas}.glass-foundation .layer-tabs button[aria-selected=true]{border-image:none;border-color:Highlight}}

/* A travelling wave through the glass, independent of hover and tab selection. */
.glass-foundation[data-foundation] .foundation-plane{animation:foundation-layer-flow 7.2s ease-in-out infinite;animation-delay:calc(var(--layer)*-.8s);animation-play-state:paused}
.glass-foundation[data-foundation] .foundation-plane .plane-surface:after{content:'';display:block;position:absolute;inset:-10%;pointer-events:none;background:linear-gradient(115deg,transparent 25%,#59a6ff0a 42%,#72e8ef17 50%,transparent 68%);animation:foundation-light-flow 7.2s ease-in-out infinite;animation-delay:calc(var(--layer)*-.8s);animation-play-state:paused}
.glass-foundation.foundation-flow-running .foundation-plane,
.glass-foundation.foundation-flow-running .foundation-plane .plane-surface:after{animation-play-state:running}
@keyframes foundation-layer-flow{0%,100%{translate:0 0}30%{translate:3px -10px}65%{translate:-3px 5px}}
@keyframes foundation-light-flow{0%,10%{transform:translateX(-120%);opacity:0}35%,65%{opacity:.8}90%,100%{transform:translateX(120%);opacity:0}}
@media(max-width:600px){@keyframes foundation-layer-flow{0%,100%{translate:0 0}30%{translate:2px -6px}65%{translate:-2px 3px}}}
html[data-access-motion=true] .glass-foundation[data-foundation] .foundation-plane,
html[data-access-motion=true] .glass-foundation[data-foundation] .plane-surface:after{animation:none!important}
@media(prefers-reduced-motion:reduce){.glass-foundation[data-foundation] .foundation-plane,.glass-foundation[data-foundation] .plane-surface:after{animation:none!important}}