/* IT Integration Guide body (/it-guide) inside the OneGIG shell. Rendered by
   js/it-guide.js; header, footer, title and back link come from the shell.
   Everything is scoped under .it-guide. */
.it-guide{--teal:#003D44; --ink:#02373D; --green:#48822A; --lime:#C1FA00; --line:#E4E9EA; --line2:#EEF1F2; --bg:#F5F7F7;
  color:var(--ink); font-size:16px; line-height:1.6; max-width:1160px; padding-block-end:40px; font-family:"Helvetica Neue", Arial, sans-serif;}
.it-guide *, .it-guide *::before, .it-guide *::after{box-sizing:border-box;}
.it-guide p, .it-guide h2, .it-guide h3, .it-guide table{margin:0;}
.it-guide a{color:var(--green);}
.it-guide .lede{color:rgba(2,55,61,.7); font-size:16.5px; max-width:760px;}
.it-guide .toc{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px; margin:26px 0 8px;}
.it-guide .toc a{display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:12px; padding:11px 14px; color:var(--teal); font-weight:600; font-size:14.5px; text-decoration:none;}
.it-guide .toc a:hover{background:#F7FBEB; border-color:rgba(72,130,42,.5);}
.it-guide .toc .n{width:26px; height:26px; border-radius:8px; background:rgba(193,250,0,.4); color:var(--teal); display:grid; place-items:center; font-size:13px; font-weight:800; flex:0 0 auto;}
.it-guide section{margin-top:44px; scroll-margin-top:90px;}
.it-guide .sec-head{display:flex; align-items:center; gap:14px; margin-bottom:6px;}
.it-guide .sec-head .n{width:38px; height:38px; border-radius:10px; background:var(--teal); color:var(--lime); display:grid; place-items:center; font-size:18px; font-weight:800; flex:0 0 auto;}
.it-guide h2{color:var(--teal); font-size:24px;}
.it-guide .goal{background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:12px 16px; font-size:14.5px; color:rgba(2,55,61,.75); margin:10px 0 18px;}
.it-guide .goal b{color:var(--green);}
.it-guide .steps{display:flex; flex-direction:column; gap:12px;}
.it-guide .step{border:1px solid var(--line); border-radius:12px; padding:16px 18px; display:flex; gap:14px;}
.it-guide .step > div{min-width:0;}
.it-guide .step .sn{width:28px; height:28px; border-radius:999px; background:rgba(193,250,0,.4); color:var(--teal); display:grid; place-items:center; font-weight:800; font-size:13.5px; flex:0 0 auto; margin-top:2px;}
.it-guide .step h3{color:var(--teal); font-size:16px; margin-bottom:3px;}
.it-guide .step p{font-size:14.5px; color:rgba(2,55,61,.78); overflow-wrap:anywhere;}
.it-guide .step code, .it-guide .copybox code, .it-guide td code{background:var(--bg); border:1px solid var(--line); border-radius:6px; padding:2px 7px; font-size:13px; color:var(--teal); direction:ltr; display:inline-block; max-width:100%; overflow-wrap:anywhere;}
.it-guide .figure{border:1px solid var(--line); border-radius:12px; overflow:hidden; margin:16px 0; background:#fff;}
.it-guide .figure svg{display:block; width:100%; height:auto;}
.it-guide .figure .cap{border-top:1px solid var(--line2); padding:9px 16px; font-size:12.5px; color:rgba(2,55,61,.55);}
.it-guide .callout{border:1px solid rgba(72,130,42,.4); background:#F7FBEB; border-radius:12px; padding:13px 16px; font-size:14px; margin:14px 0; color:var(--ink);}
.it-guide .callout b{color:var(--green);}
.it-guide .warn{border:1px solid rgba(210,38,48,.3); background:rgba(210,38,48,.05); border-radius:12px; padding:13px 16px; font-size:14px; margin:14px 0;}
.it-guide .warn b{color:#D22630;}
.it-guide table{width:100%; border-collapse:collapse; margin:14px 0; font-size:14px;}
.it-guide th{font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:rgba(2,55,61,.5); text-align:start; padding:8px 10px; border-bottom:1px solid var(--line);}
.it-guide td{padding:10px; border-bottom:1px solid var(--line2); vertical-align:top; overflow-wrap:anywhere;}
.it-guide td:first-child{font-weight:800; color:var(--green); white-space:nowrap;}
.itg-note{background:#F7FBEB; border:1px solid rgba(72,130,42,.4); border-radius:12px; padding:10px 16px; margin:0 0 16px; color:#02373D; font-size:14.5px;}
@media (max-width:700px){ .it-guide .step{flex-direction:column;} .it-guide table{display:block; overflow-x:auto;} }
@media print{ .it-guide .toc{display:none;} }