/* ===========================================================
   MSPanel — Frontend system v6 "Italian Technical Editorial"
   --------------------------------------------------------------
   Direction:
   - Tipografia editorial: Roboto Slab (display) + Montserrat (body)
                          + JetBrains Mono (technical data)
   - Palette: verde brand managedserver.it (#009639) come accento,
              surface su warm off-white (#fafaf7) per togliere
              il "tech bianco freddo" SaaS
   - Hosting-grade patterns: status dot pulse, monospace cell pill,
              KPI tile con trend chip, hero gradient mesh
   - Microinteractions: button lift+glow rim, card branded hover
              shadow, doppio focus ring
   =========================================================== */

:root {

    /* ---- Brand: managedserver.it ---- */
    --ms-primary-950: #001a08;       /* per overlay dark estremi */
    --ms-primary-900: #003012;       /* fine gradient header */
    --ms-primary-800: #00491b;       /* CTA dark scuri */
    --ms-primary-700: #006d0d;       /* dark accent */
    --ms-primary-600: #008710;       /* brand strong */
    --ms-primary-500: #009639;       /* brand main (gradient start) */
    --ms-primary-400: #36ad00;       /* bright accent */
    --ms-primary-300: #8fd07a;
    --ms-primary-200: #b9e2a6;
    --ms-primary-100: #d9efce;
    --ms-primary-50:  #ecf7e4;
    --ms-primary-25:  #f5fbef;

    --ms-gradient-header: linear-gradient(-45deg, #009639 0%, #003012 100%);
    --ms-gradient-brand: linear-gradient(135deg, #009639 0%, #006d0d 100%);
    --ms-gradient-deep: linear-gradient(135deg, #003012 0%, #00491b 50%, #006d0d 100%);

    /* ---- Accent secondario (link informativi, info chip) ---- */
    --ms-accent-blue: #0274be;
    --ms-accent-blue-dark: #015a92;

    /* ---- Neutrali WARM (parchment, non clinical white) ---- */
    --ms-bg:          #fafaf7;        /* page background (warm off-white) */
    --ms-bg-soft:     #f5f4ee;        /* card-soft / hover row */
    --ms-bg-muted:    #ecebe3;        /* divider area, code chip */
    --ms-surface:     #ffffff;        /* elevated card */
    --ms-surface-2:   #fefefb;        /* sticky panel */
    --ms-border:      #e6e4d8;        /* warm border */
    --ms-border-strong: #cbc9bd;
    --ms-text:        #1e2a23;        /* deep ink */
    --ms-text-muted:  #4e5b54;        /* secondary */
    --ms-text-subtle: #7a8580;        /* tertiary, captions */

    /* ---- Stati semantici ---- */
    --ms-success-50:  #ecf7e4;
    --ms-success-500: #008710;
    --ms-success-700: #006d0d;
    --ms-warn-50:     #fff6dd;
    --ms-warn-500:    #d97706;
    --ms-warn-700:    #92590b;
    --ms-danger-50:   #fdecec;
    --ms-danger-500:  #d62828;
    --ms-danger-700:  #991b1b;
    --ms-info-50:     #e6f1fa;
    --ms-info-500:    #0274be;
    --ms-info-700:    #015a92;

    /* ---- Dark surfaces (footer) ---- */
    --ms-dark-900: #161614;
    --ms-dark-800: #1f1e1b;
    --ms-dark-700: #2a2925;
    --ms-dark-border: #34332e;
    --ms-dark-text: #b6b4ad;
    --ms-dark-text-muted: #898680;
    --ms-dark-heading: #fff;

    /* ---- Shadows (layered, warm-tinted) ---- */
    --ms-shadow-xs: 0 1px 1px rgba(20, 30, 25, 0.04);
    --ms-shadow-sm: 0 1px 2px rgba(20, 30, 25, 0.05), 0 1px 3px rgba(20, 30, 25, 0.05);
    --ms-shadow-md: 0 4px 8px -2px rgba(20, 30, 25, 0.06), 0 2px 4px -2px rgba(20, 30, 25, 0.04);
    --ms-shadow-lg: 0 14px 30px -10px rgba(20, 30, 25, 0.12), 0 4px 10px -4px rgba(20, 30, 25, 0.05);
    --ms-shadow-xl: 0 24px 50px -14px rgba(20, 30, 25, 0.18), 0 10px 22px -10px rgba(20, 30, 25, 0.10);
    --ms-shadow-brand-sm: 0 4px 14px -6px rgba(0, 135, 16, 0.45);
    --ms-shadow-brand-lg: 0 16px 40px -12px rgba(0, 135, 16, 0.40);
    --ms-shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.85);

    /* ---- Radius scale ---- */
    --ms-r-xs: 4px;
    --ms-r-sm: 6px;
    --ms-r:    10px;
    --ms-r-lg: 14px;
    --ms-r-xl: 20px;
    --ms-r-2xl: 28px;
    --ms-r-pill: 999px;

    /* ---- Spacing scale (4-based) ---- */
    --ms-s-1:  4px;
    --ms-s-2:  8px;
    --ms-s-3: 12px;
    --ms-s-4: 16px;
    --ms-s-5: 20px;
    --ms-s-6: 24px;
    --ms-s-8: 32px;
    --ms-s-10: 40px;
    --ms-s-12: 48px;
    --ms-s-16: 64px;
    --ms-s-20: 80px;

    /* ---- Container ---- */
    --ms-container: 1400px;
    --ms-container-narrow: 880px;
    --ms-container-wide: 1600px;

    /* ---- Typography ---- */
    --ms-font-body:    'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --ms-font-display: 'Roboto Slab', 'Source Serif Pro', Georgia, serif;
    --ms-font-mono:    'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;

    /* ---- Effects ---- */
    --ms-focus-ring: 0 0 0 4px rgba(0, 150, 57, 0.18), 0 0 0 1px var(--ms-primary-500);
    --ms-focus-ring-dark: 0 0 0 3px rgba(255, 255, 255, 0.5);
    --ms-transition: 180ms cubic-bezier(0.16, 1, 0.3, 1);
    --ms-transition-snap: 120ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ---- Noise / texture (riusabile come background-image) ---- */
    --ms-noise: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.045 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    --ms-grid-dots: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='g' width='40' height='40' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='20' cy='20' r='1.2' fill='%23fff' opacity='0.12'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='200' height='200' fill='url(%23g)'/%3E%3C/svg%3E");
}

/* ===========================================================
   1.  Reset & base
   =========================================================== */

html { -webkit-text-size-adjust: 100%; }

body.ms-site {
    font-family: var(--ms-font-body) !important;
    color: var(--ms-text);
    background: var(--ms-bg);
    font-size: 16px;
    line-height: 1.6;
    font-feature-settings: 'kern', 'liga', 'calt';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* Sticky footer: body è un column flex container, <main> si espande,
       <footer> rimane in basso anche su pagine corte. */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
body.ms-site > main { flex: 1 0 auto; }
body.ms-site > footer { flex-shrink: 0; }

/* :where() azzera la specificità della regola globale headings: così
   ogni override locale (.ms-hero h1 → #fff, .ms-auth-visual h2 → #fff,
   .ms-section-dark h2/h3 → #fff) vince naturalmente */
:where(body.ms-site) :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--ms-font-display);
    color: var(--ms-text);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.2;
    margin-top: 0;
}

body.ms-site .text-muted, body.ms-site .text-secondary {
    color: var(--ms-text-muted) !important;
}

/* Link globale per body inline text — uso :where() per azzerare specificità
   così che ogni override locale (.ms-nav-link, .ms-footer a, .ms-btn, ecc.)
   vinca senza dover usare !important */
:where(body.ms-site) a { color: var(--ms-primary-700); text-decoration: none; }
:where(body.ms-site) a:hover { color: var(--ms-primary-800); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }

::selection { background: var(--ms-primary-100); color: var(--ms-primary-900); }

.ms-container { max-width: var(--ms-container); margin: 0 auto; padding: 0 2rem; }
.ms-container-narrow { max-width: var(--ms-container-narrow); margin: 0 auto; padding: 0 2rem; }
.ms-container-wide { max-width: var(--ms-container-wide); margin: 0 auto; padding: 0 2rem; }

/* Global focus visible */
body.ms-site :focus-visible {
    outline: none;
    box-shadow: var(--ms-focus-ring);
    border-radius: var(--ms-r-xs);
}

/* ===========================================================
   2.  Header: top bar verde gradient + main bar (mschanged)
   =========================================================== */

.ms-header {
    background: var(--ms-gradient-header);
    color: #fff;
    position: relative;
    z-index: 100;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.ms-header::after {
    /* sottilissima linea decorativa di chiusura */
    content: '';
    position: absolute; left: 0; right: 0; bottom: -3px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--ms-primary-400) 30%, var(--ms-primary-400) 70%, transparent);
    opacity: 0.55;
}

.ms-topbar {
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    font-size: 0.86rem;
    background: rgba(0, 0, 0, 0.08);
}
.ms-topbar-inner {
    max-width: var(--ms-container);
    margin: 0 auto;
    padding: 0 2rem;
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem;
    height: 42px;
}
.ms-topbar-left, .ms-topbar-center, .ms-topbar-right { display: flex; align-items: center; }
.ms-topbar-center { gap: 0.2rem; }
.ms-topbar-right { gap: 0.5rem; }

.ms-topbar-phone {
    display: inline-flex; align-items: center; gap: 0.45rem;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0.01em;
}
.ms-topbar-phone:hover { color: #fff; text-decoration: none; }
.ms-topbar-phone i { font-size: 0.95rem; opacity: 0.85; }

.ms-topbar-info {
    display: inline-flex; align-items: center; gap: 0.45rem;
    color: #ffffff;
    text-decoration: none;
    font-weight: 500;
    transition: opacity var(--ms-transition-snap);
    opacity: 0.92;
}
.ms-topbar-info:hover { color: #fff; opacity: 1; text-decoration: none; }
.ms-topbar-info i { font-size: 0.95rem; }

.ms-topbar-button {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.38rem 0.85rem;
    background: var(--ms-primary-800);
    color: #fff;
    border-radius: var(--ms-r-xs);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: background var(--ms-transition-snap), transform var(--ms-transition-snap);
}
.ms-topbar-button:hover { background: var(--ms-primary-900); color: #fff; text-decoration: none; transform: translateY(-1px); }
.ms-topbar-button i { font-size: 0.95rem; }

/* Main bar — più alto per accogliere logo grande (come managedserver.it) */
.ms-mainbar { padding: 0; }
.ms-mainbar-inner {
    max-width: var(--ms-container);
    margin: 0 auto;
    padding: 0 2rem;
    display: flex; align-items: center; justify-content: space-between;
    gap: 2rem;
    height: 92px;
}
.ms-brand { display: inline-flex; align-items: center; line-height: 0; text-decoration: none; flex-shrink: 0; }
.ms-brand:hover { text-decoration: none; }
.ms-brand img { height: 56px; width: auto; display: block; }

.ms-nav {
    display: flex; gap: 0.1rem; align-items: center;
    flex: 1; justify-content: flex-end;
    position: relative;
}

/* Separatore verticale tra blocchi nav */
.ms-nav-sep {
    width: 1px;
    height: 22px;
    background: rgba(255, 255, 255, 0.18);
    margin: 0 0.6rem;
}

/* Nav item con megamenu (dropdown hover) */
.ms-nav-item {
    position: relative;
}
.ms-caret {
    font-size: 0.7rem;
    margin-left: 4px;
    transition: transform var(--ms-transition-snap);
    opacity: 0.85;
}
.ms-nav-item:hover .ms-caret,
.ms-nav-item:focus-within .ms-caret { transform: rotate(180deg); }

/* MEGAMENU stile managedserver.it: bianco, shadow, border-top verde */
.ms-megamenu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 720px;
    background: #ffffff;
    border-radius: var(--ms-r-lg);
    box-shadow: var(--ms-shadow-xl);
    border-top: 3px solid var(--ms-primary-500);
    padding: 1.4rem 1.5rem 1rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--ms-transition), transform var(--ms-transition), visibility 0s linear var(--ms-transition);
    z-index: 200;
    color: var(--ms-text);
}
.ms-megamenu::before {
    /* freccia ornamentale */
    content: '';
    position: absolute; top: -9px; left: 28px;
    width: 14px; height: 14px;
    background: var(--ms-primary-500);
    transform: rotate(45deg);
    border-radius: 2px;
}
.ms-nav-item:hover .ms-megamenu,
.ms-nav-item:focus-within .ms-megamenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity var(--ms-transition), transform var(--ms-transition), visibility 0s;
}

.ms-megamenu-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem 1.5rem;
}

.ms-megamenu-item {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.7rem 0.8rem;
    border-radius: var(--ms-r-sm);
    color: var(--ms-text);
    text-decoration: none;
    transition: background var(--ms-transition-snap), transform var(--ms-transition-snap);
}
.ms-megamenu-item:hover {
    background: var(--ms-primary-50);
    color: var(--ms-text);
    text-decoration: none;
    transform: translateX(2px);
}
.ms-megamenu-icon {
    flex-shrink: 0;
    width: 36px; height: 36px;
    background: var(--ms-bg-soft);
    border-radius: var(--ms-r-sm);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    transition: background var(--ms-transition-snap);
}
.ms-megamenu-item:hover .ms-megamenu-icon {
    background: #ffffff;
    box-shadow: var(--ms-shadow-sm);
}
.ms-megamenu-item > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ms-megamenu-item strong {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--ms-text);
    line-height: 1.3;
}
.ms-megamenu-item em {
    font-size: 0.8rem;
    color: var(--ms-text-muted);
    font-style: normal;
    line-height: 1.4;
}

.ms-megamenu-foot {
    margin-top: 0.8rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--ms-border);
    display: flex;
    justify-content: flex-end;
}
.ms-megamenu-all {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--ms-primary-700);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.5rem 0.8rem;
    border-radius: var(--ms-r-sm);
    transition: background var(--ms-transition-snap), gap var(--ms-transition-snap);
}
.ms-megamenu-all:hover {
    background: var(--ms-primary-50);
    color: var(--ms-primary-800);
    text-decoration: none;
    gap: 0.6rem;
}
/* Main nav links: contrasto bianco PIENO su gradient verde + pill hover */
.ms-nav-link {
    display: inline-flex; align-items: center;
    padding: 0.55rem 0.95rem;
    color: #ffffff;
    font-weight: 500;
    font-size: 0.94rem;
    letter-spacing: 0.005em;
    transition: background var(--ms-transition-snap), color var(--ms-transition-snap);
    text-decoration: none;
    position: relative;
    border-radius: var(--ms-r-xs);
}
.ms-nav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.10);
    text-decoration: none;
}
.ms-nav-link.active {
    color: #fff;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.10);
}
.ms-nav-link.active::after {
    content: '';
    position: absolute;
    bottom: calc(-1 * ((92px - 36px) / 2));
    left: 50%;
    transform: translateX(-50%);
    width: 32px; height: 3px;
    background: var(--ms-primary-400);
    border-radius: 2px 2px 0 0;
    box-shadow: 0 0 12px rgba(54, 173, 0, 0.6);
}
.ms-nav-actions { display: flex; gap: 0.5rem; align-items: center; margin-left: 1rem; }
.ms-nav-actions .ms-btn-ghost { color: #fff; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.18); }
.ms-nav-actions .ms-btn-ghost:hover { background: rgba(255, 255, 255, 0.18); color: #fff; }

/* ===========================================================
   3.  Buttons — lift + glow rim sull'hover
   =========================================================== */

.ms-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 0.45rem;
    padding: 0.62rem 1.15rem;
    border-radius: var(--ms-r-sm);
    font-weight: 600;
    font-size: 0.94rem;
    letter-spacing: 0.005em;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background var(--ms-transition), color var(--ms-transition),
                box-shadow var(--ms-transition), transform var(--ms-transition),
                border-color var(--ms-transition);
    text-decoration: none;
    line-height: 1.2;
    white-space: nowrap;
    font-family: inherit;
}
.ms-btn-lg { padding: 0.85rem 1.55rem; font-size: 1rem; }
.ms-btn-sm { padding: 0.42rem 0.8rem; font-size: 0.875rem; }
.ms-btn-xs { padding: 0.28rem 0.6rem; font-size: 0.78rem; gap: 0.3rem; }

.ms-btn:disabled,
.ms-btn[disabled] {
    cursor: not-allowed;
    opacity: 0.55;
    filter: grayscale(0.2);
    box-shadow: none !important;
    transform: none !important;
}
.ms-btn:disabled:hover,
.ms-btn[disabled]:hover {
    transform: none !important;
    box-shadow: none !important;
}

.ms-btn-primary {
    background: var(--ms-primary-500);
    color: #fff;
    box-shadow: var(--ms-shadow-brand-sm), var(--ms-shadow-inset-top);
}
.ms-btn-primary:hover {
    background: var(--ms-primary-600);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: var(--ms-shadow-brand-lg), var(--ms-shadow-inset-top);
}
.ms-btn-primary:active { transform: translateY(0); box-shadow: var(--ms-shadow-brand-sm); }

.ms-btn-secondary {
    background: var(--ms-surface);
    color: var(--ms-text);
    border-color: var(--ms-border-strong);
}
.ms-btn-secondary:hover {
    background: var(--ms-bg-soft);
    color: var(--ms-text);
    border-color: var(--ms-primary-500);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: var(--ms-shadow-sm);
}

.ms-btn-ghost {
    background: transparent;
    color: var(--ms-text-muted);
}
.ms-btn-ghost:hover { background: var(--ms-bg-soft); color: var(--ms-text); text-decoration: none; }

.ms-btn-dark {
    background: var(--ms-primary-800);
    color: #fff;
}
.ms-btn-dark:hover { background: var(--ms-primary-900); color: #fff; text-decoration: none; }

.ms-btn-danger {
    background: var(--ms-danger-500);
    color: #fff;
    box-shadow: 0 4px 14px -6px rgba(214, 40, 40, 0.5);
}
.ms-btn-danger:hover { background: var(--ms-danger-700); color: #fff; text-decoration: none; transform: translateY(-1px); }

/* Icon-only square */
.ms-btn-icon { padding: 0.5rem; width: 2.4rem; height: 2.4rem; }

/* ===========================================================
   4.  Forms — doppio focus ring + label uppercase opzionale
   =========================================================== */

.ms-input, .ms-select, .ms-textarea {
    width: 100%;
    padding: 0.7rem 0.95rem;
    border: 1px solid var(--ms-border-strong);
    border-radius: var(--ms-r-sm);
    background: var(--ms-surface);
    color: var(--ms-text);
    font-size: 0.95rem;
    font-family: inherit;
    transition: border-color var(--ms-transition-snap), box-shadow var(--ms-transition-snap), background var(--ms-transition-snap);
}
.ms-input:hover, .ms-select:hover, .ms-textarea:hover { border-color: var(--ms-primary-300); }
.ms-input:focus, .ms-select:focus, .ms-textarea:focus {
    outline: none;
    border-color: var(--ms-primary-500);
    box-shadow: var(--ms-focus-ring);
    background: #fff;
}
.ms-input::placeholder, .ms-textarea::placeholder { color: var(--ms-text-subtle); opacity: 1; }

.ms-textarea { resize: vertical; min-height: 100px; font-family: inherit; }
.ms-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%234e5b54' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9rem center; background-size: 12px 8px; padding-right: 2.5rem; }

.ms-label {
    display: block; font-weight: 600;
    font-size: 0.82rem; color: var(--ms-text);
    margin-bottom: 0.4rem;
    letter-spacing: 0.02em;
}
.ms-hint { color: var(--ms-text-subtle); font-size: 0.82rem; margin-top: 0.35rem; }
.ms-field-error { color: var(--ms-danger-700); font-size: 0.82rem; margin-top: 0.35rem; display: flex; gap: 0.3rem; align-items: center; }

.ms-input.is-invalid, .ms-select.is-invalid, .ms-textarea.is-invalid {
    border-color: var(--ms-danger-500);
    box-shadow: 0 0 0 4px rgba(214, 40, 40, 0.12);
}

.ms-field { margin-bottom: 1.1rem; }
.ms-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 600px) { .ms-field-row { grid-template-columns: 1fr; } }

/* Checkbox / radio refinement */
.ms-checkbox, .ms-radio {
    display: inline-flex; align-items: center; gap: 0.6rem;
    cursor: pointer;
    font-size: 0.95rem;
}
.ms-checkbox input, .ms-radio input { width: 18px; height: 18px; accent-color: var(--ms-primary-500); cursor: pointer; }

/* ===========================================================
   5.  Sections + editorial heading
   =========================================================== */

.ms-section { padding: 4.5rem 0; }
.ms-section-sm { padding: 2.5rem 0; }
.ms-section-soft { background: var(--ms-bg-soft); }
.ms-section-dark { background: var(--ms-primary-900); color: #fff; }
.ms-section-dark h2, .ms-section-dark h3 { color: #fff; }

.ms-section-head {
    text-align: center;
    margin-bottom: 3rem;
    max-width: 720px;
    margin-left: auto; margin-right: auto;
}
.ms-section-head .eyebrow {
    display: inline-flex; align-items: center; gap: 0.6rem;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ms-primary-700);
    margin-bottom: 0.9rem;
}
.ms-section-head .eyebrow::before,
.ms-section-head .eyebrow::after {
    content: '';
    width: 22px; height: 1px;
    background: var(--ms-primary-500);
    opacity: 0.6;
}
.ms-section-head h2 {
    font-size: clamp(1.75rem, 3vw, 2.4rem);
    margin: 0 0 0.7rem;
    letter-spacing: -0.025em;
    text-align: center;
}
.ms-section-head p { color: var(--ms-text-muted); font-size: 1.05rem; margin: 0; line-height: 1.65; }

/* Section head allineato a sinistra */
.ms-section-head.start { text-align: left; margin-left: 0; margin-right: 0; }
.ms-section-head.start .eyebrow::after { display: none; }

/* Editorial divider (─── · ───) */
.ms-divider-editorial {
    display: flex; align-items: center; gap: 0.8rem;
    margin: 2.5rem auto;
    color: var(--ms-primary-500);
    max-width: 280px;
    opacity: 0.65;
}
.ms-divider-editorial::before, .ms-divider-editorial::after {
    content: ''; flex: 1; height: 1px;
    background: currentColor;
}
.ms-divider-editorial::after { content: ''; }
.ms-divider-editorial span { font-size: 1.1rem; line-height: 1; }

/* ===========================================================
   6.  Cards
   =========================================================== */

.ms-grid { display: grid; gap: 1.5rem; }
.ms-grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.ms-grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.ms-grid-4 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.ms-card {
    background: var(--ms-surface);
    border: 1px solid var(--ms-border);
    border-radius: var(--ms-r-lg);
    padding: 1.6rem;
    transition: transform var(--ms-transition), box-shadow var(--ms-transition), border-color var(--ms-transition);
    display: flex; flex-direction: column;
    text-decoration: none;
    color: inherit;
    position: relative;
}
.ms-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--ms-shadow-lg), var(--ms-shadow-brand-sm);
    border-color: var(--ms-primary-200);
    text-decoration: none;
    color: inherit;
}
.ms-card.featured {
    border-color: var(--ms-primary-400);
    box-shadow: var(--ms-shadow-brand-lg);
}

.ms-card-flat {
    background: var(--ms-surface);
    border: 1px solid var(--ms-border);
    border-radius: var(--ms-r-lg);
    padding: 1.6rem;
}

/* Soft card su sfondo crema */
.ms-card-soft {
    background: var(--ms-bg-soft);
    border: 1px solid var(--ms-border);
    border-radius: var(--ms-r-lg);
    padding: 1.4rem;
}

.ms-card-icon {
    width: 50px; height: 50px;
    background: var(--ms-primary-50);
    color: var(--ms-primary-700);
    border-radius: var(--ms-r);
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 1rem;
    font-size: 1.5rem;
    position: relative;
}
.ms-card-icon::after {
    content: '';
    position: absolute; inset: 4px;
    border-radius: 7px;
    border: 1px solid var(--ms-primary-200);
    opacity: 0.6;
    pointer-events: none;
}

.ms-card-title { font-size: 1.12rem; font-weight: 700; margin: 0 0 0.4rem; }
.ms-card-desc { color: var(--ms-text-muted); font-size: 0.93rem; flex: 1; margin: 0 0 1.2rem; line-height: 1.6; }

.ms-card-price { display: flex; align-items: baseline; gap: 0.35rem; margin-top: 0.5rem; }
.ms-card-price .amt { font-family: var(--ms-font-display); font-size: 1.85rem; font-weight: 700; color: var(--ms-primary-700); letter-spacing: -0.03em; line-height: 1; }
.ms-card-price .unit { color: var(--ms-text-subtle); font-size: 0.9rem; }
.ms-card-price-sub { color: var(--ms-text-subtle); font-size: 0.82rem; margin-top: 4px; }

/* Card footer: badge sx + CTA dx (sostituisce stili inline) */
.ms-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--ms-bg-muted);
}
.ms-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ms-primary-700);
    transition: gap var(--ms-transition-snap), color var(--ms-transition-snap);
}
.ms-card-cta i { transition: transform var(--ms-transition-snap); }
.ms-card:hover .ms-card-cta { color: var(--ms-primary-800); }
.ms-card:hover .ms-card-cta i { transform: translateX(3px); }

/* Feature tile (per sezione "Perché sceglierci") */
.ms-feature {
    text-align: center;
    padding: 1.5rem 1.2rem;
}
.ms-feature-icon {
    width: 64px; height: 64px;
    margin: 0 auto 1.1rem;
    border-radius: 50%;
    background: var(--ms-surface);
    color: var(--ms-primary-700);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.65rem;
    box-shadow: var(--ms-shadow-sm), inset 0 0 0 1px var(--ms-primary-100);
    position: relative;
}
.ms-feature-icon::after {
    content: '';
    position: absolute; inset: -6px;
    border-radius: 50%;
    border: 1px dashed var(--ms-primary-200);
    opacity: 0.7;
}
.ms-feature h4 {
    font-family: var(--ms-font-display);
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 0.4rem;
    letter-spacing: -0.01em;
}
.ms-feature p {
    color: var(--ms-text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
}

/* Pricing card variant */
.ms-pricing-card {
    background: var(--ms-surface);
    border: 1px solid var(--ms-border);
    border-radius: var(--ms-r-lg);
    padding: 2rem 1.75rem;
    position: relative;
    display: flex; flex-direction: column;
    transition: transform var(--ms-transition), box-shadow var(--ms-transition), border-color var(--ms-transition);
}
.ms-pricing-card:hover { transform: translateY(-4px); box-shadow: var(--ms-shadow-xl); border-color: var(--ms-primary-200); }
.ms-pricing-card.featured {
    border-color: var(--ms-primary-500);
    box-shadow: var(--ms-shadow-brand-lg);
    transform: translateY(-8px);
    background: linear-gradient(180deg, #ffffff 0%, var(--ms-primary-25) 100%);
}
.ms-pricing-card.featured::before {
    content: 'Più scelto';
    position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
    background: var(--ms-gradient-brand);
    color: #fff;
    padding: 5px 16px;
    border-radius: var(--ms-r-pill);
    font-size: 0.74rem; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    box-shadow: var(--ms-shadow-brand-sm);
}
.ms-pricing-name {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 0.3rem;
    /* text-align: center; */
}
.ms-pricing-tag {
    color: var(--ms-text-muted);
    font-size: 1.0rem;
    margin: 0 0 1.5rem;
    line-height: 1.5;
    min-height: 2.5rem;
}
.ms-pricing-amt { display: flex; align-items: baseline; gap: 0.35rem; margin-bottom: 1.5rem; }
.ms-pricing-amt .amt { font-family: var(--ms-font-display); font-size: 2.7rem; font-weight: 700; color: var(--ms-primary-700); letter-spacing: -0.035em; line-height: 1; }
.ms-pricing-amt .unit { color: var(--ms-text-subtle); font-size: 0.95rem; }
.ms-pricing-features { list-style: none; padding: 0; margin: 0 0 1.5rem; flex: 1; }
.ms-pricing-features li {
    padding: 0.6rem 0 0.6rem 1.8rem;
    position: relative;
    color: var(--ms-text-muted);
    font-size: 0.92rem;
    border-bottom: 1px dashed var(--ms-border);
}
.ms-pricing-features li:last-child { border-bottom: 0; }
.ms-pricing-features li::before {
    content: '';
    position: absolute; left: 0; top: 0.75rem;
    width: 18px; height: 18px;
    background: var(--ms-primary-50);
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12l5 5 9-11' stroke='%23006d0d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: center; background-repeat: no-repeat; background-size: 14px 14px;
}

/* ===========================================================
   7.  KPI / Stat tile (hosting dashboard)
   =========================================================== */

/* KPI card — pattern: striscia colorata in alto + icon left + numero centro
   Variants di colore: .ms-stat--success/--warning/--danger/--info/--neutral/--accent
   Pilotano la striscia top + il colore icon + bg pastello icon. */
.ms-stat {
    --ms-stat-strip: var(--ms-primary-500);
    --ms-stat-icon-bg: var(--ms-primary-25);
    --ms-stat-icon-color: var(--ms-primary-700);
    background: var(--ms-surface);
    border: 1px solid var(--ms-border);
    border-radius: var(--ms-r-lg);
    padding: 1.5rem 1.4rem 1.3rem;
    display: flex; align-items: center; gap: 1rem;
    min-height: 110px;
    transition: border-color var(--ms-transition), box-shadow var(--ms-transition), transform var(--ms-transition);
    text-decoration: none;
    color: inherit;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(13,30,18,0.04);
}
.ms-stat::before {
    /* Striscia colorata in alto — il distintivo della card */
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--ms-stat-strip);
}
.ms-stat:hover {
    border-color: var(--ms-stat-strip);
    box-shadow: 0 6px 18px rgba(13,30,18,0.08);
    transform: translateY(-2px);
    text-decoration: none; color: inherit;
}
.ms-stat-icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    background: var(--ms-stat-icon-bg);
    color: var(--ms-stat-icon-color);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}
.ms-stat-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.ms-stat-value {
    font-family: var(--ms-font-display);
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--ms-text);
    line-height: 1.05;
    letter-spacing: -0.025em;
    margin: 0;
    order: 1;
}
.ms-stat-label {
    font-size: 0.78rem;
    color: var(--ms-text-subtle);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 0.35rem;
    order: 0;
}
.ms-stat-meta {
    font-size: 0.78rem;
    color: var(--ms-text-muted);
    margin-top: 0.4rem;
    line-height: 1.35;
    order: 2;
}

/* Color variants */
.ms-stat--success { --ms-stat-strip: #2f9e44; --ms-stat-icon-bg: #ebfbee; --ms-stat-icon-color: #2b8a3e; }
.ms-stat--warning { --ms-stat-strip: #f59f00; --ms-stat-icon-bg: #fff8e1; --ms-stat-icon-color: #b45309; }
.ms-stat--danger  { --ms-stat-strip: #c92a2a; --ms-stat-icon-bg: #ffe1e1; --ms-stat-icon-color: #b00020; }
.ms-stat--info    { --ms-stat-strip: #1971c2; --ms-stat-icon-bg: #e7f5ff; --ms-stat-icon-color: #1864ab; }
.ms-stat--neutral { --ms-stat-strip: #adb5bd; --ms-stat-icon-bg: #f1f3f5; --ms-stat-icon-color: #495057; }
.ms-stat--accent  { --ms-stat-strip: #7048e8; --ms-stat-icon-bg: #f3f0ff; --ms-stat-icon-color: #5f3dc4; }
.ms-stat--cloud   { --ms-stat-strip: #e8590c; --ms-stat-icon-bg: #fff4e6; --ms-stat-icon-color: #d9480f; }

/* Value color sync con strip quando "attention" (caricato via modifier --warning/--danger) */
.ms-stat--warning .ms-stat-value,
.ms-stat--danger .ms-stat-value { color: var(--ms-stat-icon-color); }

.ms-stat-trend {
    display: inline-flex; align-items: center; gap: 2px;
    margin-left: 0.5rem;
    padding: 1px 6px;
    border-radius: var(--ms-r-pill);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.ms-stat-trend.up { background: var(--ms-primary-50); color: var(--ms-primary-700); }
.ms-stat-trend.down { background: var(--ms-danger-50); color: var(--ms-danger-700); }
.ms-stat-trend.flat { background: var(--ms-bg-muted); color: var(--ms-text-muted); }

/* ===========================================================
   8.  Status dot indicators (pulse)
   =========================================================== */

.ms-status {
    display: inline-flex; align-items: center; gap: 0.45rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ms-text);
}
.ms-status-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--ms-text-subtle);
    position: relative;
    flex-shrink: 0;
}
.ms-status-dot.running { background: var(--ms-primary-500); }
.ms-status-dot.running::after {
    content: '';
    position: absolute; inset: -3px;
    border-radius: 50%;
    border: 2px solid var(--ms-primary-500);
    animation: ms-pulse 1.8s ease-out infinite;
    opacity: 0;
}
.ms-status-dot.warning { background: var(--ms-warn-500); }
.ms-status-dot.error { background: var(--ms-danger-500); }
.ms-status-dot.suspended { background: var(--ms-warn-500); }
.ms-status-dot.terminated { background: var(--ms-text-subtle); }

@keyframes ms-pulse {
    0% { transform: scale(0.95); opacity: 0.9; }
    100% { transform: scale(2.2); opacity: 0; }
}

/* ===========================================================
   9.  Tables — high-density, mono cells
   =========================================================== */

.ms-table {
    width: 100%;
    border-collapse: separate; border-spacing: 0;
    background: var(--ms-surface);
    border-radius: var(--ms-r-lg);
    overflow: hidden;
    border: 1px solid var(--ms-border);
}
.ms-table th, .ms-table td {
    padding: 0.9rem 1.1rem;
    text-align: left;
    vertical-align: middle;
}
.ms-table thead th {
    background: var(--ms-bg-soft);
    font-weight: 700;
    font-size: 0.72rem;
    color: var(--ms-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    border-bottom: 1px solid var(--ms-border);
}
.ms-table tbody tr + tr td { border-top: 1px solid var(--ms-bg-muted); }
.ms-table tbody tr { transition: background var(--ms-transition-snap); }
.ms-table tbody tr:hover { background: var(--ms-bg-soft); }
.ms-table tbody td { font-size: 0.92rem; color: var(--ms-text); }

/* numeric / right align */
.ms-table .num, .ms-table .text-end, .ms-table th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* monospace pill in cell */
.ms-mono-cell, .ms-table .mono {
    font-family: var(--ms-font-mono);
    font-size: 0.85rem;
    background: var(--ms-bg-muted);
    padding: 2px 7px;
    border-radius: var(--ms-r-xs);
    color: var(--ms-primary-900);
    letter-spacing: -0.01em;
}

/* Compact table variant */
.ms-table.compact th, .ms-table.compact td { padding: 0.6rem 0.85rem; }
.ms-table.compact tbody td { font-size: 0.88rem; }

/* Table scroll wrapper */
.ms-table-wrap { overflow-x: auto; border-radius: var(--ms-r-lg); -webkit-overflow-scrolling: touch; }

/* ===========================================================
   10.  Badges (with dot variant)
   =========================================================== */

.ms-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 9px;
    border-radius: var(--ms-r-pill);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.5;
}
.ms-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ms-badge-success { background: var(--ms-success-50); color: var(--ms-success-700); }
.ms-badge-warning { background: var(--ms-warn-50); color: var(--ms-warn-700); }
.ms-badge-danger  { background: var(--ms-danger-50); color: var(--ms-danger-700); }
.ms-badge-info    { background: var(--ms-info-50); color: var(--ms-info-700); }
.ms-badge-neutral { background: var(--ms-bg-muted); color: var(--ms-text-muted); }
.ms-badge-outline { background: transparent; border: 1px solid var(--ms-border-strong); color: var(--ms-text-muted); }

/* ===========================================================
   11.  Alerts — con barra accento laterale
   =========================================================== */

.ms-alert {
    padding: 0.95rem 1.15rem 0.95rem 1.3rem;
    border-radius: var(--ms-r);
    margin-bottom: 1.2rem;
    border: 1px solid;
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    position: relative;
    line-height: 1.55;
    font-size: 0.92rem;
}
.ms-alert::before {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 4px;
    background: currentColor;
    border-radius: var(--ms-r) 0 0 var(--ms-r);
    opacity: 0.85;
}
.ms-alert > i:first-child { font-size: 1.15rem; margin-top: 1px; flex-shrink: 0; }
.ms-alert-success { background: var(--ms-success-50); border-color: var(--ms-primary-200); color: var(--ms-success-700); }
.ms-alert-warning { background: var(--ms-warn-50); border-color: #fcd97a; color: var(--ms-warn-700); }
.ms-alert-danger  { background: var(--ms-danger-50); border-color: #f8b6b6; color: var(--ms-danger-700); }
.ms-alert-info    { background: var(--ms-info-50); border-color: #b8d6ec; color: var(--ms-info-700); }

/* ===========================================================
   12.  Hero
   =========================================================== */

.ms-hero {
    background:
        radial-gradient(900px 540px at 88% -120px, rgba(54, 173, 0, 0.22), transparent 60%),
        radial-gradient(700px 420px at -10% 110%, rgba(0, 150, 57, 0.15), transparent 60%),
        var(--ms-gradient-deep);
    color: #fff;
    padding: 5.5rem 0 4.5rem;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.ms-hero::before {
    content: '';
    position: absolute; inset: 0;
    background-image: var(--ms-grid-dots);
    background-size: 220px 220px;
    opacity: 0.45;
    pointer-events: none;
}
.ms-hero::after {
    /* subtle bottom fade per separare la hero dalla section successiva */
    content: '';
    position: absolute; left: 0; right: 0; bottom: 0; height: 80px;
    background: linear-gradient(180deg, transparent, rgba(0, 30, 18, 0.4));
    pointer-events: none;
}

/* Globe decorativo: parte dall'alto con margine negativo (sporge dal top)
   e raggiunge il fondo della hero quasi a toccarlo. Larghezza determinata
   dall'aspect-ratio 1:1 → si allarga insieme all'altezza. */
.ms-hero-globe {
    position: absolute;
    top: -120px;
    right: -130px;
    height: calc(100% + 100px);     /* sporge 120 sopra, ferma -20 prima del bottom */
    width: auto;
    aspect-ratio: 1 / 1;
    opacity: 0.22;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}
/* Nascondo su mobile per non rubare attenzione al contenuto */
@media (max-width: 768px) {
    .ms-hero-globe { display: none; }
}
/* Su tablet riduco overflow ma mantengo logica top-negativo / quasi-bottom */
@media (max-width: 1100px) and (min-width: 769px) {
    .ms-hero-globe {
        top: -80px;
        right: -200px;
        height: calc(100% + 60px);
        opacity: 0.18;
    }
}

/* Hero compatta (pagine interne): mantengo la STESSA LARGHEZZA della home
   (~700px) anche se la hero è bassa. Il globe sporge sopra e sotto, ma
   `.ms-hero { overflow: hidden }` clippa l'extra mantenendo il layout pulito.
   Centro verticale via top:50% + translateY:-50%. */
.ms-hero.ms-hero-sm .ms-hero-globe {
    top: 50%;
    right: -130px;
    width: 700px;
    height: 700px;
    aspect-ratio: auto;        /* sovrascrive quello della .ms-hero-globe parent */
    transform: translateY(-50%);
    opacity: 0.18;
}

/* Variante mini per la welcome card dell'area cliente loggata: globo decorativo
   che "sporge fuori" sopra e a destra della card, come nella hero della home.
   Top e right negativi tagliano il globo creando l'effetto di sfioramento. */
.ms-hero-globe.ms-hero-globe-mini {
    top: -80px;
    right: -100px;
    width: 320px;
    height: 320px;
    aspect-ratio: auto;
    opacity: 0.30;
    z-index: 1;
}
@media (max-width: 1100px) and (min-width: 769px) {
    .ms-hero-globe.ms-hero-globe-mini {
        top: -60px;
        right: -120px;
        width: 260px;
        height: 260px;
        opacity: 0.24;
    }
}
@media (max-width: 768px) {
    .ms-hero-globe.ms-hero-globe-mini { display: none; }
}
@media (max-width: 1100px) and (min-width: 769px) {
    .ms-hero.ms-hero-sm .ms-hero-globe {
        right: -180px;
        width: 560px;
        height: 560px;
        opacity: 0.16;
    }
}
.ms-hero-inner { position: relative; max-width: var(--ms-container); margin: 0 auto; padding: 0 2rem; z-index: 1; }
.ms-hero .eyebrow {
    display: inline-flex; align-items: center; gap: 0.55rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ms-primary-300);
    margin-bottom: 1.2rem;
}
.ms-hero .eyebrow::before {
    content: ''; width: 22px; height: 1px; background: var(--ms-primary-400);
}

/* Hero status pill (replaces inline styles) */
.ms-hero-status {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 6px 14px 6px 12px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--ms-r-pill);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffffff;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    margin-bottom: 1.6rem;
}
.ms-hero-status-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--ms-primary-400);
    box-shadow: 0 0 12px var(--ms-primary-400);
    position: relative;
    flex-shrink: 0;
}
.ms-hero-status-dot::after {
    content: '';
    position: absolute; inset: -3px;
    border: 1.5px solid var(--ms-primary-400);
    border-radius: 50%;
    animation: ms-pulse 1.8s ease-out infinite;
    opacity: 0;
}

/* Hero TLD list — chip contrastati */
.ms-hero-tlds {
    display: flex; align-items: center; gap: 0.45rem;
    flex-wrap: wrap;
    margin-top: 1.2rem;
    font-size: 0.84rem;
    color: rgba(255, 255, 255, 0.72);
}
.ms-hero-tlds-label {
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.65);
    margin-right: 0.4rem;
}
.ms-hero-tlds code {
    font-family: var(--ms-font-mono);
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.18);
    padding: 4px 10px;
    border-radius: var(--ms-r-xs);
    color: #ffffff;
    font-weight: 600;
    font-size: 0.83rem;
    letter-spacing: 0;
}
/* TLD pill con prezzo (link a /shop/domain-search?tld=…) */
.ms-hero-tld-pill {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 4px 10px 4px 6px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    color: #fff;
    text-decoration: none;
    font-size: 0.82rem;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.ms-hero-tld-pill:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.32);
    transform: translateY(-1px);
}
.ms-hero-tld-pill code {
    background: transparent;
    border: 0;
    padding: 2px 8px;
    color: #fff;
    font-weight: 700;
}
.ms-hero-tld-price {
    color: rgba(255, 255, 255, 0.78);
    font-weight: 500;
    letter-spacing: 0.01em;
}
/* Bottone <details> "Vedi tutti" — apre i TLD non featured */
.ms-hero-tlds-more {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
}
.ms-hero-tlds-more > summary {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 4px 12px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    list-style: none;
    user-select: none;
    transition: background 0.15s ease, transform 0.15s ease;
}
.ms-hero-tlds-more > summary::-webkit-details-marker { display: none; }
.ms-hero-tlds-more > summary::before {
    content: '+';
    font-size: 1rem;
    line-height: 1;
    font-weight: 700;
    margin-right: 2px;
    transition: transform 0.2s ease;
}
.ms-hero-tlds-more[open] > summary::before {
    content: '−';
}
.ms-hero-tlds-more > summary:hover {
    background: rgba(255, 255, 255, 0.22);
    transform: translateY(-1px);
}
.ms-hero-tlds-count {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
}
/* Toggle dei due label dentro <summary>: chiuso mostra "Vedi tutti", aperto "Mostra meno". */
.ms-hero-tlds-more-close { display: none; }
.ms-hero-tlds-more[open] .ms-hero-tlds-more-open { display: none; }
.ms-hero-tlds-more[open] .ms-hero-tlds-more-close { display: inline; }
/* Pillole "extras" appaiono inline dopo il pulsante quando details è aperto. */
.ms-hero-tlds-extras {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.45rem;
    width: 100%;
}
.ms-hero h1 {
    font-size: clamp(2.1rem, 4.6vw, 3.4rem);
    line-height: 1.08;
    letter-spacing: -0.028em;
    color: #fff;
    font-weight: 700;
    max-width: 900px;       /* +140 per accomodare "L'infrastruttura professionale" su una riga */
    margin: 0 0 1.1rem;
}
.ms-hero h1 .accent { color: var(--ms-primary-400); }

/* Wrapper della prima riga del payoff: nowrap atomico così "L'infrastruttura [flip]"
   non si spezza mai indipendentemente dalla larghezza del wrapper .ms-flip-word. */
.ms-hero h1 .ms-hero-h1-row {
    display: inline-block;
    white-space: nowrap;
}

/* Punto finale dell'h1 hero: dopo l'animazione flip diventa "!" con effetto pop. */
.ms-hero h1 .ms-final-dot {
    display: inline-block;
    transform-origin: bottom center;
    transition: color 200ms ease-out;
}
@keyframes ms-dot-pop {
    0%   { transform: scale(1)   translateY(0); }
    35%  { transform: scale(1.7) translateY(-4px); }
    65%  { transform: scale(0.9) translateY(2px); }
    100% { transform: scale(1)   translateY(0); }
}
.ms-hero h1 .ms-final-dot.is-bang {
    animation: ms-dot-pop 480ms cubic-bezier(.34, 1.56, .64, 1) forwards;
}
.ms-hero p.lead {
    font-size: clamp(1rem, 1.4vw, 1.18rem);
    color: rgba(255, 255, 255, 0.85);
    max-width: 640px;
    margin: 0 0 2rem;
    line-height: 1.65;
}
.ms-hero-cta { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.ms-hero-cta .ms-btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(6px);
}
.ms-hero-cta .ms-btn-secondary:hover { background: rgba(255, 255, 255, 0.18); color: #fff; }

/* ===========================================================
   Split-flap / Solari board effect (hero payoff word)
   Adattato fedelmente da codepen.io/tomgiddings/pen/yLyExxo (departure board).
   5 rotateX(360deg) consecutive in 1s con backface-visibility hidden:
   la lettera "scatta" 5 volte mostrando glifi casuali, poi si ferma sul finale.
   Stagger 0.25s tra lettere = effetto cascata di tessere.
   =========================================================== */
.ms-flip-word {
    display: inline-block;
    perspective: 1000px;
    vertical-align: baseline;
    color: #fff;                 /* coerente con .ms-hero h1 */
    font-family: inherit;        /* eredita Roboto Slab dall'h1 */
    white-space: nowrap;         /* safety net: il flip non manda mai a capo */
}
.ms-flip-word .flip-letter {
    display: inline-block;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transform-origin: center center;
    white-space: pre;            /* preserva spazi di padding */
    will-change: transform;
    text-align: center;          /* char più stretti centrati nella tessera */
    /* min-width viene impostato via JS al load misurando il char più largo
       tra tutti i possibili (parole + char random) → tessere a larghezza
       fissa, niente reflow durante i flip. */
}
/* Keyframe identico al codepen: 5 rotateX(360deg) consecutive in 1s.
   Con backface-visibility:hidden la lettera scompare per metà rotazione
   e riappare al 360°: l'occhio percepisce 5 "scatti" sequenziali. */
@keyframes ms-letter-flip {
    0%   { transform: rotateX(0deg); }
    20%  { transform: rotateX(360deg); }
    40%  { transform: rotateX(0deg); }
    60%  { transform: rotateX(360deg); }
    80%  { transform: rotateX(0deg); }
    100% { transform: rotateX(360deg); }
}
.ms-flip-word .flip-letter.is-flipping {
    animation: ms-letter-flip 1s ease-in-out forwards;
}

/* Hero stats — grid equispaziato che riempie tutta la riga.
   Desktop: 7 colonne (un blocco per voce). Tablet: 4 colonne. Mobile: 2 colonne. */
.ms-hero-stats {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1rem 1.5rem;
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.ms-hero-stat {
    text-align: left;
    min-width: 0; /* permette al contenuto di contrarsi senza forzare overflow */
}
.ms-hero-stat .num {
    font-family: var(--ms-font-display);
    font-size: 1.65rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    letter-spacing: -0.02em;
    white-space: nowrap;
}
.ms-hero-stat .lbl {
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-top: 0.45rem;
    font-weight: 600;
    line-height: 1.3;
}

@media (max-width: 1024px) {
    .ms-hero-stats { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
}
@media (max-width: 640px) {
    .ms-hero-stats { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
    .ms-hero-stat .num { font-size: 1.5rem; }
}

/* Hero compact */
.ms-hero-sm {
    /* padding: 3rem 0 2.5rem; */
}
.ms-hero-sm h1 { font-size: clamp(1.6rem, 3vw, 2.25rem); }

/* Domain search box dentro hero — con bordo animato circolare brand */
@property --ms-border-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.ms-domain-box {
    /* Background a due strati: bianco al centro (padding-box) + conic gradient
       sui 2px del bordo (border-box). Il bordo trasparente "espone" il gradient. */
    background:
        linear-gradient(var(--ms-surface), var(--ms-surface)) padding-box,
        conic-gradient(
            from var(--ms-border-angle),
            #008710 0deg,
            #36AD00 90deg,
            #008710 180deg,
            #36AD00 270deg,
            #008710 360deg
        ) border-box;
    border: 5px solid transparent;
    border-radius: var(--ms-r-lg);
    padding: 1rem;
    box-shadow: var(--ms-shadow-xl), 0 0 24px -8px rgba(0, 135, 16, 0.45);
    margin-top: 2rem;
    width: 100%;
    position: relative;
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
    animation: ms-rotate-border 4s linear infinite;
}
@keyframes ms-rotate-border {
    to { --ms-border-angle: 360deg; }
}
/* Fallback browser senza @property: il bordo resta statico bicolore (no animazione) */
@supports not (background: paint(something)) {
    .ms-domain-box { animation: none; }
}
/* Prefisso "www." stile Aruba: pillola visiva attaccata all'input, condivide
   il background-pill con l'input via un sottile divider verticale. */
.ms-domain-www {
    display: inline-flex;
    align-items: center;
    padding: 0 0.6rem 0 1.05rem;
    background: var(--ms-bg-soft);
    color: var(--ms-text-muted);
    font-family: var(--ms-font-mono);
    font-size: 1.05rem;
    font-weight: 600;
    border-radius: var(--ms-r) 0 0 var(--ms-r);
    user-select: none;
    flex: 0 0 auto;
    position: relative;
}
.ms-domain-www::after {
    content: '';
    position: absolute;
    right: 0; top: 28%; bottom: 28%;
    width: 1px;
    background: var(--ms-border, rgba(0, 0, 0, 0.08));
}
.ms-domain-box input[type="text"] {
    flex: 1 1 auto;
    min-width: 0;       /* permette al flex item di restringersi sotto la min-content implicita del browser */
    border: 0;
    padding: 0.85rem 1.05rem;
    font-size: 1.05rem;
    border-radius: var(--ms-r);
    background: var(--ms-bg-soft);
    color: var(--ms-text);
    outline: none;
    font-family: var(--ms-font-mono);
}
/* Quando preceduto dal prefisso www., l'input perde l'angolo sinistro per
   formare un pill unico (www. → input). */
.ms-domain-www + input[type="text"] {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding-left: 0.6rem;
}
.ms-domain-box > .ms-btn {
    flex: 0 0 auto;     /* bottone "Cerca" mantiene dimensione naturale */
}
.ms-domain-box input[type="text"]::placeholder { font-family: var(--ms-font-body); }
.ms-domain-box input[type="text"]:focus {
    box-shadow: inset 0 0 0 2px var(--ms-primary-400);
    background: #fff;
}
/* Select TLD a fianco dell'input (pattern Aruba/GoDaddy) */
.ms-domain-box .ms-tld-select {
    flex: 0 0 auto;
    border: 0;
    padding: 0.85rem 0.9rem;
    font-size: 1.05rem;
    border-radius: var(--ms-r);
    background: var(--ms-bg-soft);
    color: var(--ms-text);
    font-family: var(--ms-font-mono);
    font-weight: 600;
    cursor: pointer;
    outline: none;
    min-width: 90px;
    text-align: center;
    appearance: menulist;
}
.ms-domain-box .ms-tld-select:focus {
    box-shadow: inset 0 0 0 2px var(--ms-primary-400);
    background: #fff;
}
@media (max-width: 540px) {
    .ms-domain-box { flex-wrap: wrap; }
    .ms-domain-box .ms-tld-select { flex: 1 1 100%; min-width: 0; }
    .ms-domain-box > .ms-btn { flex: 1 1 100%; }
}
.ms-domain-box .ms-tlds {
    display: flex; gap: 0.5rem; padding: 0.7rem 0.5rem 0.2rem; flex-wrap: wrap;
    font-size: 0.83rem; color: var(--ms-text-subtle);
    align-items: center;
}
.ms-domain-box .ms-tlds code {
    font-family: var(--ms-font-mono);
    background: var(--ms-primary-50); padding: 2px 8px; border-radius: var(--ms-r-xs);
    color: var(--ms-primary-700); font-weight: 600;
}

/* ===========================================================
   13.  Info / callout boxes
   =========================================================== */

.ms-info-box {
    background: var(--ms-primary-50);
    border-left: 4px solid var(--ms-primary-500);
    border-radius: var(--ms-r);
    padding: 1rem 1.2rem;
    color: var(--ms-primary-900);
    font-size: 0.93rem;
    line-height: 1.6;
}

.ms-callout {
    background: var(--ms-surface);
    border: 1px solid var(--ms-border);
    border-radius: var(--ms-r-lg);
    padding: 1.5rem;
    position: relative;
    padding-left: 4rem;
}
.ms-callout .ms-callout-icon {
    position: absolute; left: 1.3rem; top: 1.5rem;
    width: 36px; height: 36px;
    background: var(--ms-primary-50);
    color: var(--ms-primary-700);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
}

/* ===========================================================
   14.  Footer (warm dark)
   =========================================================== */

.ms-footer {
    background: var(--ms-dark-900);
    color: var(--ms-dark-text);
    padding: 4.5rem 0 0;
    margin-top: 5rem;
    font-size: 0.92rem;
    line-height: 1.7;
    position: relative;
}
.ms-footer::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, transparent, var(--ms-primary-500) 30%, var(--ms-primary-400) 50%, var(--ms-primary-500) 70%, transparent);
    opacity: 0.7;
}
.ms-footer-inner { max-width: var(--ms-container); margin: 0 auto; padding: 0 2rem; }

/* Box intro footer — replica fedele dello stile managedserver.it
   (Elementor element 7b9a3e9 + widget 6f3227c). Solo desktop, larghezza 1400px. */
.ms-footer-intro {
    max-width: 1400px;
    margin: 0 auto 60px;
    padding: 40px;
    background: transparent;                  /* eredita nero del footer */
    border: 1px solid #848484;
    border-radius: 5px;
    color: var(--ms-dark-text);
    text-align: justify;
    line-height: 1.7;
    font-size: 0.95rem;
}
.ms-footer-intro p {
    margin: 0;
}
/* Mobile/tablet: nascosto completamente. Il box di intro è contenuto editoriale
   pesante che ha senso solo su schermi grandi. */
@media (max-width: 900px) {
    .ms-footer-intro {
        display: none;
    }
}

.ms-footer-meta { padding-top: 0.5rem; padding-bottom: 1.5rem; }
.ms-footer-meta-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2.4rem;
    margin-bottom: 1.5rem;
}
@media (max-width: 1100px) { .ms-footer-meta-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .ms-footer-meta-grid { grid-template-columns: 1fr; } }

.ms-footer-meta h6 {
    color: #fff;
    font-family: var(--ms-font-display);
    font-size: 0.78rem;
    font-weight: 700;
    margin: 0 0 1rem;
    padding: 0;
    border: 0;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 0.55rem;
}
.ms-footer-meta h6::before {
    content: ''; width: 10px; height: 1px;
    background: var(--ms-primary-400);
}
.ms-footer-meta-block {
    color: var(--ms-dark-text);
    font-size: 0.86rem;
    line-height: 1.7;
}
.ms-footer-meta-block strong { color: #fff; font-weight: 600; }
/* Link footer: NON verdi. Bianco puro per leggibilità su dark warm,
   hover sottolineato (style sobrio editorial) */
.ms-footer a,
.ms-footer-meta-block a {
    color: #ffffff;
    text-decoration: none;
    transition: color var(--ms-transition-snap), text-decoration-color var(--ms-transition-snap);
}
.ms-footer a:hover,
.ms-footer-meta-block a:hover {
    color: #ffffff;
    text-decoration: underline;
    text-decoration-color: var(--ms-primary-400);
    text-underline-offset: 4px;
    text-decoration-thickness: 1.5px;
}
.ms-footer-meta-block i { color: var(--ms-primary-400); margin-right: 0.4rem; }

.ms-footer-brand-block { margin-bottom: 1.8rem; }
.ms-footer-brand-block img { height: 38px; width: auto; display: block; margin-bottom: 0.8rem; }

/* Footer bottom: 2 colonne — [bandiere + testo legale a sinistra] | [Stripe a destra]. */
.ms-footer-bottom {
    border-top: 1px solid var(--ms-dark-border);
    padding: 1.75rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    font-size: 13px;
    color: var(--ms-dark-text-muted);
}
.ms-footer-bottom-left {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.ms-footer-bottom-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
}

/* Dimensioni dal markup originale di managedserver.it:
   - Bandiere width 130px (EU) e 64px (IT) → ~42px height
   - Stripe width 300px → ~127px height (intenzionalmente più grande) */
.ms-footer-bottom-left img.flag-eu     { width: 130px; height: auto; display: block; }
.ms-footer-bottom-left img.flag-it     { width: 64px;  height: auto; display: block; }
.ms-footer-bottom-right img.logo-stripe{ width: 300px; height: auto; display: block; }

.ms-footer-bottom-center {
    text-align: left;
    line-height: 1.55;
}
.ms-footer-bottom-center p { margin: 0; }
.ms-footer-bottom-center sup { font-size: 0.65em; vertical-align: super; }

/* Mobile/tablet: stack verticale per leggibilità */
@media (max-width: 900px) {
    .ms-footer-bottom {
        grid-template-columns: 1fr;
        gap: 1.2rem;
        text-align: center;
    }
    .ms-footer-bottom-left,
    .ms-footer-bottom-right {
        justify-content: center;
    }
}

/* ===========================================================
   15.  User menu (avatar dropdown)
   =========================================================== */

.ms-user-menu { position: relative; }
.ms-user-avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ms-primary-400), var(--ms-primary-700));
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.95rem;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: var(--ms-shadow-sm);
    transition: transform var(--ms-transition-snap);
}
.ms-user-avatar:hover { transform: scale(1.04); }

/* ===========================================================
   16.  Page header (client area + auth)
   =========================================================== */

.ms-page-header {
    padding: 2.5rem 0 1.6rem;
    border-bottom: 1px solid var(--ms-border);
    background: linear-gradient(180deg, var(--ms-bg) 0%, var(--ms-bg-soft) 100%);
    position: relative;
}
.ms-page-header::after {
    content: '';
    position: absolute; bottom: -1px; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--ms-primary-200) 30%, var(--ms-primary-200) 70%, transparent);
}
.ms-page-header-inner {
    max-width: var(--ms-container);
    margin: 0 auto;
    padding: 0 2rem;
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 2rem; flex-wrap: wrap;
}
.ms-page-header h1 { font-size: 1.95rem; margin: 0 0 0.35rem; letter-spacing: -0.025em; }
.ms-page-header .lead { color: var(--ms-text-muted); margin: 0; font-size: 1rem; }
.ms-page-header .eyebrow {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ms-primary-700);
    margin-bottom: 0.5rem;
}

/* breadcrumb */
.ms-breadcrumb {
    display: flex; flex-wrap: wrap;
    list-style: none; padding: 0; margin: 0 0 0.9rem;
    font-size: 0.83rem;
    color: var(--ms-text-subtle);
    gap: 0.4rem;
}
.ms-breadcrumb li:not(:last-child)::after {
    content: '/'; margin-left: 0.4rem; color: var(--ms-text-subtle); opacity: 0.5;
}
.ms-breadcrumb a { color: var(--ms-text-muted); }
.ms-breadcrumb a:hover { color: var(--ms-primary-700); text-decoration: none; }

/* ===========================================================
   17.  Auth split visual
   =========================================================== */

.ms-auth-wrap {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
}
@media (max-width: 900px) { .ms-auth-wrap { grid-template-columns: 1fr; } }

.ms-auth-visual {
    background:
        radial-gradient(800px 500px at 80% 100%, rgba(54, 173, 0, 0.30), transparent),
        radial-gradient(500px 350px at 10% 20%, rgba(0, 150, 57, 0.20), transparent),
        var(--ms-gradient-deep);
    color: #fff;
    padding: 3.5rem;
    display: flex; flex-direction: column; justify-content: space-between;
    position: relative;
    overflow: hidden;
}
@media (max-width: 900px) { .ms-auth-visual { display: none; } }
.ms-auth-visual::before {
    content: '';
    position: absolute; inset: 0;
    background-image: var(--ms-grid-dots);
    background-size: 200px 200px;
    opacity: 0.5;
    pointer-events: none;
}
.ms-auth-visual::after {
    /* corner ornament */
    content: '';
    position: absolute; bottom: 2.5rem; right: 2.5rem;
    width: 70px; height: 70px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.4);
    border-right: 2px solid rgba(255, 255, 255, 0.4);
}
.ms-auth-visual-content { position: relative; max-width: 480px; z-index: 1; }
.ms-auth-visual h2 { color: #fff; font-size: 2.2rem; letter-spacing: -0.025em; margin: 1rem 0; line-height: 1.15; }
.ms-auth-visual p { color: rgba(255, 255, 255, 0.82); font-size: 1.05rem; line-height: 1.65; }
.ms-auth-visual .ms-checks { list-style: none; padding: 0; margin: 2rem 0 0; }
.ms-auth-visual .ms-checks li { padding: 0.45rem 0 0.45rem 2rem; position: relative; color: rgba(255, 255, 255, 0.9); line-height: 1.5; }
.ms-auth-visual .ms-checks li::before {
    content: '';
    position: absolute; left: 0; top: 0.6rem;
    width: 22px; height: 22px;
    background: rgba(255, 255, 255, 0.16);
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12l5 5 9-11' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: center; background-repeat: no-repeat; background-size: 14px 14px;
}

.ms-auth-form-wrap {
    background: var(--ms-bg);
    display: flex; align-items: center; justify-content: center;
    padding: 3rem 1.5rem;
}
.ms-auth-form-card { width: 100%; max-width: 460px; }
.ms-auth-form-card h1 { font-size: 1.95rem; margin: 0 0 0.5rem; letter-spacing: -0.025em; }
.ms-auth-form-card .lead { color: var(--ms-text-muted); margin: 0 0 2rem; }

/* ===========================================================
   18.  Domain search results
   =========================================================== */

.ms-domain-result {
    background: var(--ms-surface);
    border: 1px solid var(--ms-border);
    border-radius: var(--ms-r-lg);
    padding: 1rem 1.25rem;
    display: flex; align-items: center; gap: 1rem;
    margin-bottom: 0.6rem;
    transition: border-color var(--ms-transition), box-shadow var(--ms-transition), transform var(--ms-transition);
}
.ms-domain-result:hover { border-color: var(--ms-primary-200); box-shadow: var(--ms-shadow-md); transform: translateY(-1px); }

/* Cart-quick-add: fade+slide-up della riga dopo "Aggiungi" successful */
.ms-domain-result.is-fading-out {
    overflow: hidden;
    transition: max-height 0.4s ease-in-out,
                opacity 0.35s ease-out,
                margin 0.4s ease-in-out,
                padding 0.4s ease-in-out,
                border-width 0.4s ease-in-out;
    pointer-events: none;
}

/* Badge counter del carrello in header */
[data-cart-count] {
    display: inline-flex;
    align-items: center; justify-content: center;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    margin-left: 4px;
    background: var(--ms-primary-500, #009639);
    color: #fff;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    transition: transform 0.2s ease;
}
[data-cart-count][hidden] { display: none; }
[data-cart-count].is-bumped {
    animation: ms-badge-bump 0.4s ease-out;
}
@keyframes ms-badge-bump {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.4); }
    100% { transform: scale(1); }
}

/* Toast host container — fixed bottom-right */
.ms-toast-host {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 380px;
    pointer-events: none;
}
.ms-toast {
    display: flex; align-items: center; gap: 0.65rem;
    background: var(--ms-surface);
    color: var(--ms-text);
    border-radius: var(--ms-r);
    padding: 0.85rem 1rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--ms-border, rgba(0, 0, 0, 0.08));
    border-left: 4px solid var(--ms-primary-500, #009639);
    font-size: 0.92rem;
    pointer-events: auto;
    transform: translateX(120%);
    opacity: 0;
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.28s ease;
}
.ms-toast.is-visible { transform: translateX(0); opacity: 1; }
.ms-toast i { font-size: 1.1rem; color: var(--ms-primary-600, #008710); }
.ms-toast--error { border-left-color: #d63031; }
.ms-toast--error i { color: #d63031; }
.ms-toast-close {
    background: transparent; border: 0;
    cursor: pointer;
    color: var(--ms-text-muted);
    font-size: 1.2rem; line-height: 1;
    padding: 0 0 0 0.4rem;
    margin-left: auto;
}
.ms-toast-close:hover { color: var(--ms-text); }

/* Skeleton state: TLD in attesa di risposta async (loading via JS) */
.ms-domain-result.skeleton {
    background:
        linear-gradient(90deg, var(--ms-surface) 0%, var(--ms-bg-soft) 50%, var(--ms-surface) 100%);
    background-size: 200% 100%;
    animation: ms-skeleton-shimmer 1.6s ease-in-out infinite;
    opacity: 0.85;
}
.ms-domain-result.skeleton:hover { transform: none; box-shadow: none; }
@keyframes ms-skeleton-shimmer {
    0%   { background-position: -100% 0; }
    100% { background-position:  200% 0; }
}
/* Spinner circolare inline — coerente con tabler-icons stroke */
.ms-domain-spinner {
    display: inline-block;
    width: 16px; height: 16px;
    border: 2px solid var(--ms-border, rgba(0,0,0,0.12));
    border-top-color: var(--ms-primary-500, #009639);
    border-radius: 50%;
    animation: ms-spin 0.85s linear infinite;
    vertical-align: middle;
    margin-right: 0.4rem;
}
@keyframes ms-spin {
    to { transform: rotate(360deg); }
}
.ms-domain-result .fqdn { font-family: var(--ms-font-mono); font-size: 1.05rem; font-weight: 600; color: var(--ms-text); flex: 1; letter-spacing: -0.01em; }
.ms-domain-result .tld-tag {
    display: inline-block;
    background: var(--ms-primary-50); color: var(--ms-primary-700);
    padding: 2px 10px; border-radius: var(--ms-r-xs); font-size: 0.78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    margin-right: 0.6rem;
}
.ms-domain-result .price { font-weight: 700; color: var(--ms-text); font-family: var(--ms-font-display); font-size: 1.1rem; }
.ms-domain-result .price-unit { color: var(--ms-text-subtle); font-size: 0.82rem; }
.ms-domain-result-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; margin-right: 0.6rem; }
.ms-domain-result-actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }

/* Stati semantici della riga dominio */
.ms-domain-result.taken { background: #fff8f8; border-color: #f5c2c2; }
.ms-domain-result.taken .tld-tag { background: #ffe1e1; color: #8a0000; }
.ms-domain-result.mine { background: #e7f5ff; border-color: #74c0fc; }
.ms-domain-result.mine .tld-tag { background: #d0ebff; color: #1864ab; }
.ms-domain-result.others-local { background: var(--ms-bg-soft); border-color: var(--ms-border); opacity: 0.85; }
.ms-domain-result.others-local .tld-tag { background: #f1f3f5; color: #495057; }
.ms-domain-result.unknown { background: #fff8e1; border-color: #fcd97a; }
.ms-domain-result.unknown .tld-tag { background: #fff3bf; color: #b45309; }

/* ===========================================================
   19b. Modale WHOIS
   =========================================================== */
.ms-whois-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; }
.ms-whois-modal[hidden] { display: none; }
.ms-whois-modal-backdrop { position: absolute; inset: 0; background: rgba(13,30,18,0.55); backdrop-filter: blur(2px); }
.ms-whois-modal-dialog {
    position: relative;
    background: var(--ms-surface);
    border-radius: var(--ms-r-lg);
    box-shadow: var(--ms-shadow-xl);
    width: min(640px, 92vw);
    max-height: 86vh;
    display: flex; flex-direction: column;
    overflow: hidden;
}
.ms-whois-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.25rem; border-bottom: 1px solid var(--ms-border);
}
.ms-whois-modal-head h3 { margin: 0; font-size: 1.1rem; font-family: var(--ms-font-display); }
.ms-whois-modal-close {
    background: transparent; border: 0; font-size: 1.6rem; line-height: 1;
    color: var(--ms-text-muted); cursor: pointer; padding: 0 0.4rem;
}
.ms-whois-modal-close:hover { color: var(--ms-text); }
.ms-whois-modal-body { padding: 1rem 1.25rem; overflow-y: auto; }
.ms-whois-loading { color: var(--ms-text-muted); text-align: center; padding: 2rem 1rem; }
.ms-whois-empty { color: var(--ms-text-muted); padding: 1rem 0.4rem; }
.ms-whois-error { color: var(--ms-danger-700); padding: 1rem 0.4rem; }
.ms-whois-dl { display: grid; grid-template-columns: 130px 1fr; gap: 0.4rem 1rem; margin: 0; }
.ms-whois-dl dt { font-weight: 600; color: var(--ms-text-muted); font-size: 0.85rem; }
.ms-whois-dl dd { margin: 0; color: var(--ms-text); font-size: 0.9rem; word-break: break-word; }
.ms-whois-raw { margin-top: 1.2rem; border-top: 1px dashed var(--ms-border); padding-top: 0.8rem; }
.ms-whois-raw summary { cursor: pointer; color: var(--ms-text-muted); font-size: 0.85rem; }
.ms-whois-raw pre {
    background: #0f1419; color: #d4d4d4;
    padding: 0.8rem; border-radius: var(--ms-r);
    font-size: 0.75rem; line-height: 1.45;
    max-height: 240px; overflow: auto; margin-top: 0.6rem;
    font-family: var(--ms-font-mono);
    white-space: pre-wrap; word-break: break-word;
}

/* ===========================================================
   19.  Sticky sidebar + feature row
   =========================================================== */

.ms-sticky { position: sticky; top: 50px; }

/* === Layout pagina dettaglio piano (shop/plan.php) === */
.ms-plan-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: flex-start;
}
/* `minmax(0, …)` evita che il contenuto interno (es. tabelle/long_description larghe)
   forzi le colonne oltre il viewport. */
.ms-plan-detail-grid > * { min-width: 0; }

/* Tablet ≤ 1024px: meno gap, sidebar leggermente più larga */
@media (max-width: 1024px) {
    .ms-plan-detail-grid {
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
        gap: 2rem;
    }
}

/* Mobile ≤ 768px: stack verticale, sidebar a piena larghezza, niente sticky */
@media (max-width: 768px) {
    .ms-plan-detail-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .ms-plan-detail-grid .ms-sticky {
        position: static;
        top: auto;
    }
}

.ms-feature-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 0; }
.ms-feature-row .icon {
    width: 26px; height: 26px; flex-shrink: 0;
    background: var(--ms-primary-50); color: var(--ms-primary-700);
    border-radius: var(--ms-r-sm);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.85rem;
}

/* ===========================================================
   20.  Mobile nav (hamburger)
   =========================================================== */

.ms-mobile-toggle {
    display: none;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    width: 42px; height: 42px;
    border-radius: var(--ms-r-sm);
    cursor: pointer;
    align-items: center; justify-content: center;
}
@media (max-width: 1000px) {
    .ms-topbar { display: none; }
    .ms-nav { display: none; }
    .ms-mobile-toggle { display: inline-flex; }
}
.ms-mobile-nav {
    display: none;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding: 1rem 1.5rem;
    background: var(--ms-primary-900);
}
.ms-mobile-nav.open { display: block; }
.ms-mobile-nav a {
    display: block;
    padding: 0.7rem 0;
    color: rgba(255, 255, 255, 0.92);
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.ms-mobile-nav a:last-child { border-bottom: 0; }
.ms-mobile-nav a:hover { color: #fff; text-decoration: none; }

.ms-mobile-group {
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.ms-mobile-group-title {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ms-primary-300);
    padding: 0.3rem 0 0.6rem;
}
.ms-mobile-group a {
    padding: 0.5rem 0 0.5rem 0.8rem;
    border-bottom: 0;
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.85);
}

/* ===========================================================
   21.  Utilities
   =========================================================== */

.ms-stack-sm > * + * { margin-top: 0.5rem; }
.ms-stack    > * + * { margin-top: 1rem; }
.ms-stack-lg > * + * { margin-top: 1.5rem; }
.ms-stack-xl > * + * { margin-top: 2.5rem; }
.ms-cluster { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.ms-cluster-end { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: flex-end; }
.ms-row-between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

.ms-divider { height: 1px; background: var(--ms-border); margin: 1.5rem 0; }

.ms-mono { font-family: var(--ms-font-mono); letter-spacing: -0.01em; }
.ms-display { font-family: var(--ms-font-display); }

.ms-text-brand { color: var(--ms-primary-700) !important; }
.ms-text-muted { color: var(--ms-text-muted) !important; }
.ms-text-subtle { color: var(--ms-text-subtle) !important; }
.ms-bg-brand-soft { background: var(--ms-primary-50) !important; }
.ms-bg-soft { background: var(--ms-bg-soft) !important; }

.ms-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Numeric tabular for prices/IDs */
.ms-num { font-variant-numeric: tabular-nums; }

/* Eyebrow standalone */
.ms-eyebrow {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ms-primary-700);
}
.ms-eyebrow::before { content: ''; width: 14px; height: 1px; background: var(--ms-primary-500); }

/* ===========================================================
   22.  Skeleton + Empty state
   =========================================================== */

.ms-skeleton {
    background: linear-gradient(90deg, var(--ms-bg-soft) 0%, var(--ms-bg-muted) 50%, var(--ms-bg-soft) 100%);
    background-size: 200% 100%;
    animation: ms-skeleton 1.6s ease-in-out infinite;
    border-radius: var(--ms-r-xs);
}
@keyframes ms-skeleton {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.ms-skeleton-line { height: 0.9rem; margin-bottom: 0.5rem; }
.ms-skeleton-line.short { width: 60%; }

.ms-empty {
    text-align: center;
    padding: 4rem 2rem;
}
.ms-empty-icon {
    width: 84px; height: 84px;
    margin: 0 auto 1.4rem;
    border-radius: 50%;
    background: var(--ms-bg-soft);
    color: var(--ms-text-subtle);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 2.4rem;
    position: relative;
}
.ms-empty-icon::after {
    content: '';
    position: absolute; inset: -6px;
    border-radius: 50%;
    border: 1px dashed var(--ms-border-strong);
}
.ms-empty h3 { font-size: 1.3rem; margin: 0 0 0.4rem; color: var(--ms-text); }
.ms-empty p { color: var(--ms-text-muted); margin: 0 0 1.5rem; max-width: 420px; margin-left: auto; margin-right: auto; }

/* ===========================================================
   23.  Code blocks
   =========================================================== */

code, kbd, samp, pre {
    font-family: var(--ms-font-mono);
    font-size: 0.88em;
}
.ms-site :not(pre) > code {
    background: var(--ms-bg-muted);
    padding: 1px 6px;
    border-radius: var(--ms-r-xs);
    color: var(--ms-primary-900);
    letter-spacing: -0.01em;
}
.ms-code-block {
    background: var(--ms-primary-950);
    color: #b9e2a6;
    padding: 1rem 1.25rem;
    border-radius: var(--ms-r);
    font-family: var(--ms-font-mono);
    font-size: 0.86rem;
    line-height: 1.65;
    overflow-x: auto;
    border: 1px solid var(--ms-primary-900);
}

/* ===========================================================
   24.  Reduced motion
   =========================================================== */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===========================================================
   24bis.  Wizard (registrazione multi-step)
   =========================================================== */

.ms-wizard-progress {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.8rem;
}
.ms-wizard-step {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    flex-shrink: 0;
    opacity: 0.5;
    transition: opacity var(--ms-transition);
}
.ms-wizard-step.active, .ms-wizard-step.done { opacity: 1; }
.ms-wizard-bubble {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--ms-bg-muted);
    color: var(--ms-text-muted);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.85rem;
    border: 2px solid transparent;
    transition: all var(--ms-transition);
}
.ms-wizard-step.active .ms-wizard-bubble {
    background: var(--ms-primary-500);
    color: #fff;
    border-color: var(--ms-primary-500);
    box-shadow: 0 0 0 4px rgba(0, 150, 57, 0.16);
}
.ms-wizard-step.done .ms-wizard-bubble {
    background: var(--ms-primary-600);
    color: #fff;
}
.ms-wizard-step.done .ms-wizard-bubble::before {
    content: '\2713';   /* ✓ checkmark */
}
.ms-wizard-step.done .ms-wizard-bubble { font-size: 0; }
.ms-wizard-step.done .ms-wizard-bubble::before { font-size: 0.9rem; }
.ms-wizard-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ms-text-muted);
    letter-spacing: 0.02em;
}
.ms-wizard-step.active .ms-wizard-label { color: var(--ms-text); }
.ms-wizard-line {
    flex: 1;
    height: 2px;
    background: var(--ms-border);
    border-radius: 2px;
    transition: background var(--ms-transition);
}
.ms-wizard-line.done { background: var(--ms-primary-500); }

.ms-wizard-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.5rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--ms-border);
    gap: 1rem;
}

/* Country select con bandiera (sprite flag-icons) */
.ms-country-select {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--ms-surface);
    border: 1px solid var(--ms-border-strong);
    border-radius: var(--ms-r-sm);
    padding: 0 0 0 0.85rem;
    transition: border-color var(--ms-transition-snap), box-shadow var(--ms-transition-snap);
}
.ms-country-select:focus-within {
    border-color: var(--ms-primary-500);
    box-shadow: var(--ms-focus-ring);
}
.ms-country-select .ms-select {
    border: 0;
    background-color: transparent;
    box-shadow: none;
    padding-left: 0;
    flex: 1;
}
.ms-country-select .ms-select:focus { box-shadow: none; }

/* Password strength meter */
/* === Pricing card highlights container (HTML libero TinyMCE/Elementor) === */
.ms-pricing-card .ms-pricing-highlights {
    margin: 0 0 1.4rem;
    flex: 1;
}
.ms-pricing-highlights ul { list-style: none; padding: 0; margin: 0; }
.ms-pricing-highlights li {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.45rem 0;
    border-bottom: 1px dashed var(--ms-border);
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--ms-text);
}
.ms-pricing-highlights li:last-of-type { border-bottom: 0; }
.ms-pricing-highlights li:not([hidden]):first-of-type { padding-top: 0.2rem; }

/* Icone inline (svg + i fa) — wrapper standard Elementor */
.ms-pricing-highlights .elementor-icon-list-icon,
.ms-pricing-highlights li > svg:first-child,
.ms-pricing-highlights li > i:first-child {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ms-pricing-highlights .elementor-icon-list-icon svg,
.ms-pricing-highlights .elementor-icon-list-icon i,
.ms-pricing-highlights li > svg:first-child,
.ms-pricing-highlights li > i:first-child {
    width: 18px; height: 18px;
    font-size: 16px;
}
/* Solo le icone Font Awesome (font webfont) sono nere; gli SVG mantengono il loro colore originale */
.ms-pricing-highlights i[class*="fa-"],
.ms-pricing-highlights i.fa,
.ms-pricing-highlights i.fas,
.ms-pricing-highlights i.far,
.ms-pricing-highlights i.fab,
.ms-pricing-highlights i.fa-solid,
.ms-pricing-highlights i.fa-regular,
.ms-pricing-highlights i.fa-brands {
    color: #000 !important;
}
.ms-pricing-highlights .elementor-icon-list-text {
    flex: 1;
    min-width: 0;
}

/* Tooltip via data-tippy-content (minimal, no library) */
.ms-tooltip {
    position: absolute;
    z-index: 1000;
    background: var(--ms-text);
    color: #fff;
    padding: 0.4rem 0.7rem;
    border-radius: var(--ms-r-xs);
    font-size: 0.82rem;
    line-height: 1.4;
    max-width: 280px;
    box-shadow: var(--ms-shadow-lg);
    pointer-events: none;
    animation: ms-tooltip-in 120ms ease-out;
}
@keyframes ms-tooltip-in {
    from { opacity: 0; transform: translateY(-2px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Pricing card: bottone "Vedi tutto" discreto, link-like (no CTA emphasis) */
.ms-pricing-show-all {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: transparent;
    border: 0;
    padding: 0.3rem 0;
    margin: 0 0 1rem;
    color: var(--ms-text-muted);
    font-size: 0.85rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: color var(--ms-transition-snap);
    align-self: flex-start;
}
.ms-pricing-show-all i { font-size: 0.95rem; transition: transform var(--ms-transition-snap); }
.ms-pricing-show-all:hover {
    color: var(--ms-primary-700);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.ms-pricing-show-all:focus-visible {
    outline: none;
    box-shadow: var(--ms-focus-ring);
    border-radius: var(--ms-r-xs);
}

/* === Cycle toggle (Pagamento Mensile ↔ Pagamento Annuale) === */
.ms-cycle-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    user-select: none;
}
.ms-cycle-label {
    font-weight: 600;
    font-size: 1.8rem;
    letter-spacing: 0.005em;
    transition: opacity var(--ms-transition-snap);
    cursor: pointer;
    padding: 20px;
}
.ms-cycle-label.monthly { color: var(--ms-text); }       /* nero ink */
.ms-cycle-label.yearly  { color: var(--ms-primary-700); } /* verde brand */

/* iOS-style switch */
.ms-cycle-switch {
    position: relative;
    display: inline-flex;
    width: 50px;
    height: 28px;
    cursor: pointer;
    flex-shrink: 0;
}
.ms-cycle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.ms-cycle-slider {
    position: absolute;
    inset: 0;
    background: var(--ms-bg-muted);
    border: 1px solid var(--ms-border-strong);
    border-radius: 999px;
    transition: background var(--ms-transition), border-color var(--ms-transition);
}
.ms-cycle-slider::before {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 22px; height: 22px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
    transition: transform var(--ms-transition);
}
.ms-cycle-switch input:checked + .ms-cycle-slider {
    background: var(--ms-primary-500);
    border-color: var(--ms-primary-600);
}
.ms-cycle-switch input:checked + .ms-cycle-slider::before {
    transform: translateX(22px);
}
.ms-cycle-switch input:focus-visible + .ms-cycle-slider {
    box-shadow: var(--ms-focus-ring);
}

/* Show/hide blocchi prezzo in base al ciclo attivo del wrapper */
.ms-plans-wrapper[data-cycle="monthly"] .ms-pricing-amt[data-cycle="yearly"],
.ms-plans-wrapper[data-cycle="monthly"] .ms-pricing-amt-note[data-cycle="yearly"] {
    display: none !important;
}
.ms-plans-wrapper[data-cycle="yearly"] .ms-pricing-amt[data-cycle="monthly"],
.ms-plans-wrapper[data-cycle="yearly"] .ms-pricing-amt-note[data-cycle="monthly"] {
    display: none !important;
}

/* === Plans view switcher (category page: grid ↔ list) === */
.ms-plans-switcher {
    display: inline-flex;
    background: var(--ms-bg-soft);
    border: 1px solid var(--ms-border);
    border-radius: var(--ms-r-sm);
    padding: 3px;
    gap: 2px;
}
.ms-plans-switcher button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: transparent;
    border: 0;
    padding: 0.5rem 0.9rem;
    border-radius: var(--ms-r-xs);
    color: var(--ms-text-muted);
    cursor: pointer;
    font-weight: 500;
    font-size: 0.85rem;
    font-family: inherit;
    transition: background var(--ms-transition-snap), color var(--ms-transition-snap);
}
.ms-plans-switcher button i { font-size: 1rem; }
.ms-plans-switcher button:hover { color: var(--ms-text); }
.ms-plans-switcher button.is-active {
    background: var(--ms-surface);
    color: var(--ms-primary-700);
    box-shadow: var(--ms-shadow-sm);
}

/* Pricing grid: gap stretto tra le card (sia grid che list). */
.ms-plans-wrapper .ms-grid {
    gap: 0.9rem;
}
/* List view: griglia diventa 1 colonna, ogni card si dispone orizzontalmente */
.ms-plans-wrapper[data-view="list"] .ms-grid {
    grid-template-columns: 1fr;
    gap: 0.9rem;
}
.ms-plans-wrapper[data-view="list"] .ms-pricing-card {
    display: grid;
    grid-template-columns: minmax(220px, 1.3fr) minmax(0, 2fr) minmax(200px, 1fr);
    gap: 1.6rem;
    align-items: center;
    padding: 1.4rem 1.8rem;
    transform: none;
}
.ms-plans-wrapper[data-view="list"] .ms-pricing-card:hover {
    transform: translateY(-2px);
}
.ms-plans-wrapper[data-view="list"] .ms-pricing-card.featured {
    transform: none;
    background: linear-gradient(180deg, #ffffff 0%, var(--ms-primary-25) 100%);
}
.ms-plans-wrapper[data-view="list"] .ms-pricing-card.featured::before {
    top: -10px;
    left: 1.8rem;
    transform: none;
}
.ms-plans-wrapper[data-view="list"] .ms-pricing-name {
    font-size: 1.25rem;
    margin: 0 0 0.2rem;
}
.ms-plans-wrapper[data-view="list"] .ms-pricing-tag {
    margin: 0;
    min-height: 0;
    height: auto;
    font-size: 0.88rem;
}
.ms-plans-wrapper[data-view="list"] .ms-pricing-features {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1rem;
}
.ms-plans-wrapper[data-view="list"] .ms-pricing-features li {
    padding: 0.3rem 0 0.3rem 1.7rem;
    border-bottom: 0;
    font-size: 0.86rem;
}
.ms-plans-wrapper[data-view="list"] .ms-pricing-features li::before {
    top: 0.4rem;
}

/* Modalità lista: limita gli highlights HTML libero (TinyMCE) a 3 bullet visibili
   (stato COLLAPSED). Click su "Vedi tutto" → il box riceve [data-expanded] e i bullet
   nascosti riappaiono. */
.ms-plans-wrapper[data-view="list"] .ms-pricing-highlights:not([data-expanded]) ul > li:nth-child(n+4) {
    display: none !important;
}
.ms-plans-wrapper[data-view="list"] .ms-pricing-highlights[data-expanded] ul > li {
    display: flex !important;
}
.ms-plans-wrapper[data-view="list"] .ms-pricing-card > div:nth-child(3),
.ms-plans-wrapper[data-view="list"] .ms-pricing-card > .ms-pricing-amt {
    /* la colonna prezzo+CTA è il blocco a destra */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    margin: 0;
}
.ms-plans-wrapper[data-view="list"] .ms-pricing-amt {
    margin: 0;
    justify-content: flex-end;
}
/* Prezzo in modalità lista: stesso font-size della modalità griglia per coerenza visiva. */
.ms-plans-wrapper[data-view="list"] .ms-pricing-amt .amt {
    font-size: 2.7rem;
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1;
    color: var(--ms-primary-700);
}
/* "· risparmi …/anno" sempre a capo (sia in grid che in list).
   Il separatore "·" viene nascosto perché in block-mode è ridondante. */
.ms-pricing-savings {
    display: block;
    margin-top: 0.15rem;
}
.ms-pricing-savings-sep {
    display: none;
}
.ms-plans-wrapper[data-view="list"] .ms-pricing-card .ms-btn {
    width: 100%;
    justify-content: center;
}

/* ===========================================================
   Mobile: carousel orizzontale con scroll-snap (no list mode)
   ===========================================================
   In mobile il selettore Griglia/Lista viene nascosto e le pricing card
   si dispongono in orizzontale con swipe gesture (touch native), una card
   per "schermata" con peek della successiva. Snap-x mandatory per allineamento.
*/
@media (max-width: 900px) {
    /* Nascondi lo switcher view (Griglia/Lista): in mobile è sempre carousel. */
    .ms-plans-switcher { display: none !important; }

    /* La grid diventa flex orizzontale con scroll-snap, indipendentemente
       dall'attributo data-view (anche se l'utente aveva salvato "list" in localStorage). */
    .ms-plans-wrapper .ms-grid {
        display: flex !important;
        flex-wrap: nowrap;
        gap: 0.75rem;
        overflow-x: auto;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 2rem;
        scroll-padding-right: 2rem;
        scrollbar-width: thin;
        scrollbar-color: var(--ms-border) transparent;
        padding: 0.5rem 2rem 1.2rem;
        margin: 0 -2rem;       /* full-bleed: compensa il padding 2rem del .ms-container parent */
        /* Niente scroll-behavior:smooth → snap istantaneo "scattoso" invece di transizione morbida.
           Niente -webkit-overflow-scrolling:touch → senza momentum iOS lo snap arriva subito al rilascio. */
        scroll-behavior: auto;
        -webkit-overflow-scrolling: auto;
        /* none = blocca il back-swipe del browser ai bordi del carousel.
           Senza questo, quando l'utente è sulla prima card e fa swipe verso destra
           (o sull'ultima verso sinistra) iOS Safari / Chrome Android interpretano
           il gesto come "torna indietro" e l'utente esce dal sito per errore.
           "contain" non basta: previene solo la propagazione del rimbalzo, non il back-nav. */
        overscroll-behavior-x: none;
        overscroll-behavior-y: auto;
    }
    /* Scrollbar discreta su WebKit */
    .ms-plans-wrapper .ms-grid::-webkit-scrollbar { height: 6px; }
    .ms-plans-wrapper .ms-grid::-webkit-scrollbar-track { background: transparent; }
    .ms-plans-wrapper .ms-grid::-webkit-scrollbar-thumb {
        background: var(--ms-border);
        border-radius: 3px;
    }

    /* Card 90% width → peek ~10% della successiva (suggerisce lo swipe).
       scroll-snap-align: start → la card si aggancia al BORDO SINISTRO del viewport
       (più predicibile di "center"); scroll-snap-stop: always → ogni swipe ferma
       esattamente una card per volta, niente "scivolate" di più card. */
    .ms-plans-wrapper .ms-grid > .ms-pricing-card {
        flex: 0 0 90%;
        min-width: 90%;
        max-width: 90%;
        scroll-snap-align: start;
        scroll-snap-stop: always;
        margin: 0 !important;
        /* Reset del list mode display:grid se presente (data-view in localStorage) */
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: unset !important;
    }

    /* Featured card: rimuovi il translateY -8px che spaccava il snap */
    .ms-plans-wrapper .ms-grid > .ms-pricing-card.featured {
        transform: none;
    }
    /* List-mode features grid reset (era 2 colonne) */
    .ms-plans-wrapper[data-view="list"] .ms-pricing-features {
        grid-template-columns: 1fr;
    }
}

/* Rich content (output da editor TinyMCE admin per category/product/plan/feature) */
.ms-rich-content {
    color: var(--ms-text);
    line-height: 1.7;
    /* Tetto leggibilità: linee max ~70–80 char anche dentro container 1400. Niente centratura:
       il testo resta allineato a sinistra rispetto al genitore (di solito una colonna del grid). */
    max-width: 880px;
}
.ms-rich-content h1, .ms-rich-content h2, .ms-rich-content h3,
.ms-rich-content h4, .ms-rich-content h5, .ms-rich-content h6 {
    font-family: var(--ms-font-display);
    color: var(--ms-text);
    margin: 1.6em 0 0.7em;
    line-height: 1.25;
    letter-spacing: -0.01em;
}
.ms-rich-content h2 { font-size: 1.5rem; }
.ms-rich-content h3 { font-size: 1.25rem; }
.ms-rich-content h4 { font-size: 1.1rem; }
.ms-rich-content p { margin: 0 0 1rem; }
.ms-rich-content a {
    color: var(--ms-primary-700);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1.5px;
}
.ms-rich-content a:hover { color: var(--ms-primary-800); }
.ms-rich-content ul, .ms-rich-content ol {
    margin: 0 0 1rem 0;
    padding-left: 1.4rem;
}
.ms-rich-content li { margin-bottom: 0.4rem; }
.ms-rich-content strong { color: var(--ms-text); font-weight: 600; }
.ms-rich-content em { font-style: italic; }
.ms-rich-content blockquote {
    border-left: 3px solid var(--ms-primary-500);
    background: var(--ms-bg-soft);
    padding: 0.9rem 1.2rem;
    color: var(--ms-text-muted);
    font-style: italic;
    margin: 1.2rem 0;
    border-radius: 0 var(--ms-r-sm) var(--ms-r-sm) 0;
}
.ms-rich-content code {
    background: var(--ms-bg-muted);
    padding: 2px 7px;
    border-radius: var(--ms-r-xs);
    font-family: var(--ms-font-mono);
    font-size: 0.88em;
    color: var(--ms-primary-900);
}
.ms-rich-content pre {
    background: var(--ms-primary-950);
    color: #b9e2a6;
    padding: 1rem 1.2rem;
    border-radius: var(--ms-r);
    overflow-x: auto;
    font-family: var(--ms-font-mono);
    font-size: 0.88em;
    line-height: 1.6;
    margin: 1rem 0;
}
.ms-rich-content pre code { background: transparent; padding: 0; color: inherit; }
.ms-rich-content hr {
    border: 0;
    border-top: 1px solid var(--ms-border);
    margin: 1.6rem 0;
}
.ms-rich-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    font-size: 0.94rem;
}
.ms-rich-content table th, .ms-rich-content table td {
    border: 1px solid var(--ms-border);
    padding: 0.6rem 0.85rem;
    text-align: left;
}
.ms-rich-content table th {
    background: var(--ms-bg-soft);
    font-weight: 600;
    color: var(--ms-text);
}
.ms-rich-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--ms-r-sm);
    margin: 0.8rem 0;
}
.ms-rich-content figure { margin: 1rem 0; }
.ms-rich-content figcaption {
    color: var(--ms-text-subtle);
    font-size: 0.88rem;
    margin-top: 0.4rem;
    text-align: center;
}

/* Details/Summary nativi HTML5 — supportati come fallback */
.ms-rich-content details { margin: 1.6rem 0; background: var(--ms-surface); border: 1px solid var(--ms-border); border-radius: var(--ms-r); overflow: hidden; }
.ms-rich-content summary { cursor: pointer; padding: 1rem 1.4rem; font-weight: 600; background: var(--ms-bg-soft); }
.ms-rich-content summary::-webkit-details-marker { display: none; }

/* === Collapse robust pattern (div-based, niente <details>) ===
   Funziona indipendentemente da TinyMCE/sanitizer. HTML pattern:
   <div class="ms-collapse">
     <div class="ms-collapse-head">Titolo</div>
     <div class="ms-collapse-body">contenuto</div>
   </div>
   Aprire di default: aggiungi class="ms-collapse is-open" */
.ms-rich-content .ms-collapse {
    margin: 1.6rem 0;
    background: var(--ms-surface);
    border: 1px solid var(--ms-border);
    border-radius: var(--ms-r);
    overflow: hidden;
}
.ms-rich-content .ms-collapse-head {
    cursor: pointer;
    padding: 1rem 1.4rem;
    font-weight: 600;
    color: var(--ms-text);
    background: var(--ms-bg-soft);
    transition: background var(--ms-transition-snap);
    user-select: none;
    display: flex;
    align-items: center;
    gap: 0.7rem;
}
.ms-rich-content .ms-collapse-head::before {
    content: '+';
    display: inline-flex;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    background: var(--ms-primary-500);
    color: #fff;
    border-radius: 50%;
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1;
    transition: background var(--ms-transition-snap);
}
.ms-rich-content .ms-collapse-head:hover { background: var(--ms-primary-50); }
.ms-rich-content .ms-collapse.is-open .ms-collapse-head::before { content: '−'; background: var(--ms-primary-700); }
.ms-rich-content .ms-collapse-body {
    display: none;
    padding: 1.2rem 1.4rem;
}
.ms-rich-content .ms-collapse.is-open .ms-collapse-body { display: block; }
.ms-rich-content .ms-collapse-body h3 {
    font-size: 1.05rem;
    margin: 1.2rem 0 0.5rem;
    color: var(--ms-primary-700);
    letter-spacing: 0.01em;
}
.ms-rich-content .ms-collapse-body h3:first-child { margin-top: 0; }

.ms-pw-meter {
    height: 4px;
    background: var(--ms-bg-muted);
    border-radius: var(--ms-r-pill);
    overflow: hidden;
    margin-top: 0.45rem;
    margin-bottom: 0.35rem;
}
.ms-pw-meter-bar {
    height: 100%;
    width: 0;
    background: var(--ms-danger-500);
    border-radius: var(--ms-r-pill);
    transition: width 200ms cubic-bezier(0.16, 1, 0.3, 1),
                background-color 200ms ease;
}
.ms-pw-meter.score-1 .ms-pw-meter-bar { width: 20%;  background: var(--ms-danger-500); }
.ms-pw-meter.score-2 .ms-pw-meter-bar { width: 40%;  background: #f97316; }      /* orange */
.ms-pw-meter.score-3 .ms-pw-meter-bar { width: 60%;  background: var(--ms-warn-500); }
.ms-pw-meter.score-4 .ms-pw-meter-bar { width: 80%;  background: var(--ms-primary-400); }
.ms-pw-meter.score-5 .ms-pw-meter-bar { width: 100%; background: var(--ms-primary-600); }

.ms-pw-meter-label {
    font-size: 0.82rem;
    color: var(--ms-text-subtle);
    margin-bottom: 0.2rem;
    transition: color 200ms ease;
    min-height: 1.2em;
}
.ms-pw-meter-label.score-1 { color: var(--ms-danger-700); }
.ms-pw-meter-label.score-2 { color: #c2410c; }                /* orange dark */
.ms-pw-meter-label.score-3 { color: var(--ms-warn-700); }
.ms-pw-meter-label.score-4 { color: var(--ms-primary-700); }
.ms-pw-meter-label.score-5 { color: var(--ms-primary-700); }

/* Confirm password match indicator */
.ms-pw-match {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 500;
    margin-top: 0.45rem;
    line-height: 1.3;
}
.ms-pw-match i { font-size: 1rem; flex-shrink: 0; }
.ms-pw-match.ok  { color: var(--ms-primary-700); }
.ms-pw-match.err { color: var(--ms-danger-700); }

/* Input con spinner inline (CAP autocomplete) */
.ms-input-wrap { position: relative; }
.ms-input-spinner {
    position: absolute;
    right: 10px; top: 50%; transform: translateY(-50%);
    color: var(--ms-primary-600);
    pointer-events: none;
    animation: ms-spin 0.9s linear infinite;
}
@keyframes ms-spin {
    from { transform: translateY(-50%) rotate(0deg); }
    to   { transform: translateY(-50%) rotate(360deg); }
}

/* Bandiera principale di fianco al select (img reale da flagcdn) */
.ms-flag-img {
    flex-shrink: 0;
    display: block;
    width: 26px;
    height: 19px;
    border-radius: 3px;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.10);
}

/* Bandierine inline più piccole (per liste, badge, ecc.) */
.ms-flag-img-sm {
    display: inline-block;
    width: 18px;
    height: 13px;
    border-radius: 2px;
    object-fit: cover;
    vertical-align: -2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

/* ===========================================================
   24-bis.  CMS Hub (categorie CMS dentro hosting)
   =========================================================== */

/* Sezione "tight": padding ridotto rispetto a ms-section */
.ms-section.ms-section-tight {
    padding-top: 1.8rem;
    padding-bottom: 1.8rem;
}
/* Sezione "alt": background leggermente diverso per spezzare il flusso */
.ms-section.ms-section-alt {
    background: var(--ms-bg-soft, #f7f9f5);
}

/* Hero variante CMS — layout orizzontale: logo a sinistra, testo a destra.
   Il logo è ricolorato bianco via filter brightness(0) invert(1). */
.ms-hero.ms-hero-cms .ms-hero-cms-layout {
    display: flex;
    align-items: center;
    gap: 2.2rem;
}
.ms-hero.ms-hero-cms .ms-hero-cms-logo {
    flex-shrink: 0;
    display: block;
    height: 150px;
    max-width: 260px;
    object-fit: contain;
    margin: 0;
    filter: brightness(0) invert(1) drop-shadow(0 2px 8px rgba(0,0,0,0.35));
}
.ms-hero.ms-hero-cms .ms-hero-cms-text { flex: 1; min-width: 0; }
.ms-hero.ms-hero-cms .ms-hero-cms-breadcrumb {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0.5rem;
}
.ms-hero.ms-hero-cms .ms-hero-cms-breadcrumb a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
}
.ms-hero.ms-hero-cms .ms-hero-cms-breadcrumb a:hover { color: #fff; }
.ms-hero.ms-hero-cms .ms-hero-cms-text h1 { margin-top: 0; }

@media (max-width: 760px) {
    .ms-hero.ms-hero-cms .ms-hero-cms-layout {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.1rem;
    }
    .ms-hero.ms-hero-cms .ms-hero-cms-logo { height: 56px; }
}

/* Grid hub CMS */
.ms-cms-hub {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.3rem;
    margin-top: 1.5rem;
}

/* Card singola CMS — flat, hover sollevata */
.ms-cms-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--ms-border);
    border-radius: var(--ms-r-md, 12px);
    padding: 1.4rem 1.3rem;
    text-decoration: none;
    color: var(--ms-text);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
    min-height: 220px;
}
.ms-cms-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px -12px rgba(0, 100, 0, 0.18);
    border-color: var(--ms-primary-400);
    color: var(--ms-text);
}

.ms-cms-card-logo {
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 0.9rem;
}
.ms-cms-card-logo img {
    max-height: 48px;
    max-width: 140px;
    object-fit: contain;
}
.ms-cms-card-logo i {
    font-size: 36px;
    color: var(--ms-primary-600);
}

.ms-cms-card-body { flex: 1; }
.ms-cms-card-title {
    font-family: 'Roboto Slab', Georgia, serif;
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 0.4rem;
    color: var(--ms-text);
}
.ms-cms-card-subtitle {
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--ms-text-muted);
    margin: 0 0 1rem;
}

.ms-cms-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.8rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--ms-border);
    font-size: 0.88rem;
}
.ms-cms-card-count {
    color: var(--ms-text-subtle);
    font-weight: 500;
}
.ms-cms-card-cta {
    color: var(--ms-primary-700);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: gap 150ms ease;
}
.ms-cms-card:hover .ms-cms-card-cta { gap: 0.5rem; }

/* Pagina CMS — intro/body rich content margins */
.ms-cms-intro, .ms-cms-body { max-width: 880px; margin: 0 auto; }

/* ===========================================================
   CMS feature grid (8 card "perché Managed Server" sotto pricing)
   =========================================================== */
.ms-cms-features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem;
    margin-top: 2rem;
}
.ms-cms-feature {
    background: var(--ms-surface, #fff);
    border: 1px solid var(--ms-border);
    border-radius: var(--ms-r-md, 14px);
    padding: 1.5rem 1.4rem;
    text-align: left;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
    display: flex;
    flex-direction: column;
}
.ms-cms-feature:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px -14px rgba(0, 100, 0, 0.18);
    border-color: var(--ms-primary-400);
}
.ms-cms-feature-ico {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ms-primary-50);
    color: var(--ms-primary-600);
    font-size: 1.3rem;
    margin-bottom: 1rem;
    flex-shrink: 0;
}
.ms-cms-feature-title {
    font-family: var(--ms-font-display, 'Roboto Slab', serif);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 0.5rem;
    color: var(--ms-text);
}
.ms-cms-feature-desc {
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--ms-text-muted);
    margin: 0;
    flex: 1;
}

@media (max-width: 1024px) {
    .ms-cms-features-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
    .ms-cms-features-grid { grid-template-columns: 1fr; }
}

/* Immagine featured della pagina CMS (Hosting-WordPress.jpg, ecc.).
   Bordo verde brand coerente con le pricing card featured. */
.ms-cms-feature-img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--ms-primary-500);
    border-radius: var(--ms-r-lg, 18px);
    box-shadow: 0 8px 32px -12px rgba(0, 0, 0, 0.18);
    margin-bottom: 2rem;   /* spazio prima del toggle "Pagamento mensile/annuale" */
}

/* ===========================================================
   25.  Print (per fatture / preventivi)
   =========================================================== */

@media print {
    .ms-header, .ms-footer, .ms-page-header, .ms-nav, .ms-topbar,
    .ms-mobile-nav, .ms-mobile-toggle, .ms-btn { display: none !important; }
    body.ms-site { background: #fff; color: #000; }
    .ms-card, .ms-table { border: 1px solid #ccc; box-shadow: none; break-inside: avoid; }
    a { color: inherit; text-decoration: underline; }
}

/* ======================== User dropdown (topbar) ======================== */

.ms-user-menu { position: relative; }

.ms-user-trigger {
    display: inline-flex; align-items: center; gap: 0.55rem;
    height: 40px; padding: 0 0.7rem 0 0.35rem;
    min-width: 180px; max-width: 220px;
    background: var(--ms-surface);
    border: 1px solid var(--ms-border);
    border-radius: 999px;
    color: var(--ms-text);
    font-weight: 600; font-size: 0.92rem;
    cursor: pointer;
    transition: background var(--ms-transition), border-color var(--ms-transition);
}
.ms-user-trigger:hover,
.ms-user-trigger[aria-expanded="true"] {
    background: var(--ms-primary-25);
    border-color: var(--ms-primary-200);
}
.ms-user-trigger-avatar {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--ms-gradient-brand); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.85rem; flex-shrink: 0;
    position: relative; overflow: hidden;
}
.ms-user-dropdown-avatar { position: relative; overflow: hidden; }
/* Gravatar overlay: copre le iniziali quando carica. Se onerror → this.remove(),
   svela le iniziali sottostanti senza alcuna manipolazione DOM nel parent. */
.ms-user-trigger-avatar > img,
.ms-user-dropdown-avatar > img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    border-radius: inherit;
}
.ms-user-trigger-name {
    flex: 1; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-align: left;
}
.ms-user-trigger-caret {
    color: var(--ms-text-subtle);
    font-size: 1rem; flex-shrink: 0;
    transition: transform var(--ms-transition);
}
.ms-user-trigger[aria-expanded="true"] .ms-user-trigger-caret {
    transform: rotate(180deg);
}

/* Dropdown menu */
.ms-user-dropdown {
    min-width: 300px;
    padding: 0;
    border: 1px solid var(--ms-border);
    border-radius: var(--ms-r-lg);
    box-shadow: var(--ms-shadow-xl);
    overflow: hidden;
}

/* Header card */
.ms-user-dropdown-head {
    display: flex; align-items: center; gap: 0.85rem;
    padding: 1rem 1.1rem;
    background: linear-gradient(135deg, var(--ms-primary-25) 0%, #fff 100%);
    border-bottom: 1px solid var(--ms-border);
}
.ms-user-dropdown-avatar {
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--ms-gradient-brand); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1.1rem;
    flex-shrink: 0;
}
.ms-user-dropdown-head strong {
    display: block; font-size: 0.98rem; color: var(--ms-text);
    line-height: 1.2; word-break: break-word;
}
.ms-user-dropdown-email {
    font-size: 0.8rem; color: var(--ms-text-muted);
    margin-top: 0.15rem; word-break: break-all;
}
.ms-user-dropdown-code {
    font-size: 0.72rem; font-weight: 600;
    color: var(--ms-primary-700);
    text-transform: uppercase; letter-spacing: 0.04em;
    margin-top: 0.25rem;
}

/* Section titles */
.ms-user-dropdown-section-title {
    padding: 0.7rem 1.1rem 0.3rem;
    font-size: 0.68rem; font-weight: 700;
    color: var(--ms-text-subtle);
    text-transform: uppercase; letter-spacing: 0.08em;
}

/* Override dropdown-item per padding consistente */
.ms-user-dropdown .dropdown-item {
    padding: 0.55rem 1.1rem;
    color: var(--ms-text);
    font-size: 0.93rem;
    display: flex; align-items: center;
}
.ms-user-dropdown .dropdown-item:hover {
    background: var(--ms-primary-25);
    color: var(--ms-primary-800);
}
.ms-user-dropdown .dropdown-item i { font-size: 1.05rem; color: var(--ms-text-subtle); }
.ms-user-dropdown .dropdown-item:hover i { color: var(--ms-primary-700); }
.ms-user-dropdown .dropdown-divider {
    margin: 0.4rem 0; border-color: var(--ms-border);
}

/* Logout: enfasi rossa */
.ms-user-dropdown-logout {
    color: #c62828 !important;
    font-weight: 600;
    background: transparent;
    border: 0;
    width: 100%;
    text-align: left;
}
.ms-user-dropdown-logout:hover {
    background: #ffe1e1 !important;
    color: #8a0000 !important;
}
.ms-user-dropdown-logout i { color: #c62828 !important; }
.ms-user-dropdown-logout:hover i { color: #8a0000 !important; }

/* Mobile: trigger compatto (solo avatar visibile) */
@media (max-width: 720px) {
    .ms-user-trigger {
        min-width: 0; max-width: none;
        padding: 0; width: 40px;
        border-radius: 50%;
    }
    .ms-user-trigger-name,
    .ms-user-trigger-caret { display: none; }
    .ms-user-trigger-avatar { width: 38px; height: 38px; font-size: 0.95rem; }
    .ms-user-dropdown { min-width: 260px; max-width: 95vw; }
}

/* ======================== Customer Panel (.ms-cp) ========================
 * Override Tabler/Bootstrap nell'area cliente per layout "comfortable":
 * - body 16px, line-height 1.55
 * - input 48px, font 16px (anti-zoom iOS)
 * - label 15px semibold
 * - card padding 28-32px
 * - touch target ≥44px ovunque
 * - focus outline 3px brand (WCAG 2.4.7)
 * Scoped a body.ms-cp: zero impatto su shop pubblico, auth, admin.
 */

body.ms-cp { font-size: 16px; line-height: 1.55; color: var(--ms-text); }

/* Page headers */
.ms-cp .page-header { padding-bottom: 1.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--ms-border); }
.ms-cp .page-pretitle {
    font-size: 0.78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--ms-text-subtle); margin-bottom: 0.3rem;
}
.ms-cp .page-title { font-size: 1.75rem; font-weight: 700; color: var(--ms-text); margin: 0; }

/* Headings within content */
.ms-cp h1, .ms-cp .h1 { font-size: 1.75rem; font-weight: 700; }
.ms-cp h2, .ms-cp .h2 { font-size: 1.45rem; font-weight: 700; margin-top: 1.5rem; }
.ms-cp h3, .ms-cp .h3 { font-size: 1.2rem; font-weight: 700; }
.ms-cp h4, .ms-cp .h4 { font-size: 1.05rem; font-weight: 700; }
.ms-cp .subheader {
    font-size: 1.05rem; font-weight: 700; color: var(--ms-text);
    text-transform: none; letter-spacing: 0;
}

/* Card */
.ms-cp .card {
    border: 1px solid var(--ms-border);
    border-radius: var(--ms-r-lg);
    box-shadow: none;
    background: var(--ms-surface);
    margin-bottom: 1.5rem;
}
.ms-cp .card-header {
    padding: 1.2rem 1.75rem 0.6rem;
    background: transparent; border-bottom: 0;
}
.ms-cp .card-header .card-title { font-size: 1.15rem; font-weight: 700; margin: 0; }
.ms-cp .card-body { padding: 1.5rem 1.75rem 1.75rem; }

/* Form controls */
.ms-cp .form-label,
.ms-cp .form-check-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ms-text);
    margin-bottom: 0.4rem;
}
.ms-cp .form-label.required::after {
    content: ' *';
    color: var(--ms-primary-700);
    font-weight: 700;
}
.ms-cp .form-control,
.ms-cp .form-select {
    min-height: 48px;
    padding: 0.65rem 0.9rem;
    font-size: 16px;
    line-height: 1.4;
    border: 1px solid var(--ms-border);
    border-radius: var(--ms-r-md);
    background: var(--ms-surface);
    color: var(--ms-text);
    transition: border-color var(--ms-transition), box-shadow var(--ms-transition);
}
.ms-cp .form-control:focus,
.ms-cp .form-select:focus {
    border-color: var(--ms-primary-500);
    box-shadow: 0 0 0 3px rgba(0, 150, 57, 0.18);
    outline: none;
}
.ms-cp .form-control:disabled,
.ms-cp .form-control[disabled] {
    background: var(--ms-bg-muted);
    opacity: 0.75;
    cursor: not-allowed;
}
.ms-cp .form-hint,
.ms-cp .form-text {
    font-size: 0.86rem;
    color: var(--ms-text-muted);
    margin-top: 0.4rem;
    line-height: 1.45;
}

/* Checkbox / radio: touch target ≥44px */
.ms-cp .form-check {
    display: flex; align-items: center; gap: 0.55rem;
    min-height: 44px; padding: 0;
}
.ms-cp .form-check-input {
    width: 20px; height: 20px;
    margin: 0; cursor: pointer; flex-shrink: 0;
}
.ms-cp .form-check-input:checked {
    background-color: var(--ms-primary-700);
    border-color: var(--ms-primary-700);
}
.ms-cp .form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(0, 150, 57, 0.18);
    border-color: var(--ms-primary-500);
}
.ms-cp .form-check-label { font-weight: 500; margin: 0; cursor: pointer; }

/* Row gap più ariosa */
.ms-cp .row.g-3 { --bs-gutter-y: 1.3rem; }

/* Buttons */
.ms-cp .btn {
    min-height: 44px;
    padding: 0.55rem 1.25rem;
    font-size: 0.98rem;
    font-weight: 600;
    border-radius: var(--ms-r-md);
    display: inline-flex; align-items: center; gap: 0.4rem;
    transition: background var(--ms-transition), transform var(--ms-transition);
}
.ms-cp .btn-primary,
.ms-cp .btn.btn-primary {
    background: var(--ms-gradient-brand) !important;
    border: 0 !important;
    color: #fff !important;
    min-height: 52px;
    padding: 0.7rem 1.6rem;
    font-size: 1rem;
    box-shadow: var(--ms-shadow-brand-sm);
}
.ms-cp .btn-primary:hover,
.ms-cp .btn.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: var(--ms-shadow-brand-lg);
}
.ms-cp .btn-outline-secondary {
    background: transparent;
    border: 1px solid var(--ms-border) !important;
    color: var(--ms-text) !important;
}
.ms-cp .btn-outline-secondary:hover {
    background: var(--ms-bg-muted);
    border-color: var(--ms-text-subtle) !important;
}
.ms-cp .btn-link {
    color: var(--ms-primary-700) !important;
    text-decoration: none;
}
.ms-cp .btn-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.ms-cp .btn:focus-visible {
    outline: 3px solid rgba(0, 150, 57, 0.4);
    outline-offset: 2px;
}

/* Alert (errors) */
.ms-cp .alert {
    padding: 1rem 1.25rem;
    border-radius: var(--ms-r-md);
    font-size: 0.95rem;
    border-width: 1px;
}
.ms-cp .alert-danger {
    background: #fff1f1; color: #8a0000; border-color: #f5c2c2;
}

/* Tables (orders/billing/services lists) */
.ms-cp .table,
.ms-cp .ms-table {
    font-size: 0.95rem;
    border-collapse: separate; border-spacing: 0;
}
.ms-cp .table th,
.ms-cp .ms-table th {
    font-size: 0.78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--ms-text-subtle);
    padding: 0.85rem 1rem;
    border-bottom: 2px solid var(--ms-border);
    background: var(--ms-bg-muted);
}
.ms-cp .table td,
.ms-cp .ms-table td {
    padding: 1rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--ms-border);
}

/* Hr divider */
.ms-cp hr { border-top: 1px solid var(--ms-border); opacity: 1; margin: 1.5rem 0; }

/* Mobile: stack columns + button full-width */
@media (max-width: 720px) {
    .ms-cp .card-body { padding: 1.2rem 1.1rem; }
    .ms-cp .card-header { padding: 1rem 1.1rem 0.5rem; }
    .ms-cp .page-title { font-size: 1.45rem; }
    .ms-cp .btn-primary,
    .ms-cp .btn.btn-primary { width: 100%; justify-content: center; }
}

/* ======================== Checkout Wizard ======================== */

.ms-wiz-container { max-width: 1100px; }

.ms-wiz-stepper {
    display: flex; align-items: center; gap: 0.75rem;
    margin: 0 0 2.5rem; padding: 1rem 0;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.ms-wiz-step {
    display: inline-flex; align-items: center; gap: 0.55rem;
    color: var(--ms-text-subtle); font-weight: 600;
    white-space: nowrap;
}
.ms-wiz-step.is-active   { color: var(--ms-primary-700); }
.ms-wiz-step.is-done     { color: var(--ms-text); }
.ms-wiz-step-num {
    width: 28px; height: 28px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--ms-border); color: var(--ms-text);
    font-size: 0.85rem;
}
.ms-wiz-step.is-active .ms-wiz-step-num {
    background: var(--ms-primary-700); color: #fff;
}
.ms-wiz-step.is-done .ms-wiz-step-num {
    background: var(--ms-primary-500); color: #fff;
}
.ms-wiz-step-sep {
    width: 30px; height: 1px; background: var(--ms-border);
    flex-shrink: 0;
}
.ms-wiz-head { margin: 0 0 2rem; }
.ms-wiz-head h1 {
    font-family: var(--ms-font-display);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    margin: 0.4rem 0 0.5rem;
}
.ms-wiz-head p { color: var(--ms-text-muted); margin: 0; }
.ms-wiz-actions {
    display: flex; gap: 0.75rem; justify-content: space-between;
    align-items: center; margin-top: 2rem; flex-wrap: wrap;
}

/* Hub — radio-card grid */
.ms-wiz-hub-grid {
    display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin-bottom: 1.5rem;
}
.ms-wiz-hub-card { cursor: pointer; }
.ms-wiz-hub-card input[type="radio"] { position: absolute; opacity: 0; }
.ms-wiz-hub-card-inner {
    border: 2px solid var(--ms-border); border-radius: var(--ms-r-lg);
    padding: 1.5rem 1.2rem; background: var(--ms-surface);
    transition: border-color var(--ms-transition), box-shadow var(--ms-transition);
    text-align: center; height: 100%;
}
.ms-wiz-hub-card input:checked + .ms-wiz-hub-card-inner,
.ms-wiz-hub-card:hover .ms-wiz-hub-card-inner {
    border-color: var(--ms-primary-500);
    box-shadow: var(--ms-shadow-brand-sm);
}
.ms-wiz-hub-ico { font-size: 2rem; color: var(--ms-primary-700); margin-bottom: 0.6rem; }
.ms-wiz-hub-card h3 { font-size: 1.05rem; margin: 0 0 0.4rem; }
.ms-wiz-hub-card p  { font-size: 0.9rem; color: var(--ms-text-muted); margin: 0; }

/* Domain search */
.ms-input-group {
    display: flex; align-items: center; gap: 0.5rem;
    border: 1px solid var(--ms-border); border-radius: var(--ms-r-md);
    background: var(--ms-surface); padding: 0.3rem;
}
.ms-input-group input[type="text"] {
    flex: 1; border: 0; padding: 0.6rem 0.8rem; font-size: 1rem; background: transparent;
}
.ms-input-group input[type="text"]:focus { outline: none; }
.ms-input-group select { border: 0; padding: 0.6rem; background: transparent; }
.ms-input-suffix { color: var(--ms-text-subtle); padding: 0 0.2rem; }
.ms-wiz-tld-pick {
    border: 0; padding: 0; margin: 1rem 0;
    display: flex; gap: 1rem; flex-wrap: wrap;
}
.ms-wiz-tld-pick legend { font-weight: 600; margin-right: 0.5rem; }
.ms-wiz-results { margin-top: 1.5rem; }
.ms-wiz-loading { color: var(--ms-text-muted); }
.ms-wiz-error { color: var(--ms-danger-700); }
.ms-wiz-results-list { list-style: none; padding: 0; margin: 0; }
.ms-wiz-results-list li {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.75rem 1rem; border: 1px solid var(--ms-border);
    border-radius: var(--ms-r-md); margin-bottom: 0.5rem;
}
.ms-wiz-fqdn { font-family: var(--ms-font-mono); font-weight: 600; flex: 1; }
.ms-wiz-price { color: var(--ms-text-subtle); font-size: 0.9rem; }
.ms-wiz-years { display: flex; gap: 1rem; margin: 1.5rem 0; flex-wrap: wrap; }

/* Callout */
.ms-callout {
    border-left: 3px solid var(--ms-primary-500);
    background: var(--ms-primary-25); padding: 0.85rem 1rem;
    border-radius: 4px; margin: 1.2rem 0;
}
.ms-callout-info { color: var(--ms-text); }

/* Addons */
.ms-wiz-addons-list { list-style: none; padding: 0; margin: 0; }
.ms-wiz-addon-item {
    display: flex; align-items: center; gap: 1rem;
    border: 1px solid var(--ms-border); border-radius: var(--ms-r-md);
    padding: 1rem; margin-bottom: 0.6rem;
}
.ms-wiz-addon-pick { display: flex; gap: 0.7rem; flex: 1; cursor: pointer; }
.ms-wiz-addon-pick strong { display: block; }
.ms-wiz-addon-pick p { font-size: 0.88rem; color: var(--ms-text-muted); margin: 0.2rem 0 0.3rem; }
.ms-wiz-addon-price { font-weight: 600; color: var(--ms-primary-700); font-size: 0.92rem; }
.ms-wiz-addon-qty { width: 70px; padding: 0.4rem; border: 1px solid var(--ms-border); border-radius: 4px; }

/* Review */
.ms-wiz-summary {
    border: 1px solid var(--ms-border); border-radius: var(--ms-r-lg);
    padding: 1.5rem; background: var(--ms-surface);
}
.ms-wiz-summary-list { list-style: none; padding: 0; margin: 0 0 1rem; }
.ms-wiz-summary-list li {
    display: flex; justify-content: space-between;
    padding: 0.55rem 0; border-bottom: 1px solid var(--ms-border);
}
.ms-wiz-summary-list li:last-child { border-bottom: 0; }
.ms-wiz-summary-desc { display: flex; flex-direction: column; gap: 0.15rem; }
.ms-wiz-summary-cycle {
    font-size: 0.78rem; color: var(--ms-text-subtle);
    text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600;
}
.ms-wiz-summary-totals { padding-top: 0.75rem; border-top: 1px solid var(--ms-border); }
.ms-wiz-summary-totals > div {
    display: flex; justify-content: space-between;
    padding: 0.3rem 0; color: var(--ms-text-muted);
}
.ms-wiz-summary-total {
    font-weight: 700; font-size: 1.15rem; color: var(--ms-text);
    padding-top: 0.5rem; border-top: 1px solid var(--ms-border); margin-top: 0.5rem;
}

/* Pricing actions (CTA card) */
.ms-pricing-actions {
    display: flex; flex-direction: column; gap: 0.5rem; margin-top: auto;
}
.ms-pricing-cta-form { margin: 0; padding: 0; display: contents; }
.ms-btn-link {
    background: transparent; color: var(--ms-primary-700);
    font-weight: 600; padding: 0.55rem 0.8rem; border: 0;
    text-decoration: none; transition: color var(--ms-transition);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 0.95rem;
}
.ms-btn-link:hover {
    color: var(--ms-primary-800);
    text-decoration: underline; text-underline-offset: 3px;
}
.ms-plans-wrapper[data-view="list"] .ms-pricing-actions {
    flex-direction: row; gap: 0.75rem; margin-top: 0; align-items: center;
}
.ms-plans-wrapper[data-view="list"] .ms-pricing-actions > .ms-btn,
.ms-plans-wrapper[data-view="list"] .ms-pricing-actions > form > .ms-btn {
    width: auto !important;
}

/* Badge */
.ms-badge { display: inline-block; padding: 2px 8px; border-radius: var(--ms-r-pill); font-size: 0.78rem; font-weight: 600; }
.ms-badge-success { background: var(--ms-primary-25); color: var(--ms-primary-700); }
.ms-badge-warn    { background: #fff4cc; color: #8a6d00; }
.ms-badge-danger  { background: #ffe1e1; color: #8a0000; }

/* ======================== Helpdesk ======================== */
.ms-hd-status-badge { display:inline-block; padding:2px 10px; border-radius:99px;
    font-size:0.74rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:#fff; }
.ms-hd-priority-pill { display:inline-block; padding:1px 8px; border-radius:6px;
    font-size:0.72rem; font-weight:700; text-transform:uppercase; }
.ms-hd-priority-low    { background:#e9ecef; color:#666; }
.ms-hd-priority-normal { background:#cfe2ff; color:#0a58ca; }
.ms-hd-priority-high   { background:#ffd99c; color:#7a5200; }
.ms-hd-priority-urgent { background:#dc3545; color:#fff; }
.ms-hd-internal-note   { background:#fffaeb; border:1px dashed #e0a800;
    border-radius:8px; padding:0.85rem 1rem; }
.ms-hd-internal-note::before { content:"🔒 Nota interna"; display:block;
    font-size:0.78rem; font-weight:700; color:#7a5b00; margin-bottom:0.3rem; }
.ms-hd-sla-breach { color:#c62828; font-weight:600; }
.ms-hd-sla-ok     { color:var(--ms-primary-700); }
.ms-hd-stars { display:inline-flex; gap:0.3rem; }
.ms-hd-star  { font-size:2rem; cursor:pointer; color:#e0e0e0; transition:color 0.1s; }
.ms-hd-star.is-on, .ms-hd-stars:hover .ms-hd-star { color:#ffc107; }
.ms-hd-star:hover ~ .ms-hd-star { color:#e0e0e0; }

/* Tabler icons: font self-hosted in /vendor/tabler-icons/fonts/.
 * Non serve più override @font-face — il CSS vendor referenzia il font
 * con path relativo che risolve correttamente. */