/* aeo-audit: tier-upsell. Phase 5 pricing-tier upsell card (D-113 step 4.1).
 *
 * One card, three variants (--url_cap / --daily_cap / --free_locked) used on the
 * wizard Step-3 completion, the dashboard, and pages-by-type. Mirrors the
 * aeo-contextual-upsell card shape so it sits consistently with the existing
 * cross-app upsell, but uses the standardized panel treatment
 * (white / dark:neutral-800 + border + rounded + shadow) we settled on for the
 * pricing page. Brand purple via existing --bg-primary / --clr-primary; NO new
 * color tokens; NO score-band colors (D-081 untouched).
 */

.aeo-tier-upsell {
    margin-top: 1.25rem;
    padding: 1.25rem 1.375rem;
    background-color: #ffffff;
    border: 1px solid rgb(229 231 235);
    border-left: 3px solid var(--bg-primary, rgb(80 70 229));
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
:is(.dark .aeo-tier-upsell) {
    background-color: rgb(31 41 55); /* neutral-800, matches the standardized panel */
    border-color: rgb(55 65 81);
    border-left-color: var(--bg-primary, rgb(80 70 229));
}

.aeo-tier-upsell__head {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.aeo-tier-upsell__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.625rem;
    height: 1.625rem;
    border-radius: 0.375rem;
    background-color: rgb(var(--bg-primary-rgb, 80 70 229) / 0.12);
    color: var(--bg-primary, rgb(80 70 229));
    font-size: 0.9375rem;
}
:is(.dark .aeo-tier-upsell__icon) {
    background-color: rgb(var(--bg-primary-rgb, 80 70 229) / 0.20);
}

.aeo-tier-upsell__eyebrow {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgb(115 115 115);
}
:is(.dark .aeo-tier-upsell__eyebrow) {
    color: rgb(163 163 163);
}

.aeo-tier-upsell__title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: rgb(23 23 23);
    margin: 0 0 0.375rem;
    line-height: 1.35;
}
:is(.dark .aeo-tier-upsell__title) {
    color: #ffffff;
}

.aeo-tier-upsell__body {
    font-size: 0.8125rem;
    line-height: 1.55;
    color: rgb(64 64 64);
    margin: 0 auto 0.875rem;
    max-width: 60ch;
}
:is(.dark .aeo-tier-upsell__body) {
    color: rgb(209 213 219);
}

.aeo-tier-upsell__list {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.5rem 1rem;
}
.aeo-tier-upsell__list-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: rgb(55 65 81);
}
:is(.dark .aeo-tier-upsell__list-item) {
    color: rgb(209 213 219);
}
.aeo-tier-upsell__list-item iconify-icon {
    flex: 0 0 auto;
    color: var(--bg-primary, rgb(80 70 229));
    font-size: 1rem;
}

.aeo-tier-upsell__cta {
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background-color: var(--bg-primary, rgb(80 70 229));
    color: #ffffff;
    border-radius: 0.375rem;
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 600;
    transition: filter 0.15s ease, transform 0.05s ease;
}
.aeo-tier-upsell__cta:hover {
    filter: brightness(0.92);
    color: #ffffff;
}
.aeo-tier-upsell__cta:active {
    transform: translateY(1px);
}

@media (max-width: 640px) {
    .aeo-tier-upsell { padding: 1rem; }
    .aeo-tier-upsell__cta { width: 100%; justify-content: center; }
    .aeo-tier-upsell__list { grid-template-columns: 1fr; }
}