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

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

.vps-hero-container,
.vps-hero-bottom-inner,
.vps-series-container,
.comparison-container,
.vps-faq-container,
.vps-cta-container{
    width:min(var(--container), 100% - var(--gutter) * 2);
    margin-inline:auto;
}

.vps-hero,
.vps-series-showcase,
.vps-series-comparison,
.vps-faq,
.vps-final-cta{
    position:relative;
    padding-block:var(--s-7);
    scroll-margin-top:var(--nav-h);
}

@media (min-width:1024px){

    .vps-hero,
    .vps-series-showcase,
    .vps-series-comparison,
    .vps-faq,
    .vps-final-cta{
        padding-block:var(--s-8);
    }
}

/* the empty features section is kept for its anchor only */
.vps-features{
    display:none;
}

/* decorative layers from the old design are not used */
.vps-hero-grid,
.vps-hero-glow,
.vps-console-orbit,
.vps-instance-ring,
.vps-series-bg-grid,
.vps-series-glow,
.series-top-line,
.series-chip-glow,
.series-chip-ring,
.comparison-grid-bg,
.comparison-glow,
.vps-faq-glow,
.vps-cta-glow,
.vps-cta-grid,
.vps-cta-orbit,
.cta-server-glow{
    display:none;
}

.vps-hero-badge,
.vps-series-badge,
.comparison-badge,
.vps-faq-badge,
.vps-cta-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;
}

.vps-series-header,
.comparison-header,
.vps-faq-header{
    display:grid;
    justify-items:start;
    gap:var(--s-3);
    max-width:760px;
    margin-bottom:var(--s-6);
}

.vps-series-header h2,
.comparison-header h2,
.vps-faq-header h2,
.vps-cta-content h2{
    font-size:var(--t-h1);
    line-height:var(--lh-heading);
    font-weight:var(--w-h1);
}

.vps-series-header h2 span,
.vps-faq-header h2 span{
    display:block;
    color:var(--accent);
}

.vps-series-header p,
.comparison-header p,
.vps-faq-header p{
    max-width:62ch;
    color:var(--ink-2);
    font-size:var(--t-lead);
}

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

.vps-btn,
.series-explore-btn,
.faq-support-btn,
.vps-cta-primary,
.vps-cta-secondary{
    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);
}

.vps-btn-primary,
.vpro-card .series-explore-btn,
.faq-support-btn,
.vps-cta-primary{
    border-color:transparent;
    background:var(--accent);
    color:var(--ink-on-accent);
}

.vps-btn-primary:hover,
.vpro-card .series-explore-btn:hover,
.faq-support-btn:hover,
.vps-cta-primary:hover{
    background:var(--accent-strong);
    color:var(--ink-on-accent);
}

.vps-btn-secondary:hover,
.series-explore-btn:hover{
    border-color:var(--accent);
    color:var(--accent-strong);
}

:where(.vps-btn, .series-explore-btn, .faq-support-btn, .vps-cta-primary, .vps-cta-secondary, .vps-faq-question, .vps-quick-commands button, .vps-command-submit):focus-visible{
    outline:none;
    box-shadow:var(--focus-ring);
}


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

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

@media (min-width:1024px){

    .vps-hero-container{
        grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
        gap:var(--s-8);
    }
}

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

.vps-hero h1{
    font-size:min(var(--t-display), 11vw);
    line-height:1;
    font-weight:var(--w-display);
    font-stretch:var(--wd-display);
}

.vps-hero h1 span{
    display:block;
    color:var(--accent);
}

.vps-hero-description{
    max-width:52ch;
    color:var(--ink-2);
    font-size:var(--t-lead);
    line-height:1.55;
}

.vps-hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:var(--s-3);
}

.vps-hero-features{
    display:flex;
    flex-wrap:wrap;
    gap:var(--s-3) var(--s-5);
    padding-top:var(--s-2);
}

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

.vps-hero-feature > span{
    display:grid;
    place-items:center;
    width:40px;
    height:40px;
    border-radius:var(--r-control);
    background:var(--accent-soft);
    color:var(--accent-strong);
}

.vps-hero-feature strong,
.vps-hero-feature small{
    display:block;
}

.vps-hero-feature small{
    color:var(--ink-2);
}

/* console + instance card */
.vps-console-wrap{
    position:relative;
    display:grid;
    gap:var(--s-3);
    min-width:0;
}

.vps-console-photo{
    position:absolute;
    z-index:0;
    top:0;
    right:0;
    width:min(300px, 50%);
    height:auto;
    aspect-ratio:3 / 4;
    object-fit:cover;
    border-radius:var(--r-panel);
    opacity:.9;
    pointer-events:none;
}

@media (min-width:1024px){

    /* the rack photo peeks out behind the console */
    .vps-console-wrap{
        padding:var(--s-7) var(--s-7) 0 0;
    }
}

@media (max-width:1023px){

    .vps-console-photo{
        display:none;
    }
}

.vps-console,
.vps-instance-empty,
.vps-instance-card,
.vps-console-hint{
    position:relative;
    z-index:1;
}

.vps-console{
    display:grid;
    gap:var(--s-3);
    padding:var(--s-4);
    border-radius:var(--r-panel);
    background:var(--console);
    color:var(--console-ink);
    box-shadow:var(--shadow-float);
}

.vps-console-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--s-3);
    padding-bottom:var(--s-3);
    border-bottom:1px solid var(--on-accent-tint);
}

.vps-console-brand{
    display:flex;
    align-items:center;
    gap:var(--s-3);
}

.vps-console-icon{
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    border-radius:var(--r-control);
    background:var(--accent);
    color:var(--ink-on-accent);
}

.vps-console-brand strong,
.vps-console-brand small{
    display:block;
    line-height:1.2;
}

.vps-console-brand small{
    color:var(--console-ink-2);
    letter-spacing:.08em;
}

.vps-console-connected{
    display:inline-flex;
    align-items:center;
    gap:var(--s-2);
    color:var(--up-fill);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
    letter-spacing:.08em;
}

.vps-console-connected span{
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--up-fill);
}

.vps-console-screen{
    display:grid;
    align-content:start;
    gap:var(--s-1);
    min-height:200px;
    max-height:280px;
    overflow-y:auto;
    font-family:ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size:var(--t-small);
    line-height:1.6;
    scrollbar-width:thin;
}

.vps-terminal-welcome{
    margin-bottom:var(--s-2);
}

.vps-terminal-welcome span,
.vps-terminal-welcome small{
    display:block;
}

.vps-terminal-welcome span{
    color:var(--console-ink);
    font-weight:var(--w-strong);
}

.vps-terminal-welcome small,
.vps-terminal-muted{
    color:var(--console-ink-2);
}

.vps-terminal-line{
    color:var(--console-ink);
    overflow-wrap:anywhere;
}

.vps-terminal-info,
.vps-terminal-highlight{
    color:var(--p-blue-100);
}

.vps-terminal-success{
    color:var(--up-fill);
}

.vps-terminal-warning{
    color:var(--p-amber-50);
}

.vps-terminal-error{
    color:var(--p-red-50);
}

.vps-terminal-output{
    display:grid;
    gap:var(--s-1);
}

.vps-command-form{
    display:flex;
    align-items:center;
    gap:var(--s-2);
    padding:var(--s-1) var(--s-1) var(--s-1) var(--s-3);
    border:1px solid var(--on-accent-tint);
    border-radius:var(--r-control);
    font-family:ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size:var(--t-small);
}

.vps-command-form:focus-within{
    border-color:var(--console-ink-2);
}

.vps-command-user{
    color:var(--up-fill);
}

.vps-command-path{
    color:var(--console-ink-2);
}

.vps-command-form input{
    flex:1;
    min-width:0;
    min-height:40px;
    border:0;
    background:transparent;
    color:var(--console-ink);
    font:inherit;
    outline:none;
}

.vps-command-form input::placeholder{
    color:var(--console-ink-2);
}

.vps-command-submit{
    display:grid;
    place-items:center;
    flex:none;
    width:40px;
    height:40px;
    border:0;
    border-radius:var(--r-control);
    background:var(--accent);
    color:var(--ink-on-accent);
    cursor:pointer;
}

.vps-quick-commands{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:var(--s-2);
    color:var(--console-ink-2);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
    letter-spacing:.08em;
}

.vps-quick-commands button{
    min-height:32px;
    padding:0 var(--s-3);
    border:1px solid var(--on-accent-tint);
    border-radius:var(--r-pill);
    background:transparent;
    color:var(--console-ink);
    font-family:ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size:var(--t-small);
    cursor:pointer;
}

.vps-quick-commands button:hover{
    border-color:var(--console-ink-2);
}

.vps-instance-empty{
    display:flex;
    align-items:center;
    gap:var(--s-3);
    padding:var(--s-4);
    border:1px dashed var(--line-strong);
    border-radius:var(--r-card);
    background:var(--surface);
}

.vps-instance-empty.is-hidden{
    display:none;
}

.vps-empty-icon{
    display:grid;
    place-items:center;
    flex:none;
    width:40px;
    height:40px;
    border-radius:var(--r-control);
    background:var(--surface-sunken);
    color:var(--ink-2);
}

.vps-instance-empty span{
    color:var(--ink-2);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
    letter-spacing:.08em;
}

.vps-instance-empty p{
    font-size:var(--t-small);
}

.vps-instance-card{
    display:none;
    gap:var(--s-4);
    padding:var(--s-5);
    border:1px solid var(--line);
    border-radius:var(--r-card);
    background:var(--surface);
    box-shadow:var(--shadow-card);
}

.vps-instance-card.is-visible{
    display:grid;
}

.vps-instance-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--s-3);
}

.vps-instance-label{
    color:var(--ink-2);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
    letter-spacing:.08em;
}

.vps-instance-header h3{
    font-size:var(--t-h3);
}

.vps-instance-status{
    display:inline-flex;
    align-items:center;
    gap:var(--s-2);
    min-height:28px;
    padding:0 var(--s-3);
    border-radius:var(--r-pill);
    background:var(--up-soft);
    color:var(--up);
    font-size:var(--t-micro);
}

.vps-instance-status span{
    width:8px;
    height:8px;
    border-radius:50%;
    background:currentColor;
}

.vps-instance-status.restarting{
    background:var(--warn-soft);
    color:var(--warn);
}

.vps-instance-status.stopped{
    background:var(--down-soft);
    color:var(--down);
}

.vps-instance-visual{
    display:none;
}

.vps-instance-specs{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:var(--s-2);
}

.vps-instance-spec{
    display:flex;
    align-items:center;
    gap:var(--s-2);
    padding:var(--s-3);
    border-radius:var(--r-control);
    background:var(--surface-sunken);
}

.vps-instance-spec > span{
    color:var(--accent);
}

.vps-instance-spec small,
.vps-instance-spec strong{
    display:block;
    line-height:1.3;
}

.vps-instance-spec small{
    color:var(--ink-2);
    font-size:var(--t-micro);
    letter-spacing:.04em;
}

.vps-instance-spec strong{
    font-size:var(--t-small);
}

.vps-instance-usage{
    display:grid;
    gap:var(--s-3);
}

.vps-usage-top{
    display:flex;
    justify-content:space-between;
    color:var(--ink-2);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
    letter-spacing:.06em;
}

.vps-usage-top strong{
    color:var(--ink);
    font-variant-numeric:tabular-nums;
}

.vps-usage-bar{
    height:8px;
    margin-top:var(--s-1);
    overflow:hidden;
    border-radius:var(--r-pill);
    background:var(--surface-sunken);
}

.vps-usage-bar span{
    display:block;
    height:100%;
    border-radius:inherit;
    background:var(--accent);
    transition:width var(--dur-base) var(--ease);
}

.vps-instance-footer{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:var(--s-2);
    padding-top:var(--s-3);
    border-top:1px solid var(--line);
}

.vps-instance-footer span,
.vps-instance-footer strong{
    display:block;
}

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

.vps-instance-footer strong{
    font-size:var(--t-small);
    font-variant-numeric:tabular-nums;
    overflow-wrap:anywhere;
}

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

/* strip under the hero */
.vps-hero-bottom{
    margin-top:var(--s-7);
}

.vps-hero-bottom-inner{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:var(--s-3);
    padding-top:var(--s-5);
    border-top:1px solid var(--line);
}

@media (min-width:768px){

    .vps-hero-bottom-inner{
        grid-template-columns:repeat(4, minmax(0, 1fr));
    }
}

.vps-bottom-item{
    display:flex;
    align-items:center;
    gap:var(--s-3);
}

.vps-bottom-item > .icon{
    flex:none;
    color:var(--accent);
}

.vps-bottom-item strong,
.vps-bottom-item span{
    display:block;
}

.vps-bottom-item strong{
    font-size:var(--t-small);
}

.vps-bottom-item span{
    color:var(--ink-2);
    font-size:var(--t-small);
}


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

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

@media (min-width:1024px){

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

.vps-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);
}

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

.series-number{
    position:absolute;
    top:var(--card-pad-lg);
    right:var(--card-pad-lg);
    color:var(--ink-3);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
    font-variant-numeric:tabular-nums;
}

.series-recommended,
.series-max-badge,
.comparison-recommended{
    --badge-icon:12px;
}

.series-recommended .icon,
.series-max-badge .icon,
.comparison-recommended .icon{
    width:var(--badge-icon);
    height:var(--badge-icon);
}

.series-recommended,
.series-max-badge{
    display:inline-flex;
    align-items:center;
    gap:var(--s-1);
    width:max-content;
    min-height:24px;
    padding:0 var(--s-3);
    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:.08em;
    line-height:24px;
}

.series-smx-label{
    color:var(--ink-2);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
    letter-spacing:.12em;
}

.series-card-header h3{
    font-size:var(--t-h1);
    line-height:1;
    font-weight:var(--w-h1);
}

.series-type{
    color:var(--accent-strong);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
    letter-spacing:.08em;
}

.series-chip-area{
    display:grid;
    place-items:center;
    height:160px;
    border-radius:var(--r-card);
    background:var(--surface-sunken);
}

.series-chip-image{
    width:auto;
    max-width:70%;
    height:130px;
    object-fit:contain;
}

.series-processor small,
.series-price-box > span{
    display:block;
    color:var(--ink-2);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
    letter-spacing:.08em;
}

.series-processor strong{
    display:block;
    font-size:var(--t-h3);
}

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

.series-price-box{
    padding:var(--s-3) var(--s-4);
    border-radius:var(--r-control);
    background:var(--accent-tint);
}

.series-price strong{
    font-size:var(--t-h2);
    line-height:1.1;
}

.series-price small{
    color:var(--ink-2);
}

.series-hardware{
    display:flex;
    flex-wrap:wrap;
    gap:var(--s-2);
}

.series-hardware > div{
    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);
    font-size:var(--t-small);
}

.series-hardware .icon{
    color:var(--accent);
}

.series-features{
    display:grid;
    gap:var(--s-2);
}

.series-features > div{
    display:flex;
    align-items:flex-start;
    gap:var(--s-2);
    color:var(--ink-2);
    font-size:var(--t-small);
}

.series-features .icon{
    flex:none;
    margin-top:2px;
    color:var(--up);
}

.series-explore-btn{
    width:100%;
    margin-top:auto;
}

.vps-series-bottom{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    gap:var(--s-3);
    margin-top:var(--s-5);
}

@media (min-width:640px){

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

@media (min-width:1024px){

    .vps-series-bottom{
        grid-template-columns:repeat(4, minmax(0, 1fr));
    }
}

.series-bottom-feature{
    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);
}

.series-bottom-feature > span{
    color:var(--accent);
}

.series-bottom-feature strong,
.series-bottom-feature small{
    display:block;
}

.series-bottom-feature small{
    color:var(--ink-2);
}


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

.comparison-header h2{
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    gap:0 var(--s-3);
}

.compare-vs{
    color:var(--ink-3);
    font-size:var(--t-h3);
}

.compare-vpro{
    color:var(--accent);
}

.comparison-table{
    display:grid;
    grid-template-columns:minmax(190px, .9fr) repeat(3, minmax(170px, 1fr));
    grid-template-rows:auto repeat(8, auto);
    overflow-x:auto;
    border:1px solid var(--line);
    border-radius:var(--r-card);
    background:var(--surface);
    scrollbar-width:thin;
}

.comparison-feature-column,
.comparison-series-column{
    display:grid;
    grid-row:1 / -1;
    grid-template-rows:subgrid;
    min-width:0;
}

.comparison-vpro{
    position:relative;
    background:var(--accent-tint);
}

.comparison-feature-head,
.comparison-series-head{
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    gap:var(--s-1);
    padding:var(--s-5) var(--s-4) var(--s-4);
    border-bottom:1px solid var(--line);
}

.comparison-feature-head{
    flex-direction:row;
    align-items:flex-end;
    justify-content:flex-start;
    gap:var(--s-2);
    color:var(--ink-2);
    font-size:var(--t-small);
}

.comparison-series-head{
    align-items:center;
    text-align:center;
}

.comparison-smx{
    color:var(--ink-2);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
    letter-spacing:.12em;
}

.comparison-series-title{
    font-size:var(--t-h2);
    line-height:1.1;
    font-weight:var(--w-h2);
}

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

.comparison-recommended{
    position:absolute;
    top:var(--s-2);
    left:50%;
    display:inline-flex;
    align-items:center;
    gap:var(--s-1);
    transform:translateX(-50%);
    white-space:nowrap;
    min-height:22px;
    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);
    line-height:22px;
}

.comparison-feature-row,
.comparison-value-row,
.comparison-price-row{
    display:flex;
    align-items:center;
    gap:var(--s-3);
    min-height:60px;
    padding:var(--s-3) var(--s-4);
    border-bottom:1px solid var(--line);
    font-size:var(--t-small);
}

.comparison-feature-column > :last-child,
.comparison-series-column > :last-child{
    border-bottom:0;
}

.comparison-feature-row{
    color:var(--ink);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
    letter-spacing:.06em;
}

.comparison-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);
}

.comparison-value-row,
.comparison-price-row{
    justify-content:center;
    color:var(--ink-2);
    text-align:center;
}

.comparison-value-row strong,
.comparison-price-row strong{
    color:var(--ink);
}

.comparison-price-row strong{
    font-size:var(--t-h3);
}

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

.comparison-stars .icon{
    width:16px;
    height:16px;
}

.comparison-included{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:var(--s-3);
    margin-top:var(--s-5);
}

@media (min-width:1024px){

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

.comparison-included-title,
.comparison-included-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);
}

.comparison-included-title{
    border-color:transparent;
    background:var(--console);
    color:var(--console-ink);
}

.comparison-included-icon,
.comparison-included-item > span{
    color:var(--accent);
}

.comparison-included-title .comparison-included-icon{
    color:var(--console-ink);
}

.comparison-included-title small,
.comparison-included-title strong,
.comparison-included-item strong,
.comparison-included-item small{
    display:block;
}

.comparison-included-title small{
    color:var(--console-ink-2);
    letter-spacing:.08em;
}

.comparison-included-title strong{
    color:var(--console-ink);
    letter-spacing:.06em;
}

.comparison-included-item small{
    color:var(--ink-2);
}


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

.vps-faq-layout{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    gap:var(--s-5);
    align-items:start;
}

@media (min-width:1024px){

    .vps-faq-layout{
        grid-template-columns:340px minmax(0, 1fr);
        gap:var(--s-7);
    }

    .vps-faq-side{
        position:sticky;
        top:calc(var(--nav-h) + var(--s-5));
    }
}

.vps-faq-side{
    display:grid;
    justify-items:start;
    gap:var(--s-3);
    padding:var(--card-pad-lg);
    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-card);
}

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

.faq-side-label{
    color:var(--ink-2);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
    letter-spacing:.08em;
}

.vps-faq-side h3{
    font-size:var(--t-h2);
    line-height:var(--lh-heading);
}

.vps-faq-side h3 span{
    color:var(--accent);
}

.vps-faq-side > p{
    color:var(--ink-2);
    font-size:var(--t-small);
}

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

.faq-status-dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--up-fill);
    box-shadow:0 0 0 4px var(--up-soft);
}

.faq-support-status strong,
.faq-support-status small{
    display:block;
}

.faq-support-status small{
    color:var(--ink-2);
}

.faq-mini-terminal{
    width:100%;
    overflow:hidden;
    border-radius:var(--r-control);
    background:var(--console);
    color:var(--console-ink);
    font-family:ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size:var(--t-small);
}

.faq-terminal-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:var(--s-2) var(--s-3);
    border-bottom:1px solid var(--on-accent-tint);
    color:var(--console-ink-2);
}

.terminal-dots{
    display:flex;
    gap:var(--s-1);
}

.terminal-dots span{
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--console-ink-2);
}

.faq-terminal-body{
    display:grid;
    gap:var(--s-1);
    padding:var(--s-3);
}

.faq-terminal-body span{
    color:var(--up-fill);
}

.terminal-response{
    color:var(--console-ink-2);
}

.vps-faq-list{
    display:grid;
    gap:var(--s-2);
}

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

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

.vps-faq-question{
    display:flex;
    align-items:center;
    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;
}

.faq-number{
    flex:none;
    color:var(--ink-3);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
    font-variant-numeric:tabular-nums;
}

.faq-question-text{
    flex:1;
    font-weight:var(--w-strong);
}

.faq-toggle{
    display:grid;
    place-items:center;
    flex:none;
    width:32px;
    height:32px;
    border-radius:50%;
    background:var(--surface-sunken);
    transition:transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

.vps-faq-item.active .faq-toggle{
    background:var(--accent);
    color:var(--ink-on-accent);
    transform:rotate(45deg);
}

/* height is driven by the page script (max-height) */
.vps-faq-answer{
    max-height:0;
    overflow:hidden;
    transition:max-height var(--dur-base) var(--ease);
}

.vps-faq-answer-inner{
    padding:0 var(--s-4) var(--s-4) calc(var(--s-4) + 2ch + var(--s-4));
    color:var(--ink-2);
}


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

.vps-cta-panel{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    gap:var(--s-6);
    align-items:center;
    padding:var(--card-pad-lg);
    border-radius:var(--r-panel);
    background:var(--console);
    color:var(--console-ink);
}

@media (min-width:1024px){

    .vps-cta-panel{
        grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr);
        gap:var(--s-8);
        padding:var(--s-8);
    }
}

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

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

.vps-cta-status{
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--up-fill);
}

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

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

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

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

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

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

.vps-cta-mini-features{
    display:flex;
    flex-wrap:wrap;
    gap:var(--s-2) var(--s-4);
    color:var(--console-ink-2);
    font-size:var(--t-small);
}

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

.vps-cta-mini-features .icon{
    color:var(--up-fill);
}

.vps-cta-visual{
    position:relative;
}

.cta-server{
    display:grid;
    gap:var(--s-2);
    padding:var(--s-4);
    border:1px solid var(--on-accent-tint);
    border-radius:var(--r-card);
}

.cta-server-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    color:var(--console-ink-2);
}

.cta-server-top > div{
    display:flex;
    align-items:center;
    gap:var(--s-2);
}

.server-live-dot,
.server-led{
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--up-fill);
}

.server-online{
    color:var(--up-fill);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
    letter-spacing:.08em;
}

.cta-server-unit{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--s-3);
    padding:var(--s-3);
    border-radius:var(--r-control);
    background:var(--on-accent-tint);
}

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

.server-unit-left strong,
.server-unit-left small{
    display:block;
}

.server-unit-left strong{
    color:var(--console-ink);
    font-size:var(--t-small);
}

.server-unit-left small{
    color:var(--console-ink-2);
}

.server-bars{
    display:flex;
    gap:3px;
}

.server-bars span{
    width:4px;
    height:16px;
    border-radius:2px;
    background:var(--accent);
}

.cta-server-terminal{
    display:flex;
    align-items:center;
    gap:var(--s-2);
    padding:var(--s-3);
    font-family:ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size:var(--t-small);
}

.cta-server-terminal span,
.cta-server-terminal strong{
    color:var(--up-fill);
}

.cta-server-terminal p{
    flex:1;
    color:var(--console-ink);
}

.cta-floating-status{
    display:flex;
    align-items:center;
    gap:var(--s-3);
    width:max-content;
    margin:calc(var(--s-4) * -1) var(--s-4) 0 auto;
    position:relative;
    padding:var(--s-3) var(--s-4);
    border-radius:var(--r-card);
    background:var(--surface);
    color:var(--ink);
    box-shadow:var(--shadow-float);
}

.cta-floating-status > span{
    display:grid;
    place-items:center;
    width:32px;
    height:32px;
    border-radius:var(--r-control);
    background:var(--accent);
    color:var(--ink-on-accent);
}

.cta-floating-status small,
.cta-floating-status strong{
    display:block;
}

.cta-floating-status small{
    color:var(--ink-2);
    font-size:var(--t-micro);
    letter-spacing:.08em;
}

.cta-floating-status strong{
    font-size:var(--t-small);
}

/* room for the recommended badge above the vPro heading */
.comparison-vpro .comparison-series-head{
    padding-top:calc(var(--s-5) + var(--s-5));
}