/* ==========================================================================
   Free tools pages (/tools/, /tools/ai-readiness/, /tools/automation-roi/), generated by tools/gen-tools-pages.js
   Prefix .sbtl- · the tool itself is the homepage diagnostics section (/css/diagnostics.css)
   ========================================================================== */
.sbtl-hero, .sbtl-next {
  --tl-navy: #0A1F38; --tl-ink: #0B63BE; --tl-orange: #FF8A00; --tl-text: #475569; --tl-muted: #64748B; --tl-line: #E2E8F0;
  position: relative; font-family: var(--sb-font-body); color: var(--sb-charcoal);
}
.sbtl-hero *, .sbtl-next *, .sbtl-hero *::before { box-sizing: border-box; }
.sbtl-hero :where(h1, h2, p, ul), .sbtl-next :where(h2, p) { margin: 0; }
.sbtl-hero :where(ul) { padding: 0; list-style: none; }
.sbtl-hero :where(a), .sbtl-next :where(a) { color: inherit; text-decoration: none; }
.sbtl-wrap { position: relative; z-index: 1; max-width: 1440px; margin-inline: auto; padding-inline: var(--sb-gutter); }
.sbtl-hero { overflow: hidden; padding: 52px 0 40px; background: #F7F9FC; }
.sbtl-hero__dots { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(rgba(10, 31, 56, .07) 1px, transparent 1.2px) 0 0 / 22px 22px; -webkit-mask-image: radial-gradient(50% 80% at 85% 30%, #000, transparent 75%); mask-image: radial-gradient(50% 80% at 85% 30%, #000, transparent 75%); }
.sbtl-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 32px 64px; align-items: center; }
.sbtl-crumbs { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; font: 600 .8125rem/1 var(--sb-font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--tl-muted); }
.sbtl-crumbs a:hover { color: var(--tl-orange); }
.sbtl-crumbs span { color: var(--tl-ink); }
.sbtl-crumbs i { font-size: .625rem; }
.sbtl-eyebrow { display: inline-flex; align-items: center; gap: 16px; font: 600 .8125rem/1 var(--sb-font-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--tl-navy); }
.sbtl-eyebrow span { width: 40px; height: 2px; background: var(--tl-orange); }
.sbtl-title { margin-top: 22px !important; font: 800 clamp(2.25rem, 4.4vw, 4.25rem)/1.02 var(--sb-font-heading); font-stretch: 100%; letter-spacing: -.04em; color: var(--tl-navy); text-wrap: balance; }
.sbtl-title strong { color: var(--tl-orange); }
.sbtl-lede { margin-top: 20px !important; max-width: 44rem; font-size: clamp(1.0625rem, 1.3vw, 1.25rem); line-height: 1.55; color: var(--tl-text); }
.sbtl-jump { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; padding: 13px 22px; border-radius: 8px; background: var(--tl-navy); color: #FFFFFF !important; font-weight: 700; transition: transform .2s; }
.sbtl-jump:hover { transform: translateY(-1px); }
.sbtl-points { display: grid; gap: 10px; }
.sbtl-points li, .sbtl-points a { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border: 1px solid var(--tl-line); border-radius: 14px; background: #FFFFFF; }
.sbtl-points--links li { padding: 0; border: 0; background: none; }
.sbtl-points--links a { width: 100%; align-items: center; transition: border-color .2s, transform .2s, box-shadow .2s; }
.sbtl-points--links a:hover { border-color: #BFD3EA; transform: translateY(-2px); box-shadow: 0 18px 36px -28px rgba(11, 99, 190, .6); }
.sbtl-points--links a > .fa-arrow-right { margin-left: auto; color: var(--tl-ink); }
.sbtl-points i:first-child { flex: 0 0 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: #EAF2FC; color: var(--tl-ink); }
.sbtl-points strong { display: block; font: 700 1rem/1.3 var(--sb-font-heading); color: var(--tl-navy); }
.sbtl-points small { display: block; margin-top: 3px; font-size: .875rem; line-height: 1.45; color: var(--tl-muted); }
.sbtl-jump:focus-visible, .sbtl-points a:focus-visible, .sbtl-btn:focus-visible { outline: 3px solid var(--tl-orange); outline-offset: 3px; }
.sbtl-next { padding: 56px 0 72px; background: #F7F9FC; }
.sbtl-next__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; padding: 32px 36px; border-radius: 18px; background: linear-gradient(160deg, #0A1F38, #0E2E52); color: #D6E2F0; }
.sbtl-next__title { font: 800 clamp(1.5rem, 2.2vw, 2rem)/1.15 var(--sb-font-heading); font-stretch: 100%; color: #FFFFFF; }
.sbtl-next__inner p { margin-top: 10px !important; max-width: 46rem; line-height: 1.55; }
.sbtl-next__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.sbtl-btn { display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 24px; border-radius: 8px; background: linear-gradient(180deg, #FF9A1F, #FF8400); color: #0A1F38 !important; font-weight: 700; }
.sbtl-btn--ghost { background: transparent; border: 1px solid rgba(255, 255, 255, .35); color: #FFFFFF !important; }
@media (max-width: 1000px) { .sbtl-hero__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 620px) { .sbtl-hero { padding: 36px 0 28px; } .sbtl-next__inner { padding: 26px 22px; } .sbtl-btn, .sbtl-jump { width: 100%; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .sbtl-jump, .sbtl-points--links a { transition: none; } }