/* MVO service pages: the shared page rhythm, not the client or admin shell.
   Product variants own their mechanism; catalog controls keep commercial-system.css. */
.mvo-addon-site.mvo-shell-next #main-content {
    --service-bg: var(--mvo-shell-bg);
    --service-surface: var(--mvo-shell-surface);
    --service-ink: var(--mvo-shell-ink);
    --service-muted: var(--mvo-shell-muted);
    --service-line: var(--mvo-shell-line);
    --service-accent: var(--mvo-shell-focus);
}
html:root body.mvo-landing-next #main-content .service-hero {
    position: relative;
    isolation: isolate;
    width: calc(100% - 64px);
    max-width: 1280px;
    margin: 32px auto 48px;
    padding: 0;
    border: 0;
    border-radius: 16px;
    background: var(--service-surface) !important;
    color: var(--service-ink);
}
html:root body.mvo-landing-next #main-content .service-hero-layout {
    display: grid;
    grid-template-columns: minmax(0,1.05fr) minmax(0,1fr);
    gap: 48px;
    align-items: center;
    width: 100%;
    max-width: none;
    min-height: 540px;
    margin: 0;
    padding: 56px;
}
html:root body.mvo-landing-next #main-content :is(.service-hero-copy,.service-hero-visual) { min-width: 0; }
html:root body.mvo-landing-next #main-content .service-hero h1 {
    max-width: 100%;
    margin: 0;
    font-size: clamp(38px,4.3vw,62px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.035em;
    text-wrap: balance;
    color: var(--service-ink);
}
html:root body.mvo-landing-next #main-content .service-hero h1 :is(span,em) { color: var(--service-accent); font-style: normal; }
/* Product wordmarks share the existing MVO font, with readable product names.
   Explicit children prevent legacy headline span styles from splitting the logo. */
html:root body.mvo-landing-next #main-content .service-hero .service-product-brand {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 .28em;
    max-width: 100%;
    color: var(--service-ink);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -.03em;
    vertical-align: baseline;
}
html:root body.mvo-landing-next #main-content .service-hero .service-product-brand > .service-product-logo {
    display: inline-block;
    margin: 0;
    color: var(--service-ink);
    font-family: 'MVO', sans-serif;
    font-size: 1.333333em;
    font-weight: 400;
    font-style: normal;
    font-synthesis: none;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
}
html:root body.mvo-landing-next #main-content .service-hero .service-product-brand > .service-product-name {
    display: inline-block;
    margin: 0;
    color: var(--service-accent);
    font: inherit;
    white-space: nowrap;
}
html:root body.mvo-landing-next #main-content .service-hero .service-product-brand.service-product-brand--display { font-size: 36px; }
html:root body.mvo-landing-next #main-content .service-hero .service-product-brand.service-product-brand--compact { font-size: clamp(12px, 3.85vw, 15px); flex-wrap: nowrap; }
html:root body.mvo-landing-next #main-content .service-hero .service-hero-copy h1 > .service-product-brand { display: inline-flex; }
@media (max-width: 480px) {
    html:root body.mvo-landing-next #main-content .service-hero .service-product-brand.service-product-brand--reverse { font-size: clamp(28px, 9vw, 36px); flex-wrap: nowrap; }
}
html:root body.mvo-landing-next #main-content .service-hero-copy > p { max-width: 54ch; margin: 24px 0; color: var(--service-muted); font-size: 16px; line-height: 1.75; }

/* Hosting: infrastructure supports the offer; no cutout person or fake panel.
   This photographic stage stays dark in both themes, like the server heroes. */
html:root body.mvo-landing-next #main-content .hosting27_hero.service-hero { background: #051526 !important; overflow: hidden; }
html:root body.mvo-landing-next #main-content .hosting27_shell.service-hero-layout { position: relative; display: block; min-height: 600px; padding: 56px; }
html:root body.mvo-landing-next #main-content .hosting27_copy.service-hero-copy { position: relative; z-index: 2; max-width: 560px; padding: 0; }
html:root body.mvo-landing-next #main-content .hosting27_copy h1 { color: #f5f8fc; font-size: clamp(40px,4.3vw,64px); max-width: 14ch; line-height: 1.04; }
html:root body.mvo-landing-next #main-content .hosting27_copy h1 em { color: #80b9ff; }
html:root body.mvo-landing-next #main-content .hosting27_copy .hosting27_lead { max-width: 49ch; color: #c2d2e5; }
html:root body.mvo-landing-next #main-content .hosting27_benefits { display: grid; gap: 10px; margin: 24px 0; padding: 0; }
html:root body.mvo-landing-next #main-content .hosting27_benefits li { color: #f5f8fc; font-size: 13px; font-weight: 600; }
html:root body.mvo-landing-next #main-content .hosting27_benefits i { width: 18px; height: 18px; padding: 0; background: transparent; color: #80b9ff; }
html:root body.mvo-landing-next #main-content .hosting27_offer { gap: 24px; margin: 28px 0 0; }
html:root body.mvo-landing-next #main-content .hosting27_offer p { color: #f5f8fc; }
html:root body.mvo-landing-next #main-content .hosting27_offer p :is(span,strong,small) { color: inherit; }
html:root body.mvo-landing-next #main-content .hosting27_copy .hosting27_reassurance { margin: 18px 0 0; color: #c2d2e5; font-size: 11px; }
html:root body.mvo-landing-next #main-content .hosting27_visual.service-hero-visual {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    min-height: 0;
    margin: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    pointer-events: none;
}
html:root body.mvo-landing-next #main-content .hosting27_infrastructure { display: block; width: 100%; height: 100%; }
html:root body.mvo-landing-next #main-content .hosting27_infrastructure img { display: block; width: 100%; max-width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* Decision guides: substantive text, comparisons and real sequences. */
.mvo-addon-site.mvo-shell-next #main-content .service-detail { padding: 80px 0; background: var(--service-bg); color: var(--service-ink); }
.mvo-addon-site.mvo-shell-next #main-content .service-detail--tint { background: var(--service-surface); }
.mvo-addon-site.mvo-shell-next #main-content .mc-page > .service-detail { position: relative; z-index: 2; }
.mvo-addon-site.mvo-shell-next #main-content .service-detail-shell { width: calc(100% - 64px); max-width: 1280px; margin-inline: auto; }
.mvo-addon-site.mvo-shell-next #main-content .service-detail-heading { max-width: 880px; margin-bottom: 40px; }
.mvo-addon-site.mvo-shell-next #main-content .service-detail-heading h2 { margin: 0; color: var(--service-ink); font-size: clamp(30px,3.3vw,46px); font-weight: 800; line-height: 1.14; letter-spacing: -.03em; text-wrap: balance; }
.mvo-addon-site.mvo-shell-next #main-content .service-detail-heading p { max-width: 65ch; margin: 20px 0 0; color: var(--service-muted); font-size: 16px; line-height: 1.75; }
.mvo-addon-site.mvo-shell-next #main-content :is(.service-detail-columns,.service-detail-layout) { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 40px 56px; }
.mvo-addon-site.mvo-shell-next #main-content .service-detail-columns--three { grid-template-columns: repeat(3,minmax(0,1fr)); }
.mvo-addon-site.mvo-shell-next #main-content .service-detail-columns > article { min-width: 0; padding-top: 28px; border-top: 1px solid var(--service-line); }
.mvo-addon-site.mvo-shell-next #main-content .service-detail h3 { margin: 0 0 16px; color: var(--service-ink); font-size: 22px; font-weight: 800; line-height: 1.3; }
.mvo-addon-site.mvo-shell-next #main-content .service-detail :is(p,li,td,dd) { color: var(--service-muted); font-size: 15px; line-height: 1.8; overflow-wrap: break-word; }
.mvo-addon-site.mvo-shell-next #main-content .service-detail article > p { margin: 0 0 16px; }
.mvo-addon-site.mvo-shell-next #main-content .service-detail ul { margin: 16px 0 0; padding-left: 20px; }
.mvo-addon-site.mvo-shell-next #main-content .service-detail ul li { padding-left: 4px; margin: 8px 0; }
.mvo-addon-site.mvo-shell-next #main-content .service-detail li::marker { color: var(--service-accent); }
.mvo-addon-site.mvo-shell-next #main-content .service-detail-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px; padding: 0; margin: 0; list-style-position: inside; }
.mvo-addon-site.mvo-shell-next #main-content .service-detail-steps > li { min-width: 0; border-top: 1px solid var(--service-line); padding: 28px 0 0; }
.mvo-addon-site.mvo-shell-next #main-content .service-detail-steps > li::marker { font-size: 24px; font-weight: 800; }
.mvo-addon-site.mvo-shell-next #main-content .service-detail-steps h3 { margin: 18px 0 12px; }
.mvo-addon-site.mvo-shell-next #main-content .service-detail-steps p { margin: 0; }
.mvo-addon-site.mvo-shell-next #main-content .service-detail-note { margin: 32px 0 0; padding: 20px 24px; border: 1px solid var(--service-line); border-radius: 12px; background: var(--service-surface); font-size: 13px; }
.mvo-addon-site.mvo-shell-next #main-content .service-detail-table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--service-line); border-radius: 12px; }
.mvo-addon-site.mvo-shell-next #main-content .service-cell-label { display: none; }
.mvo-addon-site.mvo-shell-next #main-content .service-detail table { width: 100%; border-collapse: collapse; margin: 0; }
.mvo-addon-site.mvo-shell-next #main-content .service-detail caption { caption-side: top; padding: 18px 24px; color: var(--service-muted); font-size: 13px; }
.mvo-addon-site.mvo-shell-next #main-content .service-detail :is(th,td) { padding: 20px 24px; text-align: left; vertical-align: top; border-top: 1px solid var(--service-line); }
.mvo-addon-site.mvo-shell-next #main-content .service-detail th { background: var(--service-surface); color: var(--service-ink); font-size: 14px; font-weight: 800; line-height: 1.5; }
.mvo-addon-site.mvo-shell-next #main-content .service-detail-faq { max-width: 960px; }
.mvo-addon-site.mvo-shell-next #main-content .service-detail-faq details { padding: 0; border-top: 1px solid var(--service-line); }
.mvo-addon-site.mvo-shell-next #main-content .service-detail-faq details:last-child { border-bottom: 1px solid var(--service-line); }
.mvo-addon-site.mvo-shell-next #main-content .service-detail-faq summary { min-height: 64px; padding: 20px 36px 20px 0; color: var(--service-ink); font-size: 17px; font-weight: 700; cursor: pointer; }
.mvo-addon-site.mvo-shell-next #main-content .service-detail-faq summary::marker { color: var(--service-accent); }
.mvo-addon-site.mvo-shell-next #main-content .service-detail-faq details p { max-width: 75ch; margin: 0 0 24px; }
.mvo-addon-site.mvo-shell-next #main-content .service-detail a { color: var(--service-accent); text-underline-offset: 4px; }
.mvo-addon-site.mvo-shell-next #main-content .service-detail :is(a,summary):focus-visible { outline: 3px solid var(--service-accent); outline-offset: 4px; }

@media (max-width:1100px) {
    html:root body.mvo-landing-next #main-content .service-hero-layout { gap: 32px; padding: 40px; }
    html:root body.mvo-landing-next #main-content .hosting27_copy.service-hero-copy { max-width: 51%; }
}
@media (max-width:900px) {
    html:root body.mvo-landing-next #main-content .service-hero-layout { grid-template-columns: minmax(0,1fr); min-height: 0; }
    html:root body.mvo-landing-next #main-content .hosting27_shell.service-hero-layout { display: grid; padding-bottom: 0; gap: 0; }
    html:root body.mvo-landing-next #main-content .hosting27_copy.service-hero-copy { max-width: 620px; }
    html:root body.mvo-landing-next #main-content .hosting27_visual.service-hero-visual { position: relative; inset: auto; width: calc(100% + 112px); height: 280px; margin: 24px -56px 0; }
    html:root body.mvo-landing-next #main-content .hosting27_infrastructure img { object-position: right center; }
    .mvo-addon-site.mvo-shell-next #main-content .service-detail-columns--three { grid-template-columns: minmax(0,1fr); }
}
@media (max-width:600px) {
    html:root body.mvo-landing-next #main-content .service-hero { width: calc(100% - 40px); margin: 20px auto 32px; }
    html:root body.mvo-landing-next #main-content .service-hero-layout { padding: 28px 24px; gap: 32px; }
    html:root body.mvo-landing-next #main-content .service-hero h1 { font-size: 36px; line-height: 1.1; }
    html:root body.mvo-landing-next #main-content .service-hero-copy > p { font-size: 15px; line-height: 1.75; }
    html:root body.mvo-landing-next #main-content .hosting27_shell.service-hero-layout { padding: 32px 24px 0; }
    html:root body.mvo-landing-next #main-content .hosting27_copy h1 { font-size: 38px; }
    html:root body.mvo-landing-next #main-content .hosting27_visual.service-hero-visual { width: calc(100% + 48px); height: 220px; margin: 32px -24px 0; }
    .mvo-addon-site.mvo-shell-next #main-content .service-detail { padding-block: 56px; }
    .mvo-addon-site.mvo-shell-next #main-content .service-detail-shell { width: calc(100% - 40px); }
    .mvo-addon-site.mvo-shell-next #main-content .service-detail-heading { margin-bottom: 32px; }
    .mvo-addon-site.mvo-shell-next #main-content :is(.service-detail-columns,.service-detail-layout,.service-detail-steps) { grid-template-columns: minmax(0,1fr); gap: 28px; }
    .mvo-addon-site.mvo-shell-next #main-content .service-detail-table-wrap { overflow: visible; border: 0; border-radius: 0; }
    .mvo-addon-site.mvo-shell-next #main-content .service-comparison,
    .mvo-addon-site.mvo-shell-next #main-content .service-comparison :is(caption,tbody,tr,th,td) { display: block; width: 100%; min-width: 0; }
    .mvo-addon-site.mvo-shell-next #main-content .service-comparison caption { padding: 0 0 20px; }
    .mvo-addon-site.mvo-shell-next #main-content .service-comparison thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .mvo-addon-site.mvo-shell-next #main-content .service-comparison tbody { display: grid; gap: 20px; }
    .mvo-addon-site.mvo-shell-next #main-content .service-comparison tbody tr { overflow: hidden; border: 1px solid var(--service-line); border-radius: 12px; }
    .mvo-addon-site.mvo-shell-next #main-content .service-comparison tbody th { padding: 20px; border: 0; font-size: 17px; }
    .mvo-addon-site.mvo-shell-next #main-content .service-comparison tbody td { padding: 20px; font-size: 15px; line-height: 1.75; }
    .mvo-addon-site.mvo-shell-next #main-content .service-comparison .service-cell-label { display: block; margin-bottom: 8px; color: var(--service-accent); font-size: 13px; font-weight: 800; }
}