/* =========================================================
   SERVOMIX — MINECRAFT HOSTING
   File: css/pages/minecraft-hosting.css
   Used by: minecraft-hosting/. Markup and copy are the
   originals; this file only lays them out. Every value is
   a token.
========================================================= */

/* ---------------------------------------------------------
   SHARED
--------------------------------------------------------- */

.mc-hero__container,
.mc-series__container,
.mc-compare__container,
.mc-performance__container,
.mc-container{
    width:min(var(--container), 100% - var(--gutter) * 2);
    margin-inline:auto;
}

.mc-hero,
.mc-series,
.mc-compare,
.mc-included,
.mc-performance,
.mc-reviews,
.mc-faq,
.mc-cta{
    position:relative;
    padding-block:var(--s-7);
    scroll-margin-top:var(--nav-h);
}

@media (min-width:1024px){

    .mc-hero,
    .mc-series,
    .mc-compare,
    .mc-included,
    .mc-performance,
    .mc-reviews,
    .mc-faq,
    .mc-cta{
        padding-block:var(--s-8);
    }
}

/* decorative layers from the old design are not used */
.mc-hero__background,
.mc-hero__overlay,
.mc-hero__glow,
.mc-hero__particles,
.mc-series__background,
.mc-series__overlay,
.mc-series__glow,
.mc-series__particles,
.mc-compare__background,
.mc-compare__overlay,
.mc-compare__glow,
.mc-compare__particles,
.mc-performance__background,
.mc-performance__overlay,
.mc-hero__scroll{
    display:none;
}

.mc-hero__badge,
.mc-series__badge,
.mc-compare__badge,
.mc-performance__badge,
.mc-badge,
.section-badge{
    display:inline-flex;
    align-items:center;
    gap:var(--s-2);
    width:max-content;
    max-width:100%;
    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;
}

/* section headings */
.mc-series__header,
.mc-compare__header,
.mc-performance__header,
.mc-section-title,
.mc-included .section-title{
    display:grid;
    justify-items:start;
    gap:var(--s-3);
    max-width:760px;
    margin-bottom:var(--s-6);
}

.mc-series__title,
.mc-compare__title,
.mc-performance__title,
.mc-section-title h2,
.mc-included .section-title h2,
.mc-cta-content h2{
    font-size:var(--t-h1);
    line-height:var(--lh-heading);
    font-weight:var(--w-h1);
}

.mc-series__title span,
.mc-compare__title span,
.mc-compare__title strong,
.mc-performance__title span,
.mc-performance__title strong{
    display:block;
    font-weight:inherit;
}

.mc-series__title-gradient,
.mc-compare__title strong,
.mc-performance__title strong,
.mc-section-title h2 span,
.mc-included .section-title h2 span,
.mc-cta-content h2 span{
    color:var(--accent);
}

.mc-series__description,
.mc-compare__description,
.mc-performance__description,
.mc-section-title p,
.mc-included .section-title p{
    max-width:62ch;
    color:var(--ink-2);
    font-size:var(--t-lead);
}

:where(main[class*="page-"]) small{
    font-size:var(--t-small);
}

/* buttons */
.mc-hero__button,
.mc-series-card__button,
.mc-compare__button,
.mc-compare__calculator-button,
.mc-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:var(--s-2);
    min-height:var(--btn-h);
    padding:0 var(--btn-pad-x);
    border:1px solid var(--line-strong);
    border-radius:var(--r-pill);
    background:var(--surface);
    color:var(--ink);
    font-weight:var(--w-strong);
    text-decoration:none;
    transition:background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.mc-hero__button--primary,
.mc-series-card--standard .mc-series-card__button,
.mc-compare__button--standard,
.mc-compare__calculator-button,
.mc-btn.primary{
    border-color:transparent;
    background:var(--accent);
    color:var(--ink-on-accent);
}

.mc-hero__button--primary:hover,
.mc-series-card--standard .mc-series-card__button:hover,
.mc-compare__button--standard:hover,
.mc-compare__calculator-button:hover,
.mc-btn.primary:hover{
    background:var(--accent-strong);
    color:var(--ink-on-accent);
}

.mc-hero__button--secondary:hover,
.mc-series-card__button:not(:where(.mc-series-card--standard *)):hover,
.mc-compare__button:not(.mc-compare__button--standard):hover,
.mc-btn.secondary:hover{
    border-color:var(--accent);
    color:var(--accent-strong);
}

:where(.mc-hero__button, .mc-series-card__button, .mc-compare__button, .mc-compare__calculator-button, .mc-btn, .mc-faq-question, .mc-review-arrow, .mc-review-avatar):focus-visible{
    outline:none;
    box-shadow:var(--focus-ring);
}


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

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

@media (min-width:1024px){

    .mc-hero__container{
        grid-template-columns:minmax(0, 1.25fr) minmax(0, .75fr);
        align-items:center;
        gap:var(--s-8);
    }
}

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

.mc-hero__title{
    font-size:min(var(--t-display), 12vw);
    line-height:1;
    font-weight:var(--w-display);
    font-stretch:var(--wd-display);
}

.mc-hero__title-line{
    display:block;
}

.mc-hero__title-gradient{
    color:var(--accent);
}

.mc-hero__description{
    max-width:56ch;
    color:var(--ink-2);
    font-size:var(--t-lead);
    line-height:1.55;
}

.mc-hero__actions{
    display:flex;
    flex-wrap:wrap;
    gap:var(--s-3);
}

.mc-hero__features{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:var(--s-2);
    width:100%;
    max-width:620px;
    padding-top:var(--s-2);
}

@media (min-width:768px){

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

.mc-hero-feature{
    display:grid;
    gap:var(--s-2);
    padding:var(--s-3);
    border:1px solid var(--line);
    border-radius:var(--r-control);
    background:var(--surface);
}

.mc-hero-feature__icon{
    color:var(--accent);
}

.mc-hero-feature__content strong,
.mc-hero-feature__content span{
    display:block;
}

.mc-hero-feature__content strong{
    font-size:var(--t-small);
}

.mc-hero-feature__content span{
    color:var(--ink-2);
    font-size:var(--t-micro);
}

/* right column: trust + status */
.mc-hero__bottom{
    display:grid;
    gap:var(--s-4);
    padding:var(--s-5);
    border:1px solid var(--glass-edge);
    border-radius:var(--r-panel);
    background:var(--glass);
    -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(160%);
    backdrop-filter:blur(var(--glass-blur)) saturate(160%);
    box-shadow:var(--shadow-float);
}

.mc-hero__trust{
    display:flex;
    align-items:center;
    gap:var(--s-4);
}

.mc-hero__avatars{
    display:flex;
}

.mc-hero__avatars img{
    width:44px;
    height:44px;
    border:2px solid var(--surface);
    border-radius:var(--r-control);
    image-rendering:pixelated;
}

.mc-hero__avatars img + img{
    margin-left:-12px;
}

.mc-hero__trust-content strong,
.mc-hero__trust-content span{
    display:block;
}

.mc-hero__trust-content span{
    color:var(--ink-2);
    font-size:var(--t-small);
}

.mc-hero__stars{
    display:flex;
    gap:2px;
    margin-top:var(--s-1);
    color:var(--warn);
}

.mc-hero__stars .icon{
    width:14px;
    height:14px;
}

.mc-hero__status{
    display:grid;
    grid-template-columns:minmax(0, 1fr) 1px minmax(0, 1fr);
    gap:var(--s-4);
    padding-top:var(--s-4);
    border-top:1px solid var(--line);
}

.mc-hero__status-divider{
    background:var(--line);
}

.mc-hero-status-item{
    display:flex;
    align-items:center;
    gap:var(--s-3);
}

.mc-hero-status-item__icon{
    display:grid;
    place-items:center;
    flex:none;
    width:40px;
    height:40px;
    border-radius:var(--r-control);
    background:var(--up-soft);
    color:var(--up);
}

.mc-hero-status-item__icon.support{
    background:var(--accent-soft);
    color:var(--accent-strong);
}

.mc-hero-status-item strong,
.mc-hero-status-item span:not([class]){
    display:block;
}

.mc-hero-status-item strong{
    font-size:var(--t-small);
}

.mc-hero-status-item div span{
    color:var(--ink-2);
    font-size:var(--t-micro);
}


/* ---------------------------------------------------------
   SERIES
--------------------------------------------------------- */

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

@media (min-width:1024px){

    .mc-series__grid{
        grid-template-columns:repeat(3, minmax(0, 1fr));
        align-items:stretch;
    }
}

.mc-series-card{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:var(--s-4);
    padding:var(--card-pad-lg);
    border:1px solid var(--line);
    border-radius:var(--r-card);
    background:var(--surface);
}

.mc-series-card--standard{
    border-color:var(--accent);
    box-shadow:var(--shadow-float);
}

.mc-series-card__top-label,
.mc-series-card__recommended{
    display:inline-flex;
    align-items:center;
    gap:var(--s-2);
    width:max-content;
    min-height:28px;
    padding:0 var(--s-3);
    border-radius:var(--r-pill);
    background:var(--surface-sunken);
    color:var(--ink-2);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
    letter-spacing:.04em;
}

.mc-series-card__recommended{
    background:var(--accent);
    color:var(--ink-on-accent);
}

.mc-series-card__top-label .icon,
.mc-series-card__recommended .icon{
    width:14px;
    height:14px;
}

.mc-series-card__hero{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--s-4);
}

.mc-series-card__heading h3 span{
    display:block;
    color:var(--ink-2);
    font-size:var(--t-small);
    letter-spacing:.12em;
}

.mc-series-card__heading h3 strong{
    display:block;
    font-size:var(--t-h2);
    line-height:1.1;
    font-weight:var(--w-h2);
}

.mc-series-card__type{
    display:flex;
    align-items:center;
    gap:var(--s-2);
    margin-top:var(--s-1);
    color:var(--accent-strong);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
}

.mc-series-card__type span{
    width:12px;
    height:1px;
    background:currentColor;
}

.mc-series-card__visual{
    flex:none;
    width:104px;
    height:104px;
    padding:var(--s-2);
    border-radius:var(--r-card);
    background:var(--surface-sunken);
}

.mc-series-card__visual img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.mc-series-card__description{
    color:var(--ink-2);
}

.mc-series-card__divider{
    height:1px;
    background:var(--line);
}

.mc-series-card__features{
    display:grid;
    gap:var(--s-2);
    margin:0;
    padding:0;
    list-style:none;
}

.mc-series-card__features li{
    display:flex;
    align-items:center;
    gap:var(--s-3);
    font-size:var(--t-small);
}

.mc-series-card__features .icon{
    color:var(--up);
}

.mc-series-card__button{
    margin-top:auto;
    width:100%;
}


/* ---------------------------------------------------------
   COMPARE TABLE
--------------------------------------------------------- */

.mc-compare__table-wrapper{
    overflow-x:auto;
    border:1px solid var(--line);
    border-radius:var(--r-card);
    background:var(--surface);
    scrollbar-width:thin;
}

.mc-compare__table{
    display:grid;
    grid-template-columns:minmax(200px, .9fr) repeat(3, minmax(170px, 1fr));
    min-width:720px;
}

.mc-compare__table > *{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:var(--s-2);
    padding:var(--s-3) var(--s-4);
    border-bottom:1px solid var(--line);
}

.mc-compare__table > :nth-last-child(-n + 4){
    border-bottom:0;
}

.mc-compare__head{
    position:relative;
    align-items:center;
    padding-block:var(--s-5) var(--s-4);
    text-align:center;
}

.mc-compare__head--features{
    align-items:flex-start;
    justify-content:flex-end;
    color:var(--ink-2);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
}

.mc-compare__head--features span{
    display:inline-flex;
    align-items:center;
    gap:var(--s-2);
}

.mc-compare__head--standard,
.mc-compare__cell--standard{
    background:var(--accent-tint);
}

.mc-compare__popular-badge{
    display:inline-flex;
    align-items:center;
    gap:var(--s-1);
    min-height:24px;
    padding:0 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);
}

.mc-compare__popular-badge .icon{
    width:12px;
    height:12px;
}

.mc-compare__plan-visual{
    width:64px;
    height:64px;
}

.mc-compare__plan-visual img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.mc-compare__plan-info h3{
    font-size:var(--t-h3);
}

.mc-compare__plan-info span{
    color:var(--ink-2);
    font-size:var(--t-small);
}

.mc-compare__table > .mc-compare__feature{
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    gap:var(--s-3);
    font-weight:var(--w-strong);
    font-size:var(--t-small);
}

.mc-compare__feature-icon{
    display:grid;
    place-items:center;
    flex:none;
    width:32px;
    height:32px;
    border-radius:var(--r-control);
    background:var(--accent-soft);
    color:var(--accent-strong);
}

.mc-compare__cell{
    align-items:center;
    color:var(--ink-2);
    font-size:var(--t-small);
    text-align:center;
}

.mc-compare__rating{
    display:flex;
    gap:2px;
    color:var(--warn);
}

.mc-compare__rating .icon{
    width:16px;
    height:16px;
}

.mc-compare__price strong{
    color:var(--ink);
    font-size:var(--t-h3);
}

.mc-compare__price span{
    color:var(--ink-2);
}

.mc-compare__button{
    min-height:var(--btn-h-sm);
    padding:0 var(--s-4);
    font-size:var(--t-small);
}

.mc-compare__calculator{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    gap:var(--s-4);
    align-items:center;
    margin-top:var(--s-5);
    padding:var(--s-5);
    border:1px solid var(--line);
    border-radius:var(--r-card);
    background:var(--surface);
}

@media (min-width:768px){

    .mc-compare__calculator{
        grid-template-columns:auto minmax(0, 1fr) auto;
    }
}

.mc-compare__calculator-icon{
    display:grid;
    place-items:center;
    width:48px;
    height:48px;
    border-radius:var(--r-control);
    background:var(--accent-soft);
    color:var(--accent-strong);
}

.mc-compare__calculator-content h3{
    font-size:var(--t-h3);
}

.mc-compare__calculator-content p{
    color:var(--ink-2);
}


/* ---------------------------------------------------------
   INCLUDED
--------------------------------------------------------- */

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

@media (min-width:640px){

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

@media (min-width:1024px){

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

.mc-feature-card{
    display:grid;
    align-content:start;
    gap:var(--s-2);
    padding:var(--card-pad);
    border:1px solid var(--line);
    border-radius:var(--r-card);
    background:var(--surface);
}

.mc-feature-card > .icon{
    width:var(--icon-lg);
    height:var(--icon-lg);
    color:var(--accent);
}

.mc-feature-card h3{
    font-size:var(--t-body);
    font-weight:var(--w-strong);
}

.mc-feature-card p{
    color:var(--ink-2);
    font-size:var(--t-small);
    line-height:var(--lh-small);
}

.mc-included__footer{
    display:flex;
    align-items:center;
    gap:var(--s-4);
    margin-top:var(--s-5);
    padding:var(--s-5);
    border-radius:var(--r-card);
    background:var(--up-soft);
}

.mc-included__footer-icon{
    display:grid;
    place-items:center;
    flex:none;
    width:48px;
    height:48px;
    border-radius:50%;
    background:var(--up);
    color:var(--ink-on-accent);
}

.mc-included__footer h3{
    font-size:var(--t-h3);
}

.mc-included__footer h3 span{
    color:var(--up);
}

.mc-included__footer p{
    color:var(--ink-2);
}


/* ---------------------------------------------------------
   PERFORMANCE
--------------------------------------------------------- */

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

@media (min-width:1024px){

    .mc-performance__container{
        grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr);
        gap:var(--s-5);
    }

    .mc-performance__header,
    .mc-performance__benefits{
        grid-column:1 / -1;
    }
}

.mc-performance__header{
    margin-bottom:var(--s-2);
}

.mc-performance__stats{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:var(--s-3);
}

.mc-performance-card{
    display:grid;
    align-content:start;
    gap:var(--s-3);
    padding:var(--card-pad);
    border:1px solid var(--line);
    border-radius:var(--r-card);
    background:var(--surface);
}

.mc-performance-card__icon{
    display:grid;
    place-items:center;
    width:40px;
    height:40px;
    border-radius:var(--r-control);
    background:var(--accent-soft);
    color:var(--accent-strong);
}

.mc-performance-card h3{
    font-size:var(--t-h2);
    line-height:1.1;
    font-weight:var(--w-h2);
    font-variant-numeric:tabular-nums;
}

.mc-performance-card__content span{
    display:block;
    color:var(--accent-strong);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
}

.mc-performance-card__content p{
    margin-top:var(--s-1);
    color:var(--ink-2);
    font-size:var(--t-small);
    line-height:var(--lh-small);
}

.mc-performance__metrics{
    display:grid;
    align-self:start;
    align-content:start;
    gap:var(--s-4);
    padding:var(--card-pad-lg);
    border-radius:var(--r-card);
    background:var(--console);
    color:var(--console-ink);
}

.mc-performance__metrics-heading{
    display:flex;
    align-items:center;
    gap:var(--s-2);
    color:var(--console-ink);
}

.mc-performance__metrics-heading h3{
    color:inherit;
    font-size:var(--t-h3);
}

.mc-performance-metric{
    display:grid;
    gap:var(--s-2);
}

.mc-performance-metric__top{
    display:flex;
    justify-content:space-between;
    color:var(--console-ink-2);
    font-size:var(--t-small);
}

.mc-performance-metric__top strong{
    color:var(--console-ink);
    font-variant-numeric:tabular-nums;
}

.mc-performance-metric__track{
    height:8px;
    overflow:hidden;
    border-radius:var(--r-pill);
    background:var(--on-accent-tint);
}

.mc-performance-metric__bar{
    display:block;
    width:var(--metric-width, 0);
    height:100%;
    border-radius:inherit;
    background:var(--accent);
}

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

@media (min-width:640px){

    .mc-performance__benefits{
        grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
    }
}

.mc-performance-benefit{
    display:flex;
    align-items:flex-start;
    gap:var(--s-3);
    padding:var(--s-4);
    border:1px solid var(--line);
    border-radius:var(--r-control);
    background:var(--surface);
}

.mc-performance-benefit__icon{
    color:var(--accent);
}

.mc-performance-benefit h4{
    font-size:var(--t-small);
    font-weight:var(--w-strong);
}

.mc-performance-benefit p{
    color:var(--ink-2);
    font-size:var(--t-small);
    line-height:var(--lh-small);
}


/* ---------------------------------------------------------
   REVIEWS
--------------------------------------------------------- */

.mc-review-rating{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:var(--s-2) var(--s-3);
    margin-bottom:var(--s-5);
}

.mc-review-stars{
    display:flex;
    gap:2px;
    color:var(--warn);
}

.mc-review-rating strong{
    font-size:var(--t-h3);
}

.mc-review-rating span{
    color:var(--ink-2);
}

.mc-review-main{
    display:grid;
    grid-template-columns:auto minmax(0, 1fr) auto;
    align-items:center;
    gap:var(--s-3);
}

.mc-review-arrow{
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    border:1px solid var(--line-strong);
    border-radius:50%;
    background:var(--surface);
    color:var(--ink);
    cursor:pointer;
}

.mc-review-arrow:hover{
    border-color:var(--accent);
    color:var(--accent-strong);
}

@media (max-width:639px){

    .mc-review-main{
        grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
    }

    .mc-review-card{
        grid-column:1 / -1;
        grid-row:1;
    }

    .mc-review-arrow.next{
        justify-self:end;
    }
}

.mc-review-card{
    display:grid;
    gap:var(--s-4);
    padding:var(--card-pad-lg);
    border:1px solid var(--line);
    border-radius:var(--r-panel);
    background:var(--surface);
    box-shadow:var(--shadow-card);
    opacity:.35;
    transition:opacity var(--dur-fast) var(--ease);
}

.mc-review-card.active{
    opacity:1;
}

.mc-review-quote{
    color:var(--accent);
}

.mc-review-quote .icon{
    width:var(--icon-lg);
    height:var(--icon-lg);
}

.mc-review-card blockquote{
    margin:0;
    color:var(--ink);
    font-size:var(--t-lead);
    line-height:1.55;
}

.mc-review-divider{
    height:1px;
    background:var(--line);
}

.mc-review-user{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:var(--s-4);
}

.mc-review-user__profile{
    display:flex;
    align-items:center;
    gap:var(--s-3);
}

.mc-review-user__avatar{
    width:52px;
    height:52px;
    border-radius:var(--r-control);
    image-rendering:pixelated;
}

.mc-review-user__details h3{
    font-size:var(--t-body);
}

.mc-review-user__role{
    display:block;
    color:var(--ink-2);
    font-size:var(--t-small);
}

.mc-review-user__verified{
    display:flex;
    align-items:center;
    gap:var(--s-1);
    color:var(--up);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
}

.mc-review-user__verified .icon{
    width:14px;
    height:14px;
}

.mc-review-user__stats{
    display:flex;
    flex-wrap:wrap;
    gap:var(--s-2);
}

.mc-review-user__stats > div{
    display:inline-flex;
    align-items:center;
    gap:var(--s-2);
    min-height:32px;
    padding:0 var(--s-3);
    border-radius:var(--r-pill);
    background:var(--surface-sunken);
    color:var(--ink-2);
    font-size:var(--t-small);
}

.mc-review-user__stats .icon{
    color:var(--accent);
}

.mc-review-selector{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:var(--s-3);
    margin-top:var(--s-5);
}

.mc-review-avatar{
    display:grid;
    justify-items:center;
    gap:var(--s-1);
    padding:var(--s-1);
    border:0;
    border-radius:var(--r-control);
    background:transparent;
    color:var(--ink-2);
    font:inherit;
    cursor:pointer;
}

.mc-review-avatar span{
    display:block;
    padding:2px;
    border:2px solid transparent;
    border-radius:var(--r-control);
}

.mc-review-avatar img{
    display:block;
    width:44px;
    height:44px;
    border-radius:calc(var(--r-control) - 4px);
    image-rendering:pixelated;
}

.mc-review-avatar small{
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
}

.mc-review-avatar.active span{
    border-color:var(--accent);
}

.mc-review-avatar.active small{
    color:var(--accent-strong);
}

.mc-review-trust{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:var(--s-3);
    margin-top:var(--s-6);
}

@media (min-width:768px){

    .mc-review-trust{
        grid-template-columns:repeat(5, minmax(0, 1fr));
    }
}

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

.mc-review-trust__item > .icon{
    flex:none;
    color:var(--accent);
}

.mc-review-trust__item strong,
.mc-review-trust__item span{
    display:block;
}

.mc-review-trust__item strong{
    font-size:var(--t-h3);
    line-height:1.1;
}

.mc-review-trust__item span{
    color:var(--ink-2);
    font-size:var(--t-small);
}


/* ---------------------------------------------------------
   FAQ
--------------------------------------------------------- */

.mc-faq-wrapper{
    display:grid;
    gap:var(--s-2);
    max-width:880px;
}

.mc-faq-item{
    border:1px solid var(--line);
    border-radius:var(--r-card);
    background:var(--surface);
}

.mc-faq-item.active{
    border-color:var(--accent);
}

.mc-faq-question{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--s-4);
    width:100%;
    min-height:64px;
    padding:var(--s-3) var(--s-4);
    border:0;
    border-radius:inherit;
    background:transparent;
    color:var(--ink);
    font:inherit;
    text-align:left;
    cursor:pointer;
}

.mc-faq-left{
    display:flex;
    align-items:center;
    gap:var(--s-3);
}

.mc-faq-icon{
    display:grid;
    place-items:center;
    flex:none;
    width:36px;
    height:36px;
    border-radius:var(--r-control);
    background:var(--accent-soft);
    color:var(--accent-strong);
}

.mc-faq-question h3{
    font-size:var(--t-body);
    font-weight:var(--w-strong);
}

/* the markup's plus/minus icon never changes, so the toggle is drawn */
.mc-faq-toggle{
    position:relative;
    flex:none;
    width:32px;
    height:32px;
    border-radius:50%;
    background:var(--surface-sunken);
}

.mc-faq-toggle .icon{
    display:none;
}

.mc-faq-toggle::before,
.mc-faq-toggle::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:12px;
    height:2px;
    border-radius:1px;
    background:var(--ink);
    transform:translate(-50%, -50%);
    transition:transform var(--dur-fast) var(--ease);
}

.mc-faq-toggle::after{
    transform:translate(-50%, -50%) rotate(90deg);
}

.mc-faq-item.active .mc-faq-toggle{
    background:var(--accent);
}

.mc-faq-item.active .mc-faq-toggle::before,
.mc-faq-item.active .mc-faq-toggle::after{
    background:var(--ink-on-accent);
}

.mc-faq-item.active .mc-faq-toggle::after{
    transform:translate(-50%, -50%) rotate(0deg);
}

.mc-faq-answer{
    display:none;
    padding:0 var(--s-4) var(--s-4) calc(var(--s-4) + 36px + var(--s-3));
    color:var(--ink-2);
}

.mc-faq-item.active .mc-faq-answer{
    display:block;
}

.mc-faq-support{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:var(--s-4);
    max-width:880px;
    margin-top:var(--s-5);
    padding:var(--s-5);
    border-radius:var(--r-card);
    background:var(--accent-tint);
}

.mc-faq-support-left{
    display:flex;
    align-items:center;
    gap:var(--s-3);
}

.mc-support-icon{
    display:grid;
    place-items:center;
    flex:none;
    width:44px;
    height:44px;
    border-radius:var(--r-control);
    background:var(--accent);
    color:var(--ink-on-accent);
}

.mc-faq-support h3{
    font-size:var(--t-h3);
}

.mc-faq-support p{
    color:var(--ink-2);
    font-size:var(--t-small);
}

.mc-faq-support-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:var(--s-2);
}


/* ---------------------------------------------------------
   CTA
--------------------------------------------------------- */

.mc-cta .mc-container{
    padding:var(--card-pad-lg);
    border-radius:var(--r-panel);
    background:var(--console);
    color:var(--console-ink);
}

@media (min-width:1024px){

    .mc-cta .mc-container{
        padding:var(--s-8);
    }
}

.mc-cta-content{
    display:grid;
    justify-items:start;
    gap:var(--s-4);
}

.mc-cta .mc-badge{
    border-color:transparent;
    background:var(--on-accent-tint);
    color:var(--console-ink);
}

.mc-cta-content h2{
    color:var(--console-ink);
}

.mc-cta-content h2 span{
    display:block;
    color:var(--console-ink);
}

.mc-cta-content > p{
    max-width:62ch;
    color:var(--console-ink-2);
    font-size:var(--t-lead);
}

.mc-cta-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:var(--s-3);
}

.mc-cta .mc-btn.secondary{
    border-color:var(--console-ink-2);
    background:transparent;
    color:var(--console-ink);
}

.mc-cta .mc-btn.secondary:hover{
    border-color:var(--console-ink);
    color:var(--console-ink);
}

.mc-cta-guarantee{
    display:flex;
    align-items:center;
    gap:var(--s-2);
    color:var(--console-ink-2);
    font-size:var(--t-small);
}

.mc-cta-guarantee .icon{
    color:var(--up-fill);
}

.mc-cta-features{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:var(--s-3);
    width:100%;
    margin-top:var(--s-3);
    padding-top:var(--s-5);
    border-top:1px solid var(--on-accent-tint);
}

@media (min-width:768px){

    .mc-cta-features{
        grid-template-columns:repeat(4, minmax(0, 1fr));
    }
}

.mc-cta-feature{
    display:flex;
    align-items:center;
    gap:var(--s-3);
}

.mc-cta-icon{
    display:grid;
    place-items:center;
    flex:none;
    width:40px;
    height:40px;
    border-radius:var(--r-control);
    background:var(--on-accent-tint);
    color:var(--console-ink);
}

.mc-cta-feature h4{
    color:var(--console-ink);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
}

.mc-cta-feature p{
    color:var(--console-ink-2);
    font-size:var(--t-micro);
}