/* =========================================================================
   Group 4 — best-of lists (family "best", prefix best-). Shared components live in site.css.
   1 hero · 2 starter-kit strip · 3 top layout (table + sidebar + reviews) · 4 comparison table
   5 sidebar boxes · 6 ranked review cards · 7 guidance sections · 8 funnel-builders layout · 9 CTA band · 10 responsive
   ========================================================================= */
:root {
  --best-ink: #0e2050;       /* headings on these designs are a slightly bluer navy than --ink */
  --best-name: #1a2a7c;      /* tool names in review cards */
  --best-sub: #20409a;       /* tool subtitles */
  --best-green: #1f963c;     /* H1 accent words */
  --best-card: #f8fbfe;
  --best-line: #e1e9f4;
}

/* ---------- 1. Hero: pale background, copy left, desk photo right with the note on its laptop screen ---------- */
.best-hero { --hero-h: 22rem; --hero-copy: 49rem; background: linear-gradient(90deg, #f5f8fc 0%, #f9fbfd 45%, #fff 100%); }
.best-hero::before { display: none; }
.best-hero .hero__inner { padding-inline-start: 0; padding-block: .85rem 1.1rem; align-items: start; }
.best-hero .breadcrumb { font-size: .95rem; margin-bottom: .6rem; }
.best-hero__pill { margin-bottom: .45rem; padding: .18rem .55rem; font-size: .7rem; border-radius: 4px; }
.best-hero__title { font-size: 4rem; line-height: 1.02; letter-spacing: -.035em; color: var(--best-ink); margin-bottom: .32em; text-wrap: initial; }
.best-hero .hero__title .accent { display: inline; color: var(--best-green); }
.best-hero__sub { margin: -.1rem 0 .35rem; font-family: var(--font-head); font-weight: 800; font-size: 1.3rem; letter-spacing: -.015em; color: var(--best-green); }
.best-hero .hero__lead { font-size: 1.13rem; line-height: 1.36; color: #24324d; max-width: 44rem; }
.best-points { gap: .6rem 1.35rem; margin-top: .85rem; }
.best-points li { gap: .55rem; font-size: max(.74rem, 16px) /* rt-1019 */; font-weight: 600; color: var(--best-ink); line-height: 1.25; }
.best-points .ib { --s: 2.55rem; }
.best-points .ib .icon { width: 56%; height: 56%; }
/* Desk photo: anchored right, full hero height, 2:1, fades into the page on its left edge */
.best-hero__art {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: -1; height: 100%; width: auto; aspect-ratio: 2 / 1; max-width: 58%;
  container-type: size;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.6) 12%, #000 26%); mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.6) 12%, #000 26%);
}
.best-hero__art picture, .best-hero__art img { width: 100%; height: 100%; }
.best-hero__art img { object-fit: cover; object-position: right center; }
/* Handwritten words on the generated laptop's blank screen (HTML, not baked into the image).
   Positions are in container-height units measured from the photo's right/top edge, so they track the screen at any width. */
.best-hero__note {
  position: absolute; right: var(--nr, 40cqh); top: var(--nt, 20cqh); width: var(--nw, 70cqh); height: var(--nh, 45cqh); margin: 0;
  display: flex; flex-direction: column; justify-content: center; gap: .02em; padding-inline: 4%;
  font-family: var(--font-script); font-weight: 600; font-size: max(var(--nf, 7cqh), 14px) /* rt-1019 */; line-height: 1.04; color: #1a3a8f;
  transform: rotate(var(--nrot, -4deg)); transform-origin: center;
}
.best-hero__note span { display: block; white-space: nowrap; }
.best-hero__note span:last-child::after { content: ""; display: block; width: 92%; height: .09em; margin-top: .06em; border-radius: 3px; background: var(--green-500); transform: rotate(-1.5deg); }
.best-hero__note--ticks span { display: flex; align-items: center; gap: .3em; }
.best-hero__note--ticks .icon { width: .8em; height: .8em; color: #1d5a2e; stroke-width: 2.6; }
.best-hero__note--ticks span:last-child::after { display: none; }
.best-hero__corner { text-shadow: 0 0 6px #fff, 0 0 3px #fff; top: 1.1rem; right: clamp(1rem, 3vw, 3rem); max-width: 11rem; font-size: 1.45rem; color: var(--best-ink); }

/* Per-page note geometry (measured on each generated photo by measure_screens.py) */
.best-hero--tools { --nr: 65.9cqh; --nt: 25.6cqh; --nw: 68.2cqh; --nh: 45.2cqh; --nf: 6.20cqh; }
.best-hero--networks { --nr: 64.7cqh; --nt: 18.4cqh; --nw: 73.3cqh; --nh: 47.6cqh; --nf: 5.91cqh; }
.best-hero--email { --nr: 61.0cqh; --nt: 26.4cqh; --nw: 73.1cqh; --nh: 48.4cqh; --nf: 6.49cqh; }
.best-hero--funnel { --nr: 63.5cqh; --nt: 27.3cqh; --nw: 75.3cqh; --nh: 50.1cqh; --nf: 8.18cqh; }
.best-hero--keyword { --nr: 66.7cqh; --nt: 24.1cqh; --nw: 64.7cqh; --nh: 39.2cqh; --nf: 4.71cqh; }
.best-hero--seo { --nr: 60.2cqh; --nt: 22.1cqh; --nw: 79.8cqh; --nh: 53.2cqh; --nf: 5.28cqh; }
.best-hero--hosting { --nr: 63.3cqh; --nt: 25.7cqh; --nw: 74.6cqh; --nh: 49.5cqh; --nf: 6.63cqh; }
.best-hero--builders { --nr: 91.9cqh; --nt: 20.7cqh; --nw: 70.4cqh; --nh: 48.6cqh; --nf: 5.04cqh; }

/* Per-page hero sizing: H1 first-line width and lead size measured against each design scaled to 1280px */
.best-hero--networks .best-hero__title { font-size: 3.62rem; }
.best-hero--email { --hero-h: 18rem; }
.best-hero--email .best-hero__title { font-size: 3.2rem; }
.best-hero--email .hero__lead, .best-hero--keyword .hero__lead { font-size: max(1.05rem, 16px) /* rt-1019 */; }
.best-hero--keyword { --hero-h: 19rem; }
.best-hero--keyword .best-hero__title { font-size: 3.23rem; }
.best-hero--seo { --hero-h: 17rem; }
.best-hero--seo .best-hero__title { font-size: 3.35rem; }
.best-hero--seo .hero__lead { font-size: max(.97rem, 16px) /* rt-1019 */; }
.best-hero--hosting { --hero-h: 18rem; }
.best-hero--hosting .best-hero__title { font-size: 3.49rem; }
.best-hero--hosting .hero__lead, .best-hero--builders .hero__lead { font-size: max(1.03rem, 16px) /* rt-1019 */; }
.best-hero--builders { --hero-h: 19rem; }
.best-hero--builders .best-hero__title { font-size: 3.33rem; }
.best-hero--funnel { --hero-h: 14rem; }
.best-hero--funnel .best-hero__title { font-size: 2.89rem; }
.best-hero--funnel .hero__lead { font-size: max(.94rem, 16px) /* rt-1019 */; max-width: 34rem; }

/* ---------- 2. Starter-kit strip ---------- */
.best-strip-wrap { margin-top: .75rem; }
.best-strip { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 22.5rem); gap: .4rem 1.1rem; align-items: center; padding: .7rem 1.1rem .6rem; border-radius: var(--radius); }
.best-gift { display: grid; place-items: center; color: var(--green-600); }
.best-gift .icon { width: 3rem; height: 3rem; fill: #d4eed9; stroke-width: 2.1; }
.best-strip h2 { margin: 0 0 .15rem; font-size: 1.3rem; color: var(--best-ink); }
.best-strip p { margin: 0; font-size: max(.9rem, 16px) /* rt-1019 */; color: #3a4762; }
.best-strip p a { color: inherit; }
.best-form input { min-height: 2.6rem; font-size: .8rem; }
.best-form .btn { min-height: 2.6rem; font-size: .82rem; padding-inline: .95rem; }
.best-ticks { grid-column: 1 / -1; gap: .3rem 1.1rem; margin-top: .4rem; font-size: .72rem; color: #3a4762; }
.best-ticks .icon { color: #fff; fill: var(--green-600); stroke: #fff; width: 1.1em; height: 1.1em; }

/* ---------- 3. Top layout: comparison table + sidebar, then the ranked reviews spanning both columns ---------- */
.best-top { display: grid; grid-template-columns: minmax(0, 1fr) var(--aside, 17.8rem); column-gap: 1.3rem; row-gap: 1rem; align-items: start; padding-block: 1rem 1.25rem; }
.best-main { grid-column: 1; grid-row: 1; min-width: 0; }
.best-aside { grid-column: 2; grid-row: 1 / span 2; position: relative; z-index: 1; gap: .85rem; }
.best-reviews { grid-column: 1 / -1; grid-row: 2 / span 2; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; row-gap: .9rem; min-width: 0; }
.best-reviews__head { grid-column: 1; grid-row: 1; align-self: start; }
.best-cards { grid-column: 1 / -1; grid-row: 2; list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.best-top--inmain .best-reviews { grid-column: 1; grid-row: 2; display: block; }
.best-top--inmain .best-cards { margin-top: .9rem; }
.best-top--inmain .best-aside { grid-row: 1 / span 2; }
.best-disclosure { margin-bottom: .7rem; padding: .4rem .7rem; font-size: max(.74rem, 14px) /* rt-1019 */; }
.best-head { margin-bottom: .6rem; }
.best-head h2 { margin: 0 0 .15rem; font-size: 1.76rem; letter-spacing: -.02em; color: var(--best-ink); }
.best-head p { margin: 0; font-size: max(1.02rem, 16px) /* rt-1019 */; color: #3a4762; }

/* ---------- 4. Comparison table ---------- */
/* Containing block for the absolutely positioned .visually-hidden spans inside table buttons, so they scroll with the
   table instead of widening the page on phones (proposed for site.css .table-wrap under "Shared changes needed") */
.best-top .table-wrap, .best-sec .table-wrap { position: relative; }
.best-table { font-size: max(.83rem, 16px) /* rt-1019 */; color: #2c3a55; }
.best-table thead th { padding: .66rem .45rem; font-size: .92rem; text-align: center; border-right: 1px solid rgba(255, 255, 255, .16); }
.best-table thead th:last-child { border-right: 0; }
.best-table td, .best-table tbody th { padding: .5rem .55rem; border-right: 1px solid var(--line); }
.best-table td:last-child { border-right: 0; }
.best-table td:first-child { width: 2.3rem; font-weight: 600; color: var(--ink); }
.best-table.table--center td:nth-child(3) { text-align: left; }
.best-table .table-tool { gap: .55rem; font-size: .86rem; color: var(--ink); text-decoration: none; white-space: normal; line-height: 1.2; }
.best-table .table-tool:hover span { text-decoration: underline; }
.best-table .table-tool span { white-space: nowrap; }
/* Denser source designs (SEO 1312px, hosting 1122px canvases): smaller table and card type */
.best-top--seo .best-table, .best-top--hosting .best-table { font-size: max(.8rem, 14px) /* rt-1019 */; }
.best-top--seo .best-table td, .best-top--seo .best-table tbody th, .best-top--hosting .best-table td, .best-top--hosting .best-table tbody th { padding-block: .3rem; }
.best-top--seo .best-table thead th, .best-top--hosting .best-table thead th { font-size: .86rem; padding-block: .5rem; }
.best-top--seo .best-go, .best-top--hosting .best-go { min-height: 1.95rem; font-size: .76rem; }
.best-top--seo .best-head h2 { font-size: 1.6rem; }
.best-top--seo .best-card__in { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) minmax(0, 1fr); gap: .4rem 1rem; padding: .8rem 1rem .9rem; }
.best-top--seo .best-card__id .tool-mark { --s: 3.4rem; }
.best-top--seo .best-card__id h3 { font-size: 1.55rem; }
.best-top--seo .best-card__sub { font-size: max(.98rem, 16px) /* rt-1019 */; }
.best-top--seo .best-card__desc { font-size: max(.84rem, 16px) /* rt-1019 */; }
.best-top--seo .best-feats li, .best-top--seo .best-card__pts li { font-size: max(.76rem, 16px) /* rt-1019 */; }
.best-top--seo .best-feats--3 { gap: .25rem .9rem; }
.best-top--seo .best-card__cta { font-size: .95rem; min-height: 2.5rem; }
.best-top--seo .best-card__rv { font-size: .95rem; }
.best-top--seo .best-card__rating .stars .icon { width: 1.05rem; height: 1.05rem; }
.best-top--seo .best-card__note { font-size: 1.3rem; }
.best-table .tool-mark, .best-goals .tool-mark { --s: 1.9rem; }
.best-table .rating { flex-wrap: nowrap; justify-content: center; gap: .3rem; font-size: .82rem; }
.best-table .stars .icon { width: 1rem; height: 1rem; }
.best-go { width: 100%; min-height: 2.15rem; padding: .25rem .45rem; font-size: .8rem; white-space: nowrap; border-radius: 4px; }
.best-go .icon { width: .95em; height: .95em; }
.best-table__note { margin: .5rem 0 0; font-size: max(.74rem, 14px) /* rt-1019 */; color: var(--muted); }
.best-table__note a { color: inherit; }

/* ---------- 5. Sidebar boxes ---------- */
.best-aside h2 { margin: 0; font-size: 1.28rem; color: var(--best-ink); letter-spacing: -.015em; }
.best-kit { padding: .9rem 1rem 1rem; border-radius: var(--radius); }
.best-kit__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .65rem; align-items: center; margin-bottom: .35rem; }
.best-kit__head .icon { width: 2.6rem; height: 2.6rem; }
.best-kit > p { margin: 0 0 .6rem; font-size: max(.95rem, 16px) /* rt-1019 */; color: #3a4762; }
.best-kit .best-ticks { display: grid; gap: .2rem; margin-top: .55rem; }
.best-toc { padding: .7rem .95rem .55rem; }
.best-toc h2 { margin-bottom: .3rem; }
.best-toc .toc a { padding: .2rem 0; font-size: .92rem; }
.best-toc .toc a::after { content: "\2192"; width: auto; height: auto; border: 0; transform: none; margin-right: .1rem; font-weight: 600; }
.best-help { padding: .85rem .95rem .9rem; }
.best-help__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .75rem; align-items: start; margin-bottom: .7rem; }
.best-help .ib { --s: 3rem; border-radius: 8px; }
.best-help h2 { margin-bottom: .2rem; font-size: 1.05rem; }
.best-help p { margin: 0; font-size: max(.8rem, 16px) /* rt-1019 */; color: #3a4762; line-height: 1.4; }
.best-help__btn { min-height: 2.6rem; font-size: .9rem; font-weight: 700; }
.best-process { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .75rem; align-items: start; padding: .85rem .95rem; }
.best-process__icon .icon { width: 2.6rem; height: 2.6rem; color: var(--navy-900); fill: var(--navy-900); stroke: #fff; }
.best-process h2 { font-size: .95rem; margin-bottom: .2rem; }
.best-process p { margin: 0 0 .35rem; font-size: max(.76rem, 16px) /* rt-1019 */; color: #3a4762; line-height: 1.4; }
.best-process .link-arrow { font-size: .72rem; }

/* ---------- 6. Ranked review cards ---------- */
.best-card { scroll-margin-top: calc(var(--header-h) + 12px); }
.best-card__in {
  display: grid; grid-template-columns: minmax(0, 1.68fr) minmax(0, 1.05fr) minmax(0, .9fr); gap: .5rem 1.5rem; align-items: center;
  padding: .9rem 1.4rem 1rem 1.15rem; background: var(--best-card); border: 1px solid var(--best-line); border-radius: var(--radius);
}
.best-card__tags { display: flex; align-items: center; gap: .6rem; margin: -.2rem 0 .2rem -.2rem; }
.best-rank { position: relative; display: inline-grid; place-items: center; min-width: 2.9rem; height: 2.1rem; padding: 0 .5rem; border-radius: 5px; background: #f8c22a; color: var(--best-ink); font-family: var(--font-head); font-weight: 800; font-size: 1.25rem; }
.best-rank::after { content: ""; position: absolute; left: 50%; bottom: -6px; margin-left: -6px; border: 6px solid transparent; border-bottom: 0; border-top-color: #f8c22a; }
.best-tag { display: inline-block; padding: .3rem .7rem; border-radius: 5px; background: #fcd86a; color: var(--best-ink); font-family: var(--font-body); font-weight: 700; font-size: 1rem; line-height: 1.25; }
.best-tag--blue { background: #dde8fd; color: #1a3a8f; }
.best-tag--purple { background: #ebe3fd; color: #4a2aa6; }
.best-tag--orange { background: #fde9d2; color: #8a4508; }
.best-tag--green { background: var(--green-100); color: var(--green-800); }
.best-card__id { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .9rem; align-items: center; margin: .3rem 0 .55rem .3rem; }
.best-card__id .tool-mark { --s: 4.3rem; }
.best-card__id h3 { margin: 0; font-size: 1.85rem; line-height: 1.05; letter-spacing: -.03em; color: var(--best-name); }
.best-card__sub { margin: .1rem 0 0; font-size: 1.15rem; line-height: 1.25; color: var(--best-sub); }
.best-card__desc { margin: 0 0 .6rem .3rem; font-size: max(1.02rem, 16px) /* rt-1019 */; line-height: 1.42; color: #2c3a55; }
.best-feats { margin-left: .3rem; gap: .35rem 1rem; }
.best-feats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.best-feats--3 { grid-template-columns: repeat(3, auto); justify-content: start; gap: .35rem 1.3rem; }
.best-feats li { font-size: max(.84rem, 16px) /* rt-1019 */; color: #2c3a55; }
.best-card__pts li { font-size: max(.9rem, 16px) /* rt-1019 */; color: #2c3a55; }
.checklist.best-feats li::before, .checklist.best-card__pts li::before { background-color: var(--green-600); }
.best-card__shot { margin: 0; align-self: center; text-align: center; }
.best-card__shot img { width: 100%; height: auto; mix-blend-mode: multiply; }
.best-card__note { position: relative; display: inline-block; margin: -.2rem auto 0; max-width: 19rem; font-family: var(--font-script); font-weight: 600; font-size: 1.5rem; line-height: 1.08; color: var(--best-ink); transform: rotate(-3deg); }
.best-card__note::after { content: ""; display: block; width: 70%; height: 3px; margin: .25rem auto 0; border-radius: 3px; background: var(--green-500); transform: rotate(-1.5deg); }
.best-card__score { align-self: start; padding-top: .15rem; }
.best-card__rating { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; margin: 0 0 .45rem; color: var(--ink); }
.best-card__rl { font-size: .74rem; font-weight: 700; }
.best-card__rating .stars .icon { width: 1.25rem; height: 1.25rem; }
.best-card__rv { font-family: var(--font-head); font-weight: 800; font-size: 1.05rem; }
.best-card__pts { gap: .28rem; margin-bottom: .75rem; }
.best-card__cta { min-height: 2.75rem; font-size: 1.09rem; font-weight: 700; }
.best-card__cta--long { padding-inline: .6rem; font-size: .96rem; white-space: nowrap; }
.best-card__fine { margin: .35rem 0 .55rem; font-size: max(.72rem, 14px) /* rt-1019 */; color: var(--muted); text-align: center; }
.best-card__more { display: flex; justify-content: center; font-size: .95rem; }

/* ---------- 7. Guidance sections after the reviews ---------- */
.best-sec { padding-block: 1.1rem .5rem; scroll-margin-top: calc(var(--header-h) + 12px); }
.best-goals { font-size: max(.86rem, 16px) /* rt-1019 */; }
.best-goals tbody th { font-weight: 600; color: var(--ink); width: 34%; }
.best-goals .table-tool { gap: .5rem; text-decoration: none; color: var(--ink); }
.best-goals td:last-child { white-space: nowrap; }
.best-goals .link-arrow { font-size: .82rem; }
.best-crit__item { padding: 1rem .7rem .9rem; border-radius: var(--radius); text-align: center; background: color-mix(in srgb, var(--c) 7%, #fff); border: 1px solid color-mix(in srgb, var(--c) 18%, #fff); }
.best-crit__item > .icon { width: 2.2rem; height: 2.2rem; margin: 0 auto .5rem; color: var(--c); stroke-width: 2.2; }
.best-crit__item h3 { margin: 0 0 .2rem; font-size: .92rem; color: var(--best-ink); }
.best-crit__item p { margin: 0; font-size: max(.78rem, 16px) /* rt-1019 */; line-height: 1.35; color: #4a566c; }
.best-tip { display: flex; gap: .75rem; align-items: flex-start; padding: .9rem 1rem; }
.best-tip .num { --s: 2rem; }
.best-tip h3 { margin: .2rem 0 .2rem; font-size: .96rem; }
.best-tip p { margin: 0; font-size: max(.84rem, 16px) /* rt-1019 */; color: #4a566c; }
.best-faq summary { font-size: .88rem; }
.best-final { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; padding: 1.2rem 1.4rem; }
.best-final h2 { font-size: 1.35rem; margin-bottom: .4rem; color: var(--best-ink); }
.best-final p { font-size: max(.92rem, 16px) /* rt-1019 */; }
.best-final .btn-row { margin-top: .4rem; }
.best-final .best-final__fine { margin: .8rem 0 0; font-size: max(.76rem, 14px) /* rt-1019 */; color: var(--muted); }
.best-final__fine a { color: inherit; }

/* ---------- 8. Funnel builders layout (sidebar runs the full height) ---------- */
.best-top--funnel { --aside: 18.6rem; grid-template-columns: minmax(0, 1fr) var(--aside); }
.best-top--funnel .best-aside { grid-row: 1; }
.best-sec0 { margin-bottom: 1.15rem; scroll-margin-top: calc(var(--header-h) + 12px); }
.best-picks-grid { --gap: .55rem; }
.best-pick { display: flex; flex-direction: column; gap: .3rem; padding: .7rem .65rem .7rem; background: linear-gradient(180deg, #fffaf0 0%, #fff 60%); }
.best-pick:nth-child(2) { background: linear-gradient(180deg, #f2f6fe 0%, #fff 60%); }
.best-pick:nth-child(3) { background: linear-gradient(180deg, #f8f2fe 0%, #fff 60%); }
.best-pick:nth-child(4) { background: linear-gradient(180deg, #fff6ec 0%, #fff 60%); }
.best-pick:nth-child(5) { background: linear-gradient(180deg, #f1f7fe 0%, #fff 60%); }
.best-pick .badge { align-self: flex-start; font-size: .6rem; }
.best-pick .tool-mark { --s: 2.7rem; margin: .25rem 0 .1rem; }
.best-pick h3 { margin: 0; font-size: .98rem; }
.best-pick .rating { font-size: .74rem; }
.best-pick .stars .icon { width: .85rem; height: .85rem; }
.best-pick p { margin: 0; font-size: max(.74rem, 16px) /* rt-1019 */; line-height: 1.35; color: #3a4762; min-height: 2.7em; }
.best-pick .checklist { flex: 1; margin: .2rem 0 .4rem; gap: .25rem; }
.best-pick .checklist li { font-size: max(.7rem, 16px) /* rt-1019 */; padding-left: 1.3rem; }
.best-pick .checklist li::before { width: .9rem; height: .9rem; }
.best-pick .btn { min-height: 2.2rem; font-size: .76rem; }
.best-table--funnel td { text-align: left; }
.best-table--funnel thead th { text-align: left; background: #fff; color: var(--ink); border-right: 0; border-bottom: 1px solid var(--line); font-size: .76rem; }
.best-table--funnel td, .best-table--funnel tbody th { border-right: 0; padding: .4rem .55rem; }
.best-table--funnel td:first-child { width: auto; font-weight: 400; }
.best-table--funnel .rating { justify-content: flex-start; }
.best-verdict { display: inline-flex; align-items: center; gap: .25rem; text-transform: none; letter-spacing: 0; font-size: .68rem; font-weight: 700; padding: .2rem .45rem; border-radius: 5px; }
.best-verdict .icon { width: 1em; height: 1em; }
.best-top1 { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.45fr) minmax(0, .95fr); gap: .9rem; padding: .9rem; margin-bottom: .45rem; }
.best-top1__id { position: relative; padding-left: 2.2rem; }
.best-top1__id > .num { position: absolute; left: 0; top: 0; --s: 1.7rem; font-size: .66rem; }
.best-top1__id .badge { font-size: .64rem; }
.best-top1__brand { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .7rem; align-items: center; margin-top: .6rem; }
.best-top1__brand .tool-mark { --s: 3.6rem; }
.best-top1__brand h3 { margin: 0 0 .15rem; font-size: 1.12rem; }
.best-top1__brand p { margin: .25rem 0 0; font-size: max(.74rem, 16px) /* rt-1019 */; color: #3a4762; line-height: 1.35; }
.best-top1__brand .rating { font-size: .76rem; }
.best-top1__body > p { margin: 0 0 .55rem; font-size: max(.76rem, 16px) /* rt-1019 */; line-height: 1.4; color: #2c3a55; }
.best-top1__pc { gap: .5rem; }
.best-top1__pc .pros, .best-top1__pc .cons { padding: .5rem .6rem; }
.best-top1__pc h4 { display: flex; align-items: center; gap: .35rem; margin: 0 0 .3rem; font-size: .84rem; }
.best-top1__pc .pros h4 .icon { color: var(--green-600); }
.best-top1__pc .cons h4 .icon { color: var(--red-500); }
.best-top1__pc .checklist li { font-size: max(.72rem, 16px) /* rt-1019 */; }
.best-top1__cta { display: flex; flex-direction: column; gap: .55rem; padding-left: .9rem; border-left: 1px solid var(--line); }
.best-top1__for { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .55rem; }
.best-top1__for > .icon { width: 1.6rem; height: 1.6rem; color: var(--blue-600); }
.best-top1__for h4 { margin: 0 0 .1rem; font-size: .84rem; }
.best-top1__for p { margin: 0; font-size: max(.74rem, 16px) /* rt-1019 */; color: #3a4762; }
.best-top1__cta .btn { font-size: .9rem; min-height: 2.6rem; }
.best-top1__cta .link-arrow { justify-content: center; font-size: .76rem; }
.best-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.best-row { position: relative; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
.best-row summary { display: grid; grid-template-columns: auto auto 7.3rem minmax(0, 1fr) 7.5rem 6.5rem; gap: .65rem; align-items: center; padding: .38rem 2.2rem .38rem .55rem; cursor: pointer; list-style: none; font-size: .78rem; }
.best-row summary::-webkit-details-marker { display: none; }
.best-row summary::after { content: ""; position: absolute; right: .9rem; top: 1rem; width: 8px; height: 8px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); transition: transform .2s; }
.best-row details[open] summary::after { transform: rotate(-135deg); top: 1.2rem; }
.best-row .num { --s: 1.45rem; font-size: .72rem; }
.best-row .tool-mark { --s: 1.6rem; }
.best-row strong { color: var(--ink); font-size: .8rem; }
.best-row__desc { color: #3a4762; font-size: .74rem; }
.best-row .rating { font-size: .74rem; flex-wrap: nowrap; }
.best-row .stars .icon { width: .82rem; height: .82rem; }
.best-row__link { position: absolute; right: 2.4rem; top: .55rem; font-size: .74rem; }
.best-row__body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto; gap: .5rem 1rem; align-items: start; padding: .2rem .9rem .8rem 3.4rem; }
.best-row__body .checklist li { font-size: max(.76rem, 16px) /* rt-1019 */; }
.best-whos { --gap: .55rem; }
.best-who { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .75rem; align-items: center; padding: .65rem .75rem; }
.best-who .ib { --s: 3.4rem; }
.best-who h3 { margin: 0 0 .15rem; font-size: .86rem; }
.best-who p { margin: 0; font-size: max(.74rem, 16px) /* rt-1019 */; color: #3a4762; line-height: 1.38; }
.best-fkit { padding: .9rem 1rem .8rem; border-radius: var(--radius); }
.best-fkit > p { margin: 0 0 .55rem; font-size: max(.8rem, 16px) /* rt-1019 */; color: #3a4762; max-width: 15rem; }
.best-fkit__grid { display: grid; grid-template-columns: minmax(0, 1fr) 7.6rem; grid-template-areas: "form cover" "list cover"; gap: .5rem .5rem; align-items: start; }
.best-fkit .best-form { grid-area: form; }
.best-fkit__list { grid-area: list; gap: .25rem; }
.best-fkit__list li { font-size: max(.7rem, 16px) /* rt-1019 */; padding-left: 1.3rem; }
.best-fkit__list li::before { width: .9rem; height: .9rem; }
.best-fkit__cover { grid-area: cover; display: grid; justify-items: end; margin-top: -2.4rem; }
.best-fkit__cover .ebook { --w: 7.6rem; transform: perspective(700px) rotateY(-10deg); }
.best-fkit__cover .ebook__title { margin-inline: .4rem; font-size: .86rem; line-height: 1; }
.best-fkit .best-ticks { margin-top: .6rem; font-size: .68rem; gap: .2rem .8rem; }
.best-guides__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .2rem; }
.best-guides__head .link-arrow { font-size: .76rem; }
.best-guides .link-list a { padding: .4rem 0; font-size: .8rem; }
.best-guides .link-list a > .icon:first-child { color: #6a7a96; }
.best-qp__list { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .1rem; }
.best-qp__list a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .55rem; align-items: center; padding: .32rem 0; color: var(--ink); font-size: .8rem; text-decoration: none; }
.best-qp__list a:hover .best-qp__tool { text-decoration: underline; }
.best-qp__list .num { --s: 1.45rem; font-size: .72rem; }
.best-qp__list .icon { width: .9rem; height: .9rem; color: var(--blue-600); }
.best-qp__tool { color: var(--blue-600); }
.best-proc__head { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.best-proc__head .icon { width: 1.9rem; height: 1.9rem; color: var(--ink); }
.best-proc .checklist { margin-bottom: .5rem; }
.best-proc .checklist li { font-size: max(.8rem, 16px) /* rt-1019 */; }
.best-proc .link-arrow { font-size: .76rem; }
.best-sfaq h2 { margin-bottom: .55rem; font-size: 1.15rem; }
.best-sfaq .accordion { gap: .3rem; }
.best-sfaq summary { padding: .5rem .75rem; font-size: .76rem; font-weight: 500; }
.best-sfaq .accordion__body { font-size: max(.8rem, 16px) /* rt-1019 */; }

/* Funnel design density (1122px canvas): compact type throughout */
.best-hero--funnel .best-points { margin-top: .6rem; gap: .5rem 1.1rem; flex-wrap: nowrap; }
.best-hero--funnel .best-points li { font-size: max(.66rem, 16px) /* rt-1019 */; font-weight: 500; color: #4a566c; gap: .4rem; }
.best-hero--funnel .best-points li strong, .best-hero--funnel .best-points li > span:last-child { white-space: nowrap; }
.best-hero--funnel .best-points .ib { --s: 1.9rem; }
.best-hero--funnel .hero__inner { padding-block: .6rem .8rem; }
.best-hero--funnel .breadcrumb { font-size: .8rem; margin-bottom: .35rem; }
.best-top--funnel { --aside: 21rem; padding-top: .6rem; column-gap: 1rem; }
.best-top--funnel .best-head { margin-bottom: .45rem; }
.best-top--funnel .best-head h2 { font-size: 1.4rem; margin-bottom: .05rem; }
.best-top--funnel .best-head p { font-size: max(.76rem, 16px) /* rt-1019 */; }
.best-top--funnel .best-disclosure { margin-bottom: .5rem; }
.best-top--funnel .best-sec0 { margin-bottom: .85rem; }
.best-top--funnel .best-table { font-size: max(.74rem, 16px) /* rt-1019 */; }
.best-top--funnel .best-table td, .best-top--funnel .best-table tbody th { padding-block: .3rem; }
.best-top--funnel .best-table .table-tool { font-size: .76rem; }
.best-top--funnel .best-table .tool-mark { --s: 1.5rem; }
.best-top--funnel .best-table .stars .icon { width: .82rem; height: .82rem; }
.best-top--funnel .best-table .rating { font-size: .7rem; }
.best-top--funnel .best-aside { gap: .7rem; }
.best-top--funnel .best-aside h2 { font-size: 1.15rem; }
.best-top--funnel .best-top1 { padding: .65rem .8rem; gap: .7rem; margin-bottom: .35rem; }
.best-top--funnel .best-top1__body > p { font-size: max(.72rem, 16px) /* rt-1019 */; margin-bottom: .4rem; }
.best-top--funnel .best-top1__pc .pros, .best-top--funnel .best-top1__pc .cons { padding: .35rem .5rem; }
.best-top--funnel .best-top1__pc .checklist { gap: .12rem; }
.best-top--funnel .best-top1__pc .checklist li { font-size: max(.68rem, 16px) /* rt-1019 */; line-height: 1.3; }
.best-top--funnel .best-top1__pc h4 { font-size: .78rem; margin-bottom: .2rem; }
.best-top--funnel .best-top1__cta { gap: .4rem; }
.best-top--funnel .best-rows { gap: .2rem; }
.best-top--funnel .best-row summary { padding-block: .22rem; }
.best-top--funnel .best-row__link { top: .4rem; }
.best-top--funnel .best-crit__item { padding: .6rem .45rem .55rem; }
.best-top--funnel .best-crit__item > .icon { width: 1.8rem; height: 1.8rem; margin-bottom: .3rem; }
.best-top--funnel .best-crit__item h3 { font-size: .84rem; }
.best-top--funnel .best-crit__item p { font-size: max(.7rem, 16px) /* rt-1019 */; }
.best-top--funnel .best-who { padding: .45rem .6rem; gap: .6rem; }
.best-top--funnel .best-who .ib { --s: 2.8rem; }
.best-top--funnel .best-who h3 { font-size: .8rem; }
.best-top--funnel .best-who p { font-size: max(.7rem, 16px) /* rt-1019 */; line-height: 1.32; }
.best-top--funnel .best-sec0 { margin-bottom: .7rem; }
.best-band { margin-top: 1.25rem; }
.best-band .cta-band__inner { justify-content: space-between; padding-block: 1.1rem; }
.best-band--form .cta-band__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); gap: .75rem 2rem; }
.best-band--form .best-form .btn { white-space: nowrap; }
.best-band .best-ticks { color: #e8eef7; }
.best-band .best-ticks .icon { fill: var(--green-500); }

/* ---------- 10. Responsive ---------- */
@media (max-width: 1180px) {
  .best-card__in { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: .5rem 1.1rem; }
  .best-feats--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .best-top1 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
  .best-top1__cta { grid-column: 1 / -1; padding-left: 0; border-left: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; }
  .best-row summary { grid-template-columns: auto auto 7rem minmax(0, 1fr) 7.5rem; }
  .best-row__link { position: static; display: inline-flex; margin: 0 0 .5rem 3.4rem; }
}
@media (max-width: 1100px) {
  .best-hero__title, .best-hero--networks .best-hero__title, .best-hero--email .best-hero__title, .best-hero--keyword .best-hero__title,
  .best-hero--seo .best-hero__title, .best-hero--hosting .best-hero__title, .best-hero--builders .best-hero__title,
  .best-hero--funnel .best-hero__title { font-size: clamp(1.75rem, 1rem + 2.6vw, 2.6rem); }
  .best-picks-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 961px) and (max-width: 1100px) {
  .best-hero .hero__content { max-width: 53%; }
  .best-hero__art { max-width: 46%; }
  .best-hero__note, .best-hero__corner { display: none; }
  .best-hero .hero__lead { font-size: max(.98rem, 16px) /* rt-1019 */; }
  .best-points li { font-size: max(.7rem, 16px) /* rt-1019 */; }
}
@media (max-width: 1024px) {
  .best-card__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .best-card__main { grid-column: 1 / -1; }
  .best-crit { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .best-strip { grid-template-columns: auto minmax(0, 1fr); }
  .best-strip .best-form { grid-column: 1 / -1; }
}
@media (max-width: 960px) {
  /* Photo becomes a 2:1 banner above the copy; the note keeps its place on the laptop screen */
  .best-hero { display: flex; flex-direction: column; background: #fff; }
  .best-hero__art { position: relative; inset: auto; order: 0; width: 100%; max-width: none; height: auto; -webkit-mask-image: none; mask-image: none; }
  .best-hero .hero__inner { order: 1; min-height: 0; }
  .best-hero__corner { display: none; }
  .best-top, .best-top--funnel { grid-template-columns: minmax(0, 1fr); }
  .best-main, .best-aside, .best-reviews, .best-top--inmain .best-reviews, .best-top--funnel .best-aside { grid-column: 1; grid-row: auto; }
  .best-reviews { display: block; }
  .best-cards { margin-top: .9rem; }
  .best-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .best-sfaq { grid-column: 1 / -1; }
  .best-table { min-width: 44rem; }
  .best-table--funnel { min-width: 40rem; }
  .best-goals { min-width: 36rem; }
}
@media (max-width: 760px) {
  .best-hero .hero__inner { padding-block: .9rem 1.1rem; }
  .best-hero .hero__lead, .best-hero--email .hero__lead, .best-hero--keyword .hero__lead, .best-hero--seo .hero__lead,
  .best-hero--hosting .hero__lead, .best-hero--builders .hero__lead, .best-hero--funnel .hero__lead { font-size: max(1rem, 16px) /* rt-1019 */; }
  .best-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem .8rem; }
  .best-aside { grid-template-columns: minmax(0, 1fr); }
  .best-top1 { grid-template-columns: minmax(0, 1fr); }
  .best-top1__cta { grid-template-columns: minmax(0, 1fr); }
  .best-row summary { grid-template-columns: auto auto minmax(0, 1fr); padding-right: 2rem; }
  .best-row__desc { grid-column: 1 / -1; }
  .best-row .rating { grid-column: 1 / -1; }
  .best-row__body { grid-template-columns: minmax(0, 1fr); padding-left: .9rem; }
  .best-row__link { margin-left: .9rem; }
  .best-band--form .cta-band__inner { grid-template-columns: minmax(0, 1fr); }
  .best-final { grid-template-columns: minmax(0, 1fr); }
  .best-final .btn { width: 100%; }
}
@media (max-width: 640px) {
  .best-card__in { grid-template-columns: minmax(0, 1fr); padding: .9rem 1rem 1rem; }
  .best-card__id h3 { font-size: 1.5rem; }
  .best-card__id .tool-mark { --s: 3.4rem; }
  .best-feats--2, .best-feats--3 { grid-template-columns: minmax(0, 1fr); }
  .best-card__shot img { max-width: 22rem; margin-inline: auto; }
  .best-crit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .best-picks-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .best-whos { grid-template-columns: minmax(0, 1fr); }
  .best-strip { grid-template-columns: minmax(0, 1fr); text-align: left; }
  .best-strip .best-gift { justify-self: start; }
  .best-fkit__grid { grid-template-columns: minmax(0, 1fr) 6rem; }
  .best-head h2 { font-size: 1.3rem; }
}
@media (max-width: 420px) {
  .best-points li { font-size: max(.72rem, 16px) /* rt-1019 */; }
  .best-pick { padding: .6rem .5rem; }
  .best-pick .btn { font-size: .72rem; padding-inline: .4rem; }
}

/* UX audit W01 (2026-10-19): hero text sits on its own opaque panel, never over the photo */
.best-hero .hero__content { position: relative; z-index: 2; background: #fff; border-radius: 14px; padding: .9rem 1.2rem 1rem; box-shadow: 0 8px 28px rgba(12, 31, 69, .10); max-width: min(46rem, 58%); }
@media (max-width: 900px) { .best-hero .hero__content { max-width: none; } }