@layer properties {
    @supports (((-webkit-hyphens: none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {
        *, :before, :after, ::backdrop {
            --tw-rotate-x: initial;
            --tw-rotate-y: initial;
            --tw-rotate-z: initial;
            --tw-skew-x: initial;
            --tw-skew-y: initial;
            --tw-blur: initial;
            --tw-brightness: initial;
            --tw-contrast: initial;
            --tw-grayscale: initial;
            --tw-hue-rotate: initial;
            --tw-invert: initial;
            --tw-opacity: initial;
            --tw-saturate: initial;
            --tw-sepia: initial;
            --tw-drop-shadow: initial;
            --tw-drop-shadow-color: initial;
            --tw-drop-shadow-alpha: 100%;
            --tw-drop-shadow-size: initial;
            --tw-ease: initial
        }
    }
}

@layer theme {
    :root, :host {
        --font-sans: "DM Sans",Arial,sans-serif;
        --font-mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
        --ease-in: cubic-bezier(.4,0,1,1);
        --ease-out: cubic-bezier(0,0,.2,1);
        --ease-in-out: cubic-bezier(.4,0,.2,1);
        --default-transition-duration: .15s;
        --default-transition-timing-function: cubic-bezier(.4,0,.2,1);
        --default-font-family: var(--font-sans);
        --default-mono-font-family: var(--font-mono)
    }
}

@layer base {
    *, :after, :before, ::backdrop {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding: 0
    }

    ::file-selector-button {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding: 0
    }

    html, : host {
        -webkit-text-size-adjust: 100%;
        tab-size: 4;
        line-height: 1.5;
        font-family: var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");
        font-feature-settings: var(--default-font-feature-settings,normal);
        font-variation-settings: var(--default-font-variation-settings,normal);
        -webkit-tap-highlight-color: transparent
    }

    hr {
        height: 0;
        color: inherit;
        border-top-width: 1px
    }

    abbr: where([title]) {
        -webkit-text-decoration: underline dotted;
        text-decoration: underline dotted
    }

    h1, h2, h3, h4, h5, h6 {
        font-size: inherit;
        font-weight: inherit
    }

    a {
        color: inherit;
        -webkit-text-decoration: inherit;
        text-decoration: inherit
    }

    b, strong {
        font-weight: bolder
    }

    code, kbd, samp, pre {
        font-family: var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);
        font-feature-settings: var(--default-mono-font-feature-settings,normal);
        font-variation-settings: var(--default-mono-font-variation-settings,normal);
        font-size: 1em
    }

    small {
        font-size: 80%
    }

    sub, sup {
        vertical-align: baseline;
        font-size: 75%;
        line-height: 0;
        position: relative
    }

    sub {
        bottom: -.25em
    }

    sup {
        top: -.5em
    }

    table {
        text-indent: 0;
        border-color: inherit;
        border-collapse: collapse
    }

    :-moz-focusring {
        outline: auto
    }

    progress {
        vertical-align: baseline
    }

    summary {
        display: list-item
    }

    ol, ul, menu {
        list-style: none
    }

    img, svg, video, canvas, audio, iframe, embed, object {
        vertical-align: middle;
        display: block
    }

    img, video {
        max-width: 100%;
        height: auto
    }

    button, input, select, optgroup, textarea {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: transparent;
        border-radius: 0
    }

    ::file-selector-button {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: transparent;
        border-radius: 0
    }

    :where(select: is([multiple],[size])) optgroup {
        font-weight: bolder
    }

        :where(select: is([multiple],[size])) optgroup option {
            padding-inline-start: 20px
        }

    ::file-selector-button {
        margin-inline-end: 4px
    }

    ::placeholder {
        opacity: 1
    }

    @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size:1px) {
        ::placeholder {
            color: currentColor
        }

        @supports (color: color-mix(in lab,red,red)) {
            ::placeholder {
                color: color-mix(in oklab,currentcolor 50%,transparent)
            }
        }
    }

    textarea {
        resize: vertical
    }

    ::-webkit-search-decoration {
        -webkit-appearance: none
    }

    ::-webkit-date-and-time-value {
        min-height: 1lh;
        text-align: inherit
    }

    ::-webkit-datetime-edit {
        display: inline-flex
    }

    ::-webkit-datetime-edit-fields-wrapper {
        padding: 0
    }

    ::-webkit-datetime-edit {
        padding-block: 0
    }

    ::-webkit-datetime-edit-year-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-month-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-day-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-hour-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-minute-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-second-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-millisecond-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-meridiem-field {
        padding-block: 0
    }

    ::-webkit-calendar-picker-indicator {
        line-height: 1
    }

    :-moz-ui-invalid {
        box-shadow: none
    }

    button, input: where([type=button],[type=reset],[type=submit]) {
        appearance: button
    }

    ::file-selector-button {
        appearance: button
    }

    ::-webkit-inner-spin-button {
        height: auto
    }

    ::-webkit-outer-spin-button {
        height: auto
    }

    [hidden]: where(:not([hidden=until-found])) {
        display: none !important
    }
}

@layer components;

@layer utilities {
    .visible {
        visibility: visible
    }

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

    .absolute {
        position: absolute
    }

    .fixed {
        position: fixed
    }

    .isolate {
        isolation: isolate
    }

    .container {
        width: 100%
    }

    @media(min-width: 40rem) {
        .container {
            max-width: 40rem
        }
    }

    @media(min-width: 48rem) {
        .container {
            max-width: 48rem
        }
    }

    @media(min-width: 64rem) {
        .container {
            max-width: 64rem
        }
    }

    @media(min-width: 80rem) {
        .container {
            max-width: 80rem
        }
    }

    @media(min-width: 96rem) {
        .container {
            max-width: 96rem
        }
    }

    .block {
        display: block
    }

    .contents {
        display: contents
    }

    .flex {
        display: flex
    }

    .hidden {
        display: none
    }

    .inline {
        display: inline
    }

    .table {
        display: table
    }

    .transform {
        transform: var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)
    }

    .resize {
        resize: both
    }

    .blur {
        --tw-blur: blur(8px);
        filter: var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)
    }

    .drop-shadow {
        --tw-drop-shadow-size: drop-shadow(0 1px 2px var(--tw-drop-shadow-color,color-mix(in srgb, var(--t-000000) 10.2%, transparent)))drop-shadow(0 1px 1px var(--tw-drop-shadow-color,color-mix(in srgb, var(--t-000000) 5.9%, transparent)));
        --tw-drop-shadow: drop-shadow(0 1px 2px color-mix(in srgb, var(--t-000000) 10.2%, transparent))drop-shadow(0 1px 1px color-mix(in srgb, var(--t-000000) 5.9%, transparent));
        filter: var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)
    }

    .filter {
        filter: var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)
    }

    .transition {
        transition-property: color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;
        transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
        transition-duration: var(--tw-duration,var(--default-transition-duration))
    }

    .ease-in {
        --tw-ease: var(--ease-in);
        transition-timing-function: var(--ease-in)
    }

    .ease-in-out {
        --tw-ease: var(--ease-in-out);
        transition-timing-function: var(--ease-in-out)
    }

    .ease-out {
        --tw-ease: var(--ease-out);
        transition-timing-function: var(--ease-out)
    }
}

.demo-app {
    --ui-font: 10px;
    font-family: DM Sans,Arial,sans-serif;
    font-size: var(--ui-font);
    color: var(--t-4d5e51);
    background: var(--t-ffffff);
    border: 1px solid var(--t-dce4d8);
    border-radius: 7px;
    overflow: hidden;
    box-shadow: 0 7px 24px color-mix(in srgb, var(--t-264323) 3.5%, transparent)
}

.demo-topbar {
    border-bottom: 1px solid var(--t-e9eee4);
    align-items: center;
    gap: 13px;
    min-height: 44px;
    padding: 12px 16px;
    display: flex
}

.demo-wordmark {
    color: var(--t-2c6241);
    font-family: var(--font-heading);
    letter-spacing: -.6px;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 800;
    display: flex
}

    .demo-wordmark > svg {
        width: 13px;
        height: 15px
    }

.demo-topbar-divider {
    background: var(--t-e2e8db);
    width: 1px;
    height: 16px;
    margin-inline: 2px
}

.demo-tenant-select {
    color: var(--t-7f8a76);
    align-items: center;
    gap: 5px;
    display: flex
}

    .demo-tenant-select select {
        color: var(--t-6c7b63);
        outline-offset: 2px;
        background: 0 0;
        max-width: 150px;
        padding-right: 4px;
        font-size: 8px
    }

.demo-topbar-right {
    align-items: center;
    gap: 12px;
    margin-left: auto;
    display: flex
}

.demo-avatar {
    color: var(--t-72915e);
    background: var(--t-e9eedf);
    border: 1px solid var(--t-dce5cf);
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    width: 23px;
    height: 23px;
    font-size: 7px;
    display: inline-flex
}

.mini-icon-button {
    color: var(--t-84917b);
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    width: 23px;
    height: 23px;
    transition: color .2s,background .2s;
    display: inline-flex
}

    .mini-icon-button:hover {
        color: var(--t-356544);
        background: var(--t-eaf0e4)
    }

.demo-help {
    color: var(--t-768b65);
    background: var(--t-eff5e8);
    border-bottom: 1px solid var(--t-e5eddd);
    padding: 11px 18px;
    font-size: 10px;
    line-height: 1.7
}

.demo-body {
    align-items: stretch;
    min-height: 338px;
    display: flex
}

.demo-rail {
    background: var(--t-fcfdf9);
    border-right: 1px solid var(--t-e8ece3);
    flex-direction: column;
    flex-shrink: 0;
    align-items: center;
    gap: 9px;
    width: 44px;
    padding: 13px 0;
    display: flex
}

    .demo-rail > button {
        color: var(--t-98a68d);
        border-radius: 5px;
        justify-content: center;
        align-items: center;
        width: 29px;
        height: 29px;
        transition: background .2s,color .2s;
        display: flex
    }

        .demo-rail > button:hover {
            color: var(--t-4e7d46);
            background: var(--t-eaf1e2)
        }

        .demo-rail > button.active {
            color: var(--t-f5faed);
            background: var(--t-3c6f4c)
        }

.demo-rail-home {
    color: var(--t-7c9070);
    border-bottom: 1px solid var(--t-e4eadc);
    justify-content: center;
    width: 28px;
    padding-bottom: 8px;
    display: flex
}

.demo-rail-bottom {
    color: var(--t-a1ad95);
    margin-top: auto;
    padding-top: 13px
}

.demo-main {
    flex: 1;
    min-width: 0;
    padding: 16px 17px 0;
    overflow-x: hidden
}

.demo-bottom {
    color: var(--t-9aa590);
    background: var(--t-fcfdf9);
    border-top: 1px solid var(--t-e7ece1);
    justify-content: space-between;
    align-items: center;
    padding: 8px 13px;
    font-size: 7px;
    display: flex
}

    .demo-bottom > span:first-child {
        align-items: center;
        gap: 5px;
        display: flex
    }

.mini-breadcrumb {
    color: var(--t-9da793);
    align-items: center;
    gap: 6px;
    margin-bottom: 11px;
    font-size: 7px;
    display: flex
}

.mini-heading {
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    display: flex
}

    .mini-heading h3 {
        letter-spacing: -.35px;
        color: var(--t-344e37);
        align-items: center;
        gap: 6px;
        font-family: DM Sans,Arial,sans-serif;
        font-size: 16px;
        font-weight: 600;
        line-height: 1.4;
        display: flex
    }

    .mini-heading p {
        color: var(--t-98a28e);
        margin-top: 4px;
        font-size: 8px
    }

.mini-count {
    color: var(--t-7c9370);
    background: var(--t-f0f4e9);
    border: 1px solid var(--t-e5ecdc);
    border-radius: 4px;
    padding: 1px 4px;
    font-size: 8px;
    font-weight: 450
}

.mini-button {
    color: var(--t-7a8d6d);
    white-space: nowrap;
    background: var(--t-ffffff);
    border: 1px solid var(--t-dce4d5);
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 7px 9px;
    font-size: 8px;
    font-weight: 500;
    transition: background .2s;
    display: inline-flex
}

    .mini-button:hover:not(:disabled) {
        background: var(--t-eff5e8)
    }

    .mini-button.primary {
        color: var(--t-f9fcf4);
        background: var(--t-326947);
        border-color: var(--t-326947)
    }

        .mini-button.primary:hover:not(:disabled) {
            background: var(--t-245737)
        }

.mini-toolbar {
    justify-content: space-between;
    align-items: center;
    gap: 9px;
    padding-bottom: 12px;
    display: flex
}

.mini-search {
    color: var(--t-a3ae99);
    border: 1px solid var(--t-e2e8dc);
    border-radius: 4px;
    flex: 1;
    align-items: center;
    gap: 5px;
    min-width: 0;
    max-width: 190px;
    padding: 6px 7px;
    display: flex
}

    .mini-search input {
        color: var(--t-687e5e);
        background: 0 0;
        outline: 0;
        width: 100%;
        min-width: 0;
        font-size: 8px
    }

    .mini-search:focus-within {
        border-color: var(--t-88a678)
    }

.mini-filter {
    color: var(--t-8c9e7e);
    border: 1px solid var(--t-e1e7d9);
    border-radius: 4px;
    align-items: center;
    gap: 4px;
    padding: 6px;
    font-size: 8px;
    display: flex
}

    .mini-filter select {
        background: 0 0;
        max-width: 105px;
        font-size: 8px
    }

.asset-layout {
    border-top: 1px solid var(--t-e7ece0);
    grid-template-columns: 132px minmax(0,1fr);
    margin-inline: -17px;
    display: grid
}

.asset-tree {
    background: var(--t-fdfefb);
    border-right: 1px solid var(--t-e8ece2);
    padding: 15px 7px 15px 9px
}

.tree-label {
    letter-spacing: .8px;
    color: var(--t-a3ae98);
    padding: 0 5px 11px;
    font-size: 6px;
    display: block
}

.tree-row {
    text-align: left;
    white-space: nowrap;
    color: var(--t-8b9b7e);
    border-radius: 3px;
    align-items: center;
    gap: 5px;
    width: 100%;
    padding: 8px 5px;
    font-size: 7px;
    display: flex
}

    .tree-row > span {
        text-overflow: ellipsis;
        overflow: hidden
    }

    .tree-row.selected {
        color: var(--t-5e8251);
        background: var(--t-eaf2e3);
        font-weight: 550
    }

    .tree-row:hover {
        background: var(--t-f0f5eb)
    }

.tree-parent {
    padding-top: 16px
}

.tree-branches {
    border-left: 1px solid var(--t-e4ecd9);
    margin-left: 12px;
    padding-left: 6px
}

    .tree-branches .tree-row {
        padding-block: 8px;
        font-size: 6px
    }

.tree-component {
    color: var(--t-a4b097);
    align-items: center;
    gap: 3px;
    padding: 7px 0 5px;
    font-size: 5px;
    display: flex
}

.tree-summary {
    color: var(--t-a1b190);
    border-top: 1px solid var(--t-e9eedf);
    flex-direction: column;
    gap: 5px;
    margin: 21px 5px 0;
    padding-top: 13px;
    display: flex
}

    .tree-summary strong {
        color: var(--t-849b74);
        margin-top: 2px;
        font-size: 7px;
        font-weight: 550
    }

    .tree-summary > span {
        font-size: 6px
    }

.asset-table-wrap {
    min-width: 0;
    padding: 12px 12px 0
}

.asset-table {
    border-collapse: collapse;
    text-align: left;
    width: 100%
}

    .asset-table th {
        color: var(--t-9ba78e);
        background: var(--t-f7f9f2);
        padding: 8px 6px;
        font-size: 6px;
        font-weight: 500
    }

        .asset-table th:first-child {
            border-radius: 3px 0 0 3px
        }

    .asset-table td {
        border-bottom: 1px solid var(--t-eff2e9);
        padding: 10px 5px
    }

    .asset-table tbody tr:hover {
        background: var(--t-f9fcf5)
    }

.asset-name {
    text-align: left;
    align-items: center;
    gap: 6px;
    width: 100%;
    display: flex
}

.asset-type-icon {
    color: var(--t-82a46d);
    background: var(--t-eff4e8);
    border-radius: 4px;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 25px;
    height: 28px;
    display: flex
}

    .asset-type-icon.type-mechanical {
        color: var(--t-a8a276);
        background: var(--t-f7f5e9)
    }

    .asset-type-icon.type-electrical {
        color: var(--t-8f97ac);
        background: var(--t-f0f1f6)
    }

.asset-name strong {
    color: var(--t-586c4c);
    white-space: nowrap;
    font-size: 8px;
    font-weight: 550;
    line-height: 1.5;
    display: block
}

.asset-name small {
    color: var(--t-a4ad97);
    margin-top: 3px;
    font-size: 6px;
    display: block
}

.text-dot {
    color: var(--t-c9d0bd);
    margin-inline: 3px
}

.status {
    white-space: nowrap;
    color: var(--t-7d9a66);
    background: var(--t-eff5e8);
    border-radius: 3px;
    align-items: center;
    gap: 4px;
    padding: 3px 5px;
    font-size: 6px;
    line-height: 1.5;
    display: inline-flex
}

    .status > span {
        background: currentColor;
        border-radius: 50%;
        width: 3px;
        height: 3px
    }

.status-attention, .status-open {
    color: var(--t-bc9a4f);
    background: var(--t-fbf6e8)
}

.status-maintenance, .status-in-progress {
    color: var(--t-8d8bac);
    background: var(--t-f3f0f8)
}

.health-value {
    color: var(--t-79966b);
    font-size: 8px;
    font-weight: 550;
    display: block
}

    .health-value > span {
        color: var(--t-a3b195);
        font-size: 6px
    }

.health-track {
    background: var(--t-eef3e5);
    border-radius: 2px;
    width: 29px;
    height: 3px;
    margin-top: 4px;
    display: block
}

    .health-track > span {
        border-radius: inherit;
        height: 100%;
        display: block
    }

.asset-table td:last-child {
    width: 20px;
    padding-right: 0
}

    .asset-table td:last-child > button {
        width: 17px
    }

.table-footer {
    color: var(--t-adb69f);
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    padding: 12px 2px;
    font-size: 6px;
    display: flex
}

    .table-footer > span {
        color: var(--t-9aaf85);
        align-items: center;
        gap: 3px;
        display: flex
    }

.mini-empty {
    text-align: center;
    color: var(--t-93a581);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 9px;
    min-height: 160px;
    padding: 35px 15px;
    font-size: 9px;
    display: flex
}

    .mini-empty strong {
        color: var(--t-607a4f);
        font-weight: 550
    }

    .mini-empty > span {
        font-size: 8px
    }

    .mini-empty > button {
        color: var(--t-54823e);
        text-underline-offset: 3px;
        margin-top: 7px;
        text-decoration: underline
    }

.mini-bottom-note {
    color: var(--t-9cad8b);
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 13px 0;
    font-size: 7px;
    display: flex
}

.kanban-board {
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 10px;
    display: grid
}

.kanban-column {
    background: var(--t-f6f9f1);
    border-radius: 5px;
    min-height: 211px;
    padding: 10px 8px
}

.kanban-title {
    justify-content: space-between;
    align-items: center;
    padding-bottom: 13px;
    display: flex
}

    .kanban-title > .status {
        background: 0 0;
        padding: 0;
        font-size: 8px
    }

    .kanban-title > span:last-child {
        color: var(--t-9dac8c);
        font-size: 7px
    }

.kanban-items {
    scrollbar-width: thin;
    scrollbar-color: var(--t-cfdabe) transparent;
    flex-direction: column;
    gap: 8px;
    max-height: 250px;
    display: flex;
    overflow-y: auto
}

.work-order-card {
    text-align: left;
    background: var(--t-ffffff);
    border: 1px solid var(--t-e4ebdc);
    border-radius: 4px;
    width: 100%;
    padding: 10px 8px;
    transition: border-color .2s,box-shadow .2s;
    display: block
}

    .work-order-card:hover {
        border-color: var(--t-a3bb8b);
        box-shadow: 0 3px 6px color-mix(in srgb, var(--t-445c30) 6.3%, transparent)
    }

    .work-order-card > div:first-child {
        color: var(--t-a0af8e);
        justify-content: space-between;
        align-items: center;
        gap: 4px;
        font-size: 6px;
        display: flex
    }

    .work-order-card > strong {
        color: var(--t-667b53);
        margin: 12px 0 10px;
        font-size: 9px;
        font-weight: 550;
        line-height: 1.6;
        display: block
    }

.priority {
    border-radius: 2px;
    padding: 2px 4px;
    font-size: 6px
}

.priority-high {
    color: var(--t-b18667);
    background: var(--t-fff0e6)
}

.priority-medium {
    color: var(--t-b6a36c);
    background: var(--t-faf6e9)
}

.priority-low {
    color: var(--t-94a579);
    background: var(--t-f1f5e9)
}

.order-asset {
    color: var(--t-a1ad90);
    align-items: flex-start;
    gap: 4px;
    font-size: 6px;
    line-height: 1.7;
    display: flex
}

.order-card-bottom {
    border-top: 1px solid var(--t-eef2e7);
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    padding-top: 12px;
    display: flex
}

    .order-card-bottom > span:first-child {
        color: var(--t-9eaf8b);
        align-items: center;
        gap: 4px;
        font-size: 6px;
        display: flex
    }

.tiny-avatar {
    color: var(--t-88a270);
    background: var(--t-edf3e3);
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    width: 17px;
    height: 17px;
    font-size: 6px;
    display: flex
}

.kanban-empty {
    color: var(--t-a4b095);
    text-align: center;
    border: 1px dashed var(--t-e0e8d5);
    border-radius: 4px;
    padding: 22px 10px;
    font-size: 8px
}

.live-label {
    letter-spacing: .4px;
    color: var(--t-85a467);
    background: var(--t-f0f7e9);
    border-radius: 3px;
    align-items: center;
    gap: 4px;
    padding: 3px 5px;
    font-size: 5px;
    display: inline-flex
}

    .live-label > span {
        background: var(--t-8baa70);
        border-radius: 50%;
        width: 4px;
        height: 4px;
        animation: 2s infinite live-pulse;
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--t-91b175) 8.2%, transparent)
    }

    .live-label.is-paused {
        color: var(--t-a1aa91);
        background: var(--t-f2f4ec)
    }

        .live-label.is-paused > span {
            background: var(--t-aeb69f);
            animation: none
        }

@keyframes live-pulse {
    50% {
        opacity: .55;
        box-shadow: 0 0 0 4px transparent
    }
}

.operations-metrics {
    border-bottom: 1px solid var(--t-e8eddf);
    grid-template-columns: repeat(3,1fr);
    gap: 10px;
    padding: 0 0 15px;
    display: grid
}

    .operations-metrics > div {
        border-left: 1px solid var(--t-e5ebdc);
        padding-left: 11px
    }

        .operations-metrics > div:first-child {
            border: 0;
            padding-left: 0
        }

        .operations-metrics > div > span {
            color: var(--t-9aa98b);
            font-size: 7px
        }

    .operations-metrics strong {
        color: var(--t-5c7c4c);
        letter-spacing: -.6px;
        align-items: baseline;
        gap: 6px;
        margin-top: 3px;
        font-size: 23px;
        font-weight: 500;
        display: flex
    }

        .operations-metrics strong > span {
            letter-spacing: 0;
            color: var(--t-a2b090);
            font-size: 6px;
            font-weight: 400
        }

    .operations-metrics .amber-text {
        color: var(--t-bea25c)
    }

.operations-grid {
    grid-template-columns: 1.25fr 1fr;
    gap: 17px;
    padding-top: 13px;
    display: grid
}

.mini-subheading {
    color: var(--t-a6b297);
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    font-size: 6px;
    display: flex
}

    .mini-subheading strong {
        color: var(--t-7c936a);
        font-size: 8px;
        font-weight: 550
    }

.device-selector {
    align-items: center;
    gap: 5px;
    margin-top: 10px;
    display: flex
}

    .device-selector > button {
        color: var(--t-a6b396);
        background: var(--t-f8faf3);
        border-radius: 3px;
        justify-content: center;
        align-items: center;
        gap: 4px;
        padding: 4px 5px;
        font-size: 6px;
        display: flex
    }

        .device-selector > button.active {
            color: var(--t-729760);
            background: var(--t-eef5e4)
        }

.telemetry-reading {
    color: var(--t-62854f);
    letter-spacing: -.7px;
    align-items: baseline;
    gap: 4px;
    margin-top: 9px;
    font-size: 24px;
    font-weight: 500;
    display: flex
}

    .telemetry-reading > span {
        letter-spacing: 0;
        color: var(--t-96ab82);
        font-size: 10px
    }

    .telemetry-reading > small {
        color: var(--t-acb69d);
        letter-spacing: 0;
        margin-left: auto;
        font-size: 6px;
        font-weight: 400
    }

.telemetry-chart {
    width: 100%;
    height: 85px;
    display: block
}

.chart-labels {
    color: var(--t-b1bba3);
    justify-content: space-between;
    font-size: 5px;
    display: flex
}

.event-feed {
    border-left: 1px solid var(--t-ebf0e1);
    padding-left: 14px
}

    .event-feed .mini-subheading {
        margin-bottom: 10px
    }

.feed-item {
    align-items: flex-start;
    gap: 7px;
    margin-top: 11px;
    display: flex
}

.feed-dot {
    background: var(--t-c4d1b4);
    border-radius: 50%;
    flex-shrink: 0;
    width: 4px;
    height: 4px;
    margin-top: 3px
}

    .feed-dot.latest {
        background: var(--t-8ca773)
    }

.feed-item > div > span {
    color: var(--t-8ca17a);
    font-size: 7px;
    line-height: 1.6;
    display: block
}

.feed-item small {
    color: var(--t-b3bda4);
    margin-top: 3px;
    font-size: 5px;
    display: block
}

.alert-banner {
    color: var(--t-b6a064);
    background: var(--t-faf6e9);
    border-radius: 3px;
    align-items: center;
    gap: 6px;
    margin: 13px 0;
    padding: 9px 8px;
    font-size: 7px;
    display: flex
}

    .alert-banner > span {
        flex: 1
    }

    .alert-banner > button {
        padding-left: 5px;
        font-size: 6px;
        font-weight: 600
    }

.alert-resolved {
    color: var(--t-83a36a);
    background: var(--t-edf5e5)
}

.dashboard-toolbar {
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 0 0 14px;
    display: flex
}

    .dashboard-toolbar > label > select {
        color: var(--t-8a9d78);
        background: var(--t-ffffff);
        border: 1px solid var(--t-e2e9d9);
        border-radius: 3px;
        max-width: 145px;
        padding: 6px 7px;
        font-size: 8px
    }

    .dashboard-toolbar > span {
        color: var(--t-abb89b);
        margin-left: auto;
        font-size: 6px
    }

.widget-picker-wrap {
    position: relative
}

.widget-picker {
    z-index: 2;
    background: var(--t-ffffff);
    border: 1px solid var(--t-dae6cd);
    border-radius: 5px;
    width: 180px;
    padding: 6px;
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    box-shadow: 0 5px 15px color-mix(in srgb, var(--t-566c35) 8.2%, transparent)
}

    .widget-picker > button {
        text-align: left;
        color: var(--t-789463);
        border-radius: 3px;
        align-items: center;
        gap: 7px;
        width: 100%;
        padding: 9px 7px;
        font-size: 9px;
        display: flex
    }

        .widget-picker > button:hover {
            background: var(--t-eff5e5)
        }

.dashboard-widgets {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    display: grid
}

.metric-widget {
    cursor: grab;
    background: var(--t-ffffff);
    border: 1px solid var(--t-e2ead8);
    border-radius: 5px;
    min-width: 0;
    padding: 12px;
    transition: opacity .2s
}

    .metric-widget.is-dragging {
        opacity: .45
    }

.widget-header {
    color: var(--t-b0bda1);
    align-items: center;
    gap: 3px;
    display: flex
}

    .widget-header > strong {
        color: var(--t-829a6e);
        font-size: 8px;
        font-weight: 550
    }

    .widget-header > div {
        align-items: center;
        margin-left: auto;
        display: flex
    }

        .widget-header > div > button {
            color: var(--t-a9b899);
            justify-content: center;
            align-items: center;
            width: 17px;
            height: 19px;
            display: flex
        }

            .widget-header > div > button:hover {
                color: var(--t-668b4d)
            }

.donut-content {
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding-top: 22px;
    display: flex
}

.health-donut {
    border-radius: 50%;
    width: 112px;
    height: 112px;
    padding: 12px;
    transform: rotate(-90deg)
}

    .health-donut > div {
        background: var(--t-ffffff);
        border-radius: 50%;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        display: flex;
        transform: rotate(90deg)
    }

    .health-donut strong {
        color: var(--t-729460);
        letter-spacing: -.8px;
        font-size: 27px;
        font-weight: 500
    }

        .health-donut strong > span {
            letter-spacing: 0;
            font-size: 11px
        }

    .health-donut small {
        color: var(--t-a9b69b);
        font-size: 7px
    }

.donut-legend {
    color: var(--t-9eb18b);
    gap: 11px;
    padding-bottom: 5px;
    font-size: 6px;
    display: flex
}

    .donut-legend > span {
        align-items: center;
        gap: 4px;
        display: flex
    }

    .donut-legend i {
        background: var(--t-779c62);
        border-radius: 1px;
        width: 4px;
        height: 4px;
        display: inline-block
    }

    .donut-legend > span:last-child i {
        background: var(--t-d3dec7)
    }

.completion-content {
    padding-top: 15px
}

    .completion-content > strong {
        color: var(--t-71955e);
        letter-spacing: -.7px;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 2px;
        font-size: 27px;
        font-weight: 500;
        display: flex
    }

        .completion-content > strong > span {
            font-size: 12px
        }

        .completion-content > strong > small {
            letter-spacing: 0;
            color: var(--t-a5b597);
            padding-left: 5px;
            font-size: 6px;
            font-weight: 400
        }

.bar-chart {
    border-bottom: 1px solid var(--t-e7efde);
    justify-content: space-around;
    align-items: flex-end;
    gap: 12px;
    height: 117px;
    margin-top: 10px;
    display: flex
}

    .bar-chart > div {
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        gap: 5px;
        min-width: 30px;
        display: flex
    }

        .bar-chart > div > span {
            color: var(--t-9eb78c);
            font-size: 6px
        }

        .bar-chart > div > div {
            background: var(--t-c9ddbb);
            border-radius: 3px 3px 0 0;
            width: 27px
        }

        .bar-chart > div:nth-child(2) > div {
            background: var(--t-92b882)
        }

        .bar-chart > div:nth-child(3) > div {
            background: var(--t-658f55)
        }

    .bar-chart small {
        color: var(--t-adbaa0);
        white-space: nowrap;
        padding-bottom: 5px;
        font-size: 6px
    }

.number-widget {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 5px;
    display: flex
}

.number-widget-icon {
    color: var(--t-9cb38b);
    margin-bottom: 14px
}

.number-widget > strong {
    color: var(--t-74965f);
    font-size: 32px;
    font-weight: 500
}

.number-widget > span:last-child {
    color: var(--t-a2b492);
    margin-top: 5px;
    font-size: 8px
}

.many-widgets .metric-widget {
    min-height: 193px
}

.many-widgets .health-donut {
    width: 91px;
    height: 91px
}

.many-widgets .donut-content {
    gap: 12px;
    padding-top: 13px
}

.organization-shield {
    color: var(--t-a0b48d)
}

.organization-tabs {
    border-bottom: 1px solid var(--t-e4ecdb);
    align-items: center;
    gap: 23px;
    margin-bottom: 18px;
    display: flex
}

    .organization-tabs > button {
        color: var(--t-a1b18e);
        border-bottom: 1px solid transparent;
        align-items: center;
        gap: 6px;
        padding-bottom: 11px;
        font-size: 8px;
        display: flex
    }

        .organization-tabs > button.active {
            color: var(--t-789965);
            border-bottom-color: var(--t-83a16f)
        }

        .organization-tabs > button > span {
            background: var(--t-f0f5e8);
            border-radius: 3px;
            padding: 1px 4px;
            font-size: 6px;
            display: inline-flex
        }

.organization-layout {
    grid-template-columns: 1.05fr 1fr;
    gap: 18px;
    display: grid
}

.org-root {
    text-align: left;
    color: var(--t-9ab18a);
    border: 1px solid var(--t-e1eada);
    border-radius: 5px;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 12px 10px;
    display: flex
}

    .org-root > span {
        background: var(--t-f0f6e9);
        border-radius: 3px;
        padding: 4px
    }

    .org-root > div {
        flex: 1
    }

    .org-root strong {
        color: var(--t-7e9a6c);
        font-size: 9px;
        font-weight: 550;
        display: block
    }

    .org-root small {
        color: var(--t-aab89a);
        margin-top: 3px;
        font-size: 7px;
        display: block
    }

    .org-root.selected {
        background: var(--t-fcfef7);
        border-color: var(--t-a8c092)
    }

.org-children {
    border-left: 1px solid var(--t-dce9d0);
    margin-left: 19px;
    padding-top: 13px;
    padding-left: 14px
}

    .org-children > button {
        text-align: left;
        color: var(--t-a3b88f);
        background: var(--t-ffffff);
        border: 1px solid var(--t-e5edde);
        border-radius: 4px;
        align-items: center;
        gap: 7px;
        width: 100%;
        margin-bottom: 7px;
        padding: 10px;
        display: flex
    }

        .org-children > button.selected {
            background: var(--t-f5faee);
            border-color: var(--t-adc796)
        }

        .org-children > button > div {
            flex: 1
        }

    .org-children strong {
        color: var(--t-8ba679);
        font-size: 8px;
        font-weight: 500;
        display: block
    }

    .org-children small {
        color: var(--t-b0c0a0);
        margin-top: 4px;
        font-size: 6px;
        display: block
    }

.org-scope-note {
    color: var(--t-adbfa0);
    align-items: flex-start;
    gap: 4px;
    margin-top: 15px;
    padding-bottom: 13px;
    font-size: 6px;
    line-height: 1.6;
    display: flex
}

.access-panel {
    background: var(--t-f7faf2);
    border: 1px solid var(--t-eaf0e2);
    border-radius: 4px;
    padding: 14px 12px
}

    .access-panel > .tree-label {
        color: var(--t-a4b795);
        letter-spacing: .7px;
        padding: 0 0 11px;
        font-size: 6px
    }

    .access-panel > label {
        color: var(--t-9cb688);
        background: var(--t-ffffff);
        border: 1px solid var(--t-dfead4);
        border-radius: 4px;
        align-items: center;
        gap: 6px;
        padding: 8px 6px;
        display: flex
    }

    .access-panel select {
        color: var(--t-86a371);
        background: 0 0;
        width: 100%;
        min-width: 0;
        font-size: 7px
    }

    .access-panel > strong {
        color: var(--t-7f9f6b);
        margin-top: 15px;
        font-size: 9px;
        font-weight: 550;
        display: block
    }

    .access-panel > p {
        color: var(--t-a0b58e);
        margin-block: 9px 15px;
        font-size: 7px;
        line-height: 1.8
    }

    .access-panel > div {
        color: var(--t-92ad7c);
        align-items: center;
        gap: 5px;
        margin-top: 8px;
        font-size: 6px;
        display: flex
    }

    .access-panel > small {
        color: var(--t-b3c3a4);
        margin-top: 14px;
        font-size: 5px;
        line-height: 1.7;
        display: block
    }

.audit-events {
    scrollbar-width: thin;
    max-height: 221px;
    overflow-y: auto
}

.audit-event {
    border-bottom: 1px solid var(--t-e9f0e1)
}

    .audit-event > button {
        text-align: left;
        align-items: center;
        gap: 9px;
        width: 100%;
        padding: 11px 0;
        display: flex
    }

.audit-event-icon {
    color: var(--t-9fb989);
    background: var(--t-f0f6e8);
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    width: 25px;
    height: 25px;
    display: flex
}

.audit-event > button > span:nth-child(2) {
    color: var(--t-8eaa7a);
    flex: 1;
    font-size: 8px;
    line-height: 1.6
}

.audit-event time {
    color: var(--t-b2c2a2);
    font-size: 6px
}

.audit-event > button > svg:last-child {
    color: var(--t-b3c4a3)
}

.audit-expanded {
    color: var(--t-a9be99);
    overflow-wrap: anywhere;
    padding: 3px 0 12px 34px;
    font-size: 7px;
    line-height: 1.9
}

.workflow-editor {
    color: var(--t-516647);
    background: var(--t-ffffff);
    border: 1px solid var(--t-dce5d2);
    border-radius: 9px;
    overflow: hidden;
    box-shadow: 0 12px 40px color-mix(in srgb, var(--t-344e1c) 2.4%, transparent)
}

.flow-toolbar {
    border-bottom: 1px solid var(--t-e8eee0);
    align-items: center;
    gap: 10px;
    padding: 17px 20px;
    display: flex
}

.flow-toolbar-icon {
    color: var(--t-648350);
    background: var(--t-eff5e7);
    border-radius: 6px;
    justify-content: center;
    align-items: center;
    width: 28px;
    height: 28px;
    display: flex
}

.flow-toolbar > label {
    flex: 1;
    align-items: center;
    gap: 6px;
    min-width: 0;
    display: flex
}

.flow-toolbar select {
    appearance: none;
    outline-offset: 4px;
    color: var(--t-657e52);
    text-overflow: ellipsis;
    background: 0 0;
    max-width: 100%;
    padding-right: 3px;
    font-size: 10px;
    font-weight: 550
}

.flow-toolbar > label > svg {
    color: var(--t-99ab86)
}

.flow-draft {
    color: var(--t-9fac8c);
    background: var(--t-f4f7ee);
    border: 1px solid var(--t-e6ecdd);
    border-radius: 3px;
    margin-left: auto;
    padding: 3px 7px;
    font-size: 8px
}

.flow-canvas {
    background-color: var(--t-fcfdf9);
    background-image: radial-gradient(color-mix(in srgb, var(--t-d4dec9) 56.1%, transparent) .8px,transparent .8px);
    background-size: 17px 17px;
    border: 1px solid transparent;
    min-height: 236px;
    padding-block: 20px 19px;
    transition: background-color .2s,border-color .2s
}

    .flow-canvas.drop-active {
        background-color: var(--t-eff7e8);
        border-color: var(--t-a1ba8b)
    }

.flow-canvas-caption {
    color: var(--t-a4b094);
    letter-spacing: 1px;
    justify-content: space-between;
    gap: 20px;
    padding-inline: 21px;
    font-size: 6px;
    display: flex
}

    .flow-canvas-caption > span:last-child {
        color: var(--t-bac3ac)
    }

.flow-node-scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--t-d6e0c8) transparent;
    padding: 38px 21px 7px;
    overflow-x: auto
}

.flow-nodes {
    justify-content: center;
    align-items: center;
    width: 100%;
    min-width: max-content;
    display: flex
}

.flow-sequence-item {
    align-items: center;
    display: flex
}

.flow-node {
    background: var(--t-ffffff);
    border: 1px solid var(--t-dfe7d6);
    border-radius: 6px;
    flex-shrink: 0;
    width: 149px;
    transition: border-color .2s,box-shadow .2s,opacity .2s;
    position: relative;
    box-shadow: 0 4px 10px color-mix(in srgb, var(--t-506134) 2%, transparent)
}

    .flow-node:before, .flow-node:after {
        content: "";
        z-index: 1;
        background: var(--t-ffffff);
        border: 1px solid var(--t-c8d6bc);
        border-radius: 50%;
        width: 5px;
        height: 5px;
        margin-top: -2px;
        position: absolute;
        top: 50%
    }

    .flow-node:before {
        left: -3px
    }

    .flow-node:after {
        right: -3px
    }

.flow-trigger:before {
    display: none
}

.flow-node.is-selected {
    border-color: var(--t-8caa75);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--t-cadbbb) 27.1%, transparent)
}

.flow-node.executed {
    border-color: var(--t-93b67b)
}

.flow-node.executing {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--t-b0d295) 18.8%, transparent)
}

.flow-node.step-blocked {
    border-color: var(--t-c9af75);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--t-ddc68b) 14.1%, transparent)
}

.flow-node-button {
    text-align: left;
    width: 100%;
    padding: 13px 12px
}

.flow-node-type {
    color: var(--t-9aad8a);
    letter-spacing: .6px;
    align-items: center;
    gap: 6px;
    font-size: 6px;
    display: flex
}

    .flow-node-type > span {
        color: var(--t-789c5f);
        background: var(--t-eaf3e2);
        border-radius: 5px;
        justify-content: center;
        align-items: center;
        width: 24px;
        height: 24px;
        display: inline-flex
    }

.flow-workorder .flow-node-type > span {
    color: var(--t-9784af);
    background: var(--t-f2ecf7)
}

.flow-notification .flow-node-type > span {
    color: var(--t-b39b6f);
    background: var(--t-f8f3e5)
}

.flow-condition .flow-node-type > span {
    color: var(--t-8b9caf);
    background: var(--t-edf2f7)
}

.flow-approval .flow-node-type > span {
    color: var(--t-b18d89);
    background: var(--t-f8edeb)
}

.flow-node-type .step-grip {
    opacity: .45;
    margin-left: auto
}

.flow-node-type .step-complete {
    color: var(--t-88a86f);
    margin-left: auto
}

.flow-node-button > strong {
    color: var(--t-6b8159);
    margin-top: 12px;
    font-size: 10px;
    font-weight: 550;
    display: block
}

.flow-node-button > small {
    color: var(--t-a5b295);
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 123px;
    margin-top: 5px;
    font-size: 7px;
    display: block;
    overflow: hidden
}

.flow-connector {
    background: var(--t-cbd9bf);
    width: 28px;
    height: 1px;
    position: relative
}

    .flow-connector > svg {
        color: var(--t-b6c8a5);
        position: absolute;
        top: -5.5px;
        right: -1px
    }

    .flow-connector.executed {
        background: var(--t-91b474)
    }

        .flow-connector.executed > span {
            background: var(--t-7ca459);
            border-radius: 50%;
            width: 4px;
            height: 4px;
            animation: .65s ease-out signal-travel;
            position: absolute;
            top: -1.5px;
            right: 0
        }

@keyframes signal-travel {
    0% {
        right: 100%
    }

    to {
        right: 0
    }
}

.flow-add-node {
    color: var(--t-a0b58c);
    border: 1px dashed var(--t-c8d7ba);
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    width: 25px;
    height: 25px;
    margin-left: 17px;
    display: flex
}

    .flow-add-node:hover:not(:disabled) {
        background: var(--t-e9f2df)
    }

.flow-canvas-hint {
    text-align: center;
    color: var(--t-a6b597);
    letter-spacing: .1px;
    margin: 24px 15px 0;
    font-size: 7px
}

.flow-palette {
    border-block: 1px solid var(--t-e7eedd);
    align-items: center;
    gap: 6px;
    padding: 15px 17px;
    display: flex
}

    .flow-palette > span {
        letter-spacing: .7px;
        color: var(--t-a6b399);
        margin-right: 5px;
        font-size: 6px
    }

    .flow-palette > button {
        color: var(--t-8fa87a);
        cursor: grab;
        background: var(--t-f9fbf5);
        border: 1px solid var(--t-e3ecd9);
        border-radius: 4px;
        align-items: center;
        gap: 4px;
        padding: 7px;
        font-size: 7px;
        display: flex
    }

        .flow-palette > button:hover:not(:disabled) {
            background: var(--t-f1f7e8);
            border-color: var(--t-b0c59a)
        }

        .flow-palette > button:disabled {
            cursor: not-allowed
        }

.flow-footer {
    background: var(--t-ffffff);
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    display: flex
}

    .flow-footer > span {
        color: var(--t-9fb08e);
        align-items: center;
        gap: 6px;
        font-size: 7px;
        display: flex
    }

    .flow-footer .mini-button {
        padding: 8px 10px;
        font-size: 8px
    }

.flow-inspector {
    background: var(--t-f9fcf4);
    border-bottom: 1px solid var(--t-e3ecd7);
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 12px 17px;
    display: flex
}

    .flow-inspector > label {
        color: var(--t-839c6c);
        flex: 1;
        align-items: center;
        gap: 9px;
        font-size: 8px;
        display: flex
    }

    .flow-inspector input {
        color: var(--t-6c8e56);
        background: var(--t-ffffff);
        border: 1px solid var(--t-dce8d0);
        border-radius: 3px;
        width: 50%;
        max-width: 145px;
        padding: 6px;
        font-size: 9px
    }

    .flow-inspector > div {
        gap: 3px;
        display: flex
    }

    .flow-inspector .remove-step {
        color: var(--t-b7987e)
    }

.flow-result {
    color: var(--t-7f9f63);
    background: var(--t-f1f8e9);
    border-top: 1px solid var(--t-dfead2);
    align-items: flex-start;
    gap: 9px;
    padding: 13px 18px;
    font-size: 9px;
    line-height: 1.7;
    display: flex
}

    .flow-result > svg {
        margin-top: 1px
    }

    .flow-result small {
        color: var(--t-a0b68b);
        margin-top: 3px;
        font-size: 7px;
        display: block
    }

.flow-result-pending {
    color: var(--t-907b45);
    background: var(--t-fbf7ea);
    border-color: var(--t-e8dbb9)
}

    .flow-result-pending small {
        color: var(--t-a79972)
    }

.flow-approval-actions {
    background: var(--t-fbf7ea);
    align-items: center;
    gap: 10px;
    padding: 5px 18px 15px;
    display: flex
}

@media(max-width: 1199px) {
    .demo-main {
        padding-inline: 12px
    }

    .asset-layout {
        grid-template-columns: 113px minmax(0,1fr);
        margin-inline: -12px
    }

    .asset-table-wrap {
        padding-inline: 9px
    }

    .tree-row {
        font-size: 6px
    }

    .tree-component {
        gap: 2px;
        font-size: 4px
    }

    .tree-summary strong {
        font-size: 6px
    }

    .asset-name {
        gap: 4px
    }

        .asset-name strong {
            font-size: 7px
        }

    .asset-type-icon {
        width: 22px;
        height: 25px
    }

        .asset-type-icon > svg {
            width: 12px
        }

    .asset-table td {
        padding-inline: 3px
    }

    .flow-node {
        width: 135px
    }

    .flow-node-button {
        padding: 11px 10px
    }

        .flow-node-button > strong {
            font-size: 9px
        }

        .flow-node-button > small {
            max-width: 113px;
            font-size: 6px
        }

    .flow-connector {
        width: 22px
    }

    .flow-add-node {
        width: 21px;
        height: 21px;
        margin-left: 12px
    }

    .flow-node-scroll {
        padding-inline: 15px
    }

    .flow-palette {
        flex-wrap: wrap;
        gap: 5px;
        padding-inline: 12px
    }

        .flow-palette > button {
            padding: 6px;
            font-size: 6px
        }

        .flow-palette > span {
            margin-right: 2px;
            font-size: 5px
        }

        .flow-palette > button > svg {
            width: 11px
        }
}

@media(max-width: 959px) {
    .demo-body {
        min-height: 346px
    }

    .demo-main {
        padding: 17px 18px 0
    }

    .asset-layout {
        grid-template-columns: 145px minmax(0,1fr);
        margin-inline: -18px
    }

    .asset-table-wrap {
        padding-inline: 12px
    }

    .asset-tree {
        padding-inline: 10px
    }

    .tree-row {
        font-size: 8px
    }

    .tree-branches .tree-row {
        font-size: 7px
    }

    .tree-component {
        font-size: 5px
    }

    .tree-summary strong {
        font-size: 8px
    }

    .tree-summary > span, .tree-label {
        font-size: 7px
    }

    .asset-name strong {
        font-size: 8px
    }

    .asset-name small {
        font-size: 6px
    }

    .asset-table td {
        padding-block: 11px
    }

    .status {
        font-size: 7px
    }

    .flow-node {
        width: 157px
    }

    .flow-node-button {
        padding: 15px 13px
    }

        .flow-node-button > strong {
            font-size: 11px
        }

        .flow-node-button > small {
            max-width: 131px;
            font-size: 8px
        }

    .flow-connector {
        width: 33px
    }

    .flow-add-node {
        width: 27px;
        height: 27px;
        margin-left: 18px
    }

    .flow-toolbar select {
        font-size: 11px
    }

    .flow-palette {
        gap: 9px;
        padding-inline: 22px
    }

        .flow-palette > span {
            margin-right: 7px;
            font-size: 7px
        }

        .flow-palette > button {
            padding: 8px 9px;
            font-size: 8px
        }

    .flow-canvas-hint {
        font-size: 8px
    }
}

@media(max-width: 699px) {
    .demo-topbar {
        gap: 8px;
        min-height: 42px;
        padding: 10px
    }

    .demo-wordmark {
        gap: 3px;
        font-size: 12px
    }

        .demo-wordmark > svg {
            width: 11px;
            height: 13px
        }

    .demo-tenant-select > svg {
        display: none
    }

    .demo-tenant-select select {
        max-width: 110px;
        font-size: 7px
    }

    .demo-topbar-right {
        gap: 5px
    }

        .demo-topbar-right .mini-icon-button {
            width: 19px
        }

    .demo-avatar {
        width: 20px;
        height: 20px;
        font-size: 6px
    }

    .demo-rail {
        gap: 10px;
        width: 33px;
        padding-top: 13px
    }

        .demo-rail > button {
            width: 24px;
            height: 27px
        }

            .demo-rail > button > svg {
                width: 14px;
                height: 14px
            }

    .demo-rail-home {
        width: 23px
    }

        .demo-rail-home > svg {
            width: 14px
        }

    .demo-body {
        min-height: 350px
    }

    .demo-main {
        padding: 13px 10px 0
    }

    .mini-breadcrumb {
        gap: 3px;
        margin-bottom: 9px;
        font-size: 6px
    }

    .mini-heading {
        gap: 7px;
        margin-bottom: 14px
    }

        .mini-heading h3 {
            letter-spacing: -.3px;
            font-size: 13px
        }

        .mini-heading p {
            margin-top: 4px;
            font-size: 6px
        }

    .mini-button {
        gap: 3px;
        padding: 7px;
        font-size: 6px
    }

        .mini-button > svg {
            width: 10px;
            height: 10px
        }

    .mini-count {
        font-size: 6px
    }

    .asset-layout {
        margin-inline: -10px;
        display: block
    }

    .asset-tree {
        display: none
    }

    .asset-table-wrap {
        padding-inline: 8px
    }

    .mini-toolbar {
        gap: 5px;
        padding-bottom: 10px
    }

    .mini-search {
        padding: 6px
    }

        .mini-search input {
            font-size: 7px
        }

    .mini-filter {
        padding: 6px 3px
    }

        .mini-filter > svg {
            display: none
        }

        .mini-filter select {
            max-width: 86px;
            font-size: 7px
        }

    .health-column {
        display: none
    }

    .asset-table th {
        padding: 7px 3px;
        font-size: 6px
    }

    .asset-table td {
        padding-block: 11px;
        padding-inline: 3px
    }

    .asset-name {
        gap: 5px
    }

        .asset-name strong {
            white-space: normal;
            font-size: 7px
        }

        .asset-name small {
            font-size: 5px
        }

    .asset-type-icon {
        width: 21px;
        height: 24px
    }

    .asset-table td:last-child, .asset-table th:last-child {
        display: none
    }

    .status {
        padding: 3px 4px;
        font-size: 6px
    }

    .table-footer {
        padding-top: 12px;
        font-size: 5px
    }

        .table-footer > span {
            font-size: 5px
        }

    .demo-bottom {
        padding: 8px;
        font-size: 5px
    }

    .demo-help {
        padding: 10px;
        font-size: 8px
    }

    .demo-bottom > span:first-child > .small-green-dot {
        width: 3px;
        height: 3px
    }

    .kanban-board {
        scrollbar-width: thin;
        scrollbar-color: var(--t-cbdabb) transparent;
        grid-template-columns: repeat(3,minmax(115px,1fr));
        gap: 8px;
        padding-bottom: 8px;
        overflow-x: auto
    }

    .kanban-title > .status {
        font-size: 7px
    }

    .kanban-column {
        min-height: 220px
    }

    .work-order-card > strong {
        font-size: 8px
    }

    .mini-bottom-note {
        font-size: 6px
    }

    .live-label {
        letter-spacing: 0;
        gap: 3px;
        padding: 3px;
        font-size: 4px
    }

        .live-label > span {
            width: 3px;
            height: 3px
        }

    .operations-metrics {
        gap: 5px;
        padding-bottom: 14px
    }

        .operations-metrics > div {
            padding-left: 8px
        }

            .operations-metrics > div > span {
                font-size: 5px
            }

        .operations-metrics strong {
            flex-wrap: wrap;
            gap: 3px;
            font-size: 20px
        }

            .operations-metrics strong > span {
                font-size: 5px
            }

    .operations-grid {
        grid-template-columns: 1.15fr 1fr;
        gap: 9px
    }

    .mini-subheading strong {
        font-size: 7px
    }

    .mini-subheading > span {
        font-size: 5px
    }

    .mini-subheading > svg {
        width: 10px
    }

    .device-selector {
        gap: 3px
    }

        .device-selector > button {
            padding: 4px;
            font-size: 5px
        }

            .device-selector > button > svg {
                display: none
            }

    .telemetry-reading {
        font-size: 23px
    }

        .telemetry-reading > small {
            font-size: 4px
        }

    .telemetry-chart {
        height: 74px
    }

    .chart-labels {
        font-size: 4px
    }

    .event-feed {
        padding-left: 9px
    }

    .feed-item {
        gap: 4px;
        margin-top: 10px
    }

        .feed-item > div > span {
            font-size: 5px
        }

        .feed-item small {
            font-size: 4px
        }

    .alert-banner {
        gap: 5px;
        padding: 8px 6px;
        font-size: 5px
    }

        .alert-banner > svg {
            width: 10px
        }

        .alert-banner > button {
            font-size: 5px
        }

    .dashboard-toolbar {
        gap: 5px
    }

        .dashboard-toolbar > label > select {
            max-width: 107px;
            padding: 6px 4px;
            font-size: 7px
        }

        .dashboard-toolbar > span {
            display: none
        }

    .dashboard-widgets {
        gap: 7px
    }

    .metric-widget {
        padding: 9px 7px
    }

    .widget-header {
        flex-wrap: wrap;
        gap: 3px
    }

        .widget-header > strong {
            font-size: 6px
        }

        .widget-header > svg {
            width: 10px
        }

        .widget-header > div {
            flex-basis: 100%;
            justify-content: flex-end;
            margin-left: 0
        }

            .widget-header > div > button {
                width: 16px;
                height: 18px
            }

    .donut-content {
        gap: 14px;
        padding-top: 13px
    }

    .health-donut {
        width: 83px;
        height: 83px;
        padding: 9px
    }

        .health-donut strong {
            font-size: 22px
        }

            .health-donut strong > span {
                font-size: 9px
            }

        .health-donut small {
            font-size: 6px
        }

    .donut-legend {
        flex-wrap: wrap;
        justify-content: center;
        gap: 5px;
        font-size: 5px
    }

    .completion-content {
        padding-top: 9px
    }

        .completion-content > strong {
            font-size: 22px
        }

            .completion-content > strong > small {
                flex-basis: 100%;
                padding: 0;
                font-size: 5px
            }

    .bar-chart {
        gap: 7px;
        height: 105px;
        margin-top: 2px
    }

        .bar-chart > div {
            min-width: 18px
        }

            .bar-chart > div > div {
                width: 18px;
                max-height: 63px
            }

        .bar-chart small {
            font-size: 4px
        }

    .number-widget {
        padding-block: 13px
    }

        .number-widget > strong {
            font-size: 26px
        }

        .number-widget > span:last-child {
            font-size: 6px
        }

    .number-widget-icon > svg {
        width: 19px
    }

    .many-widgets .health-donut {
        width: 76px;
        height: 76px
    }

    .many-widgets .metric-widget {
        min-height: 180px
    }

    .organization-shield {
        display: none
    }

    .organization-tabs {
        gap: 17px
    }

        .organization-tabs > button {
            gap: 4px;
            font-size: 7px
        }

            .organization-tabs > button > svg {
                width: 11px
            }

    .organization-layout {
        grid-template-columns: 1fr 1fr;
        gap: 10px
    }

    .org-root {
        gap: 5px;
        padding: 9px 5px
    }

        .org-root > span {
            padding: 3px
        }

            .org-root > span > svg {
                width: 12px;
                height: 12px
            }

        .org-root > svg {
            display: none
        }

        .org-root strong {
            font-size: 7px
        }

        .org-root small {
            font-size: 5px
        }

    .org-children {
        margin-left: 10px;
        padding-left: 7px
    }

        .org-children > button {
            gap: 4px;
            padding: 8px 5px
        }

            .org-children > button > svg {
                width: 11px
            }

                .org-children > button > svg:last-child {
                    display: none
                }

        .org-children strong {
            font-size: 6px
        }

        .org-children small {
            font-size: 5px
        }

    .org-scope-note {
        gap: 3px;
        font-size: 5px
    }

        .org-scope-note > svg {
            width: 9px
        }

    .access-panel {
        padding: 10px 7px
    }

        .access-panel > .tree-label {
            letter-spacing: .3px;
            font-size: 5px
        }

        .access-panel > label {
            gap: 3px;
            padding: 6px 3px
        }

            .access-panel > label > svg {
                display: none
            }

        .access-panel select {
            font-size: 6px
        }

        .access-panel > strong {
            margin-top: 12px;
            font-size: 7px
        }

        .access-panel > p {
            margin-block: 7px 10px;
            font-size: 6px
        }

        .access-panel > div {
            gap: 3px;
            font-size: 5px
        }

            .access-panel > div > svg {
                width: 9px
            }

        .access-panel > small {
            font-size: 4px
        }

    .audit-event > button {
        gap: 6px
    }

        .audit-event > button > span:nth-child(2) {
            font-size: 6px
        }

    .audit-event-icon {
        width: 22px;
        height: 22px
    }

    .audit-event time {
        font-size: 5px
    }

    .audit-expanded {
        padding-left: 28px;
        font-size: 6px
    }

    .flow-toolbar {
        gap: 7px;
        padding: 12px 13px
    }

        .flow-toolbar select {
            font-size: 8px
        }

    .flow-toolbar-icon {
        width: 24px;
        height: 24px
    }

        .flow-toolbar-icon > svg {
            width: 14px
        }

    .flow-toolbar > label > svg {
        width: 9px
    }

    .flow-draft {
        padding: 3px 4px;
        font-size: 6px
    }

    .flow-toolbar > .mini-icon-button {
        width: 19px
    }

        .flow-toolbar > .mini-icon-button > svg {
            width: 12px
        }

    .flow-canvas {
        min-height: 223px;
        padding-top: 16px
    }

    .flow-canvas-caption {
        letter-spacing: .5px;
        gap: 10px;
        padding-inline: 14px;
        font-size: 5px
    }

    .flow-node-scroll {
        padding: 33px 17px 10px
    }

    .flow-nodes {
        justify-content: flex-start
    }

    .flow-node {
        width: 132px
    }

    .flow-node-button {
        padding: 12px 10px
    }

        .flow-node-button > strong {
            font-size: 9px
        }

        .flow-node-button > small {
            max-width: 110px;
            font-size: 7px
        }

    .flow-node-type {
        gap: 5px;
        font-size: 5px
    }

        .flow-node-type > span {
            width: 22px;
            height: 22px
        }

    .flow-connector {
        width: 25px
    }

    .flow-add-node {
        width: 23px;
        height: 23px;
        margin-left: 15px;
        margin-right: 5px
    }

    .flow-canvas-hint {
        margin-top: 20px;
        font-size: 6px
    }

    .flow-palette {
        gap: 5px;
        padding: 12px
    }

        .flow-palette > span {
            letter-spacing: .4px;
            margin-right: 0;
            font-size: 5px
        }

        .flow-palette > button {
            gap: 3px;
            padding: 6px 5px;
            font-size: 6px
        }

            .flow-palette > button > svg {
                width: 10px
            }

    .flow-footer {
        gap: 8px;
        padding: 11px 13px
    }

        .flow-footer > span {
            gap: 5px;
            font-size: 6px
        }

            .flow-footer > span > .small-green-dot {
                width: 4px;
                height: 4px
            }

        .flow-footer .mini-button {
            gap: 4px;
            padding: 7px;
            font-size: 7px
        }

    .flow-inspector {
        gap: 7px;
        padding: 11px
    }

        .flow-inspector > label {
            gap: 5px;
            font-size: 6px
        }

        .flow-inspector input {
            width: 90px;
            max-width: 100%;
            font-size: 7px
        }

        .flow-inspector > div {
            gap: 1px
        }

        .flow-inspector .mini-icon-button {
            width: 19px
        }

    .flow-result {
        gap: 7px;
        padding: 12px;
        font-size: 8px
    }

        .flow-result small {
            font-size: 6px
        }
}

.demo-app .mini-heading h3 {
    color: var(--t-344c3a)
}

.demo-app .mini-heading p, .demo-app .mini-breadcrumb {
    color: var(--t-839078)
}

.demo-app .asset-name strong {
    color: var(--t-4b6244)
}

.demo-app .asset-name small, .demo-app .asset-table th {
    color: var(--t-7c8e70)
}

.demo-app .tree-row {
    color: var(--t-7a8c6c)
}

    .demo-app .tree-row.selected {
        color: var(--t-527346)
    }

.demo-app .status-operational, .demo-app .status-completed {
    color: var(--t-56763d)
}

.demo-app .status-attention, .demo-app .status-open {
    color: var(--t-927136)
}

.demo-app .status-maintenance, .demo-app .status-in-progress {
    color: var(--t-77628b)
}

.demo-app .mini-subheading strong, .demo-app .widget-header > strong, .demo-app .work-order-card > strong {
    color: var(--t-5b754e)
}

.demo-app .feed-item > div > span, .demo-app .audit-event > button > span:nth-child(2) {
    color: var(--t-748d64)
}

.demo-app .access-panel > p, .demo-app .access-panel > div {
    color: var(--t-778f67)
}

.demo-app .mini-search input::placeholder {
    color: var(--t-8e9e82)
}

.workflow-editor .flow-node-button > strong {
    color: var(--t-536c42)
}

.workflow-editor .flow-node-button > small {
    color: var(--t-81966f)
}

.workflow-editor .flow-palette > button {
    color: var(--t-718d5d)
}

.modal {
    width: 670px;
    max-width: calc(100vw - 40px);
    max-height: calc(100dvh - 50px);
    color: var(--ink);
    scrollbar-width: thin;
    scrollbar-color: var(--t-bccfb0) transparent;
    background: var(--t-ffffff);
    border: none;
    border-radius: 12px;
    margin: auto;
    padding: 0;
    overflow: hidden auto;
    box-shadow: 0 30px 100px color-mix(in srgb, var(--t-0c2518) 25.9%, transparent)
}

    .modal::backdrop {
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
        background: color-mix(in srgb, var(--t-12271a) 65.1%, transparent)
    }

.modal-wide {
    width: 1100px
}

.modal-surface {
    background: var(--t-ffffff);
    min-height: 180px;
    position: relative
}

.modal-close {
    z-index: 5;
    color: var(--t-78976a);
    background: var(--t-f2f7ea);
    border: 1px solid var(--t-e5eddc);
    width: 32px;
    height: 32px;
    position: absolute;
    top: 17px;
    right: 17px
}

    .modal-close > svg {
        width: 17px;
        height: 17px
    }

.standard-modal-content {
    padding: 49px 42px 42px
}

    .standard-modal-content .modal-eyebrow {
        letter-spacing: 1.3px;
        margin-right: 25px;
        font-size: 8px
    }

    .standard-modal-content > h2 {
        letter-spacing: -1.2px;
        margin: 19px 0 17px;
        font-size: 34px;
        font-weight: 550;
        line-height: 1.25
    }

    .standard-modal-content > p {
        color: var(--t-65765b);
        margin-bottom: 22px;
        font-size: 13px;
        line-height: 1.85
    }

    .standard-modal-content > h3 {
        letter-spacing: -.2px;
        margin-block: 28px 13px;
        font-size: 16px;
        font-weight: 600
    }

    .standard-modal-content > .feature-list {
        margin-block: 24px
    }

        .standard-modal-content > .feature-list li {
            font-size: 12px
        }

    .standard-modal-content .button {
        min-height: 48px;
        font-size: 12px
    }

.form-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 19px 15px;
    margin-top: 28px;
    display: grid
}

    .form-grid label {
        color: var(--t-526747);
        font-size: 11px;
        font-weight: 550;
        line-height: 1.5
    }

.full-width {
    grid-column: 1/-1
}

.form-grid input, .form-grid select, .form-grid textarea {
    color: var(--t-60764d);
    outline-offset: 2px;
    background: var(--t-fdfefa);
    border: 1px solid var(--t-dfe8d5);
    border-radius: 4px;
    width: 100%;
    margin-top: 7px;
    padding: 12px 13px;
    font-size: 11px;
    font-weight: 400;
    transition: border-color .2s;
    display: block
}

.form-grid input, .form-grid select {
    height: 43px
}

    .form-grid input::placeholder, .form-grid textarea::placeholder {
        color: var(--t-a0ae93)
    }

.form-grid select {
    padding: 10px
}

.form-grid textarea {
    resize: vertical;
    min-height: 88px;
    line-height: 1.7
}

    .form-grid input:hover, .form-grid select:hover, .form-grid textarea:hover {
        border-color: var(--t-aec09f)
    }

.form-grid > button {
    margin-top: 2px
}

.optional {
    color: var(--t-a7b39c);
    font-size: 9px;
    font-weight: 400
}

.form-disclaimer {
    color: var(--t-788a69);
    justify-content: center;
    align-items: flex-start;
    gap: 6px;
    margin-top: -7px;
    font-size: 9px;
    line-height: 1.7;
    display: flex
}

    .form-disclaimer > svg {
        margin-top: 1px
    }

.booking-modal {
    width: 945px
}

.booking-layout {
    grid-template-columns: .86fr 1.1fr;
    min-height: 615px;
    display: grid
}

.booking-intro {
    color: var(--t-f4f8eb);
    background: var(--t-24593a);
    flex-direction: column;
    align-items: flex-start;
    padding: 38px 32px;
    display: flex
}

    .booking-intro > .eyebrow {
        letter-spacing: 1.3px;
        color: var(--t-b7ccaa);
        margin-top: 52px;
        font-size: 7px
    }

    .booking-intro > h2 {
        letter-spacing: -1.2px;
        margin-block: 21px;
        font-size: 34px;
        font-weight: 450;
        line-height: 1.26
    }

    .booking-intro > p {
        color: var(--t-b0c7a1);
        margin-bottom: 32px;
        font-size: 11px;
        line-height: 1.9
    }

    .booking-intro > div {
        color: var(--t-c6d7b8);
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 17px;
        font-size: 9px;
        line-height: 1.7;
        display: flex
    }

        .booking-intro > div > svg {
            color: var(--t-a9c592);
            width: 13px;
            margin-top: 1px
        }

.booking-intro-bottom {
    color: var(--t-9fb98b);
    margin-top: auto;
    padding-top: 30px;
    font-size: 8px;
    display: block
}

.booking-form-wrap {
    padding: 49px 39px 33px
}

    .booking-form-wrap > .modal-eyebrow {
        letter-spacing: 1.15px;
        font-size: 8px
    }

    .booking-form-wrap h2 {
        letter-spacing: -1px;
        margin: 15px 0 11px;
        font-size: 33px;
        font-weight: 550;
        line-height: 1.25
    }

    .booking-form-wrap > p {
        color: var(--t-9ba88c);
        font-size: 11px
    }

    .booking-form-wrap .form-grid {
        gap: 17px 14px;
        margin-top: 26px
    }

    .booking-form-wrap .button {
        min-height: 47px;
        font-size: 11px
    }

.booking-success {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    min-height: 495px;
    display: flex
}

.success-icon {
    color: var(--t-7ca061);
    background: var(--t-eff6e7);
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    width: 66px;
    height: 66px;
    margin-bottom: 30px;
    display: inline-flex
}

.booking-success > .eyebrow {
    letter-spacing: 1.2px;
    font-size: 7px
}

.booking-success > h2 {
    margin: 16px 0;
    font-size: 27px;
    line-height: 1.35
}

.booking-success > p {
    color: var(--t-6f845e);
    font-size: 12px;
    line-height: 1.9
}

.booking-summary {
    color: var(--t-90a47e);
    border-block: 1px solid var(--t-e4ecda);
    flex-direction: column;
    gap: 7px;
    width: 100%;
    margin: 15px 0 24px;
    padding: 19px 0;
    font-size: 10px;
    display: flex
}

    .booking-summary strong {
        color: var(--t-6f8e5e);
        font-size: 12px;
        font-weight: 550
    }

.booking-success > .text-link {
    margin-top: 22px;
    font-size: 11px
}

.sandbox-header {
    padding: 36px 34px 26px
}

    .sandbox-header > .eyebrow {
        font-size: 8px
    }

    .sandbox-header > h2 {
        letter-spacing: -1px;
        margin: 12px 0 10px;
        font-size: 29px;
        line-height: 1.3
    }

    .sandbox-header > p {
        color: var(--t-8c9e7b);
        font-size: 12px;
        line-height: 1.7
    }

.sandbox-tabs {
    scrollbar-width: thin;
    border-block: 1px solid var(--t-e1ead6);
    align-items: center;
    gap: 0;
    padding-inline: 27px;
    display: flex;
    overflow-x: auto
}

    .sandbox-tabs > button {
        color: var(--t-90a87a);
        white-space: nowrap;
        border-bottom: 2px solid transparent;
        justify-content: center;
        align-items: center;
        gap: 7px;
        padding: 16px 20px;
        font-size: 10px;
        display: inline-flex
    }

        .sandbox-tabs > button.active {
            color: var(--t-648950);
            background: var(--t-f8fbf2);
            border-bottom-color: var(--t-73965e)
        }

        .sandbox-tabs > button:hover {
            color: var(--t-517c3a);
            background: var(--t-f5f9ed)
        }

.sandbox-stage {
    background: var(--t-f1f6e9);
    padding: 25px 31px
}

    .sandbox-stage .demo-app {
        font-size: 12px
    }

    .sandbox-stage .demo-topbar {
        padding: 15px 21px
    }

    .sandbox-stage .demo-wordmark {
        font-size: 17px
    }

        .sandbox-stage .demo-wordmark > svg {
            width: 17px;
            height: 19px
        }

    .sandbox-stage .demo-tenant-select select {
        max-width: 170px;
        font-size: 10px
    }

    .sandbox-stage .demo-avatar {
        width: 28px;
        height: 28px;
        font-size: 8px
    }

    .sandbox-stage .demo-body {
        min-height: 379px
    }

    .sandbox-stage .demo-main {
        padding: 21px 24px 0
    }

    .sandbox-stage .mini-breadcrumb {
        margin-bottom: 13px;
        font-size: 9px
    }

    .sandbox-stage .mini-heading h3 {
        font-size: 22px
    }

    .sandbox-stage .mini-heading p {
        margin-top: 5px;
        font-size: 10px
    }

    .sandbox-stage .mini-button {
        padding: 9px 12px;
        font-size: 10px
    }

    .sandbox-stage .demo-rail {
        gap: 13px;
        width: 55px
    }

        .sandbox-stage .demo-rail > button {
            width: 33px;
            height: 33px
        }

    .sandbox-stage .asset-layout {
        grid-template-columns: 170px minmax(0,1fr);
        margin-inline: -24px
    }

    .sandbox-stage .asset-tree {
        padding: 19px 13px
    }

    .sandbox-stage .tree-label {
        font-size: 8px
    }

    .sandbox-stage .tree-row {
        gap: 7px;
        padding: 10px 5px;
        font-size: 9px
    }

    .sandbox-stage .tree-branches .tree-row {
        font-size: 8px
    }

    .sandbox-stage .tree-component {
        gap: 3px;
        font-size: 6px
    }

    .sandbox-stage .tree-summary {
        margin-top: 25px
    }

        .sandbox-stage .tree-summary strong {
            font-size: 9px
        }

        .sandbox-stage .tree-summary > span {
            font-size: 8px
        }

    .sandbox-stage .asset-table-wrap {
        padding: 16px 18px 0
    }

    .sandbox-stage .mini-search {
        max-width: 250px;
        padding: 8px 9px
    }

        .sandbox-stage .mini-search input {
            font-size: 10px
        }

    .sandbox-stage .mini-filter {
        padding: 8px
    }

        .sandbox-stage .mini-filter select {
            max-width: 120px;
            font-size: 9px
        }

    .sandbox-stage .asset-table th {
        padding: 10px 8px;
        font-size: 8px
    }

    .sandbox-stage .asset-table td {
        padding: 13px 7px
    }

    .sandbox-stage .asset-name {
        gap: 9px
    }

        .sandbox-stage .asset-name strong {
            font-size: 11px
        }

        .sandbox-stage .asset-name small {
            font-size: 8px
        }

    .sandbox-stage .asset-type-icon {
        width: 30px;
        height: 33px
    }

        .sandbox-stage .asset-type-icon > svg {
            width: 16px
        }

    .sandbox-stage .status {
        padding: 4px 7px;
        font-size: 8px
    }

    .sandbox-stage .health-value {
        font-size: 10px
    }

    .sandbox-stage .health-track {
        width: 36px
    }

    .sandbox-stage .table-footer {
        padding: 14px 7px;
        font-size: 8px
    }

    .sandbox-stage .demo-bottom {
        padding: 10px 16px;
        font-size: 8px
    }

    .sandbox-stage .kanban-column {
        min-height: 245px;
        padding: 13px
    }

    .sandbox-stage .work-order-card {
        padding: 13px 12px
    }

        .sandbox-stage .work-order-card > strong {
            font-size: 12px
        }

        .sandbox-stage .work-order-card > div:first-child, .sandbox-stage .priority, .sandbox-stage .order-asset, .sandbox-stage .order-card-bottom > span:first-child {
            font-size: 8px
        }

    .sandbox-stage .live-label {
        font-size: 7px
    }

    .sandbox-stage .operations-metrics > div > span {
        font-size: 9px
    }

    .sandbox-stage .operations-metrics strong {
        font-size: 28px
    }

        .sandbox-stage .operations-metrics strong > span {
            font-size: 8px
        }

    .sandbox-stage .mini-subheading strong {
        font-size: 10px
    }

    .sandbox-stage .mini-subheading > span {
        font-size: 8px
    }

    .sandbox-stage .device-selector > button {
        padding: 6px 9px;
        font-size: 8px
    }

    .sandbox-stage .telemetry-chart {
        height: 108px
    }

    .sandbox-stage .feed-item > div > span {
        font-size: 9px
    }

    .sandbox-stage .feed-item small {
        font-size: 7px
    }

    .sandbox-stage .alert-banner {
        padding: 11px;
        font-size: 9px
    }

        .sandbox-stage .alert-banner > button, .sandbox-stage .dashboard-toolbar > span {
            font-size: 8px
        }

    .sandbox-stage .dashboard-toolbar > label > select {
        font-size: 10px
    }

    .sandbox-stage .widget-header > strong {
        font-size: 11px
    }

    .sandbox-stage .metric-widget {
        padding: 16px
    }

    .sandbox-stage .health-donut {
        width: 139px;
        height: 139px;
        padding: 16px
    }

        .sandbox-stage .health-donut strong {
            font-size: 33px
        }

        .sandbox-stage .health-donut small {
            font-size: 9px
        }

    .sandbox-stage .donut-legend {
        font-size: 8px
    }

    .sandbox-stage .completion-content > strong {
        font-size: 33px
    }

        .sandbox-stage .completion-content > strong > small {
            font-size: 9px
        }

    .sandbox-stage .bar-chart {
        height: 151px
    }

        .sandbox-stage .bar-chart > div > div {
            width: 40px
        }

        .sandbox-stage .bar-chart > div > span, .sandbox-stage .bar-chart small {
            font-size: 8px
        }

    .sandbox-stage .organization-tabs > button {
        font-size: 10px
    }

    .sandbox-stage .org-root strong {
        font-size: 12px
    }

    .sandbox-stage .org-root small {
        font-size: 9px
    }

    .sandbox-stage .org-root {
        padding: 16px
    }

    .sandbox-stage .org-children strong {
        font-size: 10px
    }

    .sandbox-stage .org-children small {
        font-size: 8px
    }

    .sandbox-stage .org-children > button {
        padding: 13px
    }

    .sandbox-stage .org-scope-note {
        font-size: 8px
    }

    .sandbox-stage .access-panel {
        padding: 17px
    }

        .sandbox-stage .access-panel > .tree-label {
            font-size: 8px
        }

        .sandbox-stage .access-panel select {
            font-size: 10px
        }

        .sandbox-stage .access-panel > strong {
            font-size: 12px
        }

        .sandbox-stage .access-panel > p {
            font-size: 10px
        }

        .sandbox-stage .access-panel > div {
            font-size: 8px
        }

        .sandbox-stage .access-panel > small {
            font-size: 7px
        }

    .sandbox-stage .audit-event > button > span:nth-child(2) {
        font-size: 10px
    }

    .sandbox-stage .audit-event time {
        font-size: 8px
    }

    .sandbox-stage .audit-expanded {
        font-size: 9px
    }

    .sandbox-stage .flow-canvas {
        min-height: 255px
    }

    .sandbox-stage .flow-node {
        width: 189px
    }

    .sandbox-stage .flow-connector {
        width: 50px
    }

    .sandbox-stage .flow-node-button {
        padding: 17px 15px
    }

        .sandbox-stage .flow-node-button > strong {
            font-size: 13px
        }

        .sandbox-stage .flow-node-button > small {
            max-width: 157px;
            font-size: 9px
        }

    .sandbox-stage .flow-node-type {
        font-size: 8px
    }

    .sandbox-stage .flow-toolbar select {
        font-size: 12px
    }

    .sandbox-stage .flow-palette > button {
        padding: 8px 10px;
        font-size: 9px
    }

    .sandbox-stage .flow-palette > span, .sandbox-stage .flow-footer > span {
        font-size: 8px
    }

.sandbox-footer {
    border-top: 1px solid var(--t-e5eddc);
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    padding: 21px 31px;
    display: flex
}

    .sandbox-footer > span {
        color: var(--t-9bad8c);
        align-items: center;
        gap: 6px;
        font-size: 9px;
        display: flex
    }

    .sandbox-footer > .text-link {
        font-size: 10px
    }

.solution-modal-visual {
    height: 185px;
    position: relative;
    overflow: hidden
}

    .solution-modal-visual > img {
        object-fit: cover;
        object-position: center 55%;
        width: 100%;
        height: 100%
    }

    .solution-modal-visual > span {
        color: var(--t-446c35);
        font-size: 12px;
        font-weight: 550;
        position: absolute;
        bottom: 25px;
        left: 35px
    }

.solution-modal-content {
    padding-top: 30px
}

.solution-example {
    border-left: 2px solid var(--t-aec49a);
    margin-block: 29px;
    padding-left: 16px
}

    .solution-example > span {
        letter-spacing: 1px;
        color: var(--t-8ea777);
        font-size: 8px;
        display: block
    }

    .solution-example > p {
        color: var(--t-8a9f76);
        margin-top: 10px;
        font-size: 12px;
        line-height: 1.9
    }

.article-content > p {
    margin-bottom: 15px
}

.article-content > h3 {
    color: var(--t-5c7a48);
    margin-top: 30px;
    font-size: 15px
}

.article-content > .article-lead {
    color: var(--t-677e55);
    font-size: 14px;
    line-height: 1.9
}

.article-content > .text-link {
    font-size: 11px
}

.article-takeaway {
    border-left: 2px solid var(--t-afc499);
    margin-block: 30px;
    padding: 20px 0 20px 20px
}

    .article-takeaway > strong {
        color: var(--t-688954);
        font-size: 15px;
        font-weight: 550
    }

    .article-takeaway > p {
        color: var(--t-8ba375);
        margin-top: 9px;
        font-size: 12px;
        line-height: 1.8
    }

.article-content > .muted-note, .muted-note {
    color: var(--t-a5b396);
    font-size: 10px;
    line-height: 1.8
}

.checklist-progress {
    color: var(--t-8aa374);
    margin-block: 27px;
    font-size: 11px
}

    .checklist-progress > div {
        background: var(--t-ecf2e3);
        border-radius: 3px;
        width: 100%;
        height: 5px;
        margin-top: 12px;
        overflow: hidden
    }

        .checklist-progress > div > span {
            background: var(--t-8ead70);
            border-radius: 3px;
            height: 100%;
            transition: width .25s;
            display: block
        }

.evaluation-checklist {
    flex-direction: column;
    gap: 0;
    margin-bottom: 30px;
    display: flex
}

    .evaluation-checklist > label {
        color: var(--t-647e4e);
        cursor: pointer;
        border-bottom: 1px solid var(--t-e6eddd);
        align-items: flex-start;
        gap: 12px;
        padding: 14px 0;
        font-size: 12px;
        line-height: 1.8;
        display: flex
    }

    .evaluation-checklist input {
        flex-shrink: 0;
        width: 15px;
        height: 15px;
        margin-top: 4px
    }

    .evaluation-checklist > label.checked {
        color: var(--t-9eb58b)
    }

.detail-grid {
    border-block: 1px solid var(--t-e4ecd9);
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-top: 27px;
    padding-block: 27px;
    display: grid
}

    .detail-grid > div > span {
        color: var(--t-a3b393);
        font-size: 9px;
        display: block
    }

    .detail-grid strong {
        color: var(--t-759460);
        margin-top: 7px;
        font-size: 13px;
        font-weight: 550;
        display: block
    }

.asset-detail > .status {
    padding: 5px 9px;
    font-size: 10px
}

.detail-hierarchy {
    color: var(--t-88a574);
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 14px 0;
    font-size: 11px;
    display: flex
}

.asset-detail > .muted-note {
    margin-top: 14px;
    font-size: 11px
}

.component-hierarchy {
    margin-top: 11px
}

.component-group {
    border-bottom: 1px solid var(--t-e1e9d8)
}

    .component-group > summary {
        cursor: pointer;
        color: var(--t-6a8559);
        align-items: center;
        gap: 8px;
        padding: 15px 0;
        list-style: none;
        display: flex
    }

        .component-group > summary::-webkit-details-marker {
            display: none
        }

        .component-group > summary > strong {
            font-size: 12px;
            font-weight: 550
        }

        .component-group > summary > span {
            color: var(--t-879b74);
            margin-left: auto;
            font-size: 9px
        }

    .component-group[open] > summary > svg:first-child {
        transform: rotate(90deg)
    }

.component-children {
    border-left: 1px solid var(--t-d9e4cf);
    margin: 0 0 17px 7px;
    padding-left: 23px
}

    .component-children > button {
        text-align: left;
        color: var(--t-718c5e);
        border-radius: 4px;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 11px 9px;
        display: flex
    }

        .component-children > button.selected, .component-children > button:hover {
            background: var(--t-f0f6e8)
        }

        .component-children > button > span {
            flex: 1;
            font-size: 12px
        }

    .component-children small {
        color: var(--t-8fa67b);
        margin-top: 3px;
        font-size: 9px;
        display: block
    }

.component-hierarchy > p {
    margin-block: 19px
}

.component-scope {
    margin: 22px 0 16px
}

    .component-scope > span {
        letter-spacing: 1px;
        color: var(--t-8aa376);
        font-size: 8px;
        display: block
    }

    .component-scope > strong {
        color: var(--t-64814f);
        margin-top: 7px;
        font-size: 12px;
        font-weight: 550;
        display: block
    }

.inspection-list {
    margin: 26px 0 22px
}

    .inspection-list > label {
        color: var(--t-657f51);
        border-bottom: 1px solid var(--t-e7eedf);
        align-items: flex-start;
        gap: 11px;
        padding-block: 14px;
        font-size: 12px;
        line-height: 1.7;
        display: flex
    }

    .inspection-list input {
        flex-shrink: 0;
        width: 15px;
        height: 15px;
        margin-top: 4px
    }

.inspection-progress {
    background: var(--t-edf3e5);
    border-radius: 3px;
    width: 100%;
    height: 4px;
    margin-bottom: 25px;
    overflow: hidden
}

    .inspection-progress > span {
        background: var(--t-8dab73);
        height: 100%;
        transition: width .25s;
        display: block
    }

    .inspection-progress + .button + .muted-note {
        margin-top: 13px;
        margin-bottom: 0;
        font-size: 10px
    }

.success-inline {
    color: var(--t-87a66d);
    background: var(--t-f1f8e8);
    border-radius: 5px;
    align-items: center;
    gap: 9px;
    padding: 15px;
    font-size: 12px;
    display: flex
}

.report-columns {
    flex-direction: column;
    gap: 15px;
    padding-block: 15px;
    display: flex
}

    .report-columns > label {
        color: var(--t-89a473);
        align-items: center;
        gap: 12px;
        font-size: 13px;
        display: flex
    }

    .report-columns input {
        width: 16px;
        height: 16px
    }

.standard-modal-content > .report-summary {
    color: var(--t-a4b994);
    margin-top: 16px;
    font-size: 10px
}

.toast-region {
    z-index: 200;
    pointer-events: none;
    width: 400px;
    max-width: calc(100vw - 40px);
    position: fixed;
    bottom: 24px;
    right: 24px
}

.toast {
    pointer-events: auto;
    background: var(--t-ffffff);
    border: 1px solid var(--t-d9e6ce);
    border-radius: 8px;
    align-items: flex-start;
    gap: 12px;
    padding: 18px;
    display: flex;
    box-shadow: 0 12px 40px color-mix(in srgb, var(--t-27451d) 14.9%, transparent)
}

    .toast > svg {
        color: var(--t-719554);
        width: 19px;
        height: 19px
    }

    .toast > p {
        color: var(--t-688450);
        flex: 1;
        font-size: 12px;
        line-height: 1.7
    }

    .toast > button {
        color: var(--t-a2b48f);
        padding: 1px
    }

@media(max-width: 959px) {
    .booking-layout {
        grid-template-columns: .78fr 1fr
    }

    .booking-intro {
        padding: 36px 25px
    }

        .booking-intro > h2 {
            font-size: 29px
        }

        .booking-intro > p {
            font-size: 10px
        }

        .booking-intro > div {
            font-size: 8px
        }

    .booking-form-wrap {
        padding: 49px 27px 30px
    }

    .sandbox-header {
        padding-inline: 28px
    }

    .sandbox-tabs {
        padding-inline: 17px
    }

        .sandbox-tabs > button {
            padding-inline: 15px;
            font-size: 9px
        }

    .sandbox-stage {
        padding: 22px
    }

        .sandbox-stage .demo-main {
            padding-inline: 16px
        }

        .sandbox-stage .asset-layout {
            grid-template-columns: 125px minmax(0,1fr);
            margin-inline: -16px
        }

        .sandbox-stage .asset-tree {
            padding-inline: 7px
        }

        .sandbox-stage .tree-row {
            gap: 5px;
            font-size: 7px
        }

        .sandbox-stage .tree-branches .tree-row {
            font-size: 6px
        }

        .sandbox-stage .tree-component {
            font-size: 5px
        }

        .sandbox-stage .tree-summary strong {
            font-size: 7px
        }

        .sandbox-stage .tree-summary > span {
            font-size: 6px
        }

        .sandbox-stage .asset-table-wrap {
            padding: 13px 9px 0
        }

        .sandbox-stage .asset-name strong {
            font-size: 9px
        }

        .sandbox-stage .asset-name small {
            font-size: 7px
        }

        .sandbox-stage .asset-table td {
            padding-inline: 4px
        }

        .sandbox-stage .status {
            padding: 3px 5px;
            font-size: 7px
        }

        .sandbox-stage .asset-type-icon {
            width: 26px
        }

        .sandbox-stage .mini-heading h3 {
            font-size: 19px
        }

        .sandbox-stage .mini-heading p {
            font-size: 9px
        }

        .sandbox-stage .mini-button {
            padding: 8px;
            font-size: 9px
        }

        .sandbox-stage .flow-node {
            width: 156px
        }

        .sandbox-stage .flow-connector {
            width: 31px
        }

        .sandbox-stage .flow-node-button {
            padding: 14px 12px
        }

            .sandbox-stage .flow-node-button > strong {
                font-size: 11px
            }

            .sandbox-stage .flow-node-button > small {
                max-width: 130px;
                font-size: 8px
            }

    .sandbox-footer {
        padding-inline: 22px
    }

        .sandbox-footer > span {
            font-size: 8px
        }

        .sandbox-footer > .text-link {
            font-size: 9px
        }
}

@media(max-width: 699px) {
    .modal {
        border-radius: 10px;
        max-width: calc(100vw - 24px);
        max-height: calc(100dvh - 28px)
    }

    .modal-close {
        width: 29px;
        height: 29px;
        top: 13px;
        right: 13px
    }

        .modal-close > svg {
            width: 16px
        }

    .standard-modal-content {
        padding: 45px 24px 29px
    }

        .standard-modal-content .modal-eyebrow {
            letter-spacing: 1px;
            font-size: 7px
        }

        .standard-modal-content > h2 {
            letter-spacing: -.9px;
            margin-block: 17px 15px;
            font-size: 29px
        }

        .standard-modal-content > p {
            font-size: 12px;
            line-height: 1.9
        }

        .standard-modal-content > h3 {
            font-size: 14px
        }

        .standard-modal-content .button {
            white-space: normal;
            text-align: left;
            gap: 16px;
            min-height: 47px;
            padding-inline: 17px;
            font-size: 10px
        }

        .standard-modal-content > .feature-list li {
            font-size: 11px
        }

    .form-grid {
        gap: 17px 12px;
        margin-top: 24px
    }

        .form-grid label {
            font-size: 10px
        }

        .form-grid input, .form-grid select, .form-grid textarea {
            padding: 11px;
            font-size: 16px
        }

        .form-grid input, .form-grid select {
            height: 45px
        }

        .form-grid select {
            padding-inline: 8px;
            font-size: 12px
        }

        .form-grid textarea {
            font-size: 13px
        }

    .booking-layout {
        min-height: 0;
        display: block
    }

    .booking-intro {
        padding: 26px 25px 29px
    }

        .booking-intro > .brand > span {
            font-size: 26px
        }

        .booking-intro > .brand > svg {
            width: 23px;
            height: 26px
        }

        .booking-intro > .eyebrow {
            margin-top: 29px;
            font-size: 7px
        }

        .booking-intro > h2 {
            margin-top: 17px;
            margin-bottom: 0;
            font-size: 29px
        }

            .booking-intro > h2 > br {
                display: none
            }

        .booking-intro > h2 {
            max-width: 260px
        }

        .booking-intro > p, .booking-intro > div, .booking-intro-bottom {
            display: none
        }

    .booking-modal .modal-close {
        background: color-mix(in srgb, var(--t-ffffff) 92.9%, transparent)
    }

    .booking-form-wrap {
        padding: 29px 25px
    }

        .booking-form-wrap > .modal-eyebrow {
            font-size: 7px
        }

        .booking-form-wrap h2 {
            margin-block: 12px 9px;
            font-size: 28px
        }

        .booking-form-wrap > p {
            font-size: 11px
        }

        .booking-form-wrap .form-grid {
            margin-top: 23px
        }

            .booking-form-wrap .form-grid label:not(.full-width) {
                grid-column: 1/-1
            }

            .booking-form-wrap .form-grid select {
                font-size: 13px
            }

        .booking-form-wrap .button {
            font-size: 11px
        }

    .form-disclaimer {
        text-align: center;
        font-size: 7px
    }

    .booking-success {
        min-height: 0;
        padding-block: 13px 10px
    }

    .success-icon {
        width: 55px;
        height: 55px;
        margin-bottom: 23px
    }

    .booking-success > h2 {
        margin-block: 15px;
        font-size: 25px
    }

    .booking-success > p {
        font-size: 11px
    }

    .booking-summary {
        margin-top: 12px;
        font-size: 10px
    }

    .sandbox-header {
        padding: 38px 20px 22px
    }

        .sandbox-header > .eyebrow {
            letter-spacing: .9px;
            margin-right: 12px;
            font-size: 6px
        }

        .sandbox-header > h2 {
            letter-spacing: -.8px;
            margin-top: 11px;
            font-size: 25px
        }

        .sandbox-header > p {
            font-size: 10px;
            line-height: 1.8
        }

    .sandbox-tabs {
        padding-inline: 10px
    }

        .sandbox-tabs > button {
            gap: 5px;
            padding: 13px 10px;
            font-size: 8px
        }

            .sandbox-tabs > button > svg {
                width: 13px
            }

    .sandbox-stage {
        padding: 12px 9px
    }

        .sandbox-stage .demo-topbar {
            padding: 10px
        }

        .sandbox-stage .demo-wordmark > svg {
            width: 12px;
            height: 14px
        }

        .sandbox-stage .demo-avatar {
            width: 21px;
            height: 21px;
            font-size: 6px
        }

        .sandbox-stage .demo-rail {
            gap: 10px;
            width: 33px
        }

            .sandbox-stage .demo-rail > button {
                width: 25px;
                height: 28px
            }

        .sandbox-stage .mini-breadcrumb {
            font-size: 6px
        }

        .sandbox-stage .mini-button {
            padding: 7px;
            font-size: 6px
        }

        .sandbox-stage .asset-layout {
            margin-inline: -9px;
            display: block
        }

        .sandbox-stage .asset-tree {
            display: none
        }

        .sandbox-stage .asset-table-wrap {
            padding: 12px 7px 0
        }

        .sandbox-stage .mini-search {
            max-width: 155px;
            padding: 7px 5px
        }

        .sandbox-stage .mini-filter {
            padding: 7px 3px
        }

        .sandbox-stage .asset-table th {
            padding: 8px 3px;
            font-size: 6px
        }

        .sandbox-stage .asset-table td {
            padding: 13px 3px
        }

        .sandbox-stage .asset-name {
            gap: 5px
        }

        .sandbox-stage .asset-type-icon > svg {
            width: 12px
        }

        .sandbox-stage .table-footer {
            padding: 13px 2px;
            font-size: 5px
        }

        .sandbox-stage .demo-bottom {
            padding: 8px;
            font-size: 5px
        }

        .sandbox-stage .kanban-column, .sandbox-stage .work-order-card {
            padding: 10px 8px
        }

            .sandbox-stage .work-order-card > div:first-child, .sandbox-stage .priority, .sandbox-stage .order-asset, .sandbox-stage .order-card-bottom > span:first-child {
                font-size: 6px
            }

        .sandbox-stage .alert-banner {
            padding: 9px 6px;
            font-size: 6px
        }

        .sandbox-stage .dashboard-toolbar > label > select, .sandbox-stage .widget-header > strong {
            font-size: 7px
        }

        .sandbox-stage .metric-widget {
            padding: 10px 7px
        }

        .sandbox-stage .health-donut {
            width: 84px;
            height: 84px;
            padding: 9px
        }

            .sandbox-stage .health-donut strong {
                font-size: 22px
            }

        .sandbox-stage .completion-content > strong {
            font-size: 24px
        }

        .sandbox-stage .bar-chart {
            height: 105px
        }

            .sandbox-stage .bar-chart > div > div {
                width: 18px
            }

            .sandbox-stage .bar-chart > div > span, .sandbox-stage .bar-chart small {
                font-size: 5px
            }

        .sandbox-stage .organization-tabs > button, .sandbox-stage .org-root strong {
            font-size: 7px
        }

        .sandbox-stage .flow-canvas {
            min-height: 230px
        }

        .sandbox-stage .flow-connector {
            width: 27px
        }

        .sandbox-stage .flow-node-button {
            padding: 13px 10px
        }

        .sandbox-stage .flow-palette > span, .sandbox-stage .flow-footer > span {
            font-size: 6px
        }

    .sandbox-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 13px;
        padding: 17px
    }

        .sandbox-footer > span {
            gap: 5px;
            font-size: 7px;
            line-height: 1.7
        }

            .sandbox-footer > span > svg {
                width: 11px
            }

        .sandbox-footer > .text-link {
            font-size: 10px
        }

    .solution-modal-visual {
        height: 150px
    }

        .solution-modal-visual > span {
            font-size: 10px;
            bottom: 20px;
            left: 25px
        }

    .solution-modal-content {
        padding-top: 28px
    }

    .solution-example > p {
        font-size: 11px
    }

    .solution-example > span {
        font-size: 7px
    }

    .article-content > .article-lead {
        font-size: 13px
    }

    .article-content > .muted-note {
        font-size: 9px
    }

    .article-takeaway {
        padding-left: 16px
    }

        .article-takeaway > strong {
            font-size: 14px
        }

        .article-takeaway > p {
            font-size: 11px
        }

    .evaluation-checklist > label {
        gap: 11px;
        font-size: 11px
    }

    .checklist-progress {
        font-size: 10px
    }

    .detail-grid {
        gap: 22px 15px
    }

        .detail-grid strong {
            font-size: 11px
        }

        .detail-grid > div > span {
            font-size: 8px
        }

    .detail-hierarchy {
        gap: 6px;
        font-size: 9px
    }

        .detail-hierarchy > svg {
            width: 13px
        }

    .inspection-list > label {
        font-size: 11px
    }

    .success-inline {
        font-size: 10px
    }

    .toast-region {
        width: calc(100vw - 32px);
        max-width: 400px;
        bottom: 16px;
        right: 16px
    }

    .toast {
        gap: 9px;
        padding: 15px
    }

        .toast > p {
            font-size: 11px
        }

    .sandbox-stage .demo-rail {
        display: none
    }

    .sandbox-stage .demo-wordmark {
        font-size: 15px
    }

    .sandbox-stage .demo-tenant-select select {
        max-width: 143px;
        font-size: 9px
    }

    .sandbox-stage .demo-main {
        padding: 16px 13px 0
    }

    .sandbox-stage .mini-breadcrumb {
        margin-bottom: 12px;
        font-size: 8px
    }

    .sandbox-stage .mini-heading {
        flex-wrap: wrap;
        gap: 10px
    }

        .sandbox-stage .mini-heading h3 {
            font-size: 17px
        }

        .sandbox-stage .mini-heading p {
            font-size: 9px
        }

    .sandbox-stage .mini-button {
        min-height: 31px;
        padding: 7px 9px;
        font-size: 9px
    }

    .sandbox-stage .asset-layout {
        margin-inline: -13px
    }

    .sandbox-stage .asset-table-wrap {
        padding-inline: 10px
    }

    .sandbox-stage .mini-search {
        max-width: none
    }

        .sandbox-stage .mini-search input {
            font-size: 10px
        }

    .sandbox-stage .mini-filter select {
        max-width: 92px;
        font-size: 8px
    }

    .sandbox-stage .asset-table th {
        padding-block: 10px;
        font-size: 9px
    }

    .sandbox-stage .asset-name strong {
        font-size: 10px
    }

    .sandbox-stage .asset-name small {
        font-size: 8px
    }

    .sandbox-stage .asset-type-icon {
        width: 23px;
        height: 29px
    }

    .sandbox-stage .status {
        padding: 4px 5px;
        font-size: 8px
    }

    .sandbox-stage .table-footer {
        font-size: 8px
    }

        .sandbox-stage .table-footer > span {
            display: none
        }

    .sandbox-stage .demo-bottom {
        gap: 12px;
        font-size: 7px
    }

    .sandbox-stage .kanban-board {
        grid-template-columns: repeat(3,minmax(153px,1fr))
    }

    .sandbox-stage .kanban-title > .status {
        font-size: 10px
    }

    .sandbox-stage .work-order-card > strong {
        font-size: 12px
    }

    .sandbox-stage .work-order-card > div:first-child, .sandbox-stage .priority, .sandbox-stage .order-asset, .sandbox-stage .order-card-bottom > span:first-child, .sandbox-stage .mini-bottom-note {
        font-size: 8px
    }

    .sandbox-stage .live-label {
        font-size: 6px
    }

    .sandbox-stage .operations-metrics > div > span {
        font-size: 8px
    }

    .sandbox-stage .operations-metrics strong {
        font-size: 25px
    }

        .sandbox-stage .operations-metrics strong > span {
            font-size: 7px
        }

    .sandbox-stage .operations-grid {
        grid-template-columns: 1fr;
        gap: 20px
    }

    .sandbox-stage .mini-subheading strong {
        font-size: 11px
    }

    .sandbox-stage .mini-subheading > span {
        font-size: 8px
    }

    .sandbox-stage .device-selector > button {
        padding: 7px 12px;
        font-size: 9px
    }

    .sandbox-stage .telemetry-reading > small {
        font-size: 8px
    }

    .sandbox-stage .telemetry-chart {
        height: 105px
    }

    .sandbox-stage .chart-labels {
        font-size: 7px
    }

    .sandbox-stage .event-feed {
        border-top: 1px solid var(--t-e6eddc);
        border-left: 0;
        padding-top: 15px;
        padding-left: 0
    }

    .sandbox-stage .feed-item > div > span {
        font-size: 10px
    }

    .sandbox-stage .feed-item small {
        font-size: 8px
    }

    .sandbox-stage .alert-banner {
        gap: 8px;
        font-size: 9px
    }

        .sandbox-stage .alert-banner > button {
            font-size: 8px
        }

    .sandbox-stage .dashboard-toolbar > label > select {
        font-size: 10px
    }

    .sandbox-stage .widget-header > strong {
        flex: 1;
        font-size: 10px
    }

    .sandbox-stage .widget-header > div > button {
        width: 27px;
        height: 29px
    }

    .sandbox-stage .donut-legend {
        font-size: 7px
    }

    .sandbox-stage .health-donut small {
        font-size: 8px
    }

    .sandbox-stage .completion-content > strong > small {
        font-size: 7px
    }

    .sandbox-stage .bar-chart small, .sandbox-stage .bar-chart > div > span {
        font-size: 6px
    }

    .sandbox-stage .number-widget > span:last-child {
        font-size: 9px
    }

    .sandbox-stage .organization-layout {
        grid-template-columns: 1fr;
        gap: 16px
    }

    .sandbox-stage .organization-tabs > button {
        font-size: 10px
    }

    .sandbox-stage .org-root {
        padding: 14px 10px
    }

        .sandbox-stage .org-root strong {
            font-size: 12px
        }

        .sandbox-stage .org-root small {
            font-size: 9px
        }

    .sandbox-stage .org-children strong {
        font-size: 11px
    }

    .sandbox-stage .org-children small {
        font-size: 8px
    }

    .sandbox-stage .org-children > button {
        padding: 12px
    }

    .sandbox-stage .org-scope-note {
        font-size: 8px
    }

    .sandbox-stage .access-panel {
        padding: 15px
    }

        .sandbox-stage .access-panel > .tree-label {
            font-size: 8px
        }

        .sandbox-stage .access-panel select {
            font-size: 11px
        }

        .sandbox-stage .access-panel > strong {
            font-size: 12px
        }

        .sandbox-stage .access-panel > p {
            font-size: 11px
        }

        .sandbox-stage .access-panel > div {
            font-size: 9px
        }

        .sandbox-stage .access-panel > small {
            font-size: 8px
        }

    .sandbox-stage .audit-event > button > span:nth-child(2) {
        font-size: 10px
    }

    .sandbox-stage .audit-event time {
        font-size: 7px
    }

    .sandbox-stage .audit-expanded {
        font-size: 9px
    }

    .sandbox-stage .flow-toolbar select {
        font-size: 10px
    }

    .sandbox-stage .flow-node {
        width: 167px
    }

    .sandbox-stage .flow-node-button > strong {
        font-size: 12px
    }

    .sandbox-stage .flow-node-button > small {
        max-width: 142px;
        font-size: 9px
    }

    .sandbox-stage .flow-node-type {
        font-size: 8px
    }

    .sandbox-stage .flow-palette {
        gap: 8px
    }

        .sandbox-stage .flow-palette > span {
            width: 100%;
            margin-bottom: 4px;
            font-size: 8px
        }

        .sandbox-stage .flow-palette > button {
            padding: 8px;
            font-size: 9px
        }

    .sandbox-stage .flow-footer > span {
        font-size: 8px
    }

    .sandbox-stage .flow-inspector > label {
        font-size: 9px
    }

    .sandbox-stage .flow-inspector input {
        width: 100px;
        font-size: 11px
    }

    .sandbox-stage .flow-inspector .mini-icon-button {
        width: 24px;
        height: 29px
    }

    .sandbox-stage .flow-result {
        font-size: 10px
    }

        .sandbox-stage .flow-result small {
            font-size: 8px
        }

    .component-group > summary > strong {
        font-size: 11px
    }

    .component-group > summary > span {
        font-size: 8px
    }

    .component-children {
        padding-left: 15px
    }
}

:root {
    color: var(--t-1d3028);
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    --ink: var(--t-1d3028);
    --green: var(--t-245b45);
    --deep-green: var(--t-164b36);
    --muted: var(--t-6b7770);
    --line: var(--t-e1e7e1);
    --font-heading: "Manrope","DM Sans",Arial,sans-serif;
    background: var(--t-ffffff);
    font-family: DM Sans,Arial,sans-serif
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 104px
}

body {
    min-width: 320px;
    margin: 0
}

button, input, select, textarea {
    font: inherit
}

button, a, input, select, textarea {
    -webkit-tap-highlight-color: transparent
}

button {
    cursor: pointer
}

    button:disabled {
        cursor: not-allowed;
        opacity: .45
    }

button, a {
    touch-action: manipulation
}

button {
    color: inherit
}

a {
    color: inherit;
    text-decoration: none
}

    button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
        outline-offset: 4px;
        outline: 2px solid var(--t-458d6c)
    }

input, select, textarea {
    accent-color: var(--green)
}

    input::placeholder, textarea::placeholder {
        color: var(--t-96a099);
        opacity: 1
    }

svg {
    flex-shrink: 0
}

::selection {
    color: var(--t-143d2b);
    background: var(--t-d9ebde)
}

.container {
    width: min(1280px,100% - 128px);
    max-width: 1280px;
    margin-inline: auto
}

.site-root {
    overflow: clip
}

.section-space {
    padding-block: 110px
}

.eyebrow, .modal-eyebrow {
    letter-spacing: 1.65px;
    color: var(--t-48745b);
    font-size: 10px;
    font-weight: 650;
    line-height: 1.6;
    display: inline-block
}

h1, h2, h3, p {
    margin: 0
}

h1, h2, h3 {
    font-family: var(--font-heading)
}

h2 {
    letter-spacing: -1.9px;
    font-size: clamp(35px,3.4vw,47px);
    font-weight: 550;
    line-height: 1.18
}

.button {
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: 6px;
    justify-content: center;
    align-items: center;
    gap: 25px;
    min-height: 51px;
    padding: 0 23px;
    font-size: 13px;
    font-weight: 550;
    transition: background .2s,transform .2s,box-shadow .2s;
    display: inline-flex
}

    .button svg, .text-link svg {
        transition: transform .2s
    }

    .button:hover:not(:disabled) svg, .text-link:hover svg {
        transform: translate(3px)
    }

.button-primary {
    background: var(--green);
    color: var(--t-ffffff)
}

    .button-primary:hover:not(:disabled) {
        background: var(--t-174830);
        box-shadow: 0 4px 14px color-mix(in srgb, var(--t-1e4c35) 9.4%, transparent)
    }

.button-outline {
    color: var(--green);
    background: var(--t-ffffff);
    border-color: var(--t-c9d6cd)
}

    .button-outline:hover {
        background: var(--t-f0f6f0)
    }

.button-light {
    color: var(--t-204f39);
    background: var(--t-f7faf3)
}

    .button-light:hover {
        background: var(--t-e2eede)
    }

.text-link {
    color: var(--green);
    text-align: left;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.6;
    display: inline-flex
}

.icon-button {
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    width: 38px;
    height: 38px;
    display: inline-flex
}

    .icon-button:hover {
        background: var(--t-e9f0e8)
    }

.small-green-dot {
    background: var(--t-4a9870);
    border-radius: 50%;
    flex-shrink: 0;
    width: 5px;
    height: 5px;
    display: inline-block
}

.brand {
    color: var(--green);
    vertical-align: middle;
    align-items: center;
    gap: 9px;
    display: inline-flex
}

    .brand > svg {
        width: 27px;
        height: 31px
    }

    .brand > span {
        font-family: var(--font-heading);
        letter-spacing: -1.5px;
        font-size: 31px;
        font-weight: 800;
        line-height: 1
    }

.brand-period {
    color: var(--t-437858)
}

.brand-light, .brand-light .brand-period {
    color: var(--t-f5f9ee)
}

.brand-small > svg {
    width: 21px;
    height: 23px
}

.brand-small > span {
    font-size: 23px
}

.skip-link {
    color: var(--green);
    z-index: 999;
    background: var(--t-ffffff);
    padding: 12px 20px;
    position: fixed;
    top: 10px;
    left: 10px;
    transform: translateY(-160%)
}

    .skip-link:focus {
        transform: translateY(0)
    }

.site-header {
    z-index: 50;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    background: color-mix(in srgb, var(--t-ffffff) 92.9%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--t-e7ece5) 50.2%, transparent);
    height: 84px;
    position: sticky;
    top: 0
}

.nav-container {
    justify-content: space-between;
    align-items: center;
    gap: 38px;
    width: min(1280px,100% - 128px);
    height: 100%;
    margin-inline: auto;
    display: flex
}

.logo-link {
    flex-shrink: 0;
    display: inline-flex
}

.desktop-nav {
    align-items: center;
    gap: 30px;
    margin-left: 48px;
    display: flex
}

.nav-link {
    color: var(--t-4d5851);
    align-items: center;
    gap: 7px;
    padding: 24px 0;
    font-size: 12px;
    font-weight: 500;
    transition: color .2s;
    display: inline-flex
}

    .nav-link:hover, .nav-link.active {
        color: var(--t-1f6544)
    }

        .nav-link.active > svg {
            transform: rotate(180deg)
        }

    .nav-link > svg {
        transition: transform .2s
    }

.nav-actions {
    align-items: center;
    gap: 25px;
    display: flex
}

.nav-demo-link {
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 550;
    display: inline-flex
}

    .nav-demo-link:hover {
        color: var(--t-37815a)
    }

.nav-cta {
    gap: 21px;
    min-height: 41px;
    padding-inline: 17px;
    font-size: 12px
}

.mobile-toggle, .mobile-nav {
    display: none
}

.nav-dropdown {
    border: 1px solid var(--line);
    top: 83px;
    background: var(--t-ffffff);
    border-radius: 0 0 12px 12px;
    grid-template-columns: 290px 1fr;
    gap: 30px;
    width: min(1040px,100vw - 128px);
    margin-inline: auto;
    padding: 32px;
    display: grid;
    position: absolute;
    inset-inline: 0;
    box-shadow: 0 24px 40px color-mix(in srgb, var(--t-1c3825) 11%, transparent)
}

.dropdown-intro {
    background: var(--t-f1f5ee);
    border-radius: 6px;
    padding: 25px
}

    .dropdown-intro .eyebrow {
        font-size: 8px
    }

    .dropdown-intro h3 {
        letter-spacing: -.8px;
        margin: 18px 0 30px;
        font-size: 24px;
        font-weight: 550;
        line-height: 1.4
    }

    .dropdown-intro .text-link {
        font-size: 11px
    }

.dropdown-links {
    grid-template-columns: 1fr 1fr;
    align-content: center;
    gap: 5px 15px;
    display: grid
}

    .dropdown-links > button {
        text-align: left;
        border-radius: 5px;
        align-items: center;
        gap: 12px;
        padding: 16px 8px;
        display: flex
    }

        .dropdown-links > button:hover {
            background: var(--t-f6f8f3)
        }

        .dropdown-links > button > svg:last-child {
            color: var(--t-7d9585);
            width: 13px;
            margin-left: auto
        }

.dropdown-icon {
    color: var(--t-54866a)
}

.dropdown-links strong {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    display: block
}

.dropdown-links small {
    color: var(--t-7f8d83);
    margin-top: 3px;
    font-size: 10px;
    line-height: 1.7;
    display: block
}

.hero {
    isolation: isolate;
    background: var(--t-edf4ed);
    height: min(740px,100svh - 160px);
    min-height: 640px;
    position: relative;
    overflow: hidden
}

.hero-image {
    z-index: -3;
    object-fit: cover;
    object-position: center 54%;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0
}

.hero-image-wash {
    z-index: -2;
    background: linear-gradient(90deg,color-mix(in srgb, var(--t-f0f6ef) 94.9%, transparent),color-mix(in srgb, var(--t-f0f6ef) 70.2%, transparent) 27%,color-mix(in srgb, var(--t-f0f6ef) 14.9%, transparent) 49%,transparent 66%);
    position: absolute;
    inset: 0
}

.hero-content {
    align-items: center;
    height: 100%;
    display: flex
}

.hero-copy {
    max-width: 530px;
    padding: 53px 0 65px
}

.hero-eyebrow {
    letter-spacing: 1.6px;
    color: var(--t-4b6b54);
    align-items: center;
    gap: 10px;
    font-size: 10px;
    display: flex
}

.eyebrow-dot {
    background: var(--t-40865b);
    border-radius: 50%;
    width: 6px;
    height: 6px
}

.hero h1 {
    letter-spacing: -4.4px;
    color: var(--t-1e3429);
    margin: 24px 0 26px;
    font-size: clamp(66px,5.65vw,74px);
    font-weight: 550;
    line-height: 1.06
}

    .hero h1 > span {
        color: var(--t-295e45)
    }

.hero-description {
    color: var(--t-607064);
    max-width: 390px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8
}

.hero-actions {
    align-items: center;
    gap: 28px;
    margin-top: 30px;
    display: flex
}

    .hero-actions .button {
        min-width: 170px
    }

.hero-tour-button {
    color: var(--t-304b37);
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 550;
    transition: color .2s;
    display: flex
}

    .hero-tour-button:hover {
        color: var(--t-548a61)
    }

    .hero-tour-button > svg {
        transition: transform .2s
    }

    .hero-tour-button:hover > svg {
        transform: scale(1.1)
    }

.industry-strip {
    background: var(--t-ffffff);
    border-bottom: 1px solid var(--t-e7ece5)
}

.industry-strip-inner {
    align-items: center;
    gap: 57px;
    min-height: 110px;
    display: flex
}

    .industry-strip-inner > p {
        color: var(--t-788371);
        border-right: 1px solid var(--t-e2e7df);
        flex-shrink: 0;
        padding-right: 36px;
        font-size: 11px;
        line-height: 1.7
    }

    .industry-strip-inner > div {
        flex: 1;
        justify-content: space-between;
        align-items: center;
        gap: 24px;
        display: flex
    }

.industry-strip button {
    color: var(--t-697369);
    font-family: var(--font-heading);
    letter-spacing: -.25px;
    white-space: nowrap;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 650;
    display: inline-flex
}

    .industry-strip button > svg {
        opacity: 0;
        width: 12px;
        transition: opacity .2s,transform .2s
    }

    .industry-strip button:hover {
        color: var(--green)
    }

        .industry-strip button:hover > svg {
            opacity: 1;
            transform: translate(2px,-2px)
        }

.section-heading h2 {
    margin: 17px 0 18px;
    font-size: clamp(32px,3vw,43px)
}

.section-heading p {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.8
}

.centered {
    text-align: center
}

.mobile-break {
    display: none
}

.platform-tabs {
    border-bottom: 1px solid var(--t-dfe7df);
    grid-template-columns: repeat(5,1fr);
    margin-top: 48px;
    display: grid
}

    .platform-tabs > button {
        color: var(--t-768076);
        white-space: nowrap;
        justify-content: center;
        align-items: center;
        gap: 9px;
        padding: 20px 6px;
        font-size: 11px;
        font-weight: 500;
        transition: color .2s,background .2s;
        display: flex;
        position: relative
    }

        .platform-tabs > button:after {
            content: "";
            background: var(--green);
            height: 2px;
            transition: transform .25s;
            position: absolute;
            bottom: -1px;
            left: 0;
            right: 0;
            transform: scaleX(0)
        }

        .platform-tabs > button.active {
            color: var(--green);
            font-weight: 650
        }

            .platform-tabs > button.active:after {
                transform: scaleX(1)
            }

        .platform-tabs > button:hover {
            color: var(--green);
            background: var(--t-f7f9f5)
        }

.platform-panel {
    grid-template-columns: .86fr 1.8fr;
    align-items: center;
    gap: 47px;
    min-width: 0;
    padding-top: 43px;
    display: grid
}

.platform-copy {
    padding: 18px 0
}

    .platform-copy .eyebrow {
        letter-spacing: 1.35px;
        font-size: 8px
    }

    .platform-copy h3 {
        letter-spacing: -1.3px;
        margin: 19px 0;
        font-size: clamp(27px,2.6vw,36px);
        font-weight: 550;
        line-height: 1.24
    }

    .platform-copy > p {
        color: var(--muted);
        max-width: 310px;
        font-size: 13px;
        line-height: 1.9
    }

.feature-list {
    flex-direction: column;
    gap: 13px;
    margin: 25px 0 30px;
    padding: 0;
    list-style: none;
    display: flex
}

    .feature-list li {
        color: var(--t-57695b);
        align-items: flex-start;
        gap: 9px;
        font-size: 11px;
        line-height: 1.7;
        display: flex
    }

        .feature-list li > svg {
            color: var(--t-497b59);
            margin-top: 2px
        }

.platform-copy .text-link {
    font-size: 11px
}

.platform-stage {
    background: var(--t-eef3ed);
    border-radius: 10px;
    min-width: 0;
    padding: 24px 22px 16px
}

.stage-caption {
    color: var(--t-82917f);
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 15px;
    font-size: 8px;
    display: flex
}

    .stage-caption > span, .stage-caption > button {
        align-items: center;
        gap: 7px;
        display: flex
    }

    .stage-caption > button {
        color: var(--t-54735c);
        font-weight: 550
    }

.tour-controls {
    background: var(--t-eff5eb);
    border-radius: 5px;
    justify-content: space-between;
    align-items: center;
    margin-top: 18px;
    padding: 14px 17px;
    display: flex
}

    .tour-controls > span {
        letter-spacing: 1px;
        color: var(--t-6d8570);
        align-items: center;
        gap: 10px;
        font-size: 9px;
        display: flex
    }

        .tour-controls > span > strong {
            color: var(--t-2a6648);
            margin-left: 8px
        }

    .tour-controls > div {
        align-items: center;
        gap: 15px;
        display: flex
    }

    .tour-controls button {
        color: var(--t-295b3e);
        align-items: center;
        gap: 8px;
        font-size: 11px;
        display: flex
    }

.automation-section {
    background: var(--t-f5f7f2);
    border-block: 1px solid var(--t-edf0e8)
}

.automation-layout {
    grid-template-columns: .82fr 1.4fr;
    align-items: center;
    gap: 88px;
    display: grid
}

.automation-copy h2, .enterprise-copy h2 {
    margin: 20px 0 23px
}

.automation-copy > p, .enterprise-copy > p {
    color: var(--t-768071);
    max-width: 355px;
    font-size: 14px;
    line-height: 1.85
}

.feature-list.spacious {
    gap: 14px;
    margin-block: 28px 31px
}

    .feature-list.spacious li {
        font-size: 12px
    }

.automation-visual {
    min-width: 0
}

.automation-footnote {
    color: var(--t-8b9688);
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    font-size: 10px;
    display: flex
}

.enterprise-layout {
    grid-template-columns: 1.13fr 1fr;
    align-items: center;
    gap: 99px;
    display: grid
}

.enterprise-copy > .eyebrow {
    letter-spacing: 1.35px;
    font-size: 9px
}

.enterprise-copy > p {
    max-width: 390px
}

.enterprise-accordion {
    margin-top: 27px;
    margin-bottom: 29px
}

.enterprise-accordion-item {
    border-bottom: 1px solid var(--t-e2e8df)
}

    .enterprise-accordion-item > button {
        color: var(--t-63705f);
        text-align: left;
        align-items: center;
        gap: 13px;
        width: 100%;
        padding: 20px 0;
        font-size: 13px;
        font-weight: 550;
        display: flex
    }

        .enterprise-accordion-item > button > svg:last-child {
            margin-left: auto;
            transition: transform .25s
        }

    .enterprise-accordion-item.active > button {
        color: var(--t-295c3c)
    }

        .enterprise-accordion-item.active > button > svg:last-child {
            transform: rotate(45deg)
        }

    .enterprise-accordion-item > div {
        overflow: hidden
    }

    .enterprise-accordion-item p {
        color: var(--t-7f897a);
        padding: 0 20px 20px 32px;
        font-size: 12px;
        line-height: 1.8
    }

.enterprise-visual {
    min-width: 0
}

.enterprise-diagram {
    background: var(--t-f3f6ef);
    border: 1px solid var(--t-e6ece0);
    border-radius: 10px;
    overflow: hidden
}

.diagram-topline {
    border-bottom: 1px solid var(--t-e4eadd);
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 19px 23px;
    display: flex
}

    .diagram-topline > span:first-child {
        letter-spacing: .8px;
        color: var(--t-607c56);
        align-items: center;
        gap: 7px;
        font-size: 8px;
        font-weight: 600;
        display: flex
    }

    .diagram-topline > span:last-child {
        letter-spacing: .7px;
        color: var(--t-96a48b);
        font-size: 7px
    }

.diagram-content {
    background-image: radial-gradient(color-mix(in srgb, var(--t-cbd5bf) 54.9%, transparent) .7px,transparent .7px);
    background-size: 18px 18px;
    min-height: 413px;
    padding: 37px 34px 23px
}

.organization-root-node {
    text-align: left;
    background: var(--t-ffffff);
    border: 1px solid var(--t-dbe4d3);
    border-radius: 7px;
    align-items: center;
    gap: 13px;
    width: max-content;
    max-width: 100%;
    margin-inline: auto;
    padding: 17px 20px;
    transition: border-color .2s;
    display: flex;
    box-shadow: 0 4px 9px color-mix(in srgb, var(--t-405334) 1.6%, transparent)
}

.org-node-icon {
    color: var(--t-38704b);
    justify-content: center;
    align-items: center;
    display: inline-flex
}

    .org-node-icon > svg {
        width: 26px;
        height: 29px
    }

.organization-root-node strong {
    font-size: 11px;
    font-weight: 650;
    display: block
}

.organization-root-node small {
    color: var(--t-91a087);
    margin-top: 4px;
    font-size: 8px;
    display: block
}

.organization-root-node > svg {
    color: var(--t-8da17f);
    margin-left: 15px
}

.org-connector {
    width: 52%;
    height: 40px;
    margin: 0 auto;
    position: relative
}

    .org-connector > span:first-child {
        border-left: 1px solid var(--t-c4d2b9);
        height: 20px;
        position: absolute;
        top: 0;
        left: 50%
    }

    .org-connector > span:nth-child(2) {
        border-top: 1px solid var(--t-c4d2b9);
        width: 100%;
        position: absolute;
        top: 20px;
        left: 0
    }

    .org-connector > span:nth-child(3) {
        border-inline: 1px solid var(--t-c4d2b9);
        position: absolute;
        inset: 20px 0 0
    }

.organization-nodes {
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    max-width: 405px;
    margin-inline: auto;
    display: grid
}

    .organization-nodes > button {
        text-align: left;
        background: var(--t-ffffff);
        border: 1px solid var(--t-dce5d6);
        border-radius: 6px;
        flex-direction: column;
        align-items: flex-start;
        padding: 17px 15px 14px;
        transition: border-color .2s,transform .2s;
        display: flex
    }

        .organization-nodes > button:hover {
            border-color: var(--t-89ab78);
            transform: translateY(-3px)
        }

.org-child-icon {
    color: var(--t-65885a);
    padding-bottom: 13px
}

.organization-nodes strong {
    font-size: 11px;
    font-weight: 600
}

.organization-nodes small {
    color: var(--t-8c9a83);
    margin-top: 4px;
    font-size: 9px
}

.node-ownership {
    color: var(--t-7a8d70);
    border-top: 1px solid var(--t-eff2e9);
    align-items: center;
    gap: 5px;
    width: 100%;
    margin-top: 16px;
    padding-top: 9px;
    font-size: 8px;
    display: flex
}

.node-selected {
    background: var(--t-fdfff9) !important;
    border-color: var(--t-8ea47a) !important
}

.org-component-lines {
    justify-content: space-around;
    height: 25px;
    display: flex
}

    .org-component-lines > span {
        border-left: 1px dashed var(--t-b7c7a9)
    }

.organization-leaves {
    justify-content: space-between;
    gap: 8px;
    margin-inline: 10px;
    display: flex
}

    .organization-leaves > span {
        color: var(--t-7f8f76);
        align-items: center;
        gap: 6px;
        font-size: 9px;
        display: flex
    }

.scope-summary {
    border-top: 1px solid var(--t-dce5d2);
    justify-content: space-between;
    align-items: center;
    margin-top: 26px;
    padding: 15px 1px 0;
    display: flex
}

    .scope-summary > span:first-child {
        letter-spacing: .8px;
        color: var(--t-91a183);
        font-size: 7px
    }

    .scope-summary strong {
        letter-spacing: 0;
        color: var(--t-657957);
        margin-top: 4px;
        font-size: 10px;
        font-weight: 550;
        display: block
    }

    .scope-summary > span:last-child {
        color: var(--t-67885c);
        align-items: center;
        gap: 8px;
        font-size: 10px;
        display: flex
    }

.diagram-bottom {
    color: var(--t-7c9170);
    background: var(--t-f0f4e9);
    border-top: 1px solid var(--t-e0e7d8);
    align-items: center;
    gap: 7px;
    padding: 14px 23px;
    font-size: 9px;
    display: flex
}

    .diagram-bottom > button {
        margin-left: auto
    }

.audit-demo-heading {
    align-items: center;
    gap: 13px;
    margin-bottom: 24px;
    display: flex
}

    .audit-demo-heading strong {
        letter-spacing: -.5px;
        font-size: 19px;
        font-weight: 550
    }

    .audit-demo-heading span:not(.org-node-icon) {
        color: var(--t-85967a);
        margin-top: 3px;
        font-size: 10px;
        display: block
    }

.enterprise-role-select {
    color: var(--t-6e805f);
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 10px;
    display: flex
}

    .enterprise-role-select select {
        background: var(--t-ffffff);
        border: 1px solid var(--t-d4dfc8);
        border-radius: 4px;
        padding: 9px 10px;
        font-size: 10px
    }

.enterprise-role-copy {
    color: var(--t-819473);
    margin: 13px 0 20px;
    font-size: 11px;
    line-height: 1.7
}

.enterprise-audit-list {
    border-top: 1px solid var(--t-dde6d3)
}

    .enterprise-audit-list > div {
        color: var(--t-74866a);
        border-bottom: 1px solid var(--t-e0e7d6);
        align-items: center;
        gap: 9px;
        padding: 14px 0;
        font-size: 9px;
        display: flex
    }

        .enterprise-audit-list > div > span {
            flex: 1
        }

        .enterprise-audit-list > div > time {
            opacity: .7;
            font-size: 8px
        }

.enterprise-audit-demo > .text-link {
    margin-top: 24px;
    font-size: 10px
}

.integration-center {
    background: var(--t-ffffff);
    border: 1px solid var(--t-dae3d1);
    border-radius: 7px;
    justify-content: center;
    width: max-content;
    margin: 4px auto 0;
    padding: 20px 30px;
    display: flex
}

    .integration-center .brand > span {
        font-size: 25px
    }

    .integration-center .brand > svg {
        width: 23px;
        height: 25px
    }

.connection-spokes {
    border-top: 0;
    width: 66%;
    height: 42px;
    margin: 0 auto;
    position: relative
}

    .connection-spokes:before {
        content: "";
        border-left: 1px solid var(--t-c4d4b5);
        height: 42px;
        position: absolute;
        top: 0;
        left: 50%
    }

    .connection-spokes:after {
        content: "";
        top: 20px;
        border: 1px solid var(--t-c4d4b5);
        border-bottom: 0;
        height: 22px;
        position: absolute;
        inset-inline: 0
    }

.connection-options {
    grid-template-columns: repeat(3,1fr);
    gap: 13px;
    display: grid
}

    .connection-options > button {
        color: var(--t-8a9f79);
        background: var(--t-ffffff);
        border: 1px solid var(--t-e0e7d6);
        border-radius: 6px;
        flex-direction: column;
        align-items: center;
        gap: 11px;
        padding: 16px 6px 10px;
        display: flex
    }

        .connection-options > button > span {
            color: var(--t-6f805f);
            font-size: 9px
        }

        .connection-options > button > svg:last-child {
            opacity: 0
        }

        .connection-options > button.active {
            color: var(--t-4b7d42);
            border-color: var(--t-90ab7b)
        }

            .connection-options > button.active > svg:last-child {
                opacity: 1
            }

.connection-detail {
    border-top: 1px solid var(--t-dfe7d4);
    margin-top: 27px;
    padding-top: 20px
}

    .connection-detail > span {
        color: var(--t-97a48b);
        letter-spacing: .8px;
        font-size: 7px;
        display: block
    }

    .connection-detail > strong {
        color: var(--t-647b53);
        margin-top: 10px;
        font-size: 14px;
        font-weight: 550;
        display: block
    }

    .connection-detail > p {
        color: var(--t-849776);
        margin-top: 8px;
        font-size: 11px;
        line-height: 1.8
    }

.resources-section {
    padding: 40px 0 100px
}

.resources-heading {
    justify-content: space-between;
    align-items: flex-end;
    gap: 30px;
    padding-bottom: 39px;
    display: flex
}

    .resources-heading h2 {
        letter-spacing: -1.2px;
        margin-top: 15px;
        font-size: 36px
    }

    .resources-heading > .text-link {
        padding-bottom: 5px;
        font-size: 11px
    }

.resource-grid {
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    display: grid
}

.resource-item {
    text-align: left;
    border-top: 1px solid var(--t-d5dfd2);
    width: 100%;
    padding-top: 29px;
    display: block
}

.resource-category {
    color: var(--t-779368);
    letter-spacing: 1.1px;
    align-items: center;
    gap: 11px;
    font-size: 8px;
    font-weight: 550;
    display: flex
}

.resource-item > div:nth-child(2) {
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin: 24px 0 17px;
    display: flex
}

.resource-item h3 {
    letter-spacing: -.9px;
    font-size: 29px;
    font-weight: 500;
    line-height: 1.35
}

.resource-arrow {
    color: var(--t-4b7950);
    border: 1px solid var(--t-dbe4d4);
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    width: 43px;
    height: 43px;
    transition: background .25s,color .25s,transform .25s;
    display: flex
}

.resource-item:hover .resource-arrow {
    background: var(--green);
    color: var(--t-ffffff);
    transform: translate(2px,-2px)
}

.resource-item > p {
    color: var(--t-7c8974);
    max-width: 380px;
    font-size: 13px;
    line-height: 1.8
}

.resource-item > .text-link {
    margin-top: 20px;
    font-size: 11px
}

.closing-section {
    isolation: isolate;
    color: var(--t-f7f9f1);
    background: var(--t-1c4f39);
    padding-block: 77px;
    position: relative;
    overflow: hidden
}

.closing-lines {
    z-index: -1;
    opacity: .4;
    background: repeating-linear-gradient(122deg,transparent 0 119px,color-mix(in srgb, var(--t-acdab2) 13.3%, transparent) 120px,transparent 121px);
    position: absolute;
    inset: 0;
    -webkit-mask-image: linear-gradient(90deg,transparent 25%,var(--t-000000) 100%);
    mask-image: linear-gradient(90deg,transparent 25%,var(--t-000000))
}

.closing-content {
    justify-content: space-between;
    align-items: center;
    gap: 50px;
    display: flex
}

    .closing-content .eyebrow {
        color: var(--t-abc79d);
        font-size: 9px
    }

    .closing-content h2 {
        letter-spacing: -2px;
        margin: 21px 0 18px;
        font-size: 49px;
        font-weight: 500;
        line-height: 1.18
    }

    .closing-content p {
        color: var(--t-aac5a0);
        font-size: 14px
    }

.closing-actions {
    flex-direction: column;
    align-items: center;
    gap: 18px;
    max-width: 355px;
    margin-right: 32px;
    display: flex
}

    .closing-actions .button {
        gap: 42px;
        min-height: 54px;
        padding-inline: 24px
    }

    .closing-actions > span {
        color: var(--t-9fbc94);
        text-align: center;
        font-size: 9px
    }

.site-footer {
    background: var(--t-fcfdf9);
    padding-top: 70px
}

.footer-main {
    grid-template-columns: 1.8fr 1.25fr 1.25fr 1fr;
    gap: 42px;
    display: grid
}

.footer-brand p {
    color: var(--t-88917f);
    margin-top: 20px;
    font-size: 12px;
    line-height: 1.9
}

.footer-back-top {
    color: var(--t-638053);
    align-items: center;
    gap: 8px;
    margin-top: 32px;
    font-size: 10px;
    display: flex
}

.footer-column h3 {
    color: var(--t-445839);
    margin-bottom: 22px;
    font-family: DM Sans,Arial,sans-serif;
    font-size: 11px;
    font-weight: 600
}

.footer-column button {
    color: var(--t-6d7b60);
    text-align: left;
    align-items: center;
    gap: 7px;
    margin-bottom: 13px;
    padding: 0;
    font-size: 11px;
    display: flex
}

    .footer-column button:hover, .footer-bottom button:hover {
        color: var(--green)
    }

.footer-bottom {
    color: var(--t-9aa18e);
    border-top: 1px solid var(--t-e2e7d9);
    justify-content: space-between;
    align-items: center;
    gap: 25px;
    margin-top: 47px;
    padding-block: 23px;
    font-size: 9px;
    display: flex
}

    .footer-bottom > div {
        align-items: center;
        gap: 22px;
        display: flex
    }

        .footer-bottom > div > span {
            align-items: center;
            gap: 5px;
            display: flex
        }

.footer-disclaimer {
    color: var(--t-a5ac9a);
    font-size: 8px
}

@media(min-width: 1600px) {
    .hero {
        height: 780px
    }

        .hero h1 {
            font-size: 91px
        }

    .hero-copy {
        max-width: 560px
    }
}

@media(max-width: 1199px) {
    .container, .nav-container {
        width: calc(100% - 80px)
    }

    .desktop-nav {
        gap: 22px;
        margin-left: 5px
    }

    .nav-container {
        gap: 20px
    }

    .nav-actions {
        gap: 18px
    }

    .hero {
        min-height: 610px
    }

        .hero h1 {
            font-size: 73px
        }

    .hero-copy {
        max-width: 460px
    }

    .hero-description {
        max-width: 355px;
        font-size: 15px
    }

    .hero-image-wash {
        background: linear-gradient(90deg,color-mix(in srgb, var(--t-f0f6ef) 98%, transparent),color-mix(in srgb, var(--t-f0f6ef) 85.1%, transparent) 27%,color-mix(in srgb, var(--t-f0f6ef) 26.7%, transparent) 51%,transparent 72%)
    }

    .industry-strip-inner {
        gap: 30px
    }

        .industry-strip-inner > p {
            padding-right: 23px;
            font-size: 10px
        }

    .industry-strip button {
        font-size: 11px
    }

    .industry-strip-inner > div {
        gap: 12px
    }

    .platform-panel {
        grid-template-columns: .78fr 1.6fr;
        gap: 28px
    }

    .platform-tabs > button {
        gap: 6px;
        font-size: 10px
    }

        .platform-tabs > button > svg {
            width: 15px
        }

    .platform-stage {
        padding: 18px 15px 13px
    }

    .platform-copy h3 {
        font-size: 30px
    }

    .platform-copy > p {
        font-size: 12px
    }

    .platform-copy .feature-list li {
        font-size: 10px
    }

    .stage-caption {
        gap: 5px;
        font-size: 7px
    }

    .automation-layout {
        grid-template-columns: .8fr 1.25fr;
        gap: 48px
    }

    .automation-copy > p, .enterprise-copy > p {
        font-size: 13px
    }

    .automation-copy .feature-list li {
        font-size: 10px
    }

    .enterprise-layout {
        gap: 55px
    }

    .enterprise-copy > .eyebrow {
        letter-spacing: 1px;
        font-size: 8px
    }

    .diagram-content {
        padding: 30px 22px 22px
    }

    .diagram-topline {
        padding-inline: 19px
    }

        .diagram-topline > span:last-child {
            display: none
        }

    .organization-nodes {
        gap: 18px
    }

    .organization-root-node {
        gap: 10px;
        padding: 16px
    }

        .organization-root-node strong {
            font-size: 10px
        }

        .organization-root-node > svg {
            margin-left: 3px
        }

    .enterprise-accordion-item > button {
        font-size: 12px
    }

    .enterprise-accordion-item p {
        font-size: 11px
    }

    .closing-content h2 {
        font-size: 44px
    }

    .closing-actions {
        margin-right: 0
    }

    .footer-main {
        gap: 30px
    }

    .footer-disclaimer {
        display: none
    }
}

@media(max-width: 959px) {
    .container, .nav-container {
        width: calc(100% - 64px)
    }

    .site-header {
        height: 74px
    }

    .desktop-nav {
        gap: 20px;
        margin-left: 0
    }

    .nav-demo-link {
        display: none
    }

    .nav-link {
        font-size: 11px
    }

    .nav-cta {
        gap: 12px;
        min-height: 39px;
        padding-inline: 14px;
        font-size: 11px
    }

    .brand > span {
        font-size: 28px
    }

    .brand > svg {
        width: 25px;
        height: 28px
    }

    .nav-dropdown {
        grid-template-columns: 220px 1fr;
        gap: 18px;
        width: calc(100vw - 64px);
        padding: 20px;
        top: 73px
    }

    .dropdown-intro {
        padding: 22px 18px
    }

        .dropdown-intro h3 {
            font-size: 21px
        }

    .dropdown-links {
        gap: 4px 10px
    }

        .dropdown-links > button {
            gap: 7px;
            padding: 12px 4px
        }

        .dropdown-links strong {
            font-size: 10px
        }

        .dropdown-links small {
            font-size: 8px
        }

        .dropdown-links > button > svg:last-child {
            display: none
        }

    .hero {
        height: 640px;
        min-height: 640px
    }

        .hero h1 {
            letter-spacing: -3.5px;
            font-size: 69px
        }

    .hero-copy {
        max-width: 425px
    }

    .hero-image {
        object-position: 60% center
    }

    .hero-image-wash {
        background: linear-gradient(90deg,color-mix(in srgb, var(--t-f0f6ef) 98%, transparent),color-mix(in srgb, var(--t-f0f6ef) 80%, transparent) 30%,color-mix(in srgb, var(--t-f0f6ef) 22%, transparent) 67%,transparent)
    }

    .industry-strip-inner {
        flex-direction: column;
        gap: 16px;
        padding-block: 23px
    }

        .industry-strip-inner > p {
            border: 0;
            padding: 0;
            font-size: 10px
        }

            .industry-strip-inner > p > br {
                display: none
            }

        .industry-strip-inner > p {
            white-space: pre
        }

        .industry-strip-inner > div {
            width: 100%
        }

    .industry-strip button {
        font-size: 12px
    }

    .section-space {
        padding-block: 80px
    }

    .section-heading h2 {
        font-size: 33px
    }

    .section-heading > p {
        font-size: 13px
    }

    .platform-tabs {
        margin-top: 37px
    }

        .platform-tabs > button {
            flex-direction: column;
            gap: 9px;
            padding: 16px 3px;
            font-size: 9px
        }

            .platform-tabs > button > svg {
                width: 18px;
                height: 18px
            }

    .platform-panel {
        grid-template-columns: 1fr;
        gap: 30px;
        padding-top: 29px
    }

    .platform-copy {
        grid-template-columns: 1fr 1fr;
        column-gap: 45px;
        padding: 0;
        display: grid
    }

        .platform-copy .eyebrow {
            grid-column: 1
        }

        .platform-copy h3 {
            grid-area: 2/1/span 2;
            margin: 15px 0 0;
            font-size: 32px
        }

        .platform-copy > p {
            grid-area: 1/2/span 2;
            max-width: none
        }

        .platform-copy .feature-list {
            grid-column: 2;
            gap: 9px;
            margin-block: 18px 15px
        }

        .platform-copy .text-link {
            grid-column: 1;
            margin-top: 16px
        }

    .platform-stage {
        padding: 25px 24px 17px
    }

    .stage-caption {
        font-size: 9px
    }

    .automation-layout {
        grid-template-columns: 1fr;
        gap: 40px
    }

    .automation-copy {
        max-width: 530px
    }

    h2 {
        font-size: 40px
    }

    .automation-copy > p {
        max-width: 410px;
        font-size: 14px
    }

    .automation-copy .feature-list li {
        font-size: 12px
    }

    .automation-visual {
        width: 100%
    }

    .enterprise-layout {
        grid-template-columns: 1fr 1fr;
        gap: 35px
    }

    .enterprise-copy h2 {
        font-size: 31px
    }

    .enterprise-copy > .eyebrow {
        letter-spacing: .5px;
        font-size: 7px
    }

    .enterprise-copy > p {
        font-size: 12px
    }

    .enterprise-accordion-item > button {
        gap: 8px;
        font-size: 10px
    }

        .enterprise-accordion-item > button > svg:first-child {
            width: 16px
        }

    .enterprise-accordion-item p {
        padding-left: 24px;
        font-size: 10px
    }

    .enterprise-accordion {
        margin-top: 20px
    }

    .diagram-content {
        min-height: 383px;
        padding: 30px 13px 18px
    }

    .organization-root-node {
        gap: 8px;
        padding: 12px
    }

        .organization-root-node .org-node-icon > svg {
            width: 19px;
            height: 23px
        }

        .organization-root-node strong {
            font-size: 8px
        }

        .organization-root-node small {
            font-size: 6px
        }

        .organization-root-node > svg {
            width: 12px
        }

    .organization-nodes {
        gap: 12px
    }

        .organization-nodes > button {
            padding: 14px 9px 10px
        }

        .organization-nodes strong {
            font-size: 8px
        }

        .organization-nodes small {
            font-size: 7px
        }

    .node-ownership {
        gap: 3px;
        font-size: 6px
    }

        .node-ownership svg {
            width: 9px
        }

    .organization-leaves {
        gap: 5px;
        margin: 0
    }

        .organization-leaves > span {
            gap: 3px;
            font-size: 7px
        }

            .organization-leaves > span > svg {
                width: 10px
            }

    .diagram-topline {
        padding: 17px 13px
    }

        .diagram-topline > span:first-child {
            font-size: 6px
        }

    .scope-summary {
        margin-top: 30px
    }

        .scope-summary > span:last-child, .scope-summary strong {
            font-size: 8px
        }

    .diagram-bottom {
        padding: 13px;
        font-size: 7px
    }

        .diagram-bottom > svg {
            width: 12px
        }

    .audit-demo-heading strong {
        font-size: 15px
    }

    .enterprise-role-select {
        flex-direction: column;
        align-items: flex-start;
        font-size: 9px
    }

    .enterprise-audit-list > div {
        font-size: 8px
    }

        .enterprise-audit-list > div > time {
            display: none
        }

    .connection-options {
        gap: 6px
    }

        .connection-options > button > span {
            font-size: 7px
        }

    .resources-heading h2 {
        font-size: 30px
    }

    .resources-heading > .text-link {
        font-size: 10px
    }

    .resource-grid {
        gap: 35px
    }

    .resource-item h3 {
        font-size: 24px
    }

    .resource-category {
        letter-spacing: .6px;
        gap: 7px;
        font-size: 7px
    }

    .resource-arrow {
        flex-shrink: 0;
        width: 34px;
        height: 34px
    }

        .resource-arrow svg {
            width: 19px
        }

    .resource-item > p {
        font-size: 12px
    }

    .closing-content {
        gap: 30px
    }

        .closing-content h2 {
            font-size: 37px
        }

        .closing-content .eyebrow {
            font-size: 7px
        }

    .closing-actions {
        max-width: 265px
    }

        .closing-actions .button {
            gap: 17px;
            min-height: 49px;
            font-size: 11px
        }

        .closing-actions > span {
            font-size: 8px
        }

    .footer-main {
        grid-template-columns: 1.4fr 1.3fr 1.3fr
    }

        .footer-main > .footer-column:last-child {
            display: none
        }
}

@media(max-width: 699px) {
    html {
        scroll-padding-top: 84px
    }

    .container, .nav-container {
        width: calc(100% - 40px)
    }

    .site-header {
        height: 70px
    }

    .nav-container {
        gap: 15px
    }

    .brand {
        gap: 7px
    }

        .brand > span {
            font-size: 29px
        }

        .brand > svg {
            width: 25px;
            height: 28px
        }

    .desktop-nav, .nav-dropdown {
        display: none
    }

    .nav-actions {
        margin-left: auto
    }

    .nav-cta {
        gap: 13px;
        min-height: 36px;
        padding-inline: 13px;
        font-size: 10px
    }

        .nav-cta > svg {
            width: 13px
        }

    .mobile-toggle {
        width: 30px;
        height: 36px;
        display: inline-flex
    }

    .mobile-nav {
        top: 69px;
        background: var(--t-ffffff);
        border-bottom: 1px solid var(--t-dbe5d4);
        flex-direction: column;
        max-height: calc(100dvh - 70px);
        padding-inline: 24px;
        display: flex;
        position: absolute;
        inset-inline: 0;
        overflow: auto;
        box-shadow: 0 15px 25px color-mix(in srgb, var(--t-284c26) 6.3%, transparent)
    }

        .mobile-nav > .eyebrow {
            margin-top: 24px;
            margin-bottom: 10px;
            font-size: 9px
        }

        .mobile-nav > button {
            text-align: left;
            border-bottom: 1px solid var(--t-f0f3ec);
            align-items: center;
            gap: 12px;
            padding: 14px 0;
            font-size: 13px;
            display: flex
        }

            .mobile-nav > button > svg:last-child {
                color: var(--t-91a780);
                margin-left: auto
            }

    .mobile-nav-actions {
        align-items: center;
        gap: 22px;
        padding-block: 23px;
        display: flex
    }

        .mobile-nav-actions > .button {
            min-height: 43px;
            font-size: 12px
        }

        .mobile-nav-actions > .text-link {
            font-size: 10px
        }

    .hero {
        height: calc(100svh - 70px);
        min-height: 755px;
        max-height: 875px
    }

    .hero-content {
        align-items: flex-start
    }

    .hero-copy {
        max-width: 100%;
        padding-top: 53px;
        padding-bottom: 0
    }

    .hero-eyebrow {
        letter-spacing: 1.4px;
        gap: 8px;
        font-size: 8px
    }

    .hero h1 {
        letter-spacing: -3.1px;
        margin: 23px 0 22px;
        font-size: clamp(57px,12.2vw,76px);
        line-height: 1.05
    }

    .hero-description {
        max-width: 323px;
        font-size: 13px;
        line-height: 1.85
    }

    .hero-actions {
        gap: 22px;
        margin-top: 24px
    }

        .hero-actions .button {
            gap: 25px;
            min-width: 150px;
            min-height: 47px;
            padding-inline: 19px;
            font-size: 12px
        }

    .hero-tour-button {
        gap: 8px;
        font-size: 11px
    }

        .hero-tour-button > svg {
            width: 22px
        }

    .hero-image {
        object-position: right bottom;
        object-fit: cover;
        width: 150%;
        max-width: none;
        height: 68%;
        top: auto;
        bottom: 0;
        left: -50%
    }

    .hero-image-wash {
        background: linear-gradient(var(--t-f0f6ef) 0% 35%,color-mix(in srgb, var(--t-f0f6ef) 92.9%, transparent) 47%,color-mix(in srgb, var(--t-f0f6ef) 20%, transparent) 67%,transparent 80%)
    }

    .industry-strip-inner {
        gap: 17px;
        padding-block: 25px
    }

        .industry-strip-inner > div {
            grid-template-columns: 1fr 1fr;
            gap: 17px 10px;
            display: grid
        }

    .industry-strip button {
        justify-content: center;
        font-size: 11px
    }

        .industry-strip button > svg {
            display: none
        }

    .industry-strip-inner > p {
        font-size: 10px
    }

        .industry-strip-inner > p > br:after {
            content: " "
        }

    .section-space {
        padding-block: 65px
    }

    .eyebrow {
        letter-spacing: 1.5px;
        font-size: 9px
    }

    h2 {
        letter-spacing: -1.5px;
        font-size: 36px
    }

    .section-heading h2 {
        letter-spacing: -1.3px;
        margin: 14px 0;
        font-size: 30px;
        line-height: 1.27
    }

    .section-heading p {
        max-width: 285px;
        margin-inline: auto;
        font-size: 12px
    }

    .mobile-break {
        display: block
    }

    .platform-tabs {
        scrollbar-width: thin;
        scrollbar-color: var(--t-c5d7be) transparent;
        gap: 13px;
        margin-top: 30px;
        padding-bottom: 1px;
        display: flex;
        overflow-x: auto
    }

        .platform-tabs > button {
            flex-direction: row;
            gap: 7px;
            min-width: max-content;
            padding: 16px 4px;
            font-size: 10px
        }

            .platform-tabs > button > svg {
                width: 15px;
                height: 15px
            }

    .platform-panel {
        gap: 27px;
        padding-top: 28px
    }

    .platform-copy {
        display: block
    }

        .platform-copy h3 {
            margin-block: 15px;
            font-size: 32px
        }

        .platform-copy > p {
            max-width: 360px;
            font-size: 13px
        }

        .platform-copy .feature-list {
            gap: 10px;
            margin-block: 22px
        }

            .platform-copy .feature-list li {
                font-size: 11px
            }

        .platform-copy .text-link {
            margin-top: 0;
            font-size: 12px
        }

    .platform-stage {
        margin-inline: -6px;
        padding: 12px 10px
    }

    .stage-caption {
        gap: 8px;
        margin-top: 12px;
        font-size: 7px
    }

        .stage-caption > span {
            gap: 5px
        }

        .stage-caption > button {
            gap: 3px;
            font-size: 7px
        }

    .tour-controls {
        gap: 8px;
        padding: 11px
    }

        .tour-controls > span {
            letter-spacing: .3px;
            gap: 5px;
            font-size: 7px
        }

            .tour-controls > span > strong {
                margin-left: 2px
            }

            .tour-controls > span > svg {
                display: none
            }

        .tour-controls > div {
            gap: 11px
        }

        .tour-controls button {
            gap: 3px;
            font-size: 9px
        }

    .automation-layout {
        gap: 32px
    }

    .automation-copy h2, .enterprise-copy h2 {
        margin-block: 17px 20px;
        font-size: 36px
    }

    .automation-copy > p, .enterprise-copy > p {
        max-width: 345px;
        font-size: 13px
    }

    .automation-copy .feature-list li {
        font-size: 11px
    }

    .automation-copy .text-link, .enterprise-copy > .text-link {
        font-size: 12px
    }

    .automation-visual {
        width: calc(100% + 6px);
        margin-inline: -3px
    }

    .automation-footnote {
        font-size: 8px
    }

    .enterprise-layout {
        grid-template-columns: 1fr;
        gap: 37px
    }

    .enterprise-visual {
        order: 2
    }

    .enterprise-copy > .eyebrow {
        letter-spacing: .8px;
        font-size: 8px
    }

    .enterprise-accordion {
        margin-block: 23px 26px
    }

    .enterprise-accordion-item > button {
        gap: 12px;
        padding-block: 18px;
        font-size: 12px
    }

        .enterprise-accordion-item > button > svg:first-child {
            width: 18px
        }

    .enterprise-accordion-item p {
        padding-left: 30px;
        font-size: 12px
    }

    .diagram-content {
        min-height: 380px;
        padding: 28px 20px 23px
    }

    .diagram-topline {
        padding-inline: 19px
    }

        .diagram-topline > span:first-child {
            font-size: 7px
        }

    .organization-root-node {
        gap: 10px;
        padding: 15px
    }

        .organization-root-node strong {
            font-size: 10px
        }

        .organization-root-node small {
            font-size: 8px
        }

        .organization-root-node .org-node-icon > svg {
            width: 23px;
            height: 26px
        }

    .organization-nodes {
        gap: 20px
    }

        .organization-nodes > button {
            padding: 17px 12px 11px
        }

        .organization-nodes strong {
            font-size: 10px
        }

        .organization-nodes small {
            font-size: 8px
        }

    .node-ownership {
        margin-top: 12px;
        font-size: 7px
    }

    .organization-leaves > span {
        gap: 5px;
        font-size: 8px
    }

        .organization-leaves > span > svg {
            width: 12px
        }

    .scope-summary strong {
        font-size: 10px
    }

    .scope-summary > span:last-child {
        font-size: 9px
    }

    .diagram-bottom {
        padding-inline: 19px;
        font-size: 8px
    }

    .audit-demo-heading strong {
        font-size: 18px
    }

    .enterprise-role-select {
        flex-direction: row;
        align-items: center
    }

    .enterprise-audit-list > div {
        font-size: 9px
    }

    .connection-options {
        gap: 10px
    }

        .connection-options > button > span {
            font-size: 8px
        }

    .resources-section {
        padding: 0 0 65px
    }

    .resources-heading {
        flex-direction: column;
        align-items: flex-start;
        gap: 19px;
        padding-bottom: 31px
    }

        .resources-heading h2 {
            margin-top: 12px;
            font-size: 29px
        }

    .resource-grid {
        grid-template-columns: 1fr;
        gap: 37px
    }

    .resource-item {
        padding-top: 23px
    }

    .resource-category {
        gap: 9px;
        font-size: 8px
    }

    .resource-item > div:nth-child(2) {
        margin: 20px 0 15px
    }

    .resource-item h3 {
        font-size: 27px
    }

    .resource-arrow {
        width: 39px;
        height: 39px
    }

    .resource-item > p {
        max-width: 290px;
        font-size: 12px
    }

    .resource-item > .text-link {
        margin-top: 17px
    }

    .closing-section {
        padding-block: 58px
    }

    .closing-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 32px
    }

        .closing-content h2 {
            letter-spacing: -1.5px;
            margin-block: 20px 17px;
            font-size: 37px
        }

        .closing-content .eyebrow {
            font-size: 8px
        }

        .closing-content p {
            font-size: 13px
        }

    .closing-actions {
        align-items: flex-start;
        gap: 15px;
        max-width: 100%
    }

        .closing-actions .button {
            gap: 29px;
            font-size: 12px
        }

        .closing-actions > span {
            font-size: 8px
        }

    .site-footer {
        padding-top: 47px
    }

    .footer-main {
        grid-template-columns: 1fr 1fr;
        gap: 38px 18px
    }

    .footer-brand {
        grid-column: 1/-1
    }

        .footer-brand p {
            margin-top: 16px;
            font-size: 12px
        }

    .footer-back-top {
        margin-top: 20px
    }

    .footer-column h3 {
        margin-bottom: 20px;
        font-size: 11px
    }

    .footer-column button {
        margin-bottom: 13px;
        font-size: 10px
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
        margin-top: 29px;
        padding-block: 22px;
        font-size: 8px
    }

        .footer-bottom > div {
            gap: 25px
        }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    *, :before, :after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important
    }
}

@media(max-width: 379px) {
    .nav-container {
        gap: 10px
    }

    .nav-cta {
        min-height: 34px;
        padding-inline: 11px
    }

        .nav-cta > svg {
            display: none
        }

    .brand > span {
        font-size: 27px
    }

    .brand > svg {
        width: 23px
    }

    .hero-actions {
        gap: 17px
    }

        .hero-actions .button {
            gap: 20px;
            min-width: 137px;
            padding-inline: 15px
        }

    .hero-tour-button {
        font-size: 10px
    }

    .flow-palette > span {
        width: 100%;
        margin-bottom: 3px
    }
}

@property --tw-rotate-x {
    syntax: "*";
    inherits: false
}

@property --tw-rotate-y {
    syntax: "*";
    inherits: false
}

@property --tw-rotate-z {
    syntax: "*";
    inherits: false
}

@property --tw-skew-x {
    syntax: "*";
    inherits: false
}

@property --tw-skew-y {
    syntax: "*";
    inherits: false
}

@property --tw-blur {
    syntax: "*";
    inherits: false
}

@property --tw-brightness {
    syntax: "*";
    inherits: false
}

@property --tw-contrast {
    syntax: "*";
    inherits: false
}

@property --tw-grayscale {
    syntax: "*";
    inherits: false
}

@property --tw-hue-rotate {
    syntax: "*";
    inherits: false
}

@property --tw-invert {
    syntax: "*";
    inherits: false
}

@property --tw-opacity {
    syntax: "*";
    inherits: false
}

@property --tw-saturate {
    syntax: "*";
    inherits: false
}

@property --tw-sepia {
    syntax: "*";
    inherits: false
}

@property --tw-drop-shadow {
    syntax: "*";
    inherits: false
}

@property --tw-drop-shadow-color {
    syntax: "*";
    inherits: false
}

@property --tw-drop-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%
}

@property --tw-drop-shadow-size {
    syntax: "*";
    inherits: false
}

@property --tw-ease {
    syntax: "*";
    inherits: false
}

/* ===== port additions: classes the deployed build does not define ===== */
.footer-brand .footer-mark {
    display: inline-flex;
    color: var(--t-86b5a3)
}

    .footer-brand .footer-mark svg {
        width: 32px;
        height: 35px
    }

.reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .7s ease,transform .7s ease
}

    .reveal.is-visible {
        opacity: 1;
        transform: none
    }

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

.hero-copy {
    max-width: 530px;
    padding: 50px 42px 57px;
    background-color: color-mix(in srgb, var(--t-ffffff) 85.1%, transparent);
    max-width: 700px;
}