/* =========================================================
   SERVOMIX — PLAN TIER PAGES
   File: css/pages/tier.css
   Used by: smx-budget, smx-standard, smx-premium (and the VPS
   tiers). Needs tokens.css, base.css, components.css, site.css.
   Layout only; every value is a token. Page copy is original.
========================================================= */

/* ---------------------------------------------------------
   SECTIONS
--------------------------------------------------------- */

.tier-section{
    position:relative;
    padding-block:var(--s-7);
}

@media (min-width:1024px){

    .tier-section{
        padding-block:var(--s-8);
    }
}

.tier-head{
    display:grid;
    justify-items:start;
    gap:var(--s-3);
    margin-bottom:var(--s-6);
}

.tier-head > p{
    max-width:62ch;
    color:var(--ink-2);
    font-size:var(--t-lead);
    line-height:1.55;
}

.tier-badge{
    display:inline-flex;
    align-items:center;
    gap:var(--s-2);
    min-height:32px;
    padding:0 var(--s-3);
    border:1px solid var(--line);
    border-radius:var(--r-pill);
    background:var(--surface);
    color:var(--accent-strong);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
    letter-spacing:.04em;
}

.tier-badge .icon{
    color:var(--accent);
}

.tier-title span{
    color:var(--accent);
}


/* ---------------------------------------------------------
   HERO
--------------------------------------------------------- */

.tier-hero{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    gap:var(--s-7);
    align-items:center;
    padding-block:var(--s-7);
}

@media (min-width:1024px){

    .tier-hero{
        grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr);
        gap:var(--s-8);
        padding-block:var(--s-6) var(--s-8);
    }
}

.tier-hero__copy{
    display:grid;
    justify-items:start;
    gap:var(--s-4);
    min-width:0;
}

.tier-hero__eyebrow{
    color:var(--ink-2);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
    letter-spacing:.06em;
}

.tier-hero__title{
    display:flex;
    flex-wrap:wrap;
    gap:0 .25em;
    font-size:min(var(--t-display), 12vw);
    line-height:1;
}

.tier-hero__title span{
    color:var(--accent);
}

.tier-hero__lead{
    max-width:56ch;
}

.tier-price{
    display:grid;
    gap:var(--s-1);
    padding:var(--s-4) var(--s-5);
    border-radius:var(--r-card);
}

.tier-price__label{
    color:var(--accent-strong);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
    letter-spacing:.06em;
}

.tier-price__main{
    display:flex;
    align-items:baseline;
    gap:var(--s-1);
    color:var(--ink);
    font-variant-numeric:tabular-nums;
}

.tier-price__main strong{
    font-size:var(--t-h1);
    font-weight:var(--w-h1);
    font-stretch:var(--wd-h1);
    line-height:1;
}

.tier-price__main span{
    font-size:var(--t-h3);
    font-weight:var(--w-strong);
}

.tier-price__note{
    color:var(--ink-2);
    font-size:var(--t-small);
}

.tier-specs{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:var(--s-3);
    width:100%;
    margin:0;
}

@media (min-width:600px){

    .tier-specs{
        grid-template-columns:repeat(4, minmax(0, 1fr));
    }
}

.tier-spec{
    display:flex;
    align-items:center;
    gap:var(--s-3);
    padding:var(--s-3);
    border:1px solid var(--line);
    border-radius:var(--r-control);
    background:var(--surface);
}

.tier-spec .icon{
    flex:0 0 auto;
    color:var(--accent);
}

.tier-spec div{
    display:grid;
    line-height:1.3;
}

.tier-spec strong{
    color:var(--ink);
    font-size:var(--t-small);
}

.tier-spec span{
    color:var(--ink-2);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
    letter-spacing:.04em;
}

.tier-visual{
    position:relative;
    display:grid;
    place-items:center;
    width:min(420px, 80%);
    aspect-ratio:1 / 1;
    justify-self:center;
    border-radius:50%;
    background:radial-gradient(circle at 50% 50%, var(--accent-soft) 0%, transparent 68%);
}

.tier-visual img{
    width:100%;   /* the art has wide transparent margins */
    height:auto;
    filter:drop-shadow(0 24px 40px var(--accent-glow));
    animation:tier-float 6s var(--ease) infinite alternate;
}

@keyframes tier-float{
    from{ transform:translate3d(0, -6px, 0); }
    to{ transform:translate3d(0, 6px, 0); }
}

@media (max-width:1023px){

    .tier-visual{
        order:-1;
        width:min(260px, 60%);
    }
}


/* ---------------------------------------------------------
   CONFIGURATOR
--------------------------------------------------------- */

/* glass makes its own stacking context: lift it so open menus sit
   above the plan cards that follow it */
.tier-config{
    position:relative;
    z-index:var(--z-raised);
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    gap:var(--s-3);
    padding:var(--s-4);
    border-radius:var(--r-panel);
}

@media (min-width:640px){

    .tier-config{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

@media (min-width:1100px){

    .tier-config{
        grid-template-columns:repeat(4, minmax(0, 1fr));
    }
}

.tier-config__box{
    position:relative;
    display:grid;
    gap:var(--s-2);
    min-width:0;
    padding:var(--s-3);
    border:1px solid var(--line);
    border-radius:var(--r-card);
    background:var(--surface);
}

.tier-config__label{
    display:flex;
    align-items:center;
    gap:var(--s-2);
}

.tier-config__label .icon{
    color:var(--accent);
}

.tier-config__label div{
    display:grid;
    line-height:1.25;
}

.tier-config__label small{
    color:var(--ink-2);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
    letter-spacing:.06em;
}

.tier-config__label strong{
    color:var(--ink);
    font-size:var(--t-small);
}

.tier-select{
    width:100%;
    min-height:44px;
    padding:0 var(--s-3);
    border:1px solid var(--line-strong);
    border-radius:var(--r-control);
    background:var(--surface);
    color:var(--ink);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
}

.tier-select:focus-visible{
    outline:none;
    border-color:var(--accent);
    box-shadow:var(--focus-ring);
}

.tier-ping{
    display:inline-flex;
    align-items:center;
    gap:var(--s-2);
    color:var(--up);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
    font-variant-numeric:tabular-nums;
}

.tier-ping::before{
    content:"";
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--up-fill);
}


/* ---------- custom location / currency dropdowns ----------
   Class names are the original ones: the page scripts use them. */

.smx-location-dropdown,
.smx-currency-dropdown{
    position:relative;
}

.smx-location-selected,
.smx-currency-selected{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--s-2);
    width:100%;
    min-height:44px;
    padding:0 var(--s-3);
    border:1px solid var(--line-strong);
    border-radius:var(--r-control);
    background:var(--surface);
    color:var(--ink);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
    text-align:left;
}

.smx-location-selected:focus-visible,
.smx-currency-selected:focus-visible{
    outline:none;
    border-color:var(--accent);
    box-shadow:var(--focus-ring);
}

.smx-location-selected__country,
.smx-currency-selected__value{
    display:inline-flex;
    align-items:center;
    gap:var(--s-2);
    min-width:0;
}

.smx-location-selected img,
.smx-location-option img{
    width:22px;
    height:16px;
    border-radius:2px;
    object-fit:cover;
}

.smx-location-selected[aria-expanded="true"] .icon,
.smx-currency-selected[aria-expanded="true"] .icon{
    transform:rotate(180deg);
}

.smx-location-menu,
.smx-currency-menu{
    position:absolute;
    top:calc(100% + var(--s-2));
    left:0;
    right:0;
    z-index:var(--z-overlay);
    display:none;
    padding:var(--s-2);
    border:1px solid var(--line);
    border-radius:var(--r-card);
    background:var(--surface);
    box-shadow:var(--shadow-float);
}

.smx-location-dropdown.is-open .smx-location-menu,
.smx-location-dropdown.open .smx-location-menu,
.smx-location-dropdown.active .smx-location-menu,
.smx-location-menu.is-open,
.smx-location-menu.open,
.smx-location-menu.active,
.smx-currency-dropdown.is-open .smx-currency-menu,
.smx-currency-dropdown.open .smx-currency-menu,
.smx-currency-dropdown.active .smx-currency-menu,
.smx-currency-menu.is-open,
.smx-currency-menu.open,
.smx-currency-menu.active{
    display:grid;
    gap:2px;
}

.smx-location-option,
.smx-currency-option{
    display:grid;
    grid-template-columns:auto minmax(0, 1fr) auto;
    align-items:center;
    gap:var(--s-3);
    min-height:44px;
    padding:0 var(--s-3);
    border:0;
    border-radius:var(--r-control);
    background:transparent;
    color:var(--ink);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
    text-align:left;
}

.smx-location-option:hover,
.smx-currency-option:hover{
    background:var(--accent-soft);
}

.smx-location-option .icon,
.smx-currency-option .icon{
    visibility:hidden;
    color:var(--accent);
}

.smx-location-option.is-active,
.smx-currency-option.is-active{
    color:var(--accent-strong);
}

.smx-location-option.is-active .icon,
.smx-currency-option.is-active .icon{
    visibility:visible;
}

.smx-currency-symbol{
    display:inline-grid;
    place-items:center;
    width:24px;
    height:24px;
    border-radius:50%;
    background:var(--accent-soft);
    color:var(--accent-strong);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
}

.smx-location-native-select,
.smx-currency-native-select{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
    opacity:0;
    pointer-events:none;
}


/* ---------- coupon + sort ---------- */

.tier-tools{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    justify-content:space-between;
    gap:var(--s-3) var(--s-5);
    margin-block:var(--s-5) var(--s-6);
}

.tier-coupon{
    display:grid;
    grid-template-columns:auto minmax(0, 1fr) auto;
    align-items:center;
    gap:var(--s-2);
    flex:1 1 320px;
    max-width:520px;
    padding:var(--s-1) var(--s-1) var(--s-1) var(--s-3);
    border:1px solid var(--line-strong);
    border-radius:var(--r-card);
    background:var(--surface);
}

.tier-coupon .icon{
    color:var(--accent);
}

.tier-coupon input{
    min-width:0;
    min-height:40px;
    border:0;
    background:transparent;
    color:var(--ink);
    font-size:var(--t-small);
}

.tier-coupon input::placeholder{
    color:var(--ink-2);
}

.tier-coupon input:focus{
    outline:none;
}

.tier-coupon:focus-within{
    border-color:var(--accent);
    box-shadow:var(--focus-ring);
}

.tier-coupon .smx-coupon-message{
    grid-column:1 / -1;
    padding:0 var(--s-2) var(--s-1);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
}

.tier-coupon .smx-coupon-message:empty{
    display:none;
}

.tier-coupon .smx-coupon-message.success{
    color:var(--up);
}

.tier-coupon .smx-coupon-message.error{
    color:var(--down);
}

.tier-sort{
    display:flex;
    align-items:center;
    gap:var(--s-2);
    color:var(--ink-2);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
    letter-spacing:.04em;
}

.tier-sort .icon{
    color:var(--accent);
}

.tier-sort .tier-select{
    width:auto;
    min-width:200px;
}


/* ---------------------------------------------------------
   PLAN CARDS (rendered by the page script)
--------------------------------------------------------- */

.tier-grid{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    gap:var(--s-4);
}

@media (min-width:640px){

    .tier-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

@media (min-width:1100px){

    .tier-grid{
        grid-template-columns:repeat(3, minmax(0, 1fr));
    }
}

.tier-card{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:var(--s-3);
    min-width:0;
    padding:var(--s-5);
    border:1px solid var(--line);
    border-radius:var(--r-card);
    background:var(--surface);
    transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.tier-card:hover{
    border-color:var(--accent);
    box-shadow:var(--shadow-card);
}

.tier-card.is-popular{
    border:2px solid var(--accent);
    padding:calc(var(--s-5) - 1px);
}

.tier-card__popular{
    position:absolute;
    top:var(--s-4);
    right:var(--s-4);
    display:inline-flex;
    align-items:center;
    gap:var(--s-1);
    padding:2px var(--s-2);
    border-radius:var(--r-pill);
    background:var(--accent);
    color:var(--ink-on-accent);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
    letter-spacing:.04em;
}

.tier-card__head{
    display:flex;
    align-items:center;
    gap:var(--s-3);
}

.tier-card__head > div{
    display:grid;
}

.tier-card__image{
    display:grid;
    place-items:center;
    flex:0 0 auto;
    width:56px;
    height:56px;
    border-radius:var(--r-control);
    background:var(--surface-sunken);
}

.tier-card__image img{
    width:40px;
    height:40px;
    object-fit:contain;
    image-rendering:pixelated;
}

.tier-card__series{
    color:var(--accent-strong);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
    letter-spacing:.06em;
}

.tier-card__name{
    font-size:var(--t-h3);
    line-height:var(--lh-h3);
}

.tier-card__ram{
    color:var(--ink);
    font-size:var(--t-lead);
    font-weight:var(--w-strong);
}

.tier-card__ram span{
    color:var(--ink-2);
    font-size:var(--t-small);
}

.tier-card__price{
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    gap:var(--s-1);
    color:var(--ink);
    font-variant-numeric:tabular-nums;
}

.tier-card__price strong{
    font-size:var(--t-h2);
    font-weight:var(--w-h2);
    font-stretch:var(--wd-h2);
    line-height:1;
}

.tier-card__price span{
    color:var(--ink-2);
    font-size:var(--t-small);
}

.tier-card__price .tier-card__currency{
    color:var(--ink);
    font-size:var(--t-h3);
    font-weight:var(--w-strong);
}

.tier-card__per-gb{
    color:var(--ink);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
    font-variant-numeric:tabular-nums;
}

.tier-card__per-gb span{
    color:var(--ink-2);
    font-weight:var(--w-body);
}

.tier-card__saving{
    align-self:flex-start;
    padding:2px var(--s-2);
    border-radius:var(--r-pill);
    background:var(--up-soft);
    color:var(--up);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
    letter-spacing:.04em;
}

.tier-card__specs{
    display:grid;
    gap:var(--s-2);
    margin:0;
    padding-top:var(--s-3);
    border-top:1px solid var(--line);
}

.tier-card__specs li{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--s-3);
    color:var(--ink-2);
    font-size:var(--t-small);
}

.tier-card__specs li span{
    display:inline-flex;
    align-items:center;
    gap:var(--s-2);
}

.tier-card__specs .icon{
    color:var(--accent);
}

.tier-card__specs strong{
    color:var(--ink);
    text-align:right;
}

.tier-card__players,
.tier-card__location{
    display:flex;
    align-items:center;
    gap:var(--s-3);
    padding:var(--s-3);
    border-radius:var(--r-control);
    background:var(--surface-sunken);
    font-size:var(--t-small);
}

.tier-card__players .icon,
.tier-card__location .icon{
    color:var(--accent);
}

.tier-card__players div{
    display:grid;
    line-height:1.3;
}

.tier-card__players span{
    color:var(--ink-2);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
    letter-spacing:.06em;
}

.tier-card__players strong{
    color:var(--ink);
}

.tier-card__location{
    padding:var(--s-1) 0;
    background:transparent;
    color:var(--ink-2);
}

.tier-card .btn{
    margin-top:auto;
}


/* ---------- included strip ---------- */

.tier-included{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:var(--s-3) var(--s-6);
    margin:var(--s-6) 0 0;
    padding:var(--s-4);
    border-block:1px solid var(--line);
    color:var(--ink);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
}

.tier-included li{
    display:inline-flex;
    align-items:center;
    gap:var(--s-2);
}

.tier-included .icon{
    color:var(--up);
}


/* ---------------------------------------------------------
   COMPARISON
--------------------------------------------------------- */

.tier-compare{
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:var(--r-card);
    background:var(--surface);
}

.tier-compare__row{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    gap:var(--s-2) var(--s-4);
    padding:var(--s-4);
    border-bottom:1px solid var(--line);
}

.tier-compare__row:last-child{
    border-bottom:0;
}

@media (min-width:760px){

    .tier-compare__row{
        grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr) minmax(0, 1fr);
        align-items:center;
    }
}

.tier-compare__row--head{
    background:var(--surface-sunken);
    color:var(--ink);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
    letter-spacing:.04em;
}

.tier-compare__feature{
    display:flex;
    align-items:center;
    gap:var(--s-2);
    color:var(--ink);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
    letter-spacing:.04em;
}

.tier-compare__feature .icon{
    color:var(--accent);
}

.tier-compare__us,
.tier-compare__other{
    display:grid;
    gap:2px;
    font-size:var(--t-small);
}

.tier-compare__us{
    padding:var(--s-3);
    border-radius:var(--r-control);
    background:var(--accent-soft);
}

.tier-compare__us strong{
    color:var(--ink);
}

.tier-compare__other strong{
    color:var(--ink-2);
}

.tier-compare__us small,
.tier-compare__other small{
    color:var(--ink-2);
    font-size:var(--t-small);   /* <small> would shrink to under 12 px */
}

.tier-compare__brand{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:var(--s-1) var(--s-2);
}

.tier-compare__brand .icon{
    color:var(--accent);
}

.tier-compare__brand span{
    color:var(--accent-strong);
    font-size:var(--t-micro);
}

@media (max-width:759px){

    .tier-compare__row--head{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .tier-compare__row--head > :first-child{
        grid-column:1 / -1;
    }
}


/* ---------------------------------------------------------
   CLOSING CALL TO ACTION
--------------------------------------------------------- */

.tier-cta{
    display:grid;
    justify-items:center;
    gap:var(--s-4);
    padding:var(--s-8) var(--s-6);
    border-radius:var(--r-panel);
    text-align:center;
}

.tier-cta h2{
    display:grid;
}

.tier-cta h2 span{
    color:var(--accent);
}

.tier-cta p{
    max-width:56ch;
    color:var(--ink-2);
    font-size:var(--t-lead);
}


/* ---------------------------------------------------------
   SMX STANDARD dropdowns (original class names; the page
   script toggles .open on the wrapper and .active on options)
--------------------------------------------------------- */

.smx-standard-location,
.smx-standard-currency,
.smx-standard-billing,
.smx-standard-tax{
    position:relative;
}

.smx-standard-location__selected,
.smx-standard-currency__selected,
.smx-standard-billing__selected,
.smx-standard-tax__selected{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--s-2);
    width:100%;
    min-height:44px;
    padding:0 var(--s-3);
    border:1px solid var(--line-strong);
    border-radius:var(--r-control);
    background:var(--surface);
    color:var(--ink);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
    text-align:left;
}

.smx-standard-location__selected:focus-visible,
.smx-standard-currency__selected:focus-visible,
.smx-standard-billing__selected:focus-visible,
.smx-standard-tax__selected:focus-visible{
    outline:none;
    border-color:var(--accent);
    box-shadow:var(--focus-ring);
}

.smx-standard-location__value,
.smx-standard-currency__value,
.smx-standard-billing__value,
.smx-standard-tax__value{
    display:inline-flex;
    align-items:center;
    gap:var(--s-2);
    min-width:0;
}

.smx-standard-location img{
    width:22px;
    height:16px;
    border-radius:2px;
    object-fit:cover;
}

.smx-standard-currency__icon,
.smx-standard-billing__icon,
.smx-standard-tax__icon{
    display:inline-grid;
    place-items:center;
    flex:0 0 auto;
    width:26px;
    height:26px;
    border-radius:50%;
    background:var(--accent-soft);
    color:var(--accent-strong);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
}

.smx-standard-location.open .icon--chevron,
.smx-standard-currency.open .icon--chevron,
.smx-standard-billing.open .icon--chevron,
.smx-standard-tax.open .icon--chevron{
    transform:rotate(180deg);
}

.smx-standard-location__menu,
.smx-standard-currency__menu,
.smx-standard-billing__menu,
.smx-standard-tax__menu{
    position:absolute;
    top:calc(100% + var(--s-2));
    left:0;
    right:0;
    z-index:var(--z-overlay);
    display:none;
    padding:var(--s-2);
    border:1px solid var(--line);
    border-radius:var(--r-card);
    background:var(--surface);
    box-shadow:var(--shadow-float);
}

.smx-standard-location.open .smx-standard-location__menu,
.smx-standard-currency.open .smx-standard-currency__menu,
.smx-standard-billing.open .smx-standard-billing__menu,
.smx-standard-tax.open .smx-standard-tax__menu{
    display:grid;
    gap:2px;
}

.smx-standard-location__option,
.smx-standard-currency__option,
.smx-standard-billing__option,
.smx-standard-tax__option{
    display:flex;
    align-items:center;
    gap:var(--s-3);
    min-height:44px;
    padding:var(--s-2) var(--s-3);
    border:0;
    border-radius:var(--r-control);
    background:transparent;
    color:var(--ink);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
    text-align:left;
}

.smx-standard-billing__option > div,
.smx-standard-tax__option > div{
    display:grid;
    line-height:1.3;
}

.smx-standard-billing__option small,
.smx-standard-tax__option small{
    color:var(--ink-2);
    font-size:var(--t-small);
    font-weight:var(--w-body);
}

.smx-standard-location__option:hover,
.smx-standard-currency__option:hover,
.smx-standard-billing__option:hover,
.smx-standard-tax__option:hover,
.smx-standard-location__option.active,
.smx-standard-currency__option.active,
.smx-standard-billing__option.active,
.smx-standard-tax__option.active{
    background:var(--accent-soft);
}

.smx-standard-location__option.active,
.smx-standard-currency__option.active,
.smx-standard-billing__option.active,
.smx-standard-tax__option.active{
    color:var(--accent-strong);
}

.tier-coupon .smx-standard-coupon-message,
.tier-coupon .smx-premium-coupon-message{
    grid-column:1 / -1;
    padding:0 var(--s-2) var(--s-1);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
}

.tier-coupon .smx-standard-coupon-message:empty,
.tier-coupon .smx-premium-coupon-message:empty{
    display:none;
}

.tier-coupon .success{ color:var(--up); }
.tier-coupon .error{ color:var(--down); }

.tier-cta__art{
    width:min(200px, 50%);
    height:auto;
    filter:drop-shadow(0 18px 30px var(--accent-glow));
}


/* ---------------------------------------------------------
   SMX PREMIUM dropdowns and sort (original class names; the
   page script toggles .active on the wrapper and .selected
   on options)
--------------------------------------------------------- */

.premium-select,
.premium-sort{
    position:relative;
}

.premium-select-button,
.premium-sort-button{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--s-2);
    width:100%;
    min-height:44px;
    padding:0 var(--s-3);
    border:1px solid var(--line-strong);
    border-radius:var(--r-control);
    background:var(--surface);
    color:var(--ink);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
    text-align:left;
}

.premium-sort-button{
    width:auto;
    min-width:240px;
}

.premium-select-button:focus-visible,
.premium-sort-button:focus-visible{
    outline:none;
    border-color:var(--accent);
    box-shadow:var(--focus-ring);
}

.premium-select-current{
    display:inline-flex;
    align-items:center;
    gap:var(--s-2);
    min-width:0;
}

.premium-select-current img,
.premium-select-menu img{
    width:22px;
    height:16px;
    border-radius:2px;
    object-fit:cover;
}

.premium-sort-label{
    color:var(--ink-2);
    letter-spacing:.04em;
}

.premium-currency-symbol,
.premium-currency-option{
    display:inline-grid;
    place-items:center;
    width:26px;
    height:26px;
    border-radius:50%;
    background:var(--accent-soft);
    color:var(--accent-strong);
    font-weight:var(--w-strong);
}

.premium-select.active .icon--chevron,
.premium-sort.active .icon--chevron{
    transform:rotate(180deg);
}

.premium-select-menu,
.premium-sort-menu{
    position:absolute;
    top:calc(100% + var(--s-2));
    left:0;
    right:0;
    z-index:var(--z-overlay);
    display:none;
    padding:var(--s-2);
    border:1px solid var(--line);
    border-radius:var(--r-card);
    background:var(--surface);
    box-shadow:var(--shadow-float);
}

.premium-sort-menu{
    left:auto;
    min-width:240px;
}

.premium-select.active .premium-select-menu,
.premium-sort.active .premium-sort-menu{
    display:grid;
    gap:2px;
}

.premium-select-menu button,
.premium-sort-menu button{
    display:flex;
    align-items:center;
    gap:var(--s-3);
    min-height:44px;
    padding:0 var(--s-3);
    border:0;
    border-radius:var(--r-control);
    background:transparent;
    color:var(--ink);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
    text-align:left;
}

.premium-select-menu button:hover,
.premium-sort-menu button:hover,
.premium-select-menu button.selected,
.premium-sort-menu button.selected{
    background:var(--accent-soft);
}

.premium-select-menu button.selected,
.premium-sort-menu button.selected{
    color:var(--accent-strong);
}

.tier-coupon .premium-coupon-message{
    grid-column:1 / -1;
    padding:0 var(--s-2) var(--s-1);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
}

.tier-coupon .premium-coupon-message:empty{
    display:none;
}


/* ---------- series comparison head cells ---------- */

.tier-compare__series{
    display:grid;
    gap:2px;
    line-height:1.3;
}

.tier-compare__series span{
    color:var(--ink-2);
    font-size:var(--t-micro);
}

.tier-compare__series small{
    color:var(--ink-2);
    font-size:var(--t-small);
    font-weight:var(--w-body);
}

.tier-compare__series .badge{
    justify-self:start;
}

.tier-compare__value{
    display:inline-flex;
    align-items:center;
    gap:var(--s-2);
}

.tier-compare__value .icon{
    color:var(--up);
}

.tier-compare__row--actions{
    background:var(--surface-sunken);
}

.tier-cta__price{
    display:flex;
    align-items:baseline;
    gap:var(--s-1);
    color:var(--ink);
    font-variant-numeric:tabular-nums;
}

.tier-cta__price small{
    margin-right:var(--s-2);
    color:var(--accent-strong);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
    letter-spacing:.06em;
}

.tier-cta__price strong{
    font-size:var(--t-h1);
    font-weight:var(--w-h1);
    line-height:1;
}

.tier-cta__price em{
    color:var(--ink-2);
    font-style:normal;
    font-weight:var(--w-strong);
}