/* Platform service heroes: live catalogue navigation, meaningful product
   diagrams and the complete real Panel capture. No synthetic dashboard chrome. */
html:root body.mvo-landing-next #main-content .service-hero.service-platform-hero {
    padding: 0;
    overflow: hidden;
    border: 0;
    background: var(--service-surface, var(--mvo-shell-surface));
}
html:root body.mvo-landing-next #main-content .service-platform-hero .service-platform-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(32px, 4vw, 64px);
    align-items: center;
    padding: clamp(32px, 4.2vw, 64px);
}
html:root body.mvo-landing-next #main-content .service-platform-hero h1 {
    max-width: 13ch;
    margin: 0 0 24px;
    color: var(--service-ink, var(--mvo-shell-ink));
    font-size: clamp(40px, 4.2vw, 62px);
    font-weight: 800;
    line-height: 1.09;
    letter-spacing: -.035em;
    text-wrap: balance;
}
html:root body.mvo-landing-next #main-content .service-platform-hero h1 em {
    color: var(--service-accent, var(--mvo-shell-focus));
    font-style: normal;
}
html:root body.mvo-landing-next #main-content .service-platform-hero .service-hero-copy > p,
html:root body.mvo-landing-next #main-content .service-panel-offer > p {
    max-width: 50ch;
    margin: 0;
    color: var(--service-muted, var(--mvo-shell-muted));
    font-size: 16px;
    line-height: 1.8;
}
html:root body.mvo-landing-next #main-content .service-platform-hero .service-hero-visual {
    min-width: 0;
    margin: 0;
}
html:root body.mvo-landing-next #main-content .service-platform-hero figcaption {
    position: static;
    margin-top: 28px;
    padding: 0;
    color: var(--service-muted, var(--mvo-shell-muted));
    background: transparent;
    font-size: 12px;
    line-height: 1.6;
}
html:root body.mvo-landing-next #main-content .service-platform-hero .service-platform-note {
    font-size: 13px;
    line-height: 1.7;
}

/* Catalogue rows are real entry points, backed by the existing drawer hooks. */
html:root body.mvo-landing-next #main-content .service-platform-hero .service-software-index h2 {
    margin: 0 0 24px;
    color: var(--service-ink, var(--mvo-shell-ink));
    font-size: 24px;
    line-height: 1.3;
    letter-spacing: -.02em;
}
html:root body.mvo-landing-next #main-content .service-software-index-list {
    border-bottom: 1px solid var(--mvo-shell-line);
}
html:root body.mvo-landing-next #main-content .service-software-entry {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 16px;
    width: 100%;
    min-height: 78px;
    padding: 18px 8px;
    border: 0;
    border-top: 1px solid var(--mvo-shell-line);
    border-radius: 0;
    color: var(--service-ink, var(--mvo-shell-ink));
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: background-color .18s ease-out;
}
html:root body.mvo-landing-next #main-content .service-software-entry:hover {
    background: var(--mvo-shell-hover);
}
html:root body.mvo-landing-next #main-content .service-software-entry:focus-visible {
    outline: 3px solid var(--service-accent, var(--mvo-shell-focus));
    outline-offset: -3px;
}
html:root body.mvo-landing-next #main-content .service-software-entry > i {
    color: var(--service-accent, var(--mvo-shell-focus));
    font-size: 25px;
}
html:root body.mvo-landing-next #main-content .service-software-entry > i:last-child { font-size: 16px; }
html:root body.mvo-landing-next #main-content .service-software-entry strong { display: block; font-size: 17px; font-weight: 700; line-height: 1.4; }
html:root body.mvo-landing-next #main-content .service-software-entry small { display: block; margin-top: 4px; color: var(--service-muted, var(--mvo-shell-muted)); font-size: 12px; line-height: 1.4; }

/* A readable routing diagram: three sources, one shared context, three teams. */
html:root body.mvo-landing-next #main-content :is(.service-talk-channels, .service-talk-teams) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}
html:root body.mvo-landing-next #main-content .service-talk-channels li { display: grid; justify-items: center; gap: 12px; min-width: 0; }
html:root body.mvo-landing-next #main-content .service-talk-channels i { color: var(--service-accent, var(--mvo-shell-focus)); font-size: 32px; }
html:root body.mvo-landing-next #main-content .service-talk-channels span,
html:root body.mvo-landing-next #main-content .service-talk-teams li { color: var(--service-ink, var(--mvo-shell-ink)); font-size: 13px; font-weight: 600; line-height: 1.5; }
html:root body.mvo-landing-next #main-content .service-talk-junction {
    position: relative;
    height: 34px;
    width: 68%;
    margin: 18px auto 0;
    border: 1px solid var(--service-accent, var(--mvo-shell-focus));
    border-top: 0;
}
html:root body.mvo-landing-next #main-content .service-talk-junction::before,
html:root body.mvo-landing-next #main-content .service-talk-junction::after {
    content: "";
    position: absolute;
    left: 50%;
    height: 34px;
    border-left: 1px solid var(--service-accent, var(--mvo-shell-focus));
}
html:root body.mvo-landing-next #main-content .service-talk-junction::before { top: 0; }
html:root body.mvo-landing-next #main-content .service-talk-junction::after { top: 100%; height: 22px; }
html:root body.mvo-landing-next #main-content .service-talk-center { padding: 48px 0 0; text-align: center; }
html:root body.mvo-landing-next #main-content :is(.service-talk-center, .service-desk-identity) p { margin: 14px 0 0; color: var(--service-muted, var(--mvo-shell-muted)); font-size: 16px; line-height: 1.6; }
html:root body.mvo-landing-next #main-content .service-talk-junction--out { margin: 42px auto 18px; transform: rotate(180deg); }
html:root body.mvo-landing-next #main-content .service-talk-map figcaption { text-align: center; max-width: 40ch; margin-inline: auto; }
html:root body.mvo-landing-next #main-content .service-talk-hero .mvo-multi-trust-row { margin: 0; padding: 28px clamp(32px, 4.2vw, 64px); border-top: 1px solid var(--mvo-shell-line); }

/* Remote support has two ends and one protected connection. */
html:root body.mvo-landing-next #main-content .service-desk-endpoints { display: grid; grid-template-columns: minmax(0, 1fr) minmax(88px, .75fr) minmax(0, 1fr); align-items: center; gap: 8px; }
html:root body.mvo-landing-next #main-content .service-desk-endpoint { display: grid; justify-items: center; gap: 8px; min-width: 0; text-align: center; }
html:root body.mvo-landing-next #main-content .service-desk-endpoint > i { color: var(--service-accent, var(--mvo-shell-focus)); font-size: clamp(48px, 5.2vw, 70px); margin-bottom: 12px; }
html:root body.mvo-landing-next #main-content .service-desk-endpoint strong { color: var(--service-ink, var(--mvo-shell-ink)); font-size: 15px; line-height: 1.4; }
html:root body.mvo-landing-next #main-content .service-desk-endpoint span { color: var(--service-muted, var(--mvo-shell-muted)); font-size: 12px; line-height: 1.4; }
html:root body.mvo-landing-next #main-content .service-desk-link { display: grid; justify-items: center; align-self: start; gap: 12px; padding-top: 12px; text-align: center; }
html:root body.mvo-landing-next #main-content .service-desk-link > i { display: block; width: 100%; color: var(--service-accent, var(--mvo-shell-focus)); border-bottom: 1px solid var(--service-accent, var(--mvo-shell-focus)); padding-bottom: 14px; font-size: 20px; }
html:root body.mvo-landing-next #main-content .service-desk-link > span { color: var(--service-muted, var(--mvo-shell-muted)); font-size: 11px; line-height: 1.4; }
html:root body.mvo-landing-next #main-content .service-desk-identity { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--mvo-shell-line); }
html:root body.mvo-landing-next #main-content .service-desk-identity p { margin: 0; font-size: 14px; }
html:root body.mvo-landing-next #main-content .service-platform-tools { display: flex; flex-wrap: wrap; gap: 12px 20px; margin: 28px 0 0; padding: 0; list-style: none; }
html:root body.mvo-landing-next #main-content .service-platform-tools li { color: var(--service-muted, var(--mvo-shell-muted)); font-size: 12px; line-height: 1.6; }
html:root body.mvo-landing-next #main-content .service-platform-tools i { color: var(--service-accent, var(--mvo-shell-focus)); margin-right: 6px; }

/* The actual product is the Panel's visual proof, not a miniature right card. */
html:root body.mvo-landing-next #main-content .service-panel-intro { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 48px; padding: clamp(32px, 4.2vw, 64px); }
html:root body.mvo-landing-next #main-content .service-panel-hero h1 { max-width: 15ch; margin-bottom: 0; }
html:root body.mvo-landing-next #main-content .service-panel-hero .ml-hero-actions { display: flex; flex-wrap: wrap; margin: 24px 0 18px; gap: 12px; }
html:root body.mvo-landing-next #main-content .service-panel-hero .ml-demo-entry { margin: 0; color: var(--service-accent, var(--mvo-shell-focus)); }
html:root body.mvo-landing-next #main-content .service-panel-capture.ml-real-screen { display: block; width: auto; margin: 0 clamp(24px, 4.2vw, 64px); padding: 0; border: 0; border-radius: 0; overflow: visible; background: transparent; box-shadow: none; }
html:root body.mvo-landing-next #main-content .service-panel-capture.ml-real-screen img { display: block; position: static; width: 100%; height: auto; max-height: none; object-fit: contain; border: 0; border-radius: 8px 8px 0 0; }
html:root body.mvo-landing-next #main-content .service-panel-capture.ml-real-screen figcaption { position: static; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; width: auto; margin: 0; padding: 20px 0 28px; background: transparent; }
html:root body.mvo-landing-next #main-content .service-panel-capture figcaption strong { color: var(--service-ink, var(--mvo-shell-ink)); font-size: 14px; font-weight: 700; }
html:root body.mvo-landing-next #main-content .service-panel-capture figcaption span { color: var(--service-muted, var(--mvo-shell-muted)); font-size: 12px; font-weight: 400; text-transform: none; letter-spacing: 0; }

/* The tour predates the theme switch. Its dark-only colors and layered shadows
   must not bleed into the light surface; keep the dark tour and its hooks intact. */
html:root[data-mvo-theme="light"] body.mvo-landing-next #main-content .ml-showcase::before,
html:root[data-mvo-theme="light"] body.mvo-landing-next #main-content .ml-showcase::after,
html:root[data-mvo-theme="light"] body.mvo-landing-next #main-content .ml-showcase .ml-tour-visual::before,
html:root[data-mvo-theme="light"] body.mvo-landing-next #main-content .ml-showcase .ml-tour-visual::after {
    display: none;
}
html:root[data-mvo-theme="light"] body.mvo-landing-next #main-content .ml-showcase .ml-tour-tabs button {
    color: var(--mvo-shell-ink);
    background: transparent;
    box-shadow: none;
}
html:root[data-mvo-theme="light"] body.mvo-landing-next #main-content .ml-showcase .ml-tour-tabs button span {
    color: inherit;
}
html:root[data-mvo-theme="light"] body.mvo-landing-next #main-content .ml-showcase .ml-tour-tabs button i {
    color: var(--mvo-shell-focus);
    background: var(--mvo-shell-surface);
}
html:root[data-mvo-theme="light"] body.mvo-landing-next #main-content .ml-showcase .ml-tour-tabs button:hover {
    color: var(--mvo-shell-ink);
    background: var(--mvo-shell-surface);
}
html:root[data-mvo-theme="light"] body.mvo-landing-next #main-content .ml-showcase .ml-tour-tabs button.active {
    color: var(--mvo-shell-ink);
    background: var(--mvo-shell-hover);
    border-color: var(--mvo-shell-focus);
    box-shadow: none;
}
html:root[data-mvo-theme="light"] body.mvo-landing-next #main-content .ml-showcase .ml-tour-tabs button.active i {
    color: var(--mvo-shell-focus);
    background: var(--mvo-shell-bg);
}
html:root[data-mvo-theme="light"] body.mvo-landing-next #main-content .ml-showcase .ml-tour-tabs button:focus-visible {
    outline: 3px solid var(--mvo-shell-focus);
    outline-offset: 3px;
}
html:root[data-mvo-theme="light"] body.mvo-landing-next #main-content .ml-showcase .ml-tour-visual-meta span,
html:root[data-mvo-theme="light"] body.mvo-landing-next #main-content .ml-showcase .ml-tour-hint {
    color: var(--mvo-shell-muted);
}
html:root[data-mvo-theme="light"] body.mvo-landing-next #main-content .ml-showcase .ml-tour-visual-meta b,
html:root[data-mvo-theme="light"] body.mvo-landing-next #main-content .ml-showcase .ml-tour-copy li {
    color: var(--mvo-shell-ink);
}
html:root[data-mvo-theme="light"] body.mvo-landing-next #main-content .ml-showcase .ml-tour-visual-meta i,
html:root[data-mvo-theme="light"] body.mvo-landing-next #main-content .ml-showcase .ml-tour-copy li::before {
    color: var(--mvo-shell-focus);
}
html:root[data-mvo-theme="light"] body.mvo-landing-next #main-content .ml-showcase .ml-tour-real {
    border: 1px solid var(--mvo-shell-line);
    box-shadow: none;
}
html:root[data-mvo-theme="light"] body.mvo-landing-next #main-content .ml-showcase .ml-tour-real figcaption {
    color: var(--mvo-shell-bg);
    background: var(--mvo-shell-ink);
    box-shadow: none;
}

@media (max-width: 1000px) {
    html:root body.mvo-landing-next #main-content .service-platform-hero .service-platform-layout { gap: 32px; padding: 36px; }
    html:root body.mvo-landing-next #main-content .service-panel-intro { gap: 32px; padding: 36px; }
    html:root body.mvo-landing-next #main-content .service-desk-identity { display: block; }
    html:root body.mvo-landing-next #main-content .service-desk-identity p { margin-top: 16px; }
}
@media (max-width: 800px) {
    html:root body.mvo-landing-next #main-content .service-platform-hero .service-platform-layout,
    html:root body.mvo-landing-next #main-content .service-panel-intro { grid-template-columns: minmax(0, 1fr); gap: 40px; padding: 32px; }
    html:root body.mvo-landing-next #main-content .service-platform-hero h1 { font-size: clamp(36px, 6.5vw, 52px); max-width: 18ch; }
    html:root body.mvo-landing-next #main-content .service-desk-connection { width: 100%; max-width: 520px; justify-self: center; }
    html:root body.mvo-landing-next #main-content .service-talk-map { width: 100%; max-width: 460px; justify-self: center; }
    html:root body.mvo-landing-next #main-content .service-desk-identity { display: flex; }
    html:root body.mvo-landing-next #main-content .service-desk-identity p { margin-top: 0; }
    html:root body.mvo-landing-next #main-content .service-panel-capture.ml-real-screen figcaption { align-items: flex-start; flex-direction: column; gap: 6px; }
}
@media (max-width: 480px) {
    html:root body.mvo-landing-next #main-content .service-platform-hero .service-platform-layout,
    html:root body.mvo-landing-next #main-content .service-panel-intro { padding: 28px 24px; gap: 36px; }
    html:root body.mvo-landing-next #main-content .service-platform-hero h1 { font-size: 36px; line-height: 1.12; }
    html:root body.mvo-landing-next #main-content .service-platform-hero .service-hero-copy > p,
    html:root body.mvo-landing-next #main-content .service-panel-offer > p { font-size: 15px; line-height: 1.75; }
    html:root body.mvo-landing-next #main-content .service-talk-channels span,
    html:root body.mvo-landing-next #main-content .service-talk-teams li { font-size: 12px; }
    html:root body.mvo-landing-next #main-content .service-desk-endpoints { grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); gap: 6px; }
    html:root body.mvo-landing-next #main-content .service-desk-endpoint strong { font-size: 13px; }
    html:root body.mvo-landing-next #main-content .service-desk-endpoint span { font-size: 11px; }
    html:root body.mvo-landing-next #main-content .service-desk-identity { flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 32px; }
    html:root body.mvo-landing-next #main-content .service-talk-hero .mvo-multi-trust-row { padding: 24px; }
    html:root body.mvo-landing-next #main-content .service-software-entry { grid-template-columns: 24px minmax(0, 1fr) 16px; gap: 12px; }
    html:root body.mvo-landing-next #main-content .service-software-entry strong { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    html:root body.mvo-landing-next #main-content .service-software-entry { transition: none; }
}