/* The two compositions stay uncropped so controls track the phone artwork. */
.diagnostic-hero{height:auto;min-height:0;max-height:none;background:#0c1018;overflow:hidden}
.diagnostic-hero .hero-topline{position:relative;inset:auto;max-width:1672px;margin:auto;padding:18px 4%;font-size:11px;letter-spacing:.7px}
.hero-main{position:relative;max-width:1672px;margin:auto}
.hero-stage{position:relative;margin:0;isolation:isolate}
.hero-scene-picture,.hero-scene-picture img{display:block;width:100%;height:auto}
.hero-scene-picture img{aspect-ratio:1672/941}
.hero-stage:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#080d17de 0%,#080d179c 28%,transparent 64%);z-index:1}
.landing-copy{position:absolute;z-index:3;top:6%;left:4%;width:51%;pointer-events:none}
.landing-copy h1{position:static;transform:none;font:800 italic clamp(60px,7.3vw,122px)/.86 var(--race);letter-spacing:-1.5px;text-shadow:0 3px 30px #0007}
.landing-copy h1>strong{font-size:1.32em;margin:7px 0 0;letter-spacing:-2px;color:var(--orange)}
.landing-copy>p{max-width:340px;margin:26px 0 22px;font-size:clamp(16px,1.35vw,21px);line-height:1.5;color:#f0f3fa;text-shadow:0 2px 12px #000}
.landing-copy>p strong{font-weight:600}
.landing-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;pointer-events:auto}
.landing-actions .race-button{min-height:52px;font-size:19px;padding:12px 18px;gap:30px}
.hero-tour-button{background:#0b101ac9;color:white;border:1px solid #b6c2d85e;padding:12px 15px;min-height:48px;font:12px var(--mono);display:flex;align-items:center;gap:9px}
.hero-tour-button:hover{border-color:var(--cyan)}
.hero-tour-button[aria-pressed=true]{color:var(--cyan);border-color:var(--cyan)}
.landing-copy .hero-trial{max-width:370px;font-size:11px;color:#dadce4;margin-top:13px}
.hero-overlay{position:absolute;inset:0;z-index:2;pointer-events:none;width:100%;height:100%;overflow:visible}
.hero-overlay-mobile{display:none}
.phone-tap-cue{position:absolute;z-index:3;top:19.5%;left:73%;padding:7px 10px;border:1px solid #62edee66;background:#08111de8;color:var(--cyan);font:10px var(--mono);letter-spacing:.7px;pointer-events:none}
.hero-eye{fill:#ff171b;filter:drop-shadow(0 0 5px #ff1515);transform-box:fill-box;transform-origin:center;animation:hero-eye-glow 2.4s ease-in-out infinite}
.hero-wave-line{stroke:#75ffff;stroke-width:2.8;stroke-linecap:round;transform-box:fill-box;transform-origin:center;animation:hero-wave .7s ease-in-out infinite alternate;animation-delay:var(--lag);filter:drop-shadow(0 0 2px #26e8f6)}
.hero-stage.is-narrating .hero-eye{animation-duration:1.1s}
.hero-stage.is-narrating .hero-wave-line{animation-duration:.35s}
.hero-jaw-layer{filter:blur(.3px)}
.hero-jaw-motion{animation:hero-jaw-speak 2.4s ease-in-out infinite}
.hero-stage.is-narrating .hero-jaw-motion{animation-duration:1.1s}
body.motion-paused .hero-jaw-layer{display:none}
.phone-hotspot{position:absolute;z-index:4;border:1px solid transparent;border-radius:9px;background:transparent;min-height:44px;transition:background .2s,border .2s,box-shadow .2s}
.phone-hotspot:hover,.phone-hotspot:focus-visible{background:#71f7ff15;border-color:var(--cyan);box-shadow:0 0 24px #41e9ff3b;outline-offset:4px}
.phone-hotspot-video{left:72.2%;top:41.5%;width:15.5%;height:22.7%;transform:rotate(2deg)}
.phone-hotspot-live{left:72.1%;top:65%;width:15.3%;height:10.9%;transform:rotate(2deg)}
.phone-hotspot-chat{left:71.5%;top:76.8%;width:15.4%;height:9.5%;transform:rotate(2deg)}
.phone-hotspot .hotspot-label{position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%);white-space:nowrap;padding:9px 12px;background:#080d18f5;color:var(--cyan);font:11px var(--mono);border:1px solid #62edee70;opacity:0;pointer-events:none}
.phone-hotspot:hover .hotspot-label,.phone-hotspot:focus-visible .hotspot-label{opacity:1}
.hero-explore{position:relative;z-index:5;max-width:1672px;margin:auto;display:grid;grid-template-columns:1fr 1.55fr;gap:32px;padding:24px 4%;background:#10141e;border-top:1px solid #8b9aa138}
.hero-explore-copy{display:flex;flex-direction:column;justify-content:center;gap:5px}
.hero-explore-copy strong{font:600 23px var(--race);letter-spacing:.7px}
.hero-explore-copy span{font:11px/1.6 var(--mono);color:#aeb9c9}
.hero-chapters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.hero-chapters a{padding:13px 15px;border:1px solid #9da7bd45;background:#141b29;transition:border-color .2s,background .2s;min-height:70px}
.hero-chapters a:hover{border-color:var(--cyan);background:#1b2b37}
.hero-chapters span{display:block;font:10px var(--mono);letter-spacing:.3px;color:var(--cyan)}
.hero-chapters b{display:block;font:600 21px var(--race);letter-spacing:.5px;margin-top:5px}
.hero-disclosure{display:flex;justify-content:space-between;gap:20px;padding:14px 4%;max-width:1672px;margin:auto;font:10px/1.6 var(--mono);color:#9eaabe}
.hero-disclosure a{color:#d8e2eb;text-decoration:underline;text-underline-offset:3px}
.hero-tour-transcript{background:#111c2b;padding:16px 4%;font-size:14px;line-height:1.7;max-width:1672px;margin:auto;color:#d2deea;border-top:1px solid #52626c}
.hero-tour-transcript[hidden]{display:none}
@keyframes hero-eye-glow{0%,100%{opacity:.08;transform:scale(.55)}18%{opacity:1;transform:scale(1.1)}37%{opacity:.18;transform:scale(.7)}54%{opacity:.8;transform:scale(1)}72%{opacity:.12;transform:scale(.6)}86%{opacity:.65;transform:scale(.9)}}
@keyframes hero-jaw-speak{0%,7%,37%,72%,100%{transform:translateY(0)}18%{transform:translateY(var(--jaw-travel))}54%{transform:translateY(calc(var(--jaw-travel)*.7))}86%{transform:translateY(calc(var(--jaw-travel)*.45))}}
@keyframes hero-wave{from{transform:scaleY(.35);opacity:.65}to{transform:scaleY(1.2);opacity:1}}
@media(min-width:1673px){.landing-copy h1{font-size:122px}}
@media(max-width:1100px){.landing-copy>p{max-width:300px;font-size:16px;margin-block:19px}.landing-actions{gap:10px}.landing-actions .race-button{font-size:17px;min-height:47px;gap:20px}.hero-tour-button{font-size:10px;min-height:46px;padding:10px}.hero-explore{grid-template-columns:.9fr 1.6fr;gap:18px}.hero-chapters a{padding:12px 10px}.hero-chapters b{font-size:19px}}
@media(max-width:700px){
 .diagnostic-hero .hero-topline{padding:14px 20px;gap:12px;align-items:center}.diagnostic-hero .hero-topline>span{font-size:9px;max-width:140px;line-height:1.6}.diagnostic-hero .hero-topline .scene-switch button{font-size:9px;padding-inline:7px;min-height:44px}
 .hero-scene-picture img{aspect-ratio:941/1672}.hero-overlay-desktop{display:none}.hero-overlay-mobile{display:block}
 .hero-stage:after{background:linear-gradient(180deg,#07101ad9 0%,#07101a99 19%,transparent 40%)}
 .landing-copy{top:4%;left:6%;width:88%}.landing-copy h1{font-size:clamp(47px,11.8vw,80px);letter-spacing:-.5px}.landing-copy h1>strong{font-size:1.32em;margin-top:5px;letter-spacing:-1px}
 .landing-copy>p{font-size:clamp(14px,3.5vw,19px);line-height:1.45;max-width:84%;margin:16px 0 0}.landing-copy .landing-actions,.landing-copy .hero-trial{display:none}
 .phone-hotspot-video{left:42.5%;top:44%;width:36%;height:20%;transform:rotate(5deg)}
 .phone-hotspot-live{left:39.8%;top:64.6%;width:38.5%;height:7.6%;transform:rotate(5deg)}
 .phone-hotspot-chat{left:38.3%;top:72.4%;width:37.8%;height:8.1%;transform:rotate(5deg)}
 .phone-hotspot .hotspot-label{display:none}
 .phone-tap-cue{top:28%;left:49%;font-size:8px;padding:5px 7px;letter-spacing:.3px}
 .hero-explore{grid-template-columns:1fr;gap:18px;padding:20px}.hero-explore-copy strong{font-size:24px}.hero-explore-copy span{font-size:10px}.hero-chapters{gap:7px}.hero-chapters a{padding:12px 9px;min-height:77px}.hero-chapters b{font-size:19px}.hero-chapters span{font-size:9px}
 .hero-mobile-actions{display:flex!important;gap:10px;flex-wrap:wrap}.hero-mobile-actions .race-button{font-size:18px;min-height:48px;padding:10px 17px;gap:25px}.hero-mobile-actions .hero-tour-button{font-size:11px}
 .hero-disclosure{padding:12px 20px 19px;display:block;font-size:10px}.hero-disclosure a{display:inline-block;margin-top:8px;min-height:30px}.hero-tour-transcript{padding:18px 20px}
}
.hero-mobile-actions{display:none}
@media(prefers-reduced-motion:reduce){html:not([data-motion=on]) .hero-eye,html:not([data-motion=on]) .hero-wave-line{animation:none!important;opacity:.9}}
@media(prefers-reduced-motion:reduce){html:not([data-motion=on]) .hero-jaw-layer{display:none}}
/* Live controls align both illustrated phones with the shared app navigation. */
.hero-phone-navigation{position:absolute;z-index:5;left:72.8%;top:37.05%;width:15.1%;height:4.35%;display:grid;grid-template-columns:1fr 1fr 1fr .64fr;align-items:stretch;gap:2px;padding:2px 4px;background:#0b141d;border:1px solid #33424d;border-radius:5px;transform:rotate(.6deg);transform-origin:left center;font:600 clamp(6px,.88vw,14px)/1 var(--body,Arial,sans-serif)}
.hero-phone-navigation>a{display:flex;align-items:center;justify-content:center;color:#d7e7f1;border-radius:3px;min-width:0;text-decoration:none;background:#17232f}
.hero-phone-navigation>a:hover,.hero-phone-navigation>a:focus-visible{color:#061016;background:var(--cyan);outline:2px solid white;outline-offset:1px}
.hero-phone-navigation .hero-phone-settings{background:transparent;color:#bdcedc}
.hero-phone-settings svg{width:57%;height:65%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}
@media(max-width:700px){.hero-phone-navigation{left:46.25%;top:40.55%;width:35.7%;height:2.6%;transform:rotate(4deg);font-size:clamp(6px,2.15vw,15px);padding:1px 3px}}

/* Only the phone header is masked; all underlying artwork remains original. */
.hero-phone-brand{pointer-events:none}
.hero-phone-brand text{font-style:normal;font-weight:400}
.hero-stage.ambient-offscreen .hero-overlay *{animation-play-state:paused!important}