:root {
    --g-blue: #0b57d0;
    --g-blue-hover: #0842a0;
    --g-text: #202124;
    --g-muted: #5f6368;
    --g-border: #dadce0;
    --g-bg: #ffffff;
    --g-soft: #f8fafd;
    --g-soft-blue: #e8f0fe;
    --g-green: #188038;
}

.integration-page {
    background: var(--g-bg);
    color: var(--g-text);
    font-family: Arial, Helvetica, sans-serif;
}

.integration-page * {
    box-sizing: border-box;
}

.integration-page .container {
    width: min(1240px, calc(100% - 48px));
    margin: 0 auto;
}

.integration-hero {
    padding: 88px 0 72px;
    background: #fff;
}

.integration-hero .integration-kicker {
    display: none;
}

.integration-hero h1 {
    max-width: 920px;
    margin: 0;
    font-size: clamp(46px, 6vw, 76px);
    line-height: 1.04;
    letter-spacing: -.045em;
    font-weight: 500;
    color: var(--g-text);
    text-align: left;
}

.integration-lead {
    max-width: 760px;
    margin: 28px 0 0;
    font-size: 20px;
    line-height: 1.55;
    color: var(--g-muted);
    text-align: left;
}

.integration-hero-actions {
    display: flex;
    gap: 14px;
    margin-top: 34px;
    flex-wrap: wrap;
}

.integration-google-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 24px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.integration-google-btn-primary {
    background: var(--g-blue);
    color: #fff;
    border: 1px solid var(--g-blue);
}

.integration-google-btn-primary:hover {
    background: var(--g-blue-hover);
    border-color: var(--g-blue-hover);
}

.integration-google-btn-secondary {
    background: #fff;
    color: var(--g-blue);
    border: 1px solid var(--g-border);
}

.integration-google-btn-secondary:hover {
    background: #f8fafd;
}

.integration-schema {
    margin: 72px 0 0;
    display: grid;
    grid-template-columns: 1fr 170px 1fr;
    align-items: center;
    gap: 24px;
}

.integration-node {
    min-height: 170px;
    padding: 32px;
    border: 1px solid var(--g-border);
    border-radius: 28px;
    background: #fff;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--g-text);
}

.integration-node span {
    font-size: 28px;
    line-height: 1.15;
    font-weight: 500;
    color: var(--g-text);
}

.integration-node small {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--g-muted);
}

.integration-node-1c {
    background: var(--g-soft);
}

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

.integration-flow-line {
    height: 1px;
    flex: 1;
    background: var(--g-border);
}

.integration-flow-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--g-blue);
}

.integration-flow b {
    margin: 0 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--g-muted);
}

/* choice section */

.integration-choice-section {
    padding: 84px 0 96px;
    background: var(--g-soft);
}

.integration-choice-head {
    max-width: 760px;
    margin-bottom: 42px;
}

.integration-choice-head h2 {
    margin: 0;
    font-size: clamp(38px, 4vw, 56px);
    line-height: 1.08;
    letter-spacing: -.035em;
    font-weight: 500;
    color: var(--g-text);
}

.integration-choice-head p {
    margin: 18px 0 0;
    font-size: 18px;
    line-height: 1.55;
    color: var(--g-muted);
}

.integration-choice-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.integration-choice-card {
    min-height: 230px;
    padding: 26px;
    border: 1px solid var(--g-border);
    border-radius: 24px;
    background: #fff;
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.integration-choice-card:hover {
    border-color: #b7c6e3;
    box-shadow: 0 4px 18px rgba(60,64,67,.12);
    transform: translateY(-2px);
}

.integration-choice-card.active {
    border: 2px solid var(--g-blue);
    background: #fff;
}

.integration-choice-card small {
    display: block;
    color: var(--g-muted);
    font-size: 13px;
    margin-bottom: 36px;
}

.integration-choice-card h3 {
    margin: 0 0 12px;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 500;
    color: var(--g-text);
}

.integration-choice-card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--g-muted);
}

.integration-choice-detail {
    margin-top: 24px;
    padding: 28px 32px;
    border-radius: 24px;
    background: var(--g-soft-blue);
}

.integration-choice-detail h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 500;
    color: var(--g-text);
}

.integration-choice-detail p {
    margin: 10px 0 0;
    max-width: 850px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--g-muted);
}

/* temporarily normalize old sections */

.integration-demo-section,
.integration-log-section,
.integration-info-section,
.integration-scenarios-section,
.integration-erp-section,
.integration-protocols-section,
.integration-cta-section {
    background: #fff;
    color: var(--g-text);
}

.integration-demo-section,
.integration-log-section,
.integration-info-section,
.integration-scenarios-section,
.integration-erp-section,
.integration-protocols-section,
.integration-cta-section {
    padding: 88px 0;
}

.integration-section-head h2 {
    color: var(--g-text);
    font-weight: 500;
}

.integration-section-head .integration-kicker {
    color: var(--g-muted);
}

@media (max-width: 1000px) {
    .integration-choice-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 800px) {
    .integration-schema {
        grid-template-columns: 1fr;
    }

    .integration-flow {
        width: 180px;
        margin: 0 auto;
        transform: rotate(90deg);
    }
}

@media (max-width: 620px) {
    .integration-page .container {
        width: min(100% - 28px, 1240px);
    }

    .integration-hero {
        padding: 58px 0 50px;
    }

    .integration-choice-grid {
        grid-template-columns: 1fr;
    }

    .integration-choice-card {
        min-height: 0;
    }
}

/* =========================================================
   DEMO — Google-style light UI
   ========================================================= */

.integration-demo-section {
    padding: 96px 0;
    background: #fff;
    color: var(--g-text);
}

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

.integration-section-head .integration-kicker {
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--g-muted);
}

.integration-section-head h2 {
    margin: 0;
    font-size: clamp(38px, 4vw, 56px);
    line-height: 1.08;
    letter-spacing: -.035em;
    font-weight: 500;
    color: var(--g-text);
}

.integration-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid var(--g-border);
    border-radius: 999px;
    background: #fff;
    color: var(--g-muted);
    font-size: 14px;
    white-space: nowrap;
}

.integration-status span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--g-green);
}


/* tabs */

.integration-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.integration-tabs button {
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid var(--g-border);
    border-radius: 999px;
    background: #fff;
    color: var(--g-text);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

.integration-tabs button:hover {
    background: var(--g-soft);
}

.integration-tabs button.active {
    border-color: var(--g-blue);
    background: var(--g-soft-blue);
    color: var(--g-blue);
}


/* panels */

.integration-panel {
    display: none;
}

.integration-panel.active {
    display: block;
}


/* 1C → site */

.integration-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 170px minmax(0, 1fr);
    gap: 24px;
    align-items: stretch;
}

.integration-card {
    min-width: 0;
    padding: 30px;
    border: 1px solid var(--g-border);
    border-radius: 24px;
    background: #fff;
    color: var(--g-text);
}

.integration-card-label {
    margin-bottom: 24px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--g-muted);
}

.integration-product {
    display: grid;
}

.integration-product > div {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 20px;
    align-items: center;
    min-height: 58px;
    border-bottom: 1px solid var(--g-border);
}

.integration-product small {
    font-size: 14px;
    color: var(--g-muted);
}

.integration-product strong {
    min-width: 0;
    text-align: right;
    font-size: 16px;
    font-weight: 600;
    color: var(--g-text);
    overflow-wrap: anywhere;
}


/* transfer */

.integration-transfer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
}

.integration-transfer-track {
    position: relative;
    height: 60px;
    display: flex;
    align-items: center;
}

.integration-transfer-track::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--g-border);
}

.integration-transfer-track span {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 34px;
    border-radius: 8px;
    background: var(--g-blue);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}

.integration-transfer-track span.run {
    animation: packetMoveGoogle .8s cubic-bezier(.2,.8,.2,1) forwards;
}

@keyframes packetMoveGoogle {
    from { margin-left: 0; }
    to { margin-left: calc(100% - 50px); }
}


/* demo buttons */

.integration-secondary-btn,
.integration-sync-btn {
    appearance: none;
    border-radius: 999px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.integration-secondary-btn {
    min-height: 44px;
    margin-top: 24px;
    padding: 0 18px;
    border: 1px solid var(--g-border);
    background: #fff;
    color: var(--g-blue);
}

.integration-secondary-btn:hover {
    background: var(--g-soft);
}

.integration-sync-btn {
    width: 100%;
    min-height: 46px;
    padding: 0 18px;
    border: 1px solid var(--g-blue);
    background: var(--g-blue);
    color: #fff;
}

.integration-sync-btn:hover {
    background: var(--g-blue-hover);
}

.integration-sync-btn:disabled {
    opacity: .65;
    cursor: default;
}

.integration-success {
    display: none;
    margin-top: 22px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #e6f4ea;
    color: var(--g-green);
    font-size: 14px;
    font-weight: 500;
}

.integration-success.show {
    display: block;
}


/* JSON / XML */

.integration-code-block {
    margin-top: 24px;
    overflow: hidden;
    border: 1px solid var(--g-border);
    border-radius: 24px;
    background: var(--g-soft);
}

.integration-code-head {
    min-height: 58px;
    padding: 0 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--g-border);
}

.integration-code-head > span {
    font-size: 14px;
    font-weight: 600;
}

.integration-code-head > div {
    display: flex;
    gap: 6px;
}

.integration-code-head button {
    border: 0;
    border-radius: 999px;
    padding: 7px 12px;
    background: transparent;
    color: var(--g-muted);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.integration-code-head button.active {
    background: var(--g-soft-blue);
    color: var(--g-blue);
}

.integration-code-block pre {
    margin: 0;
    padding: 24px;
    overflow: auto;
    color: var(--g-text);
    font-size: 13px;
    line-height: 1.65;
}


/* Site → 1C */

.integration-order-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.integration-result {
    display: none;
}

.integration-result.show {
    display: grid;
}

.integration-result > div {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    min-height: 58px;
    border-bottom: 1px solid var(--g-border);
}

.integration-result small {
    color: var(--g-muted);
    font-size: 14px;
}

.integration-result strong {
    text-align: right;
    color: var(--g-text);
    font-size: 16px;
}

.integration-result-empty {
    min-height: 180px;
    display: flex;
    align-items: center;
    color: var(--g-muted);
    font-size: 15px;
}

.integration-result-empty.hide {
    display: none;
}


/* ERP demo */

.integration-erp-card {
    padding: 32px;
}

.integration-erp-flow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.integration-erp-flow .erp-step {
    position: relative;
    min-height: 150px;
    padding: 20px;
    border: 1px solid var(--g-border);
    border-radius: 18px;
    background: #fff;
    display: flex;
    flex-direction: column;
    transition: .2s ease;
}

.integration-erp-flow .erp-step > span {
    font-size: 12px;
    color: var(--g-muted);
}

.integration-erp-flow .erp-step small {
    margin-top: auto;
    font-size: 13px;
    color: var(--g-muted);
}

.integration-erp-flow .erp-step strong {
    margin-top: 4px;
    font-size: 17px;
    color: var(--g-text);
}

.integration-erp-flow .erp-step em {
    margin-top: 10px;
    font-size: 12px;
    font-style: normal;
    color: var(--g-muted);
}

.integration-erp-flow .erp-step.is-running {
    border-color: var(--g-blue);
    background: var(--g-soft-blue);
}

.integration-erp-flow .erp-step.is-running em {
    color: var(--g-blue);
}

.integration-erp-flow .erp-step.is-done {
    border-color: #81c995;
}

.integration-erp-flow .erp-step.is-done em {
    color: var(--g-green);
}

.integration-erp-flow .erp-step.is-done::after {
    content: "✓";
    position: absolute;
    top: 16px;
    right: 16px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e6f4ea;
    color: var(--g-green);
    font-size: 13px;
}

.erp-action-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 24px;
}

.erp-action-row .integration-sync-btn {
    width: auto;
    min-width: 230px;
}

.erp-progress {
    flex: 1;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--g-border);
}

.erp-progress span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--g-blue);
    transition: width .35s ease;
}


/* responsive */

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

    .integration-grid,
    .integration-order-grid {
        grid-template-columns: 1fr;
    }

    .integration-transfer {
        min-height: 130px;
    }

    .integration-erp-flow {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .integration-erp-flow {
        grid-template-columns: 1fr;
    }

    .erp-action-row {
        flex-direction: column;
        align-items: stretch;
    }

    .erp-action-row .integration-sync-btn {
        width: 100%;
    }
}


/* =========================================================
   REMAINING PAGE — Google-style light UI
   ========================================================= */


/* ---------------------------------------------------------
   Integration log
   --------------------------------------------------------- */

.integration-log-section {
    padding: 96px 0;
    background: var(--g-soft);
    color: var(--g-text);
}

.integration-log-section .integration-section-head {
    margin-bottom: 36px;
}

.integration-log {
    overflow: hidden;
    border: 1px solid var(--g-border);
    border-radius: 24px;
    background: #fff;
}

.integration-log > div {
    display: grid;
    grid-template-columns: 110px 150px minmax(0, 1fr) 110px;
    gap: 24px;
    align-items: center;
    min-height: 64px;
    padding: 0 24px;
    border-bottom: 1px solid var(--g-border);
}

.integration-log > div:last-child {
    border-bottom: 0;
}

.integration-log time,
.integration-log span {
    color: var(--g-muted);
    font-size: 14px;
}

.integration-log b {
    min-width: 0;
    color: var(--g-text);
    font-size: 15px;
    font-weight: 500;
}

.integration-log em {
    justify-self: end;
    padding: 6px 10px;
    border-radius: 999px;
    background: #e6f4ea;
    color: var(--g-green);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
}


/* ---------------------------------------------------------
   Old "Не только JSON" block
   --------------------------------------------------------- */

.integration-info-section {
    padding: 96px 0;
    background: #fff;
}

.integration-tech-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.integration-tech-grid article {
    min-height: 190px;
    padding: 28px;
    border: 1px solid var(--g-border);
    border-radius: 24px;
    background: #fff;
}

.integration-tech-grid strong {
    display: block;
    margin-bottom: 14px;
    color: var(--g-text);
    font-size: 21px;
    font-weight: 500;
}

.integration-tech-grid p {
    max-width: 520px;
    margin: 0;
    color: var(--g-muted);
    font-size: 14px;
    line-height: 1.6;
}


/* ---------------------------------------------------------
   What we integrate
   --------------------------------------------------------- */

.integration-scenarios-section {
    padding: 96px 0;
    background: var(--g-soft);
}

.integration-scenario-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.integration-scenario-grid article {
    min-height: 220px;
    padding: 28px;
    border: 1px solid var(--g-border);
    border-radius: 24px;
    background: #fff;
}

.integration-scenario-grid article > span {
    display: block;
    margin-bottom: 46px;
    color: var(--g-muted);
    font-size: 12px;
}

.integration-scenario-grid h3 {
    margin: 0 0 12px;
    color: var(--g-text);
    font-size: 24px;
    line-height: 1.2;
    font-weight: 500;
}

.integration-scenario-grid p {
    margin: 0;
    color: var(--g-muted);
    font-size: 14px;
    line-height: 1.6;
}


/* ---------------------------------------------------------
   ERP process map
   --------------------------------------------------------- */

.integration-erp-section {
    padding: 96px 0;
    background: #fff;
}

.integration-erp-map {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.integration-erp-map > div {
    min-height: 190px;
    padding: 24px;
    border: 1px solid var(--g-border);
    border-radius: 20px;
    background: #fff;
    display: flex;
    flex-direction: column;
}

.integration-erp-map span {
    color: var(--g-muted);
    font-size: 12px;
}

.integration-erp-map strong {
    margin-top: auto;
    color: var(--g-text);
    font-size: 19px;
    font-weight: 500;
}

.integration-erp-map p {
    margin: 9px 0 0;
    color: var(--g-muted);
    font-size: 13px;
    line-height: 1.5;
}


/* ---------------------------------------------------------
   Protocols
   --------------------------------------------------------- */

.integration-protocols-section {
    padding: 96px 0;
    background: var(--g-soft);
}

.integration-protocol-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.integration-protocol-list article {
    min-height: 250px;
    padding: 26px;
    border: 1px solid var(--g-border);
    border-radius: 22px;
    background: #fff;
}

.integration-protocol-list article > div {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    margin-bottom: 44px;
    padding: 0 12px;
    border-radius: 9px;
    background: var(--g-soft-blue);
    color: var(--g-blue);
    font-size: 12px;
    font-weight: 600;
}

.integration-protocol-list strong {
    display: block;
    margin-bottom: 12px;
    color: var(--g-text);
    font-size: 20px;
    font-weight: 500;
}

.integration-protocol-list p {
    margin: 0;
    color: var(--g-muted);
    font-size: 13px;
    line-height: 1.6;
}


/* ---------------------------------------------------------
   Documentation tab
   --------------------------------------------------------- */

.integration-docs-panel {
    padding-top: 8px;
}

.integration-docs {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 72px;
    align-items: start;
}

.integration-docs-nav {
    position: sticky;
    top: 100px;
}

.integration-docs-nav-title {
    margin-bottom: 16px;
    color: var(--g-text);
    font-size: 14px;
    font-weight: 600;
}

.integration-docs-nav nav {
    display: flex;
    flex-direction: column;
}

.integration-docs-nav a {
    padding: 9px 0 9px 14px;
    border-left: 2px solid var(--g-border);
    color: var(--g-muted);
    font-size: 13px;
    line-height: 1.35;
    text-decoration: none;
}

.integration-docs-nav a:hover,
.integration-docs-nav a.active {
    border-left-color: var(--g-blue);
    color: var(--g-blue);
}

.integration-docs-content {
    min-width: 0;
    max-width: 820px;
}

.integration-docs-header {
    padding-bottom: 54px;
    border-bottom: 1px solid var(--g-border);
}

.integration-docs-header .integration-kicker {
    margin-bottom: 10px;
    color: var(--g-muted);
    font-size: 14px;
}

.integration-docs-header h2 {
    margin: 0 0 24px;
    color: var(--g-text);
    font-size: clamp(40px, 4vw, 58px);
    line-height: 1.08;
    letter-spacing: -.035em;
    font-weight: 500;
}

.integration-docs-header > p {
    max-width: 720px;
    margin: 0;
    color: var(--g-muted);
    font-size: 17px;
    line-height: 1.65;
}

.integration-docs-content > section {
    scroll-margin-top: 110px;
    padding: 56px 0;
    border-bottom: 1px solid var(--g-border);
}

.integration-docs-content > section:last-child {
    border-bottom: 0;
}

.integration-docs-content h3 {
    margin: 0 0 22px;
    color: var(--g-text);
    font-size: 34px;
    line-height: 1.12;
    letter-spacing: -.02em;
    font-weight: 500;
}

.integration-docs-content h4 {
    margin: 34px 0 10px;
    color: var(--g-text);
    font-size: 18px;
    font-weight: 500;
}

.integration-docs-content p,
.integration-docs-content li {
    color: var(--g-text);
    font-size: 15px;
    line-height: 1.7;
}

.integration-docs-content p {
    max-width: 740px;
    margin: 0 0 20px;
}

.integration-docs-content ol,
.integration-docs-content ul {
    max-width: 740px;
    margin: 22px 0;
    padding-left: 22px;
}

.integration-docs-content li {
    padding: 4px 0 4px 5px;
}


/* documentation architecture diagram */

.integration-docs-schema {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 12px;
    align-items: center;
    margin: 34px 0;
}

.integration-docs-schema > div {
    min-height: 120px;
    padding: 20px;
    border: 1px solid var(--g-border);
    border-radius: 18px;
    background: var(--g-soft);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.integration-docs-schema strong {
    color: var(--g-text);
    font-size: 16px;
    font-weight: 500;
}

.integration-docs-schema span {
    margin-top: 6px;
    color: var(--g-muted);
    font-size: 12px;
    line-height: 1.4;
}

.integration-docs-schema > b {
    color: var(--g-blue);
    font-size: 20px;
    font-weight: 500;
}


/* documentation data table */

.integration-docs-table {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    margin-top: 28px;
    overflow: hidden;
    border: 1px solid var(--g-border);
    border-radius: 20px;
    background: var(--g-border);
}

.integration-docs-table > div {
    padding: 22px;
    background: #fff;
}

.integration-docs-table strong {
    display: block;
    margin-bottom: 6px;
    color: var(--g-text);
    font-size: 15px;
    font-weight: 500;
}

.integration-docs-table span {
    color: var(--g-muted);
    font-size: 13px;
    line-height: 1.5;
}


/* documentation note */

.integration-docs-note {
    max-width: 740px;
    margin-top: 28px;
    padding: 22px 24px;
    border-radius: 16px;
    background: var(--g-soft-blue);
}

.integration-docs-note strong {
    display: block;
    margin-bottom: 8px;
    color: var(--g-text);
    font-size: 14px;
}

.integration-docs-note p {
    margin: 0;
    color: var(--g-text);
}


/* ---------------------------------------------------------
   CTA
   --------------------------------------------------------- */

.integration-cta-section {
    padding: 96px 0;
    background: #fff;
}

.integration-cta {
    padding: 52px;
    border-radius: 28px;
    background: var(--g-soft);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 48px;
    align-items: end;
}

.integration-cta .integration-kicker {
    margin-bottom: 12px;
    color: var(--g-muted);
    font-size: 14px;
}

.integration-cta h2 {
    max-width: 760px;
    margin: 0;
    color: var(--g-text);
    font-size: clamp(38px, 4vw, 56px);
    line-height: 1.08;
    letter-spacing: -.035em;
    font-weight: 500;
}

.integration-cta p {
    max-width: 670px;
    margin: 20px 0 0;
    color: var(--g-muted);
    font-size: 15px;
    line-height: 1.6;
}

.integration-cta-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    min-width: 210px;
    min-height: 48px;
    padding: 0 24px !important;
    border: 1px solid var(--g-blue) !important;
    border-radius: 999px !important;
    background: var(--g-blue) !important;
    color: #fff !important;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    position: static !important;
}

.integration-cta-btn::before,
.integration-cta-btn::after {
    display: none !important;
}

.integration-cta-btn:hover {
    background: var(--g-blue-hover) !important;
}


/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (max-width: 1000px) {
    .integration-erp-map,
    .integration-protocol-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .integration-docs {
        grid-template-columns: 200px minmax(0, 1fr);
        gap: 40px;
    }
}

@media (max-width: 800px) {
    .integration-log > div {
        grid-template-columns: 90px minmax(0, 1fr);
        gap: 8px 16px;
        padding: 16px 20px;
    }

    .integration-log b,
    .integration-log em {
        grid-column: 2;
    }

    .integration-log em {
        justify-self: start;
    }

    .integration-tech-grid,
    .integration-scenario-grid {
        grid-template-columns: 1fr;
    }

    .integration-docs {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .integration-docs-nav {
        position: static;
    }

    .integration-docs-nav nav {
        flex-direction: row;
        overflow-x: auto;
        gap: 8px;
        padding-bottom: 8px;
    }

    .integration-docs-nav a {
        flex: 0 0 auto;
        padding: 9px 14px;
        border: 1px solid var(--g-border);
        border-radius: 999px;
        white-space: nowrap;
    }

    .integration-docs-nav a.active {
        border-color: var(--g-blue);
        background: var(--g-soft-blue);
    }

    .integration-docs-schema {
        grid-template-columns: 1fr;
    }

    .integration-docs-schema > b {
        text-align: center;
        transform: rotate(90deg);
    }

    .integration-cta {
        grid-template-columns: 1fr;
        align-items: start;
    }
}

@media (max-width: 600px) {
    .integration-erp-map,
    .integration-protocol-list,
    .integration-docs-table {
        grid-template-columns: 1fr;
    }

    .integration-cta {
        padding: 32px 24px;
    }
}


/* smooth anchor navigation */

#integration-demo,
#how-it-works {
    scroll-margin-top: 110px;
}

html {
    scroll-behavior: smooth;
}


/* spacing before documentation */

.integration-docs-panel {
    margin-top: 72px;
}


/* =========================================================
   PAGE MODES — stable version
   ========================================================= */

.integration-mode-bar {
    position: sticky;
    top: 0;
    z-index: 50;
    padding: 14px 0;
    background: rgba(255,255,255,.96);
    border-top: 1px solid var(--g-border);
    border-bottom: 1px solid var(--g-border);
    backdrop-filter: blur(12px);
}

.integration-mode-nav {
    position: relative;
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background: #f1f3f4;
}

.integration-mode-indicator {
    position: absolute;
    left: 0;
    top: 4px;
    z-index: 0;
    height: calc(100% - 8px);
    border-radius: 999px;
    background: #fff;
    box-shadow:
        0 1px 3px rgba(60,64,67,.18),
        0 1px 2px rgba(60,64,67,.08);

    transition:
        transform .38s cubic-bezier(.2,.8,.2,1),
        width .38s cubic-bezier(.2,.8,.2,1);
}

.integration-mode-nav button {
    position: relative;
    z-index: 1;
    min-height: 42px;
    padding: 0 20px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--g-muted);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: color .25s ease;
}

.integration-mode-nav button.active {
    color: var(--g-blue);
}


/* плавное исчезновение / появление */
.integration-page .integration-choice-section,
.integration-page .integration-demo-section,
.integration-page .integration-log-section,
.integration-page .integration-info-section,
.integration-page .integration-scenarios-section,
.integration-page .integration-erp-section,
.integration-page .integration-protocols-section,
.integration-page .integration-docs-panel {
    transition:
        opacity .22s ease,
        transform .28s cubic-bezier(.2,.8,.2,1);
}

.integration-page.is-mode-changing {
    opacity: .985;
}


/* =========================================================
   OVERVIEW
   ========================================================= */

.integration-page[data-page-mode="overview"]
.integration-demo-section,

.integration-page[data-page-mode="overview"]
.integration-log-section {
    display: none;
}


/* docs внутри demo никогда не показываем в overview */
.integration-page[data-page-mode="overview"]
.integration-docs-panel {
    display: none;
}


/* =========================================================
   DEMO
   ========================================================= */

.integration-page[data-page-mode="demo"]
.integration-choice-section,

.integration-page[data-page-mode="demo"]
.integration-info-section,

.integration-page[data-page-mode="demo"]
.integration-scenarios-section,

.integration-page[data-page-mode="demo"]
.integration-erp-section,

.integration-page[data-page-mode="demo"]
.integration-protocols-section {
    display: none;
}

.integration-page[data-page-mode="demo"]
.integration-docs-panel {
    display: none;
}


/* =========================================================
   DOCS
   ========================================================= */

.integration-page[data-page-mode="docs"]
.integration-choice-section,

.integration-page[data-page-mode="docs"]
.integration-log-section,

.integration-page[data-page-mode="docs"]
.integration-info-section,

.integration-page[data-page-mode="docs"]
.integration-scenarios-section,

.integration-page[data-page-mode="docs"]
.integration-erp-section,

.integration-page[data-page-mode="docs"]
.integration-protocols-section {
    display: none;
}


/*
 * docs находятся внутри integration-demo-section,
 * поэтому сам demo section остаётся видимым.
 */
.integration-page[data-page-mode="docs"]
.integration-demo-section {
    display: block;
    padding-top: 72px;
}


/* скрываем непосредственно интерфейс демо */
.integration-page[data-page-mode="docs"]
.integration-demo-section > .container > .integration-section-head,

.integration-page[data-page-mode="docs"]
.integration-demo-section > .container > .integration-tabs,

.integration-page[data-page-mode="docs"]
.integration-demo-section > .container > .integration-panel {
    display: none;
}


/* документация остаётся */
.integration-page[data-page-mode="docs"]
.integration-docs-panel {
    display: block;
    margin-top: 0;
}


/* =========================================================
   CTA всегда остаётся
   ========================================================= */

.integration-cta-section {
    display: block !important;
}


/* =========================================================
   entrance
   ========================================================= */

.integration-page:not(.is-mode-changing)
.integration-demo-section,

.integration-page:not(.is-mode-changing)
.integration-choice-section,

.integration-page:not(.is-mode-changing)
.integration-info-section,

.integration-page:not(.is-mode-changing)
.integration-scenarios-section,

.integration-page:not(.is-mode-changing)
.integration-erp-section,

.integration-page:not(.is-mode-changing)
.integration-protocols-section,

.integration-page:not(.is-mode-changing)
.integration-docs-panel {
    animation: modeContentIn .28s ease both;
}

@keyframes modeContentIn {
    from {
        opacity: 0;
        transform: translateY(7px);
    }

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


/* =========================================================
   1C HERO VISUAL
   ========================================================= */

.onec-hero-visual {
    margin-top: 72px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px minmax(0, 1fr);
    gap: 28px;
    align-items: center;
}

.onec-system-card {
    min-height: 300px;
    padding: 28px;
    border: 1px solid var(--g-border);
    border-radius: 28px;
    background: #fff;
}

.onec-system-1c {
    background: #fffdf5;
    border-color: #eadca2;
}

.onec-system-title {
    display: flex;
    align-items: center;
    gap: 14px;
}

.onec-system-title strong {
    display: block;
    color: var(--g-text);
    font-size: 23px;
    font-weight: 500;
}

.onec-system-title span {
    display: block;
    margin-top: 3px;
    color: var(--g-muted);
    font-size: 13px;
}

.onec-system-icon {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: var(--g-soft-blue);
}

.onec-system-icon svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: var(--g-blue);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.onec-logo-mark {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #ffd735;
    color: #1f1f1f;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.03em;
}

.onec-ui-window {
    margin-top: 28px;
    overflow: hidden;
    border: 1px solid var(--g-border);
    border-radius: 16px;
    background: #fff;
}

.onec-ui-window-1c {
    border-color: #e6d99f;
}

.onec-ui-head {
    min-height: 42px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    background: #fff6c9;
    border-bottom: 1px solid #e6d99f;
    color: #4f4a30;
    font-size: 13px;
    font-weight: 600;
}

.onec-ui-row {
    min-height: 46px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-bottom: 1px solid var(--g-border);
}

.onec-ui-row:last-child {
    border-bottom: 0;
}

.onec-ui-window-1c .onec-ui-row {
    border-color: #eee5bb;
}

.onec-ui-row span {
    color: var(--g-muted);
    font-size: 12px;
}

.onec-ui-row b {
    color: var(--g-text);
    font-size: 13px;
    font-weight: 500;
    text-align: right;
}


/* bridge */

.onec-data-bridge {
    position: relative;
    min-height: 240px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 34px;
}

.onec-api-core {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 3;
    width: 58px;
    height: 58px;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--g-blue);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 0 0 9px #fff;
}

.onec-flow {
    position: relative;
}

.onec-flow-tags {
    display: flex;
    justify-content: space-between;
    gap: 5px;
    margin-bottom: 10px;
}

.onec-flow-tags span {
    padding: 6px 9px;
    border-radius: 999px;
    background: var(--g-soft);
    color: var(--g-muted);
    font-size: 10px;
    white-space: nowrap;
}

.onec-flow-line {
    position: relative;
    height: 1px;
    background: var(--g-border);
}

.onec-flow-line i {
    position: absolute;
    top: -3px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--g-blue);
}

.onec-flow-to-site .onec-flow-line i {
    right: 0;
}

.onec-flow-to-1c .onec-flow-line i {
    left: 0;
}

.onec-flow-to-site .onec-flow-line::after {
    content: "";
    position: absolute;
    right: 0;
    top: -4px;
    width: 8px;
    height: 8px;
    border-top: 1.5px solid var(--g-blue);
    border-right: 1.5px solid var(--g-blue);
    transform: rotate(45deg);
}

.onec-flow-to-1c .onec-flow-line::before {
    content: "";
    position: absolute;
    left: 0;
    top: -4px;
    width: 8px;
    height: 8px;
    border-left: 1.5px solid var(--g-blue);
    border-bottom: 1.5px solid var(--g-blue);
    transform: rotate(45deg);
}

.onec-flow-to-1c .onec-flow-tags {
    margin-top: 10px;
    margin-bottom: 0;
}


/* subtle 1C accent */

.onec-system-1c::before {
    content: "";
    display: block;
    height: 3px;
    margin: -28px -28px 25px;
    border-radius: 28px 28px 0 0;
    background: #ffd735;
}


/* responsive */

@media (max-width: 1000px) {
    .onec-hero-visual {
        grid-template-columns: 1fr;
    }

    .onec-data-bridge {
        width: min(100%, 520px);
        margin: 0 auto;
    }
}


/* 1C hero card balance */

.onec-system-card {
    height: 330px;
    min-height: 330px;
    display: flex;
    flex-direction: column;
}

.onec-system-1c::before {
    display: none;
}

.onec-system-web .onec-ui-window,
.onec-system-1c .onec-ui-window {
    margin-top: 28px;
}

.onec-system-1c {
    border-color: #eadca2;
}

.onec-system-web,
.onec-system-1c {
    align-self: stretch;
}

@media (max-width: 1000px) {
    .onec-system-card {
        height: auto;
        min-height: 0;
    }
}

/* =========================================================
   DEMO — 1C visual styling
   ========================================================= */

/* Общий блок */
.integration-demo-section {
    background: #fff;
}

.integration-demo-section .integration-section-head {
    margin-bottom: 34px;
}


/* ---------------------------------------------------------
   Левая карточка — 1С
   --------------------------------------------------------- */

.integration-panel[data-integration-panel="catalog"]
.integration-grid > .integration-card:first-child {
    position: relative;
    background: #fffdf5;
    border-color: #e8d99a;
}

.integration-panel[data-integration-panel="catalog"]
.integration-grid > .integration-card:first-child::before {
    content: "1С";
    position: absolute;
    top: 22px;
    right: 22px;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #ffd735;
    color: #202124;
    font-size: 12px;
    font-weight: 700;
}

.integration-panel[data-integration-panel="catalog"]
.integration-grid > .integration-card:first-child
.integration-card-label {
    color: #746b42;
}

.integration-panel[data-integration-panel="catalog"]
.integration-grid > .integration-card:first-child
.integration-product > div {
    border-color: #ece3bc;
}


/* ---------------------------------------------------------
   Правая карточка — сайт
   --------------------------------------------------------- */

.integration-panel[data-integration-panel="catalog"]
.integration-grid > .integration-card:last-child {
    position: relative;
    background: #f8faff;
    border-color: #cbdaf4;
}

.integration-panel[data-integration-panel="catalog"]
.integration-grid > .integration-card:last-child::before {
    content: "WEB";
    position: absolute;
    top: 22px;
    right: 22px;
    height: 34px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--g-soft-blue);
    color: var(--g-blue);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
}

.integration-panel[data-integration-panel="catalog"]
.integration-grid > .integration-card:last-child
.integration-product > div {
    border-color: #dbe4f4;
}


/* ---------------------------------------------------------
   Заголовки карточек
   --------------------------------------------------------- */

.integration-card-label {
    padding-right: 55px;
    font-size: 12px;
    letter-spacing: .08em;
    font-weight: 600;
}


/* ---------------------------------------------------------
   Центральный канал обмена
   --------------------------------------------------------- */

.integration-transfer {
    position: relative;
}

.integration-transfer::before {
    content: "обмен данными";
    position: absolute;
    top: 28%;
    left: 50%;
    transform: translateX(-50%);
    color: var(--g-muted);
    font-size: 10px;
    white-space: nowrap;
}

.integration-transfer-track {
    height: 86px;
}

.integration-transfer-track::before {
    height: 1px;
    background: #bdc7d8;
}

.integration-transfer-track::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 8px;
    height: 8px;
    border-top: 1.5px solid var(--g-blue);
    border-right: 1.5px solid var(--g-blue);
    transform: translateY(-50%) rotate(45deg);
}

.integration-transfer-track span {
    width: auto;
    min-width: 52px;
    height: 34px;
    padding: 0 10px;
    border-radius: 9px;
    background: var(--g-blue);
    box-shadow: 0 3px 10px rgba(11,87,208,.18);
}


/* ---------------------------------------------------------
   Синхронизация
   --------------------------------------------------------- */

.integration-sync-btn {
    min-height: 48px;
    border-radius: 999px;
    font-weight: 600;
    box-shadow: none;
}

.integration-transfer .integration-sync-btn {
    margin-top: 10px;
}


/* ---------------------------------------------------------
   Успешная синхронизация
   --------------------------------------------------------- */

.integration-success {
    position: relative;
    padding-left: 38px;
    background: #e6f4ea;
    color: #137333;
}

.integration-success::before {
    content: "✓";
    position: absolute;
    left: 14px;
    top: 50%;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #188038;
    color: #fff;
    font-size: 11px;
}


/* ---------------------------------------------------------
   Ответ 1С
   --------------------------------------------------------- */

.integration-code-block {
    margin-top: 28px;
    border-radius: 22px;
    background: #f8f9fa;
}

.integration-code-head {
    background: #fff;
}

.integration-code-head > span::before {
    content: "↳ ";
    color: #f9ab00;
}

.integration-code-block pre {
    color: #3c4043;
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;
    font-size: 12px;
}


/* ---------------------------------------------------------
   Tabs — немного плотнее
   --------------------------------------------------------- */

.integration-tabs button {
    transition:
        background .18s ease,
        color .18s ease,
        border-color .18s ease;
}

.integration-tabs button.active {
    background: #e8f0fe;
    border-color: #a8c7fa;
    color: #0b57d0;
}


/* ---------------------------------------------------------
   Site → 1C
   --------------------------------------------------------- */

.integration-panel[data-integration-panel="order"]
.integration-order-grid > .integration-card:first-child {
    background: #f8faff;
    border-color: #cbdaf4;
}

.integration-panel[data-integration-panel="order"]
.integration-order-grid > .integration-card:last-child {
    background: #fffdf5;
    border-color: #e8d99a;
}


/* ---------------------------------------------------------
   ERP scenario
   --------------------------------------------------------- */

.integration-panel[data-integration-panel="erp"]
.integration-erp-card {
    background: #fffdf8;
    border-color: #eadfae;
}

.integration-panel[data-integration-panel="erp"]
.erp-step {
    background: #fff;
}

.integration-panel[data-integration-panel="erp"]
.erp-step.is-running {
    border-color: #f9ab00;
    background: #fff8dd;
}

.integration-panel[data-integration-panel="erp"]
.erp-step.is-done {
    border-color: #81c995;
    background: #f2fbf4;
}


/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 900px) {

    .integration-transfer::before {
        top: 5px;
    }

    .integration-transfer-track::after {
        display: none;
    }

}


/* =========================================================
   Stable mode navigation
   ========================================================= */

.integration-mode-bar {
    position: relative !important;
    top: auto !important;
    z-index: 10;
}


.integration-page.is-mode-changing
.integration-choice-section,
.integration-page.is-mode-changing
.integration-demo-section,
.integration-page.is-mode-changing
.integration-log-section,
.integration-page.is-mode-changing
.integration-info-section,
.integration-page.is-mode-changing
.integration-scenarios-section,
.integration-page.is-mode-changing
.integration-erp-section,
.integration-page.is-mode-changing
.integration-protocols-section,
.integration-page.is-mode-changing
.integration-docs-panel {
    opacity: 0;
    transform: translateY(4px);
}


/* =========================================================
   Keep page mode nav below global header
   ========================================================= */

:root {
    --bfd-header-height: 80px;
}

.integration-mode-bar {
    position: sticky !important;
    top: var(--bfd-header-height) !important;
    z-index: 40 !important;
}

/* глобальная шапка всегда выше локального меню */
header,
.header,
.header-main,
.site-header {
    position: relative;
    z-index: 100 !important;
}


/* Dynamic position under visible global header */

.integration-mode-bar {
    top: var(--integration-mode-top, 0px) !important;
    transition: top .12s linear;
}


/* =========================================================
   ISOLATED 1C PAGE HEADER
   ========================================================= */

.onec-design-page {
    margin: 0;
}

.onec-site-header {
    position: relative;
    z-index: 100;
    width: 100%;
    background: rgba(255,255,255,.96);
    border-bottom: 1px solid #e5e7eb;
    backdrop-filter: blur(14px);
}

.onec-site-header__inner {
    width: min(1240px, calc(100% - 48px));
    height: 76px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 40px;
}

.onec-site-header__logo {
    display: inline-flex;
    align-items: center;
    color: #20376d;
}

.onec-site-header__logo svg {
    display: block;
}

.onec-site-header__nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 34px;
}

.onec-site-header__nav a {
    position: relative;
    color: #3c4043;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.onec-site-header__nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -7px;
    height: 2px;
    background: #0b57d0;
    transition: right .18s ease;
}

.onec-site-header__nav a:hover {
    color: #0b57d0;
}

.onec-site-header__nav a:hover::after {
    right: 0;
}


.onec-site-header__actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.onec-site-header__lang {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;

    color: #3c4043;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.onec-site-header__contact {
    min-height: 44px;
    padding: 0 19px;

    border: 0;
    border-radius: 999px;

    background: #0b57d0;
    color: #fff;

    font: inherit;
    font-size: 13px;
    font-weight: 600;

    cursor: pointer;
}

.onec-site-header__contact:hover {
    background: #0842a0;
}


/* burger */

.onec-site-header__burger {
    display: none;

    width: 42px;
    height: 42px;

    padding: 0;
    border: 1px solid #dadce0;
    border-radius: 50%;

    background: #fff;
    cursor: pointer;
}

.onec-site-header__burger span {
    display: block;
    width: 16px;
    height: 1px;
    margin: 4px auto;

    background: #202124;
    transition: transform .2s ease;
}


/* mobile menu */

.onec-mobile-menu {
    display: none;

    padding: 28px 24px 34px;
    border-top: 1px solid #e5e7eb;
    background: #fff;
}

.onec-mobile-menu.is-open {
    display: block;
}

.onec-mobile-menu nav {
    display: flex;
    flex-direction: column;
}

.onec-mobile-menu nav a {
    padding: 14px 0;

    border-bottom: 1px solid #eee;

    color: #202124;
    font-size: 20px;
    text-decoration: none;
}

.onec-mobile-menu__contacts {
    display: flex;
    flex-direction: column;
    gap: 8px;

    margin-top: 28px;
}

.onec-mobile-menu__contacts a {
    color: #5f6368;
    font-size: 14px;
    text-decoration: none;
}


@media (max-width: 1050px) {

    .onec-site-header__nav {
        display: none;
    }

    .onec-site-header__inner {
        grid-template-columns: auto 1fr;
    }

    .onec-site-header__actions {
        justify-self: end;
    }

    .onec-site-header__burger {
        display: block;
    }

}

@media (max-width: 650px) {

    .onec-site-header__inner {
        width: calc(100% - 28px);
        height: 66px;
    }

    .onec-site-header__contact,
    .onec-site-header__lang {
        display: none;
    }

}


/* =========================================================
   ISOLATED 1C FOOTER
   ========================================================= */

.onec-site-footer {
    padding: 88px 0 32px;
    background: #f8fafd;
    color: #202124;
}

.onec-site-footer__inner {
    width: min(1240px, calc(100% - 48px));
    margin: 0 auto;
}


/* CTA */

.onec-footer-cta {
    min-height: 330px;
    padding: 54px 58px;

    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 70px;
    align-items: end;

    border-radius: 32px;
    background: #0b57d0;
    color: #fff;
}

.onec-footer-cta__label {
    margin-bottom: 18px;

    color: rgba(255,255,255,.68);

    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
}

.onec-footer-cta h2 {
    max-width: 760px;
    margin: 0;

    color: #fff;

    font-size: clamp(42px, 5vw, 68px);
    line-height: 1.02;
    letter-spacing: -.045em;
    font-weight: 500;
}

.onec-footer-cta p {
    max-width: 680px;
    margin: 24px 0 0;

    color: rgba(255,255,255,.78);

    font-size: 15px;
    line-height: 1.6;
}

.onec-footer-cta__button {
    min-height: 58px;
    padding: 0 22px 0 26px;

    display: inline-flex;
    align-items: center;
    gap: 26px;

    border: 0;
    border-radius: 999px;

    background: #fff;
    color: #0b57d0;

    font: inherit;
    font-size: 14px;
    font-weight: 600;

    cursor: pointer;
    white-space: nowrap;
}

.onec-footer-cta__button svg {
    width: 22px;
    height: 22px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition: transform .2s ease;
}

.onec-footer-cta__button:hover svg {
    transform: translateX(4px);
}


/* main */

.onec-site-footer__main {
    padding: 72px 0 58px;

    display: grid;
    grid-template-columns: minmax(280px, 1.7fr) repeat(3, minmax(140px, .7fr));
    gap: 54px;

    border-bottom: 1px solid #dadce0;
}

.onec-site-footer__logo {
    display: inline-flex;
    color: #20376d;
}

.onec-site-footer__brand p {
    max-width: 350px;
    margin: 24px 0 0;

    color: #5f6368;

    font-size: 14px;
    line-height: 1.6;
}

.onec-site-footer__column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.onec-site-footer__column strong {
    margin-bottom: 7px;

    color: #202124;

    font-size: 13px;
    font-weight: 600;
}

.onec-site-footer__column a {
    color: #5f6368;

    font-size: 14px;
    line-height: 1.4;
    text-decoration: none;
}

.onec-site-footer__column a:hover {
    color: #0b57d0;
}


/* bottom */

.onec-site-footer__bottom {
    padding-top: 26px;

    display: flex;
    justify-content: space-between;
    gap: 30px;

    color: #80868b;
    font-size: 12px;
}

.onec-site-footer__bottom > div {
    display: flex;
    gap: 24px;
}

.onec-site-footer__bottom a {
    color: inherit;
    text-decoration: none;
}

.onec-site-footer__bottom a:hover {
    color: #0b57d0;
}


@media (max-width: 900px) {

    .onec-footer-cta {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .onec-footer-cta__button {
        justify-self: start;
    }

    .onec-site-footer__main {
        grid-template-columns: 1fr 1fr;
    }

}

@media (max-width: 600px) {

    .onec-site-footer {
        padding-top: 54px;
    }

    .onec-site-footer__inner {
        width: calc(100% - 28px);
    }

    .onec-footer-cta {
        min-height: 0;
        padding: 36px 26px;
        border-radius: 24px;
    }

    .onec-site-footer__main {
        grid-template-columns: 1fr;
        gap: 36px;
        padding: 54px 0;
    }

    .onec-site-footer__bottom {
        flex-direction: column;
    }

    .onec-site-footer__bottom > div {
        flex-direction: column;
        gap: 8px;
    }

}


/* =========================================================
   1C PAGE — ORDER MODAL REDESIGN
   Functionality remains global/original
   ========================================================= */

/*
 * Fancybox переносит modal непосредственно в body,
 * поэтому scope через body.onec-design-page сохраняется.
 */

body.onec-design-page #modal-order {
    width: min(920px, calc(100vw - 32px)) !important;
    max-width: 920px !important;

    padding: 0 !important;

    border-radius: 30px !important;

    background: #fff !important;
    color: #202124 !important;

    overflow: hidden;
}


/* убираем старую тёмную визуальную систему */

body.onec-design-page #modal-order,
body.onec-design-page #modal-order * {
    box-sizing: border-box;
}


/* заголовки */

body.onec-design-page #modal-order h1,
body.onec-design-page #modal-order h2,
body.onec-design-page #modal-order h3,
body.onec-design-page #modal-order .modal__title,
body.onec-design-page #modal-order .form__title {
    color: #202124 !important;
}


/* основная область */

body.onec-design-page #modal-order form {
    padding: 50px !important;
    background: #fff !important;
}


/* inputs */

body.onec-design-page #modal-order input,
body.onec-design-page #modal-order textarea,
body.onec-design-page #modal-order select {
    width: 100%;

    border: 1px solid #dadce0 !important;
    border-radius: 14px !important;

    background: #fff !important;
    color: #202124 !important;

    box-shadow: none !important;

    font-family: inherit !important;
    font-size: 15px !important;

    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}

body.onec-design-page #modal-order input,
body.onec-design-page #modal-order select {
    min-height: 56px !important;
    padding: 0 17px !important;
}

body.onec-design-page #modal-order textarea {
    min-height: 150px !important;
    padding: 17px !important;
    resize: vertical;
}


/* placeholders */

body.onec-design-page #modal-order input::placeholder,
body.onec-design-page #modal-order textarea::placeholder {
    color: #80868b !important;
    opacity: 1;
}


/* focus */

body.onec-design-page #modal-order input:focus,
body.onec-design-page #modal-order textarea:focus,
body.onec-design-page #modal-order select:focus {
    outline: none !important;

    border-color: #0b57d0 !important;

    box-shadow:
        0 0 0 3px rgba(11,87,208,.10) !important;
}


/* labels / checkbox texts */

body.onec-design-page #modal-order label,
body.onec-design-page #modal-order .form__label,
body.onec-design-page #modal-order .checkbox {
    color: #5f6368 !important;
    font-size: 13px !important;
}


/* links */

body.onec-design-page #modal-order a {
    color: #0b57d0 !important;
}


/* submit */

body.onec-design-page #modal-order button[type="submit"] {
    min-height: 56px !important;
    padding: 0 28px !important;

    border: 0 !important;
    border-radius: 999px !important;

    background: #0b57d0 !important;
    color: #fff !important;

    font: inherit !important;
    font-size: 14px !important;
    font-weight: 600 !important;

    cursor: pointer;
}

body.onec-design-page #modal-order button[type="submit"]:hover {
    background: #0842a0 !important;
}


/* fancybox close */

body.onec-design-page .fancybox__container:has(#modal-order)
.f-button.is-close-btn {
    top: 20px !important;
    right: 20px !important;

    color: #5f6368 !important;
    background: #f1f3f4 !important;
}


/* старые декоративные элементы формы не должны доминировать */

body.onec-design-page #modal-order svg {
    max-width: 100%;
}


@media (max-width: 700px) {

    body.onec-design-page #modal-order {
        width: calc(100vw - 20px) !important;
        border-radius: 22px !important;
    }

    body.onec-design-page #modal-order form {
        padding: 28px 20px !important;
    }

}


/* =========================================================
   Native cursor for isolated 1C design
   ========================================================= */

body.onec-design-page,
body.onec-design-page * {
    cursor: default !important;
}

body.onec-design-page a,
body.onec-design-page button,
body.onec-design-page [role="button"],
body.onec-design-page label,
body.onec-design-page select {
    cursor: pointer !important;
}

body.onec-design-page input,
body.onec-design-page textarea {
    cursor: text !important;
}


/* =========================================================
   1C MODAL — final isolated design
   ========================================================= */

body.onec-design-page .onec-order-modal {
    width: min(820px, calc(100vw - 32px)) !important;
    max-width: 820px !important;
    max-height: calc(100vh - 32px);

    padding: 0 !important;
    margin: 0 !important;

    border-radius: 28px !important;

    background: #fff !important;
    color: #202124 !important;

    overflow-y: auto !important;
}


/* form */

body.onec-design-page .onec-order-form {
    width: 100% !important;
    max-width: none !important;

    padding: 48px !important;
    margin: 0 !important;

    background: #fff !important;
}


/* heading */

.onec-order-form__header {
    max-width: 620px;
    margin-bottom: 36px;
}

.onec-order-form__eyebrow {
    margin-bottom: 10px;

    color: #0b57d0;

    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.onec-order-form__header h2 {
    margin: 0 !important;

    color: #202124 !important;

    font-size: clamp(36px, 5vw, 52px) !important;
    line-height: 1.02 !important;
    letter-spacing: -.04em !important;
    font-weight: 500 !important;
}

.onec-order-form__header p {
    max-width: 560px;

    margin: 18px 0 0 !important;

    color: #5f6368 !important;

    font-size: 15px !important;
    line-height: 1.55 !important;
}


/* fields */

.onec-order-form__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.onec-field {
    display: block;
}

.onec-field > span,
.onec-order-form__section-title {
    display: block;

    margin-bottom: 8px;

    color: #5f6368 !important;

    font-size: 12px !important;
    font-weight: 500;
}

.onec-field input,
.onec-field textarea {
    width: 100% !important;

    border: 1px solid #dadce0 !important;
    border-radius: 12px !important;

    background: #fff !important;
    color: #202124 !important;

    box-shadow: none !important;

    font: inherit !important;
    font-size: 14px !important;
}

.onec-field input {
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 15px !important;
}

.onec-field textarea {
    min-height: 150px !important;
    padding: 15px !important;
    resize: vertical;
}

.onec-field input::placeholder,
.onec-field textarea::placeholder {
    color: #9aa0a6 !important;
}

.onec-field input:focus,
.onec-field textarea:focus {
    outline: none !important;

    border-color: #0b57d0 !important;

    box-shadow:
        0 0 0 3px rgba(11,87,208,.08) !important;
}


/* budget */

.onec-order-form__section {
    margin-top: 24px;
}

.onec-budget {
    position: relative;
}

.onec-budget__value {
    width: 100%;
    min-height: 52px;

    padding: 0 44px 0 15px;

    border: 1px solid #dadce0;
    border-radius: 12px;

    background: #fff;
    color: #5f6368;

    font: inherit;
    font-size: 14px;
    text-align: left;

    cursor: pointer;
}

.onec-budget__value::after {
    content: "";

    position: absolute;
    right: 18px;
    top: 21px;

    width: 7px;
    height: 7px;

    border-right: 1.5px solid #5f6368;
    border-bottom: 1.5px solid #5f6368;

    transform: rotate(45deg);
}

.onec-budget__options {
    display: none;

    margin-top: 8px;
    padding: 8px;

    border: 1px solid #dadce0;
    border-radius: 14px;

    background: #fff;

    box-shadow: 0 8px 28px rgba(60,64,67,.14);
}

.onec-budget:focus-within .onec-budget__options,
.onec-budget.is-open .onec-budget__options {
    display: grid;
}

.onec-budget__options label {
    display: block;

    padding: 11px 12px;

    border-radius: 9px;

    color: #3c4043 !important;

    font-size: 13px !important;

    cursor: pointer;
}

.onec-budget__options label:hover {
    background: #f8fafd;
}

.onec-budget__options input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}


/* message */

.onec-field_message {
    margin-top: 24px;
}


/* file */

.onec-order-file {
    margin-top: 10px;
}

.onec-order-file input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.onec-order-file label {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: #0b57d0 !important;

    font-size: 13px !important;

    cursor: pointer;
}

.onec-order-file svg {
    width: 17px;
    height: 17px;
}


/* footer */

.onec-order-form__bottom {
    margin-top: 30px;

    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 28px;
    align-items: center;
}


/* policy */

.onec-order-policy {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    color: #5f6368 !important;

    font-size: 12px !important;
    line-height: 1.45;
}

.onec-order-policy > input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.onec-order-policy__check {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;

    border: 1px solid #bdc1c6;
    border-radius: 4px;

    background: #fff;
}

.onec-order-policy > input[type="checkbox"]:checked
+ .onec-order-policy__check {
    border-color: #0b57d0;
    background: #0b57d0;
}

.onec-order-policy > input[type="checkbox"]:checked
+ .onec-order-policy__check::after {
    content: "✓";

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    color: #fff;

    font-size: 11px;
}

.onec-order-policy a {
    color: #0b57d0 !important;
}


/* submit */

.onec-order-submit {
    min-height: 52px;
    padding: 0 20px 0 24px;

    display: inline-flex;
    align-items: center;
    gap: 24px;

    border: 0;
    border-radius: 999px;

    background: #0b57d0;
    color: #fff;

    font: inherit;
    font-size: 13px;
    font-weight: 600;

    white-space: nowrap;
    cursor: pointer;
}

.onec-order-submit:hover {
    background: #0842a0;
}

.onec-order-submit svg {
    width: 20px;
    height: 20px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* thank you */

body.onec-design-page .onec-thankyou {
    width: min(560px, calc(100vw - 32px)) !important;

    padding: 0 !important;

    border-radius: 28px !important;

    background: #fff !important;
}

.onec-thankyou__inner {
    padding: 60px;
    text-align: center;
}

.onec-thankyou__mark {
    width: 48px;
    height: 48px;

    margin: 0 auto 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #e6f4ea;
    color: #188038;

    font-size: 20px;
}

.onec-thankyou h2 {
    margin: 0;

    color: #202124;

    font-size: 38px;
    font-weight: 500;
}

.onec-thankyou p {
    margin: 14px auto 0;

    max-width: 380px;

    color: #5f6368;

    font-size: 14px;
    line-height: 1.55;
}


/* fancybox */

body.onec-design-page
.fancybox__container:has(.onec-order-modal)
.fancybox__content {
    padding: 0 !important;
    background: transparent !important;
}

body.onec-design-page
.fancybox__container:has(.onec-order-modal)
.f-button.is-close-btn {
    top: 18px !important;
    right: 18px !important;

    width: 38px !important;
    height: 38px !important;

    border-radius: 50% !important;

    background: #f1f3f4 !important;
    color: #5f6368 !important;
}


@media (max-width: 700px) {

    body.onec-design-page .onec-order-modal {
        width: calc(100vw - 20px) !important;
        border-radius: 22px !important;
    }

    body.onec-design-page .onec-order-form {
        padding: 34px 22px !important;
    }

    .onec-order-form__grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .onec-order-form__bottom {
        grid-template-columns: 1fr;
    }

    .onec-order-submit {
        width: 100%;
        justify-content: space-between;
    }

}


/* =========================================================
   1C modal bottom layout fix
   ========================================================= */

.onec-order-form__bottom {
    margin-top: 28px;

    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 22px;
}

.onec-order-policy {
    max-width: 520px;
}

.onec-order-submit {
    align-self: flex-end;
    min-width: 230px;
    justify-content: space-between;
}

@media (max-width: 700px) {
    .onec-order-submit {
        align-self: stretch;
        width: 100%;
    }
}


/* =========================================================
   1C modal — old composition in new design
   ========================================================= */

body.onec-design-page .onec-order-modal {
    width: min(1180px, calc(100vw - 32px)) !important;
    max-width: 1180px !important;
    max-height: calc(100vh - 32px);
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 32px !important;
    background: #ffffff !important;
    color: #202124 !important;
    overflow-y: auto !important;
}

body.onec-design-page .onec-order-form {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    padding: 54px 54px 42px !important;
    background: #ffffff !important;
    color: #202124 !important;
    box-sizing: border-box;
}

body.onec-design-page .onec-order-form__layout {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}

body.onec-design-page .onec-order-form__intro {
    padding-top: 6px;
}

body.onec-design-page .onec-order-form__eyebrow {
    margin-bottom: 18px;
    font-size: 15px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #0b57d0;
}

body.onec-design-page .onec-order-form__intro h2 {
    margin: 0 0 22px;
    font-size: clamp(48px, 5vw, 72px);
    line-height: .95;
    font-weight: 500;
    letter-spacing: -.04em;
    color: #202124;
}

body.onec-design-page .onec-order-form__intro p {
    margin: 0;
    max-width: 260px;
    font-size: 17px;
    line-height: 1.55;
    color: #5f6368;
}

body.onec-design-page .onec-order-form__content {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

body.onec-design-page .onec-order-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 18px;
}

body.onec-design-page .onec-order-field {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
}

body.onec-design-page .onec-order-field--full {
    width: 100%;
}

body.onec-design-page .onec-order-field > span {
    font-size: 14px;
    line-height: 1.3;
    font-weight: 500;
    color: #5f6368;
}

body.onec-design-page .onec-order-field input,
body.onec-design-page .onec-order-field select,
body.onec-design-page .onec-order-field textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d2d7e0 !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    color: #202124 !important;
    box-shadow: none !important;
    outline: none !important;
    font-family: inherit;
    font-size: 18px;
    line-height: 1.4;
    transition: border-color .2s ease, box-shadow .2s ease;
}

body.onec-design-page .onec-order-field input,
body.onec-design-page .onec-order-field select {
    height: 60px;
    padding: 0 18px;
}

body.onec-design-page .onec-order-field textarea {
    min-height: 180px;
    padding: 18px;
    resize: vertical;
}

body.onec-design-page .onec-order-field input:focus,
body.onec-design-page .onec-order-field select:focus,
body.onec-design-page .onec-order-field textarea:focus {
    border-color: #0b57d0 !important;
    box-shadow: 0 0 0 4px rgba(11, 87, 208, .10) !important;
}

body.onec-design-page .onec-order-field select {
    appearance: none;
    -webkit-appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, #5f6368 50%),
        linear-gradient(135deg, #5f6368 50%, transparent 50%);
    background-position:
        calc(100% - 24px) calc(50% - 3px),
        calc(100% - 18px) calc(50% - 3px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 46px;
}

body.onec-design-page .onec-order-file {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    font-size: 16px;
    line-height: 1.4;
    color: #5f6368;
    cursor: pointer;
}

body.onec-design-page .onec-order-file input[type="file"] {
    display: none;
}

body.onec-design-page .onec-order-file::before {
    content: "↗";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    border: 1px solid #d2d7e0;
    color: #5f6368;
    font-size: 12px;
}

body.onec-design-page .onec-order-form__checks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 28px;
    margin-top: 4px;
}

body.onec-design-page .onec-order-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15px;
    line-height: 1.5;
    color: #5f6368;
}

body.onec-design-page .onec-order-check input {
    margin: 3px 0 0;
    flex: 0 0 auto;
}

body.onec-design-page .onec-order-check a {
    color: #0b57d0;
    text-decoration: none;
}

body.onec-design-page .onec-order-check a:hover {
    text-decoration: underline;
}

body.onec-design-page .onec-order-submit--wide {
    margin-top: 34px;
    width: 100%;
    min-height: 104px;
    border: 0;
    border-radius: 999px;
    background: #0b57d0;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 0 34px 0 40px;
    font-family: inherit;
    font-size: clamp(26px, 3.4vw, 36px);
    line-height: 1;
    font-weight: 500;
    letter-spacing: -.03em;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}

body.onec-design-page .onec-order-submit--wide:hover {
    background: #0842a0;
}

body.onec-design-page .onec-order-submit--wide svg {
    flex: 0 0 auto;
}

body.onec-design-page .fancybox-close-small {
    top: 16px !important;
    right: 16px !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border-radius: 999px;
    background: #f3f6fb !important;
    color: #5f6368 !important;
}

body.onec-design-page .fancybox-close-small:hover {
    background: #e8f0fe !important;
    color: #0b57d0 !important;
}

@media (max-width: 980px) {
    body.onec-design-page .onec-order-form {
        padding: 36px 28px 28px !important;
    }

    body.onec-design-page .onec-order-form__layout {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    body.onec-design-page .onec-order-form__intro p {
        max-width: none;
    }

    body.onec-design-page .onec-order-form__grid,
    body.onec-design-page .onec-order-form__checks {
        grid-template-columns: 1fr;
    }

    body.onec-design-page .onec-order-submit--wide {
        min-height: 84px;
        font-size: 24px;
    }
}

@media (max-width: 640px) {
    body.onec-design-page .onec-order-modal {
        width: calc(100vw - 16px) !important;
        max-height: calc(100vh - 16px);
        border-radius: 24px !important;
    }

    body.onec-design-page .onec-order-form {
        padding: 22px 18px 18px !important;
    }

    body.onec-design-page .onec-order-form__intro h2 {
        font-size: 42px;
    }

    body.onec-design-page .onec-order-field input,
    body.onec-design-page .onec-order-field select {
        height: 54px;
    }

    body.onec-design-page .onec-order-submit--wide {
        min-height: 72px;
        padding: 0 22px 0 24px;
        font-size: 20px;
    }
}


/* =========================================================
   1C modal — desktop viewport fit
   ========================================================= */

/* одинаковое пространство вокруг модалки */
body.onec-design-page
.fancybox__container:has(.onec-order-modal)
.fancybox__slide {
    padding: 24px !important;
}


/* шире на desktop */
body.onec-design-page .onec-order-modal {
    width: min(1320px, calc(100vw - 48px)) !important;
    max-width: 1320px !important;

    max-height: none !important;
    overflow: visible !important;

    border-radius: 30px !important;
}


/* чуть компактнее внутренние отступы */
body.onec-design-page .onec-order-form {
    padding: 38px 46px 34px !important;
}


/* левая колонка немного шире */
body.onec-design-page .onec-order-form__layout {
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 48px;
}


/* заголовок сохраняем крупным, но уменьшаем высоту блока */
body.onec-design-page .onec-order-form__eyebrow {
    margin-bottom: 13px;
}

body.onec-design-page .onec-order-form__intro h2 {
    margin-bottom: 18px;
    font-size: clamp(52px, 4.5vw, 68px);
}

body.onec-design-page .onec-order-form__intro p {
    font-size: 16px;
    line-height: 1.5;
}


/* поля немного ниже */
body.onec-design-page .onec-order-field input,
body.onec-design-page .onec-order-field select {
    height: 54px;
}

body.onec-design-page .onec-order-field textarea {
    min-height: 140px;
    height: 140px;
}


/* уменьшаем вертикальные интервалы */
body.onec-design-page .onec-order-form__content {
    gap: 14px;
}

body.onec-design-page .onec-order-form__grid {
    gap: 14px 18px;
}

body.onec-design-page .onec-order-field {
    gap: 7px;
}

body.onec-design-page .onec-order-form__checks {
    margin-top: 0;
}


/* кнопка как в старой композиции, но не такая высокая */
body.onec-design-page .onec-order-submit--wide {
    min-height: 78px;
    margin-top: 24px;
    padding: 0 30px 0 34px;

    font-size: clamp(24px, 2.5vw, 32px);
}


/* На нормальном desktop никакого внутреннего scroll */
@media (min-width: 901px) and (min-height: 760px) {

    body.onec-design-page .onec-order-modal {
        max-height: none !important;
        overflow: visible !important;
    }

}


/* Если экран реально низкий — разрешаем scroll */
@media (max-height: 759px) {

    body.onec-design-page .onec-order-modal {
        max-height: calc(100vh - 24px) !important;
        overflow-y: auto !important;
    }

}


/* tablet / mobile */
@media (max-width: 900px) {

    body.onec-design-page
    .fancybox__container:has(.onec-order-modal)
    .fancybox__slide {
        padding: 12px !important;
    }

    body.onec-design-page .onec-order-modal {
        width: calc(100vw - 24px) !important;
        max-height: calc(100vh - 24px) !important;
        overflow-y: auto !important;
    }

    body.onec-design-page .onec-order-form__layout {
        grid-template-columns: 1fr;
        gap: 28px;
    }

}


/* =========================================================
   1C modal — visual polish
   ========================================================= */

/* Снова выраженно округлая модалка */
body.onec-design-page .onec-order-modal {
    border-radius: 36px !important;
    overflow: hidden !important;
}


/* Поля — мягче, как в остальном новом интерфейсе */
body.onec-design-page .onec-order-field input,
body.onec-design-page .onec-order-field select,
body.onec-design-page .onec-order-field textarea {
    border-radius: 20px !important;
}

body.onec-design-page .onec-order-field input,
body.onec-design-page .onec-order-field select {
    height: 58px !important;
}

body.onec-design-page .onec-order-field textarea {
    border-radius: 22px !important;
}


/* Нижняя зона */
body.onec-design-page .onec-order-form__checks {
    display: flex !important;
    align-items: flex-start;
    justify-content: space-between;
    gap: 34px;
    margin-top: 6px;
}


/* Полностью сбрасываем старые стили checkbox */
body.onec-design-page .onec-order-check {
    flex: 1 1 0;
    min-width: 0;

    display: grid !important;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 10px;

    align-items: start;

    color: #5f6368 !important;

    font-size: 13px !important;
    line-height: 1.45 !important;
}

body.onec-design-page .onec-order-check input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;

    position: static !important;

    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 1px solid #bdc1c6 !important;
    border-radius: 6px !important;

    background: #fff !important;

    box-shadow: none !important;

    cursor: pointer !important;
}

body.onec-design-page .onec-order-check input[type="checkbox"]:checked {
    border-color: #0b57d0 !important;
    background:
        #0b57d0
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5 8.3 14 15 6.8' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
        center / 16px 16px
        no-repeat !important;
}


/* Текст политики не должен расползаться */
body.onec-design-page .onec-order-check span {
    min-width: 0;
}

body.onec-design-page .onec-order-check a {
    display: inline;
}


/* Прикрепить файл — заметнее */
body.onec-design-page .onec-order-file {
    margin-top: 2px;

    display: inline-flex;
    align-items: center;
    gap: 10px;

    width: fit-content;

    color: #3c4043 !important;

    font-size: 14px !important;
    font-weight: 500;
}

body.onec-design-page .onec-order-file::before {
    content: "＋";

    width: 28px;
    height: 28px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #dadce0;
    border-radius: 50%;

    background: #fff;

    color: #0b57d0;

    font-size: 18px;
    line-height: 1;
}

body.onec-design-page .onec-order-file:hover::before {
    background: #e8f0fe;
    border-color: #a8c7fa;
}


/* Закрытие тоже в общей системе */
body.onec-design-page .fancybox-close-small,
body.onec-design-page
.fancybox__container:has(.onec-order-modal)
.f-button.is-close-btn {
    width: 42px !important;
    height: 42px !important;

    border-radius: 50% !important;

    background: #f1f3f4 !important;
}


/* mobile */
@media (max-width: 760px) {
    body.onec-design-page .onec-order-form__checks {
        flex-direction: column;
        gap: 14px;
    }
}


/* =========================================================
   1C modal — width + checkbox final fix
   ========================================================= */

/* Desktop: одинаковые поля вокруг формы */
body.onec-design-page .onec-order-modal {
    width: calc(100vw - 56px) !important;
    max-width: 1440px !important;
    min-width: 0 !important;

    max-height: none !important;
    overflow: visible !important;

    border-radius: 36px !important;
}

/* внутренний layout */
body.onec-design-page .onec-order-form {
    padding: 42px 52px 34px !important;
}

body.onec-design-page .onec-order-form__layout {
    grid-template-columns: 330px minmax(0, 1fr) !important;
    gap: 64px !important;
}

/* правая колонка реально занимает всё оставшееся место */
body.onec-design-page .onec-order-form__content {
    width: 100%;
    min-width: 0;
}

/* чуть шире поля */
body.onec-design-page .onec-order-form__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px 20px !important;
}


/* =========================================================
   CHECKBOX — completely isolated
   ========================================================= */

body.onec-design-page .onec-order-form__checks {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
    align-items: start !important;

    margin-top: 8px !important;
}

/* убираем влияние старых глобальных checkbox-стилей */
body.onec-design-page .onec-order-check {
    position: relative !important;

    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;

    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;

    color: #5f6368 !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
}

/* настоящий checkbox полностью прячем */
body.onec-design-page .onec-order-check > input[type="checkbox"] {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    margin: 0 !important;
    padding: 0 !important;

    opacity: 0 !important;
    pointer-events: none !important;
}

/* рисуем свой checkbox */
body.onec-design-page .onec-order-check::before {
    content: "";

    flex: 0 0 20px;

    width: 20px;
    height: 20px;

    margin-top: 1px;

    border: 1px solid #bdc1c6;
    border-radius: 6px;

    background: #fff;

    box-sizing: border-box;
}

/* checked */
body.onec-design-page .onec-order-check:has(> input[type="checkbox"]:checked)::before {
    border-color: #0b57d0;

    background:
        #0b57d0
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5 8.3 14 15 6.8' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
        center / 16px 16px
        no-repeat;
}

/* hover */
body.onec-design-page .onec-order-check:hover::before {
    border-color: #0b57d0;
}

/* текст checkbox */
body.onec-design-page .onec-order-check > span {
    display: block !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
}

/* политика */
body.onec-design-page .onec-order-check a {
    color: #0b57d0 !important;
}


/* =========================================================
   File link — slightly stronger
   ========================================================= */

body.onec-design-page .onec-order-file {
    margin: 2px 0 2px !important;

    font-size: 14px !important;
    font-weight: 500 !important;
}


/* =========================================================
   Desktop viewport
   ========================================================= */

body.onec-design-page
.fancybox__container:has(.onec-order-modal)
.fancybox__slide {
    padding: 28px !important;
}


/* Только когда экран физически маленький — разрешаем scroll */
@media (max-width: 900px), (max-height: 760px) {

    body.onec-design-page .onec-order-modal {
        width: calc(100vw - 24px) !important;
        max-height: calc(100vh - 24px) !important;
        overflow-y: auto !important;
    }

}


/* mobile */
@media (max-width: 760px) {

    body.onec-design-page .onec-order-form {
        padding: 28px 20px 22px !important;
    }

    body.onec-design-page .onec-order-form__layout {
        grid-template-columns: 1fr !important;
        gap: 26px !important;
    }

    body.onec-design-page .onec-order-form__checks {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

}


/* =========================================================
   1C modal — final desktop width / radius fix
   ========================================================= */

/* Сам контейнер Fancybox не ограничивает ширину */
body.onec-design-page
.fancybox__container:has(.onec-order-modal)
.fancybox__slide {
    padding: 28px !important;
}

/* Именно эта обёртка сейчас зажимает форму */
body.onec-design-page
.fancybox__container:has(.onec-order-modal)
.fancybox__content {
    width: min(1440px, calc(100vw - 56px)) !important;
    max-width: none !important;
    min-width: 0 !important;

    padding: 0 !important;
    margin: auto !important;

    border-radius: 38px !important;

    background: #fff !important;

    overflow: hidden !important;

    box-shadow:
        0 24px 80px rgba(32, 33, 36, .18) !important;
}


/* Внутренняя modal занимает всю ширину обёртки */
body.onec-design-page .onec-order-modal {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border-radius: 38px !important;

    background: #fff !important;

    overflow: hidden !important;
}


/* Форма тоже без собственных ограничений */
body.onec-design-page .onec-order-form {
    width: 100% !important;
    max-width: none !important;

    padding: 42px 54px 34px !important;

    border-radius: 38px !important;

    background: #fff !important;
}


/* На широком экране даём больше места правой части */
body.onec-design-page .onec-order-form__layout {
    grid-template-columns: 340px minmax(0, 1fr) !important;
    gap: 72px !important;
}


/* Поля сохраняют мягкое скругление */
body.onec-design-page .onec-order-field input,
body.onec-design-page .onec-order-field select {
    border-radius: 20px !important;
}

body.onec-design-page .onec-order-field textarea {
    border-radius: 22px !important;
}


/* Кнопка тоже в общей округлой системе */
body.onec-design-page .onec-order-submit--wide {
    border-radius: 999px !important;
}


/* Нормальный desktop — форма целиком, без scroll */
@media (min-width: 901px) and (min-height: 760px) {

    body.onec-design-page
    .fancybox__container:has(.onec-order-modal)
    .fancybox__content,
    body.onec-design-page .onec-order-modal {
        max-height: none !important;
        overflow: hidden !important;
    }

}


/* Только если экран физически не вмещает форму */
@media (max-width: 900px), (max-height: 759px) {

    body.onec-design-page
    .fancybox__container:has(.onec-order-modal)
    .fancybox__content {
        width: calc(100vw - 24px) !important;
        max-height: calc(100vh - 24px) !important;
        overflow-y: auto !important;

        border-radius: 26px !important;
    }

    body.onec-design-page .onec-order-modal {
        border-radius: 26px !important;
    }

    body.onec-design-page .onec-order-form {
        padding: 30px 24px 24px !important;
        border-radius: 26px !important;
    }

}


/* =========================================================
   1C modal — exact Fancybox width fix
   #modal-order IS .fancybox__content
   ========================================================= */

body.onec-design-page .fancybox__content.onec-order-modal {
    width: calc(100vw - 48px) !important;
    max-width: none !important;
    min-width: 0 !important;

    height: auto !important;
    max-height: calc(100dvh - 48px) !important;

    margin: auto !important;
    padding: 0 !important;

    border-radius: 36px !important;

    background: #fff !important;

    overflow-x: hidden !important;
    overflow-y: visible !important;

    box-shadow: 0 24px 80px rgba(32,33,36,.18) !important;
}

body.onec-design-page
.fancybox__slide:has(.fancybox__content.onec-order-modal) {
    padding: 24px !important;
}


/* На обычном desktop вся форма должна помещаться без своего scroll */
@media (min-width: 901px) and (min-height: 760px) {

    body.onec-design-page .fancybox__content.onec-order-modal {
        overflow: hidden !important;
    }

}


/* Scroll только когда экран действительно тесный */
@media (max-width: 900px), (max-height: 759px) {

    body.onec-design-page .fancybox__content.onec-order-modal {
        width: calc(100vw - 24px) !important;
        max-height: calc(100dvh - 24px) !important;

        border-radius: 26px !important;

        overflow-y: auto !important;
    }

    body.onec-design-page
    .fancybox__slide:has(.fancybox__content.onec-order-modal) {
        padding: 12px !important;
    }

}

/* =========================================================
   FINAL modal width override
   beats old #modal-order 920px rule by specificity
   ========================================================= */

html body.onec-design-page
#modal-order.onec-order-modal.fancybox__content {
    width: calc(100vw - 48px) !important;
    max-width: none !important;
    min-width: 0 !important;

    margin-left: 24px !important;
    margin-right: 24px !important;

    border-radius: 36px !important;
}

@media (max-width: 900px) {
    html body.onec-design-page
    #modal-order.onec-order-modal.fancybox__content {
        width: calc(100vw - 24px) !important;

        margin-left: 12px !important;
        margin-right: 12px !important;

        border-radius: 26px !important;
    }
}


#integration-mode-anchor {
    width: 100%;
    height: 0;
    margin: 0;
    padding: 0;
}

/* Submit button aligned with right form column */

body.onec-design-page .onec-order-submit--wide {
    width: auto !important;
    min-width: 0 !important;

    margin:
        24px
        52px
        34px
        calc(340px + 72px + 52px) !important;

    padding: 0 32px 0 38px !important;

    align-self: stretch;
}

@media (max-width: 1099px) {
    body.onec-design-page .onec-order-submit--wide {
        width: calc(100% - 60px) !important;
        margin: 0 30px 28px !important;
    }
}


/* Submit = ширина правой колонки формы */

body.onec-design-page .onec-order-submit--wide {
    width: calc(100% - 52px - 340px - 72px - 52px) !important;
    max-width: none !important;

    margin:
        24px
        52px
        34px
        calc(52px + 340px + 72px) !important;

    min-height: 78px !important;

    justify-content: space-between !important;
}

@media (max-width: 1099px) {
    body.onec-design-page .onec-order-submit--wide {
        width: calc(100% - 60px) !important;
        margin: 0 30px 28px !important;
    }
}

/* Submit = exactly the same width as right form column */

body.onec-design-page .onec-order-form {
    --form-left: 340px;
    --form-gap: 72px;
    --form-pad-x: 52px;
}

body.onec-design-page .onec-order-submit--wide {
    width: auto !important;

    margin-left:
        calc(
            var(--form-pad-x) +
            var(--form-left) +
            var(--form-gap)
        ) !important;

    margin-right:
        var(--form-pad-x) !important;

    margin-top: 24px !important;
    margin-bottom: 34px !important;

    display: flex !important;
    align-items: center;
    justify-content: space-between !important;
}

@media (max-width: 1099px) {
    body.onec-design-page .onec-order-submit--wide {
        margin-left: 30px !important;
        margin-right: 30px !important;
    }
}


/* Submit button = exact width of right form column */

html body.onec-design-page
#modal-order
.onec-order-form
> .onec-order-submit--wide {
    margin-left: 464px !important;
    margin-right: 52px !important;

    width: calc(100% - 516px) !important;
    max-width: none !important;

    box-sizing: border-box !important;

    min-height: 78px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

@media (max-width: 1099px) {
    html body.onec-design-page
    #modal-order
    .onec-order-form
    > .onec-order-submit--wide {
        margin-left: 30px !important;
        margin-right: 30px !important;

        width: calc(100% - 60px) !important;
    }
}


/* Submit lives inside right column — same width as textarea */

html body.onec-design-page
#modal-order
.onec-order-form__content
> .onec-order-submit--wide {
    width: 100% !important;
    max-width: none !important;

    margin: 8px 0 0 !important;

    min-height: 78px !important;

    box-sizing: border-box !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}


/* Submit exactly matches right column width */

html body.onec-design-page
#modal-order
.onec-order-form__content
> .onec-order-submit--wide {
    width: 100% !important;
    max-width: none !important;

    margin: 10px 0 0 !important;

    min-height: 78px !important;

    box-sizing: border-box !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}


/* submit is physically inside the right column */

html body.onec-design-page
#modal-order
.onec-order-form__content
> .onec-order-submit--wide {
    width: 100% !important;
    max-width: none !important;

    margin: 10px 0 0 !important;

    min-height: 78px !important;

    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}


/* =========================================================
   OVERVIEW — scenario cards visual system
   ========================================================= */

.integration-page[data-page-mode="overview"]
.integration-choice-section {
    background: #f8fafd;
}

.integration-choice-grid {
    gap: 18px !important;
}

.integration-choice-card {
    position: relative;

    min-height: 280px !important;
    padding: 28px !important;

    display: flex !important;
    flex-direction: column;

    border: 1px solid #dadce0 !important;
    border-radius: 26px !important;

    background: #fff !important;

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease !important;
}

.integration-choice-card:hover {
    transform: translateY(-3px);

    border-color: #b7c7e6 !important;

    box-shadow:
        0 8px 26px rgba(60,64,67,.10) !important;
}

.integration-choice-card.active {
    border: 2px solid #0b57d0 !important;

    background:
        linear-gradient(
            180deg,
            #fff 0%,
            #f8fbff 100%
        ) !important;

    box-shadow:
        0 8px 28px rgba(11,87,208,.08) !important;
}


/* icon */

.integration-choice-icon {
    width: 56px;
    height: 56px;

    margin-bottom: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 17px;

    background: #e8f0fe;
}

.integration-choice-icon svg {
    width: 27px;
    height: 27px;

    fill: none;
    stroke: #0b57d0;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.integration-choice-icon--1c {
    position: relative;

    background: #fff4bf;
}

.integration-choice-icon--1c svg {
    width: 24px;
    height: 24px;

    stroke: #8a6d00;
    opacity: .48;
}

.integration-choice-icon--1c span {
    position: absolute;
    z-index: 2;

    color: #202124;

    font-size: 14px;
    font-weight: 700;
}


/* typography */

.integration-choice-card small {
    margin-bottom: 14px;

    color: #80868b !important;

    font-size: 12px !important;
    font-weight: 500;
}

.integration-choice-card h3 {
    margin: 0 0 12px !important;

    color: #202124 !important;

    font-size: 23px !important;
    line-height: 1.15 !important;
    font-weight: 500 !important;
}

.integration-choice-card p {
    margin: 0 !important;

    color: #5f6368 !important;

    font-size: 14px !important;
    line-height: 1.5 !important;
}


/* выбранный сценарий */

.integration-choice-detail {
    margin-top: 22px !important;
    padding: 28px 32px !important;

    display: grid;
    grid-template-columns: 220px minmax(0,1fr);
    gap: 34px;
    align-items: start;

    border: 0 !important;
    border-radius: 24px !important;

    background: #e8f0fe !important;
}

.integration-choice-detail h3 {
    margin: 0 !important;

    color: #202124 !important;

    font-size: 24px !important;
    font-weight: 500 !important;
}

.integration-choice-detail p {
    margin: 0 !important;

    max-width: 760px;

    color: #5f6368 !important;

    font-size: 14px !important;
    line-height: 1.6 !important;
}


@media (max-width: 900px) {

    .integration-choice-grid {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    }

    .integration-choice-detail {
        grid-template-columns: 1fr;
        gap: 12px;
    }

}

@media (max-width: 600px) {

    .integration-choice-grid {
        grid-template-columns: 1fr !important;
    }

    .integration-choice-card {
        min-height: 240px !important;
    }

}


/* ERP icon = same visual language as other overview cards */
.integration-choice-card .integration-choice-icon--erp,
.integration-choice-card:has(h3:contains("ERP-процесс")) .integration-choice-icon {
    background: #e8f0fe !important;
    color: #1967d2 !important;
    border: none !important;
    box-shadow: none !important;
}

.integration-choice-card .integration-choice-icon--erp svg,
.integration-choice-card:has(h3:contains("ERP-процесс")) .integration-choice-icon svg {
    stroke: currentColor !important;
    fill: none !important;
}

.integration-choice-card .integration-choice-icon--erp polygon,
.integration-choice-card .integration-choice-icon--erp path[fill],
.integration-choice-card .integration-choice-icon--erp rect[fill="#fbbc04"],
.integration-choice-card .integration-choice-icon--erp rect[fill="#F4B400"],
.integration-choice-card .integration-choice-icon--erp polygon[fill],
.integration-choice-card .integration-choice-icon--erp .diamond {
    display: none !important;
}

/* ERP icon — same style as the other scenario icons */
.integration-choice-icon--1c {
    background: #e8f0fe !important;
}

.integration-choice-icon--1c span {
    display: none !important;
}

.integration-choice-icon--1c svg {
    width: 27px !important;
    height: 27px !important;

    stroke: #0b57d0 !important;
    opacity: 1 !important;
}


/* =========================================================
   OVERVIEW — transferred entities
   ========================================================= */

.integration-entity-visual {
    width: 50px;
    height: 50px;

    margin-bottom: 26px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 15px;

    font-size: 20px;
    font-weight: 600;
}

.entity-catalog,
.entity-order {
    background: #e8f0fe;
    color: #0b57d0;
}

.entity-price,
.entity-payment,
.entity-status {
    background: #e6f4ea;
    color: #188038;
}

.entity-stock {
    background: #fef7e0;
    color: #b06000;
}

.entity-client {
    background: #f3e8fd;
    color: #9334e6;
}

.entity-shipping {
    background: #fce8e6;
    color: #c5221f;
}

.integration-page[data-page-mode="overview"]
.integration-entities-grid article {
    min-height: 210px;

    padding: 26px;

    border: 1px solid #dadce0;
    border-radius: 22px;

    background: #fff;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}

.integration-page[data-page-mode="overview"]
.integration-entities-grid article:hover {
    transform: translateY(-2px);

    border-color: #c5d2e8;

    box-shadow:
        0 7px 22px rgba(60,64,67,.08);
}

.integration-page[data-page-mode="overview"]
.integration-entities-grid h3 {
    margin: 0 0 9px;

    font-size: 19px;
    line-height: 1.2;
    font-weight: 500;
}

.integration-page[data-page-mode="overview"]
.integration-entities-grid p {
    margin: 0;

    color: #5f6368;

    font-size: 13px;
    line-height: 1.55;
}


/* =========================================================
   OVERVIEW — synchronized data
   ========================================================= */

.integration-overview-data-section {
    padding: 104px 0 112px;
    background: #fff;
}

.integration-page:not([data-page-mode="overview"])
.integration-overview-data-section {
    display: none;
}

.integration-overview-data-head {
    max-width: 700px;
    margin-bottom: 42px;
}

.integration-overview-data-head h2 {
    margin: 10px 0 14px;

    color: #202124;

    font-size: clamp(32px, 3vw, 46px);
    line-height: 1.08;
    font-weight: 500;
    letter-spacing: -.025em;
}

.integration-overview-data-head p {
    max-width: 620px;
    margin: 0;

    color: #5f6368;

    font-size: 17px;
    line-height: 1.6;
}

.integration-overview-data-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.integration-data-item {
    min-height: 235px;
    padding: 26px;

    border: 1px solid #e1e4e8;
    border-radius: 24px;

    background: #fff;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}

.integration-data-item:hover {
    transform: translateY(-2px);

    border-color: #c9d3e6;

    box-shadow: 0 8px 24px rgba(60,64,67,.08);
}

.integration-data-icon {
    width: 52px;
    height: 52px;

    margin-bottom: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 16px;
}

.integration-data-icon svg {
    width: 25px;
    height: 25px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.integration-data-icon span {
    font-size: 20px;
    font-weight: 600;
}

.integration-data-icon--blue {
    color: #0b57d0;
    background: #e8f0fe;
}

.integration-data-icon--green {
    color: #188038;
    background: #e6f4ea;
}

.integration-data-icon--yellow {
    color: #a05a00;
    background: #fef7e0;
}

.integration-data-icon--purple {
    color: #8430ce;
    background: #f3e8fd;
}

.integration-data-icon--red {
    color: #c5221f;
    background: #fce8e6;
}

.integration-data-item h3 {
    margin: 0 0 10px;

    color: #202124;

    font-size: 20px;
    line-height: 1.25;
    font-weight: 500;
}

.integration-data-item p {
    margin: 0;

    color: #5f6368;

    font-size: 14px;
    line-height: 1.55;
}

@media (max-width: 1050px) {
    .integration-overview-data-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .integration-overview-data-section {
        padding: 72px 0 80px;
    }

    .integration-overview-data-grid {
        grid-template-columns: 1fr;
    }

    .integration-data-item {
        min-height: auto;
    }
}


/* =========================================================
   OVERVIEW — exchange flow
   ========================================================= */

.integration-overview-flow {
    padding: 112px 0 120px;
    background: #f8fafd;
}

.integration-page:not([data-page-mode="overview"])
.integration-overview-flow {
    display: none;
}

.integration-overview-flow-head {
    max-width: 720px;
    margin-bottom: 56px;
}

.integration-overview-flow-head h2 {
    margin: 10px 0 14px;

    color: #202124;

    font-size: clamp(34px, 3vw, 48px);
    line-height: 1.08;
    font-weight: 500;
    letter-spacing: -.025em;
}

.integration-overview-flow-head p {
    max-width: 650px;
    margin: 0;

    color: #5f6368;

    font-size: 17px;
    line-height: 1.6;
}

.integration-overview-flow-track {
    display: grid;
    grid-template-columns:
        minmax(0,1fr) 42px
        minmax(0,1fr) 42px
        minmax(0,1fr) 42px
        minmax(0,1fr);

    align-items: center;
}

.integration-flow-step {
    min-height: 300px;
    padding: 28px;

    border: 1px solid #e0e3e7;
    border-radius: 26px;

    background: #fff;
}

.integration-flow-number {
    margin-bottom: 24px;

    color: #9aa0a6;

    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
}

.integration-flow-icon {
    width: 54px;
    height: 54px;

    margin-bottom: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 17px;

    color: #0b57d0;
    background: #e8f0fe;
}

.integration-flow-icon svg {
    width: 27px;
    height: 27px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.integration-flow-step h3 {
    margin: 0 0 12px;

    color: #202124;

    font-size: 20px;
    line-height: 1.3;
    font-weight: 500;
}

.integration-flow-step p {
    margin: 0;

    color: #5f6368;

    font-size: 14px;
    line-height: 1.55;
}

.integration-flow-arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    color: #9aa0a6;
}

.integration-flow-arrow svg {
    width: 34px;
    height: 20px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 1100px) {

    .integration-overview-flow-track {
        grid-template-columns: repeat(2, minmax(0,1fr));
        gap: 18px;
    }

    .integration-flow-arrow {
        display: none;
    }

}

@media (max-width: 620px) {

    .integration-overview-flow {
        padding: 78px 0 84px;
    }

    .integration-overview-flow-track {
        grid-template-columns: 1fr;
    }

    .integration-flow-step {
        min-height: auto;
    }

}

/* =========================================================
   OVERVIEW — editorial block
   ========================================================= */

.integration-editorial {
    padding: 118px 0;
    background: #fff;
}

.integration-page:not([data-page-mode="overview"])
.integration-editorial {
    display: none;
}

.integration-editorial-grid {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: 76px;
    align-items: center;
}

.integration-editorial-visual {
    min-height: 560px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 54px;

    border-radius: 32px;

    background:
        linear-gradient(
            145deg,
            #eef4ff 0%,
            #f8fafd 55%,
            #fff7d6 100%
        );
}

.integration-editorial-window {
    width: 100%;
    max-width: 560px;

    padding: 24px;

    border: 1px solid rgba(60,64,67,.12);
    border-radius: 24px;

    background: rgba(255,255,255,.94);

    box-shadow:
        0 20px 60px rgba(60,64,67,.12);
}

.integration-editorial-window-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 24px;
}

.integration-editorial-window-head > div {
    display: flex;
    align-items: center;
    gap: 12px;
}

.integration-editorial-window-head strong,
.integration-editorial-window-head small {
    display: block;
}

.integration-editorial-window-head strong {
    color: #202124;
    font-size: 15px;
}

.integration-editorial-window-head small {
    margin-top: 3px;
    color: #80868b;
    font-size: 12px;
}

.integration-editorial-app-icon {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 13px;

    background: #fff1a8;
    color: #202124;

    font-size: 14px;
    font-weight: 700;
}

.integration-editorial-status {
    padding: 7px 10px;

    border-radius: 999px;

    background: #e6f4ea;
    color: #188038;

    font-size: 11px;
    font-weight: 600;
}

.integration-editorial-table {
    overflow: hidden;

    border: 1px solid #e0e3e7;
    border-radius: 16px;
}

.integration-editorial-row {
    display: grid;
    grid-template-columns: minmax(0,1.5fr) .8fr .65fr;
    gap: 16px;

    padding: 15px 16px;

    border-top: 1px solid #eceff1;

    color: #5f6368;

    font-size: 13px;
}

.integration-editorial-row:first-child {
    border-top: 0;
}

.integration-editorial-row--head {
    background: #f8fafd;

    color: #80868b;

    font-size: 11px;
    font-weight: 600;
}

.integration-editorial-row strong {
    color: #202124;
    font-weight: 500;
}

.stock-ok {
    color: #188038;
}

.stock-low {
    color: #b06000;
}

.integration-editorial-sync {
    margin-top: 20px;
    padding: 18px;

    display: flex;
    gap: 14px;
    align-items: center;

    border-radius: 16px;

    background: #e8f0fe;
}

.integration-editorial-sync-icon {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 13px;

    background: #fff;
    color: #0b57d0;
}

.integration-editorial-sync-icon svg {
    width: 22px;
    height: 22px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.integration-editorial-sync strong,
.integration-editorial-sync span {
    display: block;
}

.integration-editorial-sync strong {
    margin-bottom: 3px;

    color: #202124;

    font-size: 13px;
    font-weight: 600;
}

.integration-editorial-sync span {
    color: #5f6368;

    font-size: 12px;
    line-height: 1.4;
}

.integration-editorial-copy {
    max-width: 600px;
}

.integration-editorial-copy h2 {
    margin: 14px 0 26px;

    color: #202124;

    font-size: clamp(42px, 4.2vw, 66px);
    line-height: .98;
    font-weight: 500;
    letter-spacing: -.045em;
}

.integration-editorial-copy p {
    max-width: 560px;
    margin: 0 0 18px;

    color: #5f6368;

    font-size: 17px;
    line-height: 1.65;
}

@media (max-width: 980px) {

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

    .integration-editorial-copy {
        max-width: 720px;
    }

}

@media (max-width: 620px) {

    .integration-editorial {
        padding: 78px 0;
    }

    .integration-editorial-visual {
        min-height: auto;
        padding: 24px;
        border-radius: 24px;
    }

    .integration-editorial-copy h2 {
        font-size: 42px;
    }

}

/* =========================================================
   OVERVIEW — editorial web / CRM
   ========================================================= */

.integration-editorial-grid--reverse {
    grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
}

.integration-editorial-visual--web {
    position: relative;

    min-height: 600px;

    background:
        linear-gradient(
            145deg,
            #eef4ff 0%,
            #f8fbff 48%,
            #edf7ef 100%
        );
}

.integration-editorial-points {
    margin-top: 34px;

    display: grid;
    gap: 12px;
}

.integration-editorial-points > div {
    display: flex;
    align-items: center;
    gap: 11px;

    color: #3c4043;

    font-size: 15px;
}

.integration-editorial-check {
    width: 28px;
    height: 28px;

    flex: 0 0 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #e6f4ea;
    color: #188038;

    font-size: 14px;
    font-weight: 700;
}

.integration-web-stack {
    position: relative;

    width: 100%;
    max-width: 610px;

    margin: auto;
}

.integration-browser-window {
    overflow: hidden;

    border: 1px solid rgba(60,64,67,.14);
    border-radius: 24px;

    background: #fff;

    box-shadow:
        0 22px 65px rgba(60,64,67,.13);
}

.integration-browser-head {
    height: 54px;

    display: flex;
    align-items: center;
    gap: 18px;

    padding: 0 18px;

    border-bottom: 1px solid #eceff1;

    background: #f8fafd;
}

.integration-browser-dots {
    display: flex;
    gap: 6px;
}

.integration-browser-dots span {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #bdc1c6;
}

.integration-browser-address {
    flex: 1;

    padding: 8px 14px;

    border-radius: 999px;

    background: #fff;

    color: #80868b;

    font-size: 11px;
}

.integration-browser-body {
    min-height: 355px;

    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 28px;

    padding: 34px;
}

.integration-product-image {
    min-height: 265px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 18px;

    background: #f1f5fb;
}

.integration-product-device {
    position: relative;

    width: 150px;
    height: 102px;

    border: 7px solid #3c4043;
    border-radius: 8px;

    background: #d9e7ff;
}

.integration-product-device::after {
    content: "";

    position: absolute;
    left: -18px;
    right: -18px;
    bottom: -15px;

    height: 9px;

    border-radius: 0 0 12px 12px;

    background: #5f6368;
}

.integration-product-device div {
    position: absolute;
    inset: 12px;

    border-radius: 3px;

    background:
        linear-gradient(
            135deg,
            #c6dafc,
            #e8f0fe
        );
}

.integration-product-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.integration-product-label {
    margin-bottom: 10px;

    color: #80868b;

    font-size: 12px;
}

.integration-product-info > strong {
    color: #202124;

    font-size: 24px;
    font-weight: 500;
}

.integration-product-price {
    margin-top: 20px;

    color: #202124;

    font-size: 27px;
    font-weight: 500;
}

.integration-product-stock {
    margin-top: 12px;

    display: flex;
    align-items: center;
    gap: 8px;

    color: #5f6368;

    font-size: 13px;
}

.integration-product-stock span {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #34a853;
}

.integration-product-info button {
    margin-top: 28px;

    width: fit-content;

    padding: 12px 20px;

    border: 0;
    border-radius: 999px;

    background: #0b57d0;
    color: #fff;

    font-size: 13px;
    font-weight: 600;
}

.integration-crm-card {
    position: absolute;

    right: -34px;
    bottom: -42px;

    width: 250px;

    padding: 20px;

    border: 1px solid rgba(60,64,67,.14);
    border-radius: 20px;

    background: #fff;

    box-shadow:
        0 16px 45px rgba(60,64,67,.15);
}

.integration-crm-card-head {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 16px;
}

.integration-crm-icon {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: #e8f0fe;
    color: #0b57d0;
}

.integration-crm-icon svg {
    width: 20px;
    height: 20px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.integration-crm-card-head strong,
.integration-crm-card-head span {
    display: block;
}

.integration-crm-card-head strong {
    color: #202124;

    font-size: 13px;
}

.integration-crm-card-head span {
    margin-top: 2px;

    color: #80868b;

    font-size: 11px;
}

.integration-crm-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;

    padding: 9px 0;

    border-top: 1px solid #f1f3f4;

    font-size: 11px;
}

.integration-crm-row span {
    color: #80868b;
}

.integration-crm-row strong {
    color: #3c4043;
    font-weight: 500;
}

.integration-crm-status {
    color: #188038 !important;
}

.integration-sync-badge {
    position: absolute;

    left: -28px;
    bottom: 36px;

    min-width: 225px;

    display: flex;
    align-items: center;
    gap: 12px;

    padding: 15px 17px;

    border-radius: 18px;

    background: #fff;

    box-shadow:
        0 15px 40px rgba(60,64,67,.14);
}

.integration-sync-badge-icon {
    width: 37px;
    height: 37px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: #e6f4ea;
    color: #188038;
}

.integration-sync-badge-icon svg {
    width: 19px;
    height: 19px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.integration-sync-badge strong,
.integration-sync-badge span {
    display: block;
}

.integration-sync-badge strong {
    color: #202124;

    font-size: 12px;
}

.integration-sync-badge span {
    margin-top: 2px;

    color: #80868b;

    font-size: 10px;
}

@media (max-width: 980px) {

    .integration-editorial-grid--reverse {
        grid-template-columns: 1fr;
    }

    .integration-editorial-visual--web {
        min-height: 570px;
    }

}

@media (max-width: 680px) {

    .integration-browser-body {
        grid-template-columns: 1fr;
    }

    .integration-crm-card,
    .integration-sync-badge {
        position: static;

        width: auto;
        margin-top: 18px;
    }

    .integration-editorial-visual--web {
        min-height: auto;
    }

}

/* =========================================================
   OVERVIEW — workflow editorial
   ========================================================= */

.integration-workflow-editorial {
    padding: 126px 0 130px;
    background: #fff;
}

.integration-page:not([data-page-mode="overview"])
.integration-workflow-editorial {
    display: none;
}

.integration-workflow-copy {
    max-width: 920px;
    margin: 0 auto 72px;
    text-align: center;
}

.integration-workflow-copy h2 {
    margin: 14px auto 24px;
    max-width: 900px;

    color: #202124;

    font-size: clamp(42px, 5vw, 72px);
    line-height: .98;
    font-weight: 500;
    letter-spacing: -.045em;
}

.integration-workflow-copy p {
    max-width: 700px;
    margin: 0 auto;

    color: #5f6368;

    font-size: 18px;
    line-height: 1.6;
}

.integration-workflow-stage {
    position: relative;

    min-height: 620px;

    border-radius: 36px;

    background:
        radial-gradient(
            circle at 50% 50%,
            #eef4ff 0,
            #f8fafd 34%,
            #fff 72%
        );

    overflow: hidden;
}

.integration-workflow-core {
    position: absolute;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    z-index: 3;

    text-align: center;
}

.integration-workflow-core-ring {
    width: 180px;
    height: 180px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        conic-gradient(
            from 0deg,
            #4285f4,
            #34a853,
            #fbbc04,
            #ea4335,
            #4285f4
        );

    box-shadow:
        0 20px 60px rgba(66,133,244,.18);
}

.integration-workflow-core-inner {
    width: 160px;
    height: 160px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #fff;
}

.integration-workflow-core-inner strong {
    color: #0b57d0;

    font-size: 34px;
    line-height: 1;
    font-weight: 600;
}

.integration-workflow-core-inner span {
    margin-top: 8px;

    color: #80868b;

    font-size: 12px;
}

.integration-workflow-core-status {
    margin-top: 14px;

    color: #5f6368;

    font-size: 12px;
    font-weight: 500;
}

.integration-workflow-node {
    position: absolute;
    z-index: 3;

    width: 250px;

    display: flex;
    align-items: center;
    gap: 14px;

    padding: 20px;

    border: 1px solid #e0e3e7;
    border-radius: 22px;

    background: rgba(255,255,255,.96);

    box-shadow:
        0 12px 38px rgba(60,64,67,.09);
}

.integration-workflow-node strong,
.integration-workflow-node span {
    display: block;
}

.integration-workflow-node strong {
    color: #202124;

    font-size: 14px;
    font-weight: 600;
}

.integration-workflow-node > div:last-child span {
    margin-top: 4px;

    color: #80868b;

    font-size: 11px;
    line-height: 1.35;
}

.integration-workflow-node-icon {
    width: 46px;
    height: 46px;

    flex: 0 0 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 14px;

    background: #e8f0fe;
    color: #0b57d0;
}

.integration-workflow-node-icon svg {
    width: 23px;
    height: 23px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.integration-workflow-node--onec {
    left: 7%;
    top: 15%;
}

.integration-workflow-node--onec .integration-workflow-node-icon {
    background: #fff1a8;
    color: #202124;

    font-size: 14px;
    font-weight: 700;
}

.integration-workflow-node--crm {
    left: 9%;
    bottom: 14%;
}

.integration-workflow-node--site {
    right: 7%;
    top: 15%;
}

.integration-workflow-node--client {
    right: 9%;
    bottom: 14%;
}

.integration-workflow-line {
    position: absolute;
    z-index: 1;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(11,87,208,.10),
            rgba(11,87,208,.45),
            rgba(11,87,208,.10)
        );

    transform-origin: left center;
}

.integration-workflow-line--1 {
    left: 26%;
    top: 30%;

    width: 29%;
    transform: rotate(17deg);
}

.integration-workflow-line--2 {
    left: 26%;
    bottom: 29%;

    width: 29%;
    transform: rotate(-17deg);
}

.integration-workflow-line--3 {
    left: 50%;
    top: 50%;

    width: 28%;
    transform: rotate(-17deg);
}

.integration-workflow-line--4 {
    left: 50%;
    top: 50%;

    width: 28%;
    transform: rotate(17deg);
}

@media (max-width: 980px) {

    .integration-workflow-stage {
        min-height: auto;

        padding: 40px;

        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px;
    }

    .integration-workflow-core,
    .integration-workflow-node {
        position: static;
        transform: none;

        width: auto;
    }

    .integration-workflow-core {
        grid-column: 1 / -1;

        margin: 20px auto;
    }

    .integration-workflow-line {
        display: none;
    }

}

@media (max-width: 620px) {

    .integration-workflow-editorial {
        padding: 80px 0;
    }

    .integration-workflow-copy {
        margin-bottom: 48px;
    }

    .integration-workflow-stage {
        grid-template-columns: 1fr;
        padding: 22px;
        border-radius: 26px;
    }

    .integration-workflow-core {
        grid-column: auto;
    }

}

/* =========================================================
   OVERVIEW — integration technologies
   ========================================================= */

.integration-info-section {
    padding: 108px 0 116px !important;
    background: #f8fafd !important;
}

.integration-page:not([data-page-mode="overview"])
.integration-info-section {
    display: none;
}

.integration-info-section .integration-section-head {
    margin-bottom: 46px;
}

.integration-info-section .integration-section-head h2 {
    margin-top: 10px;

    font-size: clamp(38px, 4vw, 58px) !important;
    line-height: 1 !important;
    font-weight: 500 !important;
    letter-spacing: -.035em;
}

.integration-info-section .integration-tech-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 18px;
}

.integration-info-section .integration-tech-grid article {
    position: relative;

    min-height: 270px;
    padding: 30px;

    display: flex;
    flex-direction: column;

    border: 1px solid #e0e3e7 !important;
    border-radius: 26px !important;

    background: #fff !important;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}

.integration-info-section .integration-tech-grid article:hover {
    transform: translateY(-2px);

    border-color: #c7d2e6 !important;

    box-shadow:
        0 10px 30px rgba(60,64,67,.08);
}

.integration-tech-icon {
    width: 56px;
    height: 56px;

    margin-bottom: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 17px;

    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.04em;
}

.integration-tech-icon svg {
    width: 27px;
    height: 27px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.integration-tech-icon--api {
    color: #0b57d0;
    background: #e8f0fe;
}

.integration-tech-icon--xml {
    color: #9334e6;
    background: #f3e8fd;
}

.integration-tech-icon--odata {
    color: #188038;
    background: #e6f4ea;
}

.integration-tech-icon--erp {
    color: #b06000;
    background: #fef7e0;
}

.integration-info-section .integration-tech-grid strong {
    display: block;

    margin-bottom: 12px;

    color: #202124;

    font-size: 22px !important;
    line-height: 1.2;
    font-weight: 500 !important;
}

.integration-info-section .integration-tech-grid p {
    max-width: 500px;
    margin: 0;

    color: #5f6368;

    font-size: 14px;
    line-height: 1.6;
}

@media (max-width: 720px) {

    .integration-info-section {
        padding: 78px 0 84px !important;
    }

    .integration-info-section .integration-tech-grid {
        grid-template-columns: 1fr;
    }

    .integration-info-section .integration-tech-grid article {
        min-height: auto;
    }

}

/* =========================================================
   OVERVIEW — integration scenarios
   ========================================================= */

.integration-scenarios-section {
    padding: 108px 0 118px !important;
    background: #fff !important;
}

.integration-page:not([data-page-mode="overview"])
.integration-scenarios-section {
    display: none;
}

.integration-scenarios-section .integration-section-head {
    margin-bottom: 46px;
}

.integration-scenarios-section .integration-section-head h2 {
    margin-top: 10px;

    font-size: clamp(38px, 4vw, 58px) !important;
    line-height: 1 !important;
    font-weight: 500 !important;
    letter-spacing: -.035em;
}

.integration-scenarios-section .integration-scenario-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 18px;
}

.integration-scenarios-section .integration-scenario-grid article {
    position: relative;

    min-height: 260px;
    padding: 30px;

    border: 1px solid #e0e3e7 !important;
    border-radius: 26px !important;

    background: #fff !important;

    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.integration-scenarios-section .integration-scenario-grid article:hover {
    transform: translateY(-2px);

    border-color: #c7d2e6 !important;

    box-shadow:
        0 10px 30px rgba(60,64,67,.08);
}

/* номер сценария */

.integration-scenarios-section
.integration-scenario-grid article > span:first-child {
    position: absolute;

    top: 30px;
    right: 30px;

    color: #9aa0a6;

    font-size: 12px;
    font-weight: 600;
}

/* иконки */

.integration-scenario-icon {
    width: 56px;
    height: 56px;

    margin-bottom: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 17px;
}

.integration-scenario-icon svg {
    width: 27px;
    height: 27px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.integration-scenario-icon--blue {
    color: #0b57d0;
    background: #e8f0fe;
}

.integration-scenario-icon--purple {
    color: #8430ce;
    background: #f3e8fd;
}

.integration-scenario-icon--green {
    color: #188038;
    background: #e6f4ea;
}

.integration-scenario-icon--yellow {
    color: #a05a00;
    background: #fef7e0;
}

.integration-scenarios-section
.integration-scenario-grid h3 {
    margin: 0 0 12px;

    color: #202124;

    font-size: 23px !important;
    line-height: 1.2;
    font-weight: 500 !important;
}

.integration-scenarios-section
.integration-scenario-grid p {
    max-width: 520px;
    margin: 0;

    color: #5f6368;

    font-size: 14px;
    line-height: 1.6;
}

@media (max-width: 720px) {

    .integration-scenarios-section {
        padding: 78px 0 84px !important;
    }

    .integration-scenarios-section .integration-scenario-grid {
        grid-template-columns: 1fr;
    }

    .integration-scenarios-section .integration-scenario-grid article {
        min-height: auto;
    }

}

/* =========================================================
   OVERVIEW — ERP business process
   ========================================================= */

.integration-erp-section {
    padding: 112px 0 122px !important;
    background: #f8fafd !important;
}

.integration-page:not([data-page-mode="overview"])
.integration-erp-section {
    display: none;
}

.integration-erp-section .integration-section-head {
    margin-bottom: 52px;
}

.integration-erp-section .integration-section-head h2 {
    margin-top: 10px;

    max-width: 900px;

    font-size: clamp(40px, 4.2vw, 62px) !important;
    line-height: 1 !important;
    font-weight: 500 !important;
    letter-spacing: -.04em;
}

.integration-erp-map {
    position: relative;

    display: grid !important;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 16px !important;
}

/* тонкая линия процесса */

.integration-erp-map::before {
    content: "";

    position: absolute;

    left: 6%;
    right: 6%;
    top: 48px;

    height: 1px;

    background: #d7e1f3;

    z-index: 0;
}

.integration-erp-map > div {
    position: relative;
    z-index: 1;

    min-height: 228px !important;

    padding: 28px 26px !important;

    border: 1px solid #e0e3e7 !important;
    border-radius: 24px !important;

    background: #fff !important;

    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.integration-erp-map > div:hover {
    transform: translateY(-3px);

    border-color: #c5d2e8 !important;

    box-shadow:
        0 10px 30px rgba(60,64,67,.08);
}

/* номера превращаем в шаги */

.integration-erp-map > div > span:first-child {
    width: 40px;
    height: 40px;

    margin-bottom: 48px;

    display: flex !important;
    align-items: center;
    justify-content: center;

    border-radius: 13px;

    background: #e8f0fe !important;
    color: #0b57d0 !important;

    font-size: 12px !important;
    font-weight: 700 !important;
}

/* разные оттенки, чтобы этапы легче считывались */

.integration-erp-map > div:nth-child(2) > span:first-child,
.integration-erp-map > div:nth-child(6) > span:first-child {
    background: #f3e8fd !important;
    color: #8430ce !important;
}

.integration-erp-map > div:nth-child(3) > span:first-child,
.integration-erp-map > div:nth-child(7) > span:first-child {
    background: #e6f4ea !important;
    color: #188038 !important;
}

.integration-erp-map > div:nth-child(4) > span:first-child,
.integration-erp-map > div:nth-child(8) > span:first-child {
    background: #fef7e0 !important;
    color: #a05a00 !important;
}

.integration-erp-map h3 {
    margin: 0 0 10px !important;

    color: #202124 !important;

    font-size: 20px !important;
    line-height: 1.2 !important;
    font-weight: 500 !important;
}

.integration-erp-map p {
    margin: 0 !important;

    color: #5f6368 !important;

    font-size: 13px !important;
    line-height: 1.55 !important;
}

@media (max-width: 1050px) {

    .integration-erp-map {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    .integration-erp-map::before {
        display: none;
    }

}

@media (max-width: 620px) {

    .integration-erp-section {
        padding: 78px 0 84px !important;
    }

    .integration-erp-map {
        grid-template-columns: 1fr;
    }

    .integration-erp-map > div {
        min-height: auto !important;
    }

}

/* =========================================================
   OVERVIEW — integration methods
   ========================================================= */

.integration-methods-section {
    padding: 112px 0 122px !important;
    background: #fff !important;
}

.integration-page:not([data-page-mode="overview"])
.integration-methods-section {
    display: none;
}

.integration-methods-section .integration-section-head {
    margin-bottom: 48px;
}

.integration-methods-section .integration-section-head h2 {
    margin-top: 10px;

    max-width: 900px;

    font-size: clamp(40px, 4.2vw, 62px) !important;
    line-height: 1 !important;
    font-weight: 500 !important;
    letter-spacing: -.04em;
}

.integration-methods-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 16px !important;
}

.integration-methods-grid > article {
    position: relative;

    min-height: 300px !important;
    padding: 28px !important;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border: 1px solid #e0e3e7 !important;
    border-radius: 26px !important;

    background: #fff !important;

    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.integration-methods-grid > article:hover {
    transform: translateY(-3px);

    border-color: #c5d2e8 !important;

    box-shadow:
        0 10px 30px rgba(60,64,67,.08);
}

/* технологические бейджи */

.integration-methods-grid > article > span:first-child {
    width: fit-content;

    margin-bottom: 52px;

    padding: 9px 12px;

    border-radius: 11px;

    background: #e8f0fe !important;
    color: #0b57d0 !important;

    font-size: 13px !important;
    line-height: 1;
    font-weight: 700 !important;
}

.integration-methods-grid > article:nth-child(2) > span:first-child {
    background: #f3e8fd !important;
    color: #8430ce !important;
}

.integration-methods-grid > article:nth-child(3) > span:first-child {
    background: #e6f4ea !important;
    color: #188038 !important;
}

.integration-methods-grid > article:nth-child(4) > span:first-child {
    background: #fef7e0 !important;
    color: #a05a00 !important;
}

/* лёгкий технический акцент */

.integration-methods-grid > article::after {
    content: "";

    position: absolute;

    right: -26px;
    bottom: -26px;

    width: 110px;
    height: 110px;

    border-radius: 50%;

    background: #e8f0fe;

    opacity: .35;
}

.integration-methods-grid > article:nth-child(2)::after {
    background: #f3e8fd;
}

.integration-methods-grid > article:nth-child(3)::after {
    background: #e6f4ea;
}

.integration-methods-grid > article:nth-child(4)::after {
    background: #fef7e0;
}

.integration-methods-grid h3 {
    position: relative;
    z-index: 1;

    margin: 0 0 12px !important;

    color: #202124 !important;

    font-size: 21px !important;
    line-height: 1.2 !important;
    font-weight: 500 !important;
}

.integration-methods-grid p {
    position: relative;
    z-index: 1;

    margin: 0 !important;

    max-width: 250px;

    color: #5f6368 !important;

    font-size: 13px !important;
    line-height: 1.6 !important;
}

@media (max-width: 1050px) {

    .integration-methods-grid {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    }

}

@media (max-width: 620px) {

    .integration-methods-section {
        padding: 78px 0 84px !important;
    }

    .integration-methods-grid {
        grid-template-columns: 1fr !important;
    }

    .integration-methods-grid > article {
        min-height: auto !important;
    }

}

/* =========================================================
   OVERVIEW — protocols / technologies
   ========================================================= */

.integration-protocols-section {
    padding: 112px 0 122px !important;
    background: #fff !important;
}

.integration-page:not([data-page-mode="overview"])
.integration-protocols-section {
    display: none;
}

.integration-protocols-section .integration-section-head {
    margin-bottom: 48px;
}

.integration-protocols-section .integration-section-head h2 {
    margin-top: 10px;

    max-width: 900px;

    font-size: clamp(40px, 4.2vw, 62px) !important;
    line-height: 1 !important;
    font-weight: 500 !important;
    letter-spacing: -.04em;
}

.integration-protocol-list {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 16px !important;
}

.integration-protocol-list > article {
    position: relative;

    min-height: 300px !important;
    padding: 28px !important;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border: 1px solid #e0e3e7 !important;
    border-radius: 26px !important;

    background: #fff !important;

    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.integration-protocol-list > article:hover {
    transform: translateY(-3px);

    border-color: #c5d2e8 !important;

    box-shadow:
        0 10px 30px rgba(60,64,67,.08);
}

/* JSON / XML / OData / SOAP */

.integration-protocol-list > article > div:first-child {
    width: fit-content;

    margin-bottom: 50px;

    padding: 9px 12px;

    border-radius: 11px;

    background: #e8f0fe !important;
    color: #0b57d0 !important;

    font-size: 13px !important;
    line-height: 1;
    font-weight: 700 !important;
}

.integration-protocol-list > article:nth-child(2) > div:first-child {
    background: #f3e8fd !important;
    color: #8430ce !important;
}

.integration-protocol-list > article:nth-child(3) > div:first-child {
    background: #e6f4ea !important;
    color: #188038 !important;
}

.integration-protocol-list > article:nth-child(4) > div:first-child {
    background: #fef7e0 !important;
    color: #a05a00 !important;
}

/* мягкий декоративный круг */

.integration-protocol-list > article::after {
    content: "";

    position: absolute;

    right: -34px;
    bottom: -34px;

    width: 125px;
    height: 125px;

    border-radius: 50%;

    background: #e8f0fe;
    opacity: .35;
}

.integration-protocol-list > article:nth-child(2)::after {
    background: #f3e8fd;
}

.integration-protocol-list > article:nth-child(3)::after {
    background: #e6f4ea;
}

.integration-protocol-list > article:nth-child(4)::after {
    background: #fef7e0;
}

.integration-protocol-list strong {
    position: relative;
    z-index: 1;

    display: block;

    margin-bottom: 12px;

    color: #202124 !important;

    font-size: 21px !important;
    line-height: 1.2;
    font-weight: 500 !important;
}

.integration-protocol-list p {
    position: relative;
    z-index: 1;

    max-width: 245px;
    margin: 0 !important;

    color: #5f6368 !important;

    font-size: 13px !important;
    line-height: 1.6 !important;
}

@media (max-width: 1050px) {

    .integration-protocol-list {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    }

}

@media (max-width: 620px) {

    .integration-protocols-section {
        padding: 78px 0 84px !important;
    }

    .integration-protocol-list {
        grid-template-columns: 1fr !important;
    }

    .integration-protocol-list > article {
        min-height: auto !important;
    }

}

/* =========================================================
   OVERVIEW — project CTA
   ========================================================= */

.integration-cta-section {
    padding: 112px 0 126px !important;
    background: #fff !important;
}

.integration-page:not([data-page-mode="overview"])
.integration-cta-section {
    display: none;
}

.integration-cta {
    position: relative;

    min-height: 390px;

    padding: 62px 64px !important;

    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 70px;
    align-items: end;

    overflow: hidden;

    border: 0 !important;
    border-radius: 34px !important;

    background:
        linear-gradient(
            135deg,
            #f1f5fb 0%,
            #f8fafd 58%,
            #eef4ff 100%
        ) !important;
}

/* мягкая декоративная форма */

.integration-cta::after {
    content: "";

    position: absolute;

    right: -100px;
    top: -150px;

    width: 430px;
    height: 430px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(66,133,244,.12) 0,
            rgba(66,133,244,.04) 48%,
            transparent 70%
        );

    pointer-events: none;
}

.integration-cta > div {
    position: relative;
    z-index: 1;

    max-width: 820px;
}

.integration-cta .integration-kicker {
    margin-bottom: 18px;
}

.integration-cta h2 {
    max-width: 830px;
    margin: 0 0 24px !important;

    color: #202124 !important;

    font-size: clamp(42px, 4.5vw, 68px) !important;
    line-height: .98 !important;
    font-weight: 500 !important;
    letter-spacing: -.045em !important;
}

.integration-cta p {
    max-width: 680px;
    margin: 0 !important;

    color: #5f6368 !important;

    font-size: 16px !important;
    line-height: 1.65 !important;
}

.integration-cta-btn {
    position: relative;
    z-index: 2;

    min-width: 220px;

    padding: 16px 24px !important;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    border-radius: 999px !important;

    background: #0b57d0 !important;
    color: #fff !important;

    font-size: 14px !important;
    font-weight: 600 !important;

    box-shadow: none !important;

    transition:
        transform .18s ease,
        background .18s ease !important;
}

.integration-cta-btn:hover {
    transform: translateY(-2px);
    background: #0842a0 !important;
}

@media (max-width: 850px) {

    .integration-cta {
        grid-template-columns: 1fr;
        gap: 38px;

        min-height: auto;

        padding: 44px !important;
    }

    .integration-cta-btn {
        width: fit-content;
    }

}

@media (max-width: 620px) {

    .integration-cta-section {
        padding: 78px 0 88px !important;
    }

    .integration-cta {
        padding: 32px !important;
        border-radius: 26px !important;
    }

    .integration-cta h2 {
        font-size: 40px !important;
    }

}

/* =========================================================
   ISOLATED 1C FOOTER — final polish
   ========================================================= */

.onec-site-footer {
    padding: 74px 0 28px;

    background: #f8fafd;
}

.onec-site-footer__inner {
    width: min(1280px, calc(100% - 48px));
    margin: 0 auto;
}


/* blue final CTA */

.onec-footer-cta {
    position: relative;

    min-height: 360px;

    padding: 58px 62px;

    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 60px;
    align-items: end;

    overflow: hidden;

    border-radius: 34px;

    background:
        linear-gradient(
            135deg,
            #0b57d0 0%,
            #1a5fd4 55%,
            #2167d9 100%
        );
}

.onec-footer-cta::before {
    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    right: -180px;
    top: -280px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.14) 0%,
            rgba(255,255,255,.04) 46%,
            transparent 70%
        );

    pointer-events: none;
}

.onec-footer-cta::after {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    left: 42%;
    bottom: -220px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.08) 0%,
            transparent 70%
        );

    pointer-events: none;
}

.onec-footer-cta > div {
    position: relative;
    z-index: 1;

    max-width: 760px;
}

.onec-footer-cta__label {
    margin-bottom: 24px;

    color: rgba(255,255,255,.7);

    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
}

.onec-footer-cta h2 {
    margin: 0 0 24px;

    color: #fff;

    font-size: clamp(48px, 5.2vw, 76px);
    line-height: .96;
    font-weight: 500;
    letter-spacing: -.05em;
}

.onec-footer-cta p {
    max-width: 680px;
    margin: 0;

    color: rgba(255,255,255,.78);

    font-size: 16px;
    line-height: 1.6;
}


/* CTA button */

.onec-footer-cta__button {
    position: relative;
    z-index: 2;

    min-width: 225px;

    padding: 16px 22px;

    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;

    border: 0;
    border-radius: 999px;

    background: #fff;
    color: #0b57d0;

    font-size: 14px;
    font-weight: 600;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

.onec-footer-cta__button:hover {
    transform: translateY(-2px);

    background: #f8fbff;

    box-shadow:
        0 10px 28px rgba(0,0,0,.12);
}

.onec-footer-cta__button svg {
    width: 20px;
    height: 20px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition: transform .18s ease;
}

.onec-footer-cta__button:hover svg {
    transform: translateX(3px);
}


/* main footer */

.onec-site-footer__main {
    padding: 72px 0 64px;

    display: grid;
    grid-template-columns: 1.55fr .7fr .8fr .8fr;
    gap: 58px;

    align-items: start;
}

.onec-site-footer__brand {
    max-width: 330px;
}

.onec-site-footer__logo {
    display: inline-flex;
    margin-bottom: 26px;
}

.onec-site-footer__logo svg {
    width: 145px;
    height: 40px;
}

.onec-site-footer__brand p {
    margin: 0;

    max-width: 310px;

    color: #5f6368;

    font-size: 14px;
    line-height: 1.65;
}


/* columns */

.onec-site-footer__column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 14px;
}

.onec-site-footer__column strong {
    margin-bottom: 8px;

    color: #202124;

    font-size: 13px;
    font-weight: 600;
}

.onec-site-footer__column a {
    position: relative;

    color: #5f6368;

    font-size: 14px;
    line-height: 1.35;

    text-decoration: none;

    transition:
        color .16s ease,
        transform .16s ease;
}

.onec-site-footer__column a:hover {
    color: #0b57d0;
    transform: translateX(2px);
}


/* bottom */

.onec-site-footer__bottom {
    padding: 26px 0 0;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;

    border-top: 1px solid #dadce0;

    color: #80868b;

    font-size: 12px;
}

.onec-site-footer__bottom > div {
    display: flex;
    align-items: center;
    gap: 30px;
}

.onec-site-footer__bottom a {
    color: #80868b;
    text-decoration: none;

    transition: color .16s ease;
}

.onec-site-footer__bottom a:hover {
    color: #0b57d0;
}


/* responsive */

@media (max-width: 980px) {

    .onec-footer-cta {
        grid-template-columns: 1fr;
        gap: 42px;

        min-height: auto;
    }

    .onec-footer-cta__button {
        width: fit-content;
    }

    .onec-site-footer__main {
        grid-template-columns: 1.3fr 1fr 1fr;
    }

    .onec-site-footer__brand {
        grid-column: 1 / -1;
        max-width: 520px;
    }

}

@media (max-width: 680px) {

    .onec-site-footer {
        padding-top: 44px;
    }

    .onec-site-footer__inner {
        width: min(100% - 28px, 1280px);
    }

    .onec-footer-cta {
        padding: 38px 30px;
        border-radius: 26px;
    }

    .onec-footer-cta h2 {
        font-size: 44px;
    }

    .onec-site-footer__main {
        padding: 54px 0 46px;

        grid-template-columns: 1fr 1fr;
        gap: 42px 28px;
    }

    .onec-site-footer__brand {
        grid-column: 1 / -1;
    }

    .onec-site-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .onec-site-footer__bottom > div {
        flex-wrap: wrap;
        gap: 14px 24px;
    }

}


/* =========================================================
   FINAL FOOTER SPACING TWEAK
   ========================================================= */

/* CTA чуть компактнее */
.onec-footer-cta {
    min-height: 330px !important;
    padding-top: 52px !important;
    padding-bottom: 52px !important;
}

/* кнопку чуть выше относительно текста */
.onec-footer-cta__button {
    transform: translateY(-8px);
}

.onec-footer-cta__button:hover {
    transform: translateY(-10px);
}

/* меньше воздуха между CTA и основным футером */
.onec-site-footer__main {
    padding-top: 56px !important;
}

@media (max-width: 980px) {

    .onec-footer-cta__button {
        transform: none;
    }

    .onec-footer-cta__button:hover {
        transform: translateY(-2px);
    }

    .onec-site-footer__main {
        padding-top: 48px !important;
    }

}

/* =========================================================
   ORDER FORM — attached file state
   ========================================================= */

.onec-order-file-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.onec-order-file__selected {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    padding: 12px 14px;

    border-radius: 14px;

    background: #f3f8f4;

    color: #188038;

    font-size: 13px;
}

.onec-order-file__selected[hidden] {
    display: none !important;
}

.onec-order-file__name {
    min-width: 0;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.onec-order-file__remove {
    flex: 0 0 auto;

    padding: 0;

    border: 0;

    background: transparent;

    color: #5f6368;

    font-size: 12px;

    cursor: pointer;
}

.onec-order-file__remove:hover {
    color: #c5221f;
}


/* =========================================================
   ORDER FORM — compact attached file UI
   ========================================================= */

.onec-order-file-wrap {
    min-height: 42px;

    display: flex !important;
    align-items: center;
    gap: 16px !important;

    flex-wrap: nowrap;
}

.onec-order-file {
    min-width: 0;

    display: inline-flex !important;
    align-items: center;
    gap: 10px;

    cursor: pointer;
}

.onec-order-file input[type="file"] {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    opacity: 0 !important;
    pointer-events: none;
}

.onec-order-file__icon {
    width: 30px;
    height: 30px;

    flex: 0 0 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #dadce0;
    border-radius: 50%;

    background: #fff;
    color: #0b57d0;
}

.onec-order-file__icon svg {
    width: 16px;
    height: 16px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.onec-order-file__label {
    color: #5f6368;

    font-size: 13px;
    line-height: 1.3;
}

.onec-order-file__selected {
    min-width: 0;
    flex: 1;

    padding: 0 !important;

    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;

    background: transparent !important;
    border-radius: 0 !important;

    color: #188038;

    font-size: 13px;
}

.onec-order-file__selected[hidden] {
    display: none !important;
}

.onec-order-file__name {
    max-width: 340px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.onec-order-file__name::before {
    content: "✓ ";

    font-weight: 700;
}

.onec-order-file__remove {
    padding: 0 !important;

    border: 0 !important;
    background: none !important;

    color: #80868b !important;

    font-size: 12px !important;
}

.onec-order-file__remove:hover {
    color: #c5221f !important;
}

@media (max-width: 700px) {

    .onec-order-file-wrap {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px !important;
    }

    .onec-order-file__selected {
        width: 100%;
        justify-content: space-between;
    }

}

/* =========================================================
   ORDER FORM — final file row + modal fit
   ========================================================= */

/* убираем старую круглую иконку с плюсом */
.onec-order-file::before,
.onec-order-file::after {
    content: none !important;
    display: none !important;
}

/* оставляем только новую скрепку */
.onec-order-file {
    padding-left: 0 !important;
}

.onec-order-file__icon {
    margin: 0 !important;
}

/* выбранный файл держим в той же строке */
.onec-order-file-wrap {
    min-height: 32px !important;
    gap: 14px !important;
}

.onec-order-file__selected {
    flex: 0 1 auto !important;
    justify-content: flex-start !important;
    gap: 10px !important;
}

/* чуть уплотняем форму, чтобы кнопка полностью вошла */
.onec-order-form__content {
    row-gap: 14px !important;
}

.onec-order-field textarea {
    min-height: 132px !important;
    height: 132px !important;
}

.onec-order-submit {
    min-height: 64px !important;
    height: 64px !important;
}

/* небольшой запас снизу внутри модалки */
.onec-order-modal {
    padding-bottom: 18px !important;
}

@media (max-height: 850px) {

    .onec-order-field textarea {
        min-height: 112px !important;
        height: 112px !important;
    }

    .onec-order-form__content {
        row-gap: 11px !important;
    }

    .onec-order-submit {
        min-height: 58px !important;
        height: 58px !important;
    }

}

/* =========================================================
   ORDER FORM — file left align + safe bottom spacing
   ========================================================= */

/* файл всегда начинается от левого края формы */
.onec-order-file-wrap {
    width: 100% !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;

    gap: 16px !important;

    margin: 0 !important;
    padding: 0 !important;

    text-align: left !important;
}

.onec-order-file {
    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    flex: 0 0 auto !important;
}

.onec-order-file__selected {
    width: auto !important;
    max-width: 420px;

    margin: 0 !important;
    padding: 0 !important;

    flex: 0 1 auto !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    gap: 10px !important;

    text-align: left !important;
}

.onec-order-file__selected[hidden] {
    display: none !important;
}

/* сам контент модалки получает нормальный запас снизу */
html body.onec-design-page
#modal-order.onec-order-modal.fancybox__content {
    max-height: calc(100dvh - 48px) !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    padding-bottom: 30px !important;
}

/* кнопка больше не прилипает к нижней кромке */
.onec-order-submit {
    margin-bottom: 18px !important;
}

/* ещё немного уменьшаем вертикальную высоту формы */
.onec-order-field textarea {
    min-height: 118px !important;
    height: 118px !important;
}

.onec-order-form__content {
    row-gap: 11px !important;
}

@media (max-height: 850px) {

    html body.onec-design-page
    #modal-order.onec-order-modal.fancybox__content {
        padding-bottom: 24px !important;
    }

    .onec-order-field textarea {
        min-height: 100px !important;
        height: 100px !important;
    }

    .onec-order-submit {
        height: 56px !important;
        min-height: 56px !important;

        margin-bottom: 14px !important;
    }

}

/* =========================================================
   ORDER FORM — sending state
   ========================================================= */

.onec-order-submit {
    position: relative;
}

.onec-order-submit__arrow,
.onec-order-submit__loader {
    display: flex;
    align-items: center;
    justify-content: center;
}

.onec-order-submit__loader {
    display: none;

    gap: 5px;
}

.onec-order-submit__loader i {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: rgba(255,255,255,.95);

    animation: onecSubmitPulse .95s infinite ease-in-out;
}

.onec-order-submit__loader i:nth-child(2) {
    animation-delay: .12s;
}

.onec-order-submit__loader i:nth-child(3) {
    animation-delay: .24s;
}

.onec-order-submit.is-sending {
    cursor: wait !important;

    opacity: .94;
}

.onec-order-submit.is-sending .onec-order-submit__arrow {
    display: none;
}

.onec-order-submit.is-sending .onec-order-submit__loader {
    display: flex;
}

.onec-order-submit:disabled {
    pointer-events: none;
}

@keyframes onecSubmitPulse {

    0%,
    60%,
    100% {
        transform: translateY(0);
        opacity: .45;
    }

    30% {
        transform: translateY(-5px);
        opacity: 1;
    }

}

/* Submit loader — larger and more visible */
.onec-order-submit__loader {
    gap: 8px !important;
}

.onec-order-submit__loader i {
    width: 10px !important;
    height: 10px !important;

    background: #fff !important;

    animation: onecSubmitPulseLarge .9s infinite ease-in-out !important;
}

.onec-order-submit__loader i:nth-child(2) {
    animation-delay: .12s !important;
}

.onec-order-submit__loader i:nth-child(3) {
    animation-delay: .24s !important;
}

@keyframes onecSubmitPulseLarge {

    0%,
    60%,
    100% {
        transform: translateY(0) scale(.8);
        opacity: .45;
    }

    30% {
        transform: translateY(-7px) scale(1.15);
        opacity: 1;
    }

}


/* =========================================================
   ORDER MODAL — mobile layout fix
   ========================================================= */

@media (max-width: 760px) {

    html body.onec-design-page
    #modal-order.onec-order-modal.fancybox__content {
        width: calc(100vw - 20px) !important;
        max-width: none !important;

        max-height: calc(100dvh - 20px) !important;

        margin: 10px !important;
        padding: 28px 22px 24px !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        border-radius: 28px !important;
    }

    .onec-order-form {
        width: 100% !important;
        min-width: 0 !important;
    }

    .onec-order-form__layout {
        width: 100% !important;

        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;

        gap: 28px !important;
    }

    .onec-order-form__intro,
    .onec-order-form__content {
        width: 100% !important;
        min-width: 0 !important;

        grid-column: 1 !important;
    }

    .onec-order-form__intro {
        padding: 0 !important;
        margin: 0 !important;
    }

    .onec-order-form__intro h2 {
        margin: 12px 0 14px !important;

        font-size: 48px !important;
        line-height: .98 !important;
    }

    .onec-order-form__intro p {
        max-width: 100% !important;
        margin: 0 !important;

        font-size: 16px !important;
        line-height: 1.45 !important;
    }

    .onec-order-form__content {
        display: block !important;
    }

    .onec-order-form__grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;

        gap: 14px !important;
    }

    .onec-order-field,
    .onec-order-field--full {
        width: 100% !important;
        grid-column: 1 !important;
    }

    .onec-order-field input,
    .onec-order-field select,
    .onec-order-field textarea {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .onec-order-field textarea {
        height: 120px !important;
        min-height: 120px !important;
    }

    .onec-order-file-wrap {
        width: 100% !important;

        margin-top: 14px !important;

        flex-wrap: wrap !important;
    }

    .onec-order-form__checks {
        width: 100% !important;

        margin-top: 18px !important;

        display: grid !important;
        grid-template-columns: 1fr !important;

        gap: 14px !important;
    }

    .onec-order-submit {
        width: 100% !important;

        margin-top: 20px !important;
        margin-bottom: 8px !important;
    }

    #modal-order .f-button.is-close-btn,
    #modal-order > .f-button {
        top: 16px !important;
        right: 16px !important;
    }

}

@media (max-width: 430px) {

    .onec-order-form__intro h2 {
        font-size: 44px !important;
    }

}

/* =========================================================
   ORDER MODAL — FINAL MOBILE LAYOUT
   Overrides all previous mobile modal rules
   ========================================================= */

@media (max-width: 760px) {

    /* сама модалка */
    html body.onec-design-page
    #modal-order.onec-order-modal.fancybox__content {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;

        height: auto !important;
        max-height: calc(100dvh - 16px) !important;

        margin: 8px !important;
        padding: 30px 22px 28px !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        border-radius: 28px !important;

        box-sizing: border-box !important;
    }

    /* Fancybox не должен добавлять своё пространство */
    .fancybox__slide:has(#modal-order) {
        padding: 0 !important;
    }


    /* вся форма */
    html body.onec-design-page
    #modal-order .onec-order-form {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }


    /* УБИРАЕМ десктопные 2 колонки полностью */
    html body.onec-design-page
    #modal-order .onec-order-form__layout {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

        display: flex !important;
        flex-direction: column !important;

        gap: 28px !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }


    /* вступление */
    html body.onec-design-page
    #modal-order .onec-order-form__intro {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 46px 0 0 !important;

        display: block !important;

        box-sizing: border-box !important;
    }

    html body.onec-design-page
    #modal-order .onec-order-form__eyebrow {
        margin: 0 0 16px !important;

        font-size: 15px !important;
        line-height: 1.2 !important;
    }

    html body.onec-design-page
    #modal-order .onec-order-form__intro h2 {
        width: auto !important;
        max-width: 100% !important;

        margin: 0 0 16px !important;

        font-size: clamp(42px, 12vw, 58px) !important;
        line-height: .96 !important;
        letter-spacing: -.045em !important;

        overflow-wrap: normal !important;
    }

    html body.onec-design-page
    #modal-order .onec-order-form__intro p {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;

        font-size: 16px !important;
        line-height: 1.48 !important;

        white-space: normal !important;
        overflow: visible !important;
    }


    /* правая часть формы теперь занимает всю ширину */
    html body.onec-design-page
    #modal-order .onec-order-form__content {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;

        box-sizing: border-box !important;
    }


    /* Имя / телефон / email / компания — одна колонка */
    html body.onec-design-page
    #modal-order .onec-order-form__grid {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;

        gap: 16px !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    /* каждое поле */
    html body.onec-design-page
    #modal-order .onec-order-field,
    html body.onec-design-page
    #modal-order .onec-order-field--full {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        grid-column: 1 / -1 !important;

        display: block !important;

        box-sizing: border-box !important;
    }

    html body.onec-design-page
    #modal-order .onec-order-field > span {
        display: block !important;

        margin: 0 0 7px !important;

        font-size: 14px !important;
        line-height: 1.25 !important;
    }


    /* реальные controls — строго 100% */
    html body.onec-design-page
    #modal-order .onec-order-field input,
    html body.onec-design-page
    #modal-order .onec-order-field select,
    html body.onec-design-page
    #modal-order .onec-order-field textarea {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

        margin: 0 !important;

        box-sizing: border-box !important;

        font-size: 16px !important;
    }

    html body.onec-design-page
    #modal-order .onec-order-field input,
    html body.onec-design-page
    #modal-order .onec-order-field select {
        height: 58px !important;
        min-height: 58px !important;

        padding-left: 16px !important;
        padding-right: 16px !important;

        border-radius: 15px !important;
    }

    html body.onec-design-page
    #modal-order .onec-order-field textarea {
        height: 120px !important;
        min-height: 120px !important;

        padding: 15px 16px !important;

        border-radius: 15px !important;

        resize: vertical !important;
    }


    /* файл */
    html body.onec-design-page
    #modal-order .onec-order-file-wrap {
        width: 100% !important;
        max-width: none !important;

        min-height: 0 !important;

        margin: 2px 0 0 !important;
        padding: 0 !important;

        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;

        gap: 8px 12px !important;

        box-sizing: border-box !important;
    }

    html body.onec-design-page
    #modal-order .onec-order-file {
        width: auto !important;
        max-width: 100% !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-start !important;

        gap: 9px !important;
    }

    html body.onec-design-page
    #modal-order .onec-order-file__label {
        font-size: 13px !important;
    }

    html body.onec-design-page
    #modal-order .onec-order-file__selected {
        width: auto !important;
        max-width: 100% !important;

        flex: 0 1 auto !important;

        justify-content: flex-start !important;

        font-size: 13px !important;
    }


    /* чекбоксы */
    html body.onec-design-page
    #modal-order .onec-order-form__checks {
        width: 100% !important;

        margin: 4px 0 0 !important;
        padding: 0 !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;

        gap: 14px !important;
    }

    html body.onec-design-page
    #modal-order .onec-order-check {
        width: 100% !important;

        display: flex !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;

        gap: 10px !important;

        font-size: 13px !important;
        line-height: 1.4 !important;
    }

    html body.onec-design-page
    #modal-order .onec-order-check input {
        flex: 0 0 20px !important;

        width: 20px !important;
        height: 20px !important;

        margin: 0 !important;
    }


    /* submit */
    html body.onec-design-page
    #modal-order .onec-order-submit {
        width: 100% !important;

        min-height: 58px !important;
        height: 58px !important;

        margin: 6px 0 4px !important;

        padding: 0 20px !important;

        border-radius: 999px !important;

        box-sizing: border-box !important;
    }


    /* close */
    html body.onec-design-page
    #modal-order .f-button.is-close-btn,
    html body.onec-design-page
    #modal-order > .f-button {
        position: absolute !important;

        top: 14px !important;
        right: 14px !important;

        width: 46px !important;
        height: 46px !important;

        z-index: 20 !important;
    }

}


/* совсем узкие iPhone */
@media (max-width: 390px) {

    html body.onec-design-page
    #modal-order.onec-order-modal.fancybox__content {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    html body.onec-design-page
    #modal-order .onec-order-form__intro h2 {
        font-size: 42px !important;
    }

    html body.onec-design-page
    #modal-order .onec-order-form__intro p {
        font-size: 15px !important;
    }

}

/* Mobile form — equal bottom spacing */
@media (max-width: 760px) {

    html body.onec-design-page
    #modal-order.onec-order-modal.fancybox__content {
        padding-bottom: 36px !important;
    }

    html body.onec-design-page
    #modal-order .onec-order-submit {
        margin-bottom: 0 !important;
    }

}

/* Mobile form — lift submit button */
@media (max-width: 760px) {

    html body.onec-design-page
    #modal-order .onec-order-submit {
        margin-bottom: 22px !important;
    }

}

/* Mobile form — final submit position */
@media (max-width: 760px) {

    html body.onec-design-page
    #modal-order .onec-order-submit {
        position: relative !important;
        top: -18px !important;
    }

}

/* =========================================================
   DOCS — FINAL MOBILE LAYOUT
   ========================================================= */

@media (max-width: 760px) {

    html,
    body.onec-design-page {
        max-width: 100%;
        overflow-x: hidden !important;
    }

    /* вся документация строго в viewport */
    .integration-docs-section,
    .integration-docs-section .container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin-left: auto !important;
        margin-right: auto !important;

        box-sizing: border-box !important;
    }

    .integration-docs-section {
        padding: 48px 0 80px !important;
        overflow: hidden !important;
    }

    /* убираем desktop 2-column layout */
    .integration-docs-layout {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        display: flex !important;
        flex-direction: column !important;

        gap: 30px !important;

        grid-template-columns: none !important;
    }

    /* левая навигация превращается в горизонтальную */
    .integration-docs-nav {
        position: relative !important;
        top: auto !important;
        left: auto !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: visible !important;

        border: 0 !important;
    }

    .integration-docs-nav > strong,
    .integration-docs-nav > h3 {
        display: block !important;
        margin: 0 0 14px !important;
    }

    .integration-docs-nav ul,
    .integration-docs-nav > div {
        width: 100% !important;
        max-width: 100% !important;

        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;

        gap: 8px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        padding: 0 0 8px !important;
        margin: 0 !important;

        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .integration-docs-nav ul::-webkit-scrollbar,
    .integration-docs-nav > div::-webkit-scrollbar {
        display: none;
    }

    .integration-docs-nav li {
        flex: 0 0 auto !important;

        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;
    }

    .integration-docs-nav a {
        width: auto !important;
        min-width: max-content !important;

        display: inline-flex !important;
        align-items: center !important;

        padding: 9px 13px !important;

        border: 1px solid #dadce0 !important;
        border-radius: 999px !important;

        background: #fff !important;
        color: #5f6368 !important;

        font-size: 12px !important;
        line-height: 1 !important;

        white-space: nowrap !important;
    }

    .integration-docs-nav a.active {
        border-color: #0b57d0 !important;

        background: #e8f0fe !important;
        color: #0b57d0 !important;
    }

    /* основной текст */
    .integration-docs-content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: visible !important;

        box-sizing: border-box !important;
    }

    .integration-docs-content > * {
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .integration-docs-content h1,
    .integration-docs-content h2,
    .integration-docs-content h3,
    .integration-docs-content p,
    .integration-docs-content li {
        overflow-wrap: break-word !important;
        word-break: normal !important;
    }

    .integration-docs-content h1 {
        margin: 0 0 20px !important;

        font-size: 38px !important;
        line-height: 1.02 !important;
        letter-spacing: -.035em !important;
    }

    .integration-docs-content h2 {
        margin-top: 46px !important;

        font-size: 28px !important;
        line-height: 1.1 !important;
    }

    .integration-docs-content p,
    .integration-docs-content li {
        font-size: 15px !important;
        line-height: 1.6 !important;
    }

    /* любые схемы и карточки внутри docs */
    .integration-docs-content img,
    .integration-docs-content svg,
    .integration-docs-content pre,
    .integration-docs-content table {
        max-width: 100% !important;
    }

    .integration-docs-content pre,
    .integration-docs-content table {
        overflow-x: auto !important;
    }

    .integration-docs-content [class*="grid"],
    .integration-docs-content [class*="map"] {
        grid-template-columns: 1fr !important;
    }

    /* карточки общей схемы */
    .integration-docs-content article,
    .integration-docs-content [class*="card"] {
        max-width: 100% !important;
        min-width: 0 !important;

        box-sizing: border-box !important;
    }

}
/* Bitrix24 additions; existing 1C files are not modified. */
.b24-page{color:#202124}.b24-page *{box-sizing:border-box}.b24-page [data-b24-mode]{display:none}.b24-page[data-page-mode=overview] [data-b24-mode=overview],.b24-page[data-page-mode=demo] [data-b24-mode=demo],.b24-page[data-page-mode=docs] [data-b24-mode=docs]{display:block}
.b24-page .container{width:min(1240px,calc(100% - 64px));max-width:1240px;margin:auto}.b24-eyebrow{font-size:12px;font-weight:700;letter-spacing:.11em;color:#1967d2;margin-bottom:22px;line-height:1.6}.b24-page .integration-hero h1{font-size:clamp(38px,5vw,72px);line-height:1.07;letter-spacing:-.045em;max-width:1020px;margin:0 auto 28px}.b24-page .integration-lead{max-width:840px;line-height:1.6}.b24-page button{font-family:inherit;cursor:pointer}.b24-page button:focus-visible,.b24-page a:focus-visible,#b24-presentation button:focus-visible{outline:3px solid #55a7ff;outline-offset:4px}.b24-hero-board{margin:54px auto 0;padding:24px;background:#f4f7fb;border:1px solid #e1e7ef;border-radius:26px;text-align:left;box-shadow:0 16px 50px #20376d08}.b24-board-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px;font-size:16px}.b24-pill,.b24-tag{font-size:11px;border-radius:8px;padding:7px 10px;background:#e8f0fe;color:#1967d2;display:inline-block}.b24-pill{background:#fff;color:#5f6368}.b24-pipeline{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.b24-pipeline article{padding:24px 18px;border:1px solid #e4e8ee;background:white;border-radius:16px;min-width:0}.b24-stage{font-size:11px;color:#737d8a}.b24-pipeline h3{font-size:19px;line-height:1.35;margin:24px 0 12px}.b24-pipeline p{font-size:17px;margin:0 0 12px}.b24-pipeline small{font-size:12px;display:block;min-height:40px;color:#687281;line-height:1.5}.b24-tag{margin-top:20px}.b24-green{color:#188038;background:#e6f4ea}.b24-section{padding:80px 0}.b24-section-head{max-width:810px;margin-bottom:38px}.b24-page h2{font-size:clamp(30px,3.7vw,48px);font-weight:500;line-height:1.14;letter-spacing:-.03em;margin:0 0 24px}.b24-section p{font-size:17px;line-height:1.7;color:#5f6368;margin:0 0 20px}.b24-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.b24-card{padding:32px;border:1px solid #e2e6ec;border-radius:22px;background:#fff;min-width:0}.b24-number{display:block;color:#1967d2;font-size:13px;margin-bottom:35px}.b24-card h3{font-size:24px;line-height:1.25;margin:0 0 18px;font-weight:500;letter-spacing:-.02em}.b24-card p{font-size:15px;margin:0;line-height:1.75}.b24-feature{background:#f7f9fc}.b24-two{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}.b24-routing{padding:12px 32px;border-radius:24px;background:#fff;border:1px solid #e1e7ef}.b24-routing>div{padding:28px 0;border-bottom:1px solid #e8edf3}.b24-routing>div:last-child{border:0}.b24-routing span{display:block;color:#1967d2;font-size:12px;margin-bottom:12px}.b24-routing strong{font-size:19px;font-weight:500}.b24-offer{border-radius:28px;background:#eaf2ff;padding:48px!important;display:grid;grid-template-columns:1fr auto;gap:36px;align-items:center}.b24-offer p{max-width:750px}.b24-actions{display:flex;flex-wrap:wrap;gap:12px}.b24-offer .b24-actions{flex-direction:column}.b24-scenario-tabs{display:flex;gap:10px;margin-bottom:24px;flex-wrap:wrap}.b24-scenario-tabs button{border:1px solid #dadce0;border-radius:12px;background:#fff;padding:14px 22px;color:#4e5967;font-size:15px}.b24-scenario-tabs button.active{background:#e8f0fe;color:#1967d2;border-color:#a8c7fa}.b24-demo-grid{gap:24px}.b24-demo-grid .b24-card{min-height:415px}.b24-field{display:block;font-size:13px;margin-bottom:20px;color:#5f6368}.b24-field input{display:block;width:100%;font:inherit;font-size:17px;margin-top:8px;padding:13px 16px;border:1px solid #dadce0;border-radius:10px;color:#202124;background:#fff}.b24-check{display:flex;align-items:center;gap:8px;font-size:13px;line-height:1.5;margin:24px 0;color:#5f6368}.b24-check input{width:18px;height:18px;flex-shrink:0}.b24-result-card{background:#f8faff}.b24-result-card h3{margin-top:30px}.b24-result-list{margin:24px 0;display:grid;gap:0}.b24-result-list div{display:flex;justify-content:space-between;gap:20px;padding:12px 0;border-bottom:1px solid #e1e7ef;font-size:14px}.b24-result-list dt{color:#5f6368}.b24-result-list dd{margin:0;text-align:right;overflow-wrap:anywhere}.b24-payload{border:1px solid #e1e7ef;border-radius:16px;margin-top:24px;padding:24px}.b24-payload summary{cursor:pointer;font-size:16px}.b24-payload p{font-size:13px;margin-top:18px}.b24-payload pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px;line-height:1.6}.b24-log{margin-top:32px}.b24-log h3{font-size:22px}.b24-log ol{list-style:none;padding:0;margin:20px 0}.b24-log li{padding:14px 0;border-bottom:1px solid #e8edf3;font-size:14px;line-height:1.5}.b24-log time{color:#788392;margin-right:16px;font-size:12px}.b24-docs{display:grid;grid-template-columns:240px minmax(0,1fr);gap:70px}.b24-docs-nav{position:sticky;top:calc(var(--integration-mode-top,80px) + 95px);display:grid;gap:4px}.b24-docs-nav a{font-size:14px;color:#5f6368;padding:10px 12px;border-radius:8px;text-decoration:none;line-height:1.4}.b24-docs-nav a:hover,.b24-docs-nav a.active{background:#e8f0fe;color:#1967d2}.b24-docs-body section{padding:32px 0;border-bottom:1px solid #e8edf3;scroll-margin-top:190px}.b24-docs-body h3{font-size:25px;margin:0 0 18px}.b24-docs-body>p{margin-top:30px}.b24-docs-body a{color:#1967d2;text-decoration:underline}
#b24-presentation{box-sizing:border-box;width:min(1100px,calc(100vw - 40px));max-height:90dvh;border:1px solid #dce5f0;border-radius:28px;padding:60px;background:#f7faff;color:#20376d;overflow:auto;margin:auto}#b24-presentation::backdrop{background:#112342aa;backdrop-filter:blur(6px)}#b24-presentation button{cursor:pointer;font:inherit}.b24-close{position:absolute;right:20px;top:15px;font-size:32px!important;border:0;background:transparent;color:#20376d}.b24-slide{min-height:400px;display:flex;flex-direction:column;justify-content:center}.b24-slide[hidden]{display:none}.b24-slide h2{font-size:clamp(30px,4.8vw,60px);letter-spacing:-.04em;line-height:1.08;max-width:850px;margin:24px 0}.b24-slide p{font-size:22px;line-height:1.5;max-width:850px;color:#5f6368}.b24-slide-line{border-top:1px solid #cddcf0;margin-top:36px;padding-top:24px;font-size:16px;line-height:1.6}.b24-slide-controls{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:28px}.b24-slide-controls button{padding:10px 20px;background:#fff;border:1px solid #cddcf0;border-radius:10px;color:#1967d2}.b24-slide-controls button:disabled{opacity:.35;cursor:default}
@media(max-width:900px){.b24-pipeline{grid-template-columns:repeat(2,1fr)}.b24-grid{grid-template-columns:repeat(2,1fr)}.b24-two{gap:24px}.b24-docs{gap:30px;grid-template-columns:190px minmax(0,1fr)}.b24-offer{grid-template-columns:1fr}.b24-offer .b24-actions{flex-direction:row}.b24-page .integration-hero{padding-top:55px}.b24-page .integration-mode-nav{max-width:100%}}
@media(max-width:600px){.b24-page .container{width:calc(100% - 28px)}.b24-page .integration-hero h1{font-size:38px}.b24-page .integration-lead{font-size:17px}.b24-page .integration-hero-actions{gap:10px}.b24-page .integration-hero-actions>*{width:100%}.b24-hero-board{padding:14px;margin-top:32px}.b24-board-head{font-size:13px;align-items:start}.b24-pill{font-size:10px}.b24-pipeline{gap:10px}.b24-pipeline article{padding:16px 12px}.b24-pipeline h3{font-size:16px;margin-top:18px}.b24-pipeline p{font-size:14px}.b24-tag{font-size:10px;padding:6px}.b24-section{padding:48px 0}.b24-grid,.b24-two{grid-template-columns:1fr}.b24-card{padding:25px}.b24-number{margin-bottom:22px}.b24-section p{font-size:16px}.b24-docs{display:block}.b24-docs-nav{position:static;display:flex;overflow-x:auto;margin-bottom:35px;padding-bottom:12px}.b24-docs-nav a{white-space:nowrap}.b24-offer{padding:28px!important}.b24-scenario-tabs button{padding:12px;font-size:13px}.b24-demo-grid .b24-card{min-height:0}.b24-page .integration-mode-nav button{font-size:12px;padding:13px 10px;white-space:nowrap}.b24-page .integration-mode-bar .container{width:calc(100% - 16px)}#b24-presentation{padding:40px 24px;width:calc(100vw - 20px)}.b24-slide{min-height:360px}.b24-slide p{font-size:18px}.b24-slide-line{font-size:14px}}
@media(prefers-reduced-motion:reduce){.b24-page *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{body.b24-print>*:not(#b24-presentation){display:none!important}body.b24-print #b24-presentation{position:static;display:block!important;width:100%;max-width:none;max-height:none;border:0;padding:0;overflow:visible}body.b24-print .b24-slide,body.b24-print .b24-slide[hidden]{display:flex!important;min-height:85vh;break-after:page}body.b24-print .b24-slide:last-of-type{break-after:auto}body.b24-print .b24-slide-controls,body.b24-print .b24-close{display:none!important}}

/* B24 docs sidebar fix */
@media (min-width: 601px) {
    .b24-page .b24-docs-nav {
        align-self: start;
        align-content: start;
        max-height: calc(100dvh - var(--integration-mode-top, 80px) - 115px);
        overflow-y: auto;
    }
}

/* B24 documentation: original 1C layout */
.b24-page .b24-documentation {
    padding: 80px 0;
}
.b24-page .integration-docs-nav {
    align-self: start;
    top: calc(var(--integration-mode-top, 0px) + 95px);
    max-height: calc(100dvh - var(--integration-mode-top, 0px) - 115px);
    overflow-y: auto;
}
.b24-page .integration-docs-header h2 {
    font-size: clamp(40px, 4vw, 58px);
    line-height: 1.08;
    letter-spacing: -.035em;
}
.b24-page .integration-docs-content > section {
    scroll-margin-top: calc(var(--integration-mode-top, 0px) + 115px);
}
@media (max-width: 600px) {
    .b24-page .b24-documentation {
        padding: 48px 0;
    }
    .b24-page .integration-docs-nav {
        position: static;
        max-height: none;
        overflow: visible;
    }
}

/* B24 hero: text and CRM illustration */
.b24-page .integration-hero {
    padding: 76px 0 64px;
}
.b24-page .b24-hero-layout {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    gap: 48px;
    align-items: center;
}
.b24-page .b24-hero-copy {
    min-width: 0;
    text-align: left;
}
.b24-page .integration-hero h1 {
    max-width: none;
    margin: 0 0 26px;
    font-size: clamp(40px, 4vw, 56px);
    line-height: 1.08;
    letter-spacing: -.04em;
    text-align: left;
}
.b24-page .integration-hero .integration-lead {
    max-width: none;
    margin: 0;
    font-size: 18px;
    line-height: 1.65;
    text-align: left;
}
.b24-page .integration-hero-actions {
    justify-content: flex-start;
    margin-top: 30px;
    gap: 10px;
}
.b24-page .integration-hero-actions > * {
    font-size: 14px;
    padding: 15px 20px;
}
.b24-hero-art {
    min-width: 0;
    padding: 28px 20px 16px;
    border-radius: 30px;
    background: linear-gradient(145deg, #dff5ff, #eff7ff 60%, #e8f0fe);
}
.b24-art-window {
    overflow: hidden;
    border: 1px solid #d4e6f1;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 18px 45px #20376d12;
    text-align: left;
}
.b24-art-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}
.b24-art-top > strong {
    font-size: 27px;
    font-weight: 600;
    letter-spacing: -1px;
    color: #263b4b;
}
.b24-art-top > strong > span { color: #00aeef; }
.b24-art-avatar {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #e2f4fb;
    color: #2385ac;
    font-size: 12px;
}
.b24-art-nav {
    display: flex;
    gap: 21px;
    padding: 0 20px;
    border-bottom: 1px solid #e8eef2;
    color: #77838d;
    font-size: 12px;
}
.b24-art-nav > span { padding: 0 0 13px; }
.b24-art-nav .is-selected {
    color: #00a5dc;
    border-bottom: 2px solid #00b6ed;
}
.b24-art-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 21px 18px;
}
.b24-art-heading > strong { font-size: 22px; font-weight: 500; }
.b24-art-heading > span {
    padding: 9px 12px;
    border-radius: 5px;
    background: #bbed21;
    color: #344312;
    font-size: 11px;
    font-weight: 600;
}
.b24-art-kanban {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 0 12px 18px;
}
.b24-art-column {
    min-width: 0;
    background: #f5f8fa;
    border-radius: 8px;
    padding: 0 6px 9px;
}
.b24-art-stage {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    margin: 0 -6px 10px;
    padding: 11px 8px;
    border-radius: 7px 7px 0 0;
    background: #dff4ff;
    color: #247796;
    font-size: 10px;
}
.b24-art-column:nth-child(2) .b24-art-stage {
    background: #e8e9ff;
    color: #635da1;
}
.b24-art-column:nth-child(3) .b24-art-stage {
    background: #e4f5d6;
    color: #50802d;
}
.b24-art-column article {
    margin-bottom: 8px;
    padding: 12px 9px;
    background: #fff;
    border: 1px solid #e8edf1;
    border-radius: 7px;
}
.b24-art-column small {
    display: block;
    min-height: 26px;
    font-size: 9px;
    line-height: 1.4;
    color: #87949e;
}
.b24-art-column article > strong {
    display: block;
    min-height: 40px;
    margin: 5px 0 10px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    color: #253d51;
}
.b24-art-column b {
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}
.b24-art-person, .b24-art-paid {
    margin-top: 18px;
    padding-top: 9px;
    border-top: 1px solid #eef2f5;
    color: #7b8994;
    font-size: 9px;
    line-height: 1.4;
}
.b24-art-paid { color: #418c33; }
.b24-art-event {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 12px 14px;
    padding: 12px;
    border: 1px solid #dceee1;
    border-radius: 9px;
    background: #f4fbf6;
}
.b24-art-check { color: #28994b; font-size: 20px; }
.b24-art-event strong {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: #326d45;
}
.b24-art-event div > span {
    display: block;
    margin-top: 4px;
    font-size: 10px;
    line-height: 1.5;
    color: #6d8876;
}
.b24-art-caption {
    margin-top: 15px;
    text-align: center;
    color: #70879a;
    font-size: 10px;
}
@media (max-width: 1000px) {
    .b24-page .b24-hero-layout {
        grid-template-columns: 1fr;
        gap: 38px;
    }
    .b24-page .integration-hero h1 { max-width: 760px; }
    .b24-hero-art { width: 100%; max-width: 680px; margin: auto; }
}
@media (max-width: 600px) {
    .b24-page .integration-hero { padding: 40px 0; }
    .b24-page .integration-hero h1 { font-size: 38px; }
    .b24-page .integration-hero .integration-lead { font-size: 16px; }
    .b24-hero-art { padding: 16px 8px 12px; border-radius: 20px; }
    .b24-art-top { padding: 16px 12px; }
    .b24-art-top > strong { font-size: 24px; }
    .b24-art-nav { padding: 0 12px; gap: 16px; font-size: 11px; }
    .b24-art-kanban { gap: 5px; padding: 0 7px 12px; }
    .b24-art-column { padding: 0 4px 5px; }
    .b24-art-stage {
        margin: 0 -4px 7px;
        padding: 9px 4px;
        font-size: 9px;
    }
    .b24-art-column article { padding: 10px 5px; }
    .b24-art-column article > strong { font-size: 11px; }
    .b24-art-column b { font-size: 12px; }
}

/* B24 presentation design v2 */
#b24-presentation.bp-deck{width:min(1280px,96vw);padding:0;border:1px solid #dce6ef;border-radius:22px;background:#fff;color:#20376d;max-height:94dvh;font-family:Arial,Helvetica,sans-serif;box-shadow:0 28px 100px #14264f33}
#b24-presentation.bp-deck::backdrop{background:#152843aa;backdrop-filter:blur(8px)}
#b24-presentation .bp-toolbar{display:flex;align-items:center;gap:24px;padding:18px 28px;border-bottom:1px solid #e5ebf2;font-size:12px;color:#7b8798}
#b24-presentation .bp-toolbar>span:first-child{color:#20376d;font-weight:700;letter-spacing:.06em}
#b24-presentation .b24-close{position:static;margin-left:auto;line-height:1;width:32px;height:32px;font-size:26px!important}
#b24-presentation .b24-slide{box-sizing:border-box;min-height:540px;padding:42px 54px;display:flex;flex-direction:column;justify-content:space-between;gap:28px;background:#fff}
#b24-presentation .b24-slide[hidden]{display:none}
#b24-presentation h2{font-size:clamp(34px,3.5vw,48px);font-weight:500;line-height:1.12;letter-spacing:-.035em;margin:14px 0 18px;max-width:1000px;color:#20376d}
#b24-presentation h3{font-size:23px;font-weight:500;line-height:1.25;margin:16px 0;color:#20376d}
#b24-presentation p{font-size:18px;line-height:1.6;max-width:860px;margin:0;color:#657387}
#b24-presentation .bp-top>span,#b24-presentation small{font-size:11px;letter-spacing:.06em;color:#5580a1}
#b24-presentation .bp-note{border-top:1px solid #e2e9f0;padding-top:16px;font-size:13px;line-height:1.5;color:#758395}
#b24-presentation .bp-cover{background:linear-gradient(120deg,#fff 35%,#eef9ff)}
#b24-presentation .bp-cover-grid{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:60px;flex:1}
#b24-presentation .bp-brand{font-size:14px;letter-spacing:.1em;font-weight:700;margin-bottom:40px}
#b24-presentation .bp-cover h2{font-size:clamp(44px,5vw,68px);margin:0 0 26px}
#b24-presentation .bp-cover h2 span,#b24-presentation .bp-cover-side>strong span{color:#00aeef}
#b24-presentation .bp-cover-note{font-size:14px;color:#7b8da1;margin-top:34px}
#b24-presentation .bp-cover-side{border-left:1px solid #cce4f1;padding-left:40px}
#b24-presentation .bp-cover-side>strong{display:block;font-size:34px;font-weight:500;margin-bottom:24px}
#b24-presentation .bp-cover-side>div{padding:18px 0;border-bottom:1px solid #dcecf4}
#b24-presentation .bp-cover-side b{display:block;font-size:21px;font-weight:500}
#b24-presentation .bp-cover-side div span{display:block;font-size:14px;color:#6d8296;margin-top:7px;line-height:1.5}
#b24-presentation .bp-compare,#b24-presentation .bp-payment,#b24-presentation .bp-closing{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
#b24-presentation .bp-compare>div{border-top:3px solid #00aeef;padding-top:16px}
#b24-presentation .bp-compare>div:last-child{border-color:#20376d}
#b24-presentation dl{margin:0}
#b24-presentation dl>div{display:flex;justify-content:space-between;gap:18px;border-bottom:1px solid #e5ebf1;padding:11px 0;font-size:14px;line-height:1.5}
#b24-presentation dt{color:#7a8798}
#b24-presentation dd{margin:0;text-align:right;color:#20376d}
#b24-presentation .bp-amount{font-size:clamp(40px,5vw,66px);letter-spacing:-.04em;margin:22px 0;white-space:nowrap}
#b24-presentation .bp-amount>span{color:#00aeef}
#b24-presentation .bp-payment-cases>div{border-left:3px solid #d1b257;padding:7px 0 7px 22px;margin-bottom:30px}
#b24-presentation .bp-payment-cases>div:last-child{border-color:#50a46b}
#b24-presentation .bp-payment-cases b{display:block;font-size:23px;font-weight:500}
#b24-presentation .bp-payment-cases span{display:block;font-size:16px;line-height:1.6;color:#6d7b8b;margin-top:10px}
#b24-presentation .bp-process{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
#b24-presentation .bp-process>div{border-top:2px solid #cce7f7;padding-top:20px}
#b24-presentation .bp-process>div>span{font-size:38px;font-weight:400;color:#00aeef}
#b24-presentation .bp-process p{font-size:16px}
#b24-presentation .bp-rules>div{display:grid;grid-template-columns:230px 1fr;gap:30px;padding:20px 0;border-bottom:1px solid #e1e9f1}
#b24-presentation .bp-rules b{font-size:20px;font-weight:500}
#b24-presentation .bp-rules span{font-size:17px;line-height:1.5;color:#657387}
#b24-presentation .bp-rate{font-size:clamp(44px,5vw,66px);letter-spacing:-.045em;line-height:1.2;margin:20px 0;white-space:nowrap}
#b24-presentation .bp-rate>span{font-size:22px;color:#718398;letter-spacing:0}
#b24-presentation .bp-rate>small{font-size:19px;letter-spacing:0;color:#20376d}
#b24-presentation .bp-delivery h3:first-child{margin-top:0}
#b24-presentation .bp-delivery p{font-size:16px}
#b24-presentation .bp-delivery h3{margin-top:28px}
#b24-presentation .bp-contact{display:inline-block;margin-top:26px;padding:14px 24px;border-radius:30px;color:#fff;background:#0b57d0;text-decoration:none;font-size:16px}
#b24-presentation .b24-slide-controls{position:sticky;bottom:0;background:#fff;display:flex;gap:12px;margin:0;padding:14px 28px;border-top:1px solid #e5ebf2;align-items:center}
#b24-presentation .bp-footer-brand{margin-right:auto;color:#8794a4;font-size:13px}
#b24-presentation #b24-slide-count{min-width:45px;text-align:center;font-size:13px;font-variant-numeric:tabular-nums}
#b24-presentation .b24-slide-controls button{font-size:14px;padding:9px 16px;border-radius:9px}
@media(max-width:760px){
#b24-presentation.bp-deck{width:96vw;border-radius:16px}
#b24-presentation .b24-slide{padding:28px 22px;min-height:500px;gap:26px}
#b24-presentation .bp-cover-grid,#b24-presentation .bp-compare,#b24-presentation .bp-payment,#b24-presentation .bp-closing,#b24-presentation .bp-process{grid-template-columns:1fr;gap:26px}
#b24-presentation .bp-cover-side{padding-left:20px}
#b24-presentation .bp-brand{margin-bottom:24px}
#b24-presentation .bp-cover h2{font-size:44px}
#b24-presentation .bp-rules>div{grid-template-columns:1fr;gap:9px;padding:16px 0}
#b24-presentation .bp-toolbar{padding:12px 18px;gap:14px}
#b24-presentation .b24-slide-controls{padding:12px;gap:8px}
#b24-presentation .bp-footer-brand{display:none}
#b24-presentation #b24-print{margin-left:auto}
#b24-presentation p{font-size:16px}
}
@media print{
@page{size:A4 landscape;margin:0}
body.b24-print #b24-presentation.bp-deck{position:static;width:297mm;max-width:none;max-height:none;overflow:visible;border:0;border-radius:0;box-shadow:none;margin:0;padding:0}
body.b24-print #b24-presentation .bp-toolbar,body.b24-print #b24-presentation .b24-slide-controls{display:none!important}
body.b24-print #b24-presentation .b24-slide,body.b24-print #b24-presentation .b24-slide[hidden]{display:flex!important;width:297mm;height:210mm;min-height:0;padding:17mm 20mm;break-after:page;break-inside:avoid;print-color-adjust:exact;-webkit-print-color-adjust:exact}
body.b24-print #b24-presentation .b24-slide:last-of-type{break-after:auto}
body.b24-print #b24-presentation .bp-cover-grid{grid-template-columns:1.2fr 1fr}
body.b24-print #b24-presentation .bp-compare,body.b24-print #b24-presentation .bp-payment,body.b24-print #b24-presentation .bp-closing{grid-template-columns:1fr 1fr}
body.b24-print #b24-presentation .bp-process{grid-template-columns:repeat(3,1fr)}
body.b24-print #b24-presentation .bp-rules>div{grid-template-columns:230px 1fr}
}

/* B24 square illustration v1 */
.b24-page .integration-hero { padding: 52px 0; }
.b24-page .b24-hero-layout {
    grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr);
    gap: 44px;
    align-items: center;
}
.b24-page .b24-hero-art.b24-hero-image {
    display: block;
    width: min(100%,420px);
    min-width: 0;
    height: auto;
    min-height: 0;
    margin: 0 auto;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    align-self: center;
}
.b24-page .b24-hero-image img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 0;
}
@media (max-width:1000px) {
    .b24-page .b24-hero-layout { grid-template-columns:1fr; gap:28px; }
}
@media (max-width:600px) {
    .b24-page .integration-hero { padding:36px 0; }
    .b24-page .b24-hero-art.b24-hero-image { width:min(100%,340px); }
}

/* B24 overview editorial v3 */
.b24-page .bv-section{padding:84px 0;color:#202124}
.b24-page .bv-section .container{width:min(1240px,calc(100% - 64px));margin:0 auto}
.b24-page .bv-section h2{margin:12px 0 24px;font-size:clamp(34px,3.5vw,48px);font-weight:500;line-height:1.1;letter-spacing:-.035em}
.b24-page .bv-section h3{margin:0 0 14px;font-size:23px;line-height:1.25;font-weight:500;letter-spacing:-.02em}
.b24-page .bv-section p{margin:0;color:#5f6368;font-size:16px;line-height:1.75}
.b24-page .bv-kicker{display:block;color:#5f6368;font-size:16px;line-height:1.5;font-weight:400}
.b24-page .bv-head{max-width:820px;margin-bottom:44px}
.b24-page .bv-head>p{max-width:720px;font-size:17px;line-height:1.65}
.b24-page .bv-editorial{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:center}
.b24-page .bv-copy>p{margin-bottom:22px;font-size:17px;line-height:1.7}
.b24-page .bv-copy .integration-google-btn{margin-top:6px}
.b24-page .bv-journey{padding:30px;border:1px solid #e3eaf2;border-radius:28px;background:linear-gradient(145deg,#f1f8ff,#f8fbff);min-width:0}
.b24-page .bv-journey-top{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:26px}
.b24-page .bv-journey-top>strong{font-size:25px;color:#20376d;font-weight:500;letter-spacing:-.04em}
.b24-page .bv-journey-top>strong>span{color:#00aeef}
.b24-page .bv-journey-top>small{color:#7c8999;font-size:11px}
.b24-page .bv-journey ol{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.b24-page .bv-journey li{display:flex;align-items:center;gap:16px;padding:19px 16px;border:1px solid #e6edf4;border-radius:15px;background:#fff}
.b24-page .bv-journey li>span{font-size:13px;color:#1967d2;font-variant-numeric:tabular-nums}
.b24-page .bv-journey li>div{flex:1;min-width:0}
.b24-page .bv-journey li strong{display:block;font-size:16px;font-weight:500;line-height:1.4}
.b24-page .bv-journey li p{font-size:12px;margin-top:5px;line-height:1.5}
.b24-page .bv-journey li i{font-size:10px;font-style:normal;color:#6e8196}
.b24-page .bv-journey-note{padding-top:20px;font-size:12px;color:#668099;text-align:center}
.b24-page .bv-capabilities{background:#f8faff}
.b24-page .bv-cap-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:64px;row-gap:0}
.b24-page .bv-cap-grid article{display:flex;align-items:flex-start;gap:22px;padding:28px 0;border-top:1px solid #e1e7ef;min-width:0}
.b24-page .bv-cap-grid article h3{font-size:22px}
.b24-page .bv-cap-grid article p{font-size:15px;line-height:1.7}
.b24-page .bv-icon{width:48px;height:48px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:#e8f0fe;color:#1967d2;border-radius:15px}
.b24-page .bv-icon svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.b24-page .bv-cap-grid article:nth-child(3n+2) .bv-icon{background:#e6f4ea;color:#32824c}
.b24-page .bv-cap-grid article:nth-child(3n) .bv-icon{background:#eeebfa;color:#7763af}
.b24-page .bv-integration-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.b24-page .bv-integration-grid article{padding:28px;border:1px solid #e0e5ed;border-radius:24px;min-width:0;background:#fff}
.b24-page .bv-card-top{display:flex;align-items:center;gap:12px;margin-bottom:26px}
.b24-page .bv-card-top>span:last-child{font-size:11px;color:#7c8795;line-height:1.5}
.b24-page .bv-integration-grid article p{font-size:15px;line-height:1.7}
.b24-page .bv-integration-grid article:nth-child(2) .bv-icon{background:#fff5d8;color:#94752a}
.b24-page .bv-integration-grid article:nth-child(4) .bv-icon{background:#e6f4ea;color:#32824c}
.b24-page .bv-data{padding-top:40px}
.b24-page .bv-data-visual{padding:34px;border-radius:28px;border:1px solid #e2e8ef;background:linear-gradient(135deg,#f2f6ff,#f0fbff);min-width:0}
.b24-page .bv-data-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}
.b24-page .bv-data-top strong{font-size:18px;font-weight:500}
.b24-page .bv-data-top>span{font-size:11px;color:#6b8097}
.b24-page .bv-data-row{display:grid;grid-template-columns:100px 1fr;gap:20px;align-items:center;padding:18px 20px;background:#fff;border-bottom:1px solid #e6edf5}
.b24-page .bv-data-row>span{font-size:13px;color:#1967d2}
.b24-page .bv-data-row strong{display:block;font-size:15px;font-weight:500}
.b24-page .bv-data-row small{display:block;margin-top:7px;color:#788597;font-size:12px;line-height:1.4}
.b24-page .bv-data-note{margin-top:20px;color:#547389;font-size:12px;line-height:1.5}
.b24-page .bv-text-link{display:inline-flex;align-items:center;gap:16px;border:0;padding:0;background:none;color:#1967d2;text-decoration:none;font:inherit;font-size:15px;font-weight:500;cursor:pointer;line-height:1.5}
.b24-page .bv-text-link>span{font-size:22px}
.b24-page .bv-work{background:#f8faff}
.b24-page .bv-work-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.b24-page .bv-work-grid article{padding-top:24px;border-top:2px solid #dce6f3;min-width:0}
.b24-page .bv-step-number{display:block;color:#8ba4c2;font-size:44px;line-height:1;font-weight:400;letter-spacing:-.03em;margin-bottom:25px}
.b24-page .bv-work-grid p{font-size:15px;line-height:1.75}
.b24-page .bv-price-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:72px;align-items:center}
.b24-page .bv-price-layout>div>p{margin-bottom:18px;max-width:540px}
.b24-page .bv-price-card{padding:40px;border-radius:26px;background:#edf4ff;border:1px solid #dce8fb}
.b24-page .bv-rate{font-size:clamp(38px,3.7vw,52px);color:#20376d;line-height:1.15;letter-spacing:-.04em;margin-bottom:22px;white-space:nowrap}
.b24-page .bv-rate>span{font-size:20px;letter-spacing:0}
.b24-page .bv-rate>small{font-size:20px;letter-spacing:0}
.b24-page .bv-price-card .integration-google-btn{display:flex;width:100%;justify-content:center;margin:28px 0 22px}
.b24-page .bv-price-card .bv-text-link{display:flex;justify-content:center;width:100%}
@media(max-width:1000px){.b24-page .bv-editorial,.b24-page .bv-price-layout{gap:32px}.b24-page .bv-integration-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.b24-page .bv-cap-grid{column-gap:32px}.b24-page .bv-journey{padding:20px}.b24-page .bv-journey li{gap:10px;padding:15px 12px}.b24-page .bv-journey li i{display:none}.b24-page .bv-data-visual{padding:20px}.b24-page .bv-data-row{grid-template-columns:85px 1fr;padding:16px 12px;gap:12px}.b24-page .bv-price-card{padding:28px}}
@media(max-width:760px){.b24-page .bv-section{padding:54px 0}.b24-page .bv-section .container{width:calc(100% - 32px)}.b24-page .bv-editorial,.b24-page .bv-price-layout{grid-template-columns:1fr;gap:30px}.b24-page .bv-cap-grid,.b24-page .bv-integration-grid,.b24-page .bv-work-grid{grid-template-columns:1fr;gap:20px}.b24-page .bv-cap-grid{gap:0}.b24-page .bv-head{margin-bottom:30px}.b24-page .bv-section h2{font-size:34px}.b24-page .bv-section h2 br{display:none}.b24-page .bv-kicker{font-size:14px}.b24-page .bv-cap-grid article{gap:18px;padding:25px 0}.b24-page .bv-cap-grid article h3{font-size:21px}.b24-page .bv-copy>p{font-size:16px}.b24-page .bv-data-visual{order:2}.b24-page .bv-data .bv-copy{order:1}.b24-page .bv-step-number{font-size:35px;margin-bottom:18px}.b24-page .bv-work-grid{gap:30px}.b24-page .bv-journey-top{gap:10px}.b24-page .bv-journey-top>small{font-size:10px}.b24-page .bv-data-top strong{font-size:16px}.b24-page .bv-price-card{padding:28px 24px}.b24-page .bv-rate{font-size:40px}}

@media(max-width:380px){.b24-page .bv-rate{font-size:36px}.b24-page .bv-rate>small{font-size:17px}}

/* B24 rich documentation v1 */
.b24-page .b24-docs-rich{min-width:0;color:#202124}
.b24-page .b24-docs-rich>section{scroll-margin-top:110px}
.b24-page .b24-docs-rich p{font-size:17px;line-height:1.8;max-width:unset;color:#30343b}
.b24-page .b24-docs-rich h3{margin-bottom:26px}
.b24-page .b24-docs-rich h4{font-size:19px;line-height:1.35;margin:14px 0 10px;font-weight:600}
.b24-page .b24-docs-rich .b24d-note{padding:22px 25px;margin:28px 0;background:#eef7ff;border-left:3px solid #0875eb;border-radius:0 14px 14px 0;font-size:16px;line-height:1.75;color:#284563}
.b24-page .b24-docs-rich .b24d-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:32px 0}
.b24-page .b24-docs-rich .b24d-card{padding:24px;background:#f7f9fc;border:1px solid #dde5ee;border-radius:18px}
.b24-page .b24-docs-rich .b24d-card p{font-size:15px;line-height:1.65;margin:0;color:#566170}
.b24-page .b24-docs-rich .b24d-number{color:#0875eb;font-size:13px;letter-spacing:.06em;font-weight:700}
.b24-page .b24-docs-rich .b24d-table{overflow-x:auto;margin:32px 0;border:1px solid #dfe5ed;border-radius:16px;background:white}
.b24-page .b24-docs-rich table{width:100%;min-width:580px;border-collapse:collapse;margin:0;font-size:15px;line-height:1.65}
.b24-page .b24-docs-rich caption{text-align:left;padding:20px 22px;font-size:17px;font-weight:600;color:#233754;background:#f7f9fc;caption-side:top}
.b24-page .b24-docs-rich th,.b24-page .b24-docs-rich td{padding:16px 20px;text-align:left;vertical-align:top;border:0;border-top:1px solid #e5eaf0}
.b24-page .b24-docs-rich th{background:#f1f6fc;font-weight:600;color:#284563}
.b24-page .b24-docs-rich td:first-child{font-weight:500;width:27%;color:#202124}
.b24-page .b24-docs-rich tbody tr:nth-child(even){background:#fafbfd}
.b24-page .b24-docs-rich .b24d-steps{list-style:none;counter-reset:step;padding:0;margin:32px 0}
.b24-page .b24-docs-rich .b24d-steps li{counter-increment:step;position:relative;padding:0 0 26px 60px;margin:0;min-height:64px}
.b24-page .b24-docs-rich .b24d-steps li:before{content:counter(step);position:absolute;left:0;top:0;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#e8f2ff;color:#0964d5;font-size:14px;font-weight:600;z-index:1}
.b24-page .b24-docs-rich .b24d-steps li:not(:last-child):after{content:'';position:absolute;left:16px;top:34px;bottom:0;border-left:2px solid #e0e9f5}
.b24-page .b24-docs-rich .b24d-steps strong{display:block;font-size:18px;line-height:1.6}
.b24-page .b24-docs-rich .b24d-steps p{font-size:16px;margin:6px 0 0}
.b24-page .b24-docs-rich .b24d-code{margin:30px 0 12px;border:1px solid #dce4ee;border-radius:16px;overflow:hidden;background:#15283f;color:#e8f3ff}
.b24-page .b24-docs-rich .b24d-code>div{padding:14px 20px;font-size:13px;background:#edf4fc;color:#264460;font-weight:600}
.b24-page .b24-docs-rich pre{margin:0;padding:24px;overflow:auto;font:14px/1.8 ui-monospace,SFMono-Regular,Consolas,monospace;color:inherit;background:transparent;white-space:pre}
.b24-page .b24-docs-rich pre code{background:none;color:inherit;padding:0;font:inherit}
.b24-page .b24-docs-rich .b24d-source{font-size:13px;color:#68717d;line-height:1.65;margin:10px 0 28px}
.b24-page .b24-docs-rich a{color:#0964d5;text-decoration:underline;text-underline-offset:3px}
.b24-page .b24-docs-rich :focus-visible{outline:3px solid #68a9ff;outline-offset:3px}
.b24-page .b24-docs-rich .b24d-flow{margin:32px 0;padding:24px;border:1px solid #dfe5ed;border-radius:18px;background:#fafcff}
.b24-page .b24-docs-rich .b24d-flow svg{display:block;width:100%;height:auto;max-height:none}
.b24-page .b24-docs-rich figcaption{font-size:14px;line-height:1.6;color:#677587;margin-top:16px}
@media(max-width:1100px){.b24-page .b24-docs-rich .b24d-cards{grid-template-columns:1fr}.b24-page .b24-docs-rich .b24d-card{padding:22px}.b24-page .b24-docs-rich .b24d-card h4{margin-top:8px}}
@media(max-width:600px){.b24-page .b24-docs-rich p{font-size:16px}.b24-page .b24-docs-rich .b24d-note{padding:18px}.b24-page .b24-docs-rich .b24d-steps li{padding-left:46px}.b24-page .b24-docs-rich .b24d-flow{padding:10px}.b24-page .b24-docs-rich pre{font-size:12px;padding:18px}.b24-page .b24-docs-rich th,.b24-page .b24-docs-rich td{padding:13px}}
@media print{.b24-page .b24-docs-rich .b24d-table{overflow:visible}.b24-page .b24-docs-rich table{min-width:0;font-size:10pt}.b24-page .b24-docs-rich .b24d-code{background:#f4f6f9;color:#202124}.b24-page .b24-docs-rich .b24d-card,.b24-page .b24-docs-rich tr{break-inside:avoid}}