@font-face { font-family: 'Coattail Inter'; src: url('/assets/fonts/inter/InterVariable.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
* { box-sizing: border-box; }
body { margin: 0; background: #fff; color: #22262d; font-family: 'Coattail Inter', Arial, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }
p { line-height: 1.65; }
.wrap { width: min(1100px, calc(100% - 80px)); margin-inline: auto; }
.skip-link { position: absolute; top: -80px; padding: 12px; background: #fff; z-index: 110; }
.skip-link:focus { top: 8px; }
.integration-main { padding-bottom: 72px; }
.integration-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 70px; align-items: center; padding-block: 76px 68px; }
.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .14em; color: #77808e; text-transform: uppercase; margin: 0 0 22px; }
.integration-hero h1 { font-size: clamp(40px, 4.7vw, 59px); line-height: 1.08; font-weight: 500; letter-spacing: calc(-.055em + 2px); margin: 0 0 24px; }
.integration-hero h1 span { color: #2285ff; }
.lead { color: #68717e; font-size: 17px; margin: 0; max-width: 530px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 30px; }
.primary-button, .secondary-button { display: inline-flex; justify-content: center; align-items: center; border: 1px solid transparent; border-radius: 999px; background: #2285ff; color: #fff; padding: 13px 23px; font-size: 13px; font-weight: 600; min-height: 44px; }
.secondary-button { background: #fff; color: #22262d; border-color: #e6e8eb; }
.text-link { color: #2285ff; font-size: 13px; font-weight: 500; }
.example-panel { background: #f5f8fc; border: 1px solid #e5ebf4; border-radius: 24px; padding: 32px; }
.example-panel .eyebrow { margin-bottom: 20px; }
.example-prompt { margin: 0; font-size: 25px; line-height: 1.4; letter-spacing: -.035em; font-weight: 450; }
.example-caption { margin: 26px 0 0; font-size: 12px; color: #77808e; }
.connection-line { height: 1px; background: #dce5f2; margin: 26px 0; }
.connection-caption { font-size: 12px; display: flex; align-items: center; gap: 12px; color: #68717e; }
.connection-caption img { width: 85px; height: auto; }
.section-heading { margin: 0 0 25px; font-size: 30px; font-weight: 500; letter-spacing: -.04em; }
.benefits { padding: 0; margin: 30px 0 0; list-style: none; display: grid; gap: 13px; }
.benefits li { position: relative; padding-left: 25px; font-size: 14px; color: #68717e; }
.benefits li::before { content: '✓'; color: #2285ff; position: absolute; left: 0; font-weight: 600; }
.integration-section { padding-block: 42px; border-top: 1px solid #e6e8eb; }
.section-intro { color: #68717e; font-size: 14px; margin: -10px 0 28px; max-width: 640px; }
.assistant-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.assistant-link { border: 1px solid #e6e8eb; border-radius: 16px; padding: 24px; display: block; transition: border-color .15s, background .15s; }
.assistant-link:hover { background: #f8faff; border-color: #adccf5; }
.assistant-symbol { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 12px; background: #f1f5fa; font-weight: 500; font-size: 16px; margin-bottom: 28px; }
.assistant-link strong { display: block; font-size: 15px; font-weight: 600; }
.assistant-link small { display: block; font-size: 12px; color: #77808e; margin-top: 7px; }
.assistant-link .arrow { float: right; color: #2285ff; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; counter-reset: step; }
.steps li { counter-increment: step; }
.steps li::before { content: '0' counter(step); display: block; color: #2285ff; font-size: 12px; font-weight: 600; margin-bottom: 20px; }
.steps h3 { font-size: 17px; font-weight: 500; margin: 0 0 10px; letter-spacing: -.02em; }
.steps p { font-size: 14px; color: #68717e; margin: 0; }
.steps a { color: #2285ff; }
.address-control { display: flex; align-items: stretch; gap: 10px; margin-top: 32px; }
.address-block { flex: 1 1 auto; min-width: 0; border: 1px solid #dce5f2; border-radius: 14px; padding: 18px 20px; background: #f9fbfe; }
.address-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 10px; }
.address-label { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #77808e; margin-bottom: 10px; }
.address-heading .address-label { margin-bottom: 0; }
.address-block code { display: block; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; user-select: all; }
.copy-button { flex-shrink: 0; border: 1px solid #dce5f2; background: #fff; color: #22262d; border-radius: 8px; padding: 8px 14px; font-size: 12px; min-height: 38px; }
.address-control > .copy-button { align-self: stretch; border-radius: 14px; }
.copy-button:hover { border-color: #2285ff; }
.address-copy-button { display: inline-flex; align-items: center; gap: 6px; min-height: auto; padding: 0; border: 0; background: transparent; color: #68717e; font-size: 12px; }
.address-copy-button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.address-copy-button:hover { border-color: transparent; color: #2285ff; }
.copy-status { color: #68717e; font-size: 12px; min-height: 18px; margin: 8px 0 0; }
.small-note { color: #77808e; font-size: 12px; margin: 22px 0 0; line-height: 1.65; }
.small-note a { color: #2285ff; }
.split-section { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.split-section .section-heading { max-width: 370px; }
.code-panel { position: relative; background: #f5f8fc; border: 1px solid #e5ebf4; border-radius: 16px; padding: 24px; min-width: 0; }
.code-panel pre { overflow-x: auto; white-space: pre; margin: 22px 0 0; font-size: 12px; line-height: 1.8; padding-bottom: 10px; }
.code-panel .copy-button { float: right; }
.code-panel .eyebrow { display: inline-block; padding-top: 10px; }
.advanced { border-top: 1px solid #e6e8eb; margin-top: 28px; padding-top: 18px; }
.advanced summary { font-size: 13px; color: #68717e; cursor: pointer; }
.advanced p { color: #68717e; font-size: 13px; }
.endpoint-list { list-style: none; padding: 0; margin: 0; }
.endpoint-list li { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 17px 0; border-bottom: 1px solid #e6e8eb; font-size: 13px; }
.endpoint-list code { color: #2285ff; font-size: 12px; }
.endpoint-list span { color: #68717e; }
.end-cta { padding: 26px 0 8px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.end-cta h2 { font-size: 24px; font-weight: 500; letter-spacing: -.03em; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid #2285ff; outline-offset: 4px; }
[hidden] { display: none !important; }
@media(max-width:900px) { .integration-hero { gap: 32px; padding-block: 52px; } .assistant-grid { grid-template-columns: repeat(2,1fr); } .integration-hero h1 { font-size: 44px; } }
@media(max-width:650px) { .wrap { width: calc(100% - 36px); } .integration-hero, .split-section { grid-template-columns: 1fr; gap: 30px; } .integration-hero { padding-block: 40px; } .integration-hero h1 { font-size: 42px; } .lead { font-size: 16px; } .steps { grid-template-columns: 1fr; gap: 28px; } .steps li::before { margin-bottom: 10px; } .assistant-link { padding: 20px; } .example-panel { padding: 26px; } .example-prompt { font-size: 23px; } .address-control { align-items: stretch; flex-direction: column; } .address-block { padding: 16px; } .address-block code { font-size: 12px; } .address-control > .copy-button { align-self: flex-start; min-width: 84px; } .end-cta { align-items: flex-start; flex-direction: column; } .endpoint-list li { grid-template-columns: 1fr; gap: 7px; } }
@media(prefers-reduced-motion:reduce) { .assistant-link { transition: none; } }