/* V15: the hero presents Mango; the second section explains the features. */
.showcase-hero{height:auto;--mx:0;--my:0}
.showcase-stage{height:auto;min-height:0;position:relative;top:auto;padding:32px 0 0}
.showcase-copy{position:relative;z-index:5;text-align:center;padding:0 24px}
.showcase-copy>.eyebrow{justify-content:center;color:var(--text);font-family:Sora,sans-serif;font-size:15px;font-weight:700;letter-spacing:-.03em;margin-bottom:20px}
.showcase-copy h1{font-size:clamp(45px,5.5vw,82px);line-height:1.14;letter-spacing:-.06em}
.showcase-copy .hero-lead{font-size:18px;line-height:1.65;margin-top:16px;color:var(--muted)}
.showcase-copy .ribbon-actions{margin-top:24px}
.showcase-copy .cta{font-size:14px;margin-top:0}
.showcase-copy .text-link{font-size:14px}

.showcase-aura{display:none}
.showcase-visual{position:relative;z-index:2;width:min(1340px,96%);margin:28px auto 0;perspective:1700px}
.showcase-mockup{position:relative;aspect-ratio:1672/941;isolation:isolate;transform:rotateX(calc(var(--my)*-1.6deg)) rotateY(calc(var(--mx)*2.1deg));transition:transform 850ms var(--ease);animation:showcase-breathe 9s ease-in-out infinite;mask-image:linear-gradient(to bottom,#000 92%,transparent 100%),linear-gradient(to right,transparent,#000 7%,#000 93%,transparent);mask-composite:intersect}
.showcase-scene{width:100%;height:100%;object-fit:contain;mix-blend-mode:lighten}
.showcase-mockup{background:var(--bg)}
.showcase-screen{position:absolute;left:0;top:0;transform-origin:0 0;overflow:hidden;background:#07080a;pointer-events:none}
.showcase-screen>img{width:100%;height:100%;max-width:none;object-fit:contain}
.showcase-tv{clip-path:polygon(0 0,100% 0,100% 73.5%,63% 73.5%,62% 74%,61.2% 76%,61.2% 100%,55.8% 100%,55.5% 97%,54.2% 93%,52.2% 89%,50.2% 85.5%,51% 83.5%,50.7% 81.5%,50% 81.2%,49% 83%,47% 82%,44% 81.3%,41% 81%,39% 82%,37% 84%,36% 87%,35.8% 90%,36.2% 93%,36.8% 95%,34.5% 97%,32% 100%,1.2% 100%,1.2% 67%,0 63%)}
.showcase-phone{border-radius:21px}
.showcase-computer{border-radius:3px}
.showcase-stage .hero-number{display:none}
.showcase-stage .light-dust{z-index:3;opacity:1}
@keyframes showcase-breathe{0%,100%{translate:0 0}50%{translate:0 -7px}}

.exp-feature-ribbon{position:relative;isolation:isolate}
.exp-feature-ribbon>.light-dust{inset:-100px -5% 0;width:110%;height:calc(100% + 100px);z-index:-1}
.exp-feature-ribbon .experience-heading{position:relative;z-index:4;align-items:center;margin-bottom:24px}
.exp-feature-ribbon .experience-heading h2{font-size:clamp(37px,4.7vw,69px);line-height:1.16}
.exp-feature-ribbon .experience-heading>p{font-size:17px;line-height:1.65;max-width:310px;color:var(--muted)}
.feature-ribbon-stage{height:445px;position:relative;margin:28px -7% 0;isolation:isolate;overflow:clip}
.feature-ribbon{inset:20px 0 auto;min-height:0;height:410px;perspective:1500px}
.feature-ribbon .ribbon-card{width:clamp(250px,23vw,330px);height:372px;border-radius:21px;background:linear-gradient(145deg,#23232c,#17171f 75%);border-color:#ffffff28;transition:border-color 400ms}
.feature-ribbon .ribbon-card[data-centered]{border-color:#e07b3970}
.feature-ribbon .ribbon-card:hover{border-color:var(--orange)}
.deck-card-number{position:absolute;top:22px;left:24px;font:700 12px Sora;letter-spacing:-.03em;color:var(--orange)}
.feature-ribbon .ribbon-card-title{top:48px;left:24px;right:16px;font:700 clamp(19px,1.7vw,24px)/1.3 Sora;letter-spacing:-.045em}
.deck-card-copy{position:absolute;top:104px;left:24px;right:24px;font-size:14px;line-height:1.5;color:#c4c4cf;text-align:left}
.feature-ribbon .ribbon-art{top:140px;bottom:49px;left:7px;right:7px}
.feature-ribbon .ribbon-clap .ribbon-art{top:122px;left:9%;right:9%;bottom:38px}
.feature-ribbon .ribbon-offline .ribbon-art{top:123px;bottom:34px;left:8%;right:8%}
.feature-ribbon .ribbon-reader .ribbon-art,.feature-ribbon .ribbon-sports .ribbon-art,.feature-ribbon .ribbon-replay .ribbon-art{top:163px;left:23px;right:-15%;bottom:81px;overflow:visible;transform:perspective(650px) rotateY(-13deg) rotateZ(-4deg)}
.feature-ribbon .ribbon-reader .ribbon-art>img,.feature-ribbon .ribbon-sports .ribbon-art>img,.feature-ribbon .ribbon-replay .ribbon-art>img{width:100%;height:100%;object-fit:contain;border-radius:9px;border:1px solid #ffffff24;background:#09090c;box-shadow:0 17px 27px #0006}
.feature-ribbon .ribbon-cast .ribbon-art{left:-8%;right:-8%;top:140px;bottom:44px}
.feature-ribbon .ribbon-footer{font-size:12px;padding:17px 22px;gap:9px}
.deck-controls{display:flex;justify-content:center;align-items:center;gap:25px;margin:0 auto 28px;position:relative;z-index:4}
.deck-controls>button{width:45px;height:45px;border:1px solid #ffffff29;border-radius:50%;font-size:23px;background:#191920;transition:background 350ms,border-color 350ms,transform 350ms}
.deck-controls>button:hover{background:#e07b3920;border-color:#e07b3980;transform:scale(1.06)}
.deck-controls>div{display:flex;flex-direction:column;text-align:center;min-width:210px;gap:6px}
.deck-counter{font:600 11px Sora;letter-spacing:.06em;color:var(--orange)}
.deck-current{font-size:14px;color:#d7d7df;font-weight:600}
.deck-detail{position:relative;z-index:4;border-top:1px solid var(--line);padding:28px 0 0;min-height:229px;display:grid;grid-template-columns:1fr 1.05fr;gap:22px 7%}
.deck-detail-intro h3{font-size:23px;line-height:1.35;display:flex;align-items:center;gap:12px;letter-spacing:-.04em}
.deck-detail-intro h3>.icon{color:var(--orange);width:22px;height:22px}
.deck-detail-intro>p{margin-top:14px;font-size:16px;line-height:1.7;color:#c4c4cf;max-width:500px}
.deck-detail-points{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.deck-detail-points h4{font-family:Sora,sans-serif;font-size:14px;font-weight:650;line-height:1.5;margin:0 0 8px;letter-spacing:-.02em}
.deck-detail-points p{font-size:14px;line-height:1.7;color:var(--muted)}
.deck-detail-note{grid-column:1/-1;font-size:11px;color:#9494a2;line-height:1.6;margin-top:0}
#screen-dialog.is-deck .dialog-meta>.eyebrow{font-weight:700;letter-spacing:.04em}
#screen-dialog.is-deck #dialog-image{max-height:57vh}
#screen-dialog.is-deck #dialog-copy{display:none}
#screen-dialog.is-deck .deck-dialog-content{margin-top:26px}
#screen-dialog.is-deck .deck-detail-intro h3{display:none}
#screen-dialog.is-deck .deck-detail-intro>p{max-width:800px}
#screen-dialog.is-deck .deck-detail-points{margin-top:23px;max-width:900px}
#screen-dialog.is-deck .deck-detail-note{margin-top:20px}

@media(min-width:1650px){.showcase-copy h1{font-size:89px}.showcase-visual{margin-top:35px}.feature-ribbon .ribbon-card{width:340px;height:389px}.feature-ribbon-stage{height:460px}.feature-ribbon{height:425px}}
@media(max-width:1000px){.showcase-copy h1{font-size:54px}.showcase-copy .hero-lead{font-size:16px}.feature-ribbon .ribbon-card{width:278px}.exp-feature-ribbon .experience-heading>p{font-size:15px}.deck-detail{gap:24px;grid-template-columns:1fr 1.2fr}.deck-detail-points{gap:18px}}
@media(max-width:700px){
 .showcase-stage{padding-top:33px;padding-bottom:0}.showcase-copy{padding-inline:18px}.showcase-copy>.eyebrow{font-size:13px;margin-bottom:23px}.showcase-copy h1{font-size:clamp(27px,6.7vw,45px);line-height:1.2}.showcase-copy .hero-lead{font-size:15px;line-height:1.6;margin-top:16px}.showcase-copy .ribbon-actions{gap:4px;margin-top:23px}.showcase-copy .cta{font-size:13px;min-height:51px}.showcase-copy .text-link{font-size:12px;padding-block:12px}.showcase-visual{width:112%;margin:30px -6% 0}.showcase-mockup{mask-image:linear-gradient(to bottom,#000 92%,transparent 100%),linear-gradient(to right,transparent,#000 9%,#000 91%,transparent)}
 .exp-feature-ribbon .experience-heading h2{font-size:clamp(29px,7.4vw,44px)}.exp-feature-ribbon .experience-heading>p{font-size:15px;margin-top:20px}.feature-ribbon-stage{height:410px;margin:17px -21px 0}.feature-ribbon{top:15px;height:382px;perspective:1000px}.feature-ribbon .ribbon-card{width:252px;height:356px}.feature-ribbon .ribbon-card-title{font-size:20px;left:21px;top:47px}.deck-card-number{left:21px;top:20px}.deck-card-copy{left:21px;right:19px;top:86px;font-size:13px}.feature-ribbon .ribbon-footer{padding:16px 19px;font-size:11px}.feature-ribbon .ribbon-art{top:140px}.feature-ribbon .ribbon-reader .ribbon-art,.feature-ribbon .ribbon-sports .ribbon-art,.feature-ribbon .ribbon-replay .ribbon-art{top:161px;bottom:87px;left:21px}.feature-ribbon .ribbon-clap .ribbon-art{top:129px;bottom:42px}.feature-ribbon .ribbon-offline .ribbon-art{top:125px;bottom:39px}.deck-controls{gap:16px;margin-bottom:26px}.deck-controls>div{min-width:190px}.deck-controls>button{width:37px;height:37px;font-size:20px;flex-shrink:0}.deck-current{font-size:13px}.deck-counter{font-size:10px}.deck-detail{grid-template-columns:1fr;gap:23px;padding-top:25px;min-height:0}.deck-detail-intro h3{font-size:21px;gap:10px}.deck-detail-intro>p{font-size:15px;margin-top:12px}.deck-detail-points{grid-template-columns:1fr;gap:20px}.deck-detail-points h4{font-size:14px;margin-bottom:6px}.deck-detail-points p{font-size:14px;line-height:1.6}.deck-detail-note{font-size:10px}.exp-feature-ribbon>.light-dust{inset:-70px -21px 0;width:calc(100% + 42px);height:calc(100% + 70px)}
}
@media(max-width:380px){.showcase-copy h1{font-size:26px}.showcase-copy .hero-lead{font-size:14px}.showcase-stage{padding-top:27px}.feature-ribbon .ribbon-card{width:232px;height:346px}.feature-ribbon .ribbon-card-title{font-size:18px}.feature-ribbon-stage{height:397px}.deck-controls{gap:12px}.deck-controls>div{min-width:175px}.deck-controls>button{width:33px;height:33px}.deck-current{font-size:12px}}
.feature-ribbon .ribbon-cast .deck-card-copy{top:112px}
.showcase-mockup{mask-image:linear-gradient(to bottom,transparent,#000 2.4%,#000 92%,transparent),linear-gradient(to right,transparent,#000 4.5%,#000 97.5%,transparent);mask-composite:intersect}
@media(max-width:700px){.showcase-visual{width:100%;margin:30px auto 0}}
@media(prefers-reduced-motion:reduce){.showcase-mockup{animation:none;transform:none;translate:none}.feature-ribbon .ribbon-card{will-change:auto}.deck-controls>button:hover{transform:none}}