/* =========================================================================
   Head-to-head comparison pages (family "vs", prefix vs-)
   clickfunnels-vs-systeme-io · systeme-io-vs-convertkit · convertkit-vs-getresponse
   thrivecart-vs-clickfunnels · semrush-vs-ahrefs · bluehost-vs-hostinger
   1 side colours · 2 hero + split laptop art · 3 points row · 4 layout · 5 main sections
   6 feature table · 7 pricing · 8 pros/cons · 9 best-for + FAQ · 10 sidebar · 11 page tuning · 12 responsive
   Shared components (buttons, pills, breadcrumb, tool-mark, .vs circle, accordion, checklist) live in site.css.
   ========================================================================= */

/* ---------- 1. Side colours: each tool in a comparison gets one (--sc solid, --st tint, --sb border) ---------- */
.side-red    { --sc: #c9342e; --sc-dk: #c9342e; --st: #fdf2f2; --sb: #f7dcdd; }
.side-blue   { --sc: #1a66d9; --sc-dk: #1452b8; --st: #eff5fd; --sb: #d5e4f8; }
.side-green  { --sc: #1b8139; --sc-dk: #136129; --st: #eff8f1; --sb: #cfe8d6; }
.side-orange { --sc: #c2540a; --sc-dk: #a8470a; --st: #fff4ec; --sb: #fadcc6; }
.side-purple { --sc: #7a2fd0; --sc-dk: #6424b0; --st: #f6f0fd; --sb: #e2d3f7; }
.side-teal   { --sc: #0e8079; --sc-dk: #0e8079; --st: #eef9f8; --sb: #cdebe8; }

.vs-page { --vs-w: 76.5rem; --vs-aside: 22.8rem; --vs-gap: 1.6rem; --vs-h2: 1.62rem; --vs-body: 1.06rem; --vs-text: #46546b; }

/* ---------- 2. Hero: copy left, two-laptop art right ---------- */
.vs-hero { position: relative; overflow: hidden; background: var(--vs-hero-bg, linear-gradient(180deg, #fff 0%, #f6f9fd 100%)); }
.vs-hero__grid {
  display: grid; grid-template-columns: minmax(0, var(--vs-copy, 41%)) minmax(0, 1fr); align-items: center;
  padding-left: max(var(--gutter), calc((100% - var(--vs-w)) / 2));
}
.vs-hero__copy { position: relative; z-index: 2; padding-block: var(--vs-hero-pad, 1rem 1.25rem); padding-right: 1rem; }
.vs-hero .breadcrumb { font-size: .82rem; margin-bottom: .75rem; }
.vs-hero .pill { font-size: .74rem; padding: .28rem .6rem; border-radius: 4px; margin-bottom: .55rem; }
.vs-hero__title { font-size: var(--vs-h1, 3.15rem); line-height: 1.02; letter-spacing: -.035em; margin: 0 0 .3em; }
.vs-hero__title .accent { display: inline; }
.vs-hero__title .accent-blue { color: var(--blue-600); }
.vs-hero__lead { margin: 0; max-width: var(--vs-lead-w, 31rem); font-size: max(var(--vs-lead, 1.28rem), 16px) /* rt-1019 */; line-height: 1.24; color: #4a5872; }
.vs-hero__actions { margin-top: .9rem; }
.vs-hero__actions .btn { min-height: 2.7rem; padding: .55rem 1.9rem; font-size: 1.02rem; font-weight: 700; }
.vs-hero__fine { margin: .7rem 0 0; font-size: .74rem; line-height: 1.4; color: var(--muted); max-width: 34rem; }
.vs-hero__fine a { color: inherit; }

/* The art keeps the generated photo's own aspect ratio so the HTML screen labels stay on the laptop screens */
/* The figure fills the hero height; the inner box keeps the photo's aspect ratio (width follows height), sits on the
   right and may run under the copy, where the photo fades out. */
.vs-art { position: relative; z-index: 1; margin: 0; align-self: stretch; min-height: var(--vs-art-min, 21rem); container-type: inline-size; }
/* never wider than the art column plus a small run under the copy (keeps narrow laptops/tablets clear of the text) */
.vs-art__inner { position: absolute; bottom: 0; right: calc(-1 * var(--vs-shift, 0%)); height: min(100%, calc((100cqw + var(--vs-run, 4rem)) / (var(--vs-ratio, 1920 / 880)))); aspect-ratio: var(--vs-ratio, 1920 / 880); container-type: inline-size; }
.vs-art picture { position: absolute; inset: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--vs-fade, 9%)), linear-gradient(180deg, transparent 0, #000 7%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--vs-fade, 9%)), linear-gradient(180deg, transparent 0, #000 7%);
  mask-composite: intersect; }
.vs-art img { width: 100%; height: 100%; object-fit: cover; }
.vs-art__screen {
  position: absolute; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2cqw;
  padding: 1cqw 1.4cqw; text-align: center; background: var(--scr-bg, #fff); color: var(--scr-fg, var(--ink)); border-radius: .4cqw;
}
.vs-art__brand { display: inline-flex; align-items: center; gap: 1.1cqw; font-family: var(--font-head); font-weight: 800; font-size: var(--scr-name, 3.7cqw); letter-spacing: -.03em; line-height: 1; color: var(--scr-name-c, var(--ink)); }
.vs-art__brand .tool-mark { --s: var(--scr-mark, 6cqw); }
.vs-art__brand .tool-mark .icon { width: 55%; height: 55%; }
.vs-art__tag { font-family: var(--font-head); font-weight: 700; font-size: var(--scr-tag, 2.3cqw); line-height: 1.15; color: var(--scr-tag-c, #1c2b45); max-width: 92%; }
.vs-art__btn { display: inline-block; padding: .9cqw 2.2cqw; border-radius: .6cqw; background: var(--sc); color: #fff; font-weight: 700; font-size: 1.55cqw; line-height: 1.2; box-shadow: 0 .4cqw 1cqw rgba(13, 31, 60, .18); }
.vs-art .vs { position: absolute; z-index: 2; width: var(--vs-size, 12cqw); height: var(--vs-size, 12cqw); font-size: calc(var(--vs-size, 12cqw) * .42); transform: translate(-50%, -50%); box-shadow: 0 0 0 .8cqw #fff, 0 1cqw 2.5cqw rgba(13, 31, 60, .25); letter-spacing: -.02em; }
.vs-art .vs--light { background: #fff; color: var(--navy-900); box-shadow: 0 1cqw 2.5cqw rgba(13, 31, 60, .25); text-transform: lowercase; }
.vs-art .vs:not(.vs--light) { text-transform: uppercase; }
.vs-art__labels { position: absolute; inset: 0; z-index: 1; }
/* screen fills: brand colour panel with white wordmark, or white panel with a dark wordmark */
.vs-art__screen.scr-fill { --scr-bg: var(--sc); --scr-name-c: #fff; --scr-tag-c: #fff; }
.vs-art__screen.scr-fill .tool-mark { background: #fff; color: var(--sc); }
.vs-art__screen.scr-plain { --scr-name-c: #1d2633; }
.vs-art__screen.scr-fill .vs-art__brand, .vs-art__screen.scr-plain .vs-art__brand { font-size: var(--scr-name-big, 5cqw); }
/* Small floating feature tiles and labels around the laptops (decorative, text duplicated in the copy) */
.vs-art__chip {
  position: absolute; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: .5cqw; padding: 1cqw 1.2cqw;
  border-radius: 1.2cqw; background: rgba(255, 255, 255, .95); box-shadow: 0 .8cqw 2cqw rgba(13, 31, 60, .14);
  font-weight: 700; font-size: 1.35cqw; line-height: 1.1; color: var(--sc); text-align: center;
}
.vs-art__chip .icon { width: 4.2cqw; height: 4.2cqw; }
.vs-art__chip--row { flex-direction: row; gap: 1.2cqw; padding: 1.2cqw 1.8cqw; font-size: 2cqw; text-align: left; }
.vs-art__chip--row .icon { width: 4.6cqw; height: 4.6cqw; }
.vs-art__ghost { position: absolute; z-index: 1; color: var(--ghost, #fff); opacity: .55; width: 5.5cqw; height: 5.5cqw; }
/* Handwritten note pad and mug label from the design, as HTML text */
.vs-art__note {
  position: absolute; z-index: 3; margin: 0; padding: 1.4cqw 2cqw 1.6cqw 2.2cqw; list-style: none; background: #fffef8;
  border-radius: .5cqw; box-shadow: .6cqw 1cqw 2cqw rgba(13, 31, 60, .22); transform: rotate(var(--rot, -9deg));
  font-family: var(--font-script); font-weight: 600; font-size: 2.6cqw; line-height: 1.12; color: #1d2a44;
  background-image: repeating-linear-gradient(180deg, transparent 0 2.65cqw, #dbe5f1 2.65cqw 2.8cqw);
}
.vs-art__note li { display: flex; align-items: center; gap: .9cqw; }
.vs-art__note .icon { width: 2.4cqw; height: 2.4cqw; color: var(--green-600); stroke-width: 3; }
.vs-art__mug { position: absolute; z-index: 2; margin: 0; font-family: var(--font-script); font-weight: 600; font-size: 1.75cqw; line-height: 1.05; color: #1d2a44; text-align: center; }

/* ---------- 3. Four "what we compare" points ---------- */
.vs-points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem 1.5rem; }
.vs-points li { display: flex; align-items: center; gap: .75rem; line-height: 1.25; }
.vs-points strong { display: block; color: var(--ink); font-size: .86rem; font-weight: 700; }
.vs-points div > span { display: block; color: var(--muted); font-size: .76rem; }
.vs-points > li > .icon { width: 2.35rem; height: 2.35rem; color: var(--green-600); flex: none; }
.vs-points--fill > li > .icon { fill: currentColor; stroke: #fff; stroke-width: 1.4; }
.vs-points-row { position: relative; z-index: 2; width: min(100% - 2 * var(--gutter), var(--vs-w)); margin-inline: auto; padding-block: .75rem .85rem; }
.vs-points--in { grid-template-columns: repeat(4, auto); justify-content: start; gap: .6rem 1.3rem; margin-top: 1rem; }
.vs-points--in li { gap: .5rem; }
.vs-points--in .ib { --s: 2.55rem; }
.vs-points--in strong { font-size: .76rem; font-weight: 600; line-height: 1.2; }

/* ---------- 4. Body layout ---------- */
.vs-body { width: min(100% - 2 * var(--gutter), var(--vs-w)); margin-inline: auto; padding-block: 1.1rem 1.4rem; }
.vs-layout { display: grid; grid-template-columns: minmax(0, 1fr) var(--vs-aside); gap: var(--vs-gap); align-items: start; }
.vs-main > * + * { margin-top: var(--vs-sec-gap, .8rem); }
.vs-main > .vs-disclosure + * { margin-top: 0; }
.vs-h2 { font-size: var(--vs-h2); letter-spacing: -.02em; margin: 0 0 .3rem; }
.vs-sub { margin: 0 0 .65rem; font-size: max(var(--vs-body), 16px) /* rt-1019 */; line-height: 1.38; color: var(--vs-text); }
.vs-overview p { margin: 0; font-size: max(var(--vs-body), 16px) /* rt-1019 */; line-height: 1.38; color: var(--vs-text); }

/* ---------- 5. Key differences ---------- */
.vs-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--vs-card-gap, 1.1rem); }
.vs-kd { background: var(--st); border: 1px solid var(--sb); border-radius: var(--radius); padding: 1rem 1.15rem 1.1rem; }
.vs-kd__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .1rem .9rem; align-items: center; margin-bottom: .85rem; }
.vs-kd__head .tool-mark { --s: 3.6rem; grid-row: span 2; align-self: start; }
.vs-kd__name { margin: 0; font-size: 1.68rem; letter-spacing: -.03em; color: var(--kd-name, var(--ink)); }
.vs-kd__desc { margin: 0; font-size: max(.98rem, 16px) /* rt-1019 */; line-height: 1.32; color: var(--vs-text); }
.vs-kd .vs-list { gap: .2rem; }
.vs-kd .vs-list li { font-size: max(.98rem, 16px) /* rt-1019 */; }
/* centred brand header (thrivecart / semrush / bluehost designs) */
.vs-kd--center .vs-kd__head { display: flex; justify-content: center; gap: .6rem; margin-bottom: .7rem; }
.vs-kd--center .vs-kd__head .tool-mark { --s: 2.6rem; }
.vs-kd--center .vs-kd__name { font-size: 1.75rem; }
.vs-kd__best { margin: 0 0 .7rem; font-size: max(.98rem, 16px) /* rt-1019 */; line-height: 1.32; color: var(--vs-text); }
.vs-kd__best strong { color: var(--ink); }
/* tick / cross lists coloured per side */
.vs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .38rem; }
.vs-list li { position: relative; padding-left: 1.75rem; font-size: max(.95rem, 16px) /* rt-1019 */; line-height: 1.3; color: var(--vs-text); }
.vs-list li::before { content: ""; position: absolute; left: 0; top: .02em; width: 1.15rem; height: 1.15rem; background: var(--tick, var(--sc, var(--green-500))); -webkit-mask: no-repeat center / contain var(--m-tick); mask: no-repeat center / contain var(--m-tick); }
.vs-list li.is-x::before { background: var(--red-500); -webkit-mask-image: var(--m-x); mask-image: var(--m-x); }
.vs-list--dots li::before { border-radius: 50%; -webkit-mask: none; mask: none; background: var(--tick, var(--green-500)) no-repeat center / 70% var(--i-tick); }
.vs-list--dots li.is-x::before { background: var(--red-500) no-repeat center / 62% var(--i-x); }
.vs-list--minus li.is-x::before { background: var(--red-500) no-repeat center / 60% var(--i-minus); }
.vs-page { --m-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --m-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
  --i-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --i-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
  --i-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E"); }

/* ---------- 6. Feature table ---------- */
.vs-table-wrap { border-color: #dfe7f1; border-radius: 6px; }
.vs-table { font-size: max(.96rem, 16px) /* rt-1019 */; }
.vs-table th, .vs-table td { padding: .22rem .9rem; border-bottom: 1px solid #e6ecf3; border-right: 1px solid #e6ecf3; line-height: 1.25; color: #26344c; }
.vs-table th:last-child, .vs-table td:last-child { border-right: 0; }
.vs-table thead th { background: #e7f0fb; color: var(--ink); font-size: 1rem; font-weight: 700; padding-block: .42rem; border-right-color: #fff; }
.vs-table thead th:first-child { text-align: left; }
.vs-table tbody th { font-weight: 500; color: #22314a; white-space: nowrap; }
.vs-table tbody tr:nth-child(even) { background: #fff; }
.vs-table td { width: 34%; }
.vs-table .yes, .vs-table .no { width: 1.2rem; height: 1.2rem; vertical-align: middle; }
.vs-table .yes { background: #20a04b; }
.vs-table .yes .icon, .vs-table .no .icon { width: .8rem; height: .8rem; }
/* unknown yes/no cell: same footprint as the icon, short token until verified */
.vs-tbd { display: inline-block; padding: .05rem .4rem; border: 1px dashed #b7c3d3; border-radius: 99px; background: #f4f7fb; color: var(--muted); font-size: .72rem; font-weight: 600; line-height: 1.3; vertical-align: middle; }
/* navy + brand-coloured heads (thrivecart / semrush / bluehost) */
.vs-table--brand thead th { color: #fff; font-size: 1.02rem; border-right-color: rgba(255, 255, 255, .25); }
.vs-table--brand thead th:first-child { background: var(--navy-900); }
.vs-table--brand thead th.th-a { background: var(--th-a, #c2540a); }
.vs-table--brand thead th.th-b { background: var(--th-b, var(--blue-600)); }
.vs-table--brand tbody th { font-weight: 700; color: var(--ink); }

/* ---------- 7. Pricing cards ---------- */
.vs-price { display: flex; flex-direction: column; background: var(--st); border: 1px solid var(--sb); border-radius: var(--radius); padding: .9rem 1.2rem 1rem; }
.vs-price__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 .9rem; align-items: center; }
.vs-price__head .tool-mark { --s: 3.5rem; grid-row: span 3; align-self: start; margin-top: .2rem; }
.vs-price__name { margin: 0; font-size: 1.22rem; letter-spacing: -.02em; color: var(--kd-name, var(--ink)); }
.vs-price .price { gap: .15rem; }
.vs-price .price strong { font-size: 2.05rem; letter-spacing: -.03em; line-height: 1.05; }
.vs-price .price span { font-family: var(--font-body); font-size: 1.15rem; color: #4a5872; }
.vs-price__note { margin: 0; font-size: max(.86rem, 14px) /* rt-1019 */; color: #4a5872; line-height: 1.25; }
.vs-price .vs-list { margin-top: .5rem; gap: .1rem; }
.vs-price .vs-list li { font-size: max(.9rem, 16px) /* rt-1019 */; }
.vs-price__cta { margin-top: .75rem; }
.vs-price__cta .btn { --btn-bg: var(--sc); --btn-bd: var(--sc); min-height: 2.35rem; font-size: 1rem; }
.vs-price__cta .btn:hover { --btn-bg: var(--sc-dk); --btn-bd: var(--sc-dk); }
.vs-price__fine { margin: .55rem 0 0; font-size: max(.82rem, 14px) /* rt-1019 */; color: #4a5872; text-align: center; }
/* side-by-side list + button (clickfunnels-vs-systeme-io design) */
.vs-price--inline .vs-price__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; align-items: end; }
.vs-price--inline .vs-price__cta .btn { padding-inline: 1.2rem; min-height: 2.3rem; }
.vs-price .vs-price__cta .btn--block { width: 100%; }
/* centred, white card (semrush / bluehost designs) */
.vs-price--center { background: #fff; border-color: #dfe7f1; box-shadow: var(--shadow-xs); padding: 0 0 1rem; overflow: hidden; }
.vs-price--center .vs-price__head { display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .7rem 1rem .6rem; background: linear-gradient(180deg, var(--st), #fff); text-align: center; }
.vs-price--center .vs-price__head .tool-mark { margin: 0; }
.vs-price--center .vs-price__brand { display: inline-flex; align-items: center; gap: .55rem; }
.vs-price--center .vs-price__brand .tool-mark { --s: 2.4rem; }
.vs-price--center .vs-price__name { font-size: 1.6rem; }
.vs-price__from { margin: .3rem 0 0; font-size: .86rem; color: #4a5872; }
.vs-price--center .price { justify-content: center; }
.vs-price--center .price strong { font-size: 1.8rem; color: var(--navy-900); }
.vs-price--center .price span { font-family: var(--font-head); font-weight: 800; font-size: 1.15rem; color: var(--navy-900); }
.vs-price--center .vs-list { padding-inline: 1.5rem; }
.vs-price--center .vs-price__cta { padding-inline: 1.2rem; }
.vs-price--center .vs-price__cta .btn { --btn-bg: var(--green-600); --btn-bd: var(--green-600); }
.vs-price--center .vs-price__cta .btn:hover { --btn-bg: var(--green-700); --btn-bd: var(--green-700); }
/* split brand / price header (bluehost design) */
.vs-price--split .vs-price__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 1.1rem; text-align: left; align-items: center; padding: .8rem 1.2rem .5rem; }
.vs-price--split .price { justify-content: flex-start; }

/* ---------- 8. Pros and cons ---------- */
.vs-pc { background: var(--st); border: 1px solid var(--sb); border-radius: var(--radius); padding: .8rem 1rem .9rem; }
.vs-pc__head { display: flex; align-items: center; gap: .6rem; margin: 0 0 .5rem; font-size: 1.08rem; color: var(--kd-name, var(--ink)); }
.vs-pc__head .tool-mark { --s: 1.75rem; }
.vs-pc__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem 1rem; }
.vs-pc__label { display: flex; align-items: center; gap: .4rem; margin: 0 0 .3rem; font-size: .9rem; font-weight: 700; color: var(--ink); }
.vs-pc__label .ib { --s: 1.35rem; }
.vs-pc .vs-list { gap: .08rem; }
.vs-pc .vs-list li { font-size: max(.76rem, 16px) /* rt-1019 */; padding-left: 1.3rem; line-height: 1.22; }
.vs-pc .vs-list li::before { width: .95rem; height: .95rem; }
.vs-pc--single .vs-list { gap: .02rem; }
.vs-pc--single .vs-list li { font-size: max(.8rem, 16px) /* rt-1019 */; line-height: 1.22; padding-left: 1.3rem; }
.vs-pc--single .vs-list li::before { width: .9rem; height: .9rem; }
/* coloured header bar (thrivecart / semrush / bluehost designs) */
.vs-pc--bar { background: #fff; border-color: #dfe7f1; padding: 0 0 .7rem; overflow: hidden; }
.vs-pc--bar .vs-pc__head { justify-content: center; margin: 0 0 .45rem; padding: .32rem .75rem; background: var(--sc); color: #fff; font-size: 1.12rem; }
.vs-pc--bar .vs-pc__head .tool-mark { --s: 1.5rem; background: #fff; color: var(--sc); }
.vs-pc--bar .vs-pc__cols { padding-inline: .9rem; }
.vs-pc--bar .vs-pc__label { font-size: .84rem; }

/* ---------- 9. Who is each best for + FAQ ---------- */
.vs-who { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.vs-who__card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .4rem 1rem; align-items: center; padding: .85rem 1.1rem 1rem; background: #fff; border: 1px solid #dfe7f1; border-radius: var(--radius); box-shadow: var(--shadow-xs); }
.vs-who__brand { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--font-head); font-weight: 800; font-size: 1.25rem; letter-spacing: -.03em; color: var(--ink); }
.vs-who__brand .tool-mark { --s: 2rem; }
.vs-who__card h3 { margin: 0; font-size: .98rem; line-height: 1.2; color: var(--who-h, var(--navy-900)); }
.vs-who__card p { grid-column: 1 / -1; margin: 0; font-size: max(.95rem, 16px) /* rt-1019 */; line-height: 1.32; color: var(--vs-text); }
.vs-extra { margin-top: 1.4rem; display: grid; gap: 1.2rem; }
.vs-faq .accordion summary { font-size: .95rem; padding: .62rem .95rem; }
.vs-faq .accordion__body { font-size: max(.92rem, 16px) /* rt-1019 */; color: var(--vs-text); }

/* brand left, heading + text right (semrush / bluehost designs) */
.vs-who--side .vs-who__card { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .1rem 1.1rem; }
.vs-who--side .vs-who__brand { grid-row: span 2; align-self: center; }
.vs-who--side .vs-who__card p { grid-column: 2; }

/* ---------- 10. Sidebar ---------- */
.vs-aside { display: grid; grid-template-columns: minmax(0, 1fr); gap: .85rem; }
.vs-aside > * { min-width: 0; }
.vs-disclosure { margin: 0 0 .7rem; padding: .35rem .7rem; font-size: max(.76rem, 14px) /* rt-1019 */; }
.vs-box { background: #fff; border: 1px solid #e1e8f0; border-radius: var(--radius); padding: .85rem 1rem .95rem; box-shadow: var(--shadow-xs); }
.vs-box--green { background: #f1f8f2; border-color: #dcebdf; box-shadow: none; }
.vs-box--tint { background: #f0f6fd; border-color: #dce8f6; box-shadow: none; }
.vs-box__title { display: flex; align-items: center; gap: .55rem; margin: 0 0 .6rem; font-size: 1.12rem; letter-spacing: -.02em; }
@media (min-width: 1201px) { .vs-page .vs-box__title#qc-h { font-size: 1.04rem; letter-spacing: -.03em; white-space: nowrap; } }
.vs-box__title .icon { width: 1.35rem; height: 1.35rem; color: var(--green-600); }
.vs-box .btn--block { margin-top: .8rem; min-height: 2.55rem; font-size: .98rem; font-weight: 700; }
/* quick comparison (stacked rows) */
.vs-qc { margin: 0; display: grid; gap: .95rem; font-size: max(.84rem, 16px) /* rt-1019 */; }
.vs-qc__row { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); gap: .5rem; align-items: start; }
.vs-qc dt { font-weight: 700; color: var(--ink); padding-top: .05rem; }
.vs-qc dd { margin: 0; }
.vs-qc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.vs-qc li { display: grid; grid-template-columns: 4.8rem minmax(0, 1fr); gap: .5rem; align-items: center; color: #3a4860; line-height: 1.25; }
.vs-qc__tool { font-weight: 700; color: var(--ink); font-size: .74rem; }
.vs-qc .rating { font-size: .78rem; gap: .1rem .35rem; }
.vs-qc .stars .icon { width: .85rem; height: .85rem; }
.vs-qc a { color: var(--blue-600); }
/* at-a-glance table (two brand columns) */
.vs-glance { width: 100%; border-collapse: collapse; font-size: max(.8rem, 16px) /* rt-1019 */; table-layout: fixed; }
.vs-glance td, .vs-glance th { overflow-wrap: break-word; }
.vs-glance__label { width: 4.9rem; }
.vs-glance th, .vs-glance td { padding: .45rem .4rem; border-bottom: 1px solid #e6ecf3; text-align: left; vertical-align: top; color: #33415a; line-height: 1.3; }
.vs-glance thead th { padding-block: .2rem .55rem; border-bottom: 1px solid #e6ecf3; }
.vs-glance tbody th { font-weight: 700; color: var(--ink); font-size: .74rem; width: 4.9rem; }
.vs-glance td + td { border-left: 1px solid #e6ecf3; }
.vs-glance tr:last-child > * { border-bottom: 0; }
.vs-glance .rating { font-size: .78rem; gap: .1rem .3rem; }
.vs-glance .stars .icon { width: .8rem; height: .8rem; }
.vs-glance__brand { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-head); font-weight: 800; font-size: 1.12rem; letter-spacing: -.03em; color: var(--sc); white-space: nowrap; }
.vs-glance__brand .tool-mark { --s: 1.7rem; }
.vs-glance__cta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-top: .6rem; padding-left: 5.3rem; }
.vs-glance__cta .btn { min-height: 2.15rem; padding: .3rem .35rem; font-size: .74rem; font-weight: 700; white-space: nowrap; gap: .25rem; }
/* table of contents */
.vs-toc .toc a { padding: .1rem 0; font-size: .88rem; line-height: 1.3; color: #33415a; grid-template-columns: 1.7rem minmax(0, 1fr); }
.vs-toc .toc a::before { color: #33415a; }
.vs-toc .toc a::after { content: none; }
.vs-toc .toc li { border-bottom: 0; }
.vs-toc--arrows .toc a { grid-template-columns: 1.7rem minmax(0, 1fr) auto; color: var(--blue-600); }
.vs-toc--arrows .toc a::before { color: var(--blue-600); }
.vs-toc--arrows .toc a::after { content: ""; width: .95rem; height: .95rem; border: 0; transform: none; background: currentColor; -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E"); mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E"); }
.vs-toc--arrows .toc li { border-bottom: 1px solid #dfe8f3; }
.vs-toc--arrows .toc li:last-child { border-bottom: 0; }
/* recommended tools */
.vs-tools { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.vs-tools li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .65rem; align-items: center; }
.vs-tools .tool-mark { --s: 2.35rem; border-radius: 8px; }
.vs-tools__name { display: block; font-weight: 700; font-size: .84rem; color: var(--ink); line-height: 1.2; }
.vs-tools .rating { font-size: .74rem; gap: .1rem .35rem; font-weight: 500; color: #3a4860; }
.vs-tools .stars .icon { width: .78rem; height: .78rem; }
.vs-tools .btn { min-height: 2.2rem; padding: .3rem .95rem; font-size: .8rem; font-weight: 700; }
.vs-tools__desc { display: block; font-size: .72rem; line-height: 1.22; color: #46546b; }
.vs-tools--wordmarks li { grid-template-columns: 6.3rem minmax(0, 1fr) auto; gap: .5rem; padding-bottom: .45rem; border-bottom: 1px solid #edf1f6; }
.vs-tools--wordmarks .btn { padding-inline: .7rem; }
.vs-tools--wordmarks li:last-child { border-bottom: 0; padding-bottom: 0; }
.vs-tools__wm { display: inline-flex; align-items: center; gap: .3rem; font-family: var(--font-head); font-weight: 800; font-size: .92rem; letter-spacing: -.03em; color: var(--sc); white-space: nowrap; }
.vs-tools__wm .tool-mark { --s: 1.5rem; border-radius: 50%; }
/* recent articles */
.vs-recent { list-style: none; margin: 0; padding: 0; }
.vs-recent li + li { border-top: 1px solid #e8edf3; }
.vs-recent a { display: grid; grid-template-columns: 4.3rem minmax(0, 1fr) auto; gap: .8rem; align-items: center; padding: .16rem 0; color: #33415a; text-decoration: none; font-size: .86rem; line-height: 1.25; }
.vs-recent a:hover { color: var(--blue-600); text-decoration: underline; }
.vs-recent img { width: 4.3rem; height: 2.2rem; object-fit: cover; border-radius: 3px; }
.vs-recent .icon { width: .9rem; height: .9rem; color: #6b778c; }
.vs-recent--num { counter-reset: rec; }
.vs-recent--num li { counter-increment: rec; }
.vs-recent--num li + li { border-top: 0; }
.vs-recent--num a { grid-template-columns: 1.4rem minmax(0, 1fr) auto; gap: .2rem; padding: .22rem 0; color: var(--blue-600); font-size: .9rem; }
.vs-recent--num a::before { content: counter(rec) "."; color: var(--blue-600); }
.vs-recent--num .icon { color: var(--blue-600); }
/* final verdict */
.vs-verdict { background: #eef5fc; border: 1px solid #dbe7f5; border-radius: var(--radius); padding: .9rem 1.1rem 1.05rem; }
.vs-verdict--green { background: linear-gradient(180deg, #edf7ee 0%, #f5fbf5 100%); border-color: #d6ebd9; }
.vs-verdict__head { display: flex; align-items: center; gap: .7rem; margin-bottom: .4rem; }
.vs-verdict__head .icon { width: 2.1rem; height: 2.1rem; color: var(--green-600); flex: none; }
.vs-verdict h2 { margin: 0; font-size: 1.5rem; letter-spacing: -.03em; }
.vs-verdict p { margin: 0 0 .2rem; font-size: max(.8rem, 16px) /* rt-1019 */; line-height: 1.36; color: #3a4860; padding-left: 2.8rem; }
.vs-verdict .btn { margin-top: .8rem; min-height: 2.6rem; font-size: 1rem; font-weight: 700; }

.vs-price__cta .btn.btn--red { --btn-bg: #c9342e; --btn-bd: #c9342e; }
.vs-price__cta .btn.btn--red:hover { --btn-bg: #c9342e; --btn-bd: #c9342e; }
.vs-price--sidebtn .vs-price__cta .btn { --btn-bg: var(--sc); --btn-bd: var(--sc); }
.vs-price--tint { background: var(--st); border-color: var(--sb); }
.vs-price--tint .vs-price__head { background: none; }
.vs-price__fine--em { font-style: italic; }

/* ---------- Desk-photo designs (thrivecart / semrush / bluehost) are drawn at a larger type scale ---------- */
.vs-page--b { --vs-h2: 1.8rem; --vs-body: 1.13rem; --vs-text: #3f4d65; }
.vs-page--b .vs-kd__best, .vs-page--b .vs-kd .vs-list li { font-size: max(1.04rem, 16px) /* rt-1019 */; }
.vs-page--b .vs-kd--center .vs-kd__name { font-size: 2rem; }
.vs-page--b .vs-kd--center .vs-kd__head .tool-mark { --s: 2.9rem; }
.vs-page--b .vs-table { font-size: max(1rem, 16px) /* rt-1019 */; }
.vs-page--b .vs-table th, .vs-page--b .vs-table td { padding-block: .12rem; }
.vs-page--b .vs-table thead th { padding-block: .3rem; }
.vs-page--b .vs-price .vs-list li { font-size: max(1rem, 16px) /* rt-1019 */; }
.vs-page--b .vs-pc .vs-list li { font-size: max(.74rem, 16px) /* rt-1019 */; line-height: 1.2; padding-left: 1.2rem; }
.vs-page--b .vs-pc .vs-list li::before { width: .85rem; height: .85rem; }
.vs-page--b .vs-pc__label { font-size: .8rem; margin-bottom: .15rem; }
.vs-page--b .vs-who__card p { font-size: max(.9rem, 16px) /* rt-1019 */; line-height: 1.3; }
.vs-page--b .vs-who__brand { font-size: 1.3rem; }
.vs-page--b .vs-who__card h3 { font-size: .94rem; }
.vs-page--b .vs-box__title { font-size: 1.3rem; }
.vs-page--b .vs-toc .toc a { font-size: 1rem; }
.vs-page--b .vs-verdict h2 { font-size: 1.75rem; }
.vs-page--b .vs-verdict__head .icon { width: 2.8rem; height: 2.8rem; }
.vs-page--b .vs-verdict p { font-size: max(.95rem, 16px) /* rt-1019 */; padding-left: 0; }
.vs-page--b .vs-recent a { font-size: .92rem; }

.vs-page--b .vs-hero .breadcrumb { margin-bottom: .45rem; }
.vs-page--b .vs-hero .pill { margin-bottom: .3rem; }
.vs-page--b .vs-hero__title { margin-bottom: .15em; }
.vs-page--b .vs-hero__actions { margin-top: .75rem; }
.vs-page--b .vs-points--in { margin-top: .8rem; }

/* ---------- 11. Page tuning (art coordinates come from each generated photo) ---------- */
/* ClickFunnels vs Systeme.io */
.vs-p-cfsio { --vs-hero-bg: linear-gradient(90deg, #fff 0%, #fff 40%, #fbf5ef 62%, #eef6fb 100%); }
.vs-p-cfsio .vs-art__screen { --scr-name: 3.15cqw; --scr-mark: 5cqw; }
.vs-p-cfsio .vs-art__screen--a { left: 16.3%; top: 20.3%; width: 27.8%; height: 42.6%; }
.vs-p-cfsio .vs-art__screen--b { left: 55.7%; top: 20.3%; width: 28%; height: 43%; }
.vs-p-cfsio .vs-art .vs { left: 49.9%; top: 41.5%; }
.vs-p-cfsio .vs-art__ghost.g1 { left: 9%; top: 7%; --ghost: #f39a52; }
.vs-p-cfsio .vs-art__ghost.g2 { left: 26%; top: 3%; --ghost: #f39a52; }
.vs-p-cfsio .vs-art__ghost.g3 { left: 40%; top: 6%; --ghost: #f6a463; }
.vs-p-cfsio .vs-art__ghost.g4 { left: 70%; top: 4%; --ghost: #5aa7e6; }
.vs-p-cfsio .vs-art__ghost.g5 { left: 58%; top: 9%; --ghost: #5aa7e6; }
.vs-p-cfsio .vs-art__ghost.g6 { left: 89%; top: 5%; --ghost: #5aa7e6; }
.vs-p-cfsio .vs-art__ghost.g7 { left: 80%; top: 2%; --ghost: #7cb9ea; }
/* Systeme.io vs ConvertKit */
.vs-p-siock { --vs-hero-bg: linear-gradient(90deg, #fff 0%, #fff 42%, #f3f7fb 100%); }
.vs-p-siock .vs-art__screen { --scr-name: 2.95cqw; --scr-tag: 2cqw; --scr-mark: 4.6cqw; }
.vs-p-siock .vs-art__screen--a { padding-right: 3.5cqw; }
.vs-p-siock .vs-art__screen--b { padding-left: 3.5cqw; }
.vs-p-siock .vs-art__screen--a { left: 19.9%; top: 30.8%; width: 26.1%; height: 38.4%; }
.vs-p-siock .vs-art__screen--b { left: 53.8%; top: 30.8%; width: 26.1%; height: 38%; }
.vs-p-siock .vs-art .vs { left: 49.9%; top: 50%; --vs-size: 10cqw; }
.vs-p-siock .vs-art__chip { width: 8.4cqw; }
.vs-p-siock .vs-art__chip.c1 { left: 7.5%; top: 12%; }
.vs-p-siock .vs-art__chip.c2 { left: 6%; top: 37%; }
.vs-p-siock .vs-art__chip.c3 { left: 7.5%; top: 62%; }
.vs-p-siock .vs-art__chip.c4 { left: 84.5%; top: 8%; }
.vs-p-siock .vs-art__chip.c5 { left: 91%; top: 22%; width: 8.6cqw; }
.vs-p-siock .vs-art__chip.c6 { left: 91%; top: 45%; }
/* ConvertKit vs GetResponse */
.vs-p-ckgr { --vs-hero-bg: linear-gradient(90deg, #fff 0%, #fff 42%, #f4f7fa 100%); }
.vs-p-ckgr .vs-art__screen { --scr-name: 3.1cqw; --scr-tag: 2.1cqw; --scr-mark: 4.8cqw; }
.vs-p-ckgr .vs-art__screen--a { padding-right: 3cqw; }
.vs-p-ckgr .vs-art__screen--b { padding-left: 3cqw; }
.vs-p-ckgr .vs-art__screen--a { left: 12%; top: 32.2%; width: 27.7%; height: 37%; }
.vs-p-ckgr .vs-art__screen--b { left: 51.3%; top: 32.6%; width: 27.8%; height: 36.1%; }
.vs-p-ckgr .vs-art .vs { left: 45.5%; top: 50.5%; --vs-size: 10.5cqw; }
.vs-p-ckgr .vs-art__chip.c1 { left: 17%; top: 7%; transform: rotate(-4deg); }
.vs-p-ckgr .vs-art__chip.c2 { left: 70%; top: 6%; }
/* ThriveCart vs ClickFunnels */
.vs-p-tccf .vs-table { --th-a: var(--green-600); --th-b: var(--blue-600); }
.vs-p-tccf { --vs-copy: 44%; --vs-hero-pad: .7rem 1rem; --vs-ratio: 1920 / 960; --vs-fade: 16%; --vs-h1: 4.05rem; --vs-lead: 1.17rem; --vs-aside: 25rem; --vs-w: 79.7rem; }
.vs-p-tccf .vs-who__card p { font-size: max(.9rem, 16px) /* rt-1019 */; }
.vs-p-tccf .vs-who__brand { font-size: 1.2rem; }
.vs-p-tccf .vs-art__screen--a { left: 14.9%; top: 36.8%; width: 29.4%; height: 36.5%; }
.vs-p-tccf .vs-art__screen--b { left: 56.5%; top: 35.6%; width: 29.7%; height: 39.6%; }
.vs-p-tccf .vs-art .vs { left: 50.4%; top: 52%; --vs-size: 11cqw; }
.vs-p-tccf .vs-art__mug { left: 91.4%; top: 66%; width: 8%; font-size: 1.7cqw; }
/* Semrush vs Ahrefs */
.vs-p-seah { --vs-copy: 47%; --vs-lead-w: 36.5rem; --vs-body: 1rem; --vs-ratio: 1920 / 880; --vs-fade: 20%; --vs-shift: 8%; --vs-h1: 3.85rem; --vs-lead: 1.3rem; --vs-aside: 25.1rem; --vs-w: 79.7rem; }
.vs-p-seah .vs-art__screen { --scr-name-big: 3.9cqw; --scr-mark: 5cqw; }
.vs-p-seah .vs-art__screen--a { left: 20.8%; top: 31.2%; width: 27.4%; height: 41%; }
.vs-p-seah .vs-art__screen--b { left: 52.1%; top: 31.6%; width: 27.6%; height: 40.7%; }
.vs-p-seah .vs-art .vs { left: 50.1%; top: 51%; --vs-size: 9.5cqw; }
.vs-p-seah .vs-art__note { left: 30%; top: 70%; --rot: -9deg; font-size: 2.2cqw; }
.vs-p-seah .vs-art__mug { left: 87.4%; top: 66%; width: 7.6%; font-size: 1.5cqw; }
@media (min-width: 1201px) { .vs-p-seah { --vs-run: 13rem; } .vs-p-bhhg { --vs-run: 6rem; } }
/* Bluehost vs Hostinger */
.vs-p-bhhg .vs-table { --th-a: var(--blue-600); --th-b: var(--purple-500); }
.vs-p-bhhg { --vs-h2: 1.55rem; }
.vs-p-bhhg .vs-kd--center .vs-kd__name { font-size: 1.75rem; }
.vs-p-bhhg .vs-kd .vs-list li, .vs-p-bhhg .vs-price .vs-list li { font-size: max(.9rem, 16px) /* rt-1019 */; }
.vs-p-bhhg .vs-kd .vs-list { gap: .12rem; }
.vs-p-bhhg .vs-table { font-size: max(.86rem, 16px) /* rt-1019 */; }
.vs-p-bhhg .vs-table th, .vs-p-bhhg .vs-table td { padding-block: .08rem; }
.vs-p-bhhg .vs-who__card { padding-block: .6rem .7rem; }
.vs-p-bhhg .vs-who__card p { font-size: max(.84rem, 16px) /* rt-1019 */; }
.vs-p-seah .vs-kd .vs-list li { font-size: max(.98rem, 16px) /* rt-1019 */; }
.vs-p-seah .vs-kd .vs-list { gap: .5rem; }
.vs-p-seah .vs-kd { padding-block: 1.1rem 1.3rem; }
.vs-p-seah .vs-kd--center .vs-kd__name { font-size: 2.2rem; }
.vs-p-seah .vs-table th, .vs-p-seah .vs-table td { padding-block: .36rem; }
.vs-p-seah .vs-table thead th { font-size: 1.15rem; }
.vs-p-seah .vs-price .vs-list { gap: .3rem; }
.vs-p-seah .vs-price .price strong { font-size: 2.1rem; }
.vs-p-seah .vs-pc .vs-list { gap: .2rem; }
.vs-p-seah .vs-pc .vs-list li { font-size: max(.8rem, 16px) /* rt-1019 */; }
.vs-p-seah .vs-who__card { padding-block: 1rem 1.2rem; }
.vs-p-seah .vs-who__brand { font-size: 1.75rem; }
.vs-p-seah .vs-who__card h3 { font-size: 1.1rem; }
.vs-p-seah .vs-who__card p { font-size: 1.08rem; }
.vs-p-seah .vs-glance__brand { font-size: 1.35rem; }
.vs-p-seah .vs-glance th, .vs-p-seah .vs-glance td { padding-block: .6rem; }
.vs-p-seah .vs-tools--wordmarks li { padding-block: .3rem .65rem; }
.vs-p-seah .vs-recent--num a { padding-block: .35rem; }
.vs-p-bhhg { --vs-copy: 47%; --vs-lead-w: 35rem; --vs-body: 1rem; --vs-ratio: 1920 / 960; --vs-fade: 16%; --vs-h1: 3.3rem; --vs-lead: 1.15rem; --vs-art-min: 18rem; --vs-aside: 23.3rem; --vs-w: 81rem; }
.vs-p-bhhg .vs-art__screen { --scr-name-big: 3.7cqw; --scr-mark: 4.6cqw; }
.vs-p-bhhg .vs-art__screen--a { left: 18.2%; top: 36%; width: 28%; height: 33%; }
.vs-p-bhhg .vs-art__screen--b { left: 51.7%; top: 35%; width: 30.9%; height: 36.4%; }
.vs-p-bhhg .vs-art .vs { left: 49%; top: 52%; --vs-size: 10.5cqw; }
.vs-p-bhhg .vs-art__note { left: 22%; top: 70%; --rot: -10deg; }
.vs-p-bhhg .vs-art__mug { left: 89.4%; top: 64%; width: 7.6%; font-size: 1.4cqw; }

/* ---------- 12. Responsive ---------- */
@media (max-width: 1100px) {
  .vs-page { --vs-aside: 19.5rem; }
  .vs-glance__brand { white-space: normal; font-size: .95rem; }
  .vs-glance__brand .tool-mark { display: none; }
  .vs-hero__title { font-size: min(var(--vs-h1, 3.15rem), 3rem); }
  .vs-glance__cta { padding-left: 0; }
  .vs-glance__label { width: 4.2rem; }
  .vs-points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vs-points--in { grid-template-columns: repeat(2, auto); }
}
@media (max-width: 960px) {
  .vs-layout { grid-template-columns: minmax(0, 1fr); }
  .vs-hero__grid { grid-template-columns: minmax(0, 1fr); padding-left: 0; }
  .vs-hero__copy { padding: 1rem var(--gutter) .5rem; }
  .vs-art { width: 100%; min-height: 0; aspect-ratio: var(--vs-ratio, 1920 / 880); }
  .vs-art__inner { width: 100%; height: auto; right: 0; }
  .vs-art picture { -webkit-mask-image: none; mask-image: none; }
  .vs-hero__lead { max-width: 40rem; }
}
@media (max-width: 640px) {
  .vs-page { --vs-h2: 1.32rem; --vs-body: .95rem; }
  .vs-hero__title { font-size: clamp(2rem, 1.2rem + 4vw, 2.6rem); }
  .vs-hero__lead { font-size: max(1rem, 16px) /* rt-1019 */; }
  .vs-cards, .vs-who { grid-template-columns: minmax(0, 1fr); }
  .vs-points, .vs-points--in { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
  .vs-price--inline .vs-price__body { grid-template-columns: minmax(0, 1fr); }
  .vs-price--split .vs-price__head { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .vs-price--split .price { justify-content: center; }
  .vs-price .price { flex-wrap: wrap; }
  .vs-pc__cols { grid-template-columns: minmax(0, 1fr); }
  .vs-table th, .vs-table td { padding: .35rem .55rem; }
  .vs-table tbody th { white-space: normal; }
  .vs-glance__cta { padding-left: 0; }
  .vs-art__note { display: none; }
}

/* Accessibility (Lighthouse, 2026-10-11): orange header/label tones above are the deeper #c2540a so white text
   on them reaches 4.5:1 (was ~2.7:1); TOC links get a 24px tap target */
.vs-toc .toc a { min-height: 24px; }