/* Expressive REEL hero + component explorer. Static artwork remains usable
   without JavaScript; GSAP owns motion and respects reduced-motion settings. */
.reel-intro-motion { background:linear-gradient(125deg,#f6f9fb 15%,#edf3f7 100%); padding:113px 0 32px; overflow:hidden; }
.reel-intro-motion .intro-columns { grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr); align-items:center; gap:34px; }
.reel-intro-motion .intro-copy { position:relative; z-index:1; }
.reel-intro-motion h1 { font-size:clamp(42px,4.35vw,62px); line-height:1.04; font-weight:550; letter-spacing:-.055em; margin-bottom:25px; }
.reel-intro-motion h1 span { color:#1a6b9c; }
.reel-intro-motion .intro-lead { font-size:17px; line-height:1.7; max-width:530px; }
.reel-intro-motion .intro-actions { margin-top:27px; }
.reel-intro-motion .intro-actions a { font-size:14px; padding:13px 18px; }
.reel-intro-motion .intro-access-note { font-size:12px; max-width:490px; }
.reel-intro-motion .intro-facts { display:flex; flex-wrap:wrap; align-items:center; gap:24px 32px; padding:24px 0 0; border-left:0; border-top:1px solid #d3dfe7; margin-top:27px; }
.reel-intro-motion .intro-facts>div { margin:0; gap:8px; }
.reel-intro-motion .intro-facts strong { font-size:24px; letter-spacing:-.8px; }
.reel-intro-motion .intro-facts span { font-size:12px; }
.reel-intro-motion .intro-facts p { display:block; margin:0; font-size:12px; max-width:270px; line-height:1.65; }
.reel-intro-motion .intro-facts a { font-size:12px; margin-left:auto; }
.hero-lab { position:relative; min-width:0; margin:0 -30px 0 0; padding:0; }
.hero-device-stage { position:relative; }
.hero-device-stage::before { content:""; position:absolute; inset:6% -5% -2%; border-radius:50%; background:radial-gradient(ellipse,#c9e3ed66,transparent 68%); pointer-events:none; }
.hero-device { position:relative; width:100%; height:auto; display:block; overflow:visible; }
.hero-lab-controls { position:absolute; right:26px; bottom:2px; }
.hero-lab-controls[hidden] { display:none; }
.hero-motion-toggle { display:grid; place-items:center; width:44px; height:44px; color:#536d7d; background:transparent; border:1px solid transparent; border-radius:50%; cursor:pointer; }
.hero-motion-toggle:hover { background:#d8e7ef80; border-color:#b5cbd9; }
.hero-motion-toggle:focus-visible { outline:2px solid #1a6b9c; outline-offset:3px; }
.hero-motion-icon { width:9px; height:10px; border-left:2px solid currentColor; border-right:2px solid currentColor; }
.hero-motion-toggle[data-paused="true"] .hero-motion-icon { height:0; width:0; border:5px solid transparent; border-right:0; border-left:7px solid currentColor; }
/* Tactile parts and copper routing keep the explorer tied to real hardware. */
.reel-home .reel-intro + .newsletter-section { padding:32px 0; background:#f7f9fb; }
.reel-home .stack-layout > #coverage { grid-column:1 / -1; padding:30px; border-top:1px solid #dce3eb; border-radius:0 0 9px 9px; }
.reel-home .stack-layout > #coverage h3 { font-size:24px; line-height:1.25; margin:0 0 10px; }
.reel-home .stack-layout > #coverage .text-center { margin-bottom:22px; }
.stack-layout > .stack-visual { border-bottom-left-radius:0; }
.stack-layout > .stack-detail { border-bottom-right-radius:0; }
.stack-visual { background:radial-gradient(ellipse at 48% 25%,#214157 0,#142b3e 60%,#122638 100%); }
.stack-visual .server-chassis { background:linear-gradient(150deg,#244351,#172e40 70%); border:1px solid #607b8b; box-shadow:0 10px 25px #07162350,inset 0 0 0 7px #243c4e; }
.stack-visual .server-traces { color:#d0b080; opacity:.8; }
.stack-visual .server-traces g { opacity:.16; }
.stack-visual .srv-comp { transition:opacity .2s; }
.stack-visual .srv-comp-box { border-radius:4px; }
.stack-visual .srv-cpu .srv-comp-box { border-color:#83aaba; background:linear-gradient(145deg,#7891a0,#24485e 45%,#547887); box-shadow:0 3px 0 #0e293c,0 5px 10px #06152155; }
.stack-visual .die-inner { border-color:#91c8dc; background:repeating-linear-gradient(90deg,transparent 0 9px,#a8d1e033 9px 10px),repeating-linear-gradient(0deg,#225779 0 9px,#9bc9dc66 9px 10px); box-shadow:0 2px 4px #092539; }
.stack-visual .srv-pcb .srv-comp-box { background:#1f5d5625; border:1px solid #558378; box-shadow:inset 0 0 0 4px #11333030; }
.stack-visual .srv-hbm .srv-comp-box { background:#193444; border-color:#927d61; padding:4px; }
.stack-visual .srv-hbm-stack { border-color:#9e8c70; background:linear-gradient(145deg,#756e59,#3b4545); box-shadow:0 2px 0 #0c2230; }
.stack-visual .srv-hbm-layer { background:#b8a889; }
.stack-visual .srv-dimms .srv-comp-box { background:#233e47; border-color:#7e988c; }
.stack-visual .srv-dimm { border-color:#ab9c7e; background:linear-gradient(90deg,#283e42,#86795f); }
.stack-visual .srv-psu .srv-comp-box { border-color:#8097a6; background:repeating-linear-gradient(90deg,#607b8a 0 2px,#3f5b6f 2px 5px); box-shadow:0 4px 0 #0d2437; }
.stack-visual .srv-psu-fan { width:40px; height:40px; border:4px solid #76909f; background:repeating-conic-gradient(#193347 0 25deg,#4b697c 25deg 60deg); box-shadow:0 0 0 1px #173244; }
.stack-visual .srv-fan-circle { border-color:#7390a2; background:radial-gradient(circle,#567887,#253d52 70%); box-shadow:0 3px 4px #061c2a; }
.stack-visual .srv-fan-inner { width:24px; height:24px; border:2px solid #415e70; background:repeating-conic-gradient(#9ab6c3 0 30deg,#193b50 30deg 90deg); }
.stack-visual .srv-drive-slot { height:13px; border-color:#72899a; background:linear-gradient(90deg,#304e61,#48657a); box-shadow:0 1px 2px #071e31; }
.stack-visual .srv-drive-led { background:#7bb6ad; }
.stack-visual .srv-drive-ff { display:none; }
.stack-visual .srv-pcie-slot { border-color:#c4ae83; background:repeating-linear-gradient(90deg,#ac9877 0 2px,#394d53 2px 4px); box-shadow:0 2px 0 #102b3f; }
.stack-visual .srv-passives .srv-comp-box { border-style:solid; border-color:#657e84; background:linear-gradient(145deg,#30474d,#263f4c); gap:6px; }
.stack-visual .srv-pdot { width:7px; height:5px; background:linear-gradient(90deg,#bfcdca 0 18%,#867758 18% 82%,#bfcdca 82%); box-shadow:0 1px 2px #0c2032; }
.stack-visual .srv-infra .srv-comp-box { background:linear-gradient(150deg,#577484,#2b465a); border-color:#889da9; box-shadow:0 2px 0 #102a3c; }
.stack-visual .srv-infra-icon,.stack-visual .srv-infra-icon::after { border-color:#a7bdc9; }
.stack-visual .server-chassis [data-stack-key][aria-pressed="true"]::after { border-color:#a6d8ed; box-shadow:0 0 13px #7ab8d02b; }
.stack-visual .server-chassis [data-stack-key][aria-pressed="true"] .srv-comp-box { border-color:#b7ddea; }
.stack-visual .srv-comp:hover .srv-comp-label { color:white; }
.stack-visual .srv-comp:hover .srv-comp-box { box-shadow:0 0 12px #8dc9e033; }
/* Reserve room for labels and contain selection rings to the hardware. */
.stack-visual .server-chassis { aspect-ratio:1.45; }
.stack-visual .srv-comp { display:grid; grid-template-rows:minmax(0,1fr) auto; gap:9px; }
.stack-visual .srv-comp > :first-child { position:relative; min-height:0; height:100%; }
.stack-visual .srv-comp-label { line-height:1.25; margin-top:0; }
.stack-visual .server-chassis [data-stack-key]::after { content:none; }
.stack-visual .server-chassis [data-stack-key] > :first-child::after { content:''; position:absolute; inset:-3px; border:2px solid transparent; border-radius:5px; pointer-events:none; transition:border-color .15s; }
.stack-visual .server-chassis [data-stack-key][aria-pressed="true"] > :first-child::after { border-color:#a6d8ed; box-shadow:0 0 12px #7ab8d025; }
.stack-visual .server-chassis [data-stack-key]:hover > :first-child::after { border-color:#d6eafb; }
.stack-visual .server-chassis [data-stack-key]:focus-visible { outline:none; }
.stack-visual .server-chassis [data-stack-key]:focus-visible > :first-child::after { outline:2px solid white; outline-offset:3px; }
.stack-visual .srv-cpu { grid-template-rows:auto auto; }
.stack-visual .srv-cpu .srv-comp-box { height:auto; aspect-ratio:1; }
.stack-visual #srv-cpu1 { top:58%; }
.stack-visual .srv-dimms { top:40%; height:14%; }
.stack-visual .srv-dimm-stick { background:repeating-linear-gradient(0deg,#233c45 0 5px,#8e9c85 5px 7px); border-color:#ab9c7e; }
.stack-visual #srv-hbm-l0,.stack-visual #srv-hbm-r0 { top:10%; height:23%; }
.stack-visual #srv-hbm-l1,.stack-visual #srv-hbm-r1 { top:60%; height:23%; }
.stack-visual .srv-pcb .srv-comp-label { bottom:12px; left:0; width:100%; }
.stack-visual .srv-psu,.stack-visual .srv-drives { top:7%; height:26%; }
.stack-visual .srv-fans { top:40%; height:15%; }
.stack-visual .srv-fan-row { gap:8px; }
.stack-visual .srv-fan-circle { flex:0 1 34px; min-width:0; aspect-ratio:1; height:auto; }
.stack-visual .srv-drive-stack { gap:4px; }
.stack-visual .srv-drive-slot { flex:1; min-height:0; }
.stack-visual .srv-pcie { top:60%; height:15%; }
.stack-visual .srv-pcie-slots { justify-content:space-between; gap:5px; }
.stack-visual .srv-pcie-slot { height:8px; flex:0 1 8px; }
.stack-visual .srv-infra { top:80%; height:13%; }
.stack-visual .srv-infra-icon { width:22px; height:22px; }
.stack-visual .srv-passives { top:60%; height:33%; }
.stack-visual .srv-passives .srv-comp-box { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(4,1fr); place-items:center; gap:8px; padding:12px 8px; }
.stack-visual .srv-pdot { width:17px; height:10px; }
.stack-visual .srv-pdot:nth-child(3n+2) { height:7px; background:linear-gradient(90deg,#bdcbd0 0 18%,#1c303b 18% 82%,#bdcbd0 82%); }
.stack-visual .srv-pdot:nth-child(3n) { width:20px; height:20px; border-radius:50%; background:repeating-conic-gradient(#ba9262 0 18deg,#705f43 18deg 30deg); border:3px solid #a18760; box-shadow:inset 0 0 0 4px #213b46,0 2px 2px #0c2032; }
@media(max-width:1100px) {
 .stack-layout { grid-template-columns:minmax(0,1fr); }
 .stack-visual { border-radius:9px 9px 0 0; }
 .stack-visual .server-wrapper,.stack-choices,.stack-map-heading { max-width:680px; margin-left:auto; margin-right:auto; }
 .stack-detail { border-radius:0; }
 #stack-examples { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 22px; }
 .reel-intro-motion .intro-columns { gap:16px; }
 .reel-intro-motion h1 { font-size:48px; }
 .reel-intro-motion .intro-facts { gap:16px 25px; }
 .hero-lab { margin-right:-12px; }
}
@media(max-width:900px) {
 .reel-intro-motion { padding-top:106px; }
 .reel-intro-motion .intro-columns { grid-template-columns:1fr; gap:30px; }
 .reel-intro-motion .intro-copy { max-width:620px; }
 .reel-intro-motion h1 { max-width:650px; font-size:54px; }
 .hero-lab { max-width:620px; width:100%; margin:0 auto; }
 .reel-intro-motion .intro-facts { margin-top:26px; }
 .stack-visual { background:linear-gradient(145deg,#f0f5f8,#e5edf3); }
}
@media(max-width:640px) {
 .reel-home .stack-layout > #coverage { padding:22px; }
 .reel-home .stack-layout > #coverage h3 { font-size:22px; }
 #stack-examples { grid-template-columns:minmax(0,1fr); }
 .reel-intro-motion { padding-top:101px; padding-bottom:26px; }
 .reel-intro-motion h1 { font-size:clamp(32px,10vw,43px); line-height:1.08; margin-bottom:21px; }
 .reel-intro-motion .intro-lead { font-size:16px; line-height:1.65; }
 .reel-intro-motion .intro-actions { margin-top:24px; gap:10px; }
 .reel-intro-motion .intro-actions a { font-size:13px; padding:12px 13px; }
 .reel-intro-motion .intro-columns { gap:26px; }
 .hero-lab { margin:0 -12px; width:calc(100% + 24px); max-width:none; }
 .hero-lab-controls { right:10px; bottom:-4px; }
 .reel-intro-motion .intro-facts { gap:13px 22px; }
 .reel-intro-motion .intro-facts strong { font-size:22px; }
 .reel-intro-motion .intro-facts p { max-width:none; flex-basis:100%; }
 .reel-intro-motion .intro-facts a { margin-left:0; }
}
@media(max-width:480px) {
 .reel-home .stack-layout > #coverage .category-grid { grid-template-columns:minmax(0,1fr); }
 .reel-home .stack-layout > #coverage .category-grid-cell:not(:last-child) { border-bottom:1px solid var(--reel-rule)!important; }
 .reel-home .stack-layout > #coverage .category-grid-cell:last-child { border-bottom:0!important; }
}
@media(max-width:360px) {
 .reel-intro-motion .intro-actions { flex-direction:row; }
 .reel-intro-motion .intro-actions a { font-size:12px; padding:12px 10px; }
}
@media(prefers-reduced-motion:reduce) {
 .stack-visual .srv-comp { transition:none; }
}