.teens-promo {
    position: fixed; inset: 0; z-index: 10000;
    display: grid; place-items: center; padding: 24px;
    overflow-y: auto; overscroll-behavior: contain;
    background: rgba(15,23,42,.72); backdrop-filter: blur(4px);
}
.teens-promo__dialog {
    position: relative; width: min(100%, 540px); box-sizing: border-box;
    max-height: calc(100dvh - 48px); overflow-y: auto;
    border: 3px solid #0f172a; border-radius: 22px; padding: 58px 28px 28px;
    background: #fdfbf7; color: #0f172a; box-shadow: 8px 8px 0 #0f172a;
    font-family: Inter, system-ui, sans-serif; text-align: center;
}
.teens-promo__title {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.teens-promo__close {
    position: absolute; top: 10px; right: 12px; display: grid; place-items: center;
    width: 42px; height: 42px; padding: 0; border: 2px solid #0f172a;
    border-radius: 50%; background: #fff; color: #0f172a;
    font: 30px/1 system-ui, sans-serif; cursor: pointer; touch-action: manipulation;
}
.teens-promo__close:hover { background: #f1f5f9; }
.teens-promo__image {
    display: block; width: auto; max-width: 100%; height: auto;
    max-height: 48dvh; object-fit: contain; margin: 0 auto 20px;
    border-radius: 12px;
}
.teens-promo__message {
    margin: 0 0 24px; color: #153a94; white-space: pre-line; overflow-wrap: anywhere;
    font-family: Fredoka, Inter, system-ui, sans-serif;
    font-weight: 700; font-size: clamp(1.2rem, 4vw, 1.8rem); line-height: 1.3;
}
.teens-promo__done {
    display: block; width: 100%; min-height: 48px; padding: 12px 20px;
    border: 2px solid #0f172a; border-radius: 12px; background: #1e4fbf; color: #fff;
    font: 700 1rem/1.4 Inter, system-ui, sans-serif; cursor: pointer;
    box-shadow: 3px 3px 0 #0f172a; touch-action: manipulation;
}
.teens-promo__done:hover { background: #153a94; }
.teens-promo button:focus-visible { outline: 3px solid #e53935; outline-offset: 3px; }
@media (max-width: 480px) {
    .teens-promo { padding: 16px; }
    .teens-promo__dialog { padding: 58px 18px 22px; max-height: calc(100dvh - 32px); box-shadow: 5px 5px 0 #0f172a; }
}