.integrations-page {
  --in-green: #123b26;
  --in-deep: #082719;
  --in-mint: #dff3df;
  --in-sage: #eaf1e8;
  --in-paper: #fffdf8;
  --in-line: #d5dfd6;
  --in-muted: #5c6e63;
}

.integrations-page .site-nav { background: rgba(255, 253, 248, .96); }
.integrations-page .home-section { padding: clamp(82px, 8.5vw, 124px) 0; }
.integrations-page h1,
.integrations-page h2 { text-wrap: balance; }
.integrations-page p { text-wrap: pretty; }

.integrations-hero { padding-top: clamp(82px, 9vw, 132px); }
.integrations-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(430px, .84fr); gap: clamp(52px, 7vw, 104px); align-items: center; }
.integrations-hero .home-hero-copy { width: 100%; }
.integrations-hero h1 { max-width: 780px; font-size: var(--type-display-hero); line-height: .98; }
.integrations-hero .home-hero-lead { max-width: 790px; }
.integrations-hero .home-hero-actions { flex-wrap: wrap; }
.integrations-hero .home-hero-note { max-width: 720px; margin-top: 23px; color: #51665a; }
.integrations-text-link { display: inline-flex; min-height: 54px; align-items: center; color: var(--in-green); font-weight: 780; text-decoration: none; }
.integrations-text-link:hover { text-decoration: underline; text-underline-offset: 5px; }
.integrations-text-link:focus-visible { outline: 3px solid #5aae72; outline-offset: 5px; }

.integration-hero-flow { border: 1px solid var(--in-line); background: #f6f9f3; box-shadow: 0 38px 90px -64px rgba(8, 39, 25, .78); }
.integration-flow-question { border-bottom: 1px solid var(--in-line); padding: 25px 27px; background: white; }
.integration-flow-question small,
.integration-flow-answer small { color: #78867d; font-size: .65rem; font-weight: 760; letter-spacing: .07em; text-transform: uppercase; }
.integration-flow-question p,
.integration-flow-answer p { margin: 9px 0 0; color: var(--in-deep); font-size: 1rem; line-height: 1.55; }
.integration-flow-route { display: grid; grid-template-columns: auto auto 1fr; gap: 16px; align-items: center; padding: 23px 27px; }
.integration-q { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 9px; background: var(--in-green); color: var(--in-mint); font-family: var(--font-display); font-size: 1.45rem; }
.integration-flow-route > i { color: #819088; font-style: normal; }
.integration-flow-route > div { border: 1px solid #cfdad1; padding: 12px 15px; background: white; }
.integration-flow-route small,
.integration-flow-route strong { display: block; }
.integration-flow-route small { color: #7a887f; font-size: .59rem; text-transform: uppercase; }
.integration-flow-route strong { margin-top: 4px; color: #31523c; font-size: .82rem; }
.integration-flow-data { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0 27px; border: 1px solid #83b58c; padding: 16px 18px; background: #e4f2e2; color: #28673c; }
.integration-flow-data span { display: flex; align-items: center; gap: 9px; }
.integration-flow-data i { font-size: 1.2rem; }
.integration-flow-data b { font-size: .74rem; }
.integration-flow-data strong { font-size: .92rem; }
.integration-flow-answer { margin: 20px 27px 27px; border-left: 3px solid #5ba66c; padding: 16px 18px; background: white; }

.integrations-demo-section { background: var(--home-bg); }
.integrations-demo { margin-top: clamp(42px, 5vw, 68px); }
.integration-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid #cad6cc; border-bottom: 0; background: var(--in-sage); }
.integration-tab { display: flex; min-width: 0; min-height: 80px; align-items: center; gap: 13px; border: 0; border-right: 1px solid #cad6cc; padding: 19px 23px; background: transparent; color: #63736a; cursor: pointer; text-align: left; }
.integration-tab:last-child { border-right: 0; }
.integration-tab span { color: #87948c; font-family: var(--font-display); font-size: .76rem; }
.integration-tab strong { font-size: .92rem; }
.integration-tab:hover { color: var(--in-green); }
.integration-tab.is-active { background: var(--in-green); color: white; }
.integration-tab.is-active span { color: #a8d3b0; }
.integration-tab:focus-visible { position: relative; z-index: 2; outline: 3px solid #5aae72; outline-offset: -4px; }
.integration-demo-canvas { border: 1px solid #cad6cc; background: white; box-shadow: 0 32px 90px -72px rgba(8, 39, 25, .82); }
.integration-demo-top { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #dce4dd; padding: 17px clamp(22px, 3vw, 36px); color: #718078; font-size: .7rem; font-weight: 760; }
.integration-demo-top > div { display: flex; align-items: center; gap: 10px; color: var(--in-deep); }
.integration-demo-top .integration-q { width: 31px; height: 31px; font-size: 1.1rem; }
.integration-scenario { display: grid; grid-template-columns: minmax(250px, .72fr) minmax(340px, 1fr) minmax(280px, .84fr); min-height: 520px; }
.integration-scenario[hidden] { display: none; }
.integration-scenario-question,
.integration-scenario-work,
.integration-scenario-outcome { display: flex; flex-direction: column; justify-content: center; padding: clamp(30px, 3.5vw, 48px); }
.integration-scenario-question { border-right: 1px solid #dce4dd; background: #f6f8f4; }
.integration-scenario-work { border-right: 1px solid #dce4dd; }
.integration-scenario-outcome { background: #fbfcfa; }
.integration-scenario-question > small,
.integration-scenario-work > small,
.integration-scenario-outcome > small { color: #718078; font-size: .64rem; font-weight: 820; letter-spacing: .08em; text-transform: uppercase; }
.integration-scenario-question h3 { margin: 24px 0 20px; color: var(--in-deep); font-size: clamp(1.45rem, 2.1vw, 2rem); line-height: 1.17; }
.integration-scenario-question > span { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; border: 1px solid #cad7cd; padding: 9px 11px; background: white; color: #486252; font-size: .7rem; font-weight: 730; }
.integration-scenario-question > span i { font-size: 1rem; }
.integration-step-row { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-top: 21px; }
.integration-step-row span { border: 1px solid #ced9d0; border-radius: 99px; padding: 8px 11px; color: #587063; font-size: .65rem; font-weight: 720; }
.integration-step-row i { color: #829087; font-style: normal; }
.integration-system-card { margin-top: 22px; border: 1px solid #d4ded6; padding: 17px; background: #f4f8f2; }
.integration-system-card > span { display: block; color: #7a887f; font-size: .59rem; letter-spacing: .06em; text-transform: uppercase; }
.integration-system-card > strong { display: block; margin-top: 4px; color: #2b5138; font-size: .84rem; }
.integration-system-card > div { margin-top: 18px; border-left: 3px solid #5aa66b; padding: 11px 13px; background: white; }
.integration-system-card b,
.integration-system-card small { display: block; }
.integration-system-card b { color: #2d6340; font-size: .75rem; }
.integration-system-card small { margin-top: 4px; color: #69796e; font-size: .64rem; }
.integration-scenario-outcome p { margin: 18px 0 25px; color: #31493a; font-size: .92rem; line-height: 1.65; }
.integration-scenario-outcome > span { display: flex; align-items: center; gap: 9px; border: 1px solid #cbd8ce; padding: 13px; font-size: .67rem; }
.integration-scenario-outcome > span i { font-size: 1.15rem; }
.outcome-read { background: #e5f2e3; color: #28663b; }
.outcome-action { background: #e0eee3; color: #205c36; }
.outcome-review { background: #f5efe1; color: #7a5a16; }
.integration-demo-note { margin: 16px 0 0; color: #66786d; font-size: .74rem; line-height: 1.6; }

.integration-capabilities-section { border-top: 1px solid var(--in-line); background: #f8faf6; }
.integration-capability-flow { display: grid; grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr); margin-top: clamp(42px, 6vw, 72px); }
.integration-capability-flow article { border: 1px solid #cad7cd; padding: clamp(30px, 4vw, 50px); background: white; }
.integration-capability-flow article > header { display: flex; gap: 19px; align-items: flex-start; }
.integration-capability-flow article > header > span { display: grid; width: 39px; height: 39px; flex: 0 0 auto; place-items: center; border: 1px solid #acc0b0; color: #577061; font-family: var(--font-display); font-size: .78rem; }
.integration-capability-flow header p { margin: 0; }
.integration-capability-flow header small,
.integration-capability-flow header strong { display: block; }
.integration-capability-flow header small { color: #3f7c50; font-size: .67rem; font-weight: 820; letter-spacing: .08em; text-transform: uppercase; }
.integration-capability-flow header strong { max-width: 440px; margin-top: 7px; color: var(--in-deep); font-family: var(--font-display); font-size: clamp(1.65rem, 2.5vw, 2.45rem); line-height: 1.08; }
.integration-capability-flow article > p { margin: 28px 0; color: var(--in-muted); line-height: 1.7; }
.capability-mini-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 9px; align-items: center; border: 1px solid #d9e1da; padding: 14px; background: #f5f8f3; color: #557062; font-size: .65rem; text-align: center; }
.capability-mini-flow i { color: #8a988f; font-style: normal; }
.capability-mini-flow strong { color: #26633b; }
.integration-capability-flow ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 20px; margin: 28px 0 0; padding: 0; list-style: none; }
.integration-capability-flow li { position: relative; padding-left: 15px; color: #53675a; font-size: .75rem; }
.integration-capability-flow li::before { position: absolute; top: .45em; left: 0; width: 6px; height: 6px; border-radius: 50%; background: #4e9a61; content: ""; }
.capability-connector { display: flex; align-items: center; justify-content: center; }
.capability-connector::before,
.capability-connector::after { width: 16px; height: 1px; background: #a8b9ab; content: ""; }
.capability-connector span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; background: var(--in-green); color: var(--in-mint); font-family: var(--font-display); }
.integration-conditional-note { max-width: 760px; margin: 26px auto 0; color: #617369; font-size: .76rem; text-align: center; }

.integration-split { display: grid; grid-template-columns: minmax(0, .82fr) minmax(520px, 1.18fr); gap: clamp(54px, 8vw, 112px); align-items: center; }
.integration-copy h2 { margin: 0; color: var(--in-deep); font-family: var(--font-display); font-size: var(--type-display-section); line-height: 1.02; }
.integration-copy > p:not(.home-kicker) { margin: 25px 0 0; color: var(--in-muted); font-size: 1rem; line-height: 1.75; }
.integration-copy > small { display: block; margin-top: 25px; border-left: 2px solid #79a985; padding-left: 15px; color: #65776b; font-size: .72rem; line-height: 1.65; }

.integration-order-section { background: var(--in-paper); }
.order-lookup-canvas { border: 1px solid #cbd7ce; background: #f5f8f3; box-shadow: 0 32px 80px -65px rgba(5, 35, 20, .8); }
.order-lookup-canvas > header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #d5dfd6; padding: 17px 21px; }
.order-lookup-canvas > header div { display: flex; align-items: center; gap: 10px; color: var(--in-deep); }
.order-lookup-canvas > header .integration-q { width: 30px; height: 30px; font-size: 1rem; }
.order-lookup-canvas > header > span { border: 1px solid #bdd0c1; padding: 7px 10px; background: white; color: #3f674b; font-size: .66rem; font-weight: 750; }
.order-lookup-query { margin: 22px; border: 1px solid #d1dcd3; padding: 22px; background: white; }
.order-lookup-query small,
.order-lookup-query strong { display: block; }
.order-lookup-query small { color: #7b887f; font-size: .61rem; text-transform: uppercase; }
.order-lookup-query strong { margin-top: 8px; color: var(--in-deep); font-size: 1.15rem; }
.order-lookup-query span { display: inline-block; margin-top: 15px; border: 1px solid #cad6cc; padding: 7px 9px; color: #536a5b; font-size: .67rem; }
.order-lookup-result { margin: 0 22px 22px; border: 1px solid #82b58c; padding: 18px; background: #e4f2e2; }
.order-lookup-result > span { display: flex; align-items: center; gap: 8px; color: #28683c; font-size: .72rem; }
.order-lookup-result i { font-size: 1.1rem; }
.order-lookup-result dl { display: grid; grid-template-columns: repeat(3, 1fr); margin: 18px 0 0; border-top: 1px solid #bad4bf; }
.order-lookup-result dl div { padding: 15px 10px 0 0; }
.order-lookup-result dt { color: #6c7e70; font-size: .59rem; text-transform: uppercase; }
.order-lookup-result dd { margin: 4px 0 0; color: #274d35; font-size: .75rem; font-weight: 750; }
.order-question-strip { display: flex; flex-wrap: wrap; gap: 7px; border-top: 1px solid #d5dfd6; padding: 18px 22px; }
.order-question-strip span { border: 1px solid #d3ddd5; border-radius: 99px; padding: 7px 10px; background: white; color: #64766a; font-size: .62rem; }

.integration-booking-section { padding: clamp(82px, 8.5vw, 124px) 0; background: var(--in-deep); color: #f4f8f3; }
.integration-booking-section .integration-copy h2,
.integration-technical-section .integration-copy h2 { color: white; }
.integration-booking-section .integration-copy > p:not(.home-kicker),
.integration-technical-section .integration-copy > p:not(.home-kicker) { color: #bed0c4; }
.booking-system-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.booking-system-list span { border: 1px solid #52715b; padding: 9px 13px; color: #cce4d1; font-size: .69rem; font-weight: 740; }
.booking-search-canvas { border: 1px solid #46624f; background: #103020; box-shadow: 0 38px 100px -70px #000; }
.booking-search-canvas > header { display: flex; justify-content: space-between; border-bottom: 1px solid #405c49; padding: 20px 23px; }
.booking-search-canvas > header span { font-weight: 750; }
.booking-search-canvas > header strong { color: #94d5a2; font-size: .68rem; }
.booking-filters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 23px; background: #3e5c48; }
.booking-filters span { padding: 15px; background: #163a27; }
.booking-filters small,
.booking-filters b { display: block; }
.booking-filters small { color: #8eaa96; font-size: .57rem; text-transform: uppercase; }
.booking-filters b { margin-top: 6px; color: #edf6ee; font-size: .7rem; }
.booking-result { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0 23px; border: 1px solid #5e9b6d; padding: 19px; background: #18452d; }
.booking-result div span,
.booking-result div strong,
.booking-result div small { display: block; }
.booking-result span { color: #97dba5; font-size: .66rem; }
.booking-result strong { margin-top: 5px; color: white; font-size: 1.15rem; }
.booking-result small { margin-top: 4px; color: #a9bcaf; font-size: .6rem; }
.booking-result > span { font-size: 1.4rem; }
.flight-example { display: grid; grid-template-columns: auto 1fr auto; gap: 17px; align-items: center; margin: 23px; border-top: 1px solid #405c49; padding-top: 20px; }
.flight-example > span { display: flex; align-items: center; gap: 7px; color: #8eaa96; font-size: .58rem; text-transform: uppercase; }
.flight-example i { font-size: 1rem; }
.flight-example p { margin: 0; color: #d7e5da; font-size: .73rem; }
.flight-example > strong { color: #a5dbad; font-size: .72rem; }

.integration-crm-section { background: #f4f7f1; }
.integration-crm-section .integration-split { grid-template-columns: minmax(520px, 1.14fr) minmax(0, .86fr); }
.crm-lead-canvas { border: 1px solid #ccd8ce; padding: clamp(24px, 3vw, 36px); background: white; }
.crm-dialogue { border-left: 3px solid #5ca66d; padding: 15px 18px; background: #eff6ed; }
.crm-dialogue small { color: #6f8074; font-size: .6rem; text-transform: uppercase; }
.crm-dialogue p { margin: 8px 0 0; color: #263f2f; font-size: .86rem; line-height: 1.55; }
.crm-lead-canvas ol { margin: 24px 0; padding: 0; list-style: none; }
.crm-lead-canvas li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: center; border-top: 1px solid #dce4dd; padding: 14px 0; }
.crm-lead-canvas li:last-child { border-bottom: 1px solid #dce4dd; }
.crm-lead-canvas li > span { color: #6f8175; font-family: var(--font-display); font-size: .7rem; }
.crm-lead-canvas li p { margin: 0; }
.crm-lead-canvas li small,
.crm-lead-canvas li b { display: block; }
.crm-lead-canvas li small { color: #75847a; font-size: .57rem; text-transform: uppercase; }
.crm-lead-canvas li b { margin-top: 4px; color: #304b39; font-size: .72rem; }
.crm-system-result { display: flex; align-items: center; justify-content: space-between; border: 1px solid #84b68d; padding: 14px 17px; background: #e4f2e2; color: #28653b; }
.crm-system-result > span { font-size: .7rem; font-weight: 760; }
.crm-system-result strong { display: flex; align-items: center; gap: 7px; font-size: .71rem; }
.crm-system-result i { font-size: 1.05rem; }
.integration-proof { border-left: 2px solid #75a981; padding-left: 15px; font-size: .76rem !important; font-weight: 700; }

.integration-finance-section { border-top: 1px solid var(--in-line); background: var(--in-paper); }
.invoice-flow { display: grid; grid-template-columns: 1fr auto .72fr auto 1fr auto .85fr; gap: 11px; align-items: stretch; }
.invoice-flow > div,
.invoice-flow > span { display: flex; min-width: 0; flex-direction: column; justify-content: center; border: 1px solid #ced9d0; padding: 17px; background: white; }
.invoice-flow > i { align-self: center; color: #849188; font-style: normal; }
.invoice-flow small { color: #77867c; font-size: .56rem; text-transform: uppercase; }
.invoice-flow strong,
.invoice-flow b { margin-top: 6px; color: #304b39; font-size: .7rem; line-height: 1.45; }
.invoice-flow .invoice-help { border-color: #83b68d; background: #e4f2e2; }
.invoice-flow .invoice-help strong { color: #28643a; }

.integration-platform-section { background: #f6f8f3; }
.integration-reuse-flow { display: grid; grid-template-columns: minmax(190px, .65fr) auto minmax(210px, .7fr) auto minmax(360px, 1.35fr); gap: 18px; align-items: center; margin-top: clamp(42px, 6vw, 70px); }
.integration-reuse-flow > i { color: #809087; font-style: normal; font-size: 1.35rem; }
.reuse-system,
.reuse-core { display: flex; min-height: 170px; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #c9d6cb; background: white; text-align: center; }
.reuse-system > span { color: #4e795b; font-size: 1.65rem; }
.reuse-system strong,
.reuse-core strong { margin-top: 10px; color: var(--in-deep); }
.reuse-system small,
.reuse-core small { margin-top: 6px; color: #718077; font-size: .61rem; }
.reuse-core { background: var(--in-green); }
.reuse-core > span { color: var(--in-mint); font-family: var(--font-display); font-size: 2rem; }
.reuse-core strong { color: white; }
.reuse-core small { color: #add1b5; }
.reuse-products { display: grid; gap: 10px; }
.reuse-products article { border: 1px solid #ccd8ce; padding: 20px; background: white; }
.reuse-products span { color: #3c7850; font-size: .63rem; font-weight: 820; letter-spacing: .06em; text-transform: uppercase; }
.reuse-products p { margin: 8px 0 0; color: #304b39; font-size: .8rem; }

.integration-custom-section { background: var(--in-paper); }
.integration-custom-grid { display: grid; grid-template-columns: minmax(0, .86fr) minmax(460px, 1.14fr); gap: clamp(54px, 8vw, 112px); align-items: center; }
.custom-usecase-canvas { border: 1px solid #cbd7ce; padding: clamp(26px, 4vw, 46px); background: #f5f8f3; }
.custom-usecase-canvas header { display: flex; align-items: center; gap: 13px; color: #3b6047; }
.custom-usecase-canvas header span { font-family: var(--font-display); font-size: .76rem; }
.custom-usecase-canvas header strong { font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; }
.custom-usecase-canvas > p { margin: 28px 0; color: var(--in-deep); font-family: var(--font-display); font-size: clamp(1.7rem, 2.5vw, 2.5rem); line-height: 1.1; }
.custom-usecase-canvas > div { display: flex; align-items: center; justify-content: space-between; gap: 15px; border: 1px solid #d1dcd3; padding: 16px; background: white; color: #607267; font-size: .68rem; }
.custom-usecase-canvas > div i { color: #849289; font-style: normal; }
.custom-usecase-canvas > div strong { color: #2b6740; }
.custom-usecase-canvas footer { display: flex; align-items: center; gap: 13px; margin-top: 22px; border-left: 3px solid #5aa56b; padding: 15px; background: #e8f2e6; }
.custom-usecase-canvas footer > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: var(--in-green); color: var(--in-mint); font-family: var(--font-display); }
.custom-usecase-canvas footer p { margin: 0; }
.custom-usecase-canvas footer small,
.custom-usecase-canvas footer b { display: block; }
.custom-usecase-canvas footer small { color: #6b7d70; font-size: .58rem; text-transform: uppercase; }
.custom-usecase-canvas footer b { margin-top: 3px; color: #2d5d3a; font-size: .73rem; }

.integration-technical-section { padding: clamp(52px, 5vw, 76px) 0; background: var(--in-deep); color: #f4f8f3; }
.integration-technical-section .integration-split { grid-template-columns: minmax(0, .8fr) minmax(500px, 1.2fr); }
.integration-technical-section .integration-copy h2 { font-size: var(--type-display-section); }
.technical-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 12px; align-items: center; }
.technical-flow > span { display: grid; min-height: 92px; place-items: center; border: 1px solid #486550; background: #103020; color: #e8f3ea; text-align: center; }
.technical-flow > span:first-child { border-color: #6fa47a; background: #19482f; }
.technical-flow > i { color: #83a78c; font-style: normal; font-size: 1.3rem; }
.technical-flow b { font-size: .74rem; }

.integration-control-section { background: #f7f9f5; }
.integration-control-line { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(42px, 6vw, 70px); border: 1px solid #ccd8ce; background: white; }
.integration-control-line article { position: relative; min-width: 0; border-right: 1px solid #d7e0d8; padding: clamp(25px, 3vw, 38px); }
.integration-control-line article:last-child { border-right: 0; }
.integration-control-line article > span { position: absolute; top: 20px; right: 20px; color: #91a097; font-family: var(--font-display); font-size: .67rem; }
.integration-control-line article > i { color: #478257; font-size: 1.7rem; }
.integration-control-line h3 { margin: 27px 0 13px; color: var(--in-deep); font-size: 1rem; }
.integration-control-line p { margin: 0; color: #607267; font-size: .78rem; line-height: 1.65; }

.integration-cta-section { background: var(--in-paper); }
.integration-cta { border: 1px solid #ccd8ce; padding: clamp(42px, 7vw, 86px); background: linear-gradient(125deg, #f4f8f1, white); text-align: center; }
.integration-cta .home-kicker { justify-content: center; }
.integration-cta h2 { max-width: 900px; margin: 0 auto; color: var(--in-deep); font-family: var(--font-display); font-size: var(--type-display-section); line-height: 1.02; }
.integration-cta > p:not(.home-kicker) { max-width: 750px; margin: 28px auto 0; color: var(--in-muted); font-size: 1rem; line-height: 1.7; }
.integration-cta > div { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; justify-content: center; margin-top: 34px; }
.integration-cta > small { display: block; margin-top: 25px; color: #687a6e; font-size: .72rem; }

@media (max-width: 1120px) {
  .integrations-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(360px, .8fr); gap: 44px; }
  .integration-scenario { grid-template-columns: minmax(220px, .75fr) minmax(300px, 1fr) minmax(240px, .8fr); }
  .integration-split,
  .integration-crm-section .integration-split,
  .integration-technical-section .integration-split { grid-template-columns: 1fr 1fr; gap: 48px; }
  .invoice-flow { grid-template-columns: 1fr auto 1fr; }
  .invoice-flow > i:nth-of-type(2),
  .invoice-flow > i:nth-of-type(3) { display: none; }
  .invoice-flow > div:nth-of-type(3),
  .invoice-flow > div:nth-of-type(4) { grid-column: span 1; }
}

@media (max-width: 760px) {
  .integrations-page .home-section,
  .integration-booking-section { padding: 76px 0; }
  .integration-technical-section { padding: 54px 0; }
  .integrations-hero { padding-top: 70px; }
  .integrations-hero .integrations-hero-grid { display: block; width: calc(100% - 36px); min-width: 0; }
  .integrations-hero h1 { max-width: 100%; font-size: var(--type-display-hero-mobile); line-height: .98; overflow-wrap: anywhere; text-wrap: wrap; }
  .integrations-hero .home-hero-lead { max-width: 100%; }
  .integrations-hero .home-hero-actions { display: grid; }
  .integrations-hero .home-button { width: 100%; }
  .integrations-text-link { min-height: 44px; }
  .integration-hero-flow { width: 100%; margin-top: 44px; box-sizing: border-box; }
  .integration-flow-route { grid-template-columns: auto auto 1fr; gap: 10px; padding: 20px; }
  .integration-flow-data { align-items: flex-start; flex-direction: column; margin: 0 20px; }
  .integration-flow-answer { margin: 18px 20px 20px; }

  .integration-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid #cad6cc; }
  .integration-tab { min-height: 67px; border-bottom: 1px solid #cad6cc; padding: 14px; }
  .integration-tab:nth-child(2) { border-right: 0; }
  .integration-tab:nth-child(n+3) { border-bottom: 0; }
  .integration-scenario { grid-template-columns: 1fr; min-height: 0; }
  .integration-scenario-question,
  .integration-scenario-work { border-right: 0; border-bottom: 1px solid #dce4dd; }
  .integration-scenario-question,
  .integration-scenario-work,
  .integration-scenario-outcome { padding: 28px 22px; }
  .integration-demo-top { align-items: flex-start; gap: 12px; }
  .integration-demo-top > span { max-width: 140px; text-align: right; }

  .integration-capability-flow { grid-template-columns: 1fr; gap: 0; }
  .capability-connector { min-height: 62px; flex-direction: column; }
  .capability-connector::before,
  .capability-connector::after { width: 1px; height: 12px; }
  .integration-capability-flow ul { grid-template-columns: 1fr; }
  .capability-mini-flow { grid-template-columns: 1fr; }
  .capability-mini-flow i { transform: rotate(90deg); }

  .integration-split,
  .integration-crm-section .integration-split,
  .integration-technical-section .integration-split,
  .integration-custom-grid { grid-template-columns: 1fr; gap: 42px; }
  .integration-copy h2 { font-size: var(--type-display-section-mobile); }
  .integration-crm-section .crm-lead-canvas { order: 2; }
  .integration-crm-section .integration-copy { order: 1; }
  .order-lookup-result dl { grid-template-columns: 1fr; }
  .order-lookup-result dl div { display: flex; align-items: center; justify-content: space-between; padding-top: 11px; }
  .booking-filters { grid-template-columns: repeat(2, 1fr); }
  .flight-example { grid-template-columns: 1fr auto; }
  .flight-example p { grid-column: 1 / -1; grid-row: 2; }
  .invoice-flow { grid-template-columns: 1fr; }
  .invoice-flow > i { display: block !important; transform: rotate(90deg); justify-self: center; }

  .integration-reuse-flow { grid-template-columns: 1fr; }
  .integration-reuse-flow > i { transform: rotate(90deg); justify-self: center; }
  .reuse-system,
  .reuse-core { min-height: 140px; }
  .custom-usecase-canvas > div { align-items: flex-start; flex-direction: column; }
  .custom-usecase-canvas > div i { transform: rotate(90deg); align-self: center; }
  .technical-flow { grid-template-columns: 1fr; }
  .technical-flow > i { transform: rotate(90deg); justify-self: center; }
  .integration-technical-section .integration-copy h2 { font-size: var(--type-display-section-mobile); }
  .technical-flow > span { min-height: 78px; }
  .integration-control-line { grid-template-columns: 1fr; }
  .integration-control-line article { border-right: 0; border-bottom: 1px solid #d7e0d8; }
  .integration-control-line article:last-child { border-bottom: 0; }
  .integration-cta { padding: 42px 22px; }
  .integration-cta h2 { font-size: var(--type-display-section-mobile); }
  .integration-cta > div { display: grid; }
  .integration-cta .home-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .integrations-page *,
  .integrations-page *::before,
  .integrations-page *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}