/* Integration library: extends the shared IDIFY site styles. */
.integrations-page { background: #fff; }
.integrations-page :focus-visible { outline: 3px solid #7ea6ff; outline-offset: 5px; }
.integrations-page section[id] { scroll-margin-top: 100px; }
.integrations-page .site-header { background: rgba(7, 26, 53, .97); }

.integrations-hero { position: relative; overflow: hidden; padding: 156px 0 82px; color: #fff; background: radial-gradient(circle at 85% 12%, rgba(59,116,255,.24), transparent 38%), radial-gradient(circle at 8% 100%, rgba(72,185,147,.1), transparent 32%), var(--navy); }
.integrations-hero::after { content: ''; position: absolute; right: -180px; bottom: -310px; width: 650px; height: 650px; border: 1px solid rgba(126,166,255,.09); border-radius: 50%; box-shadow: 0 0 0 75px rgba(126,166,255,.025), 0 0 0 150px rgba(126,166,255,.018); pointer-events: none; }
.integrations-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(470px, .95fr); gap: 90px; align-items: center; }
.integrations-eyebrow { display: flex; gap: 10px; align-items: center; margin: 0 0 24px; color: #bfd0ef; font-size: 11px; font-weight: 780; letter-spacing: .14em; }
.integrations-eyebrow > span { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(72,185,147,.12); }
.integrations-hero h1 { max-width: 680px; margin: 0; font-size: clamp(48px, 5.5vw, 76px); line-height: .98; letter-spacing: -.06em; }
.integrations-lead { max-width: 635px; margin: 28px 0 0; color: #bac9df; font-size: 19px; line-height: 1.75; }
.integrations-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 34px; }
.integrations-text-link { display: inline-flex; align-items: center; gap: 9px; color: #235dd9; font-size: 14px; font-weight: 750; }
.integrations-text-link:hover { text-decoration: underline; text-underline-offset: 5px; }
.integrations-text-light { color: #dbe6ff; }

.integration-map { position: relative; min-height: 405px; }
.integration-map::before, .integration-map::after { content: ''; position: absolute; inset: 50% auto auto 50%; width: 63%; height: 1px; transform-origin: left center; background: linear-gradient(90deg, rgba(126,166,255,.8), rgba(126,166,255,.05)); }
.integration-map::before { transform: rotate(-28deg); }
.integration-map::after { transform: rotate(28deg); }
.integration-map-line { position: absolute; top: 50%; left: 50%; width: 57%; height: 1px; transform-origin: left center; background: linear-gradient(90deg, rgba(126,166,255,.8), rgba(126,166,255,.05)); }
.map-line-agency { transform: rotate(208deg); }
.map-line-sales { transform: rotate(152deg); }
.integration-map-core { position: absolute; z-index: 2; top: 50%; left: 50%; display: grid; place-items: center; width: 190px; height: 190px; padding: 24px; transform: translate(-50%, -50%); border: 1px solid rgba(126,166,255,.25); border-radius: 50%; background: #0c2144; box-shadow: 0 25px 70px rgba(0,0,0,.28), 0 0 0 18px rgba(59,116,255,.04); text-align: center; }
.integration-map-core img { display: block; width: 92px; height: 92px; margin: -20px 0 -27px; object-fit: contain; }
.integration-map-core strong { font-size: 17px; letter-spacing: .16em; }
.integration-map-core span { color: #92a5c3; font-size: 10px; }
.integration-map-node { position: absolute; z-index: 3; display: flex; align-items: center; gap: 13px; min-width: 205px; padding: 15px 17px; border: 1px solid rgba(126,166,255,.19); border-radius: 14px; background: rgba(12,33,68,.96); box-shadow: 0 16px 40px rgba(0,0,0,.2); }
.integration-map-node > span { display: grid; flex: 0 0 auto; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #a9c2ff; background: rgba(59,116,255,.14); }
.integration-map-node small, .integration-map-node strong { display: block; }
.integration-map-node small { margin-bottom: 2px; color: #7188ad; font-size: 8px; font-weight: 800; letter-spacing: .15em; }
.integration-map-node strong { color: #eef4ff; font-size: 13px; }
.node-agency { top: 14px; left: 0; }
.node-collection { right: 0; bottom: 5px; }
.node-sales { bottom: 5px; left: 0; }
.node-payments { top: 28px; right: -8px; border-color: rgba(72,185,147,.32); }
.node-payments > span { color: #83dabd; background: rgba(72,185,147,.12); }
.node-payments small { color: #65c8a7; }
.node-sales > span { color: #efc96d; background: rgba(226,177,68,.13); }
.node-sales small { color: #c6a853; }

.integration-overview { padding: 96px 0 72px; background: var(--mist); }
.integration-heading { display: grid; grid-template-columns: 1.15fr .85fr; gap: 90px; align-items: end; }
.integration-heading h2 { max-width: 650px; margin: 8px 0 0; font-size: clamp(38px, 4.2vw, 58px); line-height: 1.04; letter-spacing: -.05em; }
.integration-heading > p { margin: 0; color: var(--muted); font-size: 17px; }
.category-links { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-top: 48px; }
.category-links a { display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; font-size: 14px; font-weight: 730; transition: transform .2s, border-color .2s, box-shadow .2s; }
.category-links a:hover { transform: translateY(-3px); border-color: #b7c9ef; box-shadow: 0 14px 34px rgba(16,32,61,.08); }
.category-links span { color: #8491a7; font-size: 10px; letter-spacing: .12em; }
.category-links strong { display: grid; place-items: center; width: 24px; height: 24px; margin-left: auto; border-radius: 50%; color: #fff; background: var(--blue); font-size: 11px; }

.integration-category { padding: 95px 0; border-bottom: 1px solid var(--line); }
.integration-category-muted { background: #fafbfd; }
.category-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 100px; align-items: center; }
.category-intro { position: relative; }
.category-number { position: absolute; top: -56px; right: 0; margin: 0; color: #edf1f7; font-size: 96px; font-weight: 850; line-height: 1; letter-spacing: -.08em; }
.category-intro h2 { position: relative; max-width: 480px; margin: 9px 0 20px; font-size: clamp(34px, 3.5vw, 50px); line-height: 1.07; letter-spacing: -.05em; }
.category-intro > p:last-child { max-width: 490px; margin: 0; color: var(--muted); font-size: 16px; }
.integration-card { min-height: 340px; display: flex; flex-direction: column; justify-content: space-between; padding: 34px; border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: 0 20px 60px rgba(16,32,61,.08); transition: transform .25s, box-shadow .25s; }
.integration-card:hover { transform: translateY(-5px); box-shadow: 0 28px 70px rgba(16,32,61,.13); }
.integration-card-top { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.availability { display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px; border-radius: 100px; color: #22775b; background: #e7f7f1; font-size: 11px; font-weight: 800; }
.availability i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.integration-card h3 { margin: 0 0 8px; font-size: 26px; letter-spacing: -.03em; }
.integration-card p { max-width: 580px; margin: 0; color: var(--muted); }
.integration-card-link { color: #245cd2; font-size: 14px; font-weight: 760; }
.integration-card-partner { position: relative; overflow: hidden; }
.integration-card-partner::after { content: ''; position: absolute; top: -130px; right: -100px; width: 320px; height: 320px; border-radius: 50%; background: rgba(103,139,211,.08); pointer-events: none; }
.integration-card-partner > * { position: relative; z-index: 1; }
.integration-partner-logo { display: block; width: 150px; height: auto; object-fit: contain; }
.integration-development-card { position: relative; min-height: 350px; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; overflow: hidden; padding: 34px; border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: 0 20px 60px rgba(16,32,61,.08); }
.integration-development-card::after { content: ''; position: absolute; top: -125px; right: -105px; width: 290px; height: 290px; border-radius: 50%; background: rgba(59,116,255,.055); pointer-events: none; }
.integration-development-card > * { position: relative; z-index: 1; }
.development-card-top { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.development-icon { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 15px; color: #315fd3; background: #eaf0ff; font-size: 22px; }
.development-status { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 100px; color: #68551f; background: #fff5d9; font-size: 10px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.development-status i { width: 7px; height: 7px; border-radius: 50%; background: #d19a21; }
.development-flow { display: flex; align-items: center; gap: 10px; }
.development-flow span { flex: 1 1 0; min-width: 0; padding: 11px 12px; border: 1px solid #dce4f1; border-radius: 12px; color: #40516c; background: #fafbfd; font-size: 11px; font-weight: 760; text-align: center; }
.development-flow b { flex: 0 0 auto; color: #91a0b7; font-size: 14px; }
.integration-development-card h3 { margin: 0 0 9px; font-size: 25px; letter-spacing: -.035em; }
.integration-development-card p { max-width: 650px; margin: 0; color: var(--muted); }
.integration-development-collection::after { background: rgba(226,177,68,.07); }
.integration-development-collection .development-icon { color: #946d14; background: #fff4d7; }
.integration-development-sales::after { background: rgba(72,185,147,.07); }
.integration-development-sales .development-icon { color: #22775b; background: #e6f6f0; }
.integration-empty { display: grid; grid-template-columns: auto 1fr; gap: 18px 22px; align-items: start; min-height: 270px; padding: 34px; border: 1px dashed #cbd4e2; border-radius: 22px; background: rgba(255,255,255,.72); }
.empty-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; color: #456fd1; background: #eaf0ff; font-size: 22px; }
.empty-icon-gold { color: #98721c; background: #fff5d9; }
.planned-label { display: inline-block; margin-bottom: 10px; color: #7d899c; font-size: 10px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.integration-empty h3 { margin: 0 0 9px; font-size: 21px; letter-spacing: -.025em; }
.integration-empty p { max-width: 560px; margin: 0; color: var(--muted); }
.integration-empty > a { grid-column: 2; align-self: end; }

.integration-request { padding: 95px 0; }
.integration-request-card { display: grid; grid-template-columns: 1fr auto; gap: 70px; align-items: center; padding: 62px 68px; color: #fff; border-radius: 28px; background: linear-gradient(135deg, #174ebb, #3f79ff); box-shadow: 0 30px 70px rgba(31,83,190,.22); }
.integration-request-card h2 { margin: 8px 0 0; font-size: clamp(34px, 3.8vw, 52px); line-height: 1.05; letter-spacing: -.05em; }
.integration-request-card p:not(.eyebrow) { max-width: 700px; margin: 18px 0 0; color: rgba(255,255,255,.74); }

@media (max-width: 1050px) {
  .integrations-hero-grid { grid-template-columns: 1fr; gap: 70px; }
  .integration-map { width: min(100%, 650px); margin-inline: auto; }
  .category-layout { gap: 55px; }
  .category-links { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
  .integrations-hero { padding: 125px 0 68px; }
  .integrations-hero h1 { font-size: clamp(43px, 12vw, 64px); }
  .integration-map { min-height: 450px; }
  .integration-map-core { width: 165px; height: 165px; }
  .integration-map-node { min-width: 190px; }
  .node-agency { left: 0; }
  .node-payments { right: 0; }
  .integration-heading, .category-layout { grid-template-columns: 1fr; gap: 45px; }
  .category-links { grid-template-columns: 1fr; }
  .integration-category { padding: 78px 0; }
  .category-number { top: -38px; font-size: 70px; }
  .integration-request-card { grid-template-columns: 1fr; gap: 32px; padding: 48px 38px; }
  .integration-request-card .button { justify-self: start; }
}

@media (max-width: 560px) {
  .integrations-hero { padding-top: 112px; }
  .integrations-lead { font-size: 17px; }
  .integrations-actions { align-items: flex-start; flex-direction: column; }
  .integration-map { min-height: 490px; }
  .integration-map::before, .integration-map::after, .integration-map-line { display: none; }
  .integration-map-core { top: 47%; width: 150px; height: 150px; }
  .integration-map-node { min-width: 0; width: 185px; padding: 12px; }
  .node-agency { top: 0; left: 0; }
  .node-payments { top: 78px; right: 0; }
  .node-collection { right: 8px; bottom: 0; }
  .node-sales { bottom: 78px; left: 0; }
  .integration-overview { padding: 72px 0 55px; }
  .integration-card, .integration-empty { padding: 25px; }
  .integration-development-card { min-height: 0; padding: 25px; }
  .development-flow { align-items: stretch; flex-direction: column; }
  .development-flow b { align-self: center; transform: rotate(90deg); }
  .integration-empty { grid-template-columns: 1fr; }
  .integration-empty > a { grid-column: 1; }
  .integration-request { padding: 70px 0; }
  .integration-request-card { padding: 38px 26px; border-radius: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .category-links a, .integration-card { transition: none; }
}