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

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

.services-hero-container,
.services-products-container,
.sm-infra-container,
.final-cta-container{
    width:min(var(--container), 100% - var(--gutter) * 2);
    margin-inline:auto;
}

.services-hero,
.services-products,
.sm-infrastructure,
.services-final-cta{
    position:relative;
    padding-block:var(--s-7);
    scroll-margin-top:var(--nav-h);
}

@media (min-width:1024px){

    .services-hero,
    .services-products,
    .sm-infrastructure,
    .services-final-cta{
        padding-block:var(--s-8);
    }
}

/* decorative layers from the old design are not used */
.services-hero-grid,
.services-hero-glow,
.services-orbit,
.services-server-glow,
.services-server-platform > span,
.services-particle,
.sm-infra-grid,
.sm-infra-glow,
.final-cta-grid,
.final-cta-glow,
.final-cta-corner,
.final-deploy-orbit{
    display:none;
}

.services-hero-badge,
.services-products-badge,
.sm-infra-badge,
.final-cta-status{
    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;
}

.services-products-header,
.sm-infra-header{
    display:grid;
    justify-items:start;
    gap:var(--s-3);
    max-width:760px;
    margin-bottom:var(--s-6);
}

.services-products-header h2,
.sm-infra-header h2,
.final-cta-content h2{
    font-size:var(--t-h1);
    line-height:var(--lh-heading);
    font-weight:var(--w-h1);
}

.services-products-header h2 span,
.sm-infra-header h2 span{
    display:block;
    color:var(--accent);
}

.services-products-header p,
.sm-infra-header p{
    max-width:62ch;
    color:var(--ink-2);
    font-size:var(--t-lead);
}

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

.services-primary-btn,
.services-secondary-btn,
.service-product-btn,
.service-small-btn,
.final-cta-primary,
.final-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);
}

.services-primary-btn,
.service-product-btn,
.final-cta-primary{
    border-color:transparent;
    background:var(--accent);
    color:var(--ink-on-accent);
}

.services-primary-btn:hover,
.service-product-btn:hover,
.final-cta-primary:hover{
    background:var(--accent-strong);
    color:var(--ink-on-accent);
}

.services-secondary-btn:hover,
.service-small-btn:hover{
    border-color:var(--accent);
    color:var(--accent-strong);
}

:where(.services-primary-btn, .services-secondary-btn, .service-product-btn, .service-small-btn, .final-cta-primary, .final-cta-secondary):focus-visible{
    outline:none;
    box-shadow:var(--focus-ring);
}

.mini-panel-dot,
.dedicated-online-dot,
.services-status-dot,
.sm-online-dot,
.sm-terminal-live-dot,
.sm-terminal-status-dot,
.final-ready-dot{
    display:inline-block;
    flex:none;
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--up-fill);
}


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

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

@media (min-width:1024px){

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

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

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

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

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

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

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

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

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

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

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

.services-feature-divider{
    width:1px;
    height:32px;
    background:var(--line);
}

/* visual: server image with OS cards around it */
.services-os-visual{
    position:relative;
    display:grid;
    gap:var(--s-3);
    min-width:0;
    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);
    grid-template-columns:repeat(2, minmax(0, 1fr));
}

@media (min-width:640px){

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

.services-server-wrap{
    position:relative;
    grid-column:1 / -1;
    display:grid;
    place-items:center;
}

.services-server-image{
    width:min(380px, 100%);
    height:auto;
}

.services-server-online{
    position:absolute;
    top:var(--s-2);
    right:var(--s-2);
    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);
    font-weight:var(--w-strong);
    letter-spacing:.08em;
}

.services-server-online span{
    width:8px;
    height:8px;
    border-radius:50%;
    background:currentColor;
}

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

.service-os-logo{
    display:grid;
    place-items:center;
    flex:none;
    width:32px;
    height:32px;
}

.service-os-logo img{
    width:28px;
    height:28px;
    object-fit:contain;
}

.service-os-card strong,
.service-os-card span{
    display:block;
    line-height:1.2;
}

.service-os-card strong{
    font-size:var(--t-small);
}

.service-os-card span{
    color:var(--ink-2);
    font-size:var(--t-micro);
}

.services-status-card,
.services-deploy-card{
    display:flex;
    align-items:center;
    gap:var(--s-3);
    padding:var(--s-2) var(--s-3);
    border-radius:var(--r-control);
    background:var(--surface-sunken);
}

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

.services-status-card small,
.services-deploy-card small,
.services-status-card strong,
.services-deploy-card strong{
    display:block;
    line-height:1.3;
}

.services-status-card small,
.services-deploy-card small{
    color:var(--ink-2);
    font-size:var(--t-micro);
    letter-spacing:.06em;
}

.services-status-card strong,
.services-deploy-card strong{
    font-size:var(--t-small);
}


/* ---------------------------------------------------------
   PRODUCTS
--------------------------------------------------------- */

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

.services-small-grid{
    margin-top:var(--s-4);
}

@media (min-width:1024px){

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

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

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

.service-product-top,
.service-small-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--s-3);
}

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

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

.service-product-icon .icon,
.service-small-icon .icon{
    width:var(--icon);
    height:var(--icon);
}

.service-product-large-body{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    gap:var(--s-5);
    align-items:start;
}

@media (min-width:640px){

    .service-product-large-body{
        grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr);
    }
}

.service-product-info{
    display:grid;
    justify-items:start;
    gap:var(--s-3);
}

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

.service-product-card h3{
    font-size:var(--t-h2);
    line-height:1.1;
    font-weight:var(--w-h2);
}

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

.service-product-tags,
.service-small-features{
    display:flex;
    flex-wrap:wrap;
    gap:var(--s-2);
}

.service-product-tags span,
.service-small-features span{
    display:inline-flex;
    align-items:center;
    gap:var(--s-1);
    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-small);
}

.service-product-tags .icon,
.service-small-features .icon{
    width:14px;
    height:14px;
    color:var(--up);
}

.service-small-btn{
    width:100%;
    margin-top:auto;
}

.service-small-status{
    display:inline-flex;
    align-items:center;
    gap:var(--s-2);
    min-height:24px;
    padding:0 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:.06em;
}

.service-small-status > span{
    width:7px;
    height:7px;
    border-radius:50%;
    background:currentColor;
}

.service-small-status .icon{
    width:14px;
    height:14px;
}

.service-small-status.web-status{
    background:var(--accent-soft);
    color:var(--accent-strong);
}

/* mini panels inside the product cards */
.service-mini-panel,
.discord-bot-panel,
.service-mail-preview,
.service-browser-preview{
    display:grid;
    gap:var(--s-3);
    padding:var(--s-4);
    border-radius:var(--r-card);
    background:var(--console);
    color:var(--console-ink);
}

.mini-panel-header,
.dedicated-node-header,
.discord-bot-panel-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--s-3);
    color:var(--console-ink-2);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
    letter-spacing:.08em;
}

.mini-panel-header > div,
.dedicated-node-header > div{
    display:flex;
    align-items:center;
    gap:var(--s-2);
}

.mini-panel-header strong,
.dedicated-node-header strong{
    color:var(--console-ink);
}

.vps-stat-top,
.dedicated-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--s-2);
    color:var(--console-ink-2);
    font-size:var(--t-small);
}

.vps-stat-top span,
.dedicated-row span{
    display:inline-flex;
    align-items:center;
    gap:var(--s-2);
}

.vps-stat-top strong,
.dedicated-row strong{
    color:var(--console-ink);
    font-variant-numeric:tabular-nums;
}

.vps-stat-bar,
.terminal-resource-bar,
.final-deploy-progress-bar{
    height:6px;
    margin-top:var(--s-1);
    overflow:hidden;
    border-radius:var(--r-pill);
    background:var(--on-accent-tint);
}

.vps-stat-bar span,
.terminal-resource-bar span,
.final-deploy-progress-bar span{
    display:block;
    height:100%;
    border-radius:inherit;
    background:var(--accent);
    transition:width var(--dur-base) var(--ease);
}

.final-deploy-progress-bar span{
    width:100%;
}

.mini-panel-bottom{
    display:flex;
    justify-content:space-between;
    padding-top:var(--s-2);
    border-top:1px solid var(--on-accent-tint);
    color:var(--console-ink-2);
    font-size:var(--t-small);
}

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

.dedicated-panel-status{
    display:flex;
    align-items:center;
    gap:var(--s-2);
    padding-top:var(--s-2);
    border-top:1px solid var(--on-accent-tint);
    color:var(--up-fill);
    font-size:var(--t-small);
}

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

.discord-bot-identity{
    display:flex;
    align-items:center;
    gap:var(--s-2);
}

.discord-bot-avatar{
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    border-radius:50%;
    background:var(--accent);
    color:var(--ink-on-accent);
}

.discord-bot-identity small,
.discord-bot-identity strong{
    display:block;
    line-height:1.3;
}

.discord-bot-identity strong{
    color:var(--console-ink);
    letter-spacing:0;
}

.discord-bot-online{
    display:inline-flex;
    align-items:center;
    gap:var(--s-1);
    color:var(--up-fill);
}

.discord-bot-online span{
    width:7px;
    height:7px;
    border-radius:50%;
    background:currentColor;
}

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

.discord-bot-stats > div{
    padding:var(--s-2);
    border-radius:var(--r-control);
    background:var(--on-accent-tint);
}

.discord-bot-stats small,
.discord-bot-stats strong{
    display:block;
}

.discord-bot-stats small{
    color:var(--console-ink-2);
    font-size:var(--t-micro);
}

.discord-bot-stats strong{
    color:var(--console-ink);
}

.service-mail-preview{
    grid-template-columns:auto minmax(0, 1fr);
    align-items:center;
}

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

.service-mail-preview small,
.service-mail-preview strong{
    display:block;
}

.service-mail-preview small{
    color:var(--console-ink-2);
    font-size:var(--t-micro);
    letter-spacing:.06em;
}

.service-mail-preview strong{
    color:var(--console-ink);
    overflow-wrap:anywhere;
}

.service-browser-preview{
    gap:0;
    padding:0;
    overflow:hidden;
}

.browser-preview-top{
    display:flex;
    align-items:center;
    gap:var(--s-1);
    padding:var(--s-2) var(--s-3);
    border-bottom:1px solid var(--on-accent-tint);
}

.browser-preview-top > span{
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--console-ink-2);
}

.browser-preview-top div{
    margin-left:var(--s-2);
    color:var(--console-ink-2);
    font-size:var(--t-micro);
}

.browser-preview-body{
    display:grid;
    grid-template-columns:48px minmax(0, 1fr);
    gap:var(--s-2);
    height:88px;
    padding:var(--s-3);
}

.browser-preview-sidebar{
    border-radius:var(--r-control);
    background:var(--on-accent-tint);
}

.browser-preview-content{
    display:grid;
    gap:var(--s-2);
    align-content:start;
}

.browser-preview-content span{
    height:10px;
    border-radius:var(--r-pill);
    background:var(--on-accent-tint);
}

.browser-preview-content span:first-child{
    width:60%;
    background:var(--accent);
}

.browser-preview-content span:last-child{
    width:80%;
}


/* ---------------------------------------------------------
   INFRASTRUCTURE
--------------------------------------------------------- */

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

@media (min-width:1024px){

    .sm-infra-layout{
        grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);
    }
}

.sm-terminal-card{
    display:grid;
    align-content:start;
    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);
}

.sm-terminal-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--s-3);
    color:var(--console-ink-2);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
    letter-spacing:.08em;
}

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

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

.terminal-dot.red{
    background:var(--p-red-50);
}

.terminal-dot.yellow{
    background:var(--p-amber-50);
}

.terminal-dot.green{
    background:var(--up-fill);
}

.sm-terminal-title{
    display:flex;
    align-items:center;
    gap:var(--s-2);
}

.sm-terminal-address{
    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);
}

.sm-terminal-address-left{
    display:flex;
    align-items:center;
    gap:var(--s-3);
}

.sm-terminal-address small,
.sm-terminal-address strong{
    display:block;
    line-height:1.3;
}

.sm-terminal-address small{
    color:var(--console-ink-2);
    font-size:var(--t-micro);
    letter-spacing:.06em;
}

.sm-terminal-address strong{
    color:var(--console-ink);
    font-size:var(--t-small);
    overflow-wrap:anywhere;
}

.sm-terminal-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;
}

.sm-terminal-connected span{
    width:7px;
    height:7px;
    border-radius:50%;
    background:currentColor;
}

.sm-terminal-output,
.sm-terminal-current{
    font-family:ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size:var(--t-small);
    line-height:1.6;
}

.sm-terminal-output{
    display:grid;
    align-content:start;
    gap:var(--s-1);
    min-height:180px;
    max-height:240px;
    overflow-y:auto;
    scrollbar-width:thin;
}

.terminal-line{
    display:flex;
    gap:var(--s-2);
    color:var(--console-ink);
}

.terminal-prompt,
.terminal-user,
.terminal-success{
    color:var(--up-fill);
}

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

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

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

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

.sm-terminal-current{
    display:flex;
    align-items:center;
    gap:var(--s-1);
}

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

.terminal-cursor{
    width:8px;
    height:1.1em;
    background:var(--console-ink);
    animation:sm-blink 1s steps(1) infinite;
}

@keyframes sm-blink{

    50%{
        opacity:0;
    }
}

@media (prefers-reduced-motion:reduce){

    .terminal-cursor{
        animation:none;
    }
}

.sm-terminal-resources{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:var(--s-3);
}

.terminal-resource-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--s-1);
    color:var(--console-ink-2);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
}

.terminal-resource-top span{
    display:inline-flex;
    align-items:center;
    gap:var(--s-1);
}

.terminal-resource-top .icon{
    width:14px;
    height:14px;
}

.terminal-resource-top strong{
    color:var(--console-ink);
    font-variant-numeric:tabular-nums;
}

.sm-terminal-footer{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:var(--s-2);
    padding-top:var(--s-3);
    border-top:1px solid var(--on-accent-tint);
    color:var(--console-ink-2);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
    letter-spacing:.06em;
}

.sm-terminal-footer > div{
    display:flex;
    align-items:center;
    gap:var(--s-2);
}

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

@media (min-width:640px){

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

.sm-infra-stat-card{
    display:flex;
    flex-direction:column;
    gap:var(--s-3);
    padding:var(--card-pad);
    border:1px solid var(--line);
    border-radius:var(--r-card);
    background:var(--surface);
}

.sm-stat-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

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

.sm-stat-number{
    color:var(--ink-3);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
}

.sm-stat-value{
    font-size:var(--t-h2);
    line-height:1;
    font-weight:var(--w-h2);
}

.sm-stat-value span{
    color:var(--accent);
    font-size:var(--t-h3);
}

.sm-infra-stat-card h3{
    font-size:var(--t-body);
    font-weight:var(--w-strong);
}

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

.sm-uptime-graph{
    display:flex;
    align-items:flex-end;
    gap:3px;
    height:48px;
    margin-top:auto;
}

.sm-uptime-graph span{
    flex:1;
    border-radius:2px 2px 0 0;
    background:var(--accent-soft);
}

.sm-uptime-graph span:last-child{
    background:var(--accent);
}

.sm-health-panel,
.sm-network-panel{
    display:grid;
    gap:var(--s-2);
    margin-top:auto;
    padding:var(--s-3);
    border-radius:var(--r-control);
    background:var(--surface-sunken);
    font-size:var(--t-small);
}

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

.sm-health-head strong{
    color:var(--up);
}

.sm-health-row{
    display:grid;
    grid-template-columns:64px minmax(0, 1fr);
    align-items:center;
    gap:var(--s-2);
    color:var(--ink-2);
}

.sm-health-row > div{
    height:6px;
    overflow:hidden;
    border-radius:var(--r-pill);
    background:var(--line);
}

.sm-health-row > div span{
    display:block;
    height:100%;
    background:var(--up);
}

.sm-network-panel > div{
    display:flex;
    align-items:center;
    gap:var(--s-2);
}

.sm-network-panel > div > span{
    color:var(--accent);
}

.sm-network-panel small,
.sm-network-panel strong{
    display:block;
    line-height:1.3;
}

.sm-network-panel small{
    color:var(--ink-2);
    font-size:var(--t-micro);
    letter-spacing:.06em;
}

.sm-stat-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--s-2);
    padding-top:var(--s-3);
    border-top:1px solid var(--line);
    color:var(--ink-2);
    font-size:var(--t-small);
}

.sm-stat-bottom > span{
    display:inline-flex;
    align-items:center;
    gap:var(--s-2);
}

.sm-stat-bottom strong{
    color:var(--up);
    font-size:var(--t-small);
}

.sm-infra-features{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    gap:var(--s-3);
    margin-top:var(--s-4);
}

@media (min-width:640px){

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

@media (min-width:1024px){

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

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

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

.sm-infra-feature strong,
.sm-infra-feature span:not([class]){
    display:block;
}

.sm-infra-feature div span{
    color:var(--ink-2);
    font-size:var(--t-small);
}


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

.final-cta-card{
    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){

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

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

.final-cta-top{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:var(--s-3);
}

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

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

.final-cta-index{
    color:var(--console-ink-2);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
    letter-spacing:.12em;
}

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

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

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

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

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

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

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

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

.final-cta-trust .icon{
    color:var(--up-fill);
}

.final-deploy-wrap{
    position:relative;
    display:grid;
    gap:var(--s-3);
}

.final-deploy-terminal{
    overflow:hidden;
    border:1px solid var(--on-accent-tint);
    border-radius:var(--r-card);
}

.final-deploy-terminal-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--s-3);
    padding:var(--s-2) var(--s-3);
    border-bottom:1px solid var(--on-accent-tint);
    color:var(--console-ink-2);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
    letter-spacing:.08em;
}

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

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

.final-terminal-body{
    display:grid;
    gap:var(--s-2);
    padding:var(--s-4);
    font-family:ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size:var(--t-small);
}

.final-terminal-command{
    color:var(--console-ink);
}

.final-terminal-user,
.final-terminal-check{
    color:var(--up-fill);
}

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

.final-terminal-line{
    display:grid;
    grid-template-columns:auto minmax(0, 1fr) auto;
    gap:var(--s-2);
    color:var(--console-ink-2);
}

.final-terminal-line strong{
    color:var(--console-ink);
}

.final-deploy-progress{
    padding-top:var(--s-2);
}

.final-deploy-progress-top{
    display:flex;
    justify-content:space-between;
    color:var(--console-ink-2);
    font-size:var(--t-micro);
}

.final-deploy-progress-top strong{
    color:var(--console-ink);
}

.final-deploy-ready{
    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);
    font-family:var(--font-sans);
}

.final-deploy-ready-left{
    display:flex;
    align-items:center;
    gap:var(--s-2);
}

.final-deploy-ready small,
.final-deploy-ready strong{
    display:block;
    line-height:1.3;
}

.final-deploy-ready small{
    color:var(--console-ink-2);
    font-size:var(--t-micro);
}

.final-deploy-ready strong{
    color:var(--console-ink);
}

.final-floating-status{
    display:flex;
    align-items:center;
    gap:var(--s-3);
    width:max-content;
    max-width:100%;
    margin-left:auto;
    padding:var(--s-3) var(--s-4);
    border-radius:var(--r-card);
    background:var(--surface);
    color:var(--ink);
    box-shadow:var(--shadow-float);
}

.final-floating-status > span{
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--up-fill);
}

.final-floating-status small,
.final-floating-status strong{
    display:block;
    line-height:1.3;
}

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