.erp-integration-page {
  color: #26364e;
  background: #fff;
}

.integrated-hero {
  overflow: hidden;
  padding: 110px 0 100px;
  background: radial-gradient(ellipse at 88% 28%, #dff2ff 0, transparent 43%), linear-gradient(120deg, #f9fbff, #f1f5ff);
}

.integrated-hero-layout {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: 44px;
}

.integrated-hero-copy h1 { margin: 20px 0 16px; color: #1d2c46; font-size: clamp(28px, 2.7vw, 40px); letter-spacing: -.045em; line-height: 1.25; }
.integrated-hero-copy h2 { margin: 0 0 23px; color: #2868eb; font-size: clamp(30px, 3vw, 44px); letter-spacing: -.04em; line-height: 1.35; }
.integrated-lead { max-width: 490px; margin: 0; color: #65758c; font-size: 16px; line-height: 1.9; }
.integrated-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 23px; }
.integrated-tags span { padding: 6px 11px; color: #3964a4; background: #e9f0ff; border: 1px solid #dce7fb; border-radius: 6px; font-size: 12px; }
.integrated-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.integrated-actions .button { min-height: 50px; padding: 14px 20px; font-size: 14px; }

.integrated-hero-artwork { min-width: 0; width: 100%; }
.integrated-hero-artwork > img { display: block; width: 100%; height: auto; }

.integrated-workbench { min-width: 0; overflow: hidden; background: #fff; border: 1px solid #d9e6fa; border-radius: 18px; box-shadow: 0 30px 65px rgb(37 89 167 / 14%); }
.integrated-workbench-bar { display: flex; min-height: 49px; align-items: center; gap: 15px; padding: 12px 16px; background: #fcfdff; border-bottom: 1px solid #e6edf8; }
.integrated-workbench-bar > span { display: flex; flex-shrink: 0; gap: 5px; }
.integrated-workbench-bar i { width: 7px; height: 7px; background: #f3a99e; border-radius: 50%; }
.integrated-workbench-bar i:nth-child(2) { background: #f5d68b; }
.integrated-workbench-bar i:nth-child(3) { background: #7cd1b6; }
.integrated-workbench-bar b { color: #38547b; font-size: 12px; }
.integrated-workbench-bar small { margin-left: auto; color: #8b9ab0; font-size: 10px; white-space: nowrap; }
.integrated-workbench-body { display: grid; grid-template-columns: 92px minmax(0, 1fr); }
.integrated-workbench-nav { display: flex; flex-direction: column; gap: 4px; padding: 20px 9px; background: #f4f7fd; border-right: 1px solid #e9eff8; }
.integrated-workbench-nav b { margin: 0 9px 15px; color: #326cdb; font-size: 21px; letter-spacing: .05em; }
.integrated-workbench-nav span { padding: 9px 7px; color: #7b8da8; border-radius: 5px; font-size: 10px; white-space: nowrap; }
.integrated-workbench-nav .is-selected { color: #2e6de5; background: #e3ecff; font-weight: 700; }
.integrated-workbench-main { min-width: 0; padding: 24px 19px; }
.integrated-workbench-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.integrated-workbench-heading small { display: block; margin-bottom: 8px; color: #8b9ab1; font-size: 8px; letter-spacing: .12em; }
.integrated-workbench-heading strong { color: #25446e; font-size: 16px; line-height: 1.5; }
.integrated-workbench-heading > span { flex-shrink: 0; padding: 5px 7px; color: #198b79; background: #e4f8f0; border-radius: 20px; font-size: 9px; }
.integrated-mini-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 22px; }
.integrated-mini-metrics div { min-width: 0; padding: 12px 9px; background: #eff5ff; border: 1px solid #e2eafa; border-radius: 9px; }
.integrated-mini-metrics div:nth-child(2) { background: #eff9f8; border-color: #e0f1ed; }
.integrated-mini-metrics div:nth-child(3) { background: #f5f2ff; border-color: #ebe5fc; }
.integrated-mini-metrics small { display: block; margin-bottom: 7px; color: #8191a7; font-size: 9px; }
.integrated-mini-metrics b { color: #42658f; font-size: 14px; }
.integrated-mini-flow { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 17px 0; }
.integrated-mini-flow span { color: #4b74ac; font-size: 9px; }
.integrated-mini-flow i { color: #a1b9d7; font-size: 11px; font-style: normal; }
.integrated-workbench-panel { padding: 15px 12px 4px; border: 1px solid #e5edf7; border-radius: 9px; }
.integrated-workbench-panel > b { display: block; margin-bottom: 8px; color: #49617e; font-size: 11px; }
.integrated-workbench-panel > div { display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 8px; padding: 12px 0; border-top: 1px solid #edf2f8; font-size: 9px; }
.integrated-workbench-panel span { color: #5c708c; }
.integrated-workbench-panel em { color: #94a3b7; font-style: normal; }
.integrated-workbench-panel strong { padding: 3px 5px; color: #289283; background: #eaf7f2; border-radius: 3px; font-size: 8px; }
.integrated-workbench-note { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 7px; margin-top: 15px; color: #8297b4; font-size: 9px; }

.integrated-value-strip { border-bottom: 1px solid #eaf0f8; background: #fff; }
.integrated-value-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 26px; padding-bottom: 26px; }
.integrated-value-grid > div { padding: 10px 25px; border-right: 1px solid #e5edf7; text-align: center; }
.integrated-value-grid > div:last-child { border: 0; }
.integrated-value-grid strong { display: block; margin-bottom: 8px; color: #2b64c7; font-size: 19px; }
.integrated-value-grid span { color: #7d8ba0; font-size: 12px; }
.erp-integration-page .section-heading { margin-bottom: 35px; }
.erp-integration-page .section-heading h2 { line-height: 1.35; }
.erp-integration-page .section-heading p { max-width: 620px; line-height: 1.8; }
.integrated-challenges, .integrated-scenarios, .integrated-implementation { background: #f7f9fd; }
.integrated-compare-grid, .integrated-deployment-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.integrated-compare-card, .integrated-deployment-grid article { padding: 32px 34px; background: #fff; border: 1px solid #e2eaf6; border-radius: 18px; }
.integrated-compare-card > span, .integrated-deployment-grid article > span { color: #8793a7; font-size: 12px; font-weight: 650; letter-spacing: .04em; }
.integrated-compare-card h3, .integrated-deployment-grid h3 { margin: 14px 0 20px; color: #283e5e; font-size: 23px; line-height: 1.5; }
.integrated-compare-card ul, .integrated-deployment-grid ul { display: grid; gap: 13px; margin: 0; padding-left: 19px; color: #75849a; font-size: 14px; line-height: 1.8; }
.integrated-compare-card.is-integrated { background: linear-gradient(135deg, #eaf2ff, #f7fbff); border-color: #cdddf9; }
.integrated-compare-card.is-integrated > span { color: #3675dd; }
.integrated-compare-card.is-integrated li::marker { color: #3675dd; }

.integrated-module-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.integrated-module-card { padding: 30px; border: 1px solid #e2eaf6; border-radius: 16px; transition: transform .2s, box-shadow .2s; }
.integrated-module-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgb(43 83 145 / 8%); }
.integrated-module-card > span { color: #3777e6; font-size: 11px; font-weight: 700; letter-spacing: .045em; }
.integrated-module-card h3 { margin: 21px 0 13px; color: #233d60; font-size: 21px; line-height: 1.45; }
.integrated-module-card p, .integrated-scenario-grid p, .integrated-deployment-grid p, .integrated-rollout p { margin: 0; color: #7c8a9e; font-size: 14px; line-height: 1.9; }
.integrated-module-card > div { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 21px; }
.integrated-module-card small { padding: 4px 8px; color: #6582a7; background: #f1f6fd; border-radius: 4px; font-size: 11px; }

.integrated-workflow-section { background: linear-gradient(120deg, #edf4ff, #f5faff); }
.integrated-workflow, .integrated-rollout { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.integrated-workflow li { position: relative; padding: 23px 17px; background: #fff; border: 1px solid #dce7f8; border-radius: 12px; }
.integrated-workflow li + li::before { position: absolute; top: 44px; left: -13px; content: "→"; color: #79a2e3; font-size: 17px; }
.integrated-workflow b, .integrated-rollout b { color: #6092e4; font-size: 13px; }
.integrated-workflow h3 { margin: 18px 0 9px; color: #2a4c7e; font-size: 17px; }
.integrated-workflow p { margin: 0; color: #8294ae; font-size: 12px; line-height: 1.8; }
.integrated-foundation { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 15px 26px; margin-top: 24px; padding: 20px; color: #7291b8; background: rgb(255 255 255 / 65%); border: 1px dashed #cddcf2; border-radius: 12px; font-size: 12px; }
.integrated-foundation b { color: #3f6ba8; }
.integrated-scenario-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.integrated-scenario-grid article { padding: 34px; background: #fff; border: 1px solid #e5ebf5; border-radius: 16px; }
.integrated-scenario-grid span { color: #79a2d7; font-size: 10px; letter-spacing: .07em; }
.integrated-scenario-grid h3 { margin: 21px 0 13px; color: #2c4364; font-size: 23px; }
.integrated-deployment-grid article { background: linear-gradient(135deg, #fff, #f8faff); }
.integrated-deployment-grid article > span { color: #6d91c9; }
.integrated-deployment-grid ul { margin-top: 23px; color: #657c9c; }
.integrated-rollout { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.integrated-rollout li { padding: 25px 23px; border-top: 2px solid #c2d7fa; }
.integrated-rollout h3 { margin: 18px 0 12px; color: #304a70; font-size: 19px; }

.integrated-faq-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; }
.integrated-faq-layout h2 { margin: 20px 0; color: #253b5c; font-size: clamp(26px, 2.5vw, 36px); letter-spacing: -.035em; line-height: 1.45; }
.integrated-faq-layout > div > p:not(.eyebrow) { margin-bottom: 24px; color: #8090a6; font-size: 14px; line-height: 1.8; }
.integrated-faq-list details { border-bottom: 1px solid #e4ebf5; }
.integrated-faq-list summary { position: relative; padding: 23px 26px 23px 0; color: #334f75; font-size: 16px; font-weight: 650; line-height: 1.6; cursor: pointer; list-style: none; }
.integrated-faq-list summary::-webkit-details-marker { display: none; }
.integrated-faq-list summary::after { position: absolute; right: 3px; content: "+"; color: #6693d6; }
.integrated-faq-list details[open] summary::after { content: "−"; }
.integrated-faq-list p { margin: 0 0 24px; color: #7a8da8; font-size: 14px; line-height: 1.9; }
.erp-integration-page a:focus-visible, .integrated-faq-list summary:focus-visible { outline: 2px solid #3978ff; outline-offset: 4px; }

@media (max-width: 1100px) {
  .integrated-hero-layout { gap: 25px; }
  .integrated-workbench-body { grid-template-columns: 78px minmax(0, 1fr); }
  .integrated-workbench-main { padding: 18px 12px; }
  .integrated-workbench-heading strong { font-size: 14px; }
  .integrated-mini-metrics b { font-size: 12px; }
  .integrated-module-card { padding: 24px; }
  .integrated-workflow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .integrated-workflow li:nth-child(4)::before { display: none; }
}

@media (max-width: 900px) {
  .integrated-hero { padding: 70px 0 80px; }
  .integrated-hero-layout { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .integrated-hero-copy { max-width: 620px; }
  .integrated-lead { max-width: 620px; }
  .integrated-workbench, .integrated-hero-artwork { width: 100%; max-width: 620px; justify-self: center; }
  .integrated-module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .integrated-scenario-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .integrated-rollout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .integrated-faq-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .integrated-value-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; }
  .integrated-value-grid > div:nth-child(2) { border-right: 0; }
}

@media (max-width: 620px) {
  .erp-integration-page .service-float,
  .erp-integration-page .service-float:hover { top: auto; right: 12px; bottom: max(10px, env(safe-area-inset-bottom)); width: calc(100% - 24px); flex-direction: row; padding: 4px; background: rgb(255 255 255 / 97%); border: 1px solid #e2eafa; border-radius: 14px; box-shadow: 0 5px 25px rgb(36 72 125 / 15%); transform: none; }
  .erp-integration-page .service-float-online { width: 25%; transform: none; }
  .erp-integration-page .service-float-avatar { width: 29px; height: 29px; border-width: 2px; }
  .erp-integration-page .service-float-online-label { padding: 2px 5px; font-size: 9px; }
  .erp-integration-page .service-float-actions { display: flex; width: 75%; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; }
  .erp-integration-page .service-float-item { width: 33.333%; height: 52px; min-height: 52px; border: 0; border-left: 1px solid #edf1f8; }
  .erp-integration-page .site-footer { padding-bottom: 90px; }
  .integrated-hero { padding: 48px 0 60px; }
  .integrated-hero-copy h1 { font-size: 28px; }
  .integrated-hero-copy h2 { font-size: 32px; }
  .integrated-lead { font-size: 14px; }
  .integrated-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .integrated-workbench-body { grid-template-columns: 65px minmax(0, 1fr); }
  .integrated-workbench-nav { padding: 18px 4px; }
  .integrated-workbench-nav b { margin-left: 7px; font-size: 16px; }
  .integrated-workbench-nav span { padding: 8px 4px; font-size: 9px; }
  .integrated-workbench-bar { gap: 9px; padding: 12px; }
  .integrated-workbench-bar b { font-size: 10px; }
  .integrated-workbench-bar small { font-size: 8px; }
  .integrated-workbench-main { padding: 17px 9px; }
  .integrated-workbench-heading strong { font-size: 12px; }
  .integrated-workbench-heading > span { display: none; }
  .integrated-mini-metrics { gap: 5px; }
  .integrated-mini-metrics div { padding: 10px 5px; }
  .integrated-mini-metrics b { font-size: 10px; }
  .integrated-mini-metrics small { font-size: 8px; }
  .integrated-mini-flow { flex-wrap: wrap; justify-content: center; gap: 7px; }
  .integrated-workbench-panel { padding: 11px 7px 0; }
  .integrated-workbench-panel > div { grid-template-columns: 1fr auto; font-size: 8px; }
  .integrated-workbench-panel em { display: none; }
  .integrated-workbench-note { justify-content: flex-start; font-size: 8px; }
  .integrated-value-grid > div { padding: 10px 6px; }
  .integrated-value-grid strong { font-size: 17px; }
  .integrated-value-grid span { font-size: 10px; }
  .integrated-compare-grid, .integrated-module-grid, .integrated-deployment-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .integrated-compare-card, .integrated-deployment-grid article { padding: 27px 23px; }
  .integrated-compare-card h3, .integrated-deployment-grid h3 { font-size: 21px; }
  .integrated-workflow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .integrated-workflow li:nth-child(4)::before { display: block; }
  .integrated-workflow li:nth-child(2n + 1)::before { display: none; }
  .integrated-workflow li { padding: 21px 15px; }
  .integrated-workflow h3 { font-size: 16px; }
  .integrated-scenario-grid article { padding: 28px; }
  .integrated-rollout { gap: 16px; }
  .integrated-rollout li { padding: 20px 6px; }
  .integrated-rollout h3 { font-size: 17px; }
  .integrated-rollout p { font-size: 12px; }
}