.integration-kicker { font-size: 12px; font-weight: 700; line-height: 1.6; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 18px; }
.integration-hero { display: grid; grid-template-columns: 1.18fr .82fr; gap: clamp(36px, 5vw, 80px); align-items: center; padding-block: 56px 76px; }
.integration-hero > *, .integration-directory-intro > * { min-width: 0; }
.integration-hero h1 { font-size: clamp(38px, 3.65vw, 54px); line-height: 1.12; letter-spacing: -.055em; }
.integration-hero .feature-lead { margin-top: 26px; max-width: 620px; }
.integration-eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 24px; color: var(--muted); font-size: 12px; font-weight: 600; }
.integration-eyebrow > a:hover { text-decoration: underline; }
.integration-status { display: inline-flex; align-items: center; border-radius: 6px; padding: 5px 9px; background: #e7edf3; color: #344b63; font-size: 10px; line-height: 1.5; font-weight: 700; }
.integration-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 20px 26px; margin-top: 28px; }
.integration-actions .feature-text-link { margin: 0; }
.integration-actions svg, .integration-card__link svg, .integration-sources svg, .integration-category-nav svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.integration-hero .integration-note { margin-top: 20px; font-size: 12px; max-width: 540px; }
.integration-overview { background: #f4f6f8; border-radius: 22px; padding: clamp(26px, 3vw, 42px); }
.integration-overview__brands { display: flex; align-items: center; gap: 20px; margin-bottom: 40px; }
.integration-overview__driveparts { width: 145px; height: auto; }
.integration-overview__connection { flex: 1; min-width: 16px; height: 1px; background: #c8d4e0; position: relative; }
.integration-overview__connection::after { content: ''; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
.integration-logo { width: 64px; height: 64px; object-fit: contain; flex-shrink: 0; }
.integration-monogram { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; flex-shrink: 0; background: #fff; color: #173b5b; border-radius: 14px; font-size: 21px; font-weight: 700; letter-spacing: -.03em; }
.integration-overview__label { font-size: 12px; margin-bottom: 12px; }
.integration-overview h2 { font-size: clamp(26px, 2.5vw, 36px); line-height: 1.2; letter-spacing: -.04em; }
.integration-overview h2 + p { font-size: 14px; margin-top: 15px; }
.integration-overview__steps { list-style: none; counter-reset: integration-step; padding: 22px 0 0; margin: 24px 0 0; border-top: 1px solid var(--line); display: grid; gap: 16px; }
.integration-overview__steps li { counter-increment: integration-step; display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 600; line-height: 1.6; }
.integration-overview__steps li::before { content: counter(integration-step); display: grid; place-items: center; width: 25px; height: 25px; flex-shrink: 0; border-radius: 50%; background: #fff; color: #526279; font-size: 11px; }
.feature-band__intro .integration-kicker { margin-top: 0; margin-bottom: 18px; font-size: 12px; }
.integration-process { padding-block: 72px; }
.integration-section-heading { max-width: 700px; }
.integration-process__steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 40px; list-style: none; padding: 0; margin: 44px 0; }
.integration-step-number { display: block; font-size: 13px; color: #ac360f; font-weight: 700; margin-bottom: 18px; }
.integration-process__steps h3 { font-size: 20px; }
.integration-process__steps p { font-size: 14px; margin-top: 14px; }
.integration-requirements { display: grid; grid-template-columns: .7fr 1.3fr; gap: 32px; padding: 30px 34px; background: #f4f6f8; border-radius: 12px; }
.integration-requirements h3 { font-size: 20px; }
.integration-requirements ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: 14px; line-height: 1.8; }
.integration-requirements li + li { margin-top: 8px; }
.integration-faq details { border-bottom: 1px solid var(--line); }
.integration-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 22px; font-size: 16px; font-weight: 600; line-height: 1.6; }
.integration-faq summary::marker { content: ''; }
.integration-faq summary > span { color: #ac360f; font-size: 24px; font-weight: 400; }
.integration-faq details[open] summary > span { transform: rotate(45deg); }
.integration-faq details > p { padding-bottom: 24px; font-size: 14px; }
.integration-sources { padding-top: 28px; }
.integration-sources p { font-size: 11px; margin-bottom: 10px; }
.integration-sources a { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.integration-directory-intro { display: grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items: end; padding-block: 64px; }
.integration-directory-intro h1 { max-width: 650px; font-size: clamp(40px,4.2vw,62px); }
.integration-category-nav { display: flex; flex-wrap: wrap; gap: 16px 32px; padding-bottom: 44px; }
.integration-category-nav a { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; }
.integration-category-nav a:hover { color: #ac360f; }
.integration-directory-section { padding-block: 60px; scroll-margin-top: 96px; }
.integration-directory-section:nth-of-type(even) { background: #f4f6f8; }
.integration-directory-heading { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: 32px; }
.integration-directory-heading h2 { font-size: clamp(30px,3vw,42px); }
.integration-directory-heading p { max-width: 430px; font-size: 14px; }
.integration-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
.integration-card { display: flex; flex-direction: column; padding: 28px; border: 1px solid #e1e7ed; border-radius: 14px; background: #fff; transition: border-color 180ms ease, box-shadow 180ms ease; }
.integration-card:hover { border-color: #a4b3c3; box-shadow: 0 10px 28px -18px rgba(7,26,53,.22); }
.integration-card__top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.integration-card .integration-monogram { background: #f4f6f8; }
.integration-card h3 { font-size: 22px; }
.integration-card > p { margin-top: 12px; font-size: 13px; }
.integration-card__link { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 26px; color: #173b5b; font-size: 12px; font-weight: 700; }
@media (max-width: 1100px) { .integration-hero { grid-template-columns: 1.1fr .9fr; gap: 30px; } .integration-overview { padding: 28px; } .integration-overview__driveparts { width: 120px; } .integration-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 760px) {
  .integration-hero, .integration-directory-intro { grid-template-columns: 1fr; gap: 32px; padding-block: 36px 44px; }
  .integration-hero h1 { font-size: clamp(34px,7.5vw,48px); }
  .integration-eyebrow { margin-bottom: 18px; }
  .integration-hero .feature-lead { margin-top: 22px; font-size: 15px; }
  .integration-overview { padding: 28px; }
  .integration-overview__brands { margin-bottom: 28px; }
  .integration-overview__driveparts { width: 145px; }
  .integration-process { padding-block: 48px; }
  .integration-process__steps { grid-template-columns: 1fr; gap: 26px; margin-block: 32px; }
  .integration-step-number { margin-bottom: 10px; }
  .integration-requirements { grid-template-columns: 1fr; gap: 18px; padding: 24px; }
  .integration-directory-heading { display: block; }
  .integration-directory-heading p { margin-top: 18px; }
  .integration-directory-section { padding-block: 40px; }
  .integration-category-nav { gap: 16px 24px; padding-bottom: 32px; }
}
@media (max-width: 480px) {
  .integration-grid { grid-template-columns: 1fr; }
  .integration-overview { padding: 24px; }
  .integration-overview__brands { gap: 12px; }
  .integration-overview__driveparts { width: 125px; }
  .integration-actions { gap: 20px; }
  .integration-actions .feature-button { width: 100%; }
  .integration-directory-intro h1 { font-size: 38px; }
  .integration-card { padding: 24px; }
  .integration-status { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { .integration-card { transition: none; } }
@media print { .integration-hero, .integration-process__steps, .integration-requirements, .integration-directory-intro, .integration-grid { display: block; } .integration-overview, .integration-actions, .integration-category-nav { display: none; } .integration-hero, .integration-process, .integration-directory-section { padding-block: 24px; } .integration-card, .integration-process__steps li { margin-bottom: 24px; } .integration-faq details > p { display: block; } }