/* Keep the phone frame in CSS so refreshed app captures stay pixel-accurate and
   can be reused without baking a store headline or a second device frame in. */
.hg-phone {
    box-sizing: border-box;
    width: min(100%, 340px);
    margin-inline: auto;
    padding: 9px;
    border: 3px solid #43464d;
    border-radius: 52px;
    background: #111318;
    box-shadow: 0 20px 34px rgba(15, 23, 42, 0.32), inset 0 0 0 2px #15171b;
}

.hg-phone img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 40px;
}

.hg-phone--tilt-right {
    transform: perspective(900px) rotateY(-11deg) rotateZ(6deg);
}

.hg-phone--tilt-left {
    transform: perspective(900px) rotateY(11deg) rotateZ(-6deg);
}

/* The home card intentionally clips the lower phone so its dashboard totals
   remain large enough to recognize at the card's fixed height. */
.hg-phone--card {
    width: 210px;
    margin-top: 14px;
    padding: 5px;
    border-width: 2px;
    border-radius: 33px;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.24);
}

.hg-phone--card img {
    border-radius: 26px;
}

@media (max-width: 640px) {
    /* A smaller turn preserves the angled treatment without pushing the tall
       mock beyond narrow mobile containers. */
    .hg-phone--tilt-right,
    .hg-phone--tilt-left {
        width: min(85%, 340px);
    }

    .hg-phone--tilt-right {
        transform: rotate(3deg);
    }

    .hg-phone--tilt-left {
        transform: rotate(-3deg);
    }
}