/* Shared app ads for tools and guides. Scoped to .app-promo; homepage is independent. */
.app-promo {
    --promo-ink: #142b43;
    --promo-muted: #506077;
    --promo-accent: #245dde;
    --promo-line: #cad8ed;
    --promo-orbit: #dce7fa;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 126px;
    gap: 28px;
    align-items: center;
    position: relative;
    margin: 2.5rem 0;
    padding: 34px;
    border: 1px solid #dce5f3;
    border-radius: 22px;
    background: radial-gradient(ellipse at 100% 0, #dce8fe 0, transparent 65%), #f2f5fb;
    color: var(--promo-ink);
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 15px;
    line-height: 1.65;
    text-align: left;
    isolation: isolate;
}
.app-promo, .app-promo *, .app-promo *::before, .app-promo *::after { box-sizing: border-box; }
.app-promo .app-promo__content { min-width: 0; }
.app-promo .app-promo__brand {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    color: var(--promo-ink);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.5;
}
.app-promo .app-promo__flag {
    flex: 0 0 22px;
    width: 22px;
    height: 16px;
    border-radius: 2px;
    background:
        linear-gradient(90deg, transparent 27%, #16375b 27% 37%, transparent 37%),
        linear-gradient(transparent 41%, #16375b 41% 59%, transparent 59%),
        linear-gradient(90deg, transparent 22%, white 22% 42%, transparent 42%),
        linear-gradient(transparent 33%, white 33% 67%, transparent 67%), #c23c48;
}
.app-promo .app-promo__language {
    padding: 3px 9px;
    border: 1px solid var(--promo-line);
    border-radius: 20px;
    color: var(--promo-muted);
    font-size: 11px;
    font-weight: 500;
}
.app-promo .app-promo__title {
    margin: 19px 0 14px;
    padding: 0;
    border: 0;
    color: var(--promo-ink);
    font-size: clamp(27px, 3vw, 35px);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.16;
    text-align: left;
    text-wrap: balance;
}
.app-promo .app-promo__title em {
    color: var(--promo-accent);
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 400;
}
.app-promo .app-promo__description {
    max-width: 520px;
    margin: 0 0 22px;
    padding: 0;
    color: var(--promo-muted);
    font-size: 14px;
    line-height: 1.7;
}
.app-promo .app-promo__stores { display: flex; flex-wrap: wrap; gap: 10px; }
.app-promo .app-promo__store {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 62px;
    max-width: 100%;
    padding: 11px 14px;
    border: 1px solid #142b43;
    border-radius: 12px;
    background: #142b43;
    color: white;
    text-decoration: none;
    transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}
.app-promo .app-promo__store img {
    flex-shrink: 0;
    display: block;
    width: 30px;
    height: 32px;
    object-fit: contain;
    border: 0;
    border-radius: 6px;
}
.app-promo .app-promo__store-label { display: block; min-width: 0; line-height: 1.2; }
.app-promo .app-promo__store-label small {
    display: block;
    margin-bottom: 3px;
    color: #e0e8f2;
    font-size: 10px;
    font-weight: 400;
}
.app-promo .app-promo__store-label strong { color: inherit; font-size: 16px; font-weight: 600; white-space: nowrap; }
.app-promo .app-promo__arrow { margin-left: 6px; color: #bdd0e9; font-size: 17px; }
.app-promo .app-promo__store:hover { background: #234263; transform: translateY(-3px); box-shadow: 0 7px 18px #142b4320; }
.app-promo .app-promo__store:focus-visible { outline: 3px solid #b24d1d; outline-offset: 4px; }
.app-promo .app-promo__note { margin: 13px 0 0; color: var(--promo-muted); font-size: 11px; line-height: 1.6; }

/* Interface languages are informational, not language-switching controls. */
.app-promo .app-promo__languages {
    grid-column: 1 / -1;
    padding-top: 18px;
    border-top: 1px solid var(--promo-line);
}
.app-promo .app-promo__languages-label {
    margin: 0 0 12px;
    padding: 0;
    color: var(--promo-ink);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
}
.app-promo .app-promo__language-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.app-promo .app-promo__language-list li {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 0;
    color: var(--promo-muted);
    font-size: 12px;
    line-height: 1.5;
    white-space: nowrap;
}
.app-promo .app-promo__language-list img {
    display: block;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 1px #142b4310;
}

/* A lightweight decorative greeting, not an imitation of the app interface. */
.app-promo .app-promo__art {
    position: relative;
    display: grid;
    place-items: center;
    width: 126px;
    height: 126px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 25%, #ffffff70, transparent 70%), var(--promo-orbit);
    color: var(--promo-accent);
    transform: rotate(-10deg);
}
.app-promo .app-promo__art::before { content: ''; position: absolute; inset: -12px; border: 1px solid var(--promo-line); border-radius: 50%; }
.app-promo .app-promo__art > span { font: italic 61px/1 Georgia, 'Times New Roman', serif; letter-spacing: -0.06em; padding-bottom: 7px; }
.app-promo .app-promo__art i::before { content: '✦'; position: absolute; right: 0; top: -13px; font-style: normal; font-size: 23px; }
.app-promo.app-promo--mint {
    --promo-accent: #35694e;
    --promo-line: #bdd4c5;
    --promo-orbit: #d6e8dd;
    background: radial-gradient(ellipse at 100% 0, #dcece2, transparent 65%), #f0f5f0;
    border-color: #d9e5dc;
}
.app-promo.app-promo--dark {
    --promo-ink: #fff;
    --promo-muted: #d0ddee;
    --promo-accent: #a5c1ff;
    --promo-line: #456180;
    --promo-orbit: #294a73;
    background: radial-gradient(ellipse at 100% 0, #2b4f7c, transparent 70%), #142d4c;
    border-color: #29476a;
}
.app-promo--dark .app-promo__store { background: #fff; color: #142b43; border-color: #fff; }
.app-promo--dark .app-promo__store-label small, .app-promo--dark .app-promo__arrow { color: #455d79; }
.app-promo--dark .app-promo__store:hover { background: #eaf1fc; border-color: #eaf1fc; }
.app-promo--dark .app-promo__store:focus-visible { outline-color: #ffbc8f; }
@media (max-width: 700px) {
    .app-promo { grid-template-columns: minmax(0, 1fr); padding: 28px; }
    .app-promo .app-promo__art { display: none; }
    .app-promo .app-promo__description { max-width: none; }
}
@media (max-width: 420px) {
    .app-promo { padding: 24px 20px; border-radius: 18px; margin-block: 2rem; }
    .app-promo .app-promo__title { font-size: 28px; }
    .app-promo .app-promo__stores { flex-direction: column; align-items: stretch; }
    .app-promo .app-promo__store { padding-inline: 16px; }
    .app-promo .app-promo__arrow { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .app-promo .app-promo__store { transition: none; }
    .app-promo .app-promo__store:hover { transform: none; }
}