/* OpsTree Blog Designer: editorial content ONLY; does not touch the theme header/footer. */
.otbi-article {
  --otbi-blue:#3478f6; --otbi-purple:#7756e8; --otbi-ink:#182941;
  --g:linear-gradient(90deg, rgb(52, 120, 246), rgb(119, 86, 232));
  --otbi-copy:#40526d; --otbi-line:#dde7f4;
  color:var(--otbi-copy); box-sizing:border-box; width:100%; max-width:100% !important;
  min-width:0; font-family:inherit; font-size:inherit; line-height:1.76;
}
.otbi-article *, .otbi-article *::before, .otbi-article *::after { box-sizing:border-box; }
.otbi-article > * { max-width:100%; }
.otbi-article :is(h2.wp-block-heading,h3.wp-block-heading,h4.wp-block-heading) {
  font-family:inherit; color:var(--otbi-ink); line-height:1.26; font-weight:750;
  overflow-wrap:break-word; text-transform:none; letter-spacing:-.025em;
}
.otbi-article h2.wp-block-heading { margin:2.2em 0 .7em; font-size:clamp(1.42rem,2.25vw,1.92rem); }
.otbi-article h3.wp-block-heading { margin:1.65em 0 .58em; font-size:clamp(1.15rem,1.7vw,1.42rem); }
.otbi-article h4.wp-block-heading { margin:1.4em 0 .5em; font-size:1.08rem; }
.otbi-article p:not(.otbi-lead) { margin:0 0 1.05em; }
.otbi-article .otbi-lead {
  position:relative; isolation:isolate; overflow:hidden;
  margin:10px 0 34px !important; padding:24px 28px;
  background-image:linear-gradient(90deg,rgba(52,120,246,.085),rgba(119,86,232,.08));
  border:1px solid var(--otbi-line); border-left:3px solid var(--otbi-blue);
  border-radius:14px; line-height:1.7; font-size:clamp(1rem,1.55vw,1.16rem);
  color:#293d5d;
}
.otbi-article a { color:#2775dc; text-underline-offset:3px; }
.otbi-article .otbi-table-wrap {
  box-sizing:border-box; display:block; width:100% !important; max-width:100% !important;
  margin:22px 0 30px !important; overflow-x:auto; overflow-y:hidden;
  -webkit-overflow-scrolling:touch; border:1px solid var(--otbi-line);
  border-radius:13px; background:#fff; box-shadow:0 7px 24px rgba(20,47,91,.035);
}
.otbi-article .otbi-table-wrap table {
  display:table !important; width:100% !important; min-width:100%; max-width:none !important;
  margin:0 !important; padding:0 !important; border:0 !important;
  border-collapse:collapse !important; border-spacing:0 !important; table-layout:auto;
  background:#fff; font-size:.94em; line-height:1.55;
}
.otbi-article .otbi-table-wrap th,
.otbi-article .otbi-table-wrap td {
  border:0 !important; border-bottom:1px solid #e5edf6 !important;
  padding:13px 17px !important; white-space:normal !important;
  vertical-align:top; overflow-wrap:break-word; word-break:normal;
}
.otbi-article .otbi-table-wrap thead th {
  background:linear-gradient(90deg,#edf4ff,#f4f0ff); color:#243d60;
  font-weight:750; text-align:left; border-bottom:1px solid var(--otbi-line) !important;
}
.otbi-article .otbi-table-wrap tbody th[scope="row"] { font-weight:700; color:#253c59; text-align:left; }
.otbi-article .otbi-table-wrap tbody tr:last-child > * { border-bottom:0 !important; }
.otbi-article .otbi-table-wrap tbody tr:hover > * { background:rgba(52,120,246,.025); }
.otbi-article .otbi-table--cost tbody tr.otbi-row-total > * { font-weight:750; background:#f3f7fd; }
.otbi-article .otbi-table--cost tbody tr.otbi-row-saving > * { background:#f0f7f3; }
.otbi-article .otbi-table--decision th:first-child { min-width:150px; }
.otbi-article .otbi-table-caption { font-size:.83em; color:#71809a; margin:-19px 0 24px !important; }
.otbi-article .otbi-metrics {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(185px,1fr));
  gap:12px; width:100%; margin:23px 0 30px;
}
.otbi-article .otbi-metric {
  border:1px solid var(--otbi-line); border-radius:13px; padding:19px 19px 17px;
  background:linear-gradient(90deg,rgba(52,120,246,.055),#fff 54%,rgba(119,86,232,.055));
  display:flex; flex-direction:column; gap:9px; min-width:0;
}
.otbi-article .otbi-metric strong {
  color:#245bb5; font-size:1.38rem; font-weight:750; line-height:1.15;
  overflow-wrap:break-word; background:var(--g); background-clip:text;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.otbi-article .otbi-metric span { color:#52647d; font-size:.86em; line-height:1.42; }
.otbi-article .otbi-code-shell {
  width:100%; max-width:100%; min-width:0; overflow:hidden;
  margin:20px 0 29px; border:1px solid #243950; border-radius:13px;
  background:#122136; box-shadow:0 12px 28px rgba(10,24,42,.09);
}
.otbi-article .otbi-code-head {
  display:flex; align-items:center; justify-content:space-between; gap:15px;
  background:#1d3049; padding:8px 12px 8px 17px; border-bottom:1px solid #35506e;
  color:#a8c0de; font-size:11px; line-height:1.3; font-weight:700; letter-spacing:.09em;
}
.otbi-article .otbi-copy {
  margin:0 !important; border:1px solid #49617d !important; border-radius:7px !important;
  background:#2a405c !important; color:#e2edfb !important; padding:6px 11px !important;
  width:auto; min-height:28px; font:inherit; font-size:12px; line-height:1.1;
  text-transform:none; letter-spacing:0; cursor:pointer; transition:background .15s;
}
.otbi-article .otbi-copy:hover,.otbi-article .otbi-copy:focus-visible { background:#39587b !important; }
.otbi-article .otbi-code {
  background:transparent !important; box-shadow:none !important; color:#e5edfa !important;
  margin:0 !important; padding:18px 20px !important; max-width:100%; overflow-x:auto;
  border:0; border-radius:0; white-space:pre; overflow-wrap:normal;
  font:500 13px/1.65 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace !important;
  tab-size:2;
}
.otbi-article .otbi-code code { color:inherit !important; background:transparent !important; padding:0 !important; white-space:inherit; font:inherit !important; }
.otbi-article .otbi-steps {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;
  margin:21px 0 30px !important; padding:0 !important; list-style:none !important; counter-reset:none;
}
.otbi-article .otbi-steps li {
  display:flex; gap:13px; align-items:flex-start; margin:0 !important; padding:17px !important;
  border:1px solid var(--otbi-line); border-radius:11px;
  background:linear-gradient(90deg,rgba(52,120,246,.045),rgba(119,86,232,.04)); list-style:none !important;
}
.otbi-article .otbi-steps li::before { content:none !important; }
.otbi-article .otbi-step-n {
  display:flex; align-items:center; justify-content:center; flex:0 0 32px; height:32px;
  color:#2473db; background:#eaf3ff; border:1px solid #c5dcff;
  border-radius:50%; font-size:13px; font-weight:750;
}
.otbi-article .otbi-step-body { flex:1; min-width:0; }
.otbi-article .otbi-step-body strong { display:block; color:#203956; line-height:1.35; font-weight:750; margin:2px 0 5px; }
.otbi-article .otbi-step-body p { font-size:.91em; line-height:1.58; margin:0 !important; }
.otbi-article .otbi-list {
  margin:11px 0 23px !important; padding-left:25px !important;
  list-style:disc outside !important; color:var(--otbi-copy);
}
.otbi-article .otbi-list--ordered { list-style:decimal outside !important; }
.otbi-article .otbi-list li { padding:2px 0 4px !important; margin:0 0 5px !important; list-style:inherit !important; }
.otbi-article .otbi-list li::before { content:none !important; }
.otbi-article .otbi-callout {
  margin:20px 0 29px; border:1px solid #d6e6fb; border-left:3px solid var(--otbi-blue);
  border-radius:11px; padding:17px 21px; background:#f3f8ff;
}
.otbi-article .otbi-callout > strong { color:#195bb5; font-weight:750; font-size:.92em; }
.otbi-article .otbi-callout p { margin:6px 0 0 !important; }
.otbi-article .otbi-callout--warning { border-color:#f2deb5; border-left-color:#d78a1d; background:#fff9ed; }
.otbi-article .otbi-callout--success { border-color:#c9ebd9; border-left-color:#229b6b; background:#f3fbf7; }
.otbi-article .otbi-figure { width:100%; max-width:100%; margin:25px 0 31px; text-align:center; }
.otbi-article .otbi-figure img { display:block; max-width:100%; height:auto; width:auto; margin:0 auto; border:1px solid #e4ebf5; border-radius:12px; }
.otbi-article .otbi-figure figcaption { padding-top:9px; font-size:.84em; color:#71819b; text-align:center; }
.otbi-article .otbi-quote { margin:24px 0; border-left:3px solid var(--otbi-blue); background:#f7faff; padding:17px 22px; border-radius:0 10px 10px 0; }
.otbi-article .otbi-quote p { margin:0 !important; }
@media(max-width:767px) {
  .otbi-article .otbi-lead { padding:18px 19px; margin-bottom:23px !important; }
  .otbi-article .otbi-steps { grid-template-columns:1fr; }
  .otbi-article .otbi-table-wrap { border-radius:10px; }
  .otbi-article .otbi-table-wrap table { min-width:570px !important; }
  .otbi-article .otbi-table-wrap th,.otbi-article .otbi-table-wrap td { padding:11px 12px !important; }
  .otbi-article .otbi-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .otbi-article .otbi-code { padding:15px 14px !important; font-size:12px !important; }
}
@media(max-width:480px){.otbi-article .otbi-metrics {grid-template-columns:1fr;}}

/* Dynamic single-post table of contents. Wraps only .otbi-article (not theme chrome). */
.otbi-reading-layout {
  --otbi-scroll-offset:120px; /* Match your site's sticky header height if needed. */
  --otbi-toc-top:104px;
  --g:linear-gradient(90deg, rgb(52, 120, 246), rgb(119, 86, 232));
  container:otbi-reading / inline-size;
  width:100%; max-width:100%; min-width:0;
}
.otbi-reading-layout, .otbi-reading-layout * { box-sizing:border-box; }
.otbi-reading-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:22px; align-items:start; }
.otbi-reading-grid > .otbi-article { width:100% !important; max-width:100% !important; min-width:0; margin:0 !important; }
.otbi-reading-grid > .otbi-toc { grid-row:1; min-width:0; }
.otbi-article :is(h2,h3,h4)[id] { scroll-margin-top:var(--otbi-scroll-offset,120px); }
.otbi-toc {
  position:relative; isolation:isolate; background:#fff; color:#40526d;
  border:1px solid #e1e8f4; border-radius:14px;
  box-shadow:0 8px 28px rgba(25,53,100,.04); padding:16px 13px;
  font-family:inherit; line-height:1.4;
}
.otbi-toc::before {
  content:''; height:3px; position:absolute; top:0; left:18px; right:18px;
  background:var(--g); border-radius:0 0 4px 4px;
}
.otbi-toc-heading-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:5px 7px 12px; }
.otbi-toc-title { color:#182941; font-size:.94rem; font-weight:750; letter-spacing:-.015em; }
.otbi-toc-toggle {
  display:inline-flex; align-items:center; border:1px solid #dce7f9 !important;
  background:#f5f8ff !important; color:#34527d !important;
  padding:6px 10px !important; width:auto !important; min-height:0 !important;
  border-radius:8px !important; text-transform:none !important;
  font:inherit !important; font-size:.8rem !important; font-weight:650 !important;
  cursor:pointer;
}
.otbi-toc-toggle:hover,.otbi-toc-toggle:focus-visible { border-color:#3478f6 !important; }
.otbi-toc-links { display:none; max-height:min(65vh,660px); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; }
.otbi-toc.is-expanded .otbi-toc-links { display:block; }
.otbi-toc-list { list-style:none !important; counter-reset:none; padding:0 !important; margin:0 !important; }
.otbi-toc-item { list-style:none !important; margin:0 !important; padding:0 !important; }
.otbi-toc-item::before,.otbi-toc-item::marker { content:none !important; }
.otbi-toc-link {
  position:relative; display:block; padding:9px 9px 9px 14px;
  border-radius:7px; text-decoration:none !important;
  border-left:2px solid transparent; color:#5a6e87 !important;
  font-size:.835rem; font-weight:500; line-height:1.4; overflow-wrap:break-word;
  transition:color .18s ease,background .18s ease;
}
.otbi-toc-level-3 .otbi-toc-link { padding-left:26px; font-size:.805rem; }
.otbi-toc-level-4 .otbi-toc-link { padding-left:39px; font-size:.78rem; }
.otbi-toc-link:hover,.otbi-toc-link:focus-visible {
  color:#3478f6 !important; background:#f3f7ff;
}
.otbi-toc-link.is-active {
  color:#4b51c6 !important; border-left-color:#695fec;
  background:linear-gradient(90deg,rgba(52,120,246,.09),rgba(119,86,232,.07));
  font-weight:700;
}
.otbi-toc-link:focus-visible { outline:2px solid #7756e8; outline-offset:1px; }
@container otbi-reading (min-width:920px) {
  .otbi-reading-grid { grid-template-columns:minmax(0,1fr) minmax(215px,245px); gap:clamp(22px,3.2vw,42px); }
  .otbi-reading-grid > .otbi-toc {
    grid-column:2; grid-row:1; position:sticky;
    top:var(--otbi-toc-top,104px); align-self:start;
  }
  .otbi-reading-grid > .otbi-article { grid-column:1; grid-row:1; }
  .otbi-toc-toggle { display:none; }
  .otbi-toc-links { display:block !important; }
}
@media (prefers-reduced-motion:reduce) {
  .otbi-toc-link { transition:none; }
}
/* Keep a six-metric summary balanced beside the TOC on medium screens. */
@container otbi-reading (min-width:700px) and (max-width:1499px) {
  .otbi-article .otbi-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@container otbi-reading (min-width:1500px) {
  .otbi-article .otbi-metrics { grid-template-columns:repeat(6,minmax(0,1fr)); }
}