/* Paste this into Elementor Pro > Advanced > Custom CSS, or Site Settings > Custom CSS. Header/nav and footer CSS
removed. */
    .wf-tab:hover {
        background-color: #1FA67A;
    }

/* ============================================================
TOKENS — emerald · ink · paper, plus accents.
Type: Montserrat (display, body, and mono roles).
Easing curves are the soul of the motion system.
============================================================ */
    :root {
	/* tokens now in the uBind Design Tokens plugin */
}

    .btn:hover {
        color: white !important;
    }



    html {
        scroll-behavior: smooth;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    





    button {
        font: inherit;
        cursor: pointer;
        border: none;
        background: none;
        color: inherit;
    }

    





    /* ============================================================
TYPOGRAPHY PRIMITIVES
============================================================ */
    





    .h-display {
        font-family: var(--font-display);
        font-weight: 400;
        letter-spacing: -0.028em;
        line-height: 1.05;
        font-variation-settings: "opsz" 144;
        background: linear-gradient(135deg, var(--emerald-500), var(--emerald-700));
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    

    /* ============================================================
BUTTONS
============================================================ */
    

    

    .btn-primary:hover {
        background: var(--emerald-600);
        transform: translateY(-2px);
        box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 18px 40px -10px rgba(31, 166, 122, .6);
    }

    

    .btn-ghost:hover {
        background: rgba(255, 255, 255, .12);
        transform: translateY(-2px);
    }









    /* ============================================================
HERO — animated mesh, network paths, hero stage with floating dashboard
============================================================ */
    .hero {
        position: relative;
        min-height: 100vh;
        background: var(--ink-1000);
        color: white;
        overflow: hidden;
        isolation: isolate;
    }

    .hero-video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: -4;
        pointer-events: none;
    }

    /* dark tint over the video so hero text stays legible */
    .hero-video-overlay {
        position: absolute;
        inset: 0;
        z-index: -3;
        background:
            linear-gradient(180deg, rgba(3, 19, 13, .55) 0%, rgba(3, 19, 13, .35) 45%, rgba(5, 13, 11, .75) 100%),
            radial-gradient(70% 60% at 18% 20%, rgba(31, 166, 122, 0.28) 0%, transparent 60%);
        pointer-events: none;
    }

    .hero-mesh {
        position: absolute;
        inset: 0;
        z-index: -2;
        opacity: .5;
        background:
            radial-gradient(70% 60% at 18% 20%, rgba(31, 166, 122, 0.45) 0%, transparent 60%),
            radial-gradient(60% 50% at 88% 30%, rgba(105, 224, 176, 0.22) 0%, transparent 60%),
            radial-gradient(80% 70% at 50% 100%, rgba(18, 138, 95, 0.32) 0%, transparent 70%);
        animation: mesh-shift 18s ease-in-out infinite alternate;
    }



    





    

    





    .hero-network {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        opacity: 0.4;
        pointer-events: none;
    }

    .hero-network .node {
        fill: var(--emerald-400);
        filter: drop-shadow(0 0 6px var(--emerald-400));
    }

    .hero-network .ln {
        stroke: var(--emerald-400);
        stroke-width: 1;
        fill: none;
        stroke-dasharray: 4 6;
        animation: line-flow 12s linear infinite;
    }

    @keyframes line-flow {
        to {
            stroke-dashoffset: -200;
        }
    }

    .hero-grid {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: 1.05fr .95fr;
        gap: 80px;
        align-items: center;
    }

    @media (max-width: 1100px) {
        .hero-grid {
            grid-template-columns: 1fr;
            gap: 60px;
        }
    }

    .hero-eyebrow {
        color: var(--emerald-300);
        margin-bottom: 28px;
    }



    .hero h1 {
        font-size: clamp(46px, 6.4vw, 92px);
        margin-bottom: 28px;
        background: linear-gradient(180deg, #fff 0%, #b8d8ce 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .word-swap {
        display: inline-block;
        position: relative;
        min-width: 5ch;
        vertical-align: baseline;
        perspective: 600px;
    }

    .word-swap .word {
        display: inline-block;
        font-family: var(--font-display);
        font-style: italic;
        font-weight: 300;
        background: linear-gradient(135deg, var(--emerald-300), var(--emerald-500));
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        position: absolute;
        left: 0;
        top: 0;
        white-space: nowrap;
        opacity: 0;
        transform: translateY(20px) rotateX(-30deg);
        transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
    }

    .word-swap .word.active {
        opacity: 1;
        transform: translateY(0) rotateX(0);
        position: relative;
    }

    .word-swap .word.exiting {
        opacity: 0;
        transform: translateY(0) rotateX(0);
        position: absolute;
    }

    .hero-sub {
        font-size: 19px;
        line-height: 1.55;
        color: rgba(255, 255, 255, .7);
        max-width: 560px;
        margin-bottom: 40px;
    }

    .hero-ctas {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        margin-bottom: 56px;
    }

    .hero-stats {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
        padding-top: 40px;
        border-top: 1px solid rgba(255, 255, 255, .08);
    }

    .stat-num {
        font-family: var(--font-display);
        font-size: 38px;
        font-weight: 400;
        color: white;
        line-height: 1;
        letter-spacing: -0.03em;
        margin-bottom: 8px;
    }

    .stat-num .unit {
        color: var(--emerald-400);
    }

    .stat-label {
        font-size: 12.5px;
        color: rgba(255, 255, 255, .55);
    }

    @media (max-width: 720px) {


        .stat-num {
            font-size: 30px;
        }
    }

    /* Hero Stage */
    .hero-stage {
        display: none !important;
        position: relative;
        height: 620px;
        perspective: 1600px;
        opacity: 0;
        animation: fadeUp 1.2s .4s var(--ease-out) forwards;
    }

    .hero-stage::before {
        content: '';
        position: absolute;
        inset: -40px;
        background: radial-gradient(50% 50% at 50% 50%, rgba(31, 166, 122, .3) 0%, transparent 70%);
        filter: blur(40px);
        z-index: -1;
    }

    .dash-main {
        position: absolute;
        top: 40px;
        left: 0;
        width: 100%;
        max-width: 540px;
        background: linear-gradient(180deg, rgba(15, 28, 23, .95) 0%, rgba(8, 17, 14, .95) 100%);
        border: 1px solid rgba(255, 255, 255, .1);
        border-radius: var(--r-lg);
        box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .04), inset 0 1px 0 rgba(255, 255, 255,
                .06);
        overflow: hidden;
        animation: dash-float 8s ease-in-out infinite alternate;
    }

    @keyframes dash-float {
        0% {
            transform: translateY(0) rotateX(2deg) rotateY(-3deg);
        }

        100% {
            transform: translateY(-8px) rotateX(2deg) rotateY(-3deg);
        }
    }

    .dash-tabs {
        display: flex;
        align-items: center;
        padding: 14px 20px;
        border-bottom: 1px solid rgba(255, 255, 255, .06);
        background: rgba(255, 255, 255, .02);
    }

    .dash-tabs .dot-row {
        display: flex;
        gap: 6px;
        margin-right: 16px;
    }

    .dash-tabs .dot-row span {
        width: 11px;
        height: 11px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .15);
    }

    .dash-tabs .tab-pill {
        font-family: var(--mono);
        font-size: 11px;
        color: rgba(255, 255, 255, .6);
        padding: 4px 10px;
        border-radius: 6px;
        background: rgba(255, 255, 255, .05);
    }

    .dash-tabs .tab-pill.live {
        color: var(--emerald-300);
        background: rgba(31, 166, 122, .12);
    }

    .dash-body {
        padding: 24px;
    }

    .dash-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 18px;
    }

    .dash-row h4 {
        font-family: var(--font-display);
        font-size: 22px;
        color: white;
        font-weight: 400;
        letter-spacing: -0.01em;
    }

    .dash-row .meta {
        font-family: var(--mono);
        font-size: 11px;
        color: var(--emerald-300);
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .dash-row .meta .live-dot {
        width: 6px;
        height: 6px;
        background: var(--emerald-400);
        border-radius: 50%;
        animation: blink 1.5s ease-in-out infinite;
    }

    @keyframes blink {

        0%,
        100% {
            opacity: 1;
        }

        50% {
            opacity: .3;
        }
    }

    .premium-chart {
        position: relative;
        height: 180px;
        margin: 8px 0 18px;
    }

    .premium-chart svg {
        width: 100%;
        height: 100%;
        overflow: visible;
    }

    .premium-chart .area-path {
        animation: draw 2.5s var(--ease-out) forwards;
    }

    .premium-chart .line-path {
        stroke-dasharray: 1000;
        stroke-dashoffset: 1000;
        animation: draw-line 2.5s .3s var(--ease-out) forwards;
    }

    @keyframes draw {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes draw-line {
        to {
            stroke-dashoffset: 0;
        }
    }

    .premium-chart .pulse-dot {
        fill: var(--emerald-400);
        animation: pulse-dot 2s ease-in-out infinite;
        transform-origin: center;
    }

    @keyframes pulse-dot {

        0%,
        100% {
            r: 4;
            opacity: 1;
        }

        50% {
            r: 7;
            opacity: .6;
        }
    }

    .kpi-row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        padding-top: 18px;
        border-top: 1px solid rgba(255, 255, 255, .06);
    }

    .kpi {
        background: rgba(255, 255, 255, .03);
        border: 1px solid rgba(255, 255, 255, .06);
        border-radius: 10px;
        padding: 14px;
    }

    .kpi .label {
        font-family: var(--mono);
        font-size: 10px;
        color: rgba(255, 255, 255, .5);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        margin-bottom: 6px;
    }

    .kpi .value {
        font-family: var(--font-display);
        font-size: 24px;
        color: white;
        font-weight: 400;
        letter-spacing: -0.02em;
    }

    .kpi .delta {
        font-size: 11px;
        color: var(--emerald-400);
        margin-top: 2px;
    }

    .float-card {
        position: absolute;
        background: rgba(15, 28, 23, .85);
        backdrop-filter: blur(16px);
        border: 1px solid rgba(255, 255, 255, .1);
        border-radius: var(--r-md);
        box-shadow: 0 30px 60px -15px rgba(0, 0, 0, .5);
        padding: 16px;
        font-size: 13px;
    }

    .float-card.quote-card {
        width: 240px;
        right: -10px;
        top: -20px;
        background: linear-gradient(135deg, var(--emerald-500), var(--emerald-700));
        border-color: rgba(255, 255, 255, .15);
        animation: side-float-1 7s ease-in-out infinite alternate;
    }

    .float-card.notif-card {
        width: 280px;
        right: 30px;
        bottom: 60px;
        animation: side-float-2 9s ease-in-out infinite alternate;
    }

    @keyframes side-float-1 {
        0% {
            transform: translateY(0) rotate(3deg);
        }

        100% {
            transform: translateY(-12px) rotate(3deg);
        }
    }

    @keyframes side-float-2 {
        0% {
            transform: translateY(0) rotate(-2deg);
        }

        100% {
            transform: translateY(-14px) rotate(-2deg);
        }
    }

    .quote-card .label-mini {
        font-family: var(--mono);
        font-size: 10px;
        color: rgba(255, 255, 255, .7);
        letter-spacing: 0.1em;
        text-transform: uppercase;
        margin-bottom: 8px;
    }

    .quote-card .price {
        font-family: var(--font-display);
        font-size: 32px;
        color: white;
        font-weight: 400;
        letter-spacing: -0.02em;
        line-height: 1;
    }

    .quote-card .price small {
        font-size: 16px;
        opacity: .8;
    }

    .quote-card .product {
        font-size: 12px;
        color: rgba(255, 255, 255, .8);
        margin: 4px 0 12px;
    }

    .quote-card .bind-btn {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: rgba(255, 255, 255, .18);
        padding: 8px 12px;
        border-radius: 8px;
        font-size: 12px;
        color: white;
        font-weight: 500;
    }

    .notif-card {
        display: flex;
        gap: 12px;
        align-items: flex-start;
    }

    .notif-card .ic {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: rgba(31, 166, 122, .15);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--emerald-400);
        flex-shrink: 0;
    }

    .notif-card .txt {
        flex: 1;
    }

    .notif-card .txt .t {
        color: white;
        font-weight: 500;
        font-size: 13px;
        margin-bottom: 2px;
    }

    .notif-card .txt .d {
        color: rgba(255, 255, 255, .55);
        font-size: 11.5px;
    }

    @media (max-width: 1100px) {
        .hero-stage {
            height: 540px;
            max-width: 600px;
            margin: 0 auto;
        }
    }

    @media (max-width: 600px) {

        .hero-stage {
            height: 480px;
        }

        .float-card.quote-card {
            width: 200px;
            right: 0;
        }

        .float-card.notif-card {
            width: 220px;
            right: 20px;
        }
    }

    /* ============================================================
SECTION BASE + REVEAL
============================================================ */
    section.block {
        position: relative;
    }


    .section-head {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 48px;
        margin-bottom: 72px;
    }

    

    .section-head h2 {
        font-size: clamp(36px, 5vw, 64px);
        margin-top: 18px;
    }

    .section-head p {
        color: var(--ink-500);
        font-size: 17px;
        max-width: 540px;
        margin-top: 18px;
        line-height: 1.55;
    }

    @media (max-width: 768px) {
        .section-head {
            flex-direction: column;
            align-items: flex-start;
        }
    }

    



    



    

    

    

    

    





    /* ============================================================
3D ARCHITECTURE MODEL — the centerpiece (replaces VR/AR)
Real CSS 3D transform model with stacked translucent layers,
isometric viewing angle, slow rotation, animated data flowing
between layers, hover-to-focus per layer.
============================================================ */
    /* Seam: the logo marquee above is --ink-1000 too, and carries this rule on its own top edge. */
    .architecture {
        background: var(--ink-1000);
        border-top: var(--ub-seam-dark);
        color: white;
        overflow: hidden;
        position: relative;
    }

    .architecture::before {
        content: '';
        position: absolute;
        inset: 0;
        background:
            radial-gradient(50% 40% at 50% 30%, rgba(31, 166, 122, .18) 0%, transparent 70%),
            radial-gradient(40% 30% at 20% 70%, rgba(105, 224, 176, .12) 0%, transparent 60%),
            radial-gradient(40% 30% at 80% 80%, rgba(31, 166, 122, .1) 0%, transparent 60%);
        pointer-events: none;
    }

    .architecture .eyebrow {
        color: var(--emerald-400);
    }

    .architecture .section-head h2 {
        color: white;
    }

    

    .architecture .section-head p {
        color: rgba(255, 255, 255, .6);
    }

    .arch-grid {
        display: grid;
        grid-template-columns: .9fr 1.1fr;
        gap: 80px;
        align-items: center;
    }

    @media (max-width: 1100px) {
        .arch-grid {
            grid-template-columns: 1fr;
            gap: 60px;
        }
    }

    .arch-text h3 {
        font-family: var(--font-display);
        font-size: clamp(28px, 3.4vw, 42px);
        font-weight: 400;
        line-height: 1.1;
        letter-spacing: -0.02em;
        color: white;
        margin-bottom: 24px;
    }

    

    .arch-text>p {
        color: rgba(255, 255, 255, .7);
        font-size: 17px;
        line-height: 1.6;
        margin-bottom: 32px;
    }

    .arch-layer-list {
        display: grid;
        gap: 12px;
        margin-bottom: 32px;
    }

    .arch-layer-btn {
        display: flex;
        align-items: center;
        gap: 18px;
        padding: 16px 20px;
        background: rgba(255, 255, 255, .04);
        border: 1px solid rgba(255, 255, 255, .08);
        border-radius: var(--r-md);
        text-align: left;
        width: 100%;
        transition: background .25s, border-color .25s, transform .15s;
        cursor: pointer;
    }

    .arch-layer-btn:hover {
        background: rgba(31, 166, 122, .06);
        border-color: rgba(31, 166, 122, .3);
        transform: translateX(4px);
    }

    .arch-layer-btn.active {
        background: rgba(31, 166, 122, .1);
        border-color: var(--emerald-500);
        box-shadow: 0 0 0 1px var(--emerald-500), 0 8px 28px -10px rgba(31, 166, 122, .4);
    }

    .arch-layer-btn .num {
        font-family: var(--mono);
        font-size: 11px;
        color: var(--emerald-400);
        letter-spacing: 0.1em;
        min-width: 32px;
    }

    .arch-layer-btn .title {
        display: block;
        font-family: var(--font-display);
        font-size: 18px;
        font-weight: 400;
        color: white;
        margin-bottom: 4px;
        letter-spacing: -0.01em;
    }

    .arch-layer-btn .desc {
        display: block;
        font-size: 13px;
        color: rgba(255, 255, 255, .6);
        line-height: 1.4;
    }

    .arch-layer-btn .icn-side {
        flex-shrink: 0;
        width: 36px;
        height: 36px;
        display: grid;
        place-items: center;
        background: rgba(31, 166, 122, .12);
        border: 1px solid rgba(31, 166, 122, .25);
        border-radius: 10px;
        color: var(--emerald-300);
    }

    .arch-layer-btn.active .icn-side {
        background: var(--emerald-500);
        color: white;
        border-color: var(--emerald-400);
    }

    /* The 3D model itself */
    .arch-3d-stage {
        position: relative;
        aspect-ratio: 1.1 / 1;
        perspective: 2400px;
        perspective-origin: 50% 40%;
    }

    .arch-3d-world {
        position: absolute;
        inset: 0;
        transform-style: preserve-3d;
        transform: rotateX(58deg) rotateZ(-32deg);
        animation: world-spin 40s linear infinite;
    }

    @keyframes world-spin {
        from {
            transform: rotateX(58deg) rotateZ(-32deg);
        }

        to {
            transform: rotateX(58deg) rotateZ(-392deg);
        }
    }

    .arch-layer {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 480px;
        height: 480px;
        margin-left: -240px;
        margin-top: -240px;
        border-radius: 24px;
        transform-style: preserve-3d;
        transition: transform .5s var(--ease-out), opacity .4s, filter .4s;
    }

    .arch-layer .plane {
        position: absolute;
        inset: 0;
        background:
            linear-gradient(135deg, rgba(31, 166, 122, .12), rgba(15, 28, 23, .85)),
            repeating-linear-gradient(0deg, rgba(105, 224, 176, .06) 0 1px, transparent 1px 32px),
            repeating-linear-gradient(90deg, rgba(105, 224, 176, .06) 0 1px, transparent 1px 32px);
        border: 1px solid rgba(105, 224, 176, .25);
        border-radius: 24px;
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, .04) inset,
            0 60px 80px -40px rgba(0, 0, 0, .6);
        backdrop-filter: blur(8px);
    }

    .arch-layer .plane::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(60% 60% at 50% 50%, rgba(31, 166, 122, .18) 0%, transparent 70%);
        border-radius: 24px;
        pointer-events: none;
    }

    .arch-layer.l1 {
        transform: translateZ(-180px);
    }

    .arch-layer.l2 {
        transform: translateZ(-60px);
    }

    .arch-layer.l3 {
        transform: translateZ(60px);
    }

    .arch-layer.l4 {
        transform: translateZ(180px);
    }

    .arch-layer-tag {
        position: absolute;
        top: 14px;
        left: 18px;
        font-family: var(--mono);
        font-size: 11px;
        color: var(--emerald-300);
        letter-spacing: 0.12em;
        text-transform: uppercase;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .arch-layer-tag::before {
        content: '';
        width: 6px;
        height: 6px;
        background: var(--emerald-400);
        border-radius: 50%;
        box-shadow: 0 0 8px var(--emerald-400);
    }

    /* nodes (capabilities) sitting on each layer */
    .arch-node {
        position: absolute;
        background: linear-gradient(180deg, rgba(15, 28, 23, .95), rgba(8, 17, 14, .85));
        border: 1px solid rgba(105, 224, 176, .35);
        border-radius: 10px;
        padding: 10px 14px;
        color: white;
        font-size: 12px;
        font-weight: 500;
        white-space: nowrap;
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, .03) inset,
            0 8px 24px -8px rgba(0, 0, 0, .6);
        transform: translateZ(20px);
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .arch-node .dot-ic {
        width: 8px;
        height: 8px;
        border-radius: 2px;
        background: var(--emerald-400);
        box-shadow: 0 0 6px var(--emerald-400);
    }

    .arch-node.brand {
        background: linear-gradient(135deg, var(--emerald-500), var(--emerald-700));
        border-color: rgba(255, 255, 255, .18);
    }

    .arch-node.brand .dot-ic {
        background: white;
        box-shadow: 0 0 6px white;
    }

    .arch-node .meta {
        font-family: var(--mono);
        font-size: 9px;
        color: rgba(255, 255, 255, .55);
        letter-spacing: 0.06em;
    }

    /* vertical beams between layers — packets travel along these */
    .arch-beam {
        position: absolute;
        width: 2px;
        height: 360px;
        left: 50%;
        top: 50%;
        margin-left: -1px;
        margin-top: -180px;
        background: linear-gradient(180deg, rgba(31, 166, 122, .5), rgba(31, 166, 122, 0));
        transform-style: preserve-3d;
    }

    .arch-beam.b1 {
        transform: translate3d(-160px, -160px, 0) rotateY(0);
    }

    .arch-beam.b2 {
        transform: translate3d(160px, -160px, 0);
    }

    .arch-beam.b3 {
        transform: translate3d(160px, 160px, 0);
    }

    .arch-beam.b4 {
        transform: translate3d(-160px, 160px, 0);
    }

    .arch-beam.b5 {
        transform: translate3d(0, 0, 0);
    }

    .arch-packet {
        position: absolute;
        left: -3px;
        top: 0;
        width: 8px;
        height: 8px;
        background: var(--emerald-300);
        border-radius: 50%;
        box-shadow: 0 0 14px var(--emerald-300), 0 0 28px var(--emerald-400);
        animation: packet-flow 3s linear infinite;
    }

    .arch-beam.b2 .arch-packet {
        animation-delay: -0.7s;
    }

    .arch-beam.b3 .arch-packet {
        animation-delay: -1.4s;
    }

    .arch-beam.b4 .arch-packet {
        animation-delay: -2.1s;
    }

    .arch-beam.b5 .arch-packet {
        animation-delay: -1s;
    }

    @keyframes packet-flow {
        0% {
            top: 0;
            opacity: 0;
        }

        10% {
            opacity: 1;
        }

        90% {
            opacity: 1;
        }

        100% {
            top: 100%;
            opacity: 0;
        }
    }

    /* layer focus modes */
    .arch-3d-world[data-focus="1"] .arch-layer.l1 {
        transform: translateZ(-100px) scale(1.05);
    }

    .arch-3d-world[data-focus="1"] .arch-layer:not(.l1) {
        opacity: 0.25;
        filter: blur(2px);
    }

    .arch-3d-world[data-focus="2"] .arch-layer.l2 {
        transform: translateZ(-20px) scale(1.05);
    }

    .arch-3d-world[data-focus="2"] .arch-layer:not(.l2) {
        opacity: 0.25;
        filter: blur(2px);
    }

    .arch-3d-world[data-focus="3"] .arch-layer.l3 {
        transform: translateZ(100px) scale(1.05);
    }

    .arch-3d-world[data-focus="3"] .arch-layer:not(.l3) {
        opacity: 0.25;
        filter: blur(2px);
    }

    .arch-3d-world[data-focus="4"] .arch-layer.l4 {
        transform: translateZ(220px) scale(1.05);
    }

    .arch-3d-world[data-focus="4"] .arch-layer:not(.l4) {
        opacity: 0.25;
        filter: blur(2px);
    }

    /* Globe in background (for "global" positioning) */
    .arch-globe {
        position: absolute;
        right: -100px;
        top: -60px;
        width: 280px;
        height: 280px;
        opacity: 0.18;
        pointer-events: none;
        animation: globe-spin 50s linear infinite;
    }

    @keyframes globe-spin {
        to {
            transform: rotate(360deg);
        }
    }

    @media (max-width: 1100px) {
        .arch-3d-stage {
            max-width: 600px;
            margin: 0 auto;
            display: none;
        }

        .arch-layer {
            width: 360px;
            height: 360px;
            margin-left: -180px;
            margin-top: -180px;
        }

        .arch-beam {
            height: 280px;
            margin-top: -140px;
        }
    }

    /* Phones: the rotating 3D planes project a footprint far larger than the
       narrow stage, so they spilled onto the layer buttons above and the next
       section below. Shrink the model and clip the stage so it can never
       overlap neighbouring content. */
    @media (max-width: 600px) {
        .arch-3d-stage {
            aspect-ratio: auto;
            height: 340px;
            max-width: 340px;
            margin: 0 auto;
            overflow: hidden;
            border-radius: var(--r-lg);
        }

        .arch-layer {
            width: 210px;
            height: 210px;
            margin-left: -105px;
            margin-top: -105px;
        }

        .arch-layer.l1 {
            transform: translateZ(-105px);
        }

        .arch-layer.l2 {
            transform: translateZ(-35px);
        }

        .arch-layer.l3 {
            transform: translateZ(35px);
        }

        .arch-layer.l4 {
            transform: translateZ(105px);
        }

        /* keep the focused layer inside the reduced Z-spread */
        .arch-3d-world[data-focus="1"] .arch-layer.l1 {
            transform: translateZ(-60px) scale(1.04);
        }

        .arch-3d-world[data-focus="2"] .arch-layer.l2 {
            transform: translateZ(-12px) scale(1.04);
        }

        .arch-3d-world[data-focus="3"] .arch-layer.l3 {
            transform: translateZ(60px) scale(1.04);
        }

        .arch-3d-world[data-focus="4"] .arch-layer.l4 {
            transform: translateZ(128px) scale(1.04);
        }

        .arch-beam {
            height: 170px;
            margin-top: -85px;
        }

        .arch-beam.b1 {
            transform: translate3d(-95px, -95px, 0);
        }

        .arch-beam.b2 {
            transform: translate3d(95px, -95px, 0);
        }

        .arch-beam.b3 {
            transform: translate3d(95px, 95px, 0);
        }

        .arch-beam.b4 {
            transform: translate3d(-95px, 95px, 0);
        }

        .arch-node {
            font-size: 10px;
            padding: 7px 9px;
        }

        .arch-node .meta {
            display: none;
        }

        .arch-globe {
            width: 200px;
            height: 200px;
            right: -40px;
            top: -20px;
        }
    }

    /* ============================================================
RATING ENGINE — built-in feature showcase with live calc viz
============================================================ */
    .rating-section {
        background: var(--paper);
        position: relative;
    }

    .rating-grid {
        display: grid;
        grid-template-columns: 1fr 1.15fr;
        gap: 80px;
        align-items: center;

    }

    @media (max-width: 1024px) {
        .rating-grid {
            grid-template-columns: 1fr;
            gap: 56px;
        }
    }

    .rating-section .eyebrow {
        color: var(--emerald-600);
    }

    .rating-section h2 {
        font-size: clamp(32px, 4.4vw, 56px);
        margin-bottom: 22px;
    }

    

    .rating-section p.rating-lead {
        font-size: 18px;
        color: var(--ink-500);
        line-height: 1.6;
        max-width: 520px;
        margin-bottom: 28px;
        background: transparent;
    }

    .rating-features {
        display: grid;
        gap: 14px;
        margin-bottom: 28px;
    }

    .rating-feat {
        display: flex;
        gap: 14px;
        align-items: flex-start;
        padding: 14px 18px;
        background: white;
        border: 1px solid var(--ink-100);
        border-radius: var(--r-md);
    }

    .rating-feat .icn {
        flex-shrink: 0;
        width: 36px;
        height: 36px;
        background: var(--emerald-50);
        border: 1px solid var(--emerald-200);
        border-radius: 10px;
        display: grid;
        place-items: center;
        color: var(--emerald-600);
    }

    .rating-feat .t {
        font-family: var(--font-display);
        font-size: 17px;
        font-weight: 500;
        color: var(--ink-1000);
        letter-spacing: -0.01em;
        margin-bottom: 4px;
    }

    .rating-feat .d {
        color: var(--ink-500);
        font-size: 13.5px;
        line-height: 1.45;
    }

    /* Rating engine live calculator viz */
    .rating-calc {
        background: linear-gradient(180deg, var(--ink-1000), var(--emerald-950));
        color: white;
        border-radius: var(--r-xl);
        padding: 32px;
        box-shadow: 0 40px 80px -20px rgba(6, 26, 20, .4);
        position: relative;
        overflow: hidden;
        border: 1px solid rgba(31, 166, 122, .2);
    }

    .rating-calc::before {
        content: '';
        position: absolute;
        inset: 0;
        background:
            radial-gradient(50% 40% at 100% 0%, rgba(31, 166, 122, .25) 0%, transparent 60%),
            radial-gradient(40% 40% at 0% 100%, rgba(105, 224, 176, .18) 0%, transparent 60%);
        pointer-events: none;
    }

    .rating-calc-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 24px;
        position: relative;
        z-index: 1;
    }

    .rating-calc-head .title {
        font-family: var(--font-display);
        font-size: 20px;
        color: white;
        letter-spacing: -0.01em;
    }

    .rating-calc-head .pill {
        font-family: var(--mono);
        font-size: 10px;
        background: rgba(31, 166, 122, .18);
        border: 1px solid rgba(31, 166, 122, .35);
        color: var(--emerald-300);
        padding: 4px 10px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .rating-calc-head .pill .dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--emerald-400);
        animation: blink 1.5s ease-in-out infinite;
    }

    .rating-row {
        display: grid;
        grid-template-columns: 1fr auto auto;
        gap: 14px;
        align-items: center;
        padding: 12px 14px;
        margin-bottom: 6px;
        background: rgba(255, 255, 255, .03);
        border: 1px solid rgba(255, 255, 255, .06);
        border-radius: 10px;
        position: relative;
        z-index: 1;
        font-size: 13.5px;
        transition: background .2s, border-color .2s;
    }

    .rating-row.applied {
        background: rgba(31, 166, 122, .08);
        border-color: rgba(31, 166, 122, .25);
    }

    .rating-row .label {
        display: flex;
        align-items: center;
        gap: 10px;
        color: rgba(255, 255, 255, .85);
    }

    .rating-row .label .pulse-bar {
        width: 3px;
        height: 18px;
        border-radius: 2px;
        background: rgba(255, 255, 255, .15);
        transition: background .2s;
    }

    .rating-row.applied .label .pulse-bar {
        background: var(--emerald-400);
    }

    .rating-row .factor {
        font-family: var(--mono);
        font-size: 12px;
        color: rgba(255, 255, 255, .5);
        min-width: 56px;
        text-align: right;
    }

    .rating-row.applied .factor {
        color: var(--emerald-300);
    }

    .rating-row .running {
        font-family: var(--font-display);
        font-size: 15px;
        color: white;
        font-weight: 500;
        letter-spacing: -0.01em;
        min-width: 88px;
        text-align: right;
    }

    .rating-result {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 14px;
        align-items: center;
        margin-top: 18px;
        padding: 22px;
        background: linear-gradient(135deg, var(--emerald-500), var(--emerald-700));
        border-radius: var(--r-md);
        position: relative;
        z-index: 1;
    }

    .rating-result .l {
        font-family: var(--mono);
        font-size: 11px;
        color: rgba(255, 255, 255, .85);
        letter-spacing: 0.1em;
        text-transform: uppercase;
        margin-bottom: 6px;
    }

    .rating-result .premium {
        font-family: var(--font-display);
        font-size: 36px;
        color: white;
        font-weight: 500;
        letter-spacing: -0.02em;
        line-height: 1;
    }

    .rating-result .premium small {
        font-size: 20px;
        opacity: .8;
        margin-left: 4px;
    }

    .rating-result .ms {
        font-family: var(--mono);
        font-size: 11px;
        color: rgba(255, 255, 255, .7);
        margin-top: 6px;
    }

    .rating-result .bind-cta {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: rgba(255, 255, 255, .18);
        padding: 12px 18px;
        border-radius: 999px;
        font-size: 13px;
        color: white;
        font-weight: 500;
        border: 1px solid rgba(255, 255, 255, .2);
        transition: background .2s;
    }

    .rating-result .bind-cta:hover {
        background: rgba(255, 255, 255, .28);
    }

    /* -------------------------------------------------
   Responsive layout for the rating calculator
   ------------------------------------------------- */

    .rating-calc,
    .rating-calc * {
        box-sizing: border-box;
    }

    .rating-calc {
        width: 100%;
        min-width: 0;
        margin-inline: auto;
        overflow-x: hidden;
    }

    /* Header and result footer */
    .rating-calc-head,
    .rating-result {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }

    .rating-calc-head>div,
    .rating-result>div {
        min-width: 0;
    }

    .rating-calc-head .title,
    .rating-calc-head>div>div:last-child,
    .rating-result .ms {
        overflow-wrap: anywhere;
    }

    .rating-calc-head .pill,
    .rating-result .bind-cta {
        flex: 0 0 auto;
    }

    /* Rating rows */
    .rating-row {
        display: grid;
        grid-template-columns:
            minmax(0, 1fr) minmax(80px, max-content) minmax(108px, max-content);
        align-items: center;
        column-gap: clamp(12px, 2vw, 24px);
    }

    .rating-row .label {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .rating-row .pulse-bar {
        flex: 0 0 auto;
    }

    .rating-row .factor,
    .rating-row .running {
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }

    .rating-row .running {
        text-align: right;
    }

    /* Result area */
    .rating-result .premium {
        max-width: 100%;
        white-space: nowrap;
    }

    .rating-result .bind-cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        white-space: nowrap;
    }

    /* Tablet and smaller mobile screens */
    @media (max-width: 720px) {
        .rating-calc-head {
            align-items: flex-start;
            flex-wrap: wrap;
        }

        .rating-calc-head .pill {
            margin-left: 0;
        }

        .rating-row {
            grid-template-columns: minmax(0, 1fr) max-content;
            grid-template-areas:
                "label factor"
                "running running";
            row-gap: 6px;
        }

        .rating-row .label {
            grid-area: label;
        }

        .rating-row .factor {
            grid-area: factor;
            align-self: start;
            justify-self: end;
        }

        .rating-row .running {
            grid-area: running;
            justify-self: end;
        }

        .rating-result {
            flex-direction: column;
            align-items: stretch;
        }

        .rating-result>div {
            width: 100%;
        }

        .rating-result .premium {
            font-size: clamp(38px, 11vw, 64px);
            line-height: 1;
        }

        .rating-result .bind-cta {
            width: 100%;
        }
    }

    /* Narrow phones */
    @media (max-width: 480px) {
        .rating-calc-head {
            flex-direction: column;
            gap: 10px;
        }

        .rating-calc-head .pill {
            align-self: flex-start;
        }

        .rating-row {
            grid-template-columns: minmax(0, 1fr) max-content;
            grid-template-areas:
                "label label"
                "factor running";
            row-gap: 8px;
        }

        .rating-row .label {
            line-height: 1.4;
        }

        .rating-row .factor {
            justify-self: start;
        }

        .rating-row .running {
            justify-self: end;
        }

        .rating-result .premium {
            font-size: clamp(34px, 14vw, 52px);
        }

        .rating-result .ms {
            line-height: 1.5;
        }
    }

    /* Very narrow devices */
    @media (max-width: 340px) {
        .rating-row {
            grid-template-columns: 1fr;
            grid-template-areas:
                "label"
                "factor"
                "running";
        }

        .rating-row .factor {
            justify-self: start;
        }

        .rating-row .running {
            justify-self: start;
        }

        .rating-result .premium {
            white-space: normal;
        }
    }

    /* ============================================================
COMPETITOR BENCHMARK — sophisticated comparison table
============================================================ */
    /* Seam: .rating-section above is --paper and this gradient starts at --paper. */
    .benchmark {
        background: linear-gradient(180deg, var(--paper) 0%, white 100%);
        border-top: var(--ub-seam-light);
        position: relative;
        overflow: hidden;
    }

    .benchmark::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 800px;
        height: 800px;
        background: radial-gradient(circle, rgba(31, 166, 122, .06) 0%, transparent 60%);
        filter: blur(40px);
        transform: translate(-50%, -50%);
        z-index: 0;
    }

    .benchmark>.container {
        position: relative;
        z-index: 1;
    }

    .bm-table-wrap {
        background: white;
        border: 1px solid var(--ink-100);
        border-radius: var(--r-xl);
        box-shadow: 0 30px 80px -30px rgba(6, 26, 20, .18);
        overflow: hidden;
        position: relative;
    }

    .bm-table {
        display: grid;
        grid-template-columns: 1.6fr repeat(5, 1fr);
        width: 100%;
    }

    .bm-cell {
        padding: 22px 20px;
        border-bottom: 1px solid var(--ink-100);
        border-right: 1px solid var(--ink-100);
        font-size: 14px;
        display: flex;
        align-items: center;
        position: relative;
    }

    .bm-cell:nth-child(6n) {
        border-right: none;
    }

    .bm-row.last .bm-cell {
        border-bottom: none;
    }

    .bm-cell.header {
        background: var(--ink-50);
        font-family: var(--mono);
        font-size: 12px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--ink-500);
        font-weight: 500;
        border-bottom: 2px solid var(--ink-100);
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 22px 20px 18px;
    }

    .bm-cell.header.ubind {
        background: linear-gradient(180deg, var(--emerald-50), white);
        color: var(--emerald-700);
    }

    .bm-cell.header .h-title {
        font-family: var(--font-display);
        font-size: 18px;
        color: var(--ink-1000);
        letter-spacing: -0.01em;
        text-transform: none;
        font-weight: 500;
    }

    .bm-cell.header.ubind .h-title {
        background: linear-gradient(135deg, var(--emerald-600), var(--emerald-800));
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .bm-cell.header .h-sub {
        font-family: var(--mono);
        font-size: 10px;
        color: var(--ink-400);
    }

    .bm-cell.feat {
        font-family: var(--body);
        font-weight: 500;
        color: var(--ink-900);
        font-size: 14.5px;
    }

    .bm-cell.feat .sublabel {
        display: block;
        font-family: var(--mono);
        font-size: 11px;
        font-weight: 400;
        color: var(--ink-400);
        letter-spacing: 0.06em;
        margin-top: 2px;
        text-transform: uppercase;
    }

    .bm-cell.val {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .bm-cell.val .v-icn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: 8px;
        margin-bottom: 4px;
    }

    .bm-cell.val.yes .v-icn {
        background: var(--emerald-100);
        color: var(--emerald-600);
    }

    .bm-cell.val.no .v-icn {
        background: var(--ink-100);
        color: var(--ink-400);
    }

    .bm-cell.val.partial .v-icn {
        background: rgba(245, 165, 36, .18);
        color: var(--amber);
    }

    .bm-cell.val .v-text {
        font-size: 12.5px;
        color: var(--ink-500);
        line-height: 1.4;
        font-family: var(--mono);
    }

    .bm-cell.val.ubind {
        background: linear-gradient(180deg, rgba(31, 166, 122, .06), rgba(31, 166, 122, .02));
    }

    .bm-cell.val.ubind .v-icn {
        background: var(--emerald-500);
        color: white;
        box-shadow: 0 4px 14px rgba(31, 166, 122, .4);
    }

    .bm-cell.val.ubind .v-text {
        color: var(--emerald-700);
        font-weight: 500;
    }

    .bm-ubind-col-highlight {
        position: absolute;
        top: 0;
        bottom: 0;
        left: calc(1.6 / 6.6 * 100% + (1 / 6.6 * 100%));
        width: calc(1 / 6.6 * 100%);
        background: linear-gradient(180deg, transparent, rgba(31, 166, 122, .04) 8%, rgba(31, 166, 122, .04) 92%, transparent);
        border-left: 1px solid rgba(31, 166, 122, .2);
        border-right: 1px solid rgba(31, 166, 122, .2);
        pointer-events: none;
        z-index: 0;
    }

    .bm-ubind-tag {
        position: absolute;
        left: calc(1.6 / 6.6 * 100%);
        top: -14px;
        width: calc(1 / 6.6 * 100%);
        display: flex;
        justify-content: center;
        pointer-events: none;
    }

    .bm-ubind-tag span {
        font-family: var(--mono);
        font-size: 10px;
        background: var(--emerald-500);
        color: white;
        padding: 4px 12px;
        border-radius: 999px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        box-shadow: 0 8px 24px -8px rgba(31, 166, 122, .5);
    }

    .bm-footnote {
        margin-top: 32px;
        font-family: var(--mono);
        font-size: 12px;
        color: var(--ink-400);
        text-align: center;
        letter-spacing: 0.04em;
    }

    @media (max-width: 1024px) {
        .bm-table-wrap {
            overflow-x: auto;
        }

        .bm-table {
            min-width: 940px;
        }
    }

    /* =====================================================
   MOBILE COMPARISON TABLE
   Frozen first column + frozen first row
   ===================================================== */

    @media (max-width: 782px) {

        /* The Home document is over 15,000px tall. These sections all begin below the hero and
           logo strip, so reserve their scroll geometry while skipping initial style, layout and
           paint work. `auto` retains the measured height after a section has been rendered. */
        main section.block,
        main .elementor-199,
        main [data-ubind-faq-component],
        main .final-cta {
            content-visibility: auto;
            contain-intrinsic-size: auto 1000px;
        }

        /* Reserve each section close to its measured responsive height. One blanket 1000px
           estimate made the mobile document grow by more than 2500px as sections were revealed,
           which moved later anchors and changed the scroll thumb.

           Re-measured at 768px and 390px after ubind-section-rhythm took over band spacing:
           every section on this page grew, because Home's `section.block` was 50px !important
           and is now the site's 76px at these widths. Measure again if that scale changes. */
        #rating { contain-intrinsic-size: auto 1780px; }
        #benchmark { contain-intrinsic-size: auto 1250px; }
        #workflows { contain-intrinsic-size: auto 1740px; }
        #proof { contain-intrinsic-size: auto 950px; }
        main .elementor-199 { contain-intrinsic-size: auto 1450px; }
        main section.testimonial { contain-intrinsic-size: auto 430px; }
        #faq { contain-intrinsic-size: auto 1090px; }
        main .final-cta { contain-intrinsic-size: auto 430px; }

        @media (max-width: 480px) {
            #rating { contain-intrinsic-size: auto 2360px; }
            #benchmark { contain-intrinsic-size: auto 1380px; }
            #workflows { contain-intrinsic-size: auto 1760px; }
            #proof { contain-intrinsic-size: auto 1540px; }
            main .elementor-199 { contain-intrinsic-size: auto 1650px; }
            main section.testimonial { contain-intrinsic-size: auto 630px; }
            #faq { contain-intrinsic-size: auto 1530px; }
            main .final-cta { contain-intrinsic-size: auto 610px; }
        }

                .ubcmp {
            /*
         * First column automatically scales between
         * 140px and 164px depending on screen width.
         */
            --ubcmp-cap-width: clamp(140px, 42vw, 164px);

            /* Width of every company column */
            --ubcmp-data-width: 142px;

            /*
         * First column + seven company columns.
         * 994px = 7 × 142px
         */
            --ubcmp-table-width:
                calc(var(--ubcmp-cap-width) + 994px);
        }

        .ubcmp-card {
            width: 100%;
            max-width: 100%;
            border-radius: 16px;
            overflow: hidden;
        }

        /*
     * This becomes the mobile horizontal and vertical
     * scrolling area.
     */
        .ubcmp-scroll {
            position: relative;
            display: block;
            width: 100%;
            max-width: 100%;

            /*
         * A defined vertical scrolling area is necessary
         * for the frozen header row to work reliably.
         */
            max-height: 75vh;
            max-height: 75svh;

            overflow: auto;
            -webkit-overflow-scrolling: touch;

            overscroll-behavior-x: contain;
            overscroll-behavior-y: auto;

            touch-action: pan-x pan-y;
            isolation: isolate;
        }

        /*
     * Fixed table layout gives every column a predictable
     * width and prevents WordPress theme styles from
     * stretching the first column.
     */
        .ubcmp table {
            width: var(--ubcmp-table-width);
            min-width: var(--ubcmp-table-width);
            table-layout: fixed;

            /*
         * Separate borders prevent visual glitches around
         * sticky table cells in Safari and Chrome.
         */
            border-collapse: separate;
            border-spacing: 0;
            margin: 0;
        }

        .ubcmp th,
        .ubcmp td {
            width: var(--ubcmp-data-width);
            min-width: var(--ubcmp-data-width);
            max-width: var(--ubcmp-data-width);

            padding: 13px 10px;
            vertical-align: top;

            /* Allow all content to wrap */
            white-space: normal;
            word-break: normal;
            overflow-wrap: anywhere;
            hyphens: auto;

            border-right: 1px solid var(--ubc-line);
        }

        .ubcmp tr> :last-child {
            border-right: 0;
        }

        .ubcmp tr {
            height: auto;
        }

        /* ---------------------------------------------
       FROZEN FIRST COLUMN
       --------------------------------------------- */

        .ubcmp .cap-col {
            position: sticky;
            left: 0;

            width: var(--ubcmp-cap-width);
            min-width: var(--ubcmp-cap-width);
            max-width: var(--ubcmp-cap-width);

            z-index: 4;
            padding: 14px 12px;

            background: var(--ubc-card);
            vertical-align: middle;

            /*
         * Adds a subtle divider/shadow so users can see
         * where the frozen column ends.
         */
            box-shadow:
                1px 0 0 var(--ubc-line),
                14px 0 18px -20px rgba(22, 39, 30, 0.45);
        }

        /* ---------------------------------------------
       FROZEN FIRST ROW
       --------------------------------------------- */

        .ubcmp thead th {
            position: sticky;
            top: 0;

            z-index: 7;
            padding-top: 15px;
            padding-bottom: 15px;

            background: var(--ubc-card);
            vertical-align: middle;

            box-shadow: 0 1px 0 var(--ubc-line);
        }

        /*
     * Preserve the green background on the ubind
     * heading while it is frozen.
     */
        .ubcmp thead .ub-col {
            background: var(--ubc-green-tint);
        }

        /*
     * The top-left Capability cell is frozen in both
     * directions, so it needs the highest z-index.
     */
        .ubcmp thead .cap-col {
            top: 0;
            left: 0;
            z-index: 10;
            background: var(--ubc-card);
        }

        /* ---------------------------------------------
       MOBILE TYPOGRAPHY AND SPACING
       --------------------------------------------- */

        .ubcmp .cap-name {
            display: block;
            font-size: 13.5px;
            line-height: 1.28;
            overflow-wrap: break-word;
        }

        .ubcmp .cap-note {
            font-size: 8px;
            line-height: 1.35;
            letter-spacing: 0.025em;
            margin-top: 6px;
            overflow-wrap: break-word;
        }

        .ubcmp .brand {
            font-size: 14px;
            line-height: 1.2;
            margin-top: 0;
            overflow-wrap: anywhere;
        }

        .ubcmp .badge {
            width: 24px;
            height: 24px;
            border-radius: 7px;
            font-size: 13px;
        }

        .ubcmp .val {
            font-size: 10px;
            line-height: 1.4;
            margin-top: 7px;
            overflow-wrap: anywhere;
        }
    }


    /* Additional adjustments for very narrow phones */
    @media (max-width: 360px) {

        .ubcmp {
            --ubcmp-cap-width: 138px;
            --ubcmp-data-width: 134px;

            /*
         * 138px first column +
         * seven 134px company columns
         */
            --ubcmp-table-width: 1076px;
        }

        .ubcmp th,
        .ubcmp td {
            padding: 12px 9px;
        }

        .ubcmp .cap-col {
            padding: 13px 10px;
        }

        .ubcmp .cap-name {
            font-size: 13px;
        }
    }

    /* ============================================================
WORKFLOWS — tabbed per-audience animated diagrams
============================================================ */
    .workflows {
        background: var(--ink-1000);
        color: white;
        overflow: hidden;
    }

    .workflows .eyebrow {
        color: var(--emerald-400);
    }

    .workflows .section-head h2 {
        color: white;
    }

    

    .workflows .section-head p {
        color: rgba(255, 255, 255, .6);
    }

    .workflow-tabs {
        display: flex;
        gap: 6px;
        padding: 6px;
        background: rgba(255, 255, 255, .04);
        border: 1px solid rgba(255, 255, 255, .08);
        border-radius: 999px;
        margin-bottom: 60px;
        flex-wrap: wrap;
        align-self: flex-start;
    }

    .wf-tab {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 18px;
        border-radius: 999px;
        font-size: 14px;
        font-weight: 500;
        color: rgba(255, 255, 255, .6);
        transition: background .25s, color .25s;
        white-space: nowrap;
        cursor: pointer;
    }

    .wf-tab:hover {
        color: white;
    }

    .wf-tab.active {
        background: var(--emerald-500);
        color: white;
        box-shadow: 0 4px 14px rgba(31, 166, 122, .4);
    }

    .wf-tab .ic {
        width: 16px;
        height: 16px;
    }

    .wf-panel {
        display: none;
    }

    .wf-panel.active {
        display: grid;
        grid-template-columns: .85fr 1.15fr;
        gap: 64px;
        align-items: center;
        animation: wf-fade-in .5s var(--ease-out);
    }

    @keyframes wf-fade-in {
        from {
            opacity: 0;
            transform: translateY(12px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @media (max-width: 1024px) {
        .wf-panel.active {
            grid-template-columns: 1fr;
            gap: 40px;
        }
    }

    .wf-text h3 {
        font-family: var(--font-display);
        font-size: clamp(28px, 3.6vw, 44px);
        font-weight: 400;
        line-height: 1.05;
        letter-spacing: -0.025em;
        color: white;
        margin-bottom: 20px;
    }

    

    .wf-text .pain {
        font-family: var(--mono);
        font-size: 12px;
        color: var(--coral);
        letter-spacing: 0.1em;
        text-transform: uppercase;
        margin-bottom: 16px;
    }

    .wf-text>p {
        color: rgba(255, 255, 255, .7);
        font-size: 17px;
        line-height: 1.6;
        margin-bottom: 28px;
    }

    .wf-features {
        list-style: none;
        margin-bottom: 32px;
    }

    .wf-features li {
        display: flex;
        gap: 14px;
        padding: 12px 0;
        border-bottom: 1px solid rgba(255, 255, 255, .06);
        color: rgba(255, 255, 255, .85);
        font-size: 15px;
    }

    .wf-features li:last-child {
        border-bottom: none;
    }

    .wf-features .check {
        flex-shrink: 0;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: rgba(31, 166, 122, .15);
        border: 1px solid rgba(31, 166, 122, .4);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--emerald-300);
    }

    .wf-result {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        padding: 12px 18px;
        background: rgba(31, 166, 122, .1);
        border: 1px solid rgba(31, 166, 122, .3);
        border-radius: 999px;
        font-family: var(--mono);
        font-size: 13px;
        color: var(--emerald-300);
    }

    .wf-result .arrow {
        display: inline-flex;
        padding: 4px;
        background: var(--emerald-500);
        border-radius: 50%;
        color: white;
    }

    .wf-canvas {
        position: relative;
        background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .01));
        border: 1px solid rgba(255, 255, 255, .08);
        border-radius: var(--r-xl);
        aspect-ratio: 1.15 / 1;
        overflow: hidden;
        box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .4);
    }

    .wf-canvas::before {
        content: '';
        position: absolute;
        inset: 0;
        background:
            radial-gradient(50% 50% at 50% 50%, rgba(31, 166, 122, .18) 0%, transparent 70%),
            repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 40px),
            repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 40px);
        pointer-events: none;
    }

    .wf-canvas svg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .wf-node-rect {
        fill: var(--ink-900);
        stroke: rgba(255, 255, 255, .12);
        stroke-width: 1;
    }

    .wf-node-rect.brand {
        fill: var(--emerald-500);
        stroke: var(--emerald-400);
    }

    .wf-node-rect.dim {
        fill: rgba(255, 255, 255, .04);
        stroke: rgba(255, 255, 255, .1);
    }

    .wf-node-text {
        fill: white;
        font-family: var(--body);
        font-size: 8px;
        font-weight: 500;
    }

    .wf-node-meta {
        fill: rgba(255, 255, 255, .55);
        font-family: var(--mono);
        font-size: 9px;
        letter-spacing: 0.06em;
    }

    .wf-line {
        fill: none;
        stroke: var(--emerald-400);
        stroke-width: 1.5;
        stroke-dasharray: 5 5;
        animation: wf-flow 2.5s linear infinite;
    }

    .wf-line.dim {
        stroke: rgba(255, 255, 255, .15);
        animation: none;
    }

    @keyframes wf-flow {
        to {
            stroke-dashoffset: -100;
        }
    }

    .wf-packet {
        fill: var(--emerald-400);
        filter: drop-shadow(0 0 8px var(--emerald-400));
    }
    
    /* ============================================================
Workflows responsive mobile view
============================================================ */
    
    .workflow-tabs {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;

    width: fit-content;
    max-width: 100%;
    padding: 6px;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: #0d100f;
    box-sizing: border-box;
}

.wf-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-width: 0;
    min-height: 42px;
    padding: 10px 16px;

    color: #929292;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;

    border-radius: 999px;
    cursor: pointer;
    box-sizing: border-box;
    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.wf-tab .ic {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
}

.wf-tab.active {
    color: #fff;
    background: #19b98d;
}

/* Mobile */
@media (max-width: 640px) {
    .workflow-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;

        width: 100%;
        padding: 8px;
        border-radius: 24px;
    }

    .wf-tab {
        width: 100%;
        min-height: 48px;
        padding: 10px 8px;
        border-radius: 16px;

        /* Scales down slightly on narrow phones */
        font-size: clamp(13px, 3.8vw, 15px);
    }

    .wf-tab .ic {
        width: 17px;
        height: 17px;
        flex-basis: 17px;
    }
}

    /* ============================================================
PROOF — stats cards + awards
============================================================ */
    .proof {
        background: linear-gradient(180deg, var(--paper) 0%, var(--emerald-100) 100%);
    }

    .proof-grid {
        display: grid;
        grid-template-columns: 1fr 1.4fr;
        gap: 60px;
        align-items: center;
    }

    @media (max-width: 900px) {
        .proof-grid {
            grid-template-columns: 1fr;
        }
    }

    .proof h2 {
        font-size: clamp(34px, 5vw, 60px);
        margin-bottom: 24px;
    }

    .proof p {
        color: var(--ink-500);
        font-size: 17px;
        max-width: 480px;
    }

    .stats-cards {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

    .stat-card {
        background: white;
        padding: 32px 28px;
        border-radius: var(--r-lg);
        border: 1px solid var(--emerald-200);
        box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 8px 28px -8px rgba(6, 26, 20, .18);
        position: relative;
        overflow: hidden;
        transition: transform .3s;
    }

    .stat-card:hover {
        transform: translateY(-4px);
    }

    .stat-card .big {
        font-family: var(--font-display);
        font-size: clamp(40px, 9vw, 64px);
        font-weight: 400;
        color: var(--ink-1000);
        letter-spacing: -0.04em;
        line-height: 1;
        margin-bottom: 12px;
    }

    .stat-card .big .accent {
        color: var(--emerald-500);
    }

    

    .stat-card .corner {
        position: absolute;
        top: 18px;
        right: 18px;
        font-family: var(--mono);
        font-size: 11px;
        color: var(--emerald-600);
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }

    .awards-row {
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
        margin-top: 36px;
    }

    .award-pill {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: white;
        padding: 10px 18px;
        border-radius: 999px;
        border: 1px solid var(--ink-100);
        font-size: 13px;
        color: var(--ink-700);
        font-weight: 500;
    }

    .award-pill .icn {
        width: 18px;
        height: 18px;
        color: var(--amber);
    }

  /* ============================================================
PROOF mobile responsive code — stats cards + awards
============================================================ */
    .stats-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    width: 100%;
}

.stat-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    min-width: 0;
    min-height: 0;
    padding: 28px;

    background: #fff;
    border: 1px solid #79e3bd;
    border-radius: 24px;
    box-sizing: border-box;
    overflow: visible;
}

.stat-card .corner {
    position: static;
    width: 100%;
    margin: 0 0 10px;

    color: #149f79;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    word-break: normal;
    overflow-wrap: normal;
}

.stat-card .big {
    margin: 0 0 18px;

    color: #111;
    font-size: clamp(42px, 4vw, 68px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.05em;
    white-space: nowrap;
}

.stat-card .accent {
    color: #10aa80;
}

.stat-card .desc {
    margin: 0;

    color: #68716f;
    font-size: 16px;
    line-height: 1.55;

    word-break: normal;
    overflow-wrap: break-word;
}

/* Tablet */
@media (max-width: 1024px) {
    .stats-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stat-card {
        min-height: 0;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .stats-cards {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .stat-card {
        width: 100%;
        min-height: auto;
        padding: 24px 22px;
        border-radius: 20px;
    }

    .stat-card .corner {
        margin-bottom: 8px;
        font-size: 11px;
    }

    .stat-card .big {
        margin-bottom: 16px;
        font-size: clamp(44px, 14vw, 60px);
    }

    .stat-card .desc {
        max-width: 38ch;
        font-size: 16px;
        line-height: 1.5;
    }
}

/* Extra-small mobile */
@media (max-width: 360px) {
    .stat-card {
        padding: 22px 18px;
    }

    .stat-card .big {
        font-size: 42px;
    }
}


    /* ============================================================
LEAD FORM — multi-step qualifying form
============================================================ */
    .lead {
        background: var(--ink-1000);
        color: white;
        position: relative;
        overflow: hidden;
    }

    

    

    



    .lead-info h2 {
        font-size: clamp(36px, 4.5vw, 56px);
        color: white;
        margin-bottom: 24px;
    }

    

    

    

    

    

    

    

    

    



    

    

    

    

    

    

    

    



    



    

    

    

    

    

    

    

    

    

    

    

    

    

    .field-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }



    

    

    

    .btn-step:disabled {
        background: rgba(255, 255, 255, .08);
        cursor: not-allowed;
        transform: none;
    }

    

    

    

    



    

    

    /* ============================================================
FINAL CTA
============================================================ */
    .final-cta {
        background: var(--ink-1000);
        color: white;
        text-align: center;
        position: relative;
        overflow: hidden;
    }

    

    .final-cta h2 {
        font-size: clamp(42px, 6vw, 88px);
        margin-bottom: 28px;
        color: white;
    }

    

    

    




/* Moved out of this widget's inline <style> so it is served as a cacheable file. */
/* ---- page scaffold ----
     every class and id in this file is namespaced under the hs- prefix so nothing
     collides with (or gets picked up by) the host site's own CSS/JS */
        :root {
	/* tokens now in the uBind Design Tokens plugin */
}

        * {
            box-sizing: border-box
        }

        html,
        body {
            margin: 0
        }

        body {
            background: #050d0b;
            color: var(--ink);
            font-family: var(--sans);
            -webkit-font-smoothing: antialiased
        }

        a {
            color: inherit
        }

        .hs-hero img {
            max-width: 100%;
            height: auto;
            display: block
        }

        .hs-container {
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 20px
        }

        .hs-nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 10;
            background: rgba(5, 13, 11, .72);
            backdrop-filter: blur(12px);
            border-bottom: 1px solid rgba(105, 224, 176, .1)
        }

        .hs-nav .hs-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 64px
        }

        .hs-wordmark {
            font-weight: 600;
            font-size: 19px;
            letter-spacing: -.01em;
            text-decoration: none
        }

        .hs-wordmark .hs-mark {
            background: linear-gradient(135deg, var(--emerald-300), var(--emerald-500));
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent
        }

        .hs-hero {
            position: relative;
            overflow: hidden;
            background:
                radial-gradient(1100px 700px at 72% 38%, rgba(52, 201, 143, .12), transparent 62%),
                radial-gradient(700px 500px at 8% -10%, rgba(105, 224, 176, .07), transparent 60%)
        }

        .hs-grid {
            display: grid;
            grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
            gap: 64px;
            align-items: center
        }

        .hs-eyebrow {
            font: 500 11px/1 var(--mono);
            letter-spacing: .18em;
            text-transform: uppercase;
            color: var(--emerald-300);
            margin: 0
        }

        .hs-title {
            margin: 18px 0 0;
            font-size: clamp(40px, 5.4vw, 70px);
            font-weight: 600;
            line-height: 1.05;
            letter-spacing: -.025em
        }

        /* the rotating words are authored directly as .hs-word (first one .hs-active), so the
     pre-boot markup already matches the steady state - no flash, and no bare .word class
     anywhere for the site's own initWordSwap to latch onto */
        .hs-sub {
            margin: 24px 0 34px;
            max-width: 44ch;
            font-size: 17px;
            line-height: 1.65;
            color: var(--muted)
        }

        .hs-cta {
            display: flex;
            gap: 14px;
            flex-wrap: wrap
        }

        .hs-btn {
            display: inline-flex;
            align-items: center;
            padding: 13px 24px;
            border-radius: 12px;
            font-weight: 600;
            font-size: 15px;
            text-decoration: none;
            transition: transform .2s var(--ease-out), background .2s
        }

        .hs-btn:focus-visible {
            outline: 2px solid var(--emerald-300);
            outline-offset: 3px
        }

        .hs-btn-primary {
            background: linear-gradient(135deg, var(--emerald-300), var(--emerald-500));
            color: #04120c;
            box-shadow: 0 12px 32px rgba(52, 201, 143, .22)
        }

        .hs-btn-primary:hover {
            transform: translateY(-1px)
        }

        .hs-btn-ghost {
            border: 1px solid rgba(105, 224, 176, .35);
            color: var(--emerald-300)
        }

        .hs-btn-ghost:hover {
            background: rgba(105, 224, 176, .08);
            color: #ffffff;
        }

        @media (max-width:1100px) {

            .hs-grid {
                grid-template-columns: 1fr;
                gap: 48px
            }

            /* stacked grid items get centered instead of stretching - same behaviour as the
       host site's <=1100px rules; the width:100% on .hs-stage below counteracts it */
            .hs-grid>* {
                margin: 0 auto;
                max-width: 720px
            }

            .hs-copy {
                text-align: center
            }

            .hs-sub {
                margin-left: auto;
                margin-right: auto
            }

            .hs-cta {
                justify-content: center
            }
        }

        @media (prefers-reduced-motion: reduce) {.hs-wordswap .hs-word,
.hs-btn{
                transition: none !important
            }
        }

        /* word-swap: give the rotating word its own line. When the span was inline,
     swapping to a longer/shorter word re-wrapped the headline mid-crossfade, so
     the outgoing + incoming words rendered in different spots (read as doubled
     text). As a block the span's width changes can't move anything, and it adds
     no min-width that could starve the stage's grid column. */
        .hs-wordswap {
            position: relative;
            display: block;
            min-width: 0
        }

        /* our own rotating-word spans (class hs-word so the site's initWordSwap, which
     queries '.word', finds none and bails - we drive these off the shot clock).
     Mirrors the site's .word styling so the look is unchanged. */
        .hs-wordswap .hs-word {
            display: inline-block;
            font-family: var(--font-display);
            font-style: italic;
            font-weight: 300;
            background: linear-gradient(135deg, var(--emerald-300), var(--emerald-500));
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            position: absolute;
            left: 0;
            top: 0;
            white-space: nowrap;
            /* Gradient text is clipped to this element's background box, so the box must be
               larger than the glyph ink: italic letterforms lean past the advance width, and
               the 1.05 line-height leaves no room for descenders. The negative margins cancel
               the growth so layout is unchanged. */
            padding: 0 .12em .18em 0;
            margin: 0 -.12em -.18em 0;
            opacity: 0;
            transform: translateY(20px) rotateX(-30deg);
            transition: opacity .55s var(--ease-out), transform .55s var(--ease-out)
        }

        .hs-wordswap .hs-word.hs-active {
            opacity: 1;
            transform: translateY(0) rotateX(0);
            position: relative
        }

        .hs-wordswap .hs-word.hs-exiting {
            opacity: 0;
            transform: translateY(0) rotateX(0);
            position: absolute
        }

        @media (max-width: 600px) {

            .hs-grid {
                gap: 36px
            }
        }

.ubcmp {
                    --ubc-card: #ffffff;
                    --ubc-ink: #16271e;
                    --ubc-sub: #586259;
                    --ubc-muted: #9aa39a;
                    --ubc-line: #ecefe9;
                    --ubc-green: #1f9d57;
                    --ubc-green-fill: #2bab66;
                    --ubc-green-tint: #eef8f1;
                    --ubc-green-soft: #e4f3ea;
                    --ubc-amber-bg: #fcefd6;
                    --ubc-amber: #d9912b;
                    --ubc-grey-bg: #eef0ec;
                    --ubc-grey: #a9b0a6;
                    --ubc-mono: "SFMono-Regular", ui-monospace, "Roboto Mono", "Menlo", monospace;
                    color: var(--ubc-ink);
                    -webkit-font-smoothing: antialiased;
                }

                .ubcmp * {
                    box-sizing: border-box;
                }

                .ubcmp-card {
                    background: var(--ubc-card);
                    border-radius: 22px;
                    box-shadow: 0 1px 2px rgba(22, 39, 30, .04), 0 24px 48px -24px rgba(22, 39, 30, .12);
                    overflow: hidden;
                    border: 1px solid var(--ubc-line);
                }

                .ubcmp-scroll {
                    overflow-x: auto;
                }

                .ubcmp table {
                    border-collapse: collapse;
                    width: 100%;
                    min-width: 1180px;
                }

                .ubcmp th,
                .ubcmp td {
                    text-align: left;
                    vertical-align: top;
                    padding: 20px 16px;
                    border-bottom: 1px solid var(--ubc-line);
                }

                .ubcmp tr:last-child td {
                    border-bottom: none;
                }

                .ubcmp .cap-col {
                    position: sticky;
                    left: 0;
                    z-index: 2;
                    background: var(--ubc-card);
                    min-width: 220px;
                }

                .ubcmp thead .cap-col {
                    background: var(--ubc-card);
                }

                .ubcmp thead th {
                    border-bottom: 1px solid var(--ubc-line);
                    padding-top: 26px;
                    padding-bottom: 22px;
                }

                .ubcmp .eyebrow {
                    font-family: var(--ubc-mono);
                    font-size: 10px;
                    letter-spacing: .14em;
                    color: var(--ubc-muted);
                    text-transform: uppercase;
                    font-weight: 500;
                }

                .ubcmp .brand {
                    font-size: 18px;
                    font-weight: 600;
                    letter-spacing: -0.01em;
                    margin-top: 4px;
                }

                .ubcmp .brand.ubind {
                    color: var(--ubc-green);
                    font-weight: 700;
                }

                .ubcmp .ub-col {
                    background: var(--ubc-green-tint);
                }

                .ubcmp thead .ub-col {
                    background: var(--ubc-green-tint);
                }

                .ubcmp .cap-name {
                    font-size: 15px;
                    font-weight: 600;
                    line-height: 1.3;
                }

                .ubcmp .cap-note {
                    display: block;
                    font-family: var(--ubc-mono);
                    font-size: 10px;
                    letter-spacing: .04em;
                    color: var(--ubc-muted);
                    text-transform: uppercase;
                    margin-top: 6px;
                    line-height: 1.45;
                }

                .ubcmp .badge {
                    width: 28px;
                    height: 28px;
                    border-radius: 9px;
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 15px;
                    font-weight: 700;
                    line-height: 1;
                }

                .ubcmp .badge.strong {
                    background: var(--ubc-green-fill);
                    color: #fff;
                }

                .ubcmp .badge.ok {
                    background: var(--ubc-green-soft);
                    color: var(--ubc-green);
                }

                .ubcmp .badge.partial {
                    background: var(--ubc-amber-bg);
                    color: var(--ubc-amber);
                }

                .ubcmp .badge.weak {
                    background: var(--ubc-grey-bg);
                    color: var(--ubc-grey);
                }

                .ubcmp .val {
                    display: block;
                    font-family: var(--ubc-mono);
                    font-size: 11.5px;
                    letter-spacing: .01em;
                    line-height: 1.5;
                    margin-top: 10px;
                    color: var(--ubc-sub);
                }

                .ubcmp .ub-col .val {
                    color: var(--ubc-ink);
                    font-weight: 500;
                }
        /* UBW-222: opacity hides the eight inactive words from sight only - they stay in the
           accessibility tree, so the H1 announces as one run-on phrase. visibility removes them
           properly and keeps their box, and the delayed 0s step holds a word visible for exactly
           as long as its fade-out paints, so nothing on screen changes. */
        .hs-wordswap .hs-word {
            visibility: hidden;
            transition: opacity .55s var(--ease-out), transform .55s var(--ease-out), visibility 0s linear .55s
        }

        .hs-wordswap .hs-word.hs-active {
            visibility: visible;
            transition: opacity .55s var(--ease-out), transform .55s var(--ease-out), visibility 0s linear 0s
        }

        /* UBW-222: punctuation that exists only for readers of textContent, which honours no CSS
           at all - site search, SEO crawlers, the UAT text dump. Out of flow and clipped so it can
           never paint or move a box, and hidden from the accessibility tree and innerText so the
           announced heading stays the one word actually on screen. */
        .hs-wordswap .hs-word-sep {
            position: absolute !important;
            width: 1px !important;
            height: 1px !important;
            padding: 0 !important;
            margin: -1px !important;
            border: 0 !important;
            overflow: hidden !important;
            clip: rect(0 0 0 0);
            clip-path: inset(50%);
            white-space: nowrap !important;
            visibility: hidden !important
        }

        /* Reduced motion needs nothing added here: this page's existing
           @media (prefers-reduced-motion: reduce) block already forces
           transition: none !important on .hs-wordswap .hs-word, which beats the declarations
           above regardless of order and takes the visibility step down with it. The swap becomes
           instant, which is what reduced motion asks for, and the rotation script pins a single
           word anyway - so the announced heading is stable for those visitors. */