/* ===== CrelioHealth · Lab Integrations — prefixed "crl-" so Bootstrap classes never collide ===== */
.crl-page{
  --g:#1C9323; --gi:rgba(28,147,35,1); --g2:#3FD15F; --gsoft:#E8F7EC; --gline:#C2E2C4;
  --ink:#0E0E0E; --muted:#4E4E4E; --line:#EBEBEB; --panel:#F7F9F8;
  --dark:#0B1A12; --dark2:#10241A; --lined:rgba(255,255,255,.10);
  --serif:"Libertinus Serif Display",Georgia,serif;
  --sans:"Inter",system-ui,-apple-system,sans-serif;
}
/* neutralise Bootstrap element defaults inside the block */




.crl-page svg{display:block}
.crl-page a{color:var(--g);text-decoration:none}
.crl-page a:hover{color:var(--gi)}
.crl-page ol{margin:0;padding:0}
.crl-page b{font-weight:500}

.crl-sec{padding:100px 0}
.crl-sec--dark{background:#000;color:#fff}
.crl-wrap{max-width:1320px;margin:0 auto;padding:0 24px}
.crl-pill{display:inline-flex;padding:6px 14px;border:1px solid var(--gline);border-radius:100px;background:var(--gsoft);color:var(--g);font-size:13px;font-weight:500;margin-bottom:10px}
.crl-sec--dark .crl-pill{background:rgba(63,209,95,.12);border-color:rgba(63,209,95,.35);color:var(--g2)}
.crl-title{font-family:var(--serif);font-weight:400;font-size:clamp(34px,4.4vw,52px);line-height:1.1;letter-spacing:-.01em;text-wrap:balance}
.crl-title em{font-style:normal;color:var(--g)}
.crl-sec--dark .crl-title em{color:var(--g2)}
.crl-lead{font-size:18px;line-height:1.6;color:var(--muted);text-wrap:pretty}
.crl-sec--dark .crl-lead{color:rgba(255,255,255,.72)}
.crl-head{display:grid;gap:18px;justify-items:center;text-align:center;max-width:860px;margin:0 auto 64px}
.crl-chip{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--gsoft)}
.crl-chip svg{width:22px;height:22px;fill:none;stroke:var(--gi);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.crl-sec--dark .crl-chip{background:rgba(63,209,95,.12)} .crl-sec--dark .crl-chip svg{stroke:var(--g2)}
.crl-btn{display:inline-flex;align-items:center;gap:8px;padding:14px 24px;border-radius:100px;background:var(--g);color: #fff !important;;font-size:15px;font-weight:500;text-decoration:none}
.crl-btn:hover{background:var(--gi);color:#fff}
.crl-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.crl-btn--white{background:#fff;color: var(--ink) !important;} .crl-btn--white:hover{background:var(--gsoft);color:var(--ink)}
.crl-api-img{margin:0}
.crl-api-img img{display:block;width:100%;height:auto;border-radius:24px}
/* section 1 · integrations directory */
.crl-dir{display:grid;grid-template-columns:280px minmax(0,1fr);gap:40px;align-items:start}
.crl-rail{position:sticky;top:24px;padding:20px;border:1px solid var(--line);border-radius:20px;background:var(--panel)}
.crl-rail__k{display:block;margin:0 0 10px 10px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.crl-rail ol{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.crl-rail a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;color:var(--ink);font-size:14px;text-decoration:none}
.crl-rail a:hover,.crl-rail a.crl-on{background:var(--gsoft);color:var(--g)}
.crl-rail svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--gi);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.crl-stack{display:grid;gap:20px}
.crl-cat{padding:32px;border:1px solid var(--line);border-radius:20px;background:#fff;scroll-margin-top:24px}
.crl-cat__h{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.crl-cat__t{font-size:22px;font-weight:500;letter-spacing:-.01em}
.crl-cat__n{margin-left:auto;font-family:var(--serif);font-size:28px;color:var(--gline)}
.crl-cat__d{font-size:16px;line-height:1.6;color:var(--muted);max-width:720px;text-wrap:pretty}
.crl-proto{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.crl-proto span{padding:5px 12px;border-radius:100px;background:var(--gsoft);color:var(--g);font-size:12px;font-weight:500}

.crl-logos{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:24px}
.crl-logo{display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px 12px 14px;border:1px solid var(--line);border-radius:14px;background:#fff;text-align:center;transition:border-color .2s,box-shadow .2s,transform .2s}
a.crl-logo:hover{border-color:var(--gline);box-shadow:0 8px 24px rgba(14,14,14,.06);transform:translateY(-2px)}
.crl-logo__img{display:grid;place-items:center;width:100%;height:56px}
.crl-logo__img img{max-width:100%;max-height:56px;object-fit:contain}
.crl-logo__name{font-size:13px;line-height:1.35;color:var(--ink);text-wrap:balance}
a.crl-logo:hover .crl-logo__name{color:var(--g)}
.crl-cat__req{margin-top:20px;font-size:14px;color:var(--muted)}
.crl-dir__cta{display:flex;justify-content:center;margin-top:48px}

/* section 2 · API documentation */
.crl-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:64px;align-items:center}
.crl-copy{display:grid;gap:20px;justify-items:start}
.crl-rows{display:grid;gap:24px;margin-top:12px}
.crl-row{display:flex;gap:16px}
.crl-row h4{font-size:18px;font-weight:500;margin-bottom:6px}
.crl-row p{font-size:15px;line-height:1.6;color:rgba(255,255,255,.68)}
.crl-api{position:relative;display:grid;gap:16px;padding:28px;border:1px solid var(--lined);border-radius:24px;background:radial-gradient(120% 80% at 90% 0%,rgba(0,168,45,.22),transparent 60%),var(--dark2)}
.crl-win{border:1px solid var(--lined);border-radius:16px;background:var(--dark);overflow:hidden}
.crl-win__bar{display:flex;align-items:center;gap:6px;padding:12px 16px;border-bottom:1px solid var(--lined);font-size:12px;color:rgba(255,255,255,.62)}
.crl-dot{width:10px;height:10px;border-radius:50%;background:#FF5F57}.crl-dot:nth-child(2){background:#FEBC2E}.crl-dot:nth-child(3){background:#28C840}
.crl-win__title{margin-left:8px}
.crl-tabs{display:flex;gap:6px;margin-left:auto}
.crl-tabs span{padding:4px 10px;border-radius:100px}
.crl-tabs .crl-on{background:rgba(63,209,95,.16);color:var(--g2)}
.crl-req{display:flex;align-items:center;gap:10px;margin:16px 16px 0;padding:12px;border:1px solid var(--lined);border-radius:12px;font-size:14px}
.crl-verb{padding:3px 8px;border-radius:6px;background:var(--g2);color:var(--dark);font-size:11px;font-weight:600}
.crl-status{margin-left:auto;padding:3px 10px;border-radius:100px;background:rgba(63,209,95,.16);color:var(--g2);font-size:12px;font-weight:600}
.crl-code{margin:16px;padding:16px;border:0;border-radius:12px;background:rgba(255,255,255,.03);font:13px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;color:rgba(255,255,255,.72);overflow:auto;white-space:pre}
.crl-code .crl-c{color:rgba(255,255,255,.38)} .crl-code .crl-k{color:var(--g2)} .crl-code .crl-n{color:#FEBC2E}
.crl-hooks{border-radius:16px;background:#fff;color:var(--ink);padding:8px}
.crl-hooks .crl-win__bar{border-color:var(--line);color:var(--muted)}
.crl-hook{display:flex;align-items:center;gap:12px;padding:12px}
.crl-hook + .crl-hook{border-top:1px solid var(--line)}
.crl-io{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--gsoft)}
.crl-io svg{width:18px;height:18px;fill:none;stroke:var(--gi);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.crl-io--out{background:var(--dark)} .crl-io--out svg{stroke:var(--g2)}
.crl-hook b{display:block;font-size:14px;font-weight:500}
.crl-hook small{font-size:12px;color:var(--muted)}
.crl-tag{margin-left:auto;padding:4px 10px;border:1px solid var(--gline);border-radius:100px;background:var(--gsoft);color:var(--g);font-size:12px}
.crl-band{display:flex;align-items:center;gap:32px;margin-top:80px;padding:40px;border-radius:24px;background:radial-gradient(70.12% 329.7% at 1.95% 4.78%,#5DBC62 0%,#3BA341 100%)}
.crl-band__txt{display:grid;gap:10px}
.crl-band h3,.crl-band__h{font-family:var(--serif);font-weight:400;font-size:30px;line-height:1.2}
.crl-band p{font-size:15px;line-height:1.6;color:#fff}
.crl-band .crl-disc{font-size:13px;color:rgba(255,255,255,.85)}
.crl-band .crl-btn{margin-left:auto;flex:none}

/* scroll effects */
.crl-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.crl-reveal.crl-in{opacity:1;transform:none}
.crl-reveal-words .crl-w{display:inline-block;opacity:0;filter:blur(8px);transform:translateY(12px);
  transition:opacity .6s ease,filter .6s ease,transform .6s ease;transition-delay:calc(var(--i) * 45ms)}
.crl-reveal-words.crl-in .crl-w{opacity:1;filter:none;transform:none}
.crl-rail a.crl-on{background:var(--gsoft);color:var(--g);box-shadow:0 1px 0 var(--line)}
@media(prefers-reduced-motion:reduce){
  .crl-reveal,.crl-reveal-words .crl-w{opacity:1;filter:none;transform:none;transition:none}
}
@media(max-width:991px){
  .crl-sec{padding:80px 0}
  .crl-dir,.crl-split{grid-template-columns:1fr}
  .crl-rail{position:static}
  .crl-rail ol{grid-template-columns:repeat(2,minmax(0,1fr))}
  .crl-band{flex-direction:column;align-items:flex-start}
  .crl-band .crl-btn{margin-left:0}
}
@media(max-width:560px){
  .crl-cat{padding:24px}
  .crl-rail ol{grid-template-columns:1fr}
  .crl-tabs{display:none}
}