/* Integrations: the directory (/integrations/) and each integration page. Scoped to .rs. */

/* Brand logos: a white tile with the mark, same size everywhere */
.rs .il-logo{flex:none;width:52px;height:52px;border-radius:14px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;overflow:hidden}
.rs .il-logo .sb-brand{display:block;width:62%;height:62%}
.rs .il-logo.il-img img{width:34px;height:34px;object-fit:contain;border-radius:7px}
.rs .il-logo.il-ic{--ic-accent:var(--royal)}
.rs .il-logo.il-ic .sbi{width:26px;height:26px}

/* Directory hero */
.rs .il-hf{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:center}
.rs .il-hero h1{max-width:13ch}
.rs .il-cloud{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.rs .il-cloud span{aspect-ratio:1;border-radius:22px;background:var(--bg-alt);display:grid;place-items:center;animation:rs-il-in .6s var(--ease) both;animation-delay:calc(var(--i)*50ms)}
.rs .il-cloud span:nth-child(3n+2){background:#fff;border:1px solid var(--line)}
.rs .il-cloud .il-logo{width:64px;height:64px;border-radius:18px}
.rs .il-cloud .il-logo.il-img img{width:40px;height:40px}
@keyframes rs-il-in{from{opacity:0;transform:translateY(12px) scale(.92)}}

/* How connecting works */
.rs .il-how{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;border:1px solid var(--line);border-radius:28px;padding:40px;background:#fff}
.rs .il-how-t{display:grid;gap:14px;align-content:start}
.rs .il-how-t p{color:var(--ink-2)}
.rs .il-how-t .btn{width:max-content}

/* Directory list */
.rs .il-grp+.il-grp{margin-top:44px}
.rs .il-cat{display:flex;align-items:center;gap:10px;font-size:20px;margin-bottom:16px}
.rs .il-cat i{width:10px;height:10px;border-radius:50%;background:var(--k)}
.rs .il-card{gap:12px}
.rs .il-card .il-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.rs .il-card h3,.rs .il-card h4{font-size:19px}
.rs .il-card .foot{--ic-ink:var(--muted)}
.rs .il-card .foot .meta{font-size:13px;min-width:0}
.rs .il-card .foot .sbi{flex:none;width:18px;height:18px;transition:transform .25s}
.rs .il-card:hover .foot .sbi{transform:translateX(3px)}
.rs .il-card.is-off{background:var(--bg-alt)}
.rs .il-card.is-off .il-logo{filter:grayscale(1);opacity:.7}

/* Don't see your tool? */
.rs .il-miss{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px;align-items:center}
.rs .il-miss p{color:var(--ink-2);margin-top:12px}
.rs .il-miss-l{display:grid;gap:10px}

/* Link rows (directory "Don't see your tool?", page help and alternatives) */
.rs .il-miss-l a,.rs .il-links a{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:#fff;text-decoration:none;color:var(--ink);font-weight:600;transition:border-color .2s;--ic-ink:var(--muted)}
.rs .il-miss-l a:hover,.rs .il-links a:hover{border-color:var(--ink);color:var(--ink)}
.rs .il-miss-l a>span:not(.ti),.rs .il-links a>span:not(.ti){flex:1;min-width:0;display:grid;gap:2px}
.rs .il-miss-l a>span:not(.ti){font-weight:500;color:var(--ink-2);font-size:14.5px}
.rs .il-miss-l a>span:not(.ti) b{color:var(--ink);font-weight:700;font-size:16px}
.rs .il-miss-l a>.ti,.rs .il-links a>.ti{flex:none}
.rs .il-miss-l a>.sbi,.rs .il-links a>.sbi{flex:none;width:18px;height:18px}
.rs .il-links{display:grid;gap:10px}

/* Integration page hero */
.rs .il-shero{padding-top:28px}
.rs .il-sh{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:48px;align-items:end;margin-top:28px}
.rs .il-sh-t h1{margin:18px 0 14px;max-width:18ch;font-size:clamp(2.3rem,4.6vw,3.8rem)}
.rs .il-badges{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rs .il-badges .il-logo{width:64px;height:64px;border-radius:18px;margin-right:6px}
.rs .il-badges .il-logo.il-img img{width:42px;height:42px}
.rs .il-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.rs .il-facts{margin:0;border:1px solid var(--line);border-radius:22px;background:#fff;padding:6px 20px}
.rs .il-facts div{padding:14px 0;display:grid;gap:3px}
.rs .il-facts div+div{border-top:1px solid var(--line)}
.rs .il-facts dt{font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.rs .il-facts dd{margin:0;font-weight:600;color:var(--ink);overflow-wrap:anywhere}

/* Integration page body */
.rs .il-lay{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:start}
.rs .il-main{display:grid;gap:22px;max-width:760px}
.rs .il-main>h2{font-size:clamp(1.6rem,2.8vw,2.1rem);margin-top:22px}
.rs .il-main>h2:first-child{margin-top:0}
.rs .il-main .steps>li{color:var(--ink-2)}
.rs .il-can{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.rs .il-can li{display:flex;gap:12px;align-items:flex-start;color:var(--ink-2);font-size:16.5px}
.rs .il-can .sbi{flex:none;width:22px;height:22px;margin-top:1px;padding:3px;border-radius:50%;background:color-mix(in srgb,var(--c-mon) 14%,#fff);--ic-ink:#177A43;--ic-accent:#177A43}
.rs .il-main .co p{color:var(--ink-2)}
.rs .il-side{position:sticky;top:96px;display:grid;gap:14px}
.rs .il-box{border:1px solid var(--line);border-radius:20px;padding:20px;background:#fff;display:grid;gap:8px}
.rs .il-box>b{font-family:var(--fd);font-size:18px;letter-spacing:-.02em;margin-bottom:2px}
.rs .il-box>a:not(.btn){display:flex;align-items:center;justify-content:space-between;gap:8px;font-weight:600;text-decoration:none;padding:6px 0;--ic-ink:var(--royal)}
.rs .il-box>a:not(.btn) .sbi{width:16px;height:16px;flex:none}
.rs .il-box p{font-size:14.5px;color:var(--ink-2)}
.rs .il-box .btn{width:max-content;margin-top:4px}

@media (max-width:1000px){
  .rs .il-sh{grid-template-columns:minmax(0,1fr);align-items:start}
  .rs .il-facts{max-width:560px}
  .rs .il-lay{grid-template-columns:minmax(0,1fr)}
  .rs .il-side{position:static}
}
@media (max-width:900px){
  .rs .il-hf,.rs .il-how,.rs .il-miss{grid-template-columns:minmax(0,1fr)}
  .rs .il-how{padding:28px}
  .rs .il-cloud{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
  .rs .il-cloud span{border-radius:16px}
  .rs .il-cloud .il-logo{width:44px;height:44px;border-radius:12px}
  .rs .il-cloud .il-logo.il-img img{width:28px;height:28px}
}
@media (max-width:560px){
  .rs .il-cloud{display:none}
  .rs .il-how{padding:22px}
  .rs .il-how-t .btn{width:100%}
  .rs .il-acts .btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){.rs .il-cloud span{animation:none}.rs .il-card .foot .sbi{transition:none}}