.hero-carousel{--hero-art-scale:1;min-width:0;position:relative;align-self:start;width:100%;max-width:600px;margin:0 auto}.hero-scenes{position:relative;height:550px;touch-action:pan-y}.hero-scene{position:relative;height:100%;min-width:0}.hero-carousel .hero-art{position:relative;width:500px;min-width:500px;max-width:none;height:510px;min-height:510px;margin:0 0 0 -250px;left:50%;top:0;transform:scale(var(--hero-art-scale));transform-origin:50% 0;overflow:clip}.hero .hero-bottom{margin-top:24px}
.hero-comparison-scene{display:flex;align-items:center;padding:10px 4px}.hero-comparison-panel{width:100%;padding:26px;border:1px solid #536b3d;border-radius:22px;background:radial-gradient(ellipse at 100% 0,#435d2a40,transparent 65%),linear-gradient(145deg,#142020,#0e171b);box-shadow:0 24px 55px #0003}.hero-comparison-panel h2{font-size:clamp(25px,2.7vw,36px);line-height:1.15;margin-bottom:22px;max-width:400px;text-wrap:balance}
.hero-storage-card{padding:17px 18px;background:#0b1519b0;border:1px solid #354538;border-radius:12px;min-width:0}.hero-storage-card+.hero-storage-card{margin-top:14px}.hero-storage-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.hero-storage-heading strong{display:block;font-size:14px;font-weight:500;line-height:1.4}.hero-storage-heading small{display:block;font-size:10px;color:#a9b7ac;margin-top:3px}.hero-storage-heading>span{white-space:nowrap;font-size:28px;font-weight:500;letter-spacing:-.04em;line-height:1.2}.hero-zion-name{display:flex;align-items:center;gap:10px;min-width:0}.hero-zion-name img{border-radius:8px;flex-shrink:0}.hero-zion-card{border-color:#7eab4c;background:linear-gradient(120deg,#26382099,#15231e)}.hero-zion-card .hero-storage-heading>span{color:var(--green)}
.hero-capacity-bar{height:14px;display:flex;overflow:hidden;border-radius:4px;background:#2a382f;margin-top:14px}.hero-capacity-bar>i{display:block;height:100%;min-width:0}.hero-media-segment{width:65%;background:#b0ce8e}.hero-files-segment{width:20%;background:#718b9b}.hero-email-segment{width:15%;background:#a291b5}.hero-zion-segment{width:100%;background:linear-gradient(90deg,#93ca57,#d1fc97)}
.hero-capacity-legend{display:flex;flex-wrap:wrap;gap:7px 12px;list-style:none;padding:0;margin:12px 0 0;font-size:10px;line-height:1.6;color:#b8c7b9}.hero-capacity-legend li{display:flex;align-items:center;gap:5px}.hero-capacity-legend b{font-weight:500;color:#e4eddf;white-space:nowrap}.hero-capacity-legend i{display:inline-block;width:5px;height:5px;border-radius:1px}.hero-media-dot{background:#b0ce8e}.hero-files-dot{background:#718b9b}.hero-email-dot{background:#a291b5}.hero-zion-card>p{font-size:11px;color:#c5dfa9;margin:12px 0 0;line-height:1.5}.hero-comparison-panel .hero-example-note{font-size:10px;line-height:1.7;color:#98aa9b;margin:16px 0 0}.hero-comparison-panel>.text-link{font-size:11px;margin-top:6px;padding-block:6px;min-height:36px}
.hero-carousel-controls{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:6px 10px;position:relative;z-index:5;max-width:440px;margin:0 auto}.hero-carousel-controls button{font:inherit;min-height:44px;border:1px solid #344736;background:#111e1e;color:#b8c8b8;border-radius:8px;cursor:pointer;transition:border-color .2s,background .2s}.hero-carousel-controls button:hover{border-color:#a1c56e;color:#e6f6d6}.scene-arrow{font-size:20px!important;line-height:1}.scene-picker{display:flex;gap:6px;min-width:0}.scene-picker button{flex:1;min-width:0;font-size:11px;padding:8px 6px;line-height:1.4}.scene-picker button[aria-pressed=true]{color:var(--green);border-color:#88af58;background:#243720}
.hero-scene.is-entering{animation:hero-scene-in .45s ease both}.hero-scene.is-entering .hero-capacity-bar{animation:hero-bar-in .7s ease both;transform-origin:left}.hero-carousel[data-running=false] .hero-art *{animation-play-state:paused}
@keyframes hero-scene-in{from{opacity:0;translate:0 6px}to{opacity:1;translate:0 0}}@keyframes hero-bar-in{from{transform:scaleX(.55)}to{transform:scaleX(1)}}
@media(max-width:1150px){.hero-scenes{height:520px}.hero-carousel{--hero-art-scale:.8}.hero-carousel .hero-art{top:35px}.hero-comparison-panel{padding:22px}.hero-storage-heading>span{font-size:25px}.hero-comparison-panel h2{font-size:28px}.hero-storage-card{padding:16px}.hero-storage-heading strong{font-size:13px}}
@media(min-width:741px) and (max-width:900px){.hero-carousel{--hero-art-scale:.62}.hero-carousel .hero-art{top:65px}.hero-comparison-panel{padding:18px}.hero-storage-card{padding:13px}.hero-storage-heading{gap:8px}.hero-storage-heading>span{font-size:23px}.hero-comparison-panel h2{font-size:26px}.hero-zion-name{gap:6px}.hero-zion-name img{width:26px;height:26px}.hero-storage-heading strong{font-size:12px}.hero-capacity-legend{gap:5px 10px;font-size:9px}.hero-comparison-panel .hero-example-note{font-size:9px}.hero-carousel-controls{gap:6px}.scene-picker button{font-size:10px}}
@media(max-width:740px){.hero-carousel{--hero-art-scale:.82;margin-top:26px;max-width:460px}.hero-scenes{height:520px}.hero-carousel .hero-art{top:25px}.hero-comparison-panel h2{font-size:29px;margin-bottom:18px}.hero-comparison-panel{padding:22px}.hero-carousel-controls{max-width:400px}.hero-storage-heading>span{font-size:27px}.hero-comparison-panel .hero-example-note{font-size:10px}.hero .hero-bottom{margin-top:24px}}
@media(max-width:430px){.hero-carousel{--hero-art-scale:.7}.hero-carousel .hero-art{top:35px}.hero-comparison-panel{padding:20px}.hero-storage-card{padding:15px}.hero-storage-heading>span{font-size:25px}.hero-comparison-panel h2{font-size:28px}}
@media(max-width:380px){.hero-carousel{--hero-art-scale:.56}.hero-carousel .hero-art{top:65px}.hero-scenes{height:520px}.hero-comparison-panel{padding:17px}.hero-storage-card{padding:13px}.hero-storage-heading{gap:8px}.hero-storage-heading>span{font-size:23px}.hero-storage-heading strong{font-size:12px}.hero-zion-name{gap:6px}.hero-zion-name img{width:25px;height:25px}.hero-comparison-panel h2{font-size:26px}.hero-comparison-panel .hero-example-note{font-size:9px}.hero-capacity-legend{font-size:9px;gap:6px 10px}.hero-carousel-controls{gap:6px}.scene-picker button{font-size:10px}}
@media(prefers-reduced-motion:reduce){.hero-scene.is-entering,.hero-scene.is-entering .hero-capacity-bar{animation:none}.hero-carousel-controls button{transition:none}}

.scene-progress-track{grid-column:1/-1;height:2px;width:100%;margin-top:8px;border-radius:2px;overflow:hidden;background:#293a2a}.scene-progress-track>span{display:block;width:100%;height:100%;background:#b6e87b;transform:scaleX(0);transform-origin:left;opacity:.8}.hero-carousel[data-running=false] .scene-progress-track>span{opacity:.35}
