:root {
    --cordis-blue-900: #081430;
    --cordis-blue-800: #0f235f;
    --cordis-blue-700: #153381;
    --cordis-blue-500: #2e4ca8;
    --cordis-orange: #f2a328;
    --cordis-text: #1a2340;
    --cordis-border: #dbe2f5;
    --cordis-surface: #ffffff;
    --cordis-bg: #f3f6fd;
}

html,
body {
    margin: 0;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    /* Dark-canvas default — all pages inherit the Cordis SUITE style */
    color: #eff3ff;
    background: #080e20;
    overflow-x: clip;
}

* {
    box-sizing: border-box;
}

/* Blazor's <FocusOnNavigate> moves focus to the first <h1> for screen-reader
   announcement on every route change. It does this by setting tabindex="-1"
   and calling focus(), which otherwise paints a visible browser focus ring
   around the page title until the user clicks elsewhere. tabindex="-1"
   elements are never reachable by keyboard, so suppressing their outline is
   safe — keyboard-driven focus on real interactive controls is unaffected. */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible {
    outline: none;
}

a {
    color: #1F9CD8;
}

a:hover {
    color: #7cecff;
}

.container {
    width: min(1180px, 92vw);
    margin: 0 auto;
}

.site-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--cordis-blue-900);
    border-bottom: 1px solid #2c3d75;
}

.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.site-header__actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    margin-left: auto;
}

.brand {
    position: relative;
    display: inline-flex;
    align-items: center;
    border: 0;
    background: transparent;
    padding: 0.55rem 0;
    cursor: pointer;
    appearance: none;
    text-decoration: none;
    /* The full PNG is roughly 459x149 (aspect 3.08), the icon-only SVG is
       167.5x149.3 (aspect 1.122). Keeping these as named factors makes the
       open / closed widths self-documenting. */
    --brand-logo-height: 2.2rem;
    --brand-logo-clip-open-factor: 3.136;
    --brand-logo-clip-closed-factor: 1.122;
}

.brand img {
    width: auto;
    height: var(--brand-logo-height);
    display: block;
    flex-shrink: 0;
}

.brand:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.85);
    outline-offset: 4px;
    border-radius: 0.35rem;
}

/* Icon-only safety layer — sits at the same x-origin as the full logo so the
   scrolled crop reveals it cleanly, even if the PNG has any sub-pixel padding
   around its icon column. */
.brand__icon-base {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: var(--brand-logo-height);
    line-height: 0;
    pointer-events: none;
    z-index: 0;
}

/* Cropping wrapper for the full horizontal logo. Animating max-width gives
   the original fluid right-to-left sweep — text slides off as you scroll
   down, slides back in as you scroll up. */
.brand__logo-clip {
    position: relative;
    z-index: 1;
    display: block;
    overflow: hidden;
    line-height: 0;
    max-width: calc(var(--brand-logo-height) * var(--brand-logo-clip-open-factor));
    transition: max-width 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.site-header.is-scrolled .brand__logo-clip {
    max-width: calc(var(--brand-logo-height) * var(--brand-logo-clip-closed-factor));
}

.site-nav {
    padding: 0.45rem 0;
}

.nav-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
}

.nav-item {
    position: relative;
}

.nav-item-cta {
    display: flex;
    align-items: center;
}

.nav-item > a,
.nav-item > button,
.dropdown-toggle {
    color: #ecf1ff;
    text-decoration: none;
    background: transparent;
    border: 0;
    padding: 0.45rem 0.65rem;
    border-radius: 0.35rem;
    font-size: 0.9rem;
    font-family: inherit;
    line-height: 1.2;
    cursor: pointer;
    appearance: none;
    display: inline-flex;
    align-items: center;
}

.nav-item > a:hover,
.nav-item > button:hover,
.dropdown-toggle:hover {
    background: rgba(255, 255, 255, 0.12);
}

.nav-item-dropdown {
    position: relative;
}

.nav-item-dropdown::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 0.5rem;
}

.dropdown-menu {
    list-style: none;
    position: absolute;
    left: 0;
    top: calc(100% + 0.45rem);
    min-width: 11rem;
    margin: 0;
    padding: 0.45rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(205, 224, 255, 0.28);
    background: linear-gradient(140deg, rgba(5, 16, 39, 0.82), rgba(11, 31, 83, 0.8), rgba(22, 62, 143, 0.72));
    backdrop-filter: blur(8px);
    box-shadow: 0 12px 30px rgba(8, 20, 48, 0.22);
    display: grid;
    gap: 0.2rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 180ms ease, transform 220ms ease, visibility 220ms ease;
}

.dropdown-menu li {
    margin: 0;
}

.dropdown-menu a {
    color: #edf3ff;
    text-decoration: none;
    border-radius: 0.35rem;
    padding: 0.45rem 0.55rem;
    display: block;
}

.dropdown-menu a:hover {
    background: rgba(255, 255, 255, 0.14);
}

@media (min-width: 981px) {
    .nav-item-dropdown:hover > .dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }

    .nav-item-dropdown:hover > .dropdown-toggle {
        background: rgba(255, 255, 255, 0.12);
    }
}

.site-main {
    flex: 1;
}

.hero {
    background: linear-gradient(135deg, var(--cordis-blue-900) 0%, var(--cordis-blue-700) 55%, var(--cordis-blue-500) 100%);
    color: #fff;
    padding: 4.25rem 0 3.5rem;
}

.hero h1 {
    margin: 0;
    max-width: 19ch;
    font-size: clamp(2rem, 5vw, 3.4rem);
    line-height: 1.05;
}

.hero-lead {
    max-width: 76ch;
    margin: 1.2rem 0 0;
    line-height: 1.65;
    opacity: 0.96;
}

.hero .cta {
    display: inline-block;
    margin-top: 1.6rem;
    padding: 0.82rem 1.35rem;
    border-radius: 0.35rem;
    text-decoration: none;
    font-weight: 700;
    background: var(--cordis-orange);
    color: #0e204f;
}

.page-intro {
    padding: 2.6rem 0 1.4rem;
}

.page-intro h1 {
    margin: 0;
    color: var(--cordis-blue-900);
}

.section-label {
    display: inline-block;
    margin-bottom: 0.7rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: #e8eefc;
    color: var(--cordis-blue-700);
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    font-weight: 700;
    text-transform: uppercase;
}

.section {
    padding: 2.6rem 0;
}

.section.light {
    background: rgba(255, 255, 255, 0.14);
    border-top: 1px solid var(--cordis-border);
    border-bottom: 1px solid var(--cordis-border);
}

.section h2 {
    margin: 0;
    color: #edf3ff;
    font-size: clamp(1.5rem, 3vw, 1.95rem);
}

.section-lead {
    margin: 0.85rem 0 1.5rem;
    max-width: 78ch;
    line-height: 1.7;
}

.stack p {
    margin: 0.75rem 0 0;
    line-height: 1.65;
}

.stack p:first-child {
    margin-top: 0;
}

.card-grid {
    display: grid;
    gap: 1rem;
}

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

.card {
    background: var(--cordis-surface);
    border: 1px solid rgba(205, 224, 255, 0.28);
    border-radius: 0.65rem;
    padding: 1.1rem;
    box-shadow: 0 8px 22px rgba(11, 29, 80, 0.07);
}

.card h3 {
    margin: 0;
    color: #edf3ff;
}

.card p {
    margin: 0.65rem 0 0;
    line-height: 1.6;
}

.quote {
    background: var(--cordis-blue-900);
    color: #f1f5ff;
    border-radius: 0.65rem;
    padding: 1.35rem;
}

.quote p {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.55;
}

.site-footer {
    background: var(--cordis-blue-900);
    color: #dce4ff;
    margin-top: 2.2rem;
}

.site-footer .container {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.site-footer p {
    margin: 0;
    font-size: 0.9rem;
}

@media (max-width: 980px) {
    .site-header .container {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding-top: 0.35rem;
        padding-bottom: 0.45rem;
        gap: 0.5rem;
    }

    /* Mobile: nav becomes a slide-down drawer.
       Hidden by default, revealed when .is-mobile-nav-open is set on header. */
    .site-header__actions {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(20rem, 84vw);
        margin: 0;
        padding: 4.85rem 1.1rem 1.5rem;
        background:
            radial-gradient(120% 60% at 100% 0%, rgba(31, 156, 216, 0.10) 0%, transparent 55%),
            linear-gradient(180deg, #060a18 0%, #0a1024 100%);
        border-left: 1px solid rgba(124, 196, 255, 0.16);
        box-shadow: -24px 0 60px rgba(0, 0, 0, 0.55);
        z-index: 75;
        transform: translateX(110%);
        transition: transform 320ms cubic-bezier(0.32, 0.72, 0.32, 1);
        overflow-y: auto;
        align-items: stretch;
        justify-content: flex-start;
    }

    /* Hairline brand accent at the top edge of the drawer. */
    .site-header__actions::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent 0%, rgba(124, 196, 255, 0.55) 50%, transparent 100%);
        pointer-events: none;
    }

    .site-header.is-mobile-nav-open .site-header__actions {
        transform: translateX(0);
    }

    .site-nav {
        width: 100%;
        padding: 0;
    }

    .nav-list {
        flex-direction: column;
        align-items: stretch;
        gap: 0.15rem;
        width: 100%;
        padding: 0;
    }

    .nav-item {
        width: 100%;
    }

    .nav-item > a,
    .nav-item > button,
    .dropdown-toggle {
        width: 100%;
        justify-content: space-between;
        background: transparent;
        color: rgba(236, 241, 255, 0.94);
        padding: 0.85rem 0.95rem;
        font-size: 0.98rem;
        font-weight: 500;
        letter-spacing: 0.01em;
        border-radius: 0.6rem;
        border: 1px solid transparent;
        transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
    }

    .nav-item > a:hover,
    .nav-item > button:hover,
    .dropdown-toggle:hover {
        background: rgba(124, 196, 255, 0.07);
        border-color: rgba(124, 196, 255, 0.18);
        color: #ffffff;
    }

    /* Chevron affordance on dropdown toggles, rotates when the section is open.
       Uses a CSS mask so the icon picks up `currentColor` and stays crisp at
       any size — the previous rotated-square approach looked wonky because
       the offset-translate threw it off-center. */
    .dropdown-toggle::after {
        content: "";
        width: 0.85rem;
        height: 0.85rem;
        margin-left: 0.6rem;
        flex-shrink: 0;
        background-color: currentColor;
        -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat center / contain;
                mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat center / contain;
        transform: rotate(0deg);
        transition: transform 220ms ease, opacity 160ms ease;
        opacity: 0.75;
    }

    .dropdown-toggle[aria-expanded="true"]::after {
        transform: rotate(-180deg);
        opacity: 0.95;
    }

    .nav-item-dropdown::after {
        display: none;
    }

    .dropdown-menu {
        position: static;
        box-shadow: none;
        border: 0;
        border-left: 2px solid rgba(124, 196, 255, 0.32);
        margin: 0.2rem 0 0.35rem 0.85rem;
        padding: 0.15rem 0 0.15rem 0.55rem;
        min-width: 0;
        width: auto;
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
        display: none;
        background: transparent;
        backdrop-filter: none;
        border-radius: 0;
        gap: 0.05rem;
    }

    .dropdown-menu.is-open {
        display: grid;
    }

    .dropdown-menu a {
        padding: 0.55rem 0.7rem;
        color: rgba(220, 232, 255, 0.78);
        font-size: 0.92rem;
        border-radius: 0.45rem;
        transition: background-color 160ms ease, color 160ms ease;
    }

    .dropdown-menu a:hover {
        background: rgba(124, 196, 255, 0.10);
        color: #ffffff;
    }

    .nav-item-cta {
        margin-top: 0.85rem;
        padding-top: 0.85rem;
        width: 100%;
        border-top: 1px solid rgba(124, 196, 255, 0.12);
    }

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

@media (max-width: 680px) {
    .hero {
        padding-top: 3rem;
    }

    .card-grid.three {
        grid-template-columns: 1fr;
    }
}


/* Base chat-hero — inherited by Features, Home (reset), About & Contact (overridden).
   Aligned with the Cordis SUITE dark navy palette and brand blue. */
.chat-hero {
    position: relative;
    min-height: calc(100vh - 5.1rem);
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        /* DF-signature dual side-wash */
        radial-gradient(ellipse 28% 55% at 2% 50%, rgba(226, 7, 23, 0.045) 0%, transparent 60%),
        radial-gradient(ellipse 28% 55% at 98% 50%, rgba(124, 236, 255, 0.05) 0%, transparent 60%),
        /* Cordis-blue pools */
        radial-gradient(circle at 12% 20%, rgba(31, 156, 216, 0.18) 0%, rgba(31, 156, 216, 0) 40%),
        radial-gradient(circle at 88% 15%, rgba(124, 236, 255, 0.12) 0%, rgba(124, 236, 255, 0) 42%),
        linear-gradient(140deg, #080e20 0%, #0c1428 55%, #111c38 100%);
    padding: 3.4rem 0 2.2rem;
}

.home-vmodel-hero {
    isolation: isolate;
    /* Reset all layout properties that the .chat-hero base rule applies. */
    display: block;
    min-height: unset;
    padding: 0;
    margin: 0;
}

.home-vmodel-hero::after {
    display: none;
}

.chat-hero-glow {
    position: absolute;
    pointer-events: none;
    filter: blur(46px);
    opacity: 0.5;
}

.chat-hero-glow-one {
    width: 20rem;
    height: 20rem;
    background: radial-gradient(circle, #1F9CD8 0%, rgba(31, 156, 216, 0) 70%);
    top: 8%;
    left: 6%;
}

.chat-hero-glow-two {
    width: 16rem;
    height: 16rem;
    background: radial-gradient(circle, #7cecff 0%, rgba(124, 236, 255, 0) 70%);
    bottom: 12%;
    right: 9%;
}

.chat-hero-inner {
    position: relative;
    z-index: 1;
    width: min(52rem, 92vw);
    text-align: center;
}

.chat-hero h1 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(2.3rem, 4.4vw, 3.6rem);
    line-height: 1.04;
    letter-spacing: -0.04em;
    font-weight: 800;
    font-family: "Sora", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    text-wrap: balance;
}

.chat-subheadline {
    margin: 1.2rem auto 0;
    max-width: 40rem;
    color: rgba(239, 243, 255, 0.75);
    font-size: clamp(1.05rem, 1.7vw, 1.2rem);
    line-height: 1.62;
    font-weight: 500;
    text-wrap: pretty;
}

/* Chat surface — matches the unified card treatment (home stacked cards)
   with a subtle tri-color accent hairline at the top for site consistency. */
.chat-surface {
    position: relative;
    margin: 1.8rem auto 0;
    width: min(50rem, 100%);
    background: linear-gradient(180deg, rgba(17, 34, 58, 0.92) 0%, rgba(13, 27, 47, 0.96) 100%);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 1rem;
    padding: 1rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 24px 64px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(10px);
    overflow: hidden;
}

.chat-surface::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(226, 7, 23, 0.4) 18%,
        rgba(31, 156, 216, 0.7) 50%,
        rgba(124, 236, 255, 0.4) 82%,
        transparent 100%);
    pointer-events: none;
}

.chat-input-row {
    position: relative;
    margin-top: 0.4rem;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.8rem;
    padding: 0.64rem 0.78rem;
    transition: border-color 180ms ease, background 180ms ease;
}

.chat-input-row:focus-within {
    border-color: rgba(31, 156, 216, 0.45);
    background: rgba(31, 156, 216, 0.05);
    box-shadow: 0 0 0 3px rgba(31, 156, 216, 0.12);
}

.chat-support-line {
    margin: 0.9rem 0 0;
    color: #c8d8fa;
    font-size: 0.9rem;
}

@media (max-width: 760px) {
    .chat-hero {
        min-height: calc(100vh - 7.5rem);
        padding-top: 2.2rem;
    }

    .chat-surface {
        padding: 0.82rem;
        border-radius: 0.82rem;
    }
}

/* Home chat typing overlay */
.chat-input-field {
    position: relative;
    flex: 1;
    min-width: 0;
}

.chat-input-field input {
    width: 100%;
    background: transparent;
    border: 0;
    color: #f2f7ff;
    font-size: 0.98rem;
    line-height: 1.4;
    min-height: 1.5rem;
    outline: none;
    font-family: "Sora", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.chat-typing-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    min-width: 0;
    pointer-events: none;
    color: #b8c9ea;
    white-space: nowrap;
    overflow: hidden;
    transition: opacity 120ms ease;
}

.chat-typing-overlay.is-hidden {
    opacity: 0;
    visibility: hidden;
}

.chat-typing-prefix {
    color: #c9d8f5;
    flex: 0 0 auto;
}

.chat-typing-dynamic {
    color: #deebff;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-typing-cursor {
    width: 0.08rem;
    height: 1rem;
    margin-left: 0.12rem;
    background: #deebff;
    animation: chatTypingBlink 1s step-end infinite;
    flex: 0 0 auto;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@keyframes chatTypingBlink {
    0%,
    50% {
        opacity: 1;
    }

    51%,
    100% {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .chat-typing-cursor {
        animation: none;
    }
}




/* Home chat controls and tooltip */
.chat-controls-left,
.chat-controls-right {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex: 0 0 auto;
}

.chat-input-row {
    gap: 0.62rem;
}

.chat-circle-btn {
    width: 2rem;
    height: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(239, 243, 255, 0.85);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}

.chat-circle-btn:hover {
    background: rgba(124, 236, 255, 0.08);
    border-color: rgba(124, 236, 255, 0.45);
    color: #ffffff;
}

.chat-circle-btn svg {
    width: 1.05rem;
    height: 1.05rem;
}

/* Send — Cordis brand blue gradient matching the hero CTA */
.chat-circle-btn.send {
    background: linear-gradient(135deg, #1F9CD8 0%, #52c4ef 100%);
    border-color: rgba(124, 236, 255, 0.45);
    color: #0a1020;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 4px 14px rgba(31, 156, 216, 0.28);
}

.chat-circle-btn.send:hover {
    background: linear-gradient(135deg, #2ba8e3 0%, #7cecff 100%);
    color: #0a1020;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 6px 18px rgba(31, 156, 216, 0.4),
        0 0 16px rgba(124, 236, 255, 0.25);
}

/* Decorative variant — used on the Features hero where the chat surface is
   a demo only. Buttons stay visually consistent with the interactive chat
   controls but never react to hover/focus/click, and the whole row is
   inert so no popup is ever shown. */
.chat-circle-btn.is-decorative {
    cursor: default;
    pointer-events: none;
    user-select: none;
}

.chat-circle-btn.is-decorative:hover,
.chat-circle-btn.is-decorative.send:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.15);
    color: rgba(239, 243, 255, 0.85);
    box-shadow: none;
}

.chat-circle-btn.is-decorative.send,
.chat-circle-btn.is-decorative.send:hover {
    background: linear-gradient(135deg, #1F9CD8 0%, #52c4ef 100%);
    border-color: rgba(124, 236, 255, 0.45);
    color: #0a1020;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 4px 14px rgba(31, 156, 216, 0.28);
}

.chat-surface--demo #home-chat-input {
    pointer-events: none;
    caret-color: transparent;
    cursor: default;
    user-select: none;
}

/* ── Features hero — aligned with the About Cordis hero treatment ────────
   Uses the same overline label with accent bar and the same brand-blue
   accent span inside the headline, so the two pages share the same
   typographic signature. */
.features-hero .features-hero__label {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 1.1rem;
    color: #1F9CD8;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    opacity: 0.9;
    padding: 0;
}

.features-hero .features-hero__label::before {
    content: "";
    display: block;
    width: 1.8rem;
    height: 1.5px;
    background: #1F9CD8;
    opacity: 0.7;
    flex-shrink: 0;
}

.features-hero .features-hero__accent {
    color: #1F9CD8;
}

.plan-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(188, 207, 249, 0.35);
    color: #dbe7ff;
    font-size: 0.72rem;
    letter-spacing: 0.01em;
    padding: 0.2rem 0.55rem;
    background: rgba(255, 255, 255, 0.06);
}

.attach-wrap {
    position: relative;
}

.attach-tooltip {
    position: absolute;
    top: calc(100% + 0.55rem);
    width: min(17.5rem, 80vw);
    background: linear-gradient(140deg, rgba(5, 16, 39, 0.82), rgba(11, 31, 83, 0.8), rgba(22, 62, 143, 0.72));
    color: #152651;
    border-radius: 0.85rem;
    border: 1px solid #d7e2fb;
    box-shadow: 0 16px 40px rgba(5, 16, 42, 0.25);
    padding: 0.8rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 120ms ease, transform 150ms ease, visibility 150ms ease;
    z-index: 40;
    pointer-events: auto;
}

.attach-wrap.tooltip-open .attach-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.attach-tooltip.tooltip-left {
    left: 0;
}

.attach-tooltip.tooltip-right {
    right: 0;
}

.attach-tooltip-title {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    color: #ffffff;
}

.attach-tooltip-body {
    margin: 0.35rem 0 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.9);
}

.attach-tooltip-cta {
    margin-top: 0.62rem;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border-radius: 0.52rem;
    padding: 0.34rem 0.6rem;
    font-size: 0.78rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}

.attach-tooltip-cta:hover {
    background: rgba(255, 255, 255, 0.2);
}

.chat-typing-prefix,
.chat-typing-gap,
.chat-typing-dynamic {
    display: inline-block;
}

.chat-typing-gap {
    width: 0.33ch;
}

@media (max-width: 760px) {
    .plan-badge {
        display: none;
    }

    .chat-circle-btn {
        width: 1.9rem;
        height: 1.9rem;
    }
}

/* Live state-machine preview */
.state-preview-panel {
    margin-top: 0.8rem;
    border: 1px solid rgba(181, 205, 255, 0.2);
    border-radius: 0.8rem;
    background: rgba(8, 22, 54, 0.45);
    overflow: hidden;
}

.state-preview-meta {
    display: flex;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.5rem 0.7rem;
    font-size: 0.72rem;
    letter-spacing: 0.01em;
    color: #bfd3ff;
    border-bottom: 1px solid rgba(179, 205, 255, 0.18);
}

.state-preview-canvas {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.45rem 0.3rem 0.55rem;
}

#home-state-preview {
    width: 100%;
    min-width: 56rem;
    height: 8rem;
    display: block;
}

.machine-layer {
    transition: opacity 220ms ease, transform 220ms ease;
}

.machine-layer.incoming {
    opacity: 0;
    transform: translateY(5px);
}

.machine-layer.current {
    opacity: 1;
    transform: translateY(0);
}

.machine-layer.outgoing {
    opacity: 0;
    transform: translateY(-5px);
}

.sm-node rect {
    fill: rgba(19, 38, 83, 0.72);
    stroke: rgba(171, 195, 247, 0.45);
    stroke-width: 1;
    transition: fill 180ms ease, stroke 180ms ease;
}

.sm-node-label {
    fill: #d5e4ff;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.sm-node.is-active rect {
    fill: rgba(62, 118, 240, 0.38);
    stroke: rgba(194, 215, 255, 0.9);
}

.sm-edge {
    stroke: rgba(145, 168, 219, 0.6);
    stroke-width: 1.6;
    transition: stroke 180ms ease;
}

.sm-edge.is-active {
    stroke: rgba(186, 212, 255, 0.95);
}

.sm-edge-label {
    fill: rgba(166, 188, 236, 0.95);
    font-size: 7px;
    letter-spacing: 0.01em;
}

@media (max-width: 760px) {
    #home-state-preview {
        min-width: 50rem;
        height: 7.5rem;
    }

    .state-preview-meta {
        font-size: 0.68rem;
    }
}

/* Hierarchical UML machine preview */
.state-preview-panel {
    margin-top: 0.8rem;
    border: 1px solid rgba(181, 205, 255, 0.22);
    border-radius: 0.85rem;
    background: linear-gradient(160deg, rgba(10, 24, 58, 0.78), rgba(8, 20, 49, 0.66));
    overflow: hidden;
}

.state-preview-meta {
    display: flex;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.52rem 0.72rem;
    font-size: 0.72rem;
    letter-spacing: 0.01em;
    color: #bfd3ff;
    border-bottom: 1px solid rgba(179, 205, 255, 0.18);
}

.state-preview-canvas {
    overflow: hidden;
    padding: 0.45rem 0.35rem 0.6rem;
}

#home-state-preview {
    width: 100%;
    min-width: 0;
    height: clamp(18rem, 34vw, 27rem);
    display: block;
}

.uml-node,
.uml-edge {
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 220ms ease, transform 220ms ease;
}

.uml-node.is-visible,
.uml-edge.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.demo-group[hidden] {
    display: none;
}

.uml-class-box {
    fill: #f4f6fb;
    stroke: rgba(170, 194, 245, 0.68);
    stroke-width: 1.5;
}

.uml-class-header-bg {
    fill: #d8cef5;
}

.uml-class-header {
    font-size: 26px;
    font-weight: 800;
    fill: #160f34;
}

.uml-class-divider {
    stroke: rgba(170, 194, 245, 0.68);
    stroke-width: 1;
}

.uml-class-property {
    font-size: 18px;
    font-weight: 600;
    fill: #102444;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

.uml-class-stereotype {
    fill: #6a5d8a;
    font-style: italic;
    font-weight: 600;
}

.uml-composition-edge .uml-edge-line {
    stroke: rgba(41, 58, 102, 0.75);
    stroke-width: 1.8;
    fill: none;
}

.uml-composition-diamond {
    fill: #0b0b0b;
    stroke: #0b0b0b;
    stroke-width: 1.8;
    stroke-linejoin: round;
}

.uml-state-rect {
    fill: url(#uml-node-grad);
    stroke: rgba(170, 194, 245, 0.52);
    stroke-width: 1;
}

.uml-composite-box {
    fill: rgba(18, 37, 84, 0.28);
    stroke: rgba(166, 189, 243, 0.46);
    stroke-width: 1;
}

.uml-composite-header {
    fill: rgba(37, 66, 133, 0.27);
    stroke: rgba(168, 191, 245, 0.2);
    stroke-width: 0.8;
}

.uml-composite-title {
    fill: #dce8ff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.uml-state-title {
    fill: #d9e7ff;
    font-size: 10px;
    font-weight: 700;
}

.uml-state-entry {
    fill: #a9c1ef;
    font-size: 8px;
}

.uml-initial {
    fill: #dbe7ff;
    stroke: #dbe7ff;
}

.uml-final-outer {
    fill: transparent;
    stroke: #c9dcff;
    stroke-width: 1.4;
}

.uml-final-inner {
    fill: #dbe7ff;
    stroke: #dbe7ff;
}

.uml-decision {
    fill: rgba(24, 47, 102, 0.65);
    stroke: rgba(188, 207, 249, 0.6);
    stroke-width: 1;
}

.uml-edge-line {
    fill: none;
    stroke: rgba(150, 174, 227, 0.72);
    stroke-width: 1.4;
}

.uml-edge-label {
    fill: rgba(178, 198, 240, 0.95);
    font-size: 8px;
}

.uml-arrow {
    fill: rgba(150, 174, 227, 0.82);
}

.uml-node.is-active .uml-state-rect,
.uml-node.is-active .uml-composite-box,
.uml-node.is-active .uml-decision,
.uml-node.is-active .uml-initial,
.uml-node.is-active .uml-final-inner {
    stroke: rgba(209, 223, 255, 0.95);
    fill: rgba(69, 124, 240, 0.35);
}

.uml-node.is-active .uml-state-title,
.uml-node.is-active .uml-composite-title,
.uml-node.is-active .uml-edge-label {
    fill: #f1f6ff;
}

.uml-edge.is-active .uml-edge-line {
    stroke: rgba(205, 223, 255, 0.95);
    stroke-width: 1.7;
}

.uml-edge.is-active .uml-edge-label {
    fill: #edf5ff;
}

@media (max-width: 980px) {
    #home-state-preview {
        height: clamp(15rem, 42vw, 22rem);
    }
}

@media (max-width: 760px) {
    .state-preview-meta {
        font-size: 0.68rem;
    }

    #home-state-preview {
        height: clamp(14rem, 52vw, 20rem);
    }
}


/* Gripper UML restyle */
#home-state-preview {
    height: clamp(16rem, 30vw, 22rem);
}

.state-preview-panel {
    border: 1px solid rgba(129, 164, 216, 0.34);
    background: linear-gradient(160deg, rgba(210, 227, 250, 0.36), rgba(189, 213, 246, 0.2));
}

.state-preview-meta {
    color: #d4e4ff;
}

.uml-composite-box {
    fill: url(#uml-comp-grad);
    stroke: #7d9fce;
    stroke-width: 1.2;
}

.uml-composite-header {
    fill: rgba(173, 201, 240, 0.78);
    stroke: rgba(123, 156, 206, 0.65);
}

.uml-composite-title {
    fill: #2b4d77;
    font-size: 11px;
    font-weight: 700;
}

.uml-state-rect {
    fill: url(#uml-state-grad);
    stroke: #7c6ea8;
    stroke-width: 1.1;
}

.uml-state-header {
    fill: rgba(201, 186, 237, 0.9);
    stroke: rgba(121, 104, 168, 0.45);
}

.uml-state-title {
    fill: #3f2d67;
    font-size: 10px;
    font-weight: 700;
}

.uml-state-entry {
    fill: #2f3f5d;
    font-size: 8px;
}

.uml-edge-line {
    stroke: #657da8;
    stroke-width: 1.25;
}

.uml-edge-label {
    fill: #38547f;
    font-size: 8px;
}

.uml-arrow {
    fill: #657da8;
}

.uml-node.is-active .uml-state-rect,
.uml-node.is-active .uml-state-header,
.uml-node.is-active .uml-composite-box {
    stroke: #496aa6;
    filter: drop-shadow(0 0 2px rgba(114, 145, 211, 0.35));
}

.uml-edge.is-active .uml-edge-line {
    stroke: #1F9CD8;
}

.uml-edge.is-active .uml-edge-label {
    fill: #1F9CD8;
}

/* Homepage UML prominence overrides (no behavior changes) */
.chat-hero-inner {
    width: min(64rem, 94vw);
}

.chat-surface {
    overflow: visible;
}

.state-preview-panel {
    position: relative;
    width: min(92vw, 74rem);
    margin: 1.15rem auto 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

.state-preview-meta {
    display: none;
}

.state-preview-canvas {
    position: relative;
    overflow: visible;
    padding: 0.15rem 0 0.25rem;
}

.state-preview-canvas::before {
    content: "";
    position: absolute;
    inset: 4% 5% 10%;
    border-radius: 2rem;
    background: radial-gradient(ellipse at center, rgba(31, 156, 216, 0.2) 0%, rgba(31, 156, 216, 0.08) 42%, rgba(31, 156, 216, 0) 78%);
    filter: blur(10px);
    pointer-events: none;
    z-index: 0;
}

#home-state-preview {
    position: relative;
    z-index: 1;
    width: 100%;
    height: clamp(22rem, 48vw, 36rem);
    max-height: 66vh;
    min-width: 0;
    display: block;
}

@media (max-width: 980px) {
    .state-preview-panel {
        width: min(96vw, 60rem);
        margin-top: 1rem;
    }

    #home-state-preview {
        height: clamp(18rem, 58vw, 28rem);
        max-height: none;
    }
}

@media (max-width: 760px) {
    .state-preview-panel {
        width: 100%;
        margin-top: 0.9rem;
    }

    .state-preview-canvas::before {
        inset: 6% 2% 12%;
    }

    #home-state-preview {
        height: clamp(14.5rem, 72vw, 22rem);
    }
}

/* Final hero balance + UML clarity */
.chat-hero-inner {
    width: min(76rem, 95vw);
}

.chat-hero h1 {
    margin-bottom: 0.65rem;
}

.chat-subheadline {
    margin-top: 0;
    margin-bottom: 1.15rem;
}

.chat-surface {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.22fr);
    grid-template-rows: auto;
    align-items: start;
    gap: 1.2rem;
    background: rgba(8, 20, 49, 0.2);
    border: 1px solid rgba(188, 210, 250, 0.16);
    box-shadow: 0 12px 34px rgba(2, 10, 29, 0.2);
    backdrop-filter: blur(4px);
    padding: 1rem 1.05rem 1.05rem;
}

.chat-input-row {
    grid-column: 1;
    margin-top: 0;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(198, 216, 255, 0.4);
}

.state-preview-panel {
    grid-column: 2;
    margin: 0;
    width: 100%;
    max-width: 100%;
}

.state-preview-canvas {
    padding: 0.1rem 0;
}

.state-preview-canvas::before {
    inset: 3% 4% 8%;
    border-radius: 1.6rem;
    background: radial-gradient(ellipse at center, rgba(230, 240, 255, 0.2) 0%, rgba(230, 240, 255, 0.1) 40%, rgba(230, 240, 255, 0) 76%);
    filter: blur(8px);
}

#home-state-preview {
    width: 100%;
    height: clamp(23rem, 36vw, 32rem);
    max-height: none;
}

.uml-state-title {
    font-size: 11px;
}

.uml-state-entry {
    font-size: 9px;
}

.uml-edge-line {
    stroke: #4f6899;
    stroke-width: 1.45;
}

.uml-edge-label {
    fill: #26456f;
    font-size: 8.8px;
    font-weight: 600;
}

.uml-arrow {
    fill: #4f6899;
}

@media (max-width: 1100px) {
    .chat-surface {
        grid-template-columns: 1fr;
        gap: 0.95rem;
    }

    .chat-input-row,
    .state-preview-panel {
        grid-column: 1;
    }

    #home-state-preview {
        height: clamp(18rem, 56vw, 27rem);
    }
}

@media (max-width: 760px) {
    .chat-surface {
        padding: 0.9rem 0.85rem 0.9rem;
    }

    #home-state-preview {
        height: clamp(15rem, 74vw, 22rem);
    }

    .uml-state-entry {
        font-size: 8.2px;
    }

    .uml-edge-label {
        font-size: 7.8px;
    }
}

/* Hero rebalance v2 */
.chat-hero-inner {
    width: min(82rem, 96vw);
}

.hero-main {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr);
    gap: 1.05rem;
    align-items: start;
}

.hero-left {
    display: grid;
    gap: 0.8rem;
}

.hero-left .chat-subheadline {
    margin: 0;
    max-width: 45ch;
}

.hero-left .chat-surface {
    margin-top: 0;
    width: 100%;
    display: block;
    background: rgba(8, 20, 49, 0.12);
    border: 1px solid rgba(189, 209, 248, 0.16);
    box-shadow: 0 10px 24px rgba(4, 11, 31, 0.14);
    backdrop-filter: blur(3px);
    padding: 0.7rem 0.72rem;
}

.hero-right {
    display: grid;
    align-items: start;
}

.hero-right .state-preview-panel {
    width: 100%;
    margin: 0;
}

.hero-right .state-preview-canvas {
    padding: 0;
}

.hero-right .state-preview-canvas::before {
    inset: 4% 3% 8%;
    background: radial-gradient(ellipse at center, rgba(232, 242, 255, 0.22) 0%, rgba(232, 242, 255, 0.1) 44%, rgba(232, 242, 255, 0) 78%);
}

.hero-right #home-state-preview {
    height: clamp(30rem, 50vw, 44rem);
    max-height: 74vh;
}

.hero-right .uml-edge-line {
    stroke: #415f93;
    stroke-width: 1.6;
}

.hero-right .uml-edge-label {
    fill: #1f416f;
    font-size: 9.2px;
    font-weight: 600;
}

.hero-right .uml-arrow {
    fill: #415f93;
}

.hero-right .uml-state-title {
    font-size: 12px;
}

.hero-right .uml-state-entry {
    font-size: 9.4px;
}

.chat-support-line {
    margin-top: 0.95rem;
}

@media (max-width: 1240px) {
    .hero-main {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
        gap: 0.9rem;
    }

    .hero-right #home-state-preview {
        height: clamp(24rem, 50vw, 34rem);
    }
}

@media (max-width: 980px) {
    .hero-main {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 0.75rem;
    }

    .hero-right #home-state-preview {
        height: clamp(20rem, 52vw, 30rem);
        max-height: none;
    }
}

@media (max-width: 820px) {
    .hero-main {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }

    .hero-right #home-state-preview {
        height: clamp(16rem, 74vw, 24rem);
    }
}

/* Centered hero stack + UML readability (layout only) */
.chat-hero-inner {
    width: min(72rem, 94vw);
}

.hero-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.hero-left {
    width: min(60rem, 100%);
    display: grid;
    gap: 0.75rem;
    justify-items: center;
    text-align: center;
}

.hero-left .chat-subheadline {
    margin: 0;
    max-width: 48ch;
}

.hero-left .chat-surface {
    margin: 0;
    width: min(60rem, 100%);
}

.hero-right {
    width: min(70rem, 100%);
    display: flex;
    justify-content: center;
}

.hero-right .state-preview-panel {
    width: 100%;
    margin: 0.35rem 0 0;
}

.hero-right .state-preview-canvas {
    overflow: hidden;
    padding: 0;
}

.hero-right #home-state-preview {
    width: 100%;
    height: clamp(30rem, 56vw, 46rem);
    max-height: 74vh;
}

.home-vmodel-image-wrap {
    width: 100%;
}

.home-vmodel-image {
    display: block;
    width: 100%;
    height: auto;
}

.home-vmodel-diagram-shell {
    width: min(52rem, 52vw);
    margin-inline: auto;
}

.home-vmodel-diagram {
    width: 100%;
}

.home-vmodel-diagram .presentation-inline-svg,
.home-vmodel-diagram .presentation-inline-svg svg {
    display: block;
    width: 100%;
    height: auto;
}

.uml-state-title {
    font-size: 20px;
    font-weight: 700;
    fill: #2a1f4d;
    text-rendering: geometricPrecision;
}

.uml-state-entry {
    font-size: 17px;
    font-weight: 600;
    fill: #1f2f4f;
    text-rendering: geometricPrecision;
}

.uml-edge-label {
    font-size: 10.5px;
    font-weight: 600;
}

.chat-support-line {
    margin-top: 0.95rem;
}

@media (max-width: 980px) {
    .chat-hero-inner {
        width: min(72rem, 95vw);
    }

    .hero-left,
    .hero-right {
        width: 100%;
    }

    .hero-right #home-state-preview {
        height: clamp(24rem, 64vw, 36rem);
        max-height: none;
    }
}

@media (max-width: 760px) {
    .hero-main {
        gap: 0.8rem;
    }

    .hero-left {
        gap: 0.62rem;
    }

    .hero-right #home-state-preview {
        height: clamp(18rem, 78vw, 27rem);
    }

    .uml-state-title {
        font-size: 16px;
    }

    .uml-state-entry {
        font-size: 13.5px;
    }

    .uml-edge-label {
        font-size: 9.2px;
    }
}


/* UML readability boost v2 (typography only, no geometry changes) */
.uml-state-title {
    font-size: 24px;
    font-weight: 800;
    fill: #201642;
    letter-spacing: -0.01em;
    text-rendering: geometricPrecision;
    paint-order: stroke fill;
    stroke: rgba(244, 248, 255, 0.62);
    stroke-width: 0.32;
}

.uml-state-entry {
    font-size: 19px;
    font-weight: 700;
    font-family: "Cascadia Mono", Consolas, "Courier New", monospace;
    fill: #132849;
    letter-spacing: -0.005em;
    text-rendering: geometricPrecision;
    paint-order: stroke fill;
    stroke: rgba(246, 250, 255, 0.52);
    stroke-width: 0.28;
}

.uml-edge-label {
    font-size: 12.5px;
    font-weight: 700;
    fill: #153764;
    text-rendering: geometricPrecision;
    paint-order: stroke fill;
    stroke: rgba(241, 247, 255, 0.46);
    stroke-width: 0.22;
}

@media (max-width: 760px) {
    .uml-state-title {
        font-size: 19px;
    }

    .uml-state-entry {
        font-size: 15px;
    }

    .uml-edge-label {
        font-size: 10.2px;
    }
}

/* UML typography boost v3 (titles centered, stronger hierarchy) */
.uml-state-title {
    font-size: 32px;
    font-weight: 800;
    fill: #1a1238;
    letter-spacing: -0.012em;
    text-rendering: geometricPrecision;
    paint-order: stroke fill;
    stroke: rgba(247, 251, 255, 0.66);
    stroke-width: 0.34;
}

.uml-state-entry {
    font-size: 21px;
    font-weight: 700;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    fill: #112645;
    letter-spacing: -0.004em;
    text-rendering: geometricPrecision;
    paint-order: stroke fill;
    stroke: rgba(247, 251, 255, 0.52);
    stroke-width: 0.22;
}

.uml-edge-label {
    font-size: 12.8px;
    font-weight: 700;
    fill: #123764;
    text-rendering: geometricPrecision;
}

@media (max-width: 760px) {
    .uml-state-title {
        font-size: 23px;
    }

    .uml-state-entry {
        font-size: 16.5px;
    }

    .uml-edge-label {
        font-size: 10.4px;
    }
}

/* UML typography boost v4 (aggressive, typography-only) */
.uml-state-title {
    font-size: 64px;
    font-weight: 800;
    fill: #160f34;
    letter-spacing: -0.014em;
    text-rendering: geometricPrecision;
    paint-order: stroke fill;
    stroke: rgba(248, 252, 255, 0.7);
    stroke-width: 0.38;
}

.uml-state-entry {
    font-size: 48px;
    font-weight: 700;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    fill: #102444;
    letter-spacing: -0.005em;
    text-rendering: geometricPrecision;
    paint-order: stroke fill;
    stroke: rgba(248, 252, 255, 0.56);
    stroke-width: 0.26;
}

.uml-edge-label {
    font-size: 13px;
    font-weight: 700;
    fill: #123764;
}

@media (max-width: 760px) {
    .uml-state-title {
        font-size: 42px;
    }

    .uml-state-entry {
        font-size: 31px;
    }

    .uml-edge-label {
        font-size: 10.6px;
    }
}

/* UML typography hard-lock v5 (target actual text classes) */
.uml-state-title {
    font-size: 40px !important;
    font-weight: 800 !important;
    fill: #160f34 !important;
}

.uml-state-entry {
    font-size: 30px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    fill: #102444 !important;
    transform: none !important;
}

/* UML typography balance v6 */
.uml-state-title {
    font-size: 32px !important;
    font-weight: 800 !important;
    fill: #1a1238 !important;
}

.uml-state-entry {
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    fill: #132849 !important;
}

.uml-edge-label {
    font-size: 12px !important;
    font-weight: 700 !important;
    fill: #23466f !important;
}

/* UML state color refinement v7 (styling only) */
.uml-state-rect {
    fill: #8d73c6 !important;
    stroke: #5f4b92 !important;
    stroke-width: 1.2 !important;
}

.uml-state-header {
    fill: #765dad !important;
    stroke: #584586 !important;
    stroke-width: 1 !important;
}

.uml-state-title {
    fill: #f7f3ff !important;
}

.uml-state-entry {
    fill: #f2ecff !important;
}

.uml-composite-box {
    fill: rgba(214, 228, 247, 0.72) !important;
    stroke: #7d9fce !important;
}

.uml-composite-header {
    fill: rgba(178, 201, 233, 0.76) !important;
    stroke: rgba(123, 156, 206, 0.72) !important;
}

/* UML color rollback + exact header-purple body v8 */
.uml-state-rect {
    fill: rgba(201, 186, 237, 0.9) !important;
    stroke: #7c6ea8 !important;
    stroke-width: 1.1 !important;
}

.uml-state-header {
    fill: rgba(201, 186, 237, 0.9) !important;
    stroke: rgba(121, 104, 168, 0.45) !important;
    stroke-width: 1 !important;
}

.uml-state-title {
    fill: #1a1238 !important;
}

.uml-state-entry {
    fill: #132849 !important;
}

.uml-composite-box {
    fill: url(#uml-comp-grad) !important;
    stroke: #7d9fce !important;
}

.uml-composite-header {
    fill: rgba(173, 201, 240, 0.78) !important;
    stroke: rgba(123, 156, 206, 0.65) !important;
}

/* UML transition readability v9 (routing/labels only) */
.uml-edge-line {
    stroke: #3f5f92 !important;
    stroke-width: 1.85 !important;
}

.uml-arrow {
    fill: #3f5f92 !important;
}

.uml-edge-label {
    font-size: 13px !important;
    font-weight: 700 !important;
    fill: #15355f !important;
    text-rendering: geometricPrecision;
}

.uml-edge-label-bg {
    fill: rgba(246, 250, 255, 0.78);
    stroke: rgba(114, 139, 186, 0.46);
    stroke-width: 0.85;
}

/* UML guard consistency v10 (same as state code text) */
.uml-edge-label {
    font-size: 20px !important;
    font-weight: 700 !important;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif !important;
    fill: #132849 !important;
    letter-spacing: -0.004em !important;
    text-rendering: geometricPrecision !important;
    paint-order: stroke fill;
    stroke: rgba(247, 251, 255, 0.52);
    stroke-width: 0.22;
}

.uml-edge.is-active .uml-edge-label {
    fill: #132849 !important;
}

/* UML transition weight v11 */
.uml-edge-line {
    stroke-width: 3.6px !important;
}

/* UML transition visibility v12 */
.uml-edge-line {
    stroke: #315f93 !important;
}

.uml-arrow {
    fill: #315f93 !important;
}

/* UML composite title match v13 */
.uml-composite-title {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif !important;
    font-size: 32px !important;
    font-weight: 800 !important;
    fill: #1a1238 !important;
    letter-spacing: -0.012em !important;
    text-rendering: geometricPrecision !important;
}


/* Force white only for Initializing->Open guard (normal + active) */
.uml-edge[data-id="e_init_open"] .uml-edge-label,
.uml-edge[data-id="e_init_open"].is-active .uml-edge-label,
.uml-edge.is-active[data-id="e_init_open"] .uml-edge-label {
    fill: #ffffff !important;
}


/* Home background continuity: remove separate top header band */
.site-shell:has(.chat-hero) .site-header,
.site-shell:has(.coming-soon-page) .site-header,
.site-shell:has(.mcs-page) .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: transparent;
    border-bottom-color: transparent;
    box-shadow: none;
}

.site-shell:has(.chat-hero) .site-main,
.site-shell:has(.coming-soon-page) .site-main,
.site-shell:has(.mcs-page) .site-main {
    margin-top: 0;
    padding-top: 0;
}

/* Home hero top spacing under transparent header (not for V-model hero which self-manages spacing) */
.site-shell:has(.chat-hero) .chat-hero:not(.home-vmodel-hero) {
    padding-top: clamp(7.2rem, 13.5vh, 9.8rem);
}

@media (max-width: 980px) {
    .site-shell:has(.chat-hero) .chat-hero:not(.home-vmodel-hero) {
        padding-top: clamp(6.1rem, 11.5vh, 8.2rem);
    }
}


/* Header nav left align (desktop) */
@media (min-width: 981px) {
    .site-header .container {
        width: 100%;
        max-width: none;
        margin: 0;
        padding-left: 1rem;
        padding-right: 1rem;
        justify-content: flex-start;
        gap: 1.25rem;
    }

    .site-nav {
        order: 0;
        margin-left: 0;
    }

    .nav-list {
        justify-content: flex-start;
    }

    .brand {
        order: 1;
    }
}

/* Header alignment + logo scale update */
@media (min-width: 981px) {
    .site-header .container {
        width: 100%;
        max-width: none;
        margin: 0;
        padding-left: 1rem;
        padding-right: 1rem;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
    }

    .brand {
        order: 0;
        align-self: center;
        padding-top: 0;
        padding-bottom: 0;
    }

    .brand img {
        height: 2.2rem;
    }

    .brand {
        --brand-logo-height: 2.2rem;
    }

    .site-nav {
        order: 1;
        margin-left: auto;
        margin-right: 2.75rem;
        align-self: center;
        padding-top: 0;
    }

    .nav-list {
        justify-content: flex-end;
    }
}







/* Header nav anchor (desktop) */
@media (min-width: 981px) {
    .site-header .container {
        position: relative;
    }

    .site-nav {
        order: 1;
        margin: 0;
        align-self: center;
        padding-top: 0;
    }

    .nav-list {
        justify-content: flex-end;
    }
}



/* Blazor error UI visibility + inert logo click safeguard */
#blazor-error-ui {
    background: #fff3cd;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.45rem;
}

/* Tooltip hover bridge */
.attach-wrap::after {
    content: "";
    position: absolute;
    top: 100%;
    left: -0.35rem;
    right: -0.35rem;
    height: 0.8rem;
    pointer-events: none;
}

@media (min-width: 981px) {
    .site-header .container {
        width: 100%;
        max-width: none;
        margin: 0;
        padding-left: 1rem;
        padding-right: 1rem;
        justify-content: flex-start;
        align-items: center;
        gap: 1.25rem;
    }

    .brand {
        align-self: center;
        padding-top: 0;
        padding-bottom: 0;
        --brand-logo-height: 2.2rem;
    }

    .brand img {
        height: 2.2rem;
    }

    .site-header__actions {
        align-items: center;
        margin-left: auto;
        padding-top: 0;
    }

    .site-nav {
        padding: 0;
        margin: 0;
    }

    .nav-list {
        justify-content: flex-end;
    }

    .signin-header {
        margin-left: 0;
    }
}

@media (min-width: 981px) {
    .site-header .container {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 1.25rem !important;
    }

    .site-nav {
        order: 0 !important;
        position: static !important;
        inset: auto !important;
        left: auto !important;
        right: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        width: auto !important;
    }

    .site-header__actions {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 0 !important;
        margin-left: auto !important;
        padding-top: 0 !important;
        width: auto !important;
        flex: 0 0 auto !important;
    }

    .signin-header {
        order: 1 !important;
        margin-left: 0 !important;
    }

    .nav-item-cta .signin-header {
        margin-left: 0 !important;
    }

    .nav-list {
        justify-content: flex-end !important;
    }
}


/* Keep feature tooltip open while hovered/focused */
.attach-wrap:hover .attach-tooltip,
.attach-wrap:focus-within .attach-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}



/* Composite tone refinement: premium integrated system container */
.uml-composite-box {
    fill: #5e7896 !important;
    stroke: #7893b1 !important;
    stroke-width: 1px !important;
    filter: url(#uml-comp-inner-shadow) !important;
}

.uml-composite-header {
    fill: #4f6884 !important;
    stroke: #7893b1 !important;
    stroke-width: 1px !important;
}




/* UML transition contrast refinement */
.uml-edge-line,
.uml-edge.is-active .uml-edge-line {
    stroke: #ffffff !important;
}

.uml-arrow,
.uml-edge.is-active .uml-arrow {
    fill: #ffffff !important;
}

.uml-edge-label,
.uml-edge.is-active .uml-edge-label {
    fill: #ffffff !important;
}

/* Slightly brighter composite header */
.uml-composite-header {
    fill: #5f7ea0 !important;
}

/* UML palette integration refinement (hero-blue family + richer states) */
.uml-composite-box {
    fill: #4b6688 !important;
    stroke: #6f8fb3 !important;
}

.uml-composite-header {
    fill: #5f80a9 !important;
    stroke: #7fa0c4 !important;
}

.uml-edge-line {
    stroke: #c5d9fb !important;
}

.uml-edge.is-active .uml-edge-line {
    stroke: #d9e8ff !important;
}

.uml-arrow {
    fill: #c5d9fb !important;
}

.uml-edge.is-active .uml-arrow {
    fill: #d9e8ff !important;
}

.uml-edge-label {
    fill: #d4e3fb !important;
}

.uml-edge.is-active .uml-edge-label {
    fill: #e7f1ff !important;
}

.uml-state-rect {
    fill: #8767c2 !important;
    stroke: #62499a !important;
}

.uml-state-header {
    fill: #7757ad !important;
    stroke: #5f4593 !important;
}

.uml-state-title {
    fill: #f5efff !important;
}

.uml-state-entry {
    fill: #eee6ff !important;
}

/* UML state typography refinement: calmer technical hierarchy */
.uml-state-title {
    font-weight: 600 !important;
    fill: #e7ecfa !important;
}

.uml-state-entry {
    font-weight: 500 !important;
    fill: #d5def2 !important;
}

/* Final UML color harmony refinement */
.uml-composite-title {
    fill: #d9e4f6 !important;
}

.uml-state-rect {
    fill: #806cae !important;
    stroke: #614c8d !important;
}

.uml-state-header {
    fill: #705c9b !important;
    stroke: #58467f !important;
}

.uml-state-title {
    fill: #e6ecf9 !important;
}

.uml-state-entry {
    fill: #d3ddee !important;
}

/* Composite title weight alignment with regular state names */
.uml-composite-title {
    font-weight: 600 !important;
}

/* Non-home pages (Features, placeholders): Cordis-aligned atmosphere */
.feature-page-canvas,
.coming-soon-page {
    position: relative;
    overflow: hidden;
    min-height: calc(100vh - 4.25rem);
    background:
        /* DF-signature dual side-wash */
        radial-gradient(ellipse 28% 55% at 2% 50%, rgba(226, 7, 23, 0.045) 0%, transparent 60%),
        radial-gradient(ellipse 28% 55% at 98% 50%, rgba(124, 236, 255, 0.05) 0%, transparent 60%),
        /* Cordis-blue pools */
        radial-gradient(circle at 12% 20%, rgba(31, 156, 216, 0.16) 0%, rgba(31, 156, 216, 0) 40%),
        radial-gradient(circle at 86% 18%, rgba(124, 236, 255, 0.1) 0%, rgba(124, 236, 255, 0) 46%),
        linear-gradient(146deg, #080e20 0%, #0c1428 55%, #111c38 100%);
    display: grid;
    place-items: center;
    padding: 3rem 1.2rem;
}

.feature-page-canvas::before,
.feature-page-canvas::after,
.coming-soon-page::before,
.coming-soon-page::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    filter: blur(84px);
    opacity: 0.35;
    pointer-events: none;
}

.feature-page-canvas::before,
.coming-soon-page::before {
    width: 30rem;
    height: 30rem;
    background: radial-gradient(circle, rgba(31, 156, 216, 0.55) 0%, rgba(31, 156, 216, 0) 70%);
    top: -10rem;
    left: -8rem;
}

.feature-page-canvas::after,
.coming-soon-page::after {
    width: 24rem;
    height: 24rem;
    background: radial-gradient(circle, rgba(124, 236, 255, 0.5) 0%, rgba(124, 236, 255, 0) 70%);
    right: -7rem;
    bottom: -8rem;
}

.feature-page-canvas .coming-soon-inner,
.coming-soon-inner {
    position: relative;
    z-index: 1;
    text-align: center;
    color: #eff3ff;
    max-width: 46rem;
}

.feature-page-canvas .coming-soon-inner h1,
.coming-soon-inner h1 {
    margin: 0;
    font-size: clamp(2.3rem, 4.2vw, 3.8rem);
    line-height: 1.04;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: #ffffff;
    text-wrap: balance;
}

.feature-page-canvas .coming-soon-inner p,
.coming-soon-inner p {
    margin: 1.6rem auto 0;
    padding-top: 1.4rem;
    color: rgba(239, 243, 255, 0.72);
    font-size: clamp(1.1rem, 1.6vw, 1.28rem);
    line-height: 1.65;
    font-weight: 500;
    max-width: 44rem;
    position: relative;
    text-wrap: balance;
}

/* Tri-color divider above the subtitle — matches the site signature */
.feature-page-canvas .coming-soon-inner p::before,
.coming-soon-inner p::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(120px, 26%, 220px);
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(226, 7, 23, 0.4) 18%,
        rgba(31, 156, 216, 0.7) 50%,
        rgba(124, 236, 255, 0.4) 82%,
        transparent 100%);
}



/* Full-bleed header/background continuity for home and placeholder pages */
.site-shell:has(.chat-hero) .site-header,
.site-shell:has(.feature-page-canvas) .site-header,
.site-shell:has(.coming-soon-page) .site-header,
.site-shell:has(.mcs-page) .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: transparent !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
}

.site-shell:has(.chat-hero) .site-main,
.site-shell:has(.feature-page-canvas) .site-main,
.site-shell:has(.coming-soon-page) .site-main,
.site-shell:has(.mcs-page) .site-main {
    margin-top: 0;
    padding-top: 0;
}

.site-shell:has(.chat-hero) .chat-hero:not(.home-vmodel-hero),
.site-shell:has(.feature-page-canvas) .feature-page-canvas,
.site-shell:has(.coming-soon-page) .coming-soon-page {
    padding-top: clamp(7.2rem, 13.5vh, 9.8rem);
}

@media (max-width: 980px) {
    .site-shell:has(.chat-hero) .chat-hero:not(.home-vmodel-hero),
    .site-shell:has(.feature-page-canvas) .feature-page-canvas,
    .site-shell:has(.coming-soon-page) .coming-soon-page {
        padding-top: clamp(6.1rem, 11.5vh, 8.2rem);
    }
}


/* Partner marquee strip */
.partners-strip {
    position: relative;
    z-index: 2;
    overflow: hidden;
    padding: clamp(1.35rem, 2.8vw, 2rem) 0 clamp(1.75rem, 3.4vw, 2.65rem);
    background:
        linear-gradient(180deg,
            rgba(13, 69, 112, 0) 0%,
            rgba(11, 55, 92, 0.34) 14%,
            rgba(7, 35, 61, 0.82) 34%,
            rgba(4, 20, 38, 0.96) 58%,
            rgba(3, 18, 37, 0.92) 76%,
            rgba(3, 18, 37, 0) 100%);
}

/* On the home page, keep the strip on the same background flow with only a slight separator above it */
.site-shell:has(.home-vmodel-hero) .partners-strip {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: clamp(4.7rem, 8vw, 6.2rem);
    padding-bottom: clamp(1.65rem, 3.2vw, 2.4rem);
    background: var(--bg-1);
    border-top: 0;
    box-shadow: none;
    isolation: isolate;
}

.site-shell:has(.home-vmodel-hero) .home-vmodel-hero .partners-strip {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    background: transparent;
    --partner-logo-slot-h: 76px;
    --partner-logo-h: 42px;
}

.site-shell:has(.home-vmodel-hero) .partners-strip::before,
.site-shell:has(.home-vmodel-hero) .partners-strip::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.site-shell:has(.home-vmodel-hero) .home-vmodel-hero .partners-strip::before,
.site-shell:has(.home-vmodel-hero) .home-vmodel-hero .partners-strip::after {
    display: none;
}

.site-shell:has(.home-vmodel-hero) .home-vmodel-hero .partners-strip-inner {
    display: grid;
    justify-items: center;
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: clamp(1rem, 2vw, 1.5rem);
    box-sizing: border-box;
}

.site-shell:has(.home-vmodel-hero) .home-vmodel-hero .partners-strip-inner h2 {
    width: auto;
    justify-self: center;
    text-align: center;
}

.site-shell:has(.home-vmodel-hero) .partners-strip::before {
    background: radial-gradient(
        ellipse at center,
        rgba(0, 0, 0, 0) 66%,
        rgba(0, 0, 0, 0.09) 100%
    );
}

.site-shell:has(.home-vmodel-hero) .partners-strip::after {
    display: none;
}

.partners-strip-inner {
    position: relative;
    z-index: 1;
    margin-bottom: 0;
}

.partners-strip-inner h2 {
    margin: 0 0 clamp(0.8rem, 1.8vw, 1.15rem);
    text-align: center;
    font-size: clamp(1.1rem, 1.7vw, 1.35rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
    color: rgba(214, 230, 250, 0.78);
}

.partners-marquee {
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
}

.partners-marquee-track {
    display: flex;
    align-items: center;
    width: max-content;
    gap: 0;
    animation: cordisPartnersMarquee 960s linear infinite;
    will-change: transform;
}

.partners-logo-group {
    display: flex;
    align-items: center;
    gap: 0;
    flex: 0 0 auto;
}

.partners-logo-group > .partners-logo-item {
    margin-right: clamp(2rem, 3vw, 3rem) !important;
}

/* Why Cordis: model-driven generation interactive section */
.why-cordis-page {
    min-height: auto;
    padding: clamp(6.2rem, 7.4vw, 7.6rem) 0 clamp(1.6rem, 2.8vw, 2.4rem);
}

.why-cordis-inner {
    max-width: 1240px;
}

.why-cordis-head {
    text-align: center;
    margin-bottom: clamp(0.75rem, 1.4vw, 1.1rem);
}

.why-cordis-head h1 {
    margin: 0;
    color: #ecf5ff;
    font-size: clamp(1.9rem, 3vw, 2.75rem);
    letter-spacing: -0.015em;
}

.why-cordis-head p {
    margin: 0.7rem 0 0;
    color: rgba(218, 236, 255, 0.9);
    font-size: clamp(1rem, 1.45vw, 1.18rem);
}

.model-code-demo {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(1.2rem, 2vw, 1.8rem);
    padding: clamp(1rem, 1.6vw, 1.4rem);
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background:
        linear-gradient(150deg, rgba(17, 34, 58, 0.88), rgba(13, 27, 47, 0.92)),
        radial-gradient(ellipse 28% 55% at 2% 50%, rgba(226, 7, 23, 0.06) 0%, transparent 60%),
        radial-gradient(ellipse 28% 55% at 98% 50%, rgba(124, 236, 255, 0.07) 0%, transparent 60%),
        radial-gradient(circle at 20% 18%, rgba(31, 156, 216, 0.2), transparent 55%);
    box-shadow: 0 20px 44px rgba(2, 8, 24, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

/* Top tri-color accent bar — same signature as every other card/panel on the site */
.model-code-demo::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(226, 7, 23, 0.4) 18%,
        rgba(31, 156, 216, 0.7) 50%,
        rgba(124, 236, 255, 0.4) 82%,
        transparent 100%);
    pointer-events: none;
}

.model-pane,
.code-pane {
    position: relative;
    border-radius: 16px;
    padding: clamp(0.95rem, 1.45vw, 1.25rem);
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: linear-gradient(145deg, rgba(17, 34, 58, 0.88), rgba(13, 27, 47, 0.92));
    overflow: hidden;
}

/* Each pane gets a subtle top-hairline accent:
   Model pane = Cordis brand blue (the design source)
   Code pane  = Cordis green       (the generated output — growth/success) */
.model-pane::before,
.code-pane::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    pointer-events: none;
}

.model-pane::before {
    background: linear-gradient(90deg, rgba(31, 156, 216, 0.8) 0%, rgba(31, 156, 216, 0.1) 70%, transparent 100%);
}

.code-pane::before {
    background: linear-gradient(90deg, rgba(59, 170, 53, 0.75) 0%, rgba(59, 170, 53, 0.1) 70%, transparent 100%);
}

.why-cordis-demo-ready .model-pane,
.why-cordis-demo-ready .code-pane {
    transition: transform 380ms ease, opacity 300ms ease;
}

.why-cordis-demo-ready.is-code-phase .model-pane {
    transform: translateX(-8px);
}

.why-cordis-demo-ready.is-code-phase .code-pane {
    transform: translateX(3px);
}

.model-pane h2,
.code-pane h2 {
    margin: 0 0 0.75rem;
    color: rgba(224, 240, 255, 0.94);
    font-size: clamp(0.94rem, 1.2vw, 1.08rem);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.model-svg {
    width: 100%;
    height: auto;
    display: block;
}

.sm-node,
.sm-transition,
.sm-pulse {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    transition: opacity 360ms ease, transform 420ms ease, filter 300ms ease;
}

/* Default node — Cordis brand blue fill (for Prepare, Pick, Place — the work states) */
.sm-node rect {
    fill: rgba(31, 156, 216, 0.18);
    stroke: rgba(31, 156, 216, 0.55);
    stroke-width: 1.3px;
}

/* Idle — the starting / waiting state. Cordis red whisper — not failure, but tension. */
.sm-node.sm-initial rect,
.sm-node[data-part="state-idle"] rect {
    fill: rgba(226, 7, 23, 0.16);
    stroke: rgba(226, 7, 23, 0.5);
}

/* Complete — the successful end state. Cordis green = growth / success. */
.sm-node[data-part="state-complete"] rect {
    fill: rgba(59, 170, 53, 0.18);
    stroke: rgba(59, 170, 53, 0.55);
}

.sm-node text {
    fill: #f2f7ff;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.sm-transition line {
    stroke: rgba(228, 242, 255, 0.88);
    stroke-width: 2px;
    marker-end: url(#why-cordis-arrow);
}

.sm-transition text {
    fill: rgba(220, 235, 255, 0.92);
    font-size: 13px;
    font-weight: 500;
}

#why-cordis-arrow path {
    fill: rgba(228, 242, 255, 0.95);
}

.sm-pulse {
    fill: rgba(95, 197, 255, 0.9);
}

.sm-pulse.is-active {
    animation: whyCordisTick 840ms ease-in-out 2;
}

.sm-node.is-visible,
.sm-transition.is-visible,
.sm-pulse.is-visible {
    opacity: 1;
    transform: none;
}

.sm-node.is-active rect {
    filter: drop-shadow(0 0 14px rgba(124, 236, 255, 0.55));
    stroke: rgba(124, 236, 255, 0.9);
}

.sm-node[data-part="state-idle"].is-active rect {
    filter: drop-shadow(0 0 14px rgba(226, 7, 23, 0.5));
    stroke: rgba(255, 120, 120, 0.9);
}

.sm-node[data-part="state-complete"].is-active rect {
    filter: drop-shadow(0 0 14px rgba(59, 170, 53, 0.5));
    stroke: rgba(120, 220, 115, 0.9);
}

.sm-transition.is-active line {
    stroke: #7cecff;
}

.generated-code {
    margin: 0;
    min-height: 420px;
    padding: 0.7rem 0.9rem;
    border-radius: 12px;
    border: 1px solid rgba(172, 207, 245, 0.2);
    background: rgba(4, 11, 28, 0.5);
}

.generated-code code {
    display: block;
    font-family: "JetBrains Mono", "Consolas", "SFMono-Regular", monospace;
    font-size: clamp(0.8rem, 0.96vw, 0.95rem);
    line-height: 1.6;
    color: #d7e7fb;
}

.code-line {
    display: block;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 260ms ease, transform 260ms ease, color 220ms ease;
}

.code-line.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.code-line.is-active {
    color: #ffffff;
    text-shadow: 0 0 14px rgba(109, 203, 255, 0.4);
}

.generation-note {
    margin: 0.8rem 0 0;
    color: rgba(208, 230, 252, 0.8);
    font-size: 0.92rem;
    letter-spacing: 0.01em;
}

.why-cordis-demo-ready .sm-node {
    transform: translateY(10px) scale(0.985);
}

.why-cordis-demo-ready .sm-transition {
    transform: translateX(-6px);
}

.why-cordis-demo-ready .sm-pulse {
    transform: scale(0.5);
}

@media (hover: hover) {
    .sm-node[data-part]:hover rect {
        filter: drop-shadow(0 0 12px rgba(101, 196, 255, 0.58));
    }
}

@media (max-width: 1100px) {
    .model-code-demo {
        grid-template-columns: 1fr;
    }

    .generated-code {
        min-height: 350px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sm-node,
    .sm-transition,
    .sm-pulse,
    .code-line {
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

@keyframes whyCordisTick {
    0% { transform: scale(1); opacity: 0.72; }
    45% { transform: scale(1.75); opacity: 0.98; }
    100% { transform: scale(1); opacity: 0.75; }
}

/* Why Cordis — Cordis-aligned dark atmosphere */
.why-cordis-page {
    background:
        radial-gradient(ellipse 28% 55% at 2% 50%, rgba(226, 7, 23, 0.045) 0%, transparent 60%),
        radial-gradient(ellipse 28% 55% at 98% 50%, rgba(124, 236, 255, 0.05) 0%, transparent 60%),
        radial-gradient(115% 95% at 12% 6%, rgba(31, 156, 216, 0.2) 0%, rgba(31, 156, 216, 0.12) 30%, rgba(31, 156, 216, 0.06) 55%, rgba(5, 14, 42, 0) 76%),
        linear-gradient(165deg, #080e20 0%, #0c1428 45%, #111c38 100%);
}

.why-cordis-inner {
    max-width: min(2100px, 99vw);
}

.why-cordis-head h1 {
    color: #ffffff;
    font-size: clamp(2.3rem, 4.2vw, 3.8rem);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.04em;
    text-wrap: balance;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    text-shadow: 0 0 24px rgba(31, 156, 216, 0.22);
}

.why-cordis-head h1::before,
.why-cordis-head h1::after {
    content: none !important;
    display: none !important;
}

/* Lead paragraph — tri-color hairline above, matching the site signature */
.why-cordis-head p {
    position: relative;
    color: rgba(239, 243, 255, 0.78);
    font-size: clamp(1.1rem, 1.6vw, 1.3rem);
    line-height: 1.55;
    font-weight: 500;
    letter-spacing: -0.01em;
    padding-top: clamp(1.3rem, 2vw, 1.7rem);
    max-width: 48rem;
    margin-inline: auto;
    text-wrap: balance;
}

.why-cordis-head p::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(140px, 30%, 260px);
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(226, 7, 23, 0.4) 18%,
        rgba(31, 156, 216, 0.7) 50%,
        rgba(124, 236, 255, 0.4) 82%,
        transparent 100%);
}

.model-code-demo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    gap: clamp(2.1rem, 4vw, 3.8rem);
    padding: clamp(0.8rem, 1.5vw, 1.2rem) 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.model-pane,
.code-pane {
    position: relative;
    border-radius: 18px;
    padding: clamp(0.9rem, 1.25vw, 1.08rem) clamp(0.95rem, 1.35vw, 1.2rem);
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: linear-gradient(155deg, rgba(17, 34, 58, 0.6), rgba(13, 27, 47, 0.55));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    min-height: 0;
    height: auto;
    overflow: hidden;
}

.model-pane {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.code-pane {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    box-shadow:
        0 0 26px rgba(59, 170, 53, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.model-pane h2,
.code-pane h2 {
    margin-bottom: 0.5rem;
    color: rgba(227, 241, 255, 0.95);
    font-size: clamp(0.98rem, 1.1vw, 1.12rem);
}

/* Larger variant — same semantic coloring (Cordis blue default, red for Idle, green for Complete) */
.sm-node rect {
    fill: rgba(31, 156, 216, 0.2);
    stroke: rgba(31, 156, 216, 0.55);
}

.sm-node.sm-initial rect,
.sm-node[data-part="state-idle"] rect {
    fill: rgba(226, 7, 23, 0.18);
    stroke: rgba(226, 7, 23, 0.55);
}

.sm-node[data-part="state-complete"] rect {
    fill: rgba(59, 170, 53, 0.2);
    stroke: rgba(59, 170, 53, 0.6);
}

.sm-node text {
    font-size: 24px;
    font-weight: 550;
    fill: rgba(236, 246, 255, 0.96);
}

.sm-transition line {
    stroke: rgba(224, 240, 255, 0.8);
    stroke-width: 2.4px;
    marker-end: url(#why-cordis-arrow);
}

.sm-transition polyline {
    fill: none;
    stroke: rgba(224, 240, 255, 0.8);
    stroke-width: 2.4px;
    marker-end: url(#why-cordis-arrow);
}

.sm-transition text {
    fill: rgba(214, 233, 255, 0.94);
    font-size: 24px;
    font-weight: 600;
}

.model-svg {
    width: 100%;
    height: auto;
    max-height: calc(100% - 1.85rem);
    margin-top: 0.1rem;
    margin-bottom: 0;
}

#why-cordis-arrow path {
    fill: rgba(226, 242, 255, 0.98);
}

.generated-code {
    min-height: auto;
    height: auto;
    border: 1px solid rgba(171, 205, 245, 0.15);
    background: rgba(3, 10, 25, 0.42);
    box-shadow: inset 0 0 0 1px rgba(223, 239, 255, 0.03);
    overflow: visible;
    padding: 0.18rem 0.42rem 0.24rem;
}

.generated-code code {
    font-size: clamp(0.88rem, 0.98vw, 0.98rem);
    line-height: 1.3;
    color: rgba(217, 233, 249, 0.96);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: auto;
    height: 100%;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
}

.generated-code .k {
    color: #dceeff;
}

.generated-code .a {
    color: #9fd0ff;
}

.code-line.is-active {
    color: #f4faff;
    text-shadow: 0 0 15px rgba(115, 199, 255, 0.34);
}

.code-line {
    margin: 0;
    white-space: pre;
}

.code-block {
    display: block;
    border-radius: 10px;
    padding: 0.04rem 0.2rem;
    opacity: 0.46;
    max-height: none;
    overflow: visible;
    transition: opacity 240ms ease, background-color 220ms ease;
    margin: 0 0 0.06rem;
}

.code-block.is-visible {
    opacity: 0.66;
}

.code-block.is-active {
    opacity: 1;
    max-height: none;
    background: rgba(104, 180, 255, 0.12);
}

@media (prefers-reduced-motion: reduce) {
    .sm-transition line,
    .sm-transition polyline {
        transition: none !important;
    }
}

@media (max-width: 1100px) {
    .model-code-demo {
        grid-template-columns: 1fr;
    }

    .model-pane,
    .code-pane {
        min-height: 0;
        height: auto;
    }

    .generated-code {
        height: auto;
    }

    .generated-code code {
        white-space: pre-wrap;
    }
}

/* Why Cordis immediate layout: model + generated code side-by-side */
.model-code-demo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(1.25rem, 2.6vw, 2.2rem);
}

.model-pane,
.code-pane {
    transition: transform 220ms ease, opacity 220ms ease;
}

@media (max-width: 1100px) {
    .model-code-demo {
        grid-template-columns: 1fr !important;
    }
}

/* Why Cordis: match homepage floating header behavior + tighter top rhythm */
.site-shell:has(.why-cordis-page) .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: transparent !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
}

.site-shell:has(.why-cordis-page) .site-main {
    margin-top: 0;
    padding-top: 0;
}

.site-shell:has(.why-cordis-page) .why-cordis-page {
    padding-top: clamp(5.4rem, 8.4vh, 6.6rem);
}

@media (max-width: 980px) {
    .site-shell:has(.why-cordis-page) .why-cordis-page {
        padding-top: clamp(5rem, 8.2vh, 6rem);
    }
}

/* Why Cordis: supported hardware middle column (always visible) */
.why-cordis-page .model-code-demo {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, clamp(220px, 20vw, 286px)) minmax(0, 1.3fr) !important;
    gap: clamp(1.25rem, 2.6vw, 2.2rem) !important;
    align-items: stretch !important;
}

.why-cordis-page .model-pane,
.why-cordis-page .brands-pane,
.why-cordis-page .code-pane {
    min-height: 0;
    height: auto;
    display: flex;
    flex-direction: column;
}

.why-cordis-page .model-pane,
.why-cordis-page .code-pane {
    padding-top: clamp(0.72rem, 0.95vw, 0.86rem);
    padding-bottom: clamp(0.72rem, 0.95vw, 0.86rem);
}

.why-cordis-page .brands-pane {
    border-radius: 18px;
    padding: clamp(0.72rem, 0.95vw, 0.86rem) clamp(0.75rem, 1.05vw, 0.95rem);
    border: 1px solid rgba(183, 214, 250, 0.16);
    background: linear-gradient(155deg, rgba(10, 27, 57, 0.54), rgba(9, 25, 51, 0.44));
    box-shadow: inset 0 1px 0 rgba(235, 245, 255, 0.06);
}

.why-cordis-page .brands-pane h2 {
    margin: 0 0 0.4rem;
    color: rgba(227, 241, 255, 0.95);
    font-size: clamp(0.84rem, 0.92vw, 0.98rem);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-align: center;
}

.why-cordis-page .brands-ticker {
    position: relative;
    flex: 1;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
}

.why-cordis-page .brands-ticker-track {
    display: flex;
    flex-direction: column;
    animation: whyCordisHardwareTicker 24s linear infinite;
}

.why-cordis-page .brands-ticker-run {
    display: flex;
    flex-direction: column;
    gap: clamp(0.8rem, 1.6vh, 1.1rem);
    padding: 0.22rem 0;
}

.why-cordis-page .brands-logo-item {
    --partner-logo-slot-h: 44px;
    --partner-logo-h: 34px;
    height: var(--partner-logo-slot-h);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
}

.why-cordis-page .brands-logo-item img {
    width: min(150px, 88%);
    height: var(--partner-logo-h);
    object-fit: contain;
    filter: brightness(0) invert(1) saturate(0) contrast(1.05);
    opacity: 0.84;
    display: block;
}


@keyframes whyCordisHardwareTicker {
    from { transform: translateY(0); }
    to { transform: translateY(-50%); }
}

@media (max-width: 1100px) {
    .why-cordis-page .model-code-demo {
        grid-template-columns: 1fr !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .why-cordis-page .brands-ticker-track {
        animation: none !important;
    }
}

/* Why Cordis compact three-panel layout */
.why-cordis-page {
    padding-top: clamp(4.5rem, 5.8vw, 5.4rem) !important;
    padding-bottom: clamp(1rem, 1.8vw, 1.5rem) !important;
}

.site-shell:has(.why-cordis-page) .why-cordis-page {
    padding-top: clamp(4.5rem, 6.2vh, 5.3rem) !important;
}

.why-cordis-page .why-cordis-head {
    margin-bottom: clamp(0.45rem, 1vw, 0.75rem) !important;
}

.why-cordis-page .why-cordis-head p {
    margin-top: 0.45rem !important;
}

.why-cordis-page .model-code-demo {
    align-items: stretch !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    gap: clamp(1rem, 2vw, 1.45rem) !important;
}

.why-cordis-page .model-pane,
.why-cordis-page .brands-pane,
.why-cordis-page .code-pane {
    min-height: unset !important;
    max-height: none !important;
    height: auto !important;
    padding-top: clamp(0.65rem, 0.9vw, 0.8rem) !important;
    padding-bottom: clamp(0.65rem, 0.9vw, 0.8rem) !important;
}

.why-cordis-page .generated-code {
    min-height: unset !important;
    max-height: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0.16rem 0.4rem 0.2rem !important;
    overflow: visible !important;
}

.why-cordis-page .generated-code code {
    display: block !important;
    min-height: unset !important;
    max-height: none !important;
    height: auto !important;
    line-height: 1.24 !important;
}

.why-cordis-page .generation-note {
    margin-top: 0.45rem !important;
}

/* Why Cordis root-cause fix: ticker content was driving row height */
.site-shell:has(.why-cordis-page) .why-cordis-page {
    padding-top: clamp(3.2rem, 4.8vh, 4.1rem) !important;
    padding-bottom: clamp(0.7rem, 1.2vw, 1.05rem) !important;
}


.why-cordis-page .why-cordis-head {
    margin-bottom: clamp(0.3rem, 0.7vw, 0.5rem) !important;
}

.why-cordis-page .model-svg {
    max-height: clamp(250px, 32vw, 318px) !important;
}

.why-cordis-page .brands-ticker {
    flex: 0 0 auto !important;
    height: clamp(250px, 32vw, 318px) !important;
    min-height: 0 !important;
}

/* Site-main behind why-cordis pages — Cordis dark navy with DF-signature atmosphere */
.site-shell:has(.why-cordis-page) .site-main {
    background:
        radial-gradient(ellipse 28% 55% at 2% 50%, rgba(226, 7, 23, 0.045) 0%, transparent 60%),
        radial-gradient(ellipse 28% 55% at 98% 50%, rgba(124, 236, 255, 0.05) 0%, transparent 60%),
        radial-gradient(circle at 12% 20%, rgba(31, 156, 216, 0.18) 0%, rgba(31, 156, 216, 0) 40%),
        radial-gradient(circle at 88% 15%, rgba(124, 236, 255, 0.12) 0%, rgba(124, 236, 255, 0) 42%),
        linear-gradient(140deg, #080e20 0%, #0c1428 55%, #111c38 100%) !important;
}

.site-shell:has(.why-cordis-page) .why-cordis-page {
    background: transparent !important;
}

/* Why Cordis panel balance: spacing + equal panel heights + ticker viewport */
.why-cordis-page .model-code-demo {
    margin-top: clamp(1.9rem, 3vw, 2.7rem) !important;
}

.why-cordis-page {
    --why-panels-height: clamp(430px, 39vw, 520px);
}

.why-cordis-page .model-pane,
.why-cordis-page .brands-pane,
.why-cordis-page .code-pane {
    height: var(--why-panels-height) !important;
    min-height: var(--why-panels-height) !important;
    max-height: var(--why-panels-height) !important;
    align-self: stretch !important;
}

.why-cordis-page .brands-pane {
    display: grid !important;
    grid-template-rows: auto 1fr !important;
}

.why-cordis-page .brands-ticker {
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

@media (max-width: 1100px) {
    .why-cordis-page .model-pane,
    .why-cordis-page .brands-pane,
    .why-cordis-page .code-pane {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }
}

.partners-logo-run {
    display: flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
}

.partners-logo-run > .partners-logo-item {
    margin-right: clamp(2rem, 3vw, 3rem) !important;
}

.partners-marquee-track img {
    width: auto;
    height: clamp(28px, 2.6vw, 36px);
    object-fit: contain;
    opacity: 0.68;
    filter: brightness(0) invert(1) saturate(0) contrast(1.08);
    transition: opacity 220ms ease;
}

.partners-marquee-track img:hover {
    opacity: 1;
}

.partners-marquee-track.is-js-marquee {
    animation: none !important;
}

@keyframes cordisPartnersMarquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-96%);
    }
}

@media (max-width: 980px) {
    .partners-strip {
        padding-top: 1.1rem;
        padding-bottom: 1.55rem;
    }

    .site-shell:has(.home-vmodel-hero) .partners-strip {
        padding-top: 1.1rem;
        padding-bottom: 1.65rem;
        --partner-logo-slot-h: 66px;
        --partner-logo-h: 34px;
    }

    .partners-logo-run img {
        height: clamp(24px, 5.4vw, 30px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .partners-marquee {
        overflow-x: auto;
        mask-image: none;
        -webkit-mask-image: none;
    }

    .partners-marquee-track {
        animation: none;
        width: auto;
    }
}

/* ─── Partners strip tuning knobs — edit these to adjust sizing and per-logo scale ─── */
.partners-strip {
    /* Slot height and base rendered logo height */
    --partner-logo-slot-h: 64px;
    --partner-logo-h: 34px;
    /* Per-logo scale tuning (1 = no adjustment, >1 = larger, <1 = smaller) */
    --logo-beckhoff-scale: 0.8;
    --logo-capgemini-scale: 1.2;
    --logo-festo-scale: 0.75;
    --logo-inosoft-scale: 1.2;
    --logo-mtc-scale: 1.5;
    --logo-phoenix-scale: 01.1;
    --logo-rockwell-scale: 1.1;
    --logo-siemens-scale: 0.75;
    --logo-weidmuller-scale: 0.80;
    --logo-additive-industries-scale: 1.3;
    --logo-asml-scale: 1;
    --logo-besi-scale: 1.7;
    --logo-philips-scale: 0.9;
    --logo-rijkswaterstaat-scale: 2.9;
    --logo-settels-scale: 1.1;
    --logo-smit-scale: 4;
    --logo-tsg-scale: 1.7;
    --logo-hardram-scale: 1.25;
    --logo-pharmatool-scale: 1;
    --logo-vdl-scale: 2.8;
    /* Per-logo horizontal offsets (positive = right, negative = left) */
    --logo-beckhoff-offset: 110px;
    --logo-capgemini-offset: 50px;
    --logo-festo-offset: 50px;
    --logo-inosoft-offset: 50px;
    --logo-mtc-offset: 70px;
    --logo-phoenix-offset: 60px;
    --logo-rockwell-offset: 60px;
    --logo-siemens-offset: 35px;
    --logo-weidmuller-offset: 5px;
    --logo-additive-industries-offset: 100px;
    --logo-asml-offset: 60px;
    --logo-besi-offset: 75px;
    --logo-philips-offset: 70px;
    --logo-rijkswaterstaat-offset: 100px;
    --logo-settels-offset: 120px;
    --logo-smit-offset: 120px;
    --logo-tsg-offset: 100px;
    --logo-hardram-offset: 90px;
    --logo-pharmatool-offset: 80px;
    --logo-vdl-offset: 150px;
}

/* Widen the visible marquee area by ~20% vs the default container */
.partners-strip .partners-strip-inner {
    width: min(1420px, 96vw);
    max-width: none;
}

/* ─── Logo normalization: uniform slot height + per-logo scale ─── */
.partners-logo-run {
    align-items: center;
}

.partners-logo-item {
    --partner-logo-scale: 1;
    --partner-logo-offset: 0px;
    height: var(--partner-logo-slot-h);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin: 0;
    margin-inline-start: var(--partner-logo-offset);
    padding: 0;
}

.partners-logo-item img {
    height: var(--partner-logo-h) !important;
    width: auto !important;
    max-height: none;
    max-width: none;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    padding: 0;
    opacity: 0.68;
    transform: scale(var(--partner-logo-scale));
    transform-origin: center center;
}

.partners-logo-item:hover img {
    opacity: 1;
}

/* Per-logo scale assignments — driven by the tuning knobs above */
.partners-logo-item.logo-beckhoff   { --partner-logo-scale: var(--logo-beckhoff-scale); }
.partners-logo-item.logo-capgemini  { --partner-logo-scale: var(--logo-capgemini-scale); }
.partners-logo-item.logo-festo      { --partner-logo-scale: var(--logo-festo-scale); }
.partners-logo-item.logo-inosoft    { --partner-logo-scale: var(--logo-inosoft-scale); }
.partners-logo-item.logo-mtc        { --partner-logo-scale: var(--logo-mtc-scale); }
.partners-logo-item.logo-phoenix    { --partner-logo-scale: var(--logo-phoenix-scale); }
.partners-logo-item.logo-rockwell   { --partner-logo-scale: var(--logo-rockwell-scale); }
.partners-logo-item.logo-siemens    { --partner-logo-scale: var(--logo-siemens-scale); }
.partners-logo-item.logo-weidmuller { --partner-logo-scale: var(--logo-weidmuller-scale); }
.partners-logo-item.logo-additive-industries { --partner-logo-scale: var(--logo-additive-industries-scale); }
.partners-logo-item.logo-asml               { --partner-logo-scale: var(--logo-asml-scale); }
.partners-logo-item.logo-besi               { --partner-logo-scale: var(--logo-besi-scale); }
.partners-logo-item.logo-philips            { --partner-logo-scale: var(--logo-philips-scale); }
.partners-logo-item.logo-rijkswaterstaat    { --partner-logo-scale: var(--logo-rijkswaterstaat-scale); }
.partners-logo-item.logo-settels            { --partner-logo-scale: var(--logo-settels-scale); }
.partners-logo-item.logo-smit               { --partner-logo-scale: var(--logo-smit-scale); }
.partners-logo-item.logo-tsg                { --partner-logo-scale: var(--logo-tsg-scale); }
.partners-logo-item.logo-hardram            { --partner-logo-scale: var(--logo-hardram-scale); }
.partners-logo-item.logo-pharmatool         { --partner-logo-scale: var(--logo-pharmatool-scale); }
.partners-logo-item.logo-vdl                { --partner-logo-scale: var(--logo-vdl-scale); }
.partners-logo-item.logo-beckhoff           { --partner-logo-offset: var(--logo-beckhoff-offset); }
.partners-logo-item.logo-capgemini          { --partner-logo-offset: var(--logo-capgemini-offset); }
.partners-logo-item.logo-festo              { --partner-logo-offset: var(--logo-festo-offset); }
.partners-logo-item.logo-inosoft            { --partner-logo-offset: var(--logo-inosoft-offset); }
.partners-logo-item.logo-mtc                { --partner-logo-offset: var(--logo-mtc-offset); }
.partners-logo-item.logo-phoenix            { --partner-logo-offset: var(--logo-phoenix-offset); }
.partners-logo-item.logo-rockwell           { --partner-logo-offset: var(--logo-rockwell-offset); }
.partners-logo-item.logo-siemens            { --partner-logo-offset: var(--logo-siemens-offset); }
.partners-logo-item.logo-weidmuller         { --partner-logo-offset: var(--logo-weidmuller-offset); }
.partners-logo-item.logo-additive-industries { --partner-logo-offset: var(--logo-additive-industries-offset); }
.partners-logo-item.logo-asml               { --partner-logo-offset: var(--logo-asml-offset); }
.partners-logo-item.logo-besi               { --partner-logo-offset: var(--logo-besi-offset); }
.partners-logo-item.logo-philips            { --partner-logo-offset: var(--logo-philips-offset); }
.partners-logo-item.logo-rijkswaterstaat    { --partner-logo-offset: var(--logo-rijkswaterstaat-offset); }
.partners-logo-item.logo-settels            { --partner-logo-offset: var(--logo-settels-offset); }
.partners-logo-item.logo-smit               { --partner-logo-offset: var(--logo-smit-offset); }
.partners-logo-item.logo-tsg                { --partner-logo-offset: var(--logo-tsg-offset); }
.partners-logo-item.logo-hardram            { --partner-logo-offset: var(--logo-hardram-offset); }
.partners-logo-item.logo-pharmatool         { --partner-logo-offset: var(--logo-pharmatool-offset); }
.partners-logo-item.logo-vdl                { --partner-logo-offset: var(--logo-vdl-offset); }

@media (max-width: 980px) {
    .partners-strip {
        --partner-logo-slot-h: 36px;
        --partner-logo-h: 28px;
    }
}

@media (max-width: 640px) {
    .partners-strip {
        --partner-logo-slot-h: 28px;
        --partner-logo-h: 22px;
    }

    .site-shell:has(.home-vmodel-hero) .home-vmodel-hero .partners-strip {
        --partner-logo-slot-h: 49px;
        --partner-logo-h: 27px;
        --logo-additive-industries-offset: 65px;
        --logo-asml-offset: 59px;
        --logo-besi-offset: 49px;
        --logo-philips-offset: 46px;
        --logo-rijkswaterstaat-offset: 65px;
        --logo-settels-offset: 78px;
        --logo-smit-offset: 78px;
        --logo-tsg-offset: 65px;
        --logo-hardram-offset: 59px;
        --logo-pharmatool-offset: 46px;
        --logo-vdl-offset: 98px;
    }

    .site-shell:has(.home-vmodel-hero) .home-vmodel-hero .partners-logo-group > .partners-logo-item {
        margin-right: clamp(0.65rem, 2.1vw, 1rem) !important;
    }

    .partners-logo-group > .partners-logo-item {
        margin-right: clamp(1rem, 3.2vw, 1.5rem) !important;
    }
}

@media (max-width: 420px) {
    .partners-strip {
        --partner-logo-slot-h: 24px;
        --partner-logo-h: 18px;
    }
}

/* Why Cordis dominant three-panel scale-up */
.why-cordis-page .container.why-cordis-inner {
    width: min(1560px, 96vw) !important;
    max-width: none !important;
}

.why-cordis-page {
    --why-panels-height: clamp(500px, 43vw, 620px) !important;
}

.why-cordis-page .model-code-demo {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, clamp(230px, 19vw, 300px)) minmax(0, 1.45fr) !important;
    gap: clamp(1.15rem, 2.2vw, 1.9rem) !important;
}

.why-cordis-page .model-pane,
.why-cordis-page .code-pane {
    padding: clamp(0.58rem, 0.85vw, 0.8rem) clamp(0.7rem, 1vw, 0.9rem) !important;
}

.why-cordis-page .brands-pane {
    padding: clamp(0.58rem, 0.85vw, 0.8rem) clamp(0.62rem, 0.95vw, 0.84rem) !important;
}

.why-cordis-page .model-pane .model-svg {
    width: min(80%, 880px) !important;
    max-height: none !important;
    margin: 0.18rem auto 0 !important;
}

.why-cordis-page .generated-code {
    padding: 0.26rem 0.5rem 0.3rem !important;
}

@media (max-width: 1100px) {
    .why-cordis-page .container.why-cordis-inner {
        width: min(1180px, 94vw) !important;
    }
}

/* Why Cordis layout redesign: dominant model left, stacked right side */
.why-cordis-page {
    --why-panels-height: clamp(540px, 46vw, 680px) !important;
}

.why-cordis-page .model-code-demo {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr) !important;
    grid-template-rows: 0.4fr 0.6fr !important;
    grid-template-areas:
        "model brands"
        "model code" !important;
    height: var(--why-panels-height) !important;
    gap: clamp(1.05rem, 2vw, 1.65rem) !important;
    align-items: stretch !important;
}

.why-cordis-page .model-pane {
    grid-area: model !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

.why-cordis-page .brands-pane {
    grid-area: brands !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: grid !important;
    grid-template-rows: auto 1fr !important;
}

.why-cordis-page .code-pane {
    grid-area: code !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

.why-cordis-page .model-pane,
.why-cordis-page .brands-pane,
.why-cordis-page .code-pane {
    padding: clamp(0.56rem, 0.8vw, 0.75rem) clamp(0.66rem, 0.95vw, 0.86rem) !important;
}

.why-cordis-page .model-pane .model-svg {
    width: min(80%, 920px) !important;
    margin: 0.12rem auto 0 !important;
}

.why-cordis-page .brands-ticker {
    height: auto !important;
    min-height: 0 !important;
}

@media (max-width: 1100px) {
    .why-cordis-page .model-code-demo {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
        grid-template-areas:
            "model"
            "brands"
            "code" !important;
        height: auto !important;
    }
}

/* Why Cordis premium rebalance refinement */
.why-cordis-page .model-code-demo {
    grid-template-rows: 0.34fr 0.66fr !important;
    gap: clamp(0.82rem, 1.45vw, 1.2rem) !important;
}

.why-cordis-page .model-pane {
    padding: clamp(0.46rem, 0.68vw, 0.62rem) clamp(0.6rem, 0.82vw, 0.76rem) !important;
}

.why-cordis-page .model-pane .model-svg {
    width: min(92%, 1040px) !important;
    margin: 0.02rem auto 0 !important;
}

.why-cordis-page .brands-pane {
    padding-top: clamp(0.44rem, 0.62vw, 0.56rem) !important;
    padding-bottom: clamp(0.44rem, 0.62vw, 0.56rem) !important;
}

.why-cordis-page .brands-pane h2 {
    margin-bottom: 0.24rem !important;
}

.why-cordis-page .code-pane {
    padding-top: clamp(0.5rem, 0.72vw, 0.64rem) !important;
    padding-bottom: clamp(0.92rem, 1.25vw, 1.2rem) !important;
}

.why-cordis-page .generated-code {
    padding: 0.26rem 0.52rem 0.52rem !important;
}

/* Why Cordis right-column refinement: taller hardware strip + stronger code panel */
.why-cordis-page .model-code-demo {
    grid-template-rows: 0.42fr 0.58fr !important;
}

.why-cordis-page .brands-pane {
    padding: clamp(0.25rem, 0.35vw, 0.4rem) clamp(0.55rem, 0.78vw, 0.72rem) clamp(1.15rem, 1.6vw, 1.45rem) !important;
}

.why-cordis-page .brands-pane h2 {
    margin-bottom: 0 !important;
}

/* Why Cordis hardware ticker quick-tuning knobs
   Adjust these values to control spacing/sizing in one place. */
.why-cordis-page {
    --hardware-logo-gap: clamp(1.45rem, 2.1vw, 2rem);
    --hardware-logo-slot-h: clamp(58px, 4.8vw, 68px);
    --hardware-logo-side-pad: clamp(0.45rem, 0.72vw, 0.62rem);
    --hardware-logo-opacity: 0.88;
    --hardware-logo-speed: 13s;
    --hardware-logo-px-per-sec: 72;
    /* Per-logo tuning knobs (edit these) */
    --logo-beckhoff-scale: 0.6;
    --logo-beckhoff-pad: -30px;
    --logo-csharp-scale: 1.2;
    --logo-csharp-pad: -10px;
    --logo-codesys-scale: 2;
    --logo-codesys-pad: 20px;
    --logo-ctrlx-scale: 0.8;
    --logo-ctrlx-pad: -30px;
    --logo-mitsubishi-scale: 0.95;
    --logo-mitsubishi-pad: 10px;
    --logo-phoenix-scale: 1.02;
    --logo-phoenix-pad: -20px;
    --logo-rockwell-scale: 1;
    --logo-rockwell-pad: 10px;
    --logo-saia-scale: 0.8;
    --logo-saia-pad: -20px;
    --logo-siemens-scale: 0.60;
    --logo-siemens-pad: -30px;
    --logo-weidmuller-scale: 0.70;
    --logo-weidmuller-pad: -40px;
}

.why-cordis-page .brands-ticker {
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%) !important;
    mask-image: linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%) !important;
}

.why-cordis-page .brands-ticker-track {
    align-items: center;
    height: 100%;
    flex-direction: row !important;
    width: max-content;
    will-change: transform;
    animation: whyCordisHardwareTickerHorizontal var(--hardware-logo-speed) linear infinite !important;
}

.why-cordis-page .brands-ticker-track.is-js-marquee {
    animation: none !important;
}

.why-cordis-page .brands-ticker-run {
    flex-direction: row !important;
    align-items: center;
    justify-content: flex-start;
    gap: var(--hardware-logo-gap) !important;
    padding: 0.08rem 0 !important;
    padding-right: var(--hardware-logo-gap) !important;
    flex-shrink: 0;
}

.why-cordis-page .brands-logo-item {
    width: auto !important;
    min-width: max-content;
}

.why-cordis-page .code-pane {
    padding-bottom: clamp(1rem, 1.35vw, 1.25rem) !important;
}

@keyframes whyCordisHardwareTickerHorizontal {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-1 * var(--hardware-run-width, 50%))); }
}

/* Why Cordis supported hardware: strict logo normalization system */
.why-cordis-page .brands-ticker-run {
    align-items: center !important;
    justify-content: flex-start !important;
}

.why-cordis-page .brands-logo-item {
    --hardware-logo-scale: 1;
    --hardware-logo-local-gap: 0px;
    height: var(--hardware-logo-slot-h) !important;
    min-height: var(--hardware-logo-slot-h) !important;
    max-height: var(--hardware-logo-slot-h) !important;
    width: auto !important;
    min-width: max-content;
    padding-inline: var(--hardware-logo-side-pad) !important;
    overflow: visible;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    margin-inline: var(--hardware-logo-local-gap) !important;
    padding-block: 0 !important;
    flex: 0 0 auto !important;
}

.why-cordis-page .brands-logo-item img {
    max-height: 100% !important;
    height: auto !important;
    width: auto !important;
    max-width: none !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
    transform: scale(var(--hardware-logo-scale));
    transform-origin: center center;
    opacity: var(--hardware-logo-opacity);
}

/* Per-brand optical balance tuning (subtle, deterministic) */
.why-cordis-page .brands-logo-item.logo-beckhoff { --hardware-logo-scale: var(--logo-beckhoff-scale); --hardware-logo-local-gap: var(--logo-beckhoff-pad); }
.why-cordis-page .brands-logo-item.logo-csharp { --hardware-logo-scale: var(--logo-csharp-scale); --hardware-logo-local-gap: var(--logo-csharp-pad); }
.why-cordis-page .brands-logo-item.logo-codesys { --hardware-logo-scale: var(--logo-codesys-scale); --hardware-logo-local-gap: var(--logo-codesys-pad); }
.why-cordis-page .brands-logo-item.logo-ctrlx { --hardware-logo-scale: var(--logo-ctrlx-scale); --hardware-logo-local-gap: var(--logo-ctrlx-pad); }
.why-cordis-page .brands-logo-item.logo-mitsubishi { --hardware-logo-scale: var(--logo-mitsubishi-scale); --hardware-logo-local-gap: var(--logo-mitsubishi-pad); }
.why-cordis-page .brands-logo-item.logo-phoenix { --hardware-logo-scale: var(--logo-phoenix-scale); --hardware-logo-local-gap: var(--logo-phoenix-pad); }
.why-cordis-page .brands-logo-item.logo-rockwell { --hardware-logo-scale: var(--logo-rockwell-scale); --hardware-logo-local-gap: var(--logo-rockwell-pad); }
.why-cordis-page .brands-logo-item.logo-saia { --hardware-logo-scale: var(--logo-saia-scale); --hardware-logo-local-gap: var(--logo-saia-pad); }
.why-cordis-page .brands-logo-item.logo-siemens { --hardware-logo-scale: var(--logo-siemens-scale); --hardware-logo-local-gap: var(--logo-siemens-pad); }
.why-cordis-page .brands-logo-item.logo-weidmuller { --hardware-logo-scale: var(--logo-weidmuller-scale); --hardware-logo-local-gap: var(--logo-weidmuller-pad); }

/* Why Cordis vertical placement: subtle offset from top */
.why-cordis-page .why-cordis-inner {
    padding-top: clamp(0.55rem, 1vh, 0.8rem) !important;
}

/* Why Cordis panel title alignment */
.why-cordis-page .model-pane h2,
.why-cordis-page .code-pane h2 {
    height: clamp(2rem, 2.8vw, 2.4rem);
    min-height: clamp(2rem, 2.8vw, 2.4rem);
    margin: 0 0 0.5rem !important;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Why Cordis: uniform panel title typography */
.why-cordis-page .model-pane h2,
.why-cordis-page .brands-pane h2,
.why-cordis-page .code-pane h2 {
    font-size: clamp(0.98rem, 1.1vw, 1.12rem) !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase;
}

/* Why Cordis: keep partners strip at same vertical level as home by restoring viewport section height */
.site-shell:has(.why-cordis-page) .why-cordis-page {
    min-height: calc(100vh - 5.1rem) !important;
}

@media (max-width: 980px) {
    .site-shell:has(.why-cordis-page) .why-cordis-page {
        min-height: calc(100vh - 7.5rem) !important;
    }
}

/* FINAL OVERRIDE: Why Cordis heading uses exact Home hero spacing + typography */
.site-shell:has(.why-cordis-page) .why-cordis-page {
    min-height: calc(100vh - 5.1rem) !important;
    padding-top: clamp(7.2rem, 13.5vh, 9.8rem) !important;
    padding-bottom: 0 !important;
}

@media (max-width: 980px) {
    .site-shell:has(.why-cordis-page) .why-cordis-page {
        min-height: calc(100vh - 7.5rem) !important;
        padding-top: clamp(6.1rem, 11.5vh, 8.2rem) !important;
        padding-bottom: 0 !important;
    }
}

.why-cordis-page .why-cordis-inner {
    padding-top: 0 !important;
}

.why-cordis-page .why-cordis-head h1 {
    margin: 0 !important;
    color: #f4f8ff !important;
    font-size: clamp(2rem, 4.4vw, 3.2rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.02em !important;
    font-family: "Sora", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif !important;
    font-weight: 600 !important;
}

/* FINAL OVERRIDE 2: ensure Why Cordis first section fills full viewport (same fold feel as home) */
.site-shell:has(.why-cordis-page) .why-cordis-page {
    min-height: 100vh !important;
}

.why-cordis-page.presentation-page .presentation-container {
    min-height: clamp(32rem, 68vh, 52rem);
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: clamp(2.5rem, 4vh, 3.5rem);
    border-radius: 1.75rem;
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
    backdrop-filter: none;
}

.why-cordis-page.presentation-page .presentation-slide {
    display: flex;
    flex: 1;
}

.why-cordis-page.presentation-page .presentation-stage {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 2vh, 1.4rem);
}

.why-cordis-page.presentation-page .presentation-reference-graphic {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-top: 0;
    border-radius: 1.15rem;
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: clamp(0.5rem, 1.2vh, 1rem) 0 0;
}

.why-cordis-page.presentation-page .presentation-reference-graphic-shell {
    width: 100%;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(1rem, 2.25vh, 1.5rem);
}

.why-cordis-page.presentation-page .presentation-reference-graphic-shell-vertical {
    flex-direction: column;
    align-items: center;
}

.why-cordis-page.presentation-page .presentation-narrated-visual-shell {
    width: 100%;
    height: 100%;
    min-height: 0;
    margin-inline: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 2vh, 1.4rem);
}

.why-cordis-page.presentation-page .presentation-deck-shell {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: clamp(0.5rem, 1.4vh, 0.85rem);
}

.why-cordis-page.presentation-page .presentation-deck-header {
    width: 100%;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.why-cordis-page.presentation-page .presentation-deck-nav {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3rem;
    padding: 0.35rem 0.1rem;
    flex-wrap: nowrap;
}

.why-cordis-page.presentation-page .presentation-deck-nav-button {
    min-width: 7.8rem;
    padding: 0.82rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(139, 174, 212, 0.22);
    background: linear-gradient(180deg, rgba(248, 251, 255, 0.98), rgba(235, 243, 252, 0.95));
    color: rgba(20, 49, 84, 0.9);
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        opacity 180ms ease,
        border-color 180ms ease;
}

.why-cordis-page.presentation-page .presentation-deck-nav-button:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: rgba(95, 157, 222, 0.34);
    box-shadow: 0 12px 30px rgba(10, 35, 64, 0.11);
}

.why-cordis-page.presentation-page .presentation-deck-nav-button:disabled {
    opacity: 0.46;
    cursor: default;
}

.why-cordis-page.presentation-page .presentation-deck-nav-button-primary {
    border-color: rgba(123, 200, 255, 0.34);
    background: linear-gradient(180deg, rgba(20, 101, 177, 0.96), rgba(10, 67, 132, 0.96));
    color: #f4f8ff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 12px 24px rgba(11, 49, 96, 0.16);
}

.why-cordis-page.presentation-page .presentation-deck-progress {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
}

.why-cordis-page.presentation-page .presentation-deck-progress-step {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
    min-width: 0;
    padding: 1rem 1.05rem 1.05rem;
    border-radius: 1.15rem;
    border: 1px solid rgba(100, 140, 200, 0.12);
    background:
        radial-gradient(130% 160% at 0% 0%, rgba(80, 120, 180, 0.08), rgba(80, 120, 180, 0) 45%),
        linear-gradient(180deg, rgba(18, 36, 72, 0.72), rgba(10, 22, 50, 0.78));
    color: rgba(160, 195, 230, 0.65);
    text-align: left;
    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        border-color 180ms ease,
        background 180ms ease,
        color 180ms ease;
}

.why-cordis-page.presentation-page .presentation-deck-progress-step:hover {
    transform: translateY(-1px);
    border-color: rgba(95, 157, 222, 0.22);
    color: rgba(190, 215, 240, 0.8);
    box-shadow: 0 8px 20px rgba(4, 10, 28, 0.2);
}

.why-cordis-page.presentation-page .presentation-deck-progress-step.is-active {
    border-color: rgba(79, 161, 234, 0.34);
    background:
        radial-gradient(130% 180% at 0% 0%, rgba(128, 205, 255, 0.22), rgba(128, 205, 255, 0) 42%),
        linear-gradient(180deg, rgba(21, 101, 177, 0.98), rgba(10, 67, 132, 0.96));
    color: #f4f8ff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 16px 34px rgba(4, 28, 58, 0.18);
}

.why-cordis-page.presentation-page .presentation-deck-progress-index {
    display: none;
}

.why-cordis-page.presentation-page .presentation-deck-progress-title {
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.why-cordis-page.presentation-page .presentation-deck-stage {
    width: 100%;
    /* Reservation accounts for: sticky site header (~5rem) + page padding-top
       (up to 9.8rem) + deck-header nav+progress (~7rem) + deck-shell gap.
       Undersizing this pushes the longform timeline bar below the viewport. */
    height: clamp(20rem, calc(100vh - 21rem), 60rem);
    position: relative;
    /* Clip slide content so it can never bleed below the stage and end up
       hidden under the page footer at short viewport heights. The slide's
       inner flex layout keeps the timeline bar inside this box. */
    overflow: hidden;
}

.why-cordis-page.presentation-page .presentation-deck-slide-panel {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.why-cordis-page.presentation-page .presentation-deck-slide-panel.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    animation: presentation-slide-fade 180ms ease;
}

@keyframes presentation-slide-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.why-cordis-page.presentation-page .presentation-stage-canvas {
    position: relative;
}

.why-cordis-page.presentation-page .presentation-start-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: grid;
    place-items: center;
    pointer-events: none;
}

/* Sign-in gate — wraps a play button and reveals a popup on hover/stuck */
.signin-gate {
    position: relative;
    display: inline-flex;
    pointer-events: auto;
}

.signin-gate__popup {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    z-index: 50;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 140ms ease,
        transform 140ms ease,
        visibility 0s linear 140ms;
}

/* Invisible bridge across the 12px gap so the cursor stays in the hover zone
   while moving from the play button to the popup. */
.signin-gate__popup::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 16px;
}

.signin-gate--above .signin-gate__popup {
    bottom: calc(100% + 12px);
}

.signin-gate--above .signin-gate__popup::before {
    bottom: -16px;
}

.signin-gate--below .signin-gate__popup {
    top: calc(100% + 12px);
    transform: translateX(-50%) translateY(4px);
}

.signin-gate--below .signin-gate__popup::before {
    top: -16px;
}

.signin-gate.is-open .signin-gate__popup {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    transition:
        opacity 140ms ease,
        transform 140ms ease,
        visibility 0s linear;
}

.why-cordis-page.presentation-page .presentation-highlight-demo-button {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-width: clamp(9.75rem, 18vw, 13rem);
    min-height: clamp(9.75rem, 18vw, 13rem);
    padding: 1.1rem 1.3rem;
    border: 1px solid rgba(124, 236, 255, 0.35);
    border-radius: 999px;
    background:
        radial-gradient(circle at 50% 30%, rgba(124, 236, 255, 0.22), rgba(31, 156, 216, 0.28) 56%, rgba(31, 156, 216, 0.18) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 0 28px rgba(31, 156, 216, 0.3),
        0 18px 38px rgba(3, 17, 39, 0.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #f6f9ff;
    font: inherit;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    pointer-events: auto;
    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        opacity 180ms ease,
        background 180ms ease,
        border-color 180ms ease;
}

.why-cordis-page.presentation-page .presentation-highlight-demo-button svg {
    width: clamp(2.45rem, 4vw, 3rem);
    height: clamp(2.45rem, 4vw, 3rem);
    flex: 0 0 auto;
}

.why-cordis-page.presentation-page .presentation-highlight-demo-button span {
    font-size: clamp(0.9rem, 1.4vw, 1.02rem);
    letter-spacing: 0.01em;
}

.why-cordis-page.presentation-page .presentation-highlight-demo-button:hover:not(:disabled) {
    transform: scale(1.03);
    border-color: rgba(124, 236, 255, 0.6);
    background:
        radial-gradient(circle at 50% 30%, rgba(124, 236, 255, 0.32), rgba(31, 156, 216, 0.38) 56%, rgba(31, 156, 216, 0.24) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 0 36px rgba(124, 236, 255, 0.35),
        0 22px 44px rgba(3, 17, 39, 0.3);
}

.why-cordis-page.presentation-page .presentation-highlight-demo-button:disabled {
    cursor: default;
    opacity: 0.72;
}

.why-cordis-page.presentation-page .presentation-reference-graphic img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: inherit;
}

.why-cordis-page.presentation-page .presentation-business-value-svg,
.why-cordis-page.presentation-page .presentation-business-value-svg svg {
    display: block;
    width: 100%;
    height: auto;
    border-radius: inherit;
}

.why-cordis-page.presentation-page .presentation-business-value-svg {
    width: 100%;
    margin-inline: auto;
}

.why-cordis-page.presentation-page .presentation-low-code-model-svg,
.why-cordis-page.presentation-page .presentation-low-code-model-svg svg {
    display: block;
    width: 100%;
    height: auto;
    border-radius: inherit;
}

.why-cordis-page.presentation-page .presentation-low-code-model-svg {
    position: relative;
    z-index: 1;
    /* Diagram is ~1:1 aspect, so its height tracks its width. The third
       min() term must reserve enough vertical chrome (header + page padding
       + deck-header + playbar) so the diagram fits the canvas — otherwise
       the top/bottom nodes get clipped by the stage's overflow:hidden. */
    width: min(72%, 56rem, calc(100vh - 28rem));
    max-height: 100%;
    margin: 0 auto;
}

.why-cordis-page.presentation-page .presentation-low-code-model-svg svg {
    position: relative;
    z-index: 1;
    background: transparent;
    filter: saturate(1.02) contrast(1.02);
    max-height: 100%;
    object-fit: contain;
}

.why-cordis-page.presentation-page .presentation-business-value-target rect,
.why-cordis-page.presentation-page .presentation-low-code-model-target rect,
.why-cordis-page.presentation-page .presentation-business-value-target polygon {
    fill: rgba(31, 156, 216, 0);
    transition:
        fill 240ms ease,
        opacity 240ms ease,
        filter 240ms ease;
}

.why-cordis-page.presentation-page .presentation-business-value-target.is-dimmed rect,
.why-cordis-page.presentation-page .presentation-low-code-model-target.is-dimmed rect {
    fill: rgba(6, 15, 35, 0.24);
}

.why-cordis-page.presentation-page .presentation-business-value-target.presentation-business-value-feature.is-dimmed rect {
    fill: rgba(6, 15, 35, 0.28);
}

.why-cordis-page.presentation-page .presentation-business-value-target.is-active rect,
.why-cordis-page.presentation-page .presentation-low-code-model-target.is-active rect {
    fill: rgba(31, 156, 216, 0.12);
}

.why-cordis-page.presentation-page .presentation-business-value-target.presentation-business-value-feature.is-active rect {
    fill: rgba(31, 156, 216, 0.14);
}

.why-cordis-page.presentation-page .presentation-business-value-target.presentation-business-value-band.is-dimmed polygon {
    fill: rgba(31, 156, 216, 0);
}

.why-cordis-page.presentation-page .presentation-business-value-target.presentation-business-value-band.is-active polygon {
    fill: rgba(31, 156, 216, 0.08);
}

.why-cordis-page.presentation-page .presentation-business-value-target.presentation-business-value-band.is-dimmed {
    opacity: 0.78;
    filter: saturate(0.98) brightness(0.98);
}

.why-cordis-page.presentation-page .presentation-stage-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: none;
    margin: 0;
    gap: 0.5rem;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    transform: none;
}

.why-cordis-page.presentation-page .presentation-stage-controls-inline {
    flex: 0 1 auto;
}

/* Dark-navy glass transport buttons — aligned with the site palette */
.why-cordis-page.presentation-page .presentation-transport-button {
    width: 2.55rem;
    height: 2.55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 8px 18px rgba(2, 8, 20, 0.25);
    color: rgba(239, 243, 255, 0.85);
    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        opacity 180ms ease,
        background 180ms ease,
        color 180ms ease,
        border-color 180ms ease;
}

.why-cordis-page.presentation-page .presentation-transport-button svg {
    width: 1.15rem;
    height: 1.15rem;
}

.why-cordis-page.presentation-page .presentation-transport-button:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: rgba(124, 236, 255, 0.45);
    background: rgba(124, 236, 255, 0.06);
    color: #ffffff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 10px 22px rgba(2, 8, 20, 0.3),
        0 0 16px rgba(31, 156, 216, 0.18);
}

.why-cordis-page.presentation-page .presentation-transport-button:disabled {
    cursor: default;
    opacity: 0.4;
    box-shadow: none;
}

/* Primary (play) — Cordis brand blue gradient, matching the hero CTA */
.why-cordis-page.presentation-page .presentation-transport-button-primary {
    border-color: rgba(124, 236, 255, 0.45);
    background: linear-gradient(135deg, #1F9CD8 0%, #52c4ef 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 8px 18px rgba(31, 156, 216, 0.28);
    color: #0a1020;
}

.why-cordis-page.presentation-page .presentation-transport-button-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #2ba8e3 0%, #7cecff 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 10px 24px rgba(31, 156, 216, 0.4),
        0 0 22px rgba(124, 236, 255, 0.28);
    color: #0a1020;
}

/* Danger (stop/close) — Cordis red, restrained */
.why-cordis-page.presentation-page .presentation-transport-button-danger {
    border-color: rgba(226, 7, 23, 0.35);
    color: rgba(255, 120, 120, 0.95);
    background: rgba(226, 7, 23, 0.08);
}

.why-cordis-page.presentation-page .presentation-transport-button-danger:hover:not(:disabled) {
    border-color: rgba(226, 7, 23, 0.55);
    background: rgba(226, 7, 23, 0.14);
    color: #ffffff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 10px 22px rgba(2, 8, 20, 0.3),
        0 0 16px rgba(226, 7, 23, 0.22);
}

.why-cordis-page.presentation-page .presentation-stage-row {
    position: relative;
    width: 100%;
    margin-inline: auto;
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    /* Take all remaining vertical space inside the shell, but yield to the
       longform timeline bar below so the bar stays visible at any aspect
       ratio. Overflow clips the SVG rather than the bar when space is tight. */
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.why-cordis-page.presentation-page .presentation-stage-canvas {
    position: relative;
    flex: 0 0 78%;
    max-width: 78%;
    min-width: 0;
    /* Allow the canvas to shrink below SVG natural height so the timeline bar
       (below the stage-row) is never pushed out of view. Overflowing SVG
       content is clipped by the parent stage-row's overflow:hidden. */
    min-height: 0;
    /* Vertically center the slide visual so it sits at the same height as the
       absolutely-centered start-overlay play button. Without this, shorter
       SVGs (slides 1 & 2) sit at the top of the canvas while the play button
       stays centered, leaving them visually disconnected. */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.why-cordis-page.presentation-page .presentation-stage-canvas > * {
    max-width: 100%;
}

.why-cordis-page.presentation-page .presentation-stage-canvas svg,
.why-cordis-page.presentation-page .presentation-stage-canvas img {
    max-width: 100%;
    height: auto;
}

.why-cordis-page.presentation-page .presentation-stage-controls {
    width: 100%;
    margin-inline: auto;
}

.why-cordis-page.presentation-page .presentation-slide-first {
    width: 100%;
    flex-direction: column;
    /* .presentation-slide sets flex:1 so this element fills the canvas height.
       Center the visual-frame vertically so the slide diagram lines up with
       the centered start-overlay play button (same as slide 1). */
    justify-content: center;
    overflow: hidden;
}

@media (min-width: 981px) {
    .why-cordis-page.presentation-page .presentation-slide-first .presentation-inline-svg {
        transform: scale(1.08);
        transform-origin: left top;
        width: 92.6%;
    }
}

.why-cordis-page.presentation-page .presentation-visual-frame {
    position: relative;
    width: 100%;
    border-radius: 1.5rem;
    overflow: hidden;
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
}

.why-cordis-page.presentation-page .presentation-inline-svg,
.why-cordis-page.presentation-page .presentation-inline-svg svg {
    display: block;
    width: 100%;
    height: auto;
}

.why-cordis-page.presentation-page .presentation-inline-svg {
    position: relative;
    z-index: 1;
}

.why-cordis-page.presentation-page .presentation-inline-svg svg {
    border-radius: 1.15rem;
    background: transparent;
    filter: none;
}

.why-cordis-page.presentation-page .presentation-svg-target {
    transition:
        opacity 240ms ease,
        filter 240ms ease;
}

.why-cordis-page.presentation-page .presentation-svg-target.is-dimmed {
    opacity: 0.56;
    filter: saturate(0.94) brightness(0.96);
}

.why-cordis-page.presentation-page .presentation-svg-target.is-active {
    opacity: 1;
    filter:
        brightness(1.02)
        saturate(1.04)
        drop-shadow(0 12px 22px rgba(24, 102, 189, 0.16));
}

.why-cordis-page.presentation-page .presentation-business-value-overlay .presentation-svg-target.is-dimmed path,
.why-cordis-page.presentation-page .presentation-business-value-overlay .presentation-svg-target.is-dimmed rect {
    fill: rgba(6, 15, 35, 0.18);
}

.why-cordis-page.presentation-page .presentation-business-value-overlay .presentation-svg-target.is-active path,
.why-cordis-page.presentation-page .presentation-business-value-overlay .presentation-svg-target.is-active rect {
    fill: rgba(31, 156, 216, 0.18);
}

.why-cordis-page.presentation-page #traditional-layer.presentation-svg-target.is-active,
.why-cordis-page.presentation-page #low-code-development-layer.presentation-svg-target.is-active {
    filter:
        brightness(1.08)
        saturate(1.1)
        drop-shadow(0 10px 18px rgba(24, 102, 189, 0.14));
}

.why-cordis-page.presentation-page #cordis-suite-logo.presentation-svg-target.is-active {
    opacity: 1;
    filter:
        brightness(1.14)
        saturate(1.08)
        drop-shadow(0 10px 18px rgba(24, 102, 189, 0.2));
}

.why-cordis-page.presentation-page #cordis-suite-logo.presentation-svg-target.is-dimmed {
    opacity: 0.5;
    filter: saturate(0.84) brightness(0.88);
}

.why-cordis-page.presentation-page #traditional-layer.presentation-svg-target.is-active {
    fill: #7b8491;
    opacity: 1;
}

.why-cordis-page.presentation-page #traditional-layer.presentation-svg-target.is-dimmed {
    fill: #626973;
    opacity: 0.7;
}

.why-cordis-page.presentation-page #code-generation-arrow.presentation-svg-target.is-active,
.why-cordis-page.presentation-page #runtime-arrow.presentation-svg-target.is-active {
    opacity: 1;
    filter:
        brightness(1.12)
        saturate(1.12)
        drop-shadow(0 8px 14px rgba(24, 102, 189, 0.22));
}

.why-cordis-page.presentation-page #code-generation-arrow.presentation-svg-target.is-dimmed,
.why-cordis-page.presentation-page #runtime-arrow.presentation-svg-target.is-dimmed {
    opacity: 0.42;
    filter: saturate(0.88) brightness(0.9);
}

/* ─────────────────────────────────────────────────────────────────────
   DESKTOP — Supported-hardware panel (slide 2). Mirror knobs exist in
   the @media (max-width: 980px) block below for the mobile version.
   ───────────────────────────────────────────────────────────────────── */
.why-cordis-page.presentation-page .presentation-supported-hardware {
    position: absolute;
    /* Horizontal position: 0% = left edge of diagram. */
    left: 3.0%;
    /* Vertical position inside diagram: 0% = top, 100% = bottom. */
    top: 53.0%;
    /* Panel width as % of diagram width. */
    width: 26.8%;
    /* Panel shape: width:height ratio. Lower number = taller panel. */
    aspect-ratio: 3.64;
    transform: none;
    z-index: 2;
    transition:
        opacity 240ms ease,
        filter 240ms ease,
        box-shadow 240ms ease;
}

.why-cordis-page.presentation-page .presentation-supported-hardware.highlightable.is-dimmed {
    opacity: 0.56;
    filter: saturate(0.94) brightness(0.96);
}

.why-cordis-page.presentation-page .presentation-supported-hardware.highlightable.is-dimmed .supported-hardware-pane {
    box-shadow: inset 0 1px 0 rgba(244, 250, 255, 0.04) !important;
    filter: saturate(0.9) brightness(0.9);
}

.why-cordis-page.presentation-page .presentation-supported-hardware.highlightable.is-dimmed .brands-logo-item img,
.why-cordis-page.presentation-page .presentation-supported-hardware.highlightable.is-dimmed h2 {
    opacity: 0.62;
}

.why-cordis-page.presentation-page .presentation-supported-hardware.highlightable.is-active {
    opacity: 1;
}

.why-cordis-page.presentation-page .presentation-supported-hardware.highlightable.is-active .supported-hardware-pane {
    box-shadow:
        inset 0 1px 0 rgba(244, 250, 255, 0.06),
        0 18px 40px rgba(12, 90, 168, 0.16),
        0 0 0 2px rgba(132, 201, 255, 0.28) !important;
    filter: saturate(1.08) brightness(1.08);
}

.why-cordis-page.presentation-page .presentation-supported-hardware.highlightable.is-active .brands-logo-item img,
.why-cordis-page.presentation-page .presentation-supported-hardware.highlightable.is-active h2 {
    opacity: 1;
}

.why-cordis-page.presentation-page .presentation-presenter-dock {
    position: relative;
    flex: 0 0 22%;
    max-width: 22%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 16px 72px;
    background: transparent;
    border: none;
    box-shadow: none;
    pointer-events: none;
    animation: presentation-presenter-dock-enter 320ms ease both;
}

@keyframes presentation-presenter-dock-enter {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.why-cordis-page.presentation-page .presenter-avatar {
    width: 100%;
    max-width: 13rem;
    padding: 0.85rem 0.9rem 0.8rem;
    border-radius: 1.25rem;
    background:
        radial-gradient(120% 120% at 20% 0%, rgba(124, 198, 255, 0.18), rgba(124, 198, 255, 0) 45%),
        linear-gradient(180deg, rgba(16, 36, 64, 0.9), rgba(10, 24, 42, 0.94));
    border: 1px solid rgba(143, 197, 238, 0.2);
    box-shadow:
        0 18px 34px rgba(5, 13, 27, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
}

.why-cordis-page.presentation-page .presentation-presenter-stage {
    display: grid;
    width: 100%;
    max-width: 85%;
}

.why-cordis-page.presentation-page .presentation-presenter-stage > * {
    grid-area: 1 / 1;
}

.why-cordis-page.presentation-page .presentation-presenter-video {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: 20px;
    -webkit-mask-image: radial-gradient(ellipse 110% 110% at center, #000 62%, rgba(0, 0, 0, 0.6) 88%, transparent 100%);
    mask-image: radial-gradient(ellipse 110% 110% at center, #000 62%, rgba(0, 0, 0, 0.6) 88%, transparent 100%);
    filter:
        drop-shadow(0 22px 30px rgba(0, 0, 0, 0.5))
        drop-shadow(0 8px 14px rgba(0, 0, 0, 0.32));
    opacity: 0;
    transition: opacity 180ms ease;
}

.why-cordis-page.presentation-page .presentation-presenter-video.is-active {
    opacity: 1;
}

.why-cordis-page.presentation-page .presentation-presenter-fallback {
    align-self: center;
    justify-self: center;
    opacity: 0;
    transition: opacity 180ms ease;
    pointer-events: none;
}

.why-cordis-page.presentation-page .presentation-longform-controls {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.6rem 0.9rem;
    border-radius: 0.95rem;
    background: linear-gradient(180deg, rgba(16, 36, 64, 0.78), rgba(10, 24, 42, 0.86));
    border: 1px solid rgba(143, 197, 238, 0.18);
    box-shadow: 0 14px 28px rgba(5, 13, 27, 0.22);
    color: rgba(228, 240, 255, 0.92);
    flex-wrap: wrap;
    /* Never shrink — bar must remain fully visible above the page footer. */
    flex: 0 0 auto;
}

.why-cordis-page.presentation-page .presentation-longform-buttons {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 0 0 auto;
}

.why-cordis-page.presentation-page .presentation-longform-scrubber {
    position: relative;
    flex: 1 1 auto;
    height: 1.6rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    min-width: 12rem;
}

.why-cordis-page.presentation-page .presentation-longform-scrubber-track {
    position: relative;
    width: 100%;
    height: 0.45rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    overflow: visible;
}

.why-cordis-page.presentation-page .presentation-longform-scrubber-progress {
    position: absolute;
    inset: 0 auto 0 0;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #4dabff, #2870c2);
    transition: width 120ms linear;
    pointer-events: none;
}

.why-cordis-page.presentation-page .presentation-longform-scrubber-marker {
    position: absolute;
    top: 50%;
    width: 0.85rem;
    height: 0.85rem;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.85);
    border: 2px solid rgba(40, 112, 194, 0.95);
    padding: 0;
    cursor: pointer;
    transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}

.why-cordis-page.presentation-page .presentation-longform-scrubber-marker:hover {
    transform: translate(-50%, -50%) scale(1.18);
    background: #ffffff;
}

.why-cordis-page.presentation-page .presentation-longform-scrubber-marker.is-active {
    background: #4dabff;
    border-color: #ffffff;
    transform: translate(-50%, -50%) scale(1.25);
}

.why-cordis-page.presentation-page .presentation-longform-time {
    font-variant-numeric: tabular-nums;
    font-size: 0.85rem;
    color: rgba(228, 240, 255, 0.78);
    min-width: 9rem;
    text-align: right;
    flex: 0 0 auto;
}

.why-cordis-page.presentation-page .presentation-presenter-fallback.is-active {
    opacity: 1;
}

.why-cordis-page.presentation-page .presenter-avatar-stage {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    min-height: 10.15rem;
}

.why-cordis-page.presentation-page .presenter-avatar-shadow {
    position: absolute;
    bottom: 0.3rem;
    width: 68%;
    height: 0.95rem;
    border-radius: 999px;
    background: rgba(2, 7, 16, 0.34);
    filter: blur(10px);
}

.why-cordis-page.presentation-page .presenter-avatar-shoulders {
    position: absolute;
    bottom: 0;
    width: 78%;
    height: 3.15rem;
    border-radius: 2rem 2rem 1.25rem 1.25rem;
    background: linear-gradient(180deg, #0f5ea6, #0a3f76);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.why-cordis-page.presentation-page .presenter-avatar-neck {
    position: absolute;
    bottom: 2.05rem;
    width: 1.65rem;
    height: 1.35rem;
    border-radius: 0.7rem;
    background: linear-gradient(180deg, #f5dcc6, #e8c7ab);
}

.why-cordis-page.presentation-page .presenter-avatar-head {
    position: relative;
    width: 5.65rem;
    height: 6.45rem;
    border-radius: 2rem 2rem 2.35rem 2.35rem;
    background:
        radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 30%),
        linear-gradient(180deg, #f7dfc7, #e9c6ab 82%);
    border: 1px solid rgba(140, 94, 70, 0.12);
    box-shadow:
        0 10px 20px rgba(9, 17, 32, 0.12),
        inset 0 -8px 12px rgba(177, 116, 79, 0.08);
}

.why-cordis-page.presentation-page .presenter-avatar-head::before {
    content: "";
    position: absolute;
    inset: 0.2rem 0.2rem auto;
    height: 2rem;
    border-radius: 1.6rem 1.6rem 0.9rem 0.9rem;
    background: linear-gradient(180deg, #143a63, #0f2b49);
}

.why-cordis-page.presentation-page .presenter-avatar-eye,
.why-cordis-page.presentation-page .presenter-avatar-mouth,
.why-cordis-page.presentation-page .presenter-avatar-blush {
    position: absolute;
}

.why-cordis-page.presentation-page .presenter-avatar-eye {
    top: 2.35rem;
    width: 0.54rem;
    height: 0.72rem;
    border-radius: 999px;
    background: #16324d;
    box-shadow: 0 0 0 0.14rem rgba(255, 255, 255, 0.2);
}

.why-cordis-page.presentation-page .presenter-avatar-eye-left {
    left: 1.45rem;
}

.why-cordis-page.presentation-page .presenter-avatar-eye-right {
    right: 1.45rem;
}

.why-cordis-page.presentation-page .presenter-avatar-blush {
    top: 3.35rem;
    width: 0.78rem;
    height: 0.42rem;
    border-radius: 999px;
    background: rgba(205, 117, 117, 0.2);
    filter: blur(2px);
}

.why-cordis-page.presentation-page .presenter-avatar-blush-left {
    left: 0.95rem;
}

.why-cordis-page.presentation-page .presenter-avatar-blush-right {
    right: 0.95rem;
}

.why-cordis-page.presentation-page .presenter-avatar-mouth {
    left: 50%;
    bottom: 1.05rem;
    width: 1.18rem;
    height: 0.32rem;
    transform: translateX(-50%);
    border-radius: 0.55rem 0.55rem 0.9rem 0.9rem;
    background: linear-gradient(180deg, #93485f, #7a334a);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.18);
    transform-origin: center center;
}

.why-cordis-page.presentation-page .presenter-avatar.is-speaking .presenter-avatar-mouth {
    animation: presenter-mouth-speak 820ms ease-in-out infinite;
}

.why-cordis-page.presentation-page .presenter-avatar-meta {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    margin-top: 0.55rem;
    text-align: center;
}

.why-cordis-page.presentation-page .presenter-avatar-name {
    color: #f3f7fd;
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.why-cordis-page.presentation-page .presenter-avatar-status {
    color: rgba(207, 224, 241, 0.8);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

@keyframes presenter-mouth-speak {
    0% {
        width: 1.12rem;
        height: 0.32rem;
        border-radius: 0.55rem 0.55rem 0.9rem 0.9rem;
    }

    30% {
        width: 0.78rem;
        height: 0.58rem;
        border-radius: 0.5rem;
    }

    55% {
        width: 1.02rem;
        height: 0.76rem;
        border-radius: 0.56rem;
    }

    100% {
        width: 1.12rem;
        height: 0.32rem;
        border-radius: 0.55rem 0.55rem 0.9rem 0.9rem;
    }
}

.why-cordis-page.presentation-page .supported-hardware-pane {
    /* 25 ticker-runs are rendered in the track (see SupportedHardwareTicker
       RepeatCount=25) to avoid loop-boundary render glitches. The seamless
       translate amount = 100% / RepeatCount = 4%. */
    --hardware-run-width: 4%;
    --hardware-logo-slot-h: clamp(14px, 1.6vw, 34px);
    --hardware-logo-gap: clamp(0.6rem, 1.6vw, 2rem);
    --hardware-logo-side-pad: clamp(0.2rem, 0.5vw, 0.62rem);
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    align-self: stretch;
    margin-top: 0;
    border-radius: clamp(0.55rem, 0.7vw, 1.15rem) !important;
    background:
        radial-gradient(120% 110% at 100% 0%, rgba(96, 190, 255, 0.08), rgba(96, 190, 255, 0) 38%),
        linear-gradient(180deg, rgba(104, 112, 124, 0.92), rgba(88, 96, 108, 0.94)) !important;
    border: 1px solid rgba(216, 226, 236, 0.12) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 10px 24px rgba(4, 10, 24, 0.12) !important;
    padding: 6% 5% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4% !important;
    overflow: hidden !important;
}

.why-cordis-page.presentation-page .supported-hardware-pane h2 {
    color: rgba(235, 245, 255, 0.94) !important;
    text-align: center !important;
    font-size: clamp(0.42rem, 0.82vw, 0.84rem) !important;
    letter-spacing: 0.11em !important;
    margin: 0 0 0 0 !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    flex: 0 0 auto !important;
}

.why-cordis-page.presentation-page .supported-hardware-pane .brands-ticker {
    height: auto !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%) !important;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%) !important;
}

.why-cordis-page.presentation-page .supported-hardware-pane .brands-logo-item img {
    opacity: 0.92;
}

@media (max-width: 980px) {
    .why-cordis-page.presentation-page .presentation-container {
        min-height: clamp(22rem, 52vh, 34rem);
        border-radius: 1.4rem;
        padding: 0.9rem;
        backdrop-filter: none;
    }

    .why-cordis-page.presentation-page .presentation-stage-controls {
        position: static;
        justify-content: center;
        flex-wrap: wrap;
        width: 100%;
        transform: none;
    }

    .why-cordis-page.presentation-page .presentation-deck-nav {
        flex-flow: row wrap;
        align-items: stretch;
        justify-content: space-between;
        gap: 0.55rem;
        min-height: 0;
        padding: 0.15rem 0;
    }

    .why-cordis-page.presentation-page .presentation-deck-nav-button {
        flex: 1 1 calc(50% - 0.3rem);
        min-width: 0;
        order: 1;
        padding: 0.78rem 0.85rem;
        font-size: 0.82rem;
        letter-spacing: 0.05em;
    }

    .why-cordis-page.presentation-page .presentation-deck-nav-button-primary {
        order: 2;
    }

    .why-cordis-page.presentation-page .presentation-stage-controls.presentation-stage-controls-inline {
        order: 3;
        flex: 1 0 100%;
        width: 100%;
        justify-content: space-evenly;
        gap: 0.65rem;
        padding: 0.55rem 0.4rem;
        margin-top: 0.1rem;
        border-radius: 999px;
        background: linear-gradient(180deg, rgba(14, 28, 56, 0.55), rgba(8, 18, 38, 0.55));
        border: 1px solid rgba(100, 140, 200, 0.14);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    }

    .why-cordis-page.presentation-page .presentation-stage-controls-inline .presentation-transport-button {
        width: 2.85rem;
        height: 2.85rem;
    }

    .why-cordis-page.presentation-page .presentation-stage-controls-inline .presentation-transport-button svg {
        width: 1.25rem;
        height: 1.25rem;
    }

    .why-cordis-page.presentation-page .presentation-deck-progress {
        grid-template-columns: 1fr;
        gap: 0.55rem;
    }

    .why-cordis-page.presentation-page .presentation-deck-progress-step {
        padding: 0.7rem 0.95rem;
        border-radius: 0.95rem;
        flex-direction: row;
        align-items: center;
        gap: 0.65rem;
    }

    .why-cordis-page.presentation-page .presentation-deck-progress-index {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 1.65rem;
        height: 1.65rem;
        border-radius: 999px;
        background: rgba(124, 236, 255, 0.1);
        border: 1px solid rgba(124, 236, 255, 0.22);
        color: rgba(207, 230, 250, 0.85);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.03em;
    }

    .why-cordis-page.presentation-page .presentation-deck-progress-step.is-active .presentation-deck-progress-index {
        background: rgba(255, 255, 255, 0.18);
        border-color: rgba(255, 255, 255, 0.42);
        color: #f4f8ff;
    }

    .why-cordis-page.presentation-page .presentation-deck-progress-title {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        font-size: 0.92rem;
        line-height: 1.25;
        flex: 1 1 auto;
        min-width: 0;
    }

    .why-cordis-page.presentation-page .presenter-avatar {
        width: min(100%, 14rem);
    }

    /* ─────────────────────────────────────────────────────────────────
       MOBILE — Supported-hardware panel tuning knobs (slide 2 only)
       Desktop uses the base rule (aspect-ratio 3.64 etc.). Tweak here
       to adjust the mobile panel independently. All values are local.
       ───────────────────────────────────────────────────────────────── */
    .why-cordis-page.presentation-page .presentation-supported-hardware {
        /* Panel height: lower aspect-ratio = taller panel (width:height).
           Desktop is 3.64. Try 2.4 for a noticeably taller mobile panel. */
        aspect-ratio: 2.4;
        /* Vertical position inside the diagram (0% = top, 100% = bottom).
           Desktop is 52%. Bump up/down a couple % to re-seat in the grey area. */
        top: 45.5%;
    }

    .why-cordis-page.presentation-page .supported-hardware-pane {
        /* Logo size — height of each logo slot. Smaller = smaller logos. */
        --hardware-logo-slot-h: 17px;
        /* Spacing between adjacent logos. Larger = more breathing room. */
        --hardware-logo-gap: 0.9rem;
        /* Side padding inside each logo cell (extra horizontal cushion). */
        --hardware-logo-side-pad: 0.2rem;
        /* Inner pane padding (top/bottom  left/right) */
        padding: 4% 5% !important;

        /* ── Per-logo mobile tuning (mirrors the desktop knobs at line ~4067)
           ─scale─ multiplies the logo's rendered size on top of the slot height.
           ─pad─   adjusts horizontal nudge for a single logo (negative = closer
                   to neighbours, positive = pushed away). Edit per logo. */
        --logo-beckhoff-scale:   0.78;  --logo-beckhoff-pad:    -6px;
        --logo-csharp-scale:     1.55;  --logo-csharp-pad:       4px;
        --logo-codesys-scale:    2.05;  --logo-codesys-pad:     14px;
        --logo-ctrlx-scale:      0.9;   --logo-ctrlx-pad:       -6px;
        --logo-mitsubishi-scale: 1.1;   --logo-mitsubishi-pad:   8px;
        --logo-phoenix-scale:    1;     --logo-phoenix-pad:     -4px;
        --logo-rockwell-scale:   1;     --logo-rockwell-pad:     6px;
        --logo-saia-scale:       1.15;  --logo-saia-pad:         0px;
        --logo-siemens-scale:    0.72;  --logo-siemens-pad:    -14px;
        --logo-weidmuller-scale: 0.78;  --logo-weidmuller-pad:  -4px;
    }

    .why-cordis-page.presentation-page .supported-hardware-pane h2 {
        display: none !important;
    }

    .why-cordis-page.presentation-page .presentation-reference-graphic {
        height: auto;
        border-radius: 0.95rem;
        padding: 0.75rem 0 1rem;
    }

    .why-cordis-page.presentation-page .presentation-deck-stage {
        height: clamp(24rem, 58vh, 38rem);
    }

    .why-cordis-page.presentation-page .presentation-reference-graphic-shell {
        flex-direction: column;
        align-items: stretch;
        gap: 0.85rem;
    }

    .why-cordis-page.presentation-page .presentation-narrated-visual-shell {
        width: 100%;
        gap: 0.85rem;
    }

    .why-cordis-page.presentation-page .presentation-highlight-demo-button {
        min-width: min(78vw, 11rem);
        min-height: min(78vw, 11rem);
        padding: 0.95rem 1rem;
    }

    .why-cordis-page.presentation-page .presentation-low-code-model-svg {
        max-width: 100%;
    }

    .why-cordis-page.presentation-page .presentation-stage-controls,
    .why-cordis-page.presentation-page .presentation-stage-canvas,
    .why-cordis-page.presentation-page .presentation-reference-graphic-shell {
        width: 100%;
    }
}

/* ── Mobile landscape (phones rotated sideways) — Presentation ─────────
   The deck stage clamp (24rem floor = 384px) is taller than a 320px
   landscape viewport, hiding the nav controls. Drop the floor so the
   slide flexes with available space, and compress the presenter dock
   and progress strip so the active slide content stays visible. */
@media (orientation: landscape) and (max-height: 500px) {
    .why-cordis-page.presentation-page .presentation-deck-stage {
        height: clamp(12rem, 60vh, 22rem);
    }

    .why-cordis-page.presentation-page .presentation-reference-graphic {
        height: auto;
        max-height: 60vh;
    }

    .why-cordis-page.presentation-page .presentation-deck-nav {
        min-height: 2.4rem;
        padding: 0.2rem 0.1rem;
    }

    .why-cordis-page.presentation-page .presentation-deck-nav-button {
        min-width: 5.5rem;
        padding: 0.55rem 0.8rem;
        font-size: 0.78rem;
    }
}

/* Below 768px, stack the avatar below the slide instead of beside it. */
@media (max-width: 768px) {
    .why-cordis-page.presentation-page .presentation-stage-row {
        flex-direction: column;
        align-items: stretch;
    }

    .why-cordis-page.presentation-page .presentation-stage-canvas,
    .why-cordis-page.presentation-page .presentation-presenter-dock {
        flex: 0 0 auto;
        max-width: 100%;
        width: 100%;
    }

    .why-cordis-page.presentation-page .presentation-presenter-dock {
        align-items: center;
        margin-top: 0.85rem;
    }

    .why-cordis-page.presentation-page .presentation-presenter-stage {
        width: min(100%, 14rem);
    }
}


/* ═══════════════════════════════════════════════════════════════════
   HOMEPAGE REDESIGN — Design system, dark canvas, section styles
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Design tokens ─────────────────────────────────────────────── */
:root {
    --bg-0:            #080e20;
    --bg-1:            #0c1428;
    --bg-2:            #111c38;
    --bg-3:            #172444;
    --text-primary:    #eff3ff;
    --text-secondary:  rgba(239, 243, 255, 0.62);
    --text-muted:      rgba(239, 243, 255, 0.35);

    /* Cordis logo brand colors — derived from the icon SVG */
    --cordis-brand-blue:  #1F9CD8;   /* dominant brand accent */
    --cordis-brand-red:   #E20717;   /* reserved for hero only */
    --cordis-brand-green: #3BAA35;   /* reserved for hero only */

    /* Accent family — cyan is the lighter tint of brand blue */
    --accent-cyan:     #7cecff;
    --accent-blue:     #6f93ff;
    --accent-peach:    #ff7a5b;

    /* Surface tones for unified cards */
    --surface-card:    rgba(255, 255, 255, 0.025);
    --surface-raised:  linear-gradient(180deg, rgba(17, 34, 58, 0.85) 0%, rgba(13, 27, 47, 0.92) 100%);

    --border-subtle:   rgba(255, 255, 255, 0.06);
    --border-visible:  rgba(255, 255, 255, 0.11);
    --border-active:   rgba(31, 156, 216, 0.35);
    --section-pad-y:   clamp(5rem, 9vw, 8rem);
    /* Unified density scale — all section paddings derive from these */
    --pad-scale-tight: 0.6;
    --pad-scale-mid:   0.8;
    --pad-scale-full:  1;
    --section-gap:     clamp(2.5rem, 4.5vw, 4rem);
    --card-gap:        clamp(1rem, 1.8vw, 1.5rem);

    /* Shared narrative body scale */
    --narrative-body:  clamp(1.15rem, 1.5vw, 1.38rem);
    --narrative-lh:    1.72;
}

/* ── 2. Dark canvas — applied site-wide ──────────────────────────────
   Every page gets the dark navy canvas by default. The old scoping
   (home-only via :has(.home-vmodel-hero)) has been lifted so About,
   Contact, News, Subsidy, Features, and placeholders all inherit the
   same premium dark atmosphere. */
.site-main {
    background: var(--bg-0);
    color: var(--text-secondary);
}

body {
    background: var(--bg-0);
}

/* ── 3. Scroll reveal ────────────────────────────────────────────── */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity  600ms cubic-bezier(0.25, 0.1, 0.25, 1),
        transform 600ms cubic-bezier(0.25, 0.1, 0.25, 1);
    transition-delay: var(--reveal-delay, 0ms);
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ── 4. Shared: SectionHeader ────────────────────────────────────── */
.section-header {
    margin-bottom: var(--section-gap);
}

.section-header--center {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.section-header--left { text-align: left; }

.section-header--narrow  { max-width: min(660px, 92vw); }
.section-header--default { max-width: min(780px, 92vw); }
.section-header--wide    { max-width: 100%; }

.section-overline {
    margin: 0 0 0.65rem;
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.section-h2 {
    margin: 0;
    font-size: clamp(1.7rem, 3vw, 2.5rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.022em;
    color: var(--text-primary);
}

/* Home-scoped typographic system — matches Data Foundation voice */
.home-section .section-overline {
    margin: 0 0 0.75rem;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    font-variant-caps: all-small-caps;
    color: rgba(255, 255, 255, 0.55);
}

.home-section .section-h2 {
    font-size: clamp(2.1rem, 3.8vw, 3.4rem);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.035em;
    color: #ffffff;
    text-wrap: balance;
}

.section-sub {
    margin: 1.1rem 0 0;
    font-size: 1.05rem;
    line-height: 1.74;
    color: var(--text-secondary);
}

/* ── 5. Shared: CtaButtonGroup ───────────────────────────────────── */
.cta-group {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.cta-group--center { justify-content: center; }
.cta-group--left   { justify-content: flex-start; }

.btn-primary-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 1.65rem;
    border-radius: 0.4rem;
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    background: var(--cordis-orange, #f2a328);
    color: #0c1428;
    transition: transform 150ms ease, box-shadow 150ms ease;
    white-space: nowrap;
    line-height: 1;
}

.btn-primary-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 22px rgba(242, 163, 40, 0.32);
    color: #0c1428;
    text-decoration: none;
}

.btn-primary-cta:active { transform: translateY(0); }

/* Blue variant — matches the hero "Watch how it works" CTA gradient. */
.btn-primary-cta--blue {
    background: linear-gradient(135deg, #1F9CD8 0%, #52c4ef 100%);
    color: #0a1020;
    border: 1px solid rgba(124, 236, 255, 0.35);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 6px 18px rgba(31, 156, 216, 0.28);
}

.btn-primary-cta--blue:hover,
.btn-primary-cta--blue:focus-visible {
    background: linear-gradient(135deg, #2ba8e3 0%, #7cecff 100%);
    color: #0a1020;
    border-color: rgba(124, 236, 255, 0.55);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 10px 28px rgba(31, 156, 216, 0.45),
        0 0 24px rgba(124, 236, 255, 0.25);
}

.btn-ghost-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 1.25rem;
    border-radius: 0.4rem;
    font-size: 0.92rem;
    font-weight: 500;
    text-decoration: none;
    color: rgba(239, 243, 255, 0.68);
    border: 1px solid rgba(255, 255, 255, 0.16);
    transition: color 200ms ease, border-color 200ms ease;
    white-space: nowrap;
    line-height: 1;
}

.btn-ghost-cta:hover {
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.32);
    text-decoration: none;
}

@media (max-width: 480px) {
    .cta-group {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ── 6. Hero text update ─────────────────────────────────────────── */
.home-vmodel-hero__header {
    text-align: center;
}

.home-vmodel-hero__header h1 {
    font-size: clamp(1.9rem, 3.8vw, 3.2rem) !important;
    font-weight: 700 !important;
    line-height: 1.12 !important;
    letter-spacing: -0.022em !important;
    margin: 0 auto 0.8rem !important;
    color: #f0f4ff !important;
    text-align: center !important;
    max-width: 100% !important;
    width: 100% !important;
}

.home-hero-sub {
    font-size: clamp(0.98rem, 1.6vw, 1.1rem);
    line-height: 1.68;
    color: rgba(239, 243, 255, 0.7);
    max-width: 72ch;
    margin: 0 auto 0;
}

.home-vmodel-hero__header .cta-group {
    margin-top: clamp(1.4rem, 2.5vw, 1.8rem);
    margin-bottom: clamp(2rem, 3.5vw, 3rem);
}

/* ── 7. Section base ─────────────────────────────────────────────── */
.home-section {
    padding: var(--section-pad-y) 0;
    position: relative;
    isolation: isolate;
}

.home-section--dark  { background: var(--bg-0); }
.home-section--mid   { background: var(--bg-1); }

/* Hairline separator between section bg shifts */
.home-section--mid + .home-section--dark,
.home-section--dark + .home-section--mid {
    box-shadow: inset 0 1px 0 var(--border-subtle);
}

/* ── Shared section atmosphere — echoes Data Foundation's signature ──
   Warm (Cordis-red) wash on the left edge, cool (cyan) on the right,
   a soft Cordis-blue pool behind the center. Creates page-wide
   tonal tension that unifies every section visually. */
.home-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 28% 55% at 2% 50%, rgba(226, 7, 23, 0.035) 0%, transparent 60%),
        radial-gradient(ellipse 28% 55% at 98% 50%, rgba(124, 236, 255, 0.045) 0%, transparent 60%);
}

/* Per-section content needs to sit above the wash */
.home-section > .container {
    position: relative;
    z-index: 1;
}

/* ── Shared section-closing tri-color divider ─────────────────────── */
.home-section-close {
    width: min(720px, 80%);
    height: 1px;
    margin: clamp(3rem, 5vw, 4.5rem) auto 0;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(226, 7, 23, 0.25) 18%,
        rgba(31, 156, 216, 0.55) 50%,
        rgba(124, 236, 255, 0.25) 82%,
        transparent 100%);
    pointer-events: none;
}

/* ── 8. Problem section ──────────────────────────────────────────── */
.home-problem .section-header {
    margin-bottom: calc(var(--section-gap) * 0.62);
}

.home-problem {
    padding-top: calc(var(--section-pad-y) * var(--pad-scale-tight));
}

.problem-head {
    width: min(780px, 92vw);
    margin-inline: auto;
}

.problem-head .section-h2 span {
    display: block;
    white-space: nowrap;
}

.home-problem {
    isolation: isolate;
}

.home-problem::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 28% 55% at 2% 50%, rgba(226, 7, 23, 0.05) 0%, transparent 60%),
        radial-gradient(ellipse 28% 55% at 98% 50%, rgba(124, 236, 255, 0.045) 0%, transparent 60%),
        radial-gradient(ellipse 60% 45% at 50% 0%, rgba(31, 156, 216, 0.06) 0%, transparent 65%),
        radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 66%, rgba(0, 0, 0, 0.09) 100%);
    pointer-events: none;
    z-index: 0;
}

.home-problem > .container {
    position: relative;
    z-index: 1;
}

.home-problem .section-h2 {
    font-size: clamp(2.3rem, 4vw, 3.6rem);
    letter-spacing: -0.04em;
    line-height: 1.05;
}

@media (max-width: 860px) {
    .problem-head .section-h2 span {
        white-space: normal;
    }
}

.problem-content {
    width: min(780px, 92vw);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: clamp(1.3rem, 2vw, 1.8rem);
}

.problem-content p {
    margin: 0;
    font-size: var(--narrative-body);
    line-height: var(--narrative-lh);
    color: rgba(239, 243, 255, 0.72);
    text-wrap: pretty;
}

.problem-fragment-line {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    color: rgba(239, 243, 255, 0.82) !important;
    font-size: var(--narrative-body) !important;
    line-height: var(--narrative-lh) !important;
    font-weight: 400;
}

.problem-fragment-line > span:first-child {
    margin-bottom: 0.6rem;
}

.problem-fragment-line__items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.7rem;
    /* Cordis green — these are disciplines that have solved
       model-driven development. Green = growth, success. */
    color: rgba(120, 200, 115, 0.82);
    font-size: 0.92em;
    font-weight: 500;
    letter-spacing: 0.01em;
}

.problem-fragment-line__items > span {
    white-space: nowrap;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    border: 1px solid rgba(59, 170, 53, 0.28);
    background: rgba(59, 170, 53, 0.06);
}

.problem-standalone {
    color: rgba(239, 243, 255, 0.82) !important;
    font-size: var(--narrative-body);
    line-height: var(--narrative-lh);
}

.problem-payoff {
    margin-top: clamp(1rem, 2vw, 1.4rem) !important;
    padding-top: clamp(1.4rem, 2vw, 1.8rem);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: #ffffff !important;
    font-size: clamp(1.15rem, 1.55vw, 1.38rem);
    line-height: 1.55;
    font-weight: 600;
    letter-spacing: -0.015em;
    text-wrap: balance;
    position: relative;
}

.problem-payoff::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: clamp(140px, 30%, 260px);
    height: 1px;
    background: linear-gradient(90deg,
        rgba(226, 7, 23, 0.4) 0%,
        rgba(31, 156, 216, 0.7) 50%,
        rgba(124, 236, 255, 0.4) 82%,
        transparent 100%);
}

.home-problem .problem-content > p + p {
    margin-top: 0;
}

/* ── 9. Development flow section ─────────────────────────────────── */
.home-development-flow {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.home-development-flow::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 28% 55% at 2% 50%, rgba(226, 7, 23, 0.04) 0%, transparent 60%),
        radial-gradient(ellipse 28% 55% at 98% 50%, rgba(124, 236, 255, 0.05) 0%, transparent 60%),
        radial-gradient(ellipse 70% 50% at 50% -5%, rgba(31, 156, 216, 0.06) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}

.home-development-flow > .container {
    position: relative;
    z-index: 1;
}

.home-development-flow .section-header {
    margin-bottom: calc(var(--section-gap) * 0.58);
}

.home-development-flow .section-h2 {
    font-size: clamp(2.3rem, 4vw, 3.6rem);
    letter-spacing: -0.04em;
    line-height: 1.05;
}

.development-flow-head .section-h2 span {
    display: block;
    white-space: nowrap;
}

.development-flow-head {
    width: 100%;
    max-width: min(780px, 100%);
    margin-inline: auto;
}

/* Centered vertical stack — image on top with halo, content below.
   Mirrors Data Foundation's top-down centered reading flow. */
.development-flow-layout {
    /* 100% so we fit inside the parent .container's padding-box.
       Using a viewport unit here would overflow on narrow phones where
       the container is 95vw with 12px Bootstrap gutters. */
    width: min(1100px, 100%);
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2.5rem, 4.5vw, 4rem);
    align-items: center;
    justify-items: center;
}

.development-flow-media {
    position: relative;
    width: 100%;
    max-width: min(820px, 100%);
    margin-inline: auto;
    align-self: center;
    justify-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Strong Cordis-blue halo behind image — matches Data Foundation's image halo */
.development-flow-media::before {
    content: "";
    position: absolute;
    inset: -15% -25%;
    background:
        radial-gradient(ellipse 70% 60% at 50% 50%, rgba(31, 156, 216, 0.14) 0%, transparent 65%),
        radial-gradient(ellipse 50% 50% at 50% 50%, rgba(124, 236, 255, 0.08) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.development-flow-media img {
    width: 100%;
    height: auto;
    display: block;
    margin-inline: auto;
    object-fit: contain;
    object-position: center;
    border-radius: 1.25rem;
    position: relative;
    z-index: 1;
    /* Tone down the PNG's bright whites so it sits comfortably on the
       dark navy background. brightness/contrast/saturate mix keeps the
       diagram's meaningful colors intact while dimming the paper-white. */
    filter:
        brightness(0.82)
        contrast(1.05)
        saturate(0.92)
        drop-shadow(0 0 48px rgba(124, 236, 255, 0.13))
        drop-shadow(0 0 16px rgba(31, 156, 216, 0.12))
        drop-shadow(0 12px 40px rgba(2, 8, 20, 0.55));
}

.development-flow-content {
    width: 100%;
    max-width: min(720px, 100%);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: clamp(1.2rem, 1.8vw, 1.6rem);
    padding-top: 0;
    align-self: center;
    text-align: center;
}

.development-flow-content p {
    margin: 0;
    font-size: var(--narrative-body);
    line-height: var(--narrative-lh);
    color: rgba(239, 243, 255, 0.72);
    text-wrap: pretty;
    /* body paragraphs stay left-aligned even inside centered content —
       long-form text reads better left-aligned */
    text-align: left;
}

.development-flow-content p + p {
    margin-top: 0;
}

.development-flow-payoff {
    margin-top: clamp(1.2rem, 2.2vw, 1.8rem) !important;
    padding-top: clamp(1.4rem, 2vw, 1.8rem);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: #ffffff !important;
    font-size: clamp(1.15rem, 1.55vw, 1.38rem);
    line-height: 1.55;
    font-weight: 600;
    letter-spacing: -0.015em;
    text-wrap: balance;
    position: relative;
}

.development-flow-payoff::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(140px, 30%, 260px);
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(226, 7, 23, 0.4) 18%,
        rgba(31, 156, 216, 0.7) 50%,
        rgba(124, 236, 255, 0.4) 82%,
        transparent 100%);
}

/* ── 10. Connected platform section ───────────────────────────────── */
.home-connected-platform {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.home-connected-platform::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 28% 55% at 2% 50%, rgba(226, 7, 23, 0.04) 0%, transparent 60%),
        radial-gradient(ellipse 28% 55% at 98% 50%, rgba(124, 236, 255, 0.045) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 50% 100%, rgba(31, 156, 216, 0.06) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.home-connected-platform > .container {
    position: relative;
    z-index: 1;
}

.home-connected-platform .section-header {
    margin-bottom: calc(var(--section-gap) * 0.9);
}

.home-connected-platform .section-h2 {
    font-size: clamp(2.3rem, 4vw, 3.6rem);
    letter-spacing: -0.04em;
    line-height: 1.05;
}

.connected-platform-layout {
    /* 100% so we fit inside the parent .container's padding-box.
       Using a viewport unit here would overflow on narrow phones where
       the container is 95vw with 12px Bootstrap gutters. */
    width: min(1180px, 100%);
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 0.98fr) minmax(0, 1.06fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
}

.home-connected-platform {
    padding-top: calc(var(--section-pad-y) * var(--pad-scale-mid));
}

.connected-platform-media {
    position: relative;
    width: 100%;
    min-height: clamp(360px, 40vw, 560px);
    border-radius: 1rem;
    display: grid;
    place-items: center;
    overflow: visible;
    isolation: isolate;
}

/* Cordis-blue halo behind image — matches Data Foundation's image halo */
.connected-platform-media::before {
    content: "";
    position: absolute;
    inset: -6% -10%;
    background:
        radial-gradient(ellipse 70% 60% at 50% 50%, rgba(31, 156, 216, 0.13) 0%, transparent 65%),
        radial-gradient(ellipse 50% 50% at 50% 50%, rgba(124, 236, 255, 0.07) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.connected-platform-content {
    width: 100%;
    margin-inline: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(1.2rem, 1.8vw, 1.6rem);
    padding-top: 0;
}

.connected-platform-content p {
    margin: 0;
    font-size: var(--narrative-body);
    line-height: var(--narrative-lh);
    color: rgba(239, 243, 255, 0.72);
    text-wrap: pretty;
}

.connected-platform-payoff {
    margin-top: clamp(1rem, 1.8vw, 1.5rem) !important;
    padding-top: clamp(1.4rem, 2vw, 1.8rem);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: #ffffff !important;
    font-size: clamp(1.15rem, 1.55vw, 1.38rem);
    line-height: 1.55;
    font-weight: 600;
    letter-spacing: -0.015em;
    text-wrap: balance;
    position: relative;
}

.connected-platform-payoff::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: clamp(120px, 26%, 220px);
    height: 1px;
    background: linear-gradient(90deg,
        rgba(226, 7, 23, 0.45) 0%,
        rgba(31, 156, 216, 0.75) 45%,
        rgba(124, 236, 255, 0.35) 90%,
        transparent 100%);
}

.connected-platform-slide-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: 0.82rem 1.25rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.connected-platform-slide-link:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    text-decoration: none;
}

.connected-platform-media img {
    width: 100%;
    height: 100%;
    min-height: inherit;
    object-fit: contain;
    display: block;
    padding: 0.25rem;
    position: relative;
    z-index: 1;
    filter:
        drop-shadow(0 0 48px rgba(124, 236, 255, 0.12))
        drop-shadow(0 0 16px rgba(31, 156, 216, 0.1))
        drop-shadow(0 12px 40px rgba(2, 8, 20, 0.45));
}

.connected-platform-heading {
    margin: 0;
}

.connected-platform-heading span {
    display: block;
}

@media (max-width: 860px) {
    .development-flow-head .section-h2 span {
        white-space: normal;
    }

    .development-flow-layout {
        grid-template-columns: 1fr;
    }

    .development-flow-content {
        order: 1;
    }

    .development-flow-media {
        order: 2;
    }

    .connected-platform-layout {
        grid-template-columns: 1fr;
    }

    .connected-platform-content {
        order: 1;
    }

    .connected-platform-media {
        order: 2;
        min-height: clamp(260px, 70vw, 420px);
    }
}

/* ── 9. Shift section ────────────────────────────────────────────── */
.shift-intro {
    max-width: min(680px, 92vw);
    margin: 0 auto;
    text-align: center;
}

.shift-intro p {
    margin: 0 0 1.1rem;
    font-size: 1.05rem;
    line-height: 1.78;
    color: var(--text-secondary);
}

.shift-intro p:last-child { margin-bottom: 0; }

.shift-emphasis {
    color: var(--text-primary) !important;
    font-weight: 500;
}

.shift-intro .section-header {
    margin-bottom: 1.4rem;
}

.shift-table {
    margin-top: var(--section-gap);
    border: 1px solid var(--border-subtle);
    border-radius: 0.75rem;
    overflow: hidden;
}

.shift-table__head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--bg-2);
    border-bottom: 1px solid var(--border-visible);
}

.shift-table__col-label {
    padding: 0.9rem 1.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    display: block;
}

.shift-table__col-label:first-child {
    border-right: 1px solid var(--border-subtle);
}

.shift-table__col-label--right {
    color: rgba(124, 236, 255, 0.55);
}

.shift-table__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid var(--border-subtle);
    transition: background 180ms ease;
}

.shift-table__row:last-child { border-bottom: none; }

.shift-table__row:hover {
    background: rgba(124, 236, 255, 0.025);
}

.shift-table__old,
.shift-table__new {
    padding: 1.05rem 1.5rem;
    font-size: 0.95rem;
    line-height: 1.55;
}

.shift-table__old {
    color: var(--text-muted);
    border-right: 1px solid var(--border-subtle);
    font-style: italic;
}

.shift-table__new {
    color: var(--text-primary);
    border-left: 3px solid rgba(124, 236, 255, 0.3);
    padding-left: calc(1.5rem - 3px);
}

.shift-table__row:hover .shift-table__new {
    border-left-color: rgba(124, 236, 255, 0.6);
}

@media (max-width: 640px) {
    .shift-table__head,
    .shift-table__row {
        grid-template-columns: 1fr;
    }

    .shift-table__col-label:first-child,
    .shift-table__old {
        border-right: none;
        border-bottom: 1px solid var(--border-subtle);
    }

    .shift-table__old { font-style: normal; padding-bottom: 0.65rem; }
    .shift-table__new { border-left: 3px solid rgba(124, 236, 255, 0.3); }
}

/* ── 10. Platform section ────────────────────────────────────────── */
.home-platform .section-header {
    margin-bottom: calc(var(--section-gap) * 0.6);
}

.platform-intro {
    max-width: min(640px, 92vw);
    margin: 0 auto calc(var(--section-gap) * 0.8);
    text-align: center;
}

.platform-intro p {
    margin: 0 0 1rem;
    font-size: 1.05rem;
    line-height: 1.76;
    color: var(--text-secondary);
}

.platform-intro p:last-child { margin-bottom: 0; }

.platform-diagram-wrap {
    width: min(960px, 92vw);
    margin: 0 auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Platform SVG diagram */
.platform-svg {
    display: block;
    width: 100%;
    min-width: 520px;
    height: auto;
}

.pdiag-label {
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    fill: var(--text-secondary, rgba(239,243,255,0.62));
}

.pdiag-label--left  { text-anchor: end; }
.pdiag-label--right { text-anchor: start; }

.pdiag-center-label {
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 9px;
    font-weight: 500;
    fill: rgba(124, 236, 255, 0.55);
    text-anchor: middle;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pdiag-arm-label {
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 10px;
    font-weight: 600;
    fill: var(--text-muted, rgba(239,243,255,0.35));
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pdiag-arm-label--right { text-anchor: end; }

/* ── 11. Outcomes section ────────────────────────────────────────── */
.outcomes-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid var(--border-subtle);
    border-left: 1px solid var(--border-subtle);
}

.outcome-item {
    padding: clamp(1.6rem, 2.8vw, 2.4rem);
    border-bottom: 1px solid var(--border-subtle);
    border-right: 1px solid var(--border-subtle);
}

/* Stagger right column down on wide screens */
@media (min-width: 900px) {
    .outcome-item:nth-child(even) {
        margin-top: clamp(1.5rem, 2.5vw, 2.5rem);
    }
}

.outcome-item__num {
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.outcome-item__title {
    margin: 0 0 0.65rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.38;
    color: var(--text-primary);
    transition: color 200ms ease;
}

.outcome-item:hover .outcome-item__title {
    color: var(--accent-cyan);
}

.outcome-item__body {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.72;
    color: var(--text-secondary);
}

@media (max-width: 640px) {
    .outcomes-grid {
        grid-template-columns: 1fr;
    }

    .outcome-item:nth-child(even) {
        margin-top: 0;
    }
}

/* ── 12. Audience section ────────────────────────────────────────── */
.audience-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--card-gap);
}

.audience-card {
    padding: clamp(1.8rem, 3vw, 2.6rem);
    background: var(--bg-2);
    border: 1px solid var(--border-visible);
    border-top-width: 3px;
    border-radius: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: border-color 220ms ease;
}

.audience-card--oem         { border-top-color: var(--accent-cyan); }
.audience-card--integrators { border-top-color: var(--accent-blue); }

.audience-card:hover { border-color: rgba(255, 255, 255, 0.22); }
.audience-card--oem:hover         { border-top-color: var(--accent-cyan); }
.audience-card--integrators:hover { border-top-color: var(--accent-blue); }

.audience-card__label {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.audience-card p {
    margin: 0;
    font-size: 0.96rem;
    line-height: 1.74;
    color: var(--text-secondary);
}

.audience-card__link {
    margin-top: auto;
    padding-top: 0.5rem;
    font-size: 0.87rem;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    align-self: flex-start;
    transition: color 200ms ease;
}

.audience-card__link:hover {
    color: var(--text-primary);
    text-decoration: none;
}

@media (max-width: 720px) {
    .audience-grid { grid-template-columns: 1fr; }
}

/* ── 13. Proof section ───────────────────────────────────────────── */
.home-proof .section-header { margin-bottom: calc(var(--section-gap) * 0.6); }

.proof-context {
    max-width: min(600px, 92vw);
    margin: 0 auto;
    text-align: center;
    font-size: 1.05rem;
    line-height: 1.74;
    color: var(--text-secondary);
}

.proof-quotes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--card-gap);
    max-width: min(900px, 92vw);
    margin: var(--section-gap) auto 0;
}

/* ── 13. Domains section ─────────────────────────────────────────── */
.home-domains {
    padding-top: calc(var(--section-pad-y) * var(--pad-scale-tight));
    padding-bottom: calc(var(--section-pad-y) * var(--pad-scale-mid));
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.home-domains::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 28% 55% at 2% 50%, rgba(226, 7, 23, 0.04) 0%, transparent 60%),
        radial-gradient(ellipse 28% 55% at 98% 50%, rgba(124, 236, 255, 0.045) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 50% 0%, rgba(31, 156, 216, 0.06) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.home-domains > .container {
    position: relative;
    z-index: 1;
}

.home-domains .section-header {
    margin-bottom: calc(var(--section-gap) * 0.72);
}

.home-domains .section-h2 {
    font-size: clamp(2.3rem, 4vw, 3.6rem);
    letter-spacing: -0.04em;
    line-height: 1.05;
}

.domains-head {
    width: min(780px, 92vw);
}

.domains-head .section-h2 span {
    display: block;
    white-space: nowrap;
}

@media (max-width: 860px) {
    .domains-head .section-h2 span {
        white-space: normal;
    }
}

.home-foundation {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.home-foundation::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 28% 55% at 2% 50%, rgba(226, 7, 23, 0.04) 0%, transparent 60%),
        radial-gradient(ellipse 28% 55% at 98% 50%, rgba(124, 236, 255, 0.045) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 50% 0%, rgba(31, 156, 216, 0.06) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* Hero → body bridge: whisper-thin multi-hue hairline at the very top,
   echoing the hero's red/blue/green petals so the transition feels continuous. */
.home-foundation::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(226, 7, 23, 0.35) 25%,
        rgba(31, 156, 216, 0.5) 50%,
        rgba(59, 170, 53, 0.35) 75%,
        transparent 100%);
    pointer-events: none;
    z-index: 1;
}

.home-foundation > .container {
    position: relative;
    z-index: 1;
}

.home-foundation .section-header {
    margin-bottom: calc(var(--section-gap) * 0.9);
}

.home-foundation .section-h2 {
    font-size: clamp(2.3rem, 4vw, 3.6rem);
    letter-spacing: -0.04em;
    line-height: 1.05;
}

.foundation-content {
    width: min(720px, 92vw);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.foundation-quote-row {
    display: grid;
    grid-template-columns: minmax(180px, 0.42fr) minmax(0, 1fr);
    gap: clamp(1.2rem, 2vw, 1.8rem);
    align-items: stretch;
    position: relative;
    isolation: isolate;
}

/* Framed composition — a faint warm halo hugs the portrait on the
   left, a cool halo hugs the quote on the right. Mirrors the Data
   Foundation section's red↔blue tension at a smaller scale and
   makes the whole row read as a single centered, framed moment. */
.foundation-quote-row::before {
    content: "";
    position: absolute;
    inset: -8% -4%;
    background:
        radial-gradient(ellipse 22% 70% at 12% 50%, rgba(226, 7, 23, 0.05) 0%, transparent 70%),
        radial-gradient(ellipse 22% 70% at 88% 50%, rgba(31, 156, 216, 0.08) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.foundation-quote-row > * {
    position: relative;
    z-index: 1;
}

.foundation-portrait {
    min-height: 100%;
    overflow: visible;
    background: transparent;
    align-self: stretch;
    position: relative;
}

.foundation-portrait img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1rem;
    box-shadow:
        0 16px 40px rgba(2, 8, 20, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.04);
}

.foundation-quote {
    margin: 0;
    padding: clamp(1.4rem, 2vw, 1.8rem) clamp(1.4rem, 2.2vw, 1.9rem);
    padding-left: clamp(1.7rem, 2.5vw, 2.2rem);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 2px solid rgba(31, 156, 216, 0.55);
    border-radius: 0 14px 14px 0;
    background: rgba(255, 255, 255, 0.025);
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
}

.foundation-quote p {
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: clamp(1.08rem, 1.4vw, 1.28rem);
    line-height: 1.72;
    font-style: italic;
}

.foundation-quote cite {
    display: block;
    margin-top: 0.8rem;
    padding-top: 0.8rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.52);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-style: normal;
}

.foundation-content p {
    margin: 0;
    font-size: clamp(1rem, 1.2vw, 1.14rem);
    line-height: 1.82;
    color: rgba(255, 255, 255, 0.68);
}

.foundation-payoff {
    margin-top: 0.5rem !important;
    padding-top: clamp(1.4rem, 2vw, 1.8rem);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: #ffffff !important;
    font-size: clamp(1.1rem, 1.5vw, 1.32rem) !important;
    line-height: 1.55 !important;
    font-weight: 600 !important;
    letter-spacing: -0.015em;
    text-align: center;
    text-wrap: balance;
    position: relative;
}

.foundation-payoff::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(140px, 30%, 260px);
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(226, 7, 23, 0.4) 18%,
        rgba(31, 156, 216, 0.7) 50%,
        rgba(124, 236, 255, 0.4) 82%,
        transparent 100%);
}

.domains-intro {
    width: min(720px, 92vw);
    margin: 0 auto clamp(1.5rem, 3vw, 2.2rem);
    text-align: center;
}

.domains-intro p {
    margin: 0;
    color: rgba(239, 243, 255, 0.72);
    font-size: var(--narrative-body);
    line-height: var(--narrative-lh);
    text-wrap: balance;
}

.domains-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--card-gap);
    align-items: stretch;
}

.domain-card {
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}

.domain-card img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.domain-card:hover img {
    transform: translateY(-2px);
    border-color: rgba(31, 156, 216, 0.35);
    box-shadow:
        0 18px 34px rgba(2, 8, 20, 0.3),
        0 0 24px rgba(31, 156, 216, 0.1);
}

.domain-card:nth-child(3n):hover img {
    border-color: rgba(59, 170, 53, 0.35);
    box-shadow:
        0 18px 34px rgba(2, 8, 20, 0.3),
        0 0 24px rgba(59, 170, 53, 0.1);
}

.domain-card__label {
    display: block;
    color: rgba(239, 243, 255, 0.7);
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.45;
    text-transform: none;
    transition: color 180ms ease;
}

.domain-card:hover .domain-card__label {
    color: #ffffff;
}

.domains-payoff {
    margin: clamp(2rem, 3.5vw, 3rem) auto 0;
    padding-top: clamp(1.4rem, 2vw, 1.8rem);
    width: min(720px, 92vw);
    color: #ffffff !important;
    font-size: clamp(1.15rem, 1.55vw, 1.38rem);
    line-height: 1.55;
    font-weight: 600;
    letter-spacing: -0.015em;
    text-align: center;
    text-wrap: balance;
    position: relative;
}

.domains-payoff::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(140px, 30%, 260px);
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(226, 7, 23, 0.4) 18%,
        rgba(31, 156, 216, 0.7) 50%,
        rgba(124, 236, 255, 0.4) 82%,
        transparent 100%);
}

@media (max-width: 1200px) {
    .domains-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .domains-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .domains-grid {
        grid-template-columns: 1fr;
    }
}

.quote-block {
    margin: 0;
    padding: clamp(1.4rem, 2.5vw, 2rem);
    background: var(--bg-2);
    border: 1px solid var(--border-visible);
    border-left: 3px solid var(--accent-cyan);
    border-radius: 0 0.6rem 0.6rem 0;
}

.quote-block__body {
    margin: 0 0 1rem;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-secondary);
    font-style: normal;
}

.quote-block__attr {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
}

.quote-block__name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
}

.quote-block__role {
    font-size: 0.8rem;
    color: var(--text-muted);
}

@media (max-width: 720px) {
    .proof-quotes { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    .foundation-quote-row {
        grid-template-columns: 1fr;
    }

    .foundation-portrait {
        max-width: 220px;
        margin-inline: auto;
        aspect-ratio: 1 / 1;
    }
}

/* ── 14. CTA section ─────────────────────────────────────────────── */
.home-cta {
    padding: clamp(6rem, 11vw, 10rem) 0;
    background: var(--bg-0);
    position: relative;
    overflow: hidden;
}

.home-cta__glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(
        ellipse 70% 90% at 50% 50%,
        rgba(124, 236, 255, 0.05) 0%,
        transparent 70%
    );
}

.home-cta__inner {
    position: relative;
    z-index: 1;
    max-width: min(640px, 92vw);
    margin: 0 auto;
    text-align: center;
}

.home-cta__heading {
    margin: 0;
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.022em;
    color: var(--text-primary);
}

.home-cta__sub {
    margin: 1.2rem 0 2.4rem;
    font-size: 1.05rem;
    line-height: 1.72;
    color: var(--text-secondary);
}

/* ── 15. IndustryLeadersStrip: partner label style update ────────── */
.site-shell:has(.home-vmodel-hero) .partners-strip-inner h2 {
    color: rgba(239, 243, 255, 0.78);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: clamp(1.1rem, 1.7vw, 1.35rem);
}


/* ── 16. Mobile polish (≤ 760px) ───────────────────────────────────
   Reduces section padding, tightens hero typography, and gives the
   V-model graphic more horizontal breathing room on small viewports. */
@media (max-width: 760px) {
    :root {
        --section-pad-y: clamp(3rem, 11vw, 5rem);
        --section-gap: clamp(1.6rem, 5vw, 2.6rem);
    }

    .container {
        width: min(1180px, 94vw);
    }

    .home-section .section-h2 {
        font-size: clamp(1.7rem, 6.4vw, 2.2rem);
        letter-spacing: -0.025em;
    }

    .hero-cycling-headline {
        font-size: clamp(2.4rem, 11.5vw, 3.6rem);
        letter-spacing: -0.035em;
        padding: 0 0.5rem;
    }

    .hero-top-layer__subheadline {
        padding: 0 0.85rem;
    }

    .hero-top-layer__cta-group {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
    }

    .hero-cta {
        flex: 1 1 auto;
        min-width: 9rem;
    }

    /* Give the V-model graphic the full mobile width so the 9 nodes are
       still legible. The aspect-ratio rule keeps proportions intact. */
    .vmodel-system {
        width: 96%;
    }

    .home-heart-section__p {
        font-size: clamp(18px, 4.6vw, 22px);
        line-height: 1.55;
    }

    .home-heart-section__p br {
        display: none;
    }

    /* Allow long-form headers to wrap on phones rather than overflow. */
    .problem-head .section-h2 span,
    .section-h2 span {
        white-space: normal;
    }
}

@media (max-width: 480px) {
    .container {
        width: min(1180px, 95vw);
    }

    .hero-cycling-headline {
        font-size: clamp(2.1rem, 12vw, 2.8rem);
    }

    .vmodel-system {
        width: 100%;
    }
}

/* Align the header's brand + nav with the page's content column so the
   left/right gutters match the sections below. Keeps the logo and the
   Solutions/Company/Sign-in cluster equidistant from the page edges. */
@media (min-width: 981px) {
    .site-header .container {
        width: min(1180px, 92vw);
        max-width: min(1180px, 92vw);
        margin: 0 auto;
        padding-left: 0;
        padding-right: 0;
    }
}

/* Lock in the floating-header dimensions upfront on hero pages so the brand
   and nav don't visibly jump when site-header.js adds `.is-floating-enabled`
   after the initial render. Mirrors the heights set in SiteHeader.razor.css
   so the layout is identical before and after the script runs. */
.site-shell:has(.chat-hero) .site-header,
.site-shell:has(.coming-soon-page) .site-header,
.site-shell:has(.why-cordis-page) .site-header,
.site-shell:has(.sp-page) .site-header,
.site-shell:has(.news-page) .site-header,
.site-shell:has(.mcs-page) .site-header {
    height: 60px;
}

.site-shell:has(.chat-hero) .site-header .container,
.site-shell:has(.coming-soon-page) .site-header .container,
.site-shell:has(.why-cordis-page) .site-header .container,
.site-shell:has(.sp-page) .site-header .container,
.site-shell:has(.news-page) .site-header .container,
.site-shell:has(.mcs-page) .site-header .container {
    height: 100%;
}

@media (min-width: 981px) {
    .site-shell:has(.chat-hero) .site-header,
    .site-shell:has(.coming-soon-page) .site-header,
    .site-shell:has(.why-cordis-page) .site-header,
    .site-shell:has(.sp-page) .site-header,
    .site-shell:has(.news-page) .site-header,
    .site-shell:has(.mcs-page) .site-header {
        height: 76px;
    }
}

/* ── Mobile landscape (phones rotated sideways) ────────────────────────────
   Short viewport (≤ 500px tall) with a wide aspect. The portrait-tuned hero
   defaults assume vertical room: `min-height: 100vh`, multi-rem top padding,
   clamp-sized headlines that still read 2.5–4rem at these widths, and centered
   place-items grids that try to lift content into the middle. In landscape on
   a phone (~ 320px tall) that stack overflows and the header obscures the top
   of the section. These rules collapse the vertical lift, top-align content,
   and shrink the type so the visible hero fits in one screen. The home page
   has its own scoped landscape rules in HomeVModelHero.razor.css. */
@media (orientation: landscape) and (max-height: 500px) {
    /* Shared chat-hero base (Features, About, Contact). Drop the 100vh floor
       and the ~14vh top padding so the hero sits flush below the fixed header. */
    .chat-hero {
        min-height: auto;
        padding: 4.5rem 0 2rem;
    }

    .chat-hero h1 {
        font-size: clamp(1.6rem, 5.2vw, 2.4rem);
        line-height: 1.05;
    }

    .chat-subheadline {
        margin-top: 0.6rem;
        font-size: clamp(0.85rem, 2.4vw, 1rem);
        line-height: 1.5;
    }

    /* The `:has(.chat-hero)` rule earlier in the file forces a 7.2–9.8rem
       padding-top on hero pages to clear the floating header. In landscape
       that pushes everything off-screen — relax to a single fixed value
       just past the 60px floating header. */
    .site-shell:has(.chat-hero) .chat-hero:not(.home-vmodel-hero),
    .site-shell:has(.feature-page-canvas) .feature-page-canvas,
    .site-shell:has(.coming-soon-page) .coming-soon-page {
        padding-top: 4.5rem;
    }

    /* Generic dark-canvas pages (News, SubsidyProjects). Drop the 100vh
       min-height and let content scroll naturally; top-align so the heading
       reads first instead of getting centered into a too-short viewport. */
    .feature-page-canvas,
    .coming-soon-page {
        min-height: auto;
        padding: 4.5rem 1.2rem 2rem;
        place-items: start center;
    }

    /* Why-Cordis / Presentation wrapper. The 6–7.6rem top padding is portrait
       breathing room — collapse it. */
    .why-cordis-page {
        padding: 4.2rem 0 1.5rem;
    }

    /* Features hero two-column layout already collapses to one column at
       820px-wide. In landscape phones we're typically wider than 700px, so
       the row layout sticks — reduce the SVG preview height so chat-input
       + headline + preview all fit. */
    .hero-right #home-state-preview {
        height: clamp(10rem, 38vh, 18rem);
        max-height: 38vh;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   Modern control software — shared subpage layout
   Used by every page under /modern-control-software/.
   ═══════════════════════════════════════════════════════════════════ */

.mcs-subpage {
    color: var(--text-secondary);
}

.mcs-subpage a {
    color: #7cecff;
    text-decoration: none;
    border-bottom: 1px solid rgba(124, 236, 255, 0.32);
    transition: color 160ms ease, border-color 160ms ease;
}

.mcs-subpage a:hover {
    color: #b0f1ff;
    border-bottom-color: rgba(124, 236, 255, 0.78);
}

/* Breadcrumb */
.mcs-breadcrumb {
    padding-top: clamp(5.5rem, 11vh, 8.5rem);
    padding-bottom: 0;
}

.mcs-breadcrumb__inner {
    font-size: 0.85rem;
    color: rgba(239, 243, 255, 0.45);
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    letter-spacing: 0.02em;
}

.mcs-breadcrumb__inner a {
    border: none;
    color: rgba(239, 243, 255, 0.6);
}

.mcs-breadcrumb__inner a:hover {
    color: #b0f1ff;
}

.mcs-breadcrumb__sep {
    opacity: 0.5;
}

.mcs-breadcrumb__current {
    color: rgba(239, 243, 255, 0.85);
}

/* Article hero */
.mcs-article-hero {
    padding-top: clamp(7rem, 14vh, 10rem);
    padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.mcs-article-hero__inner {
    max-width: min(760px, 92vw);
}

.mcs-article-hero__overline {
    margin-bottom: 0.8rem;
}

.mcs-article-hero__h1 {
    font-size: clamp(2.1rem, 4.4vw, 3.4rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.028em;
    color: #ffffff;
    margin: 0 0 1.1rem;
    text-wrap: balance;
}

.mcs-article-hero__opener {
    font-size: clamp(1.05rem, 1.5vw, 1.18rem);
    line-height: 1.72;
    color: rgba(239, 243, 255, 0.82);
    margin: 0;
    max-width: 65ch;
}

/* Body article */
.mcs-article {
    padding-top: clamp(2rem, 4vw, 3.5rem);
    padding-bottom: clamp(3rem, 6vw, 5rem);
}

.mcs-article__inner {
    max-width: min(740px, 92vw);
}

.mcs-article h2 {
    font-size: clamp(1.4rem, 2.4vw, 1.8rem);
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -0.018em;
    color: #ffffff;
    margin: 2.6rem 0 0.9rem;
    text-wrap: balance;
}

.mcs-article h2:first-child {
    margin-top: 0;
}

.mcs-article h3 {
    font-size: 1.12rem;
    font-weight: 600;
    line-height: 1.3;
    color: #f0f4ff;
    margin: 1.6rem 0 0.6rem;
    letter-spacing: -0.01em;
}

.mcs-article p {
    font-size: 1.02rem;
    line-height: 1.78;
    color: rgba(239, 243, 255, 0.7);
    margin: 0 0 1.05rem;
}

.mcs-article ul,
.mcs-article ol {
    padding-left: 1.4rem;
    margin: 0 0 1.2rem;
    color: rgba(239, 243, 255, 0.7);
}

.mcs-article li {
    font-size: 1.02rem;
    line-height: 1.72;
    margin-bottom: 0.45rem;
}

.mcs-article li::marker {
    color: rgba(124, 236, 255, 0.62);
}

.mcs-article strong {
    color: #f4f7ff;
    font-weight: 600;
}

.mcs-article blockquote {
    margin: 1.6rem 0;
    padding: 1rem 1.3rem;
    border-left: 3px solid rgba(31, 156, 216, 0.55);
    background: rgba(31, 156, 216, 0.06);
    color: rgba(239, 243, 255, 0.82);
    font-size: 1.05rem;
    line-height: 1.72;
    border-radius: 0 0.4rem 0.4rem 0;
}

.mcs-article blockquote p {
    margin: 0;
    color: inherit;
}

.mcs-article table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.4rem 0;
    font-size: 0.95rem;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.5rem;
    overflow: hidden;
}

.mcs-article th,
.mcs-article td {
    padding: 0.75rem 1rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(239, 243, 255, 0.78);
}

.mcs-article th {
    background: rgba(255, 255, 255, 0.04);
    color: #f0f4ff;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.mcs-article tr:last-child td {
    border-bottom: none;
}

/* Related concepts */
.mcs-related {
    padding-top: clamp(3rem, 5vw, 4.5rem);
    padding-bottom: clamp(3rem, 5vw, 4.5rem);
}

.mcs-related__inner {
    max-width: min(900px, 92vw);
}

.mcs-related__title {
    font-size: clamp(1.3rem, 2.2vw, 1.6rem);
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 1.5rem;
    letter-spacing: -0.018em;
}

.mcs-related__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.9rem;
}

.mcs-related__item {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 0.55rem;
    transition: border-color 200ms ease, background-color 200ms ease;
}

.mcs-related__item a {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1rem 1.15rem;
    color: inherit;
    text-decoration: none;
    border: none;
}

.mcs-related__item:hover {
    border-color: rgba(31, 156, 216, 0.42);
    background: rgba(31, 156, 216, 0.05);
}

.mcs-related__item-title {
    font-size: 0.98rem;
    font-weight: 600;
    color: #f0f4ff;
    line-height: 1.32;
}

.mcs-related__item-summary {
    font-size: 0.88rem;
    color: rgba(239, 243, 255, 0.55);
    line-height: 1.55;
}

/* Closing About block */
.mcs-closer {
    padding-top: clamp(3rem, 5vw, 4.5rem);
    padding-bottom: clamp(4rem, 7vw, 6rem);
}

.mcs-closer__inner {
    max-width: min(720px, 92vw);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: clamp(2rem, 3.5vw, 2.8rem);
}

.mcs-closer__overline {
    margin-bottom: 0.7rem;
}

.mcs-closer__title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 0.85rem;
    letter-spacing: -0.012em;
}

.mcs-closer__body {
    font-size: 0.98rem;
    line-height: 1.72;
    color: rgba(239, 243, 255, 0.65);
    margin: 0 0 1.4rem;
}

.mcs-closer__cta {
    display: flex;
}