/* Integration pages as agent pages (tools/site/int_agent.py): the "in action" rows that hold the scenes.
   Builds on site.css + mock.css; tokens only, so dark mode follows. */
.ia{padding-top:clamp(40px,5vw,72px)}
.ia .int-head{margin-inline:auto;text-align:center}
.ia-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,56px);align-items:center;margin-top:clamp(36px,5vw,64px)}
.ia-row--rev{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.ia-row--rev .ia-copy{order:2}
.ia-copy h3{font:700 clamp(21px,2.4vw,28px)/1.2 var(--display);letter-spacing:-.02em;margin:0 0 12px}
.ia-copy p{margin:0 0 10px;color:var(--ink-2);font-size:16px;line-height:1.6}
.ia-copy ul{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:7px;color:var(--ink-2);font-size:15px;line-height:1.5}
.ia-copy li{padding-left:22px;position:relative}
.ia-copy li::before{content:"";position:absolute;left:2px;top:.55em;width:9px;height:5px;border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(-45deg)}
.ia-demo{min-width:0;border-radius:24px;background:var(--card-2);padding:clamp(14px,2vw,26px);display:flex;flex-direction:column;gap:10px}
.ia-demo .mk-sample{margin:2px 4px 0}
.ia-also{margin-top:clamp(36px,5vw,64px);padding:clamp(20px,3vw,32px);border-radius:24px;background:var(--card-2)}
.ia-also h2{font:700 20px/1.3 var(--display);letter-spacing:-.01em;margin:0 0 14px}
.ia-also ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.ia-also a{display:inline-flex;height:36px;align-items:center;padding:0 14px;border-radius:999px;background:var(--bg);box-shadow:0 0 0 1px var(--line);font-size:14px;font-weight:500;color:var(--ink)}
.ia-also a:hover{box-shadow:0 0 0 1px var(--line-2)}
.ia-note{margin:18px auto 0;max-width:46em;font-size:14px;color:var(--ink-3);text-align:center}
/* page-specific mini visuals drawn in the embed scenes */
.ia-dia{display:block;width:100%;height:auto;background:var(--win);border-radius:8px}
.ia-dia text{font:600 11px var(--sans);fill:var(--ink)}
.ia-dia .b{fill:var(--card-2);stroke:var(--line-2);stroke-width:1.2}
.ia-dia .a{fill:#dff14a;stroke:#0f0f12;stroke-width:1.2}
.ia-dia .l{fill:none;stroke:var(--ink-3);stroke-width:1.4}
.ia-vid{position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:linear-gradient(135deg,#1f2a44,#0f0f12);display:grid;place-items:center}
.ia-vid i{width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center}
.ia-vid i::after{content:"";margin-left:4px;border-left:15px solid #0f0f12;border-top:10px solid transparent;border-bottom:10px solid transparent}
.ia-vid b{position:absolute;left:10px;bottom:30px;color:#fff;font:600 12px var(--sans)}
.ia-vid u{position:absolute;left:10px;right:10px;bottom:12px;height:4px;border-radius:2px;background:rgba(255,255,255,.28);text-decoration:none}
.ia-vid u::after{content:"";position:absolute;left:0;top:0;bottom:0;width:38%;border-radius:2px;background:#dff14a}
.ia-stickies{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:10px;background:var(--win);border-radius:8px}
.ia-stickies span{aspect-ratio:1;border-radius:3px;padding:6px;font:600 10.5px/1.25 var(--sans);color:#0f0f12;box-shadow:0 1px 2px rgba(0,0,0,.18)}
.ia-frames{display:grid;grid-template-columns:1.2fr 1fr;gap:8px;padding:10px;background:var(--win);border-radius:8px}
.ia-frames div{border-radius:6px;background:var(--card-2);box-shadow:0 0 0 1px var(--line);padding:8px;display:grid;gap:6px;align-content:start}
.ia-frames i{display:block;height:8px;border-radius:3px;background:var(--line-2)}
.ia-frames i.p{background:#dff14a}
.ia-case{display:grid;grid-template-columns:minmax(0,1fr) 168px;min-height:210px}
.ia-case>div{padding:12px 14px;display:grid;gap:7px;align-content:start;font-size:12.5px}
.ia-case>div+div{border-left:1px solid var(--line);background:var(--card-2)}
.ia-case h6{margin:0;font:600 10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.ia-case b{font-weight:700}
@media(max-width:860px){
  .ia-row,.ia-row--rev{grid-template-columns:minmax(0,1fr)}
  .ia-row--rev .ia-copy{order:0}
  .ia-case{grid-template-columns:minmax(0,1fr)}
  .ia-case>div+div{border-left:0;border-top:1px solid var(--line)}
}
.ia .int-head .h2{font-size:clamp(28px,3.8vw,44px);line-height:1.08}