/* Scoped to the hero only: every label and icon stays native at any device width. */
.phone-hero .phone-display.has-native-preview{container-type:inline-size;aspect-ratio:1206/2622;position:relative;line-height:normal;background:#0b0911}
.hp-preview{position:absolute;inset:0;color:#f6f2fc;background:radial-gradient(ellipse at 78% 32%,#17102055,transparent 52%),#0b0911;font-family:Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:4cqw;line-height:1.3;letter-spacing:-.025em;overflow:hidden;isolation:isolate;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.hp-preview *{box-sizing:border-box}
.hp-content{padding:10.2cqw 4.4cqw 0}
.hp-greeting{display:flex;justify-content:center;align-items:center;gap:1.5cqw;white-space:nowrap;font-size:4.8cqw;font-weight:400;color:#bfb8cc;line-height:1.5}
.hp-greeting strong{font-weight:750;color:#f7f4fb}
.hp-heart{margin-left:.6cqw;display:inline-block;font-size:6cqw;line-height:1;transform-origin:center 65%;animation:hp-heart-life 8s ease-in-out infinite}
.hp-title{margin:6.8cqw -1.5cqw 0;text-align:center;font-size:8.25cqw;font-weight:850;letter-spacing:-.066em;line-height:1.15;white-space:nowrap}
.hp-title>span{display:block}
.hp-title>span+span{margin-top:1.35cqw;background:linear-gradient(105deg,#c991ff 5%,#da8add 45%,#f08dbe 65%,#b692fa 96%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hp-stage{position:relative;aspect-ratio:1.03;width:100%;margin:2.6cqw 0 .4cqw}
.hp-ring{position:absolute;width:103%;height:103%;left:-1.5%;top:-.8%;overflow:visible}
.hp-fibers{transform-origin:200px 200px;animation:hp-silk-turn 26s ease-in-out infinite alternate}
.hp-timer{position:absolute;left:50%;top:50.5%;transform:translate(-50%,-50%);display:flex;align-items:center;flex-direction:column;gap:3.5cqw;white-space:nowrap}
.hp-status{font-size:2.25cqw;letter-spacing:.20em;display:flex;align-items:center;gap:1.2cqw;color:#b6a9c8}
.hp-status i{width:1.15cqw;height:1.15cqw;border-radius:50%;background:#c589ff;box-shadow:0 0 3cqw #b37dfb80}
.hp-timer>strong{font-size:7.75cqw;font-weight:730;line-height:1;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.phone-hero .phone-display .hp-object{position:absolute;display:block;aspect-ratio:auto;height:auto;object-fit:contain;pointer-events:none;filter:drop-shadow(0 1cqw 2.5cqw #08050d3d)}
.phone-hero .phone-display .hp-disco{width:22%;left:3%;top:0;transform:rotate(-9deg)}
.phone-hero .phone-display .hp-headphones{width:28%;right:-.5%;top:39%;transform:rotate(9deg)}
.phone-hero .phone-display .hp-cocktail{width:22%;left:1%;bottom:2%;transform:rotate(-5deg)}
.hp-star{position:absolute;color:#9979bf;line-height:1;opacity:.66;font-size:5cqw}
.hp-star-one{left:7%;top:46%;font-size:4.7cqw}
.hp-star-two{right:7%;bottom:3%;font-size:4.5cqw;opacity:.42}
.hp-finish{width:80%;min-height:11.9cqw;margin:1.7cqw auto 0;display:flex;align-items:center;justify-content:center;gap:2.6cqw;padding:2.7cqw 3.5cqw;border-radius:3.45cqw;background:linear-gradient(110deg,#d49bf8,#a684f1);box-shadow:0 2cqw 6cqw #9e66ff0d;color:#170d27;font-size:3.45cqw;font-weight:800;white-space:nowrap;letter-spacing:-.025em}
.hp-preview svg:not(.hp-ring){width:4.7cqw;height:4.7cqw;flex:none;display:block}
.hp-finish>svg:last-child{margin-left:auto}
.hp-finish>svg:first-child{margin-right:.6cqw}
.hp-help{display:flex;align-items:center;justify-content:center;gap:1.6cqw;color:#8e7da2;font-size:3.2cqw;line-height:1.2;margin-top:4.9cqw}
.hp-help>svg{width:3.6cqw!important;height:3.6cqw!important}
.hp-hours{margin:5cqw 0 0;padding:4.2cqw 5.4cqw 4.1cqw;min-height:31cqw;border-radius:5.7cqw;background:radial-gradient(ellipse at 100% 0,#48315470,transparent 82%),linear-gradient(125deg,#261b31,#201728);color:#b5a0c9}
.hp-hours-heading{display:flex;justify-content:space-between;align-items:center;gap:2cqw;font-size:3.2cqw;line-height:1.3}
.hp-hours-heading>span{display:flex;gap:1.5cqw;align-items:center;white-space:nowrap}
.hp-hours-heading>span>svg{width:3.75cqw!important;height:3.75cqw!important}
.hp-hours-heading>small{font-size:2.3cqw;letter-spacing:.14em;opacity:.63}
.hp-time-total{display:flex;align-items:baseline;gap:.7cqw;margin:3cqw 0 3.5cqw;font-variant-numeric:tabular-nums}
.hp-time-total strong{font-size:11.3cqw;font-weight:700;line-height:1;letter-spacing:-.055em;color:#e7d4fc}
.hp-time-total strong:not(:first-child){margin-left:1.8cqw}
.hp-time-total>small{font-size:3.5cqw;opacity:.83}
.hp-hours-foot{display:flex;align-items:center;gap:1.3cqw;font-size:3cqw;line-height:1.3}
.hp-hours-foot>svg{width:3.9cqw!important;height:3.9cqw!important}
.hp-nav{position:absolute;left:0;right:0;bottom:0;height:16.8cqw;display:grid;grid-template-columns:repeat(4,1fr);align-items:start;padding:3.4cqw 2.6cqw 2.3cqw;background:#100b19f7;border-top:1px solid #2f203f80;backdrop-filter:blur(5px);z-index:2}
.hp-nav>span{display:flex;align-items:center;flex-direction:column;gap:1.7cqw;color:#82758e;font-size:2.8cqw;line-height:1;white-space:nowrap}
.hp-nav>span>svg{width:6.3cqw!important;height:6.3cqw!important;stroke-width:1.6}
.hp-nav>span.is-active{color:#d39dff}
.hp-nav small{font-size:inherit;line-height:1.1}
@keyframes hp-silk-turn{0%{transform:rotate(-7deg) scale(.991)}45%{transform:rotate(7deg) scale(1.009)}100%{transform:rotate(19deg) scale(.997)}}
@keyframes hp-heart-life{0%,70%,100%{transform:scale(1)}75%{transform:scale(1.10)}79%{transform:scale(1)}83%{transform:scale(1.06)}87%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.hp-fibers,.hp-heart{animation:none!important}}
