﻿/* One continuous night stadium sits behind the entire storefront. */
html,body{background:#0a0a0c}.one-screen-app{isolation:isolate;background:#0a0a0c}
.one-screen-app::before{inset:0;width:auto;height:auto;border:0;border-radius:0;background:url('assets/thep-green-stadium.png') center center/cover no-repeat;opacity:1;filter:brightness(.79) saturate(.86);transform:none}
.one-screen-app::after{inset:0;width:auto;height:auto;border:0;border-radius:0;background:linear-gradient(180deg,rgba(8,8,10,.75) 0%,rgba(4,10,7,.35) 35%,rgba(2,18,9,.55) 68%,rgba(9,9,11,.82) 100%),radial-gradient(ellipse at 55% 46%,transparent 20%,rgba(0,0,0,.48) 100%);opacity:1;filter:none;transform:none}
.topbar{background:linear-gradient(180deg,rgba(12,12,15,.78),rgba(12,12,15,.52));backdrop-filter:blur(8px);border-bottom-color:#ff643f66;box-shadow:0 4px 20px #0003}
.showcase{background:transparent;border-color:transparent;box-shadow:none;border-radius:0}.showcase::before,.showcase::after{content:none}
.showcase .hero-copy h1{text-shadow:0 3px 18px #000b}.showcase .hero-copy h1 strong{filter:drop-shadow(0 2px 6px #0008)}.showcase .hero-points,.showcase .eyebrow{text-shadow:0 2px 7px #000}.showcase .hero-description{color:#e9e9ec;text-shadow:0 2px 8px #000}
.media-card{background:linear-gradient(145deg,rgba(26,26,29,.88),rgba(13,13,16,.94));border-color:#9999a177;backdrop-filter:blur(8px);box-shadow:0 8px 26px #0004,inset 0 1px #ffffff08}.performance-stage,.youtube-player{background:linear-gradient(145deg,rgba(20,20,23,.25),rgba(8,8,10,.45))}.media-card header,.media-card footer{background:rgba(15,15,18,.18);border-color:#c0c0c51f}.bottom-row .benefits{background:rgba(18,18,21,.45);border-color:#aaaab333}
/* Ground the cutouts without changing their geometry or animation anchors. */
.doctor-card::before{inset:40% 5% 0;background:radial-gradient(ellipse at 50% 90%,#0006,transparent 66%)}.doctor-card::after{content:'';position:absolute;z-index:0;left:14%;right:9%;bottom:1.8%;height:8%;background:radial-gradient(ellipse,#000d 0%,#0009 30%,transparent 72%);filter:blur(7px);transform:scaleY(.65);pointer-events:none}
.device-showcase::before{opacity:.25}.device-showcase::after{left:8%;right:8%;bottom:.2%;height:7%;border:0;background:radial-gradient(ellipse,#000c,#0007 40%,transparent 72%);box-shadow:none;filter:blur(4px);transform:scaleY(.65)}.device-showcase .device::after{background:#0008;filter:blur(7px)}
@media(max-width:900px){.one-screen-app::before{background-size:auto 135%;background-position:center bottom}.one-screen-app::after{background:linear-gradient(180deg,rgba(8,8,10,.78),rgba(3,10,6,.40) 33%,rgba(2,18,9,.58) 70%,rgba(9,9,11,.86))}.topbar{background:rgba(12,12,15,.58)}.media-card{backdrop-filter:blur(5px)}.doctor-card::after{height:7%;filter:blur(4px)}}
/* Give the portrait a stronger presence in the mobile hero. */
@media(max-width:900px) and (orientation:portrait){.showcase{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);grid-template-rows:208px minmax(0,1fr)}.hero-copy{padding-left:8px;padding-right:0}.hero-copy h1{font-size:clamp(21px,6.3vw,32px)}.doctor-card{width:100%;height:100%}.doctor-card>img{width:100%;height:100%;object-fit:contain;object-position:center bottom}}
@media(max-width:900px) and (max-height:730px) and (orientation:portrait){.showcase{grid-template-rows:154px minmax(0,1fr)}.hero-copy h1{font-size:clamp(18px,5.9vw,25px)}}

/* Chrome media surfaces echo the white wordmark; the pitch remains the only green field. */
.media-cards .media-card h2{color:#f5f5f7}.media-cards .card-source,.media-cards .media-card footer p{color:#c8c8ce}.media-cards .media-card footer a{color:#ffad8b}.media-cards .media-placeholder p{color:#e7e7eb}.media-cards .media-placeholder small{color:#b8b8c1}.media-cards .placeholder-mark{color:#b9b9c2}.media-cards .slide-controls button{color:#ffa27d}.media-cards .slide-controls span{color:#d6d6dc}.media-cards .slide-controls button:focus-visible{outline-color:#ffad89}.media-cards .video-play{background:#e52e31;box-shadow:0 0 24px #e52e3120}.media-cards .youtube-mark{color:#ff6855}
