.esim-promo { display: flex; align-items: center; gap: 28px; max-width: 1200px; width: calc(100% - 48px); margin: 40px auto; padding: 36px; border-radius: 20px; background: #e5efef; color: #19394b; font-family: var(--font, 'Montserrat', sans-serif); box-sizing: border-box; }
.esim-promo-symbol { display: grid; place-items: center; width: 52px; height: 65px; flex-shrink: 0; border: 2px solid #036eaa; border-radius: 10px 22px 10px 10px; font-size: 32px; font-weight: 750; color: #036eaa; transform: rotate(-8deg); }
.esim-promo-copy { flex: 1; }
.esim-promo-copy > span { font-size: 9px; letter-spacing: .15em; font-weight: 750; color: #036392; }
.esim-promo h2 { font-family: inherit; color: inherit; font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -.035em; font-weight: 750; text-transform: none; line-height: 1.25; margin: 10px 0; }
.esim-promo p { font-size: 12px; line-height: 1.8; color: #455e6a; margin: 0; }
.esim-promo > a { display: flex; align-items: center; justify-content: center; gap: 24px; flex-shrink: 0; padding: 15px 23px; border-radius: 9px; background: #036eaa; color: #fff; font-weight: 650; font-size: 12px; text-decoration: none; }
.esim-promo > a:hover { background: #045a88; }
.esim-promo > a:focus-visible { outline: 3px solid #19394b; outline-offset: 4px; }
html[data-appearance="dark"] .esim-promo { background: #213044; color: #e4edf2; }
html[data-appearance="dark"] .esim-promo p { color: #bdcdd9; }
html[data-appearance="dark"] .esim-promo-copy > span, html[data-appearance="dark"] .esim-promo-symbol { color: #69c5f0; }
@media (max-width: 700px) {
    .esim-promo { width: calc(100% - 36px); flex-wrap: wrap; padding: 25px; gap: 20px; }
    .esim-promo-symbol { display: none; }
    .esim-promo-copy { flex-basis: 100%; }
    .esim-promo > a { width: 100%; }
}