/* Sportify Pro on a laptop, a tablet and a phone: real screens of the interface */
.showcase { width: 100%; }
.showcase__stage { position: relative; width: 100%; aspect-ratio: 100 / 66; }
.showcase__laptop { position: absolute; left: 8%; top: 0; width: 84%; }
.showcase__lid { padding: 1.4%; border-radius: clamp(6px, 1vw, 14px) clamp(6px, 1vw, 14px) 0 0; background: linear-gradient(145deg, #2b2b33, #121217); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.showcase__base { position: relative; left: -6%; width: 112%; height: clamp(6px, 1vw, 14px); border-radius: 0 0 12px 12px; background: linear-gradient(180deg, #3a3a44, #1c1c22); }
.showcase__tablet { position: absolute; left: 0; bottom: 0; width: 28%; padding: 1%; box-sizing: border-box; border-radius: clamp(6px, 1.1vw, 16px); background: linear-gradient(145deg, #2b2b33, #121217); box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .85), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.showcase__phone { position: absolute; right: 0; bottom: 0; width: 16%; padding: .7%; box-sizing: border-box; border-radius: clamp(8px, 1.6vw, 22px); background: linear-gradient(145deg, #2b2b33, #121217); box-shadow: 0 24px 48px -14px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.showcase__screen { position: relative; overflow: hidden; background: #F3F4F6; }
.showcase__laptop .showcase__screen { aspect-ratio: 1440 / 900; }
.showcase__tablet .showcase__screen { aspect-ratio: 820 / 1180; border-radius: clamp(2px, .4vw, 6px); }
.showcase__phone .showcase__screen { aspect-ratio: 390 / 844; border-radius: clamp(6px, 1.2vw, 17px); }
.showcase__screen img, .phone__screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: opacity .35s; }
.showcase__tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.showcase__tabs button { min-height: 44px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 99px; background: transparent; color: inherit; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background-color .25s, border-color .25s, color .25s; }
.showcase__tabs button:hover { border-color: rgba(255, 255, 255, .5); }
.showcase__tabs button[aria-pressed="true"] { border-color: #CF1140; background: #CF1140; color: #FFFFFF; }
.showcase__tabs button:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .showcase__screen img, .phone__screen img, .showcase__tabs button { transition: none; }
}