/* Perspective stack inspired by the React Bits Depth Carousel reference. */
.product-showcase{min-width:0;position:relative;isolation:isolate}.product-showcase .showcase-heading{margin-bottom:20px}
.showcase-heading{display:flex;justify-content:space-between;gap:12px;padding:0 8px;font:10px Consolas,monospace;color:#a1b1aa;letter-spacing:.04em}
.showcase-heading a{color:#78ffc2;text-decoration:none}
.depth-stage{height:auto;aspect-ratio:780/1260;position:relative;perspective:1400px;perspective-origin:50% 50%;touch-action:pan-y;cursor:grab;outline-offset:5px}
.depth-stage:active{cursor:grabbing}
.depth-stage::before{content:"";position:absolute;inset:14% 0;background:radial-gradient(ellipse,#00e88412,transparent 65%);pointer-events:none}
.depth-card{position:absolute;top:50%;left:50%;width:100%;height:100%;margin:0;border:1px solid #2a5845;border-radius:18px;background:#0a1712;overflow:hidden;box-shadow:0 22px 45px #0006;transform:translate(-50%,-50%);transform-origin:center;backface-visibility:hidden;will-change:transform;transition:transform 500ms cubic-bezier(.22,1,.36,1),filter 500ms ease,opacity 500ms ease;user-select:none}
.depth-card:not(:first-child){visibility:hidden}
.depth-ready .depth-card{visibility:visible}
.depth-card img{width:100%;height:100%;object-fit:contain;object-position:top;pointer-events:none}
.depth-card[data-format=wide] img{object-fit:contain;background:linear-gradient(#0a1712,#0f2920)}
.depth-card figcaption{display:none}
.depth-card figcaption span{font:10px Consolas,monospace;color:#00e884}
.showcase-controls{position:relative;z-index:20;margin-top:18px;display:flex;justify-content:center;align-items:center;gap:12px;min-height:48px}
.depth-arrow{border:1px solid #2a5845;border-radius:50%;width:44px;height:44px;color:#cde9dd;background:#0b1b15;font-size:24px;cursor:pointer}
.depth-arrow:hover{background:#153d2b;border-color:#00e884}
.depth-dots{display:flex;gap:3px}
.depth-dot{display:grid;place-items:center;width:28px;height:44px;padding:0;border:0;background:transparent;cursor:pointer}
.depth-dot::after{content:"";width:6px;height:6px;border-radius:8px;background:#486357;transition:width .3s,background .3s}
.depth-dot[aria-current=true]::after{width:20px;background:#b8ffdc}
.showcase-caption{text-align:center;min-height:23px;color:#b1c9bd;font-size:12px;margin:10px 0 0}
.showcase-note{text-align:center;font-size:10px;line-height:1.7;color:#78988b;margin:5px 0}
.showcase-note a{color:#a3d5b8;text-underline-offset:3px}
.ranking-page .ranking-intro{padding-top:60px!important}.ranking-page h1{font-size:clamp(30px,4vw,48px);line-height:1.25;text-wrap:balance}
.ranking-page nav a[aria-current=page]{color:#00e884}
.ranking-preview{margin:36px 0;padding:14px;border:1px solid #214b37;border-radius:12px;background:#0c2018}
.ranking-preview img{max-height:800px;width:100%;object-fit:contain;object-position:top}
.ranking-preview figcaption{font-size:12px;color:#a1b1aa;text-align:center;padding-top:12px}
.ranking-intro{position:relative;scroll-margin-top:24px;padding:64px 0!important}
.ranking-intro-head{max-width:760px}
.ranking-intro-head h2{font-size:clamp(27px,4vw,42px);line-height:1.3;letter-spacing:-.03em;margin:14px 0}
.ranking-intro-head p{font-size:16px;color:#a1b1aa;max-width:680px;margin:0}
.ranking-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:30px}
.ranking-card{position:relative;overflow:hidden;border:1px solid #214b37;background:linear-gradient(140deg,#112c20,#0a1712);padding:26px;min-width:0;border-radius:7px}
.ranking-number{display:block;color:#00e884;font:28px Consolas,monospace;margin-bottom:30px}
.ranking-card h3{font-size:18px;margin:0 0 12px;font-weight:600}
.ranking-card p{color:#a1b1aa;font-size:13px;margin:0;line-height:1.85}
.ranking-pro{display:inline-block;vertical-align:middle;font:700 9px Consolas,monospace;padding:3px 5px;color:#ecd077;border:1px solid #786733;border-radius:3px}
.ranking-context{color:#78988b;font-size:12px;line-height:1.85;margin:20px 0 30px;max-width:870px}
.ranking-start{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;padding:28px;border:1px solid #214b37;border-radius:7px;background:#0c2018}
.ranking-start h3{margin:0 0 14px;font-size:19px}
.ranking-start ol{padding-left:23px;margin:0;color:#bdd1c6;font-size:13px;line-height:2.2}
.ranking-start li::marker{color:#00e884;font-family:Consolas,monospace}
.ranking-next{align-self:center;border-left:1px solid #214b37;padding-left:32px}
.ranking-next p{color:#a1b1aa;font-size:13px;margin:0 0 12px}
.ranking-next a{display:inline-flex;align-items:center;min-height:44px;margin-right:20px;color:#78ffc2;font-size:12px;text-decoration:none}
.reveal-pending{opacity:0;transform:translateY(26px)}
.reveal-ready{transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.2,1)}
.reveal-ready.reveal-visible{opacity:1;transform:translateY(0)}
.page-scroll-progress{position:fixed;top:0;left:0;width:100%;height:2px;transform:scaleX(0);transform-origin:left;background:#00e884;z-index:50;pointer-events:none}

@media(max-width:820px){.product-showcase{width:100%;max-width:580px;margin:auto}.ranking-cards{gap:10px}.ranking-card{padding:20px}.ranking-card h3{font-size:16px}}
@media(max-width:600px){.depth-stage{height:auto}.depth-card{border-radius:8px}.depth-card figcaption{display:none}.showcase-heading{font-size:9px}.ranking-intro{padding:38px 0!important}.ranking-cards{grid-template-columns:1fr}.ranking-card{padding:22px}.ranking-number{font-size:20px;margin-bottom:12px}.ranking-start{grid-template-columns:1fr;gap:22px;padding:22px}.ranking-next{border-left:0;border-top:1px solid #214b37;padding:18px 0 0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.depth-card,.depth-dot::after{transition:none!important}.reveal-pending{opacity:1;transform:none}.reveal-ready{transition:none}}
@media(max-width:1400px){.site-head .brand small{display:none}.site-head{gap:18px}.site-head nav{gap:18px}}

.depth-autoplay{display:flex;align-items:center;justify-content:center;gap:7px;width:max-content;min-height:32px;margin:4px auto 0;color:#a1b1aa;font-size:11px;cursor:pointer}
.depth-autoplay input{appearance:none;width:28px;height:16px;border:1px solid #486357;border-radius:20px;background:#153023;margin:0;position:relative;cursor:pointer}
.depth-autoplay input::after{content:"";position:absolute;top:2px;left:2px;width:10px;height:10px;border-radius:50%;background:#94b4a3;transition:transform .18s}
.depth-autoplay input:checked{background:#00ba6b;border-color:#00d77c}
.depth-autoplay input:checked::after{transform:translateX(12px);background:#fff}
@media(prefers-reduced-motion:reduce){.depth-autoplay input::after{transition:none}}