/* A/B review page for v5 section 4. Card A visuals come from v5.css; B visuals and features 13-18 are here. */
.ab-page { background: var(--cream); }
.draft-bar a { color: var(--butter); }
.ab-wrap { max-width: 1000px; padding-bottom: 100px; }
.ab-intro { padding: 56px 0 24px; text-align: center; }
.ab-intro h1 { margin: 6px 0 14px; font-size: clamp(32px, 4vw, 52px); letter-spacing: -.04em; font-weight: 700; }
.ab-intro > p { max-width: 640px; margin: 0 auto; color: var(--ink-2); font-size: 17px; }
.ab-journey { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 28px; text-align: left; }
.ab-journey a { display: flex; align-items: center; gap: 9px; min-height: 62px; padding: 10px 12px; border: 1.5px solid var(--ink); border-radius: 9px; background: var(--paper); font-size: 13px; font-weight: 700; line-height: 1.2; text-decoration: none; }
.ab-journey a:hover, .ab-journey a:focus-visible { background: var(--butter); }
.ab-journey a span { color: var(--green-dark); font: 700 14px var(--mono); }
.ab-stage { margin-top: 58px; padding-top: 24px; border-top: 2px solid var(--ink); }
.ab-stage-head { display: flex; align-items: flex-start; gap: 17px; }
.ab-stage-number { display: grid; place-items: center; width: 52px; height: 52px; flex: none; border: 1.5px solid var(--ink); border-radius: 10px; background: var(--butter); font: 700 19px var(--mono); }
.ab-stage-head h2 { margin: 0 0 4px; font-size: clamp(25px, 3vw, 35px); line-height: 1.15; letter-spacing: -.03em; }
.ab-stage-head p { margin: 0; color: var(--ink-2); font-size: 15px; }
.ab-stage-links { display: flex; flex-wrap: wrap; gap: 7px; margin: 18px 0 24px; }
.ab-stage-links a { padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); color: var(--ink-2); font-size: 12px; text-decoration: none; }
.ab-stage-links a:hover, .ab-stage-links a:focus-visible { border-color: var(--ink); color: var(--ink); background: var(--butter-wash); }
.ab-index { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 24px; }
.ab-index a { display: grid; place-items: center; width: 36px; height: 36px; border: 1.5px solid var(--ink); border-radius: 8px; background: var(--paper); font: 700 14px var(--mono); text-decoration: none; }
.ab-index a:hover { background: var(--butter); }
.v5 .ab-row { padding: 40px 0 8px; border-top: 1px solid var(--line); }
.v5 .ab-stage .ab-row:first-of-type { border-top: 0; padding-top: 12px; }
.ab-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; font-size: 24px; letter-spacing: -.02em; }
.ab-n { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 6px; border-radius: 10px; background: var(--ink); color: var(--butter); font: 700 18px var(--mono); }
.ab-new { padding: 3px 8px; border-radius: 999px; background: var(--butter); border: 1.5px solid var(--ink); font: 700 11px var(--mono); text-transform: uppercase; }
.ab-merged { margin-left: auto; color: var(--muted); font: 600 11px var(--mono); letter-spacing: 0; }
.ab-anchor-alias { display: block; height: 0; }
#f10 .ab-pair { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ab-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.ab-pair .chk { position: relative; min-width: 0; }
.ab-tag { position: absolute; top: -12px; left: 16px; z-index: 2; padding: 3px 10px; border-radius: 6px; background: #e11d48; color: #fff; font: 700 14px var(--mono); }
.filter-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 32px; }
.filter-choice { min-width: 0; }
.filter-choice .chk { position: relative; height: 100%; box-sizing: border-box; }
.filter-trio .chk-vis { height: 196px; }
.filter-trio .chk h3 { font-size: 20px; }
.filter-trio .chk > p { font-size: 14px; }
.filter-trio .sl { grid-template-columns: 92px minmax(0, 1fr) 36px; gap: 7px; font-size: 11px; }
.filter-trio #f8A .c8-row { grid-template-columns: 16px minmax(0, 1fr) 43px 40px; gap: 5px; padding-left: 8px; padding-right: 8px; font-size: 11px; }
.filter-trio #f8A .c8-row svg { width: 43px; }
.filter-trio #f8A .c8-row b { font-size: 11px; }
.review-selected, .archive-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.review-selected { margin-top: 31px; }
.review-selected > div { min-width: 0; }
.review-selected .chk { position: relative; height: 100%; }
.archive-group { margin-top: 34px; padding-top: 19px; border-top: 1px solid var(--line); }
.archive-group h3 { margin: 0 0 22px; color: var(--ink-2); font-size: 19px; }
.archive-group .chk { position: relative; }
.archive-note { margin: -9px 0 22px; color: var(--ink-2); font-size: 14px; }

/* shared: text swap on hover */
.sx { display: inline-grid; }
.sx > span { grid-area: 1 / 1; transition: opacity .25s, transform .3s var(--ease); }
.sx-b { opacity: 0; transform: translateY(6px); }
.chk:is(:hover, .on) .sx-a { opacity: 0; transform: translateY(-6px); }
.chk:is(:hover, .on) .sx-b { opacity: 1; transform: none; transition-delay: .1s; }

/* shared: big number + label */
.bn { display: inline-flex; align-items: baseline; gap: 4px; font: 700 54px/1 var(--mono); letter-spacing: -.04em; }
.bn small { font-size: 22px; color: var(--muted); }
.bn-lab { font-size: 14px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; }
.bn-lab .fav { --fs: 16px; }
.chk:is(:hover, .on) .bn { color: var(--green-dark); }

/* shared: toggle switch */
.sw-row { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 500; }
.sw { position: relative; width: 42px; height: 24px; border-radius: 999px; background: var(--line-2); transition: background .3s; flex: none; }
.sw i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .3s var(--ease); }
.chk:is(:hover, .on) .sw { background: var(--green); }
.chk:is(:hover, .on) .sw i { transform: translateX(18px); }
.sw-row:nth-child(2) .sw, .sw-row:nth-child(2) .sw i { transition-delay: .15s; }
.sw-row:nth-child(3) .sw, .sw-row:nth-child(3) .sw i { transition-delay: .3s; }

/* 1B: a hypothetical Ahrefs search excludes three recognisable rival blogs. */
.c1b-vis { gap: 16px; text-align: center; }
.c1b-context { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-2); }
.c1b-context b { display: inline-flex; align-items: center; gap: 5px; color: var(--ink); }
.c1b-context img { width: 18px; height: 18px; border-radius: 4px; }
.c1b-rivals { display: flex; justify-content: center; flex-wrap: wrap; gap: 7px; transition: opacity .3s, transform .35s; }
.c1b-rivals span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 9px; border: 1px solid #d8d5ca; border-radius: 8px; background: var(--paper); font-size: 12px; font-weight: 700; }
.c1b-rivals img { width: 20px; height: 20px; border-radius: 4px; }
.c1b-payoff { position: absolute; top: 99px; left: 16px; right: 16px; color: #b42318; font: 700 12px var(--mono); opacity: 0; transform: translateY(5px); transition: opacity .3s .25s, transform .3s .25s; }
.chk:is(:hover, .on) .c1b-rivals { opacity: 0; transform: translateY(-8px); }
.chk:is(:hover, .on) .c1b-payoff { opacity: 1; transform: none; }

/* 1C: recognisable rivals, AI checks ownership, then removes their blogs. */
.c1c-vis, .c1d-vis { align-items: stretch; justify-content: flex-start; gap: 7px; text-align: left; }
.c1c-buyer, .c1d-buyer { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-2); }
.c1c-buyer b { display: inline-flex; align-items: center; gap: 5px; color: var(--ink); }
.c1c-buyer img, .c1c-row img { width: 17px; height: 17px; border-radius: 4px; }
.c1c-ai, .c1d-ai { align-self: flex-start; padding: 2px 6px; border-radius: 4px; background: var(--butter); font: 700 10px var(--mono); opacity: 0; transition: opacity .2s .12s; }
.c1c-results { display: flex; flex-direction: column; gap: 4px; }
.c1c-row { box-sizing: border-box; display: flex; align-items: center; gap: 6px; height: 28px; min-height: 28px; padding: 3px 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); font-size: 11px; overflow: hidden; transition: height .38s, min-height .38s, padding .38s, border-width .38s, opacity .3s, background .25s; }
.c1c-row b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c1c-row em { margin-left: auto; flex: none; color: #b42318; font: 700 9px var(--mono); font-style: normal; opacity: 0; transition: opacity .2s; }
.c1c-media { display: grid; place-items: center; width: 17px; height: 17px; flex: none; border-radius: 4px; background: var(--ink); color: var(--butter); font: 700 10px var(--mono); }
.c1c-final { color: var(--green-dark); font: 700 10px var(--mono); opacity: 0; transition: opacity .25s 2s; }
.chk:is(:hover, .on) .c1c-ai, .chk:is(:hover, .on) .c1d-ai { opacity: 1; }
.chk:is(:hover, .on) .c1c-rival { background: #fff0ee; height: 0; min-height: 0; padding-top: 0; padding-bottom: 0; border-width: 0; opacity: 0; transition-delay: 1.65s, 1.65s, 1.65s, 1.65s, 1.65s, .45s; }
.chk:is(:hover, .on) .c1c-rival em { opacity: 1; transition-delay: .5s; }
.chk:is(:hover, .on) .c1c-final { opacity: 1; }

/* 1D: AI identifies the publisher's competing product, not a shared keyword. */
.c1d-vis { position: relative; }
.c1d-buyer { justify-content: space-between; }
.c1d-buyer b { color: var(--ink); font-size: 10px; }
.c1d-candidate { display: flex; flex-direction: column; gap: 3px; padding: 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); transition: opacity .25s 1.65s, transform .3s 1.65s; }
.c1d-candidate b { font-size: 12px; }
.c1d-candidate small { font-size: 10px; color: var(--ink-2); }
.c1d-reason { display: flex; justify-content: space-between; gap: 5px; padding: 6px 8px; border-radius: 5px; background: #fff0ee; color: #842c24; font-size: 10px; opacity: 0; transform: translateY(5px); transition: opacity .25s .55s, transform .25s .55s; }
.c1d-reason b { text-align: right; }
.c1d-verdict { color: #b42318; font: 700 11px var(--mono); opacity: 0; transition: opacity .25s .95s; }
.c1d-final { position: absolute; left: 14px; right: 14px; top: 79px; bottom: 25px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 8px; border: 1px solid var(--green); border-radius: 6px; background: var(--paper); color: var(--green-dark); font: 700 11px var(--mono); text-align: center; opacity: 0; transform: translateY(8px); transition: opacity .3s 1.95s, transform .3s 1.95s; }
.c1d-final small { color: var(--ink-2); font: 600 10px var(--sans); }
@keyframes c1d-explain { 0%, 24% { opacity: 0; transform: translateY(5px); } 35%, 70% { opacity: 1; transform: none; } 85%, 100% { opacity: 0; transform: translateY(-5px); } }
@keyframes c1d-verdict { 0%, 40% { opacity: 0; } 50%, 70% { opacity: 1; } 85%, 100% { opacity: 0; } }
.chk:is(:hover, .on) .c1d-reason { animation: c1d-explain 2.2s ease both; }
.chk:is(:hover, .on) .c1d-verdict { animation: c1d-verdict 2.2s ease both; }
.chk:is(:hover, .on) .c1d-final { opacity: 1; transform: none; }
.chk:is(:hover, .on) .c1d-candidate { opacity: 0; transform: translateX(-20px); }
@media (prefers-reduced-motion: reduce) { .chk:is(:hover, .on) .c1d-reason, .chk:is(:hover, .on) .c1d-verdict { animation: none; opacity: 0; } }

/* 2B: reveal why a plausible article is removed before buyer review. */
.c2b-vis { align-items: stretch; gap: 9px; text-align: left; }
.c2b-label { font: 600 11px var(--mono); color: var(--ink-2); }
.c2b-page { display: flex; flex-direction: column; gap: 5px; padding: 12px; background: var(--paper); border: 1px solid var(--ink); border-radius: 9px; transition: opacity .35s .18s, transform .35s .18s; }
.c2b-page b { font-size: 14px; }
.c2b-page small { font-size: 11px; color: var(--ink-2); }
.c2b-page small span { color: #b42318; text-decoration: underline; text-underline-offset: 2px; }
.c2b-result { position: absolute; inset: 55px 14px auto; display: flex; justify-content: space-between; gap: 5px; padding: 14px 10px; border: 1px solid #b42318; border-radius: 8px; background: #fff4f2; color: #b42318; font-size: 12px; opacity: 0; transform: translateY(12px); transition: opacity .32s .25s, transform .32s .25s; }
.c2b-result b { white-space: nowrap; }
.c2b-payoff { font: 700 11px var(--mono); color: var(--green-dark); opacity: 0; transform: translateY(7px); transition: opacity .3s .45s, transform .3s .45s; }
.chk:is(:hover, .on) .c2b-page { opacity: 0; transform: translateX(-22px); }
.chk:is(:hover, .on) .c2b-result, .chk:is(:hover, .on) .c2b-payoff { opacity: 1; transform: none; }

/* 4B: failed publisher becomes a verified business, one check at a time. */
.c4b-vis { gap: 8px; text-align: center; background: #fff2ee; transition: background .35s; }
.c4b-publisher { display: inline-grid; justify-items: center; margin-bottom: 3px; font-size: 15px; font-weight: 700; }
.c4b-publisher > span { grid-area: 1 / 1; display: flex; align-items: center; gap: 7px; transition: opacity .24s, transform .3s; }
.c4b-publisher img { width: 20px; height: 20px; border-radius: 5px; }
.c4b-weak { color: #9f2b28; }
.c4b-real { color: var(--green-dark); opacity: 0; transform: translateY(5px); }
.c4b-check { --step-delay: .18s; display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 8px; width: min(100%, 264px); min-height: 23px; font-size: 12px; line-height: 1.2; text-align: left; }
.c4b-check:nth-child(3) { --step-delay: .45s; }
.c4b-check:nth-child(4) { --step-delay: .72s; }
.c4b-mark, .c4b-text { display: grid; }
.c4b-mark i, .c4b-text span { grid-area: 1 / 1; transition: opacity .22s, transform .28s; }
.c4b-mark i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font: 700 15px/1 var(--sans); font-style: normal; }
.c4b-x { background: #f8dad4; color: #9f2b28; }
.c4b-tick { background: var(--green); color: #fff; opacity: 0; transform: scale(.55); font-size: 11px !important; }
.c4b-no { color: #7c2d27; }
.c4b-yes { color: var(--green-dark); opacity: 0; transform: translateY(5px); }
.chk:is(:hover, .on) .c4b-vis { background: #eff8ef; }
.chk:is(:hover, .on) .c4b-weak { opacity: 0; transform: translateY(-5px); }
.chk:is(:hover, .on) .c4b-real { opacity: 1; transform: none; transition-delay: .08s; }
.chk:is(:hover, .on) .c4b-x, .chk:is(:hover, .on) .c4b-no { opacity: 0; transform: translateY(-4px); transition-delay: var(--step-delay); }
.chk:is(:hover, .on) .c4b-tick, .chk:is(:hover, .on) .c4b-yes { opacity: 1; transform: none; transition-delay: var(--step-delay); }

/* 5B: a compact site report unfolds on hover/tap. All values are illustrative. */
.c5b-vis { height: 196px; align-items: stretch; justify-content: flex-start; gap: 6px; text-align: left; background: #f3f5ef; }
.c5b-head { display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; font-size: 12px; }
.c5b-head b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c5b-head small { margin-left: auto; flex: none; font: 600 9px var(--mono); color: var(--muted); }
.c5b-site-icon { display: grid; place-items: center; width: 19px; height: 19px; flex: none; border-radius: 5px; background: var(--ink); color: var(--butter); font: 700 12px var(--mono); }
.c5b-cover { position: absolute; inset: 38px 10px 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 1px dashed var(--line-2); border-radius: 8px; background: var(--paper); text-align: center; transition: opacity .25s, transform .3s; }
.c5b-cover > span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--butter); font: 700 22px var(--mono); }
.c5b-cover b { font-size: 14px; }
.c5b-cover small { color: var(--ink-2); font-size: 10px; }
.c5b-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; opacity: 0; transform: translateY(7px); transition: opacity .3s .12s, transform .3s .12s; }
.c5b-stats > span { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; padding: 4px 6px; border: 1px solid var(--line); border-radius: 5px; background: var(--paper); }
.c5b-stats small, .c5b-keywords small { color: var(--ink-2); font-size: 10px; white-space: nowrap; }
.c5b-stats b { font: 700 11px var(--mono); white-space: nowrap; }
.c5b-stats .c5b-up { color: var(--green-dark); }
.c5b-keywords { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 5px 6px; border: 1px solid var(--line); border-radius: 5px; background: var(--paper); opacity: 0; transform: translateY(7px); transition: opacity .3s .22s, transform .3s .22s; }
.c5b-keywords b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.c5b-trend { width: 100%; height: 24px; overflow: visible; opacity: 0; transition: opacity .3s .3s; }
.c5b-trend polyline { fill: none; stroke: var(--green-dark); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 260; stroke-dashoffset: 260; transition: stroke-dashoffset .7s .35s; }
.chk:is(:hover, .on) .c5b-cover { opacity: 0; transform: scale(.94); }
.chk:is(:hover, .on) .c5b-stats, .chk:is(:hover, .on) .c5b-keywords { opacity: 1; transform: none; }
.chk:is(:hover, .on) .c5b-trend { opacity: 1; }
.chk:is(:hover, .on) .c5b-trend polyline { stroke-dashoffset: 0; }

/* 3B bars */
.bars2 { display: flex; align-items: flex-end; gap: 28px; height: 120px; }
.b2 { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; }
.b2 i { width: 54px; border-radius: 6px 6px 0 0; background: var(--line-2); transition: height .7s var(--ease), background .3s; }
.b2-a i { height: 29%; } .b2-b i { height: 29%; }
.b2 b { font: 700 18px var(--mono); }
.b2 small { font-size: 12px; color: var(--muted); }
.b2-b b { opacity: 0; transition: opacity .3s .5s; }
.chk:is(:hover, .on) .b2-b i { height: 92%; background: var(--green); }
.chk:is(:hover, .on) .b2-b b { opacity: 1; }

/* 6B price range */
.range { position: relative; width: 100%; max-width: 280px; height: 56px; }
.range::before { content: ''; position: absolute; left: 0; right: 0; top: 22px; height: 6px; border-radius: 3px; background: var(--line-2); }
.range-fill { position: absolute; left: 0; top: 22px; height: 6px; width: 0; border-radius: 3px; background: var(--butter); border: 1px solid var(--ink); transition: width .6s var(--ease); }
.range-dot { position: absolute; left: calc(15% - 8px); top: 17px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); opacity: 0; transition: opacity .3s .5s; }
.range .r-l, .range .r-r, .range .r-m { position: absolute; top: 34px; font: 400 12px var(--mono); color: var(--muted); }
.r-l { left: 0; } .r-r { right: 0; }
.r-m { left: 15%; top: -2px !important; transform: translateX(-30%); color: var(--ink) !important; font-weight: 700 !important; opacity: 0; transition: opacity .3s .5s; }
.chk:is(:hover, .on) .range-fill { width: 100%; }
.chk:is(:hover, .on) .range-dot, .chk:is(:hover, .on) .r-m { opacity: 1; }

/* 7B ghost lines, one becomes the sentence */
.lines { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 300px; padding: 16px; border-radius: 10px; background: var(--paper); }
.lines i { height: 8px; border-radius: 4px; background: var(--ground-2); }
.lines i:nth-child(2) { width: 80%; }
.lines-hit { position: relative; height: 8px; border-radius: 4px; background: var(--ground-2); font-size: 13.5px; line-height: 1.4; text-align: left; color: transparent; overflow: hidden; transition: height .4s var(--ease), background .3s, color .3s .2s; }
.lines-hit mark { background: transparent; color: inherit; transition: background .3s .3s; }
.chk:is(:hover, .on) .lines-hit { height: 40px; background: var(--butter-wash); color: var(--ink); }
.chk:is(:hover, .on) .lines-hit mark { background: var(--butter); text-decoration: underline; }

/* 8A: show the reason, then remove the failing site from the list. */
#f8A .c8-row { box-sizing: border-box; height: 40px; min-height: 40px; transition: height .4s var(--ease), min-height .4s var(--ease), padding .4s var(--ease), opacity .28s, transform .4s var(--ease), background .3s; }
#f8A.chk:is(:hover, .on) .c8-down { height: 0; min-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; transform: translateX(-24px); transition-delay: 1.05s, 1.05s, 1.05s, 1.05s, 1.05s, 0s; }
@keyframes c8-kept-brief {
  0%, 26% { opacity: 0; transform: scale(.7); }
  38%, 58% { opacity: 1; transform: none; }
  78%, 100% { opacity: 0; transform: scale(.7); }
}
#f8A.chk:is(:hover, .on) .c8-up em { animation: c8-kept-brief 1.45s ease both; }

/* 8B: the exact traffic cutoff filters four illustrative results down to two. */
#f8 .chk-vis { height: 196px; }
.c8b-vis { align-items: stretch; justify-content: center; gap: 5px; text-align: left; }
.c8b-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 600 10px var(--mono); color: var(--ink-2); }
.c8b-count { display: inline-grid; color: var(--ink); font-weight: 700; white-space: nowrap; }
.c8b-count span { grid-area: 1 / 1; transition: opacity .2s; }
.c8b-count span:last-child { opacity: 0; color: var(--green-dark); }
.c8b-list { display: flex; flex-direction: column; gap: 4px; }
.c8b-site { display: flex; align-items: center; gap: 7px; height: 27px; min-height: 27px; padding: 3px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); font-size: 11.5px; font-weight: 600; overflow: hidden; transition: height .4s var(--ease), min-height .4s var(--ease), padding .4s var(--ease), border-width .4s var(--ease), opacity .25s, transform .4s var(--ease), background .3s, border-color .3s; }
.c8b-icon { display: grid; place-items: center; width: 16px; height: 16px; flex: none; border-radius: 4px; background: var(--ground-2); font: 700 10px var(--mono); }
.c8b-name { flex: 1; }
.c8b-site b { font: 700 11px var(--mono); }
.c8b-drop b { color: #b42318; }
.c8b-keep b { color: var(--green-dark); }
.c8b-rule { align-self: flex-start; padding: 2px 6px; border-radius: 4px; background: var(--butter); font: 700 10px var(--mono); }
.chk:is(:hover, .on) .c8b-count span:first-child { opacity: 0; }
.chk:is(:hover, .on) .c8b-count span:last-child { opacity: 1; }
.chk:is(:hover, .on) .c8b-drop { height: 0; min-height: 0; padding-top: 0; padding-bottom: 0; border-width: 0; opacity: 0; transform: translateX(-28px); }
.chk:is(:hover, .on) .c8b-keep { background: var(--green-soft); border-color: var(--green); }

/* 9B donut */
@property --p { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
.donut { display: grid; place-items: center; width: 108px; height: 108px; border-radius: 50%; --p: 0%; background: conic-gradient(var(--ink) var(--p), var(--line-2) 0); transition: --p .8s var(--ease); }
.donut > span { display: grid; place-items: center; width: 78px; height: 78px; border-radius: 50%; background: var(--paper); font-size: 12px; color: var(--muted); line-height: 1.1; }
.donut b { font: 700 20px var(--mono); color: var(--ink); }
.chk:is(:hover, .on) .donut { --p: 44%; }

/* 10B drop zone */
.drop { position: relative; display: grid; place-items: center; width: 100%; max-width: 280px; height: 92px; border: 2px dashed var(--muted); border-radius: 12px; background: var(--paper); overflow: hidden; transition: border-color .3s, background .3s; }
.drop-zone { font-size: 13px; color: var(--muted); transition: opacity .2s; }
.drop-file { position: absolute; top: -40px; padding: 6px 12px; border-radius: 6px; background: var(--butter); border: 1.5px solid var(--ink); font: 400 12.5px var(--mono); transition: top .45s var(--ease); }
.chk:is(:hover, .on) .drop { border-color: var(--green); border-style: solid; background: var(--green-soft); }
.chk:is(:hover, .on) .drop-file { top: 30px; }
.chk:is(:hover, .on) .drop-zone { opacity: 0; }

/* 11B / 16B / 18B buttons reuse .c6-btn; extra bits */
.badge-count { font-size: 13px; color: var(--muted); }
.badge-count b { display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin-left: 4px; border-radius: 999px; background: var(--ink); color: var(--butter); font: 700 12px var(--mono); }

/* 12B progress */
.prog { position: relative; display: flex; justify-content: space-between; width: 100%; max-width: 280px; padding-top: 22px; }
.prog::before { content: ''; position: absolute; left: 6px; right: 6px; top: 6px; height: 4px; border-radius: 2px; background: var(--line-2); }
.prog-fill { position: absolute; left: 6px; top: 6px; height: 4px; width: 0; border-radius: 2px; background: var(--green); transition: width 1s var(--ease); }
.pg-step { position: relative; font-size: 12.5px; color: var(--muted); transition: color .3s; }
.pg-step::before { content: ''; position: absolute; left: 50%; top: -22px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--paper); border: 2px solid var(--line-2); transition: background .3s, border-color .3s; }
.s2::before { transition-delay: .4s; } .s3::before { transition-delay: .85s; }
.chk:is(:hover, .on) .prog-fill { width: calc(100% - 12px); }
.chk:is(:hover, .on) .pg-step { color: var(--ink); }
.chk:is(:hover, .on) .pg-step::before { background: var(--green); border-color: var(--green); }
.chk:is(:hover, .on) .s3 { font-weight: 700; color: var(--green-dark); }

/* 13A sliders */
.sl-vis { gap: 14px; }
.sl-source { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font: 700 12px var(--mono); }
.sl-source img { width: 20px; height: 20px; border-radius: 5px; }
.sl { display: grid; grid-template-columns: 110px 1fr 46px; align-items: center; gap: 10px; width: 100%; max-width: 310px; font-size: 13px; text-align: left; }
.sl b { font: 700 13px var(--mono); text-align: right; opacity: .35; transition: opacity .3s .4s; }
.sl-t { position: relative; height: 4px; border-radius: 2px; background: var(--line-2); }
.sl-t i { position: absolute; top: -6px; left: 0; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); transition: left .6s var(--ease); }
.sl-t::before { content: ''; position: absolute; left: 0; top: 0; height: 4px; width: 0; border-radius: 2px; background: var(--ink); transition: width .6s var(--ease); }
.chk:is(:hover, .on) .sl-t i { left: var(--to); }
.chk:is(:hover, .on) .sl b { opacity: 1; }

/* Merged 10 + 17: three ways to show the same two exclusion lists. */
.ex-kicker { color: var(--ink-2); font: 700 10px var(--mono); }
.ex-venn { gap: 5px; }
.ex-circles { position: relative; width: 191px; height: 91px; }
.ex-circle { position: absolute; top: 0; display: grid; place-items: center; width: 98px; height: 91px; border: 1.5px solid var(--ink); border-radius: 50%; background: rgba(255,255,255,.86); font-size: 10px; line-height: 1.22; font-weight: 700; transition: background .35s, transform .35s; }
.ex-circle-first { left: 0; }
.ex-circle-second { right: 0; }
.chk:is(:hover, .on) .ex-circle-first { background: rgba(244,149,125,.7); transform: translateX(5px); }
.chk:is(:hover, .on) .ex-circle-second { background: rgba(247,232,87,.76); transform: translateX(-5px); }
.ex-venn-total { display: flex; align-items: baseline; gap: 5px; font-size: 11px; }
.ex-venn-total b { font: 700 21px var(--mono); }
.ex-waterfall { padding: 11px; }
.ex-main { position: absolute; top: 50%; left: 10px; right: 10px; display: flex; flex-direction: column; align-items: center; gap: 3px; transform: translateY(-50%); transition: top .4s var(--ease), transform .4s var(--ease); }
.ex-main > b { font: 700 52px/1 var(--mono); letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.ex-main-label { display: grid; font: 700 12px var(--mono); color: var(--ink-2); }
.ex-main-label span { grid-area: 1 / 1; transition: opacity .2s; }
.ex-left { opacity: 0; }
.ex-steps { position: absolute; left: 12px; right: 12px; bottom: 12px; display: grid; gap: 5px; }
.ex-step { display: flex; align-items: center; justify-content: space-between; gap: 5px; min-height: 25px; padding: 3px 7px; border: 1px solid var(--line); border-radius: 5px; background: var(--paper); color: var(--ink-2); font-size: 10px; text-align: left; opacity: 0; transform: translateY(7px); visibility: hidden; transition: opacity .24s, transform .24s, visibility .24s; }
.ex-step-label { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.ex-step b { color: #ad3328; font: 700 12px var(--mono); white-space: nowrap; }
.chk:is(:hover, .on) .ex-main { top: 22px; transform: none; }
.chk:is(:hover, .on) .ex-found { opacity: 0; }
.chk:is(:hover, .on) .ex-left { opacity: 1; }
.ex-waterfall.stage-one .ex-step-one, .ex-waterfall.stage-two .ex-step { opacity: 1; transform: none; visibility: visible; }
.ex-list { align-items: stretch; gap: 5px; padding: 11px; }
.ex-list .ex-kicker { text-align: left; }
.ex-list-row { display: flex; align-items: center; gap: 6px; min-height: 26px; height: 26px; padding: 3px 7px; border: 1px solid var(--line); border-radius: 5px; background: var(--paper); font-size: 10.5px; text-align: left; overflow: hidden; transition: height .35s var(--ease), min-height .35s var(--ease), padding .35s, border-width .35s, opacity .25s, transform .35s, background .3s; }
.ex-list-row b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; }
.ex-list-row em { margin-left: auto; color: #ad3328; font: 700 9px var(--mono); white-space: nowrap; }
.ex-list-keep em { color: var(--green-dark); }
.ex-list-icon { display: grid; place-items: center; width: 15px; height: 15px; flex: none; border-radius: 50%; background: #fde8e7; color: #ad3328; font-weight: 700; }
.ex-list-keep .ex-list-icon { background: var(--green); color: white; }
.ex-list-total { margin-top: 2px; font-size: 10.5px; text-align: center; }
.ex-list-total b { font: 700 18px var(--mono); }
.chk:is(:hover, .on) .ex-list-cut { height: 0; min-height: 0; padding-top: 0; padding-bottom: 0; border-width: 0; opacity: 0; transform: translateX(-20px); }
.chk:is(:hover, .on) .ex-list-keep { border-color: var(--green); background: var(--green-soft); }

/* 13B chips switching on */
.chips-on { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.chips-on span { padding: 7px 13px; border-radius: 999px; border: 1.5px dashed var(--muted); background: var(--paper); font: 400 13px var(--mono); color: var(--muted); transition: all .25s; }
.chips-on span:nth-child(2) { transition-delay: .12s; } .chips-on span:nth-child(3) { transition-delay: .24s; }
.chk:is(:hover, .on) .chips-on span { border-style: solid; border-color: var(--ink); background: var(--butter); color: var(--ink); }

/* 14A sort reorder */
.sort-pill { padding: 5px 12px; border-radius: 999px; background: var(--ink); color: var(--butter); font: 700 12px var(--mono); }
.reorder { position: relative; width: 100%; max-width: 300px; height: 104px; }
.ro { position: absolute; left: 0; right: 0; display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border-radius: 8px; background: var(--paper); font-size: 12.5px; font-weight: 500; transition: top .5s var(--ease), background .3s; }
.ro .fav { --fs: 14px; }
.r1 { top: 0; } .r2 { top: 37px; } .r3 { top: 74px; }
.chk:is(:hover, .on) .r1 { top: 74px; }
.chk:is(:hover, .on) .r2 { top: 0; background: var(--green-soft); }
.chk:is(:hover, .on) .r3 { top: 37px; }

/* 14B fit meter */
.fit-meter { width: 100%; max-width: 280px; height: 8px; border-radius: 4px; background: var(--line-2); overflow: hidden; }
.fit-meter i { display: block; height: 100%; width: 0; background: var(--green); transition: width .8s var(--ease); }
.fit-tag { padding: 4px 10px; border-radius: 6px; background: var(--green); color: #fff; font: 700 11px var(--mono); text-transform: uppercase; opacity: 0; transform: scale(.85); transition: opacity .3s .6s, transform .3s .6s; }
.chk:is(:hover, .on) .fit-meter i { width: 88%; }
.chk:is(:hover, .on) .fit-tag { opacity: 1; transform: none; }

/* 15A web result slides in */
.brave-row { justify-content: flex-start; color: var(--ink-2); opacity: 0; transform: translateY(10px); transition: opacity .3s .2s, transform .35s .2s; }
.brave-row em { margin-left: auto; font-style: normal; padding: 2px 7px; border-radius: 4px; background: #fb542b; color: #fff; font: 700 10px var(--mono); text-transform: uppercase; }
.chk:is(:hover, .on) .brave-row { opacity: 1; transform: none; }

/* 16A CSV file pops out */
.csv-file { padding: 7px 14px 7px 12px; border-radius: 6px; background: var(--green); color: #fff; font: 700 12.5px var(--mono); opacity: 0; transform: translateY(-14px) scale(.9); transition: opacity .3s .2s, transform .4s var(--ease) .2s; }
.csv-file::before { content: '↓ '; }
.chk:is(:hover, .on) .csv-file { opacity: 1; transform: none; }

/* 17B tagged sites */
.c10-list em { margin-left: 4px; font-style: normal; padding: 1px 6px; border-radius: 4px; background: var(--ground-2); font: 700 10px var(--mono); text-transform: uppercase; color: var(--ink-2); text-decoration: none; display: inline-block; }

/* 18A recent searches */
.recent { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 280px; }
.rc { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-radius: 8px; background: var(--paper); font: 400 13px var(--mono); text-align: left; transition: background .25s, transform .3s; }
.rc small { font: 400 11px var(--sans); color: var(--muted); }
.rc:first-child { position: relative; }
.rc:first-child::after { content: '▶ 43'; position: absolute; right: 12px; padding: 2px 8px; border-radius: 4px; background: var(--ink); color: var(--butter); font: 700 11px var(--mono); opacity: 0; transition: opacity .25s .2s; }
.chk:is(:hover, .on) .rc:first-child { background: var(--butter); transform: scale(1.03); }
.chk:is(:hover, .on) .rc:first-child::after { opacity: 1; }
.chk:is(:hover, .on) .rc:first-child small { opacity: 0; }

@media (max-width: 760px) {
  .filter-trio, .review-selected, .archive-grid { grid-template-columns: 1fr; gap: 28px; }
  .filter-trio .chk-vis { height: 196px; }
  .ab-journey { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-stage { margin-top: 44px; }
  .ab-stage-head { gap: 12px; }
  .ab-stage-number { width: 42px; height: 42px; font-size: 16px; }
  .ab-pair { grid-template-columns: 1fr; gap: 30px; }
  #f10 .ab-pair { grid-template-columns: 1fr; }
  .ab-head { font-size: 20px; }
}
@media (min-width: 761px) and (max-width: 1000px) { .ab-journey { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 761px) and (max-width: 900px) { .filter-trio { gap: 12px; } .filter-trio .chk { padding-left: 11px; padding-right: 11px; } .filter-trio #f8A .c8-row { gap: 3px; } }
@media (min-width: 761px) and (max-width: 950px) { #f10 .ab-pair { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .chk * { transition: none !important; } #f8A.chk:is(:hover, .on) .c8-up em { animation: none; opacity: 0; } }