/* Pixel-style phone chrome around a live iframe — no screen cutout. */
.hs-iphone {
    --hs-iphone-sw: 390px;
    --hs-iphone-sh: 844px;
    --hs-iphone-scale: 0.58;
    --hs-iphone-bezel: 14px;
    --hs-iphone-radius: 36px;
    position: relative;
    width: calc(var(--hs-iphone-sw) * var(--hs-iphone-scale) + var(--hs-iphone-bezel) * 2);
    height: calc(var(--hs-iphone-sh) * var(--hs-iphone-scale) + var(--hs-iphone-bezel) * 2);
    flex-shrink: 0;
    z-index: 1;
}
.hs-iphone--sm { --hs-iphone-scale: 0.56; --hs-iphone-bezel: 13px; --hs-iphone-radius: 32px; }
.hs-iphone--md { --hs-iphone-scale: 0.64; --hs-iphone-bezel: 14px; --hs-iphone-radius: 34px; }
.hs-iphone--lg { --hs-iphone-scale: 0.74; --hs-iphone-bezel: 15px; --hs-iphone-radius: 36px; }

.hs-iphone-chassis {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(160deg, #3a3d42 0%, #1a1c1f 18%, #0c0d0f 52%, #22252a 100%);
    border-radius: var(--hs-iphone-radius);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.12),
        inset 0 0 0 2px #050505,
        0 30px 64px rgba(0, 0, 0, 0.55),
        0 10px 24px rgba(0, 0, 0, 0.35);
}

.hs-iphone-screen {
    position: absolute;
    inset: var(--hs-iphone-bezel);
    z-index: 1;
    border-radius: calc(var(--hs-iphone-radius) - 10px);
    overflow: hidden;
    background: #0b0f0c;
}

.hs-iphone-screen iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--hs-iphone-sw);
    height: var(--hs-iphone-sh);
    border: 0;
    transform: scale(var(--hs-iphone-scale));
    transform-origin: top left;
    background: #f4f6f1;
}

.hs-iphone-earpiece {
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 52px;
    height: 5px;
    border-radius: 999px;
    background: #050506;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    z-index: 2;
}
.hs-iphone-earpiece::after {
    content: '';
    position: absolute;
    left: -16px;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #2a5a88, #071018 72%);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.hs-iphone-home {
    position: absolute;
    bottom: calc(var(--hs-iphone-bezel) + 7px);
    left: 50%;
    transform: translateX(-50%);
    width: calc(120px * var(--hs-iphone-scale));
    height: 4px;
    background: rgba(255, 255, 255, 0.38);
    border-radius: 999px;
    z-index: 4;
    pointer-events: none;
}

.hs-iphone-btn {
    position: absolute;
    background: #2a2a2e;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.hs-iphone-btn--vol {
    left: -2px;
    top: 22%;
    width: 3px;
    height: 16%;
    border-radius: 2px 0 0 2px;
}
.hs-iphone-btn--power {
    right: -2px;
    top: 28%;
    width: 3px;
    height: 10%;
    border-radius: 0 2px 2px 0;
}

.hs-iphone-live {
    position: absolute;
    left: 50%;
    bottom: -2.15rem;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7a8496;
    white-space: nowrap;
}
.hs-iphone-live::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.18);
    animation: hs-iphone-pulse 1.8s ease-in-out infinite;
}
@keyframes hs-iphone-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

@media (max-width: 767px) {
    .hs-iphone--sm { --hs-iphone-scale: 0.5; --hs-iphone-radius: 30px; }
}