.te-hero-carousel {
    --te-phone-height: 485px;
    --te-control-width: 36px;
    --te-control-side: max(-24px, calc(50% - 183px));
    color: #142f49;
    position: relative;
    text-align: center;
    min-width: 0;
}
.te-hero-carousel::before {
    content: "";
    position: absolute;
    inset: 3rem -1rem 7rem;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(107,173,221,.25), rgba(107,173,221,0) 70%);
    pointer-events: none;
}
.te-hero-carousel .te-example-slide { position: relative; }
.te-hero-carousel .te-example-slide[hidden] { display: none; }
.te-phone {
    width: min(100%, 278px);
    height: var(--te-phone-height);
    margin: 0 auto;
    padding: 7px;
    border: 1px solid #546678;
    border-radius: 40px;
    background: #142333;
    box-shadow: 0 22px 40px -18px rgba(20,47,73,.45), inset 0 0 0 2px #344454;
    text-align: left;
}
.te-phone-screen {
    height: 100%;
    overflow: hidden;
    border-radius: 32px;
    background: #fff;
    display: flex;
    flex-direction: column;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #17212b;
}
.te-phone-status {
    height: 35px;
    flex-shrink: 0;
    padding: 10px 17px 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    font-size: 10px;
    font-weight: 700;
}
.te-phone-status::after {
    content: "";
    width: 76px;
    height: 20px;
    position: absolute;
    top: 7px;
    left: calc(50% - 38px);
    background: #142333;
    border-radius: 20px;
}
.te-phone-contact {
    text-align: center;
    padding: 4px 12px 10px;
    border-bottom: 1px solid #e7ebef;
    background: #f8fafc;
    position: relative;
    font-size: 12px;
    font-weight: 600;
}
.te-phone-back { position: absolute; display: flex; left: 15px; top: 18px; color: #2878b7; }
.te-phone-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    margin: 0 auto 3px;
    border-radius: 50%;
    background: #e1edf6;
    color: #142f49;
    font-size: 14px;
    font-weight: 800;
}
.te-phone-messages { flex: 1; padding: 12px 12px 8px; }
.te-carousel-enhanced .te-phone-messages {
    position: relative;
    min-height: 0;
    overflow: hidden;
    padding: 0;
    isolation: isolate;
}
.te-message-thread { position: absolute; inset: 0; padding: 12px 12px 8px; }
.te-phone-timestamp { margin-bottom: 12px; color: #6a737e; font-size: 10px; text-align: center; }
.te-message {
    width: fit-content;
    max-width: 94%;
    padding: 10px 12px;
    border-radius: 15px 15px 15px 4px;
    background: #edf0f3;
    font-size: 12px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.te-message + .te-message { margin-top: 7px; }
.te-message strong { display: block; margin-bottom: 5px; font-weight: 700; }
.te-message p { margin: 0; }
.te-message p + p { margin-top: 8px; }
.te-message.te-message-reply { margin-left: auto; border-radius: 15px 15px 4px 15px; background: #197647; color: #fff; }
.te-message-photo { display: block; width: 100%; height: auto; border-radius: 10px; margin: 8px 0 2px; }
.te-message-delivered { margin-top: 4px; text-align: right; font-size: 9px; color: #6a737e; }
.te-phone-compose { display: flex; flex-shrink: 0; align-items: center; gap: 9px; padding: 4px 13px 9px; color: #87909b; font-size: 21px; }
.te-phone-compose span:last-child { border: 1px solid #dce1e6; border-radius: 20px; padding: 6px 10px; flex: 1; font-size: 11px; }
.te-phone-home { width: 88px; height: 4px; flex-shrink: 0; border-radius: 4px; background: #17212b; margin: 0 auto 7px; }
.te-example-caption { margin: 16px auto 0; max-width: 320px; min-height: 90px; }
.te-example-caption h2 { margin: 5px 0 4px; font-size: 1.08rem; font-weight: 800; }
.te-example-caption p { margin: 0; font-size: .82rem; line-height: 1.45; color: #526b7e; }
.te-carousel-controls { position: absolute; inset: 0; pointer-events: none; }
.te-carousel-controls[hidden] { display: none; }
.te-carousel-controls button {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--te-control-width);
    height: 40px;
    padding: 0;
    border: 1px solid rgba(20,47,73,.12);
    border-radius: 10px;
    color: #142f49;
    background: #fff;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 3px 10px rgba(20,47,73,.06);
}
.te-carousel-controls [data-previous] { left: var(--te-control-side); top: calc(var(--te-phone-height) / 2 - 20px); }
.te-carousel-controls [data-next] { right: var(--te-control-side); top: calc(var(--te-phone-height) / 2 - 20px); }
.te-carousel-controls [data-rotation] { right: var(--te-control-side); top: calc(var(--te-phone-height) / 2 + 28px); }
.te-carousel-count { position: absolute; right: var(--te-control-side); top: calc(var(--te-phone-height) / 2 - 44px); width: var(--te-control-width); font-size: 10px; color: #526b7e; font-variant-numeric: tabular-nums; }
.te-carousel-controls button:hover { background: #e4eef6; }
.te-carousel-controls button:focus-visible { outline: 3px solid #2878b7; outline-offset: 2px; }
.te-carousel-controls svg { width: 17px; height: 17px; }
@media (max-width: 575.98px) {
    .te-hero-carousel { --te-control-width: 24px; --te-control-side: max(-24px, calc(50% - 171px)); }
}
@media (max-width: 991.98px) {
    .te-hero-carousel { margin-top: 12px; }
}
@media (max-width: 359.98px) {
    .te-hero-carousel { --te-phone-height: 505px; }
    .te-phone-messages { padding-left: 9px; padding-right: 9px; }
    .te-message-thread { padding-left: 9px; padding-right: 9px; }


}