/* tool-bl.css — /backlinks-analyzer visual refresh (marketing/tool-bl.blade.php)
   and its tour (partials/backlinks-demo, played by rt-story.js script mode).
   Self-contained on purpose: this page's speed is an acceptance criterion, so it
   does not pull in home.css / tool-v2.css. The hero and check bar keep their
   own styles.css rules (bl- prefix); everything here is bla- / bld-.
   Every block is fully visible at rest; animations only replay it. */

.bla {
  --ink: #0b1526; --ink2: #232f42; --muted: #5a6577; --faint: #8a93a5; --line: #e6e9f0; --soft: #f7f8fb;
  --orange: #ff6a00; --orange-ink: #b34700; --green: #19b66a; --green-ink: #138a52; --green-bg: #eafaf1;
  --red: #d64545; --amber: #e8890c; --blue: #2f5fe0; --purple: #7b5cff;
  --f: "Zoho_Puvi_Regular", Arial, sans-serif; --fm: "Zoho_Puvi_Medium", Arial, sans-serif;
  --fs: "Zoho_Puvi_SemiBold", Arial, sans-serif; --fb: "Zoho_Puvi_Bold", Arial, sans-serif;
  --gap: 72px;
}
.bla-wrap { max-width: 1160px; margin: 0 auto; padding: 0 max(18px, env(safe-area-inset-left, 0px)); }
.bla-sec { padding-block: var(--gap); }
.bla-eb { display: inline-block; font: 700 12px/1 var(--fb); letter-spacing: 2.2px; text-transform: uppercase; color: var(--orange); }
.bla-head { display: grid; gap: 12px; max-width: 760px; margin-bottom: 32px; }
.bla-head--c { margin-inline: auto; text-align: center; justify-items: center; }
.bla h2 { margin: 0; font: 800 clamp(28px, 3.4vw, 42px)/1.12 var(--fb); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.bla-head p, .bla .bla-lead { margin: 0; font-size: 17.5px; line-height: 1.6; color: var(--muted); }
.bla-split .bla-lead { margin-top: 14px; }
.bla-split h2 { margin-top: 14px; }
.bla-lead a { color: var(--orange-ink); font-weight: 600; }
.bla-split { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; }
.bla-split--flip > :first-child { order: 2; }
.bla-bullets { list-style: none; margin: 22px 0 26px; padding: 0; display: grid; gap: 10px; }
.bla-bullets li { position: relative; padding-left: 28px; font-size: 15.5px; line-height: 1.5; color: var(--ink2); }
.bla-bullets li::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center; background: var(--green-bg); color: var(--green-ink); font: 800 11px/1 var(--fb); }
.bla-bullets--row { grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 28px 0 0; }
.bla-btn { display: inline-block; padding: 14px 22px; border-radius: 12px; background: var(--orange); color: #fff; text-decoration: none; font: 700 15px/1 var(--fb); box-shadow: 0 12px 24px -12px rgba(255,106,0,.7); }
.bla-btn--light { background: #fff; color: var(--ink); box-shadow: none; }
.bla-cap { font: 700 10px/1 var(--fb); letter-spacing: 1.2px; text-transform: uppercase; color: var(--faint); }

/* ================= FREE CHECK ================= */
.bla-free { background: #fff; }
.bla-free__row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: x; }
.bla-free__card { position: relative; display: grid; gap: 8px; align-content: start; padding: 20px 20px 22px; border-radius: 20px; background: var(--soft); border: 1px solid var(--line); }
.bla-free__card:nth-child(3) { background: linear-gradient(160deg, #fff5ea, #fff); border-color: #ffd9b3; }
.bla-free__n { position: absolute; top: -13px; left: 20px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font: 800 12px/1 var(--fb); }
.bla-free__card h3 { margin: 6px 0 0; font: 700 20px/1.2 var(--fb); color: var(--ink); }
.bla-free__card p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); }
.bla .bla-free__sub { font: 700 12px/1.4 var(--fb); letter-spacing: .4px; color: var(--orange-ink); }
.bla-free__free, .bla-free__lock { justify-self: start; margin-top: 4px; font: 700 11.5px/1 var(--fb); padding: 6px 10px; border-radius: 999px; }
.bla-free__free { background: var(--green-bg); color: var(--green-ink); }
.bla-free__lock { background: #eef1f6; color: var(--muted); }
.bla-free .fc-viz { margin-bottom: 4px; }

/* ================= FEATURE 1: triage board ================= */
.bla-act { background: var(--soft); }
.bla-triage { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 18px; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: 0 24px 50px -30px rgba(11,21,38,.3); }
.bla-triage > .bla-cap { position: absolute; right: 18px; bottom: -22px; }
.bla-lane { --c: var(--green); --bg: #f2fbf6; display: grid; gap: 8px; align-content: start; padding: 12px; border-radius: 16px; background: var(--bg); min-height: 170px; }
.bla-lane--disavow { --c: var(--red); --bg: #fdf3f3; } .bla-lane--watch { --c: var(--amber); --bg: #fff8ec; }
.bla-lane__h { display: grid; gap: 2px; padding: 2px 4px 6px; border-bottom: 2px solid var(--c); }
.bla-lane__h b { font: 800 16px/1.2 var(--fb); color: var(--c); }
.bla-lane__h span { font-size: 12.5px; color: var(--muted); }
.bla-linkcard { display: grid; grid-template-columns: 10px 1fr; column-gap: 9px; align-items: center; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line); box-shadow: 0 6px 14px -10px rgba(11,21,38,.3); }
.bla-linkcard i { grid-row: 1 / 3; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.bla-linkcard b { font: 700 14px/1.25 var(--fb); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bla-linkcard small { font-size: 12.5px; color: var(--muted); }
.bla-triage.is-in .bla-linkcard { animation: blaDrop .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(.15s + var(--i) * .15s); }
@keyframes blaDrop { from { opacity: 0; transform: translateY(-16px) rotate(-2deg); } to { opacity: 1; transform: none; } }

/* ================= FEATURE 2: timeline ================= */
.bla-hist { background: #fff; }
.bla-time { margin: 0; padding: 18px 18px 14px; border-radius: 22px; background: var(--soft); border: 1px solid var(--line); display: grid; gap: 10px; }
.bla-time__axis { display: grid; grid-template-columns: repeat(12, 1fr); margin-left: 40%; font: 700 10px/1 var(--fb); color: var(--faint); text-align: center; }
.bla-time__row { display: grid; grid-template-columns: 40% 1fr; gap: 0; align-items: center; min-height: 34px; }
.bla-time__d { font: 600 12.5px/1.2 var(--fs); color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 10px; }
.bla-time__track { position: relative; height: 26px; border-radius: 8px; background: repeating-linear-gradient(90deg, #eceff4 0 1px, transparent 1px calc(100% / 12)); }
.bla-time__track i { position: absolute; top: 6px; height: 14px; border-radius: 7px; background: #9fb4ef; }
.bla-time__row.is-new i { background: var(--green); }
.bla-time__row.is-lost i { background: #f0a3a3; }
.bla-time__track em { position: absolute; top: -2px; transform: translateX(-50%); font-style: normal; font: 800 9.5px/1 var(--fb); padding: 4px 6px; border-radius: 999px; color: #fff; white-space: nowrap; }
.bla-time__row.is-new em { background: var(--green); }
.bla-time__row.is-lost em { background: var(--red); }
.bla-time figcaption { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; padding-top: 6px; font: 600 12px/1 var(--fs); color: var(--muted); }
.bla-time figcaption span { display: inline-flex; align-items: center; gap: 6px; }
.bla-time figcaption i { width: 14px; height: 8px; border-radius: 4px; }
.bla-time figcaption .live { background: #9fb4ef; } .bla-time figcaption .new { background: var(--green); } .bla-time figcaption .lost { background: #f0a3a3; }
.bla-time figcaption .bla-cap { margin-left: auto; }
.bla-time.is-in .bla-time__track i { animation: blaBar .8s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(.1s + var(--i) * .1s); transform-origin: left; }
@keyframes blaBar { from { transform: scaleX(0); } to { transform: none; } }

/* ================= FEATURE 3: gap matrix (dark band) ================= */
.bla-gap { background: radial-gradient(70% 90% at 15% 40%, #22306b 0%, transparent 60%), #0b1526; color: #fff; }
.bla-gap h2 { color: #fff; }
.bla-gap .bla-lead { color: #b5c0d8; }
.bla-gap .bla-bullets li { color: #dfe5f2; }
.bla-gap .bla-bullets li::before { background: rgba(94,227,161,.18); color: #5ee3a1; }
.bla-matrix { margin: 0; padding: 16px; border-radius: 22px; background: #fff; color: var(--ink); box-shadow: 0 30px 60px -24px rgba(0,0,0,.55); display: grid; gap: 2px; }
.bla-matrix__h, .bla-matrix__r { display: grid; grid-template-columns: 1.6fr repeat(3, .55fr) .6fr; gap: 6px; align-items: center; }
.bla-matrix__h { padding: 4px 6px 10px; border-bottom: 1px solid var(--line); font: 700 10.5px/1.2 var(--fb); letter-spacing: .6px; text-transform: uppercase; color: var(--faint); text-align: center; }
.bla-matrix__h span:first-child { text-align: left; }
.bla-matrix__h .you { color: var(--orange-ink); }
.bla-matrix__r { padding: 10px 6px; border-bottom: 1px solid #f2f4f8; text-align: center; }
.bla-matrix__d { text-align: left; font: 700 13.5px/1.25 var(--fb); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bla-matrix i { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #dde2ea; vertical-align: middle; }
.bla-matrix i.on { background: var(--blue); border-color: var(--blue); }
.bla-matrix i.gap { border: 2px dashed var(--orange); background: #fff4ea; }
.bla-matrix__r .you { background: #fff8f1; border-radius: 8px; padding: 4px 0; }
.bla-matrix figcaption { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; padding: 10px 6px 0; font: 600 12px/1 var(--fs); color: var(--muted); }
.bla-matrix figcaption span { display: inline-flex; align-items: center; gap: 6px; }
.bla-matrix figcaption i { width: 12px; height: 12px; }
.bla-matrix figcaption .bla-cap { margin-left: auto; }
.bla-matrix.is-in i.on { animation: blaPop .35s cubic-bezier(.3,1.6,.5,1) both; animation-delay: calc(.2s + var(--j) * .08s); }
.bla-matrix.is-in .bla-matrix__r i.gap { animation: blaPulse 1.6s ease-in-out .9s 2 both; }
@keyframes blaPop { from { transform: scale(0); } to { transform: none; } }
@keyframes blaPulse { 50% { box-shadow: 0 0 0 6px rgba(255,106,0,.18); } }

/* ================= FEATURE 4: anchor gauge ================= */
.bla-anc { background: linear-gradient(180deg, #fff 0%, #fff7f2 100%); }
.bla-anchor { margin: 0; padding: 20px; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: 0 24px 50px -30px rgba(11,21,38,.3); display: grid; gap: 14px; }
.bla-anchor__top { display: grid; gap: 6px; }
.bla-anchor__top small { font: 700 11px/1 var(--fb); letter-spacing: 1px; text-transform: uppercase; color: var(--faint); }
.bla-anchor__verdict { font: 800 18px/1.3 var(--fb); color: #b0312b; }
.bla-anchor__bar { display: flex; height: 34px; border-radius: 10px; overflow: hidden; gap: 3px; }
.bla-anchor__bar i { width: var(--w); background: var(--c); }
.bla-anchor__bar i.is-hot { background: repeating-linear-gradient(-45deg, var(--c) 0 10px, #e06262 10px 20px); }
.bla-anchor.is-in .bla-anchor__bar i { animation: blaBar .8s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * .12s); transform-origin: left; }
.bla-anchor__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bla-anchor__list li { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--soft); font: 600 14px/1 var(--fs); color: var(--ink2); }
.bla-anchor__list li i { width: 10px; height: 10px; border-radius: 3px; }
.bla-anchor__list li b { margin-left: auto; font: 800 16px/1 var(--fb); color: var(--ink); }
.bla-anchor__list li.is-hot { background: #fdecec; color: #a8322c; }
.bla-anchor__list li.is-hot b { color: #b0312b; }
.bla .bla-anchor__note { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }

/* ================= TOUR wrapper + views ================= */
/* rt-story.css loads non-blocking; until it arrives the tour must not widen the page. */
.bla-tour .rts-stage { position: relative; overflow: hidden; }
.bla-tour .rts-cursor { position: absolute; left: 0; top: 0; width: 26px; height: 26px; opacity: 0; }
.bla-tour .rts-cursor svg { width: 26px; height: 26px; }
.bla-tour { background: var(--soft); }
.bld[data-view="overview"] .bld-view--overview, .bld[data-view="actions"] .bld-view--actions, .bld[data-view="anchors"] .bld-view--anchors, .bld[data-view="gap"] .bld-view--gap { opacity: 1; visibility: visible; transition: opacity .4s ease; }
.bld[data-drawer="link"] .rts-drawer { transform: none; }
.bld-tag { display: inline-block; font: 700 10.5px/1 var(--fb); padding: 5px 8px; border-radius: 999px; white-space: nowrap; }
.bld-tag.pursue { background: var(--green-bg); color: var(--green-ink); } .bld-tag.disavow { background: #fdecec; color: #c2413a; }
.bld-tag.watch { background: #fff4e2; color: #b35400; } .bld-tag.lost { background: #fdecec; color: #c2413a; }
.bld-nl { background: #fff; border: 1px solid #e9ecf2; border-radius: 14px; padding: 14px; display: grid; gap: 10px; }
.bld-nl__h { display: flex; align-items: center; gap: 14px; font: 600 12px/1 var(--fs); color: #5a6577; }
.bld-nl__h small { margin-right: auto; font: 700 10px/1 var(--fb); letter-spacing: 1px; text-transform: uppercase; color: #8a93a5; }
.bld-nl__h span { display: inline-flex; align-items: center; gap: 5px; }
.bld-nl__h i { width: 10px; height: 10px; border-radius: 3px; } .bld-nl__h .n { background: #19b66a; } .bld-nl__h .l { background: #f0a3a3; }
.bld-nl__chart { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.bld-nl__m { display: grid; grid-template-rows: 70px 70px auto; justify-items: center; }
.bld-nl__m span { width: 60%; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.bld-nl__m .up { flex-direction: column-reverse; justify-content: flex-start; border-bottom: 1px solid #d6dce6; }
.bld-nl__m .dn { justify-content: flex-start; padding-top: 2px; }
.bld-nl__m span i { flex: none; width: 100%; height: calc(var(--h) * .78); border-radius: 5px 5px 0 0; background: #19b66a; }
.bld-nl__m .dn i { height: calc(var(--h) * .78); border-radius: 0 0 5px 5px; background: #f0a3a3; }
.bld-nl__m b { font: 700 10.5px/1 var(--fb); color: #138a52; }
.bld-nl__m .dn b { color: #c2413a; }

.bld-nl__m small { margin-top: 14px; font: 700 10.5px/1 var(--fb); color: #8a93a5; }
.rts-js .bld.rts-play .bld-nl__m i { animation: bldGrowY .6s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(.2s + var(--i) * .07s); }
.rts-js .bld.rts-play .bld-nl__m .up i { transform-origin: bottom; } .rts-js .bld.rts-play .bld-nl__m .dn i { transform-origin: top; }
@keyframes bldGrowY { from { transform: scaleY(0); } to { transform: none; } }

.bld-acts { display: grid; gap: 10px; }
.bld-act { --c: #19b66a; display: grid; gap: 6px; padding: 13px 15px; border-radius: 14px; background: #fff; border: 1px solid #e9ecf2; box-shadow: inset 4px 0 0 var(--c); transition: background .3s, box-shadow .3s; }
.bld-act--disavow { --c: #d64545; } .bld-act--watch { --c: #e8890c; }
.bld-act.is-hover { background: #fffaf5; }
.bld-act.is-sel { background: #fff7ef; box-shadow: inset 4px 0 0 var(--c), 0 0 0 2px #ffc98f; }
.bld-act__tags { display: flex; gap: 6px; align-items: center; }
.bld-imp { font: 600 11px/1 var(--fs); color: #8a93a5; }
.bld-act b { font: 700 14.5px/1.3 var(--fb); color: #0b1526; }
.bld-act p { margin: 0; font-size: 12.5px; line-height: 1.45; color: #5a6577; }
.bld-cta { font: 700 12.5px/1 var(--fb); color: #2f5fe0; }
.rts-js .bld[data-view="actions"] .bld-act { animation: rtsRow .4s ease both; animation-delay: calc(.1s + var(--i) * .09s); }

.bld-dbody { padding: 14px 16px; display: grid; gap: 11px; align-content: start; }
.bld-path { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }
.bld-path > span { display: grid; gap: 3px; padding: 10px; border-radius: 12px; background: #f7f8fc; border: 1px solid #eef0f5; min-width: 0; }
.bld-path small { font: 700 9.5px/1 var(--fb); letter-spacing: .8px; text-transform: uppercase; color: #8a93a5; }
.bld-path b { font: 700 12.5px/1.25 var(--fb); overflow-wrap: anywhere; }
.bld-path em { font-style: normal; font-size: 11.5px; color: #138a52; }
.bld-path > i { font-style: normal; color: #8a93a5; font-weight: 800; }
.bld-verdict { display: grid; gap: 6px; padding: 13px; border-radius: 14px; background: linear-gradient(135deg, #effcf5, #fff); border: 1.5px solid #a9e8c8; transition: box-shadow .5s ease, border-color .5s ease; }
.bld-verdict .bld-tag { justify-self: start; }
.bld-verdict b { font: 800 15px/1.2 var(--fb); }
.bld-verdict p { margin: 0; font-size: 12.5px; line-height: 1.5; color: #232f42; }
.bld.is-zoom .bld-verdict { border-color: #19b66a; box-shadow: 0 0 0 5px rgba(25,182,106,.15), 0 18px 40px -18px rgba(19,138,82,.5); }
.bld-more { font: 600 12px/1.3 var(--fs); color: #8a93a5; }

.bld-anc { display: grid; gap: 12px; }
.bld-anc__verdict { display: grid; gap: 5px; padding: 13px 15px; border-radius: 14px; background: #fff8ec; border: 1px solid #ffd7a1; }
.bld-anc__verdict .bld-tag { justify-self: start; }
.bld-anc__verdict b { font: 800 15.5px/1.25 var(--fb); }
.bld-anc__verdict p { margin: 0; font-size: 12.5px; line-height: 1.45; color: #5a6577; }
.bld-anc__bar { display: flex; gap: 3px; height: 22px; border-radius: 7px; overflow: hidden; }
.bld-anc__bar i { width: var(--w); }
.rts-js .bld[data-view="anchors"] .bld-anc__bar i { animation: blaBar .7s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(.1s + var(--i) * .1s); transform-origin: left; }
.bld-anc__key { display: flex; flex-wrap: wrap; gap: 6px 14px; font: 600 12px/1 var(--fs); color: #5a6577; }
.bld-anc__key span { display: inline-flex; align-items: center; gap: 5px; }
.bld-anc__key i { width: 10px; height: 10px; border-radius: 3px; }
.bld-anc__key b { color: #0b1526; font-family: var(--fb); }
.bld-anc__top { list-style: none; margin: 0; padding: 4px 14px; border-radius: 14px; background: #fff; border: 1px solid #e9ecf2; }
.bld-anc__top li { display: grid; grid-template-columns: 1fr auto 86px; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid #f4f5f9; font: 600 12.5px/1.2 var(--fs); }
.bld-anc__top li:last-child { border-bottom: 0; }
.bld-anc__top li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bld-anc__top em { font-style: normal; font: 700 10.5px/1 var(--fb); padding: 4px 7px; border-radius: 999px; background: #f1f3f8; color: #5a6577; }
.bld-anc__top em.k-exact { background: #fdecec; color: #c2413a; } .bld-anc__top em.k-brand { background: #eef3ff; color: #2448b8; }
.bld-anc__top b { text-align: right; font: 700 12px/1 var(--fb); color: #5a6577; }

.bld-toggle { margin-left: auto; padding: 6px 10px; border-radius: 999px; background: #0b1526; color: #fff; font: 700 11.5px/1 var(--fb); }
.bld .bld-gap .rts-tr { grid-template-columns: 1.6fr 96px 1.2fr 70px; }
.bld-ds { display: inline-block; min-width: 32px; text-align: center; font: 800 12px/1 var(--fb); padding: 5px 6px; border-radius: 7px; background: #eef3ff; color: #2448b8; }
.bld-dots { display: inline-flex; align-items: center; gap: 5px; }
.bld-dots i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #dde2ea; }
.bld-dots i.on { background: #2f5fe0; border-color: #2f5fe0; }
.bld-dots small { margin-left: 4px; font: 600 11.5px/1 var(--fs); color: #8a93a5; }
.bld-c-you em { font-style: normal; font: 700 11px/1 var(--fb); padding: 4px 8px; border-radius: 999px; background: #fff4ea; color: #b34700; border: 1px dashed #ffb27a; }
.bld-gapfoot { display: flex; justify-content: space-between; align-items: center; gap: 10px; font: 600 12.5px/1 var(--fs); color: #5a6577; }
.bld-toast { position: absolute; left: 50%; bottom: 16px; z-index: 6; display: flex; gap: 10px; align-items: center; padding: 11px 16px; border-radius: 12px; background: #0b1526; color: #fff; font-size: 13px; box-shadow: 0 18px 40px -16px rgba(11,21,38,.6);
  opacity: 0; transform: translate(-50%, 16px); transition: opacity .35s ease, transform .35s cubic-bezier(.2,.8,.2,1); pointer-events: none; white-space: nowrap; }
.bld-toast i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #19b66a; font-style: normal; font-weight: 800; }
.bld.is-toast .bld-toast { opacity: 1; transform: translate(-50%, 0); }

/* real screenshots under the tour */
.bla-shots { margin-top: 34px; display: grid; gap: 12px; }
.bla .bla-shots__h { margin: 0; font: 700 12px/1 var(--fb); letter-spacing: 1.6px; text-transform: uppercase; color: var(--faint); text-align: center; }
.bla-shots__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.bla-shots figure { margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: #fff; box-shadow: 0 14px 30px -20px rgba(11,21,38,.35); }
.bla-shots img { display: block; width: 100%; height: auto; }
@media (max-width: 760px) { .bla-shots__row { grid-template-columns: 1fr; } }

/* ================= HOW IT WORKS — flow ================= */
.bla-steps { background: #fff; }
.bla-flow { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.bla-flow::before { content: ""; position: absolute; left: 16%; right: 16%; top: 26px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--green), var(--orange), var(--purple)); }
.bla-flow li { position: relative; display: grid; justify-items: center; text-align: center; gap: 8px; padding: 0 8px; }
.bla-flow__n { position: relative; z-index: 1; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 3px solid var(--orange); font: 800 20px/1 var(--fb); color: var(--orange-ink); box-shadow: 0 0 0 7px #fff; }
.bla-flow li.is-free .bla-flow__n { border-color: var(--green); color: var(--green-ink); }
.bla-flow li:nth-child(3) .bla-flow__n { border-color: var(--purple); color: #5b3fd6; }
.bla-flow h3 { margin: 8px 0 0; font: 700 19px/1.25 var(--fb); color: var(--ink); }
.bla-flow p { margin: 0; max-width: 32ch; font-size: 15px; line-height: 1.55; color: var(--muted); }
.bla-flow.is-in li { animation: blaRise .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * .15s); }
@keyframes blaRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ================= CHECKER vs ANALYZER ================= */
.bla-vs { background: var(--soft); }
.bla-vs__grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: stretch; }
.bla-vs__col { display: grid; gap: 10px; align-content: start; padding: 22px; border-radius: 22px; background: #fff; border: 1px solid var(--line); }
.bla-vs__col.is-decide { border: 2px solid #ffc08a; box-shadow: 0 24px 50px -30px rgba(255,106,0,.45); }
.bla-vs__tag { justify-self: start; font: 700 11px/1 var(--fb); letter-spacing: 1.2px; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; background: #eef1f6; color: var(--muted); }
.is-decide .bla-vs__tag { background: #fff0e3; color: var(--orange-ink); }
.bla-vs__col h3 { margin: 0; font: 800 22px/1.2 var(--fb); color: var(--ink); }
.bla-vs__col p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); }
.bla-vs__vis { display: grid; gap: 6px; margin-top: 6px; }
.is-count .bla-vs__vis span { padding: 8px 10px; border-radius: 8px; background: var(--soft); font: 500 12.5px/1 ui-monospace, Consolas, monospace; color: var(--faint); }
.is-decide .bla-vs__vis span { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; font-size: 13.5px; color: var(--ink2); }
.is-decide .bla-vs__vis b { font: 800 11px/1 var(--fb); padding: 5px 8px; border-radius: 999px; color: #fff; }
.is-decide .pursue { background: #f2fbf6; } .is-decide .pursue b { background: var(--green); }
.is-decide .disavow { background: #fdf3f3; } .is-decide .disavow b { background: var(--red); }
.is-decide .watch { background: #fff8ec; } .is-decide .watch b { background: var(--amber); }
.bla-vs__arrow { align-self: center; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font: 800 20px/1 var(--fb); }

/* ================= FAQ (plain h3 + answer, kept for People Also Ask) ================= */
.bla-faq .faq-section { background: #fff; }
.bla-faq .faq-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 1160px; margin: 0 auto; padding: 0 18px; }
.bla-faq .faq-item { padding: 20px 22px; border-radius: 18px; background: var(--soft); border: 1px solid var(--line); }
.bla-faq .faq-item h3 { margin: 0 0 8px; font: 700 17px/1.35 var(--fb); color: var(--ink); }
.bla-faq .faq-item p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); }

/* ================= EXPLORE + PLANS ================= */
.bla-explore { padding-top: 24px; }
.bla-explore__box { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; padding: 30px; border-radius: 24px; background: var(--soft); border: 1px solid var(--line); }
.bla-explore__box h2 { margin: 12px 0 8px; font-size: clamp(24px, 2.6vw, 30px); }
.bla-explore__box p { margin: 0 0 14px; color: var(--muted); line-height: 1.55; }
.bla-explore__box p a { color: var(--orange-ink); font-weight: 600; }
.bla-explore .explore-tools-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.bla-explore .explore-tools-links a { display: inline-block; padding: 9px 13px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--ink2); text-decoration: none; font: 600 14px/1.2 var(--fs); }
.bla-plans { display: grid; gap: 12px; align-content: start; }
.bla-plans .explore-tools-links { display: grid; gap: 8px; }
.bla-plans .explore-tools-links a { display: block; border-radius: 14px; padding: 13px 16px; }
.bla-plans .explore-tools-links b { font-family: var(--fb); color: var(--ink); margin-right: 4px; }
.bla-plans p { font-size: 13.5px; }

/* ================= smaller screens ================= */
@media (max-width: 1000px) {
  .bla-split { grid-template-columns: 1fr; gap: 30px; }
  .bla-split--flip > :first-child { order: 0; }
  .bla-free__row { grid-template-columns: 1fr; gap: 24px; }
  .bla-bullets--row { grid-template-columns: 1fr; }
  .bla-explore__box { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .bla { --gap: 52px; }
  .bla-triage { grid-template-columns: 1fr; padding: 12px; }
  .bla-lane { min-height: 0; }
  .bla-time__axis { margin-left: 0; font-size: 8.5px; }
  .bla-time__row { grid-template-columns: 1fr; gap: 4px; }
  .bla-time__d { font-size: 12px; }
  .bla-matrix { padding: 10px; }
  .bla-matrix__h, .bla-matrix__r { grid-template-columns: 1.5fr repeat(3, .5fr) .55fr; gap: 3px; }
  .bla-matrix__h { font-size: 9px; letter-spacing: 0; }
  .bla-matrix__d { font-size: 12px; }
  .bla-matrix i { width: 14px; height: 14px; }
  .bla-anchor__list { grid-template-columns: 1fr; }
  .bla-flow { grid-template-columns: 1fr; gap: 26px; }
  .bla-flow::before { left: 26px; right: auto; top: 26px; bottom: 26px; width: 3px; height: auto; background: linear-gradient(var(--green), var(--orange), var(--purple)); }
  .bla-flow li { grid-template-columns: 54px 1fr; justify-items: start; text-align: left; column-gap: 16px; padding: 0; }
  .bla-flow__n { grid-row: 1 / 3; }
  .bla-flow h3 { margin: 4px 0 0; }
  .bla-vs__grid { grid-template-columns: 1fr; }
  .bla-vs__arrow { justify-self: center; transform: rotate(90deg); }
  .bla-faq .faq-list { grid-template-columns: 1fr; }
  .bla-explore__box { padding: 20px; }
  /* tour */
  .bld-nl__chart { gap: 4px; }
  .bld-nl__m { grid-template-rows: 56px 56px auto; }
  .bld-path { grid-template-columns: 1fr; } .bld-path > i { transform: rotate(90deg); justify-self: center; }
  .bld .bld-gap .rts-tr { grid-template-columns: 1fr 44px 92px; }
  .bld-c-you { display: none; }
  .bld-dots small { display: none; }
  .bld-toast { white-space: normal; width: calc(100% - 24px); }
}
@media (prefers-reduced-motion: reduce) {
  .bla *, .bla *::before, .bla *::after { animation: none !important; transition: none !important; }
}