.integration-hero { max-width:1000px; padding-block:30px; }
.integration-hero h1 { max-width:850px; }
.integration-lead { max-width:780px; }
.integration-hero .btn:not(.primary) { background:#fff; color:#0a2a3d; }
.integration-meta { font-size:14px; opacity:.9; }
.integration-architecture { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin:28px 0; padding:24px 0; border-block:1px solid var(--line); }
.integration-architecture strong,.integration-architecture span { display:block; }
.integration-architecture span { margin-top:8px; font-size:15px; line-height:1.5; }
@media(max-width:600px) { .integration-architecture { grid-template-columns:1fr; gap:18px; } }
.integration-status { border-left:4px solid var(--deep); background:#edf5fa; padding:22px 26px; margin:0 0 32px; border-radius:0 12px 12px 0; }
.integration-status p:last-child { margin-bottom:0; }
.integration-shot { margin:30px 0 44px; }
.integration-shot img { display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:12px; }
.integration-shot figcaption { font-size:14px; line-height:1.6; color:var(--ink-soft); margin-top:12px; }
.integration-shot figcaption a { display:inline-block; }
.skill-article .narrow { min-width:0; max-width:860px; }
.skill-article a { overflow-wrap:anywhere; }
@media(max-width:600px) { .integration-hero { padding-block:12px; } .integration-status { padding:18px; } }