.smart-table-page {
    --st-bg: #050b17;
    --st-panel: #0a1730;
    --st-panel-2: #0d1d38;
    --st-line: rgba(115, 153, 205, .22);
    --st-text: #f4f8ff;
    --st-muted: #91a9c8;
    --st-cyan: #00d9ff;
    --st-blue: #2477ff;
    --st-purple: #7657ff;
    background: var(--st-bg);
    color: var(--st-text);
    overflow: hidden;
}

.smart-table-page * {
    box-sizing: border-box;
}

.st-shell {
    width: min(1320px, calc(100% - 48px));
    margin: 0 auto;
}

.st-hero {
    position: relative;
    min-height: 790px;
    padding: 130px 0 95px;
    background:
        linear-gradient(rgba(55, 91, 142, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(55, 91, 142, .06) 1px, transparent 1px);
    background-size: 42px 42px;
}

.st-glow {
    position: absolute;
    border-radius: 999px;
    filter: blur(100px);
    pointer-events: none;
}

.st-glow-one {
    width: 420px;
    height: 420px;
    top: 60px;
    right: 8%;
    background: rgba(36, 119, 255, .18);
}

.st-glow-two {
    width: 300px;
    height: 300px;
    left: 12%;
    bottom: 10%;
    background: rgba(118, 87, 255, .12);
}

.st-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 54px;
    align-items: center;
}

.st-eyebrow {
    display: inline-block;
    margin-bottom: 22px;
    color: var(--st-cyan);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .18em;
}

.st-hero h1 {
    max-width: 650px;
    margin: 0;
    font-size: clamp(48px, 4vw, 64px);
    line-height: 1.08;
    letter-spacing: -.045em;
}

.st-hero h1 em {
    display: inline-block;
    white-space: nowrap;
    color: transparent;
    font-style: normal;
    background: linear-gradient(90deg, var(--st-cyan), #6e8cff, #a56cff);
    -webkit-background-clip: text;
    background-clip: text;
}

.st-hero-lead {
    max-width: 650px;
    margin: 28px 0 0;
    color: var(--st-muted);
    font-size: 16px;
    line-height: 1.9;
}

.st-actions {
    display: flex;
    gap: 14px;
    margin-top: 34px;
}

.st-btn {
    display: inline-flex;
    min-height: 48px;
    padding: 0 24px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--st-line);
    border-radius: 10px;
    color: var(--st-text);
    font-weight: 700;
    text-decoration: none;
}

.st-btn-primary {
    border-color: transparent;
    background: linear-gradient(100deg, var(--st-blue), var(--st-purple));
    box-shadow: 0 16px 40px rgba(36, 119, 255, .25);
}

.st-btn-secondary {
    background: rgba(12, 27, 51, .72);
}

.st-hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 30px;
    color: var(--st-muted);
    font-size: 13px;
}

.st-hero-points span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.st-hero-points i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--st-cyan);
    box-shadow: 0 0 10px var(--st-cyan);
}

.st-workbench {
    overflow: hidden;
    border: 1px solid var(--st-line);
    border-radius: 20px;
    background: rgba(7, 17, 34, .92);
    box-shadow: 0 35px 90px rgba(0, 0, 0, .42);
    transform: perspective(1300px) rotateY(-3deg) rotateX(1deg);
}

.st-window-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    min-height: 54px;
    padding: 0 18px;
    align-items: center;
    border-bottom: 1px solid var(--st-line);
    color: #dceaff;
    font-size: 13px;
}

.st-window-dots {
    display: flex;
    gap: 6px;
}

.st-window-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #29405e;
}

.st-live {
    justify-self: end;
    color: #6ee7b7;
    font-size: 11px;
}

.st-dashboard {
    display: grid;
    grid-template-columns: 118px 1fr;
    min-height: 440px;
}

.st-sidebar {
    display: flex;
    padding: 20px 12px;
    flex-direction: column;
    gap: 8px;
    border-right: 1px solid var(--st-line);
    background: #071326;
}

.st-sidebar span {
    padding: 10px 12px;
    border-radius: 7px;
    color: #7891b2;
    font-size: 11px;
}

.st-sidebar .is-active {
    color: #fff;
    background: linear-gradient(90deg, rgba(36,119,255,.35), rgba(36,119,255,.08));
}

.st-data-area {
    padding: 20px;
}

.st-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.st-metrics article {
    padding: 15px;
    border: 1px solid var(--st-line);
    border-radius: 10px;
    background: var(--st-panel);
}

.st-metrics small,
.st-metrics span {
    display: block;
    color: var(--st-muted);
    font-size: 10px;
}

.st-metrics strong {
    display: block;
    margin: 9px 0 5px;
    font-size: 19px;
}

.st-metrics .st-up {
    color: #6ee7b7;
}

.st-metrics .st-warning {
    color: #fbbf24;
}

.st-table-card {
    margin-top: 14px;
    border: 1px solid var(--st-line);
    border-radius: 11px;
    background: var(--st-panel);
}

.st-table-toolbar {
    display: flex;
    padding: 14px 16px;
    justify-content: space-between;
    border-bottom: 1px solid var(--st-line);
    font-size: 11px;
}

.st-table-toolbar span {
    color: var(--st-cyan);
}

.st-table-row {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr .8fr;
    min-width: 500px;
    border-bottom: 1px solid rgba(115,153,205,.12);
}

.st-table-row:last-child {
    border-bottom: 0;
}

.st-table-row span {
    padding: 13px 14px;
    color: #a8bbd4;
    font-size: 10px;
}

.st-table-head span {
    color: #6f89aa;
    background: rgba(255,255,255,.018);
}

.st-tag {
    display: inline-flex;
    padding: 4px 7px;
    border-radius: 5px;
    font-size: 9px;
}

.st-tag.success {
    color: #6ee7b7;
    background: rgba(16,185,129,.12);
}

.st-tag.waiting {
    color: #fbbf24;
    background: rgba(245,158,11,.12);
}

.st-tag.error {
    color: #fb7185;
    background: rgba(244,63,94,.12);
}

.st-flow {
    display: flex;
    margin-top: 16px;
    padding: 13px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px dashed rgba(0,217,255,.26);
    border-radius: 9px;
    color: #86a0c1;
    font-size: 10px;
}

.st-flow i {
    color: var(--st-cyan);
    font-style: normal;
}

.st-definition {
    padding: 105px 0;
    text-align: center;
    background: #08162c;
}

.st-definition h2 {
    margin: 0;
    font-size: clamp(32px, 4vw, 52px);
}

.st-definition p {
    max-width: 820px;
    margin: 24px auto 0;
    color: var(--st-muted);
    font-size: 17px;
    line-height: 2;
}

html[data-theme="light"] .smart-table-page {
    --st-bg: #f5f8fd;
    --st-panel: #ffffff;
    --st-panel-2: #eef4fc;
    --st-line: rgba(39, 79, 130, .17);
    --st-text: #10213b;
    --st-muted: #5e7593;
}

html[data-theme="light"] .st-hero {
    background-color: #f5f8fd;
}

html[data-theme="light"] .st-workbench {
    background: rgba(255,255,255,.96);
    box-shadow: 0 30px 75px rgba(35, 69, 112, .16);
}

html[data-theme="light"] .st-sidebar {
    background: #edf4fd;
}

html[data-theme="light"] .st-definition {
    background: #eaf2fc;
}

html[data-theme="light"] .st-btn-secondary {
    background: #fff;
}

@media (max-width: 980px) {
    .st-hero {
        padding-top: 95px;
    }

    .st-hero-grid {
        grid-template-columns: 1fr;
        gap: 52px;
    }

    .st-workbench {
        transform: none;
    }
}

@media (max-width: 680px) {
    .st-shell {
        width: min(100% - 28px, 1320px);
    }

    .st-hero {
        min-height: auto;
        padding: 78px 0 70px;
    }

    .st-hero h1 {
        font-size: 43px;
    }

    .st-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .st-dashboard {
        grid-template-columns: 1fr;
    }

    .st-sidebar {
        flex-direction: row;
        overflow-x: auto;
        border-right: 0;
        border-bottom: 1px solid var(--st-line);
    }

    .st-sidebar span {
        white-space: nowrap;
    }

    .st-data-area {
        overflow: hidden;
        padding: 14px;
    }

    .st-metrics {
        grid-template-columns: 1fr;
    }

    .st-table-card {
        overflow-x: auto;
    }

    .st-flow {
        align-items: stretch;
        flex-direction: column;
        text-align: center;
    }

    .st-flow i {
        transform: rotate(90deg);
    }

    .st-definition {
        padding: 75px 0;
    }
}
.st-comparison,
.st-capabilities {
    padding: 110px 0;
}

.st-comparison {
    background: var(--st-bg);
}

.st-capabilities {
    background: #08162c;
}

.st-section-heading {
    max-width: 850px;
    margin: 0 auto 55px;
    text-align: center;
}

.st-section-heading h2 {
    margin: 0;
    font-size: clamp(34px, 4vw, 54px);
    line-height: 1.18;
    letter-spacing: -.035em;
}

.st-section-heading p {
    margin: 22px auto 0;
    color: var(--st-muted);
    font-size: 16px;
    line-height: 1.9;
}

.st-heading-left {
    max-width: 900px;
    margin-left: 0;
    text-align: left;
}

.st-heading-left p {
    margin-left: 0;
}

.st-compare-grid {
    display: grid;
    grid-template-columns: 1fr 110px 1fr;
    align-items: center;
}

.st-compare-card {
    min-height: 390px;
    padding: 34px;
    border: 1px solid var(--st-line);
    border-radius: 18px;
}

.st-compare-old {
    background: rgba(255,255,255,.018);
}

.st-compare-new {
    border-color: rgba(0,217,255,.36);
    background:
        linear-gradient(145deg, rgba(36,119,255,.14), rgba(118,87,255,.06)),
        var(--st-panel);
    box-shadow: 0 26px 70px rgba(0,0,0,.22);
}

.st-compare-title {
    display: flex;
    padding-bottom: 24px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--st-line);
}

.st-compare-title span {
    color: var(--st-muted);
    font-size: 13px;
    font-weight: 700;
}

.st-compare-title b {
    font-size: 20px;
}

.st-compare-new .st-compare-title b {
    color: var(--st-cyan);
}

.st-compare-card ul,
.st-feature-copy ul {
    padding: 0;
    margin: 25px 0 0;
    list-style: none;
}

.st-compare-card li {
    display: flex;
    padding: 15px 0;
    align-items: center;
    gap: 15px;
    border-bottom: 1px solid rgba(115,153,205,.12);
    color: var(--st-muted);
}

.st-compare-card li:last-child {
    border-bottom: 0;
}

.st-compare-card li i {
    display: inline-flex;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(255,255,255,.04);
    color: #6f89aa;
    font-size: 10px;
    font-style: normal;
}

.st-compare-new li i {
    color: var(--st-cyan);
    background: rgba(0,217,255,.1);
}

.st-upgrade-arrow {
    text-align: center;
}

.st-upgrade-arrow span {
    display: block;
    color: var(--st-muted);
    font-size: 11px;
}

.st-upgrade-arrow strong {
    display: block;
    margin-top: 8px;
    color: var(--st-cyan);
    font-size: 38px;
}

.st-feature-stack {
    display: grid;
    gap: 28px;
}

.st-feature {
    display: grid;
    grid-template-columns: .78fr 1.22fr;
    min-height: 430px;
    overflow: hidden;
    border: 1px solid var(--st-line);
    border-radius: 22px;
    background: var(--st-panel);
}

.st-feature-reverse {
    grid-template-columns: 1.22fr .78fr;
}

.st-feature-reverse .st-feature-copy {
    grid-column: 2;
    grid-row: 1;
}

.st-feature-reverse .st-demo {
    grid-column: 1;
    grid-row: 1;
}

.st-feature-copy {
    padding: 58px 48px;
    align-self: center;
}

.st-feature-number {
    display: inline-flex;
    width: 38px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0,217,255,.28);
    border-radius: 999px;
    color: var(--st-cyan);
    font-size: 11px;
    font-weight: 800;
}

.st-feature-copy h3 {
    margin: 22px 0 0;
    font-size: 32px;
}

.st-feature-copy p {
    margin: 18px 0 0;
    color: var(--st-muted);
    line-height: 1.9;
}

.st-feature-copy li {
    position: relative;
    padding: 7px 0 7px 19px;
    color: #b8c9de;
    font-size: 13px;
}

.st-feature-copy li::before {
    position: absolute;
    top: 13px;
    left: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--st-cyan);
    content: "";
}

.st-demo {
    margin: 34px;
    padding: 28px;
    align-self: stretch;
    border: 1px solid var(--st-line);
    border-radius: 16px;
    background:
        linear-gradient(rgba(55,91,142,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(55,91,142,.045) 1px, transparent 1px),
        #071326;
    background-size: 28px 28px;
}

.st-demo-bar,
.st-task-head,
.st-chart-head {
    display: flex;
    margin-bottom: 24px;
    align-items: center;
    justify-content: space-between;
}

.st-demo-bar span,
.st-task-head span {
    color: #6ee7b7;
    font-size: 11px;
}

.st-form-demo label {
    display: block;
    margin-bottom: 16px;
}

.st-form-demo label span {
    display: block;
    margin-bottom: 7px;
    color: var(--st-muted);
    font-size: 11px;
}

.st-form-demo label b {
    display: block;
    padding: 13px 14px;
    border: 1px solid var(--st-line);
    border-radius: 8px;
    background: rgba(7,19,38,.75);
    font-size: 13px;
}

.st-form-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.st-form-status {
    margin-top: 18px;
    padding: 14px;
    border: 1px solid rgba(16,185,129,.25);
    border-radius: 9px;
    color: #6ee7b7;
    background: rgba(16,185,129,.08);
    font-size: 12px;
}

.st-form-status i {
    margin-right: 8px;
    font-style: normal;
}

.st-rule-demo {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.st-rule-line {
    display: grid;
    grid-template-columns: 45px 1fr;
    align-items: center;
    border: 1px solid var(--st-line);
    border-radius: 10px;
    background: rgba(7,19,38,.78);
}

.st-rule-line span {
    padding: 16px;
    color: var(--st-cyan);
    text-align: center;
    border-right: 1px solid var(--st-line);
}

.st-rule-line b {
    padding: 16px;
    font-size: 13px;
}

.st-rule-path {
    width: 1px;
    height: 28px;
    margin-left: 22px;
    background: var(--st-cyan);
}

.st-rule-result {
    display: flex;
    padding: 18px;
    align-items: center;
    gap: 15px;
    border-radius: 10px;
    background: linear-gradient(90deg, rgba(244,63,94,.12), rgba(36,119,255,.1));
}

.st-rule-result i {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fb7185;
    background: rgba(244,63,94,.15);
    font-style: normal;
}

.st-rule-result span {
    display: block;
    margin-top: 5px;
    color: var(--st-muted);
    font-size: 11px;
}

.st-task-item {
    display: flex;
    margin-top: 12px;
    padding: 16px;
    align-items: center;
    gap: 14px;
    border: 1px solid var(--st-line);
    border-radius: 10px;
    background: rgba(7,19,38,.75);
}

.st-task-item > b {
    display: inline-flex;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    font-size: 11px;
}

.st-task-item .high {
    color: #fb7185;
    background: rgba(244,63,94,.14);
}

.st-task-item .middle {
    color: #fbbf24;
    background: rgba(245,158,11,.14);
}

.st-task-item span {
    display: block;
    margin-top: 5px;
    color: var(--st-muted);
    font-size: 10px;
}

.st-task-progress {
    display: grid;
    grid-template-columns: auto 1fr auto;
    margin-top: 25px;
    align-items: center;
    gap: 14px;
    color: var(--st-muted);
    font-size: 11px;
}

.st-task-progress > div {
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.07);
}

.st-task-progress i {
    display: block;
    width: 76%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--st-blue), var(--st-cyan));
}

.st-chart-head span {
    display: block;
    color: var(--st-muted);
    font-size: 11px;
}

.st-chart-head strong {
    display: block;
    margin-top: 7px;
    font-size: 24px;
}

.st-chart-head b {
    padding: 7px 10px;
    border: 1px solid var(--st-line);
    border-radius: 7px;
    color: var(--st-muted);
    font-size: 10px;
}

.st-bars {
    display: flex;
    height: 210px;
    padding: 20px 15px 0;
    align-items: flex-end;
    justify-content: space-around;
    gap: 12px;
    border-bottom: 1px solid var(--st-line);
}

.st-bars i {
    width: 32px;
    border-radius: 6px 6px 0 0;
    background: linear-gradient(180deg, rgba(36,119,255,.85), rgba(36,119,255,.18));
}

.st-bars .is-current {
    background: linear-gradient(180deg, var(--st-cyan), rgba(0,217,255,.2));
    box-shadow: 0 0 24px rgba(0,217,255,.2);
}

.st-chart-labels {
    display: flex;
    padding: 12px 14px 0;
    justify-content: space-between;
    color: var(--st-muted);
    font-size: 10px;
}

html[data-theme="light"] .st-capabilities {
    background: #eaf2fc;
}

html[data-theme="light"] .st-demo {
    background-color: #f7faff;
}

html[data-theme="light"] .st-form-demo label b,
html[data-theme="light"] .st-rule-line,
html[data-theme="light"] .st-task-item {
    background: rgba(255,255,255,.86);
}

@media (max-width: 880px) {
    .st-compare-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .st-upgrade-arrow strong {
        transform: rotate(90deg);
    }

    .st-feature,
    .st-feature-reverse {
        grid-template-columns: 1fr;
    }

    .st-feature-reverse .st-feature-copy,
    .st-feature-reverse .st-demo {
        grid-column: auto;
        grid-row: auto;
    }

    .st-feature-reverse .st-feature-copy {
        order: 1;
    }

    .st-feature-reverse .st-demo {
        order: 2;
    }
}

@media (max-width: 680px) {
    .st-comparison,
    .st-capabilities {
        padding: 78px 0;
    }

    .st-compare-card,
    .st-feature-copy,
    .st-demo {
        padding: 25px 20px;
    }

    .st-demo {
        margin: 0 14px 18px;
    }

    .st-form-columns {
        grid-template-columns: 1fr;
    }

    .st-feature-copy h3 {
        font-size: 27px;
    }
}
/* Smart Table: scenarios and data workflow */
.st-scenarios,
.st-process {
    padding: 112px 0;
}

.st-scenarios {
    background:
        radial-gradient(circle at 78% 35%, rgba(48, 91, 255, .13), transparent 34%),
        #050d1b;
}

.st-process {
    background: #091a33;
    border-top: 1px solid rgba(117, 174, 255, .16);
}

.st-section-heading-center {
    max-width: 850px;
    margin: 0 auto 54px;
    text-align: center;
}

.st-section-heading-center h2 {
    margin: 14px 0 18px;
    color: #f5f8ff;
    font-size: clamp(34px, 4vw, 52px);
    line-height: 1.18;
}

.st-section-heading-center p {
    margin: 0;
    color: #8fb3e8;
    font-size: 16px;
    line-height: 1.9;
}

.st-scenario-layout {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 24px;
    align-items: stretch;
}

.st-scenario-nav,
.st-scenario-screen {
    border: 1px solid rgba(91, 155, 235, .28);
    border-radius: 22px;
    background: rgba(7, 20, 40, .88);
}

.st-scenario-nav {
    padding: 14px;
}

.st-scenario-tab {
    display: flex;
    gap: 15px;
    align-items: center;
    padding: 20px 18px;
    border: 1px solid transparent;
    border-radius: 14px;
}

.st-scenario-tab + .st-scenario-tab {
    margin-top: 7px;
}

.st-scenario-tab.is-active {
    border-color: rgba(0, 212, 255, .45);
    background: linear-gradient(135deg, rgba(0, 183, 255, .14), rgba(87, 79, 255, .15));
}

.st-scenario-tab > span {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    border-radius: 10px;
    background: rgba(17, 47, 83, .75);
    color: #00ddff;
    font-size: 12px;
    font-weight: 800;
}

.st-scenario-tab h3 {
    margin: 0 0 5px;
    color: #f4f8ff;
    font-size: 17px;
}

.st-scenario-tab p {
    margin: 0;
    color: #7699c8;
    font-size: 13px;
    line-height: 1.55;
}

.st-scenario-screen {
    padding: 28px;
    background:
        linear-gradient(rgba(20, 54, 94, .15) 1px, transparent 1px),
        linear-gradient(90deg, rgba(20, 54, 94, .15) 1px, transparent 1px),
        rgba(7, 20, 40, .92);
    background-size: 38px 38px;
}

.st-screen-top {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-start;
}

.st-screen-kicker {
    color: #6d94c8;
    font-size: 12px;
}

.st-screen-top h3 {
    margin: 7px 0 0;
    color: #fff;
    font-size: 21px;
}

.st-live-status {
    color: #35e9aa;
    font-size: 12px;
}

.st-scenario-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 13px;
    margin: 25px 0 18px;
}

.st-scenario-metrics > div {
    padding: 16px;
    border: 1px solid rgba(91, 155, 235, .24);
    border-radius: 12px;
    background: rgba(9, 27, 53, .92);
}

.st-scenario-metrics small {
    display: block;
    margin-bottom: 8px;
    color: #7196c7;
}

.st-scenario-metrics strong {
    color: #f7fbff;
    font-size: 20px;
}

.st-scenario-table {
    overflow: hidden;
    border: 1px solid rgba(91, 155, 235, .24);
    border-radius: 13px;
    background: rgba(5, 17, 34, .78);
}

.st-scenario-row {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr .8fr;
    gap: 12px;
    padding: 15px 17px;
    color: #a9c5e9;
    font-size: 13px;
}

.st-scenario-row + .st-scenario-row {
    border-top: 1px solid rgba(91, 155, 235, .16);
}

.st-scenario-row-head {
    color: #698dbb;
    background: rgba(16, 43, 79, .48);
}

.st-scenario-row strong {
    color: #eaf3ff;
}

.st-state {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 6px;
    font-style: normal;
    font-size: 11px;
}

.st-state-success {
    color: #42e6a6;
    background: rgba(20, 179, 116, .15);
}

.st-state-warning {
    color: #ffc849;
    background: rgba(255, 177, 0, .14);
}

.st-state-danger {
    color: #ff6b8a;
    background: rgba(255, 49, 94, .14);
}

.st-screen-note {
    margin: 17px 0 0;
    color: #6185b4;
    font-size: 12px;
}

.st-process-track {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 12px;
}

.st-process-node {
    min-height: 245px;
    padding: 24px 20px;
    border: 1px solid rgba(91, 155, 235, .25);
    border-radius: 18px;
    background: rgba(7, 22, 44, .72);
}

.st-process-node > span {
    color: #00d8ff;
    font-size: 12px;
    font-weight: 800;
}

.st-process-node i {
    display: grid;
    width: 50px;
    height: 50px;
    margin: 23px 0 20px;
    place-items: center;
    border-radius: 15px;
    background: linear-gradient(135deg, rgba(0, 210, 255, .2), rgba(103, 80, 255, .22));
    color: #8cecff;
    font-style: normal;
    font-size: 13px;
}

.st-process-node h3 {
    margin: 0 0 12px;
    color: #f4f8ff;
    font-size: 19px;
}

.st-process-node p {
    margin: 0;
    color: #7fa4d5;
    font-size: 13px;
    line-height: 1.75;
}

.st-process-arrow {
    color: #00d9ff;
    font-size: 24px;
}

.st-process-boundary {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    margin-top: 28px;
    padding: 20px 24px;
    border: 1px solid rgba(255, 190, 65, .26);
    border-radius: 14px;
    background: rgba(255, 173, 29, .06);
}

.st-process-boundary strong {
    flex: 0 0 auto;
    color: #ffc85a;
}

.st-process-boundary p {
    margin: 0;
    color: #95b3d9;
    font-size: 13px;
    line-height: 1.75;
}

html[data-theme="light"] .st-scenarios {
    background: #f7faff;
}

html[data-theme="light"] .st-process {
    background: #edf4ff;
}

html[data-theme="light"] .st-section-heading-center h2,
html[data-theme="light"] .st-scenario-tab h3,
html[data-theme="light"] .st-screen-top h3,
html[data-theme="light"] .st-process-node h3 {
    color: #10233f;
}

html[data-theme="light"] .st-section-heading-center p,
html[data-theme="light"] .st-scenario-tab p,
html[data-theme="light"] .st-process-node p,
html[data-theme="light"] .st-process-boundary p {
    color: #536f94;
}

html[data-theme="light"] .st-scenario-nav,
html[data-theme="light"] .st-scenario-screen,
html[data-theme="light"] .st-process-node {
    border-color: #c9d9ed;
    background-color: rgba(255, 255, 255, .94);
}

@media (max-width: 1080px) {
    .st-scenario-layout {
        grid-template-columns: 1fr;
    }

    .st-scenario-nav {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .st-scenario-tab + .st-scenario-tab {
        margin-top: 0;
    }

    .st-process-track {
        grid-template-columns: repeat(5, 1fr);
    }

    .st-process-arrow {
        display: none;
    }
}

@media (max-width: 760px) {
    .st-scenarios,
    .st-process {
        padding: 78px 0;
    }

    .st-scenario-nav,
    .st-scenario-metrics {
        grid-template-columns: 1fr;
    }

    .st-scenario-screen {
        padding: 20px;
        overflow-x: auto;
    }

    .st-scenario-table {
        min-width: 650px;
    }

    .st-process-track {
        grid-template-columns: 1fr;
    }

    .st-process-node {
        min-height: auto;
    }

    .st-process-boundary {
        display: block;
    }

    .st-process-boundary p {
        margin-top: 10px;
    }
}
/* Smart Table wide-screen width fix */
.st-scenarios > .container,
.st-process > .container {
    width: min(1240px, calc(100% - 48px));
    max-width: 1240px;
    margin-right: auto;
    margin-left: auto;
}

.st-scenario-layout {
    width: 100%;
}

.st-process-track {
    width: 100%;
}

@media (min-width: 1081px) {
    .st-process-track {
        grid-template-columns:
            minmax(0, 1fr) 28px
            minmax(0, 1fr) 28px
            minmax(0, 1fr) 28px
            minmax(0, 1fr) 28px
            minmax(0, 1fr);
        gap: 8px;
    }

    .st-process-node {
        min-width: 0;
        padding: 23px 18px;
    }

    .st-process-arrow {
        text-align: center;
    }
}

@media (max-width: 680px) {
    .st-scenarios > .container,
    .st-process > .container {
        width: min(100% - 32px, 1240px);
    }
}
/* Smart Table: delivery, boundary, FAQ and final CTA */
.st-delivery,
.st-boundaries,
.st-faq,
.st-final-cta {
    padding: 110px 0;
}

.st-delivery,
.st-faq {
    background: #050d1b;
}

.st-boundaries,
.st-final-cta {
    background: #091a33;
    border-top: 1px solid rgba(117, 174, 255, .14);
}

.st-delivery > .container,
.st-boundaries > .container,
.st-faq > .container,
.st-final-cta > .container {
    width: min(1240px, calc(100% - 48px));
    max-width: 1240px;
    margin-right: auto;
    margin-left: auto;
}

.st-delivery-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.st-delivery-grid::before {
    position: absolute;
    top: 42px;
    right: 12%;
    left: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #00d8ff, #7357ff, transparent);
    content: "";
}

.st-delivery-grid article {
    position: relative;
    min-height: 245px;
    padding: 31px 26px;
    border: 1px solid rgba(91, 155, 235, .25);
    border-radius: 18px;
    background: rgba(8, 23, 45, .94);
}

.st-delivery-grid span {
    position: relative;
    z-index: 1;
    display: grid;
    width: 48px;
    height: 48px;
    margin-bottom: 37px;
    place-items: center;
    border: 1px solid rgba(0, 216, 255, .45);
    border-radius: 50%;
    background: #08172d;
    color: #00ddff;
    font-size: 12px;
    font-weight: 800;
}

.st-delivery-grid h3 {
    margin: 0 0 14px;
    color: #f4f8ff;
    font-size: 20px;
}

.st-delivery-grid p {
    margin: 0;
    color: #7fa4d5;
    font-size: 14px;
    line-height: 1.8;
}

.st-boundaries .st-section-heading {
    max-width: 790px;
    margin-bottom: 45px;
}

.st-boundaries .st-section-heading h2,
.st-faq .st-section-heading h2,
.st-cta-panel h2 {
    margin: 13px 0 17px;
    color: #f5f8ff;
    font-size: clamp(34px, 4vw, 50px);
    line-height: 1.2;
}

.st-boundaries .st-section-heading p,
.st-faq .st-section-heading p,
.st-cta-panel p {
    color: #89addd;
    line-height: 1.85;
}

.st-boundary-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

.st-boundary-card {
    padding: 31px;
    border: 1px solid rgba(91, 155, 235, .24);
    border-radius: 20px;
    background: rgba(7, 21, 42, .78);
}

.st-boundary-fit {
    border-color: rgba(33, 221, 157, .32);
}

.st-boundary-evaluate {
    border-color: rgba(255, 190, 65, .32);
}

.st-boundary-card-head {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-bottom: 22px;
}

.st-boundary-card-head span {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 11px;
    font-weight: 900;
}

.st-boundary-fit .st-boundary-card-head span {
    color: #35e7a5;
    background: rgba(33, 221, 157, .13);
}

.st-boundary-evaluate .st-boundary-card-head span {
    color: #ffc84d;
    background: rgba(255, 185, 40, .13);
}

.st-boundary-card h3 {
    margin: 0;
    color: #f5f8ff;
    font-size: 22px;
}

.st-boundary-card ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.st-boundary-card li {
    position: relative;
    padding: 14px 0 14px 25px;
    border-top: 1px solid rgba(91, 155, 235, .14);
    color: #9dbbe2;
    line-height: 1.65;
}

.st-boundary-card li::before {
    position: absolute;
    top: 21px;
    left: 2px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00d8ff;
    content: "";
}

.st-boundary-summary {
    margin: 24px 0 0;
    padding: 18px 22px;
    border-radius: 13px;
    background: rgba(24, 56, 97, .52);
    color: #9bb9df;
    font-size: 14px;
    line-height: 1.7;
}

.st-faq-layout {
    display: grid;
    grid-template-columns: .78fr 1.22fr;
    gap: 75px;
    align-items: start;
}

.st-faq .st-section-heading {
    position: sticky;
    top: 125px;
}

.st-text-link {
    display: inline-block;
    margin-top: 18px;
    color: #00d9ff;
    text-decoration: none;
}

.st-faq-list details {
    border-bottom: 1px solid rgba(91, 155, 235, .23);
}

.st-faq-list details:first-child {
    border-top: 1px solid rgba(91, 155, 235, .23);
}

.st-faq-list summary {
    position: relative;
    padding: 25px 48px 25px 0;
    color: #eef5ff;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.st-faq-list summary::-webkit-details-marker {
    display: none;
}

.st-faq-list summary::after {
    position: absolute;
    top: 22px;
    right: 4px;
    color: #00d9ff;
    font-size: 24px;
    font-weight: 400;
    content: "+";
}

.st-faq-list details[open] summary::after {
    content: "−";
}

.st-faq-list details p {
    margin: -5px 48px 24px 0;
    color: #86a9d7;
    font-size: 14px;
    line-height: 1.85;
}

.st-cta-panel {
    display: flex;
    justify-content: space-between;
    gap: 50px;
    align-items: center;
    padding: 55px 60px;
    overflow: hidden;
    border: 1px solid rgba(0, 215, 255, .32);
    border-radius: 25px;
    background:
        radial-gradient(circle at 90% 15%, rgba(101, 75, 255, .28), transparent 31%),
        linear-gradient(135deg, rgba(8, 33, 65, .96), rgba(13, 24, 58, .96));
}

.st-cta-panel > div:first-child {
    max-width: 740px;
}

.st-cta-panel h2 {
    font-size: clamp(32px, 3.5vw, 48px);
}

.st-cta-panel p {
    margin: 0;
}

.st-cta-actions {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 12px;
    min-width: 190px;
}

html[data-theme="light"] .st-delivery,
html[data-theme="light"] .st-faq {
    background: #f8fbff;
}

html[data-theme="light"] .st-boundaries,
html[data-theme="light"] .st-final-cta {
    background: #edf4ff;
}

html[data-theme="light"] .st-delivery-grid article,
html[data-theme="light"] .st-boundary-card,
html[data-theme="light"] .st-cta-panel {
    border-color: #c8d9ee;
    background: #fff;
}

html[data-theme="light"] .st-delivery-grid span {
    background: #eef7ff;
}

html[data-theme="light"] .st-delivery-grid h3,
html[data-theme="light"] .st-boundaries .st-section-heading h2,
html[data-theme="light"] .st-boundary-card h3,
html[data-theme="light"] .st-faq .st-section-heading h2,
html[data-theme="light"] .st-faq-list summary,
html[data-theme="light"] .st-cta-panel h2 {
    color: #10233f;
}

html[data-theme="light"] .st-delivery-grid p,
html[data-theme="light"] .st-boundaries .st-section-heading p,
html[data-theme="light"] .st-boundary-card li,
html[data-theme="light"] .st-boundary-summary,
html[data-theme="light"] .st-faq .st-section-heading p,
html[data-theme="light"] .st-faq-list details p,
html[data-theme="light"] .st-cta-panel p {
    color: #536f94;
}

@media (max-width: 980px) {
    .st-delivery-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .st-delivery-grid::before {
        display: none;
    }

    .st-faq-layout {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .st-faq .st-section-heading {
        position: static;
    }

    .st-cta-panel {
        display: block;
    }

    .st-cta-actions {
        align-items: flex-start;
        margin-top: 28px;
    }
}

@media (max-width: 680px) {
    .st-delivery,
    .st-boundaries,
    .st-faq,
    .st-final-cta {
        padding: 76px 0;
    }

    .st-delivery > .container,
    .st-boundaries > .container,
    .st-faq > .container,
    .st-final-cta > .container {
        width: min(100% - 32px, 1240px);
    }

    .st-delivery-grid,
    .st-boundary-columns {
        grid-template-columns: 1fr;
    }

    .st-delivery-grid article {
        min-height: auto;
    }

    .st-cta-panel {
        padding: 34px 24px;
    }

    .st-faq-list summary {
        font-size: 16px;
    }
}
/* Smart Table CTA button fix */
.st-cta-actions .button {
    display: inline-flex;
    min-height: 48px;
    padding: 12px 22px;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 10px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease;
}

.st-cta-actions .button:hover {
    transform: translateY(-2px);
}

.st-cta-actions .button-primary {
    border-color: #397dff;
    background: linear-gradient(135deg, #1677ff, #7557ff);
    box-shadow: 0 12px 28px rgba(43, 99, 255, .25);
}

.st-cta-actions .button-secondary {
    border-color: rgba(122, 175, 242, .35);
    background: rgba(8, 25, 50, .72);
}

.st-cta-actions .button-secondary:hover {
    border-color: #00d8ff;
    background: rgba(10, 39, 73, .92);
}

html[data-theme="light"] .st-cta-actions .button-secondary {
    border-color: #b7cce7;
    background: #eef5ff;
    color: #18375f;
}

@media (max-width: 680px) {
    .st-cta-actions {
        width: 100%;
    }

    .st-cta-actions .button {
        width: 100%;
    }
}
/* Smart Table interactive scenario tabs */
.st-scenario-panels {
    min-width: 0;
}

.st-scenario-screen[hidden] {
    display: none !important;
}

button.st-scenario-tab {
    width: 100%;
    border: 1px solid transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

button.st-scenario-tab:hover {
    background: rgba(19, 60, 108, .42);
}

button.st-scenario-tab:focus-visible {
    outline: 2px solid #00d8ff;
    outline-offset: 2px;
}

.st-scenario-tab > span:last-child {
    display: block;
    min-width: 0;
}

.st-scenario-tab strong {
    display: block;
    margin-bottom: 5px;
    color: #f4f8ff;
    font-size: 17px;
    line-height: 1.35;
}

.st-scenario-tab small {
    display: block;
    color: #7699c8;
    font-size: 13px;
    line-height: 1.55;
}

.st-scenario-screen {
    height: 100%;
    animation: stPanelEnter .28s ease both;
}

@keyframes stPanelEnter {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

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

html[data-theme="light"] .st-scenario-tab strong {
    color: #10233f;
}

html[data-theme="light"] button.st-scenario-tab:hover {
    background: #eef6ff;
}

@media (max-width: 1080px) {
    .st-scenario-panels {
        min-width: 0;
    }
}

@media (max-width: 760px) {
    .st-scenario-nav {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
    }

    button.st-scenario-tab {
        min-width: 255px;
        scroll-snap-align: start;
    }
}
/* Smart Table scenario tab layout fix */
button.st-scenario-tab {
    display: flex;
    width: 100%;
    gap: 15px;
    align-items: center;
    padding: 20px 18px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: transparent;
    color: inherit;
}

button.st-scenario-tab.is-active {
    border-color: rgba(0, 212, 255, .55);
    background: linear-gradient(
        135deg,
        rgba(0, 183, 255, .14),
        rgba(87, 79, 255, .15)
    );
}

button.st-scenario-tab > span:first-child {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    border-radius: 10px;
    background: rgba(17, 47, 83, .9);
    color: #00ddff;
    font-size: 12px;
    font-weight: 800;
}

button.st-scenario-tab > span:last-child {
    display: block;
    width: auto;
    height: auto;
    min-width: 0;
    flex: 1 1 auto;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}

button.st-scenario-tab strong,
button.st-scenario-tab small {
    width: auto;
    max-width: none;
    white-space: normal;
    word-break: normal;
}

button.st-scenario-tab strong {
    display: block;
    margin: 0 0 5px;
    color: #f4f8ff;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
}

button.st-scenario-tab small {
    display: block;
    color: #7699c8;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.55;
}

html[data-theme="light"] button.st-scenario-tab {
    background: transparent;
}

html[data-theme="light"] button.st-scenario-tab.is-active {
    border-color: #31a4dc;
    background: #e8f5ff;
}

html[data-theme="light"] button.st-scenario-tab strong {
    color: #10233f;
}
/* Smart Table scenario text align fix */
button.st-scenario-tab {
    justify-content: flex-start;
    text-align: left !important;
}

button.st-scenario-tab > span:last-child {
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left !important;
}

button.st-scenario-tab strong,
button.st-scenario-tab small {
    margin-right: 0;
    margin-left: 0;
    text-align: left !important;
}