/* ======================================================================================================================
   The feature, industry and vendor-review pages built from the content briefs (pages/guide.php, pages/review.php).
   They reuse the feature-page blocks in pages.css (hero, picks, criteria, comparison table, reviews, scenarios, FAQ, verdict band)
   and add what the later briefs ask for. Rendered by includes/guide.php and includes/review.php.
   ====================================================================================================================== */

/* ---- quick picks: best-for label, warning card, notes ------------------------------------------------------------ */
.picks-intro { max-width: var(--prose); margin: 0 0 20px; }
.compare-note--above { margin: 0 0 16px; }
.pick-label { margin: 0 0 .4rem; color: var(--accent); font-size: .8125rem; font-weight: 700; letter-spacing: .04em; line-height: 1.45; text-transform: uppercase; }   /* 13px, 5.47:1 */
.pick-card--warning { border-color: var(--warning); border-top: 4px solid var(--warning); background: #fff; }
.pick-card--warning h3 { color: var(--primary); }

/* ---- legal / tax notice block (identical wording wherever it appears) -------------------------------------------------- */
.container--narrow { max-width: calc(var(--prose) + var(--gutter) * 2); }
.notice-section { padding-block: 0 8px; }
.notice-block {
  margin: 24px 0 32px;
  padding: 20px;
  border: 1px solid #E4C877;
  border-radius: var(--radius-sm);
  background: #FDF6DC;      /* [LEGAL WARNING BG] */
  color: var(--primary);
  font-size: .875rem;       /* 14px */
  line-height: 1.6;
}
.notice-block p { margin: 0 0 .75rem; font-size: .875rem; line-height: 1.6; }
.notice-block > :last-child { margin-bottom: 0; }
.notice-block__title { font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.faq-body .notice-block { margin: 16px 0 0; }

/* ---- body copy pieces: lead-in labels, pulled-out client quotes, callout boxes --------------------------------------------------- */
.body-label { margin: 1.5rem 0 .5rem; color: var(--primary); }
.prose .pullout, .table-more .pullout, .review .pullout { margin: 1.75rem 0; padding: 20px; border-left: 3px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: #fff; }
.pullout blockquote { margin: 0; }
.pullout blockquote p { margin: 0; color: var(--primary); font-size: 1.125rem; font-style: italic; line-height: 1.6; }   /* 18px */
.pullout figcaption { margin-top: .75rem; color: var(--muted); font-size: .8125rem; }
.prose .pullout, .why-grid .pullout { margin: 1.75rem 0; padding: 20px; border-left: 3px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: #fff; }

/* "Why" sections with a client quote: copy on the left, the quote in a right column on wide screens, above the last paragraph on a phone */
.why-grid { display: grid; grid-template-columns: minmax(0, 1fr); max-width: var(--prose); margin-inline: auto; }
.why-grid > * { grid-column: 1; min-width: 0; }
.why-grid .section__head { margin-bottom: 28px; }
.why-grid p { margin-top: 0; }
@media (min-width: 1000px) {
  .why-grid { max-width: none; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 56px; }
  .why-grid > .pullout { grid-column: 2; grid-row: 1 / span var(--why-rows, 6); align-self: start; margin: 8px 0 0; position: sticky; top: calc(var(--header-h) + 24px); }
}
.table-more { margin-top: 28px; max-width: 900px; }
.callout-box { margin: 1.5rem 0; padding: 20px; border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); background: #fff; }
.callout-box > :last-child { margin-bottom: 0; }
.callout-box__title { margin: 0 0 .5rem; color: var(--primary); font-weight: 700; }
.callout-quote { margin: 1.5rem 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--accent); color: var(--primary); font-style: italic; }

/* ---- comparison tables that read as words (no icon; the warning colour marks the findings) -------------------------------------- */
.compare-table--words { min-width: 760px; }
.compare-table .cell-warn { color: #92400E; font-weight: 600; }   /* 6.4:1 on white */

/* ---- how we chose (text + illustration) ------------------------------------------------------------------------------------- */
.method { display: grid; gap: 28px 48px; align-items: center; }
.method__art img { width: 100%; height: auto; max-width: 360px; }
@media (min-width: 800px) { .method { grid-template-columns: minmax(0, 1fr) 360px; } }

/* ---- verdict band extras ------------------------------------------------------------------------------------------------------ */
.verdict-band .verdict .verdict__note { margin-top: 1rem; font-size: .9375rem; }
.verdict-band .verdict .verdict__rating { margin-top: 1.25rem; color: #fff; font-size: 1.5rem; font-weight: 700; }   /* 24px */
.verdict-band .verdict .verdict__micro { margin-top: 1rem; font-size: .6875rem; font-style: italic; }               /* 11px */
.verdict-band .verdict .verdict__secondary { margin-top: 1rem; font-size: 1rem; }

/* ======================== vendor reviews ======================================================================================= */
.rv-narrow { max-width: 820px; margin-inline: auto; }
.rv-wide { max-width: 1000px; margin-inline: auto; }
.rv-wide h3 { margin: 2rem 0 .75rem; font-size: 1.25rem; }
.rv-wide .compare-scroll, .rv-narrow .compare-scroll { margin: 0 0 32px; }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head--center h2::before { margin-inline: auto; }

.review-hero { padding: 72px 0 56px; }
.review-hero__grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 48px; align-items: start; }
.review-hero h1 { margin: 0 0 1rem; font-size: 2.75rem; line-height: 1.2; letter-spacing: -.03em; }   /* 44px */
.review-hero__media { margin-top: 1.5rem; }
.review-hero__media img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 20px; box-shadow: var(--shadow-md); }
.verdict-box { padding: 28px; border: 1px solid var(--border); border-top: 4px solid var(--accent); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-md); }
.verdict-box p { margin: 0 0 1rem; }
.verdict-box__rating { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: .5rem !important; }
.verdict-box__score { color: var(--primary); font-size: 3rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.verdict-box__rating--none .verdict-box__score { font-size: 1.75rem; }
.verdict-box__of { color: var(--muted); font-size: 1.25rem; font-weight: 600; }
.stars { display: block; width: 100px; height: 20px; flex: none; }
.verdict-box__caveat { color: var(--muted); font-size: .875rem; line-height: 1.55; }
.verdict-box__line { color: var(--primary); font-size: 1.125rem; font-weight: 700; line-height: 1.4; }
.verdict-box__tldr { font-size: 1rem; line-height: 1.65; }
.verdict-box__tags { margin: 0 0 1.25rem; }
.verdict-box__tags > div { margin: 0 0 .75rem; padding-top: .75rem; border-top: 1px solid var(--border); }
.verdict-box__tags dt { color: var(--accent); font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.verdict-box__tags dd { margin: .15rem 0 0; font-size: .9375rem; line-height: 1.55; }
.verdict-box__cta .btn { width: 100%; justify-content: center; }
.verdict-box .verdict-box__micro { margin: .85rem 0 0; color: var(--muted); font-size: .75rem; font-style: italic; line-height: 1.5; }
@media (max-width: 899px) {
  .review-hero { padding: 48px 0 36px; }
  .review-hero__grid { grid-template-columns: 1fr; gap: 28px; }
  .review-hero h1 { font-size: 2rem; }
  .verdict-box { order: 1; }
  .review-hero__media { display: none; }       /* the box comes straight after the title block; the picture only fills space on wide screens */
}

.glance-table { width: 100%; border-collapse: collapse; margin: 0 0 16px; background: #fff; border: 1px solid var(--border); }
.glance-table th, .glance-table td { padding: 14px 18px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.glance-table tr:last-child > * { border-bottom: 0; }
.glance-table th { width: 30%; min-width: 170px; color: var(--primary); font-size: .875rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.glance-table th span { display: inline-block; vertical-align: middle; max-width: calc(100% - 42px); }
.glance-table__icon { width: 28px; height: 28px; margin-right: 10px; vertical-align: middle; }
.glance-table td { font-size: 1rem; line-height: 1.6; }
@media (max-width: 640px) {
  .glance-table, .glance-table tbody, .glance-table tr, .glance-table th, .glance-table td { display: block; width: 100%; }
  .glance-table th { border-bottom: 0; padding-bottom: 0; }
}

.compare-scroll--narrow { box-shadow: none; }
.vtable { min-width: 520px; }
.vtable th, .vtable td { font-size: .9375rem; }
.vtable__thumb { display: block; width: 80px; height: 60px; margin-bottom: 8px; object-fit: contain; }
.vtable th:first-child, .vtable thead th:first-child { position: static; box-shadow: none; }
.calc-box { margin: 1.75rem 0; padding: 24px; border: 1px solid var(--tint-2); border-left: 4px solid var(--accent); border-radius: var(--radius-sm); background: var(--tint); }
.calc-box p { margin: 0 0 .5rem; }
.calc-box > :last-child { margin-bottom: 0; }
.calc-box__title { color: var(--primary); font-size: 1.125rem; font-weight: 700; }
.score-line { color: var(--primary); font-size: .875rem; }

.rv-features { display: grid; gap: 32px 48px; align-items: start; }
.rv-features__body { max-width: 760px; }
.rv-feature { margin: 0 0 40px; scroll-margin-top: calc(var(--header-h) + 24px); }
.rv-feature__media img { width: 100%; max-width: 480px; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; }
.rv-feature h3 { margin: 1rem 0 .5rem; font-size: 1.375rem; }   /* 22px */
@media (min-width: 900px) { .rv-features { grid-template-columns: 30% minmax(0, 1fr); } }

.hw-row { display: flex; flex-wrap: wrap; gap: 16px; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.hw-row li { flex: 1 1 200px; max-width: 260px; }
.hw-row img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; }
.note-box { margin: 1.5rem 0; padding: 18px 20px; border: 1px solid var(--border); border-left: 4px solid var(--warning); border-radius: var(--radius-sm); background: #fff; }
.note-box p { margin: 0; }

.rv-support { display: grid; gap: 28px 48px; align-items: center; max-width: 1000px; margin-inline: auto; }
.rv-support__art img { width: 100%; max-width: 360px; height: auto; }
@media (min-width: 800px) { .rv-support { grid-template-columns: minmax(0, 1fr) 360px; } }

.rv-proscons { display: grid; gap: 24px; max-width: 1000px; margin-inline: auto; }
@media (min-width: 800px) { .rv-proscons { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rv-proscons__col { padding: 24px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
.rv-proscons__col h3 { margin: 0 0 1rem; font-size: 1.375rem; letter-spacing: .05em; text-transform: uppercase; }   /* 22px */
.rv-proscons__col--pros h3 { color: #047857; }
.rv-proscons__col--cons h3 { color: #92400E; }
.rvpro-list, .rvcon-list { margin: 0; padding: 0; list-style: none; }
.rvpro-list li, .rvcon-list li { position: relative; margin: 0 0 1rem; padding-left: 30px; font-size: .9375rem; line-height: 1.6; }
.rvpro-list li::before, .rvcon-list li::before { content: ""; position: absolute; left: 0; top: .15em; width: 20px; height: 20px; background: center / 20px no-repeat; }
.rvpro-list li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23059669' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l3 3 5-6'/%3E%3C/svg%3E"); }
.rvcon-list li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D97706' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12h8'/%3E%3C/svg%3E"); }
.rvpro-list li:last-child, .rvcon-list li:last-child { margin-bottom: 0; }
.rv-closing { margin-top: 1.75rem; color: var(--primary); font-weight: 600; }

.rating-grid { display: grid; gap: 20px; margin: 0 0 28px; padding: 0; list-style: none; }
@media (min-width: 720px) { .rating-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
.rating-card { padding: 22px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); }
.rating-card p { margin: 0 0 .5rem; }
.rating-card__src { color: var(--primary); font-size: .875rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.rating-card__score { color: var(--primary); font-size: 1.75rem; font-weight: 800; line-height: 1.1; }
.rating-card .stars { margin: .25rem 0 .75rem; }
.rating-card__count { font-weight: 600; }
.rating-card__scope { font-size: .875rem; line-height: 1.55; }
.rating-card .rating-card__checked { margin-bottom: 0; color: var(--muted); font-size: .8125rem; }
.theme-list { margin: 0 0 1.5rem; padding: 0; list-style: none; }
.theme-list li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; margin: 0 0 1rem; align-items: start; }
.theme-list__icon { width: 40px; height: 40px; }

.alt-consider { margin: 0 0 .75rem; font-size: .9375rem; line-height: 1.6; }
.alt-grid .pick-price { color: var(--accent); font-size: .875rem; }
.alt-outro { margin-top: 1.5rem; }
.related-links { display: flex; flex-wrap: wrap; gap: 10px 20px; margin: .5rem 0 0; padding: 0; list-style: none; font-weight: 600; }

/* ======================================================================================================================
   Layout pass: tables that fit the page, two or three cards per row, one rhythm between sections
   ====================================================================================================================== */

/* ---- comparison tables: no sideways scrolling. The table fills the content width; a table with five or more columns turns into
        one labelled card per row on tablets and phones (each cell shows its column name). ------------------------------------------ */
.compare-scroll { overflow: hidden; }
.compare-table { min-width: 0; table-layout: auto; font-size: .875rem; line-height: 1.45; }
.compare-table th, .compare-table td { padding: 10px 12px; overflow-wrap: break-word; }
.compare-table .status--none .status__text { white-space: normal; }   /* the older rule kept every "Not stated ..." on one line, however long */
.compare-table .nw, .compare-table .status__text.nw { white-space: nowrap; }      /* a cell with a few characters (a score, a count, a date, "Not stated") stays on one line */
.compare-table thead th { font-size: .75rem; letter-spacing: .03em; }
.compare-table th:first-child, .compare-table thead th:first-child { position: static; min-width: 0; width: 13%; box-shadow: none; }
.compare-table--words, .vtable { min-width: 0; }
.compare-table .status { gap: 6px; }
.compare-table .status__icon { width: 18px; height: 18px; }
.compare-table .compare-badge { white-space: normal; }
.vtable th:first-child, .vtable thead th:first-child { width: 28%; }

@media (max-width: 1100px) {
  .compare-scroll--stack { border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
  .compare-table--stack, .compare-table--stack tbody, .compare-table--stack tr, .compare-table--stack th, .compare-table--stack td { display: block; width: 100%; }
  .compare-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .compare-table--stack tbody tr { margin: 0 0 16px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: #fff; box-shadow: var(--shadow-sm); }
  .compare-table--stack tbody tr > td { background: transparent !important; }
  .compare-table--stack tbody tr.is-top > td { background: #ECF4F3 !important; }
  .compare-table--stack tbody tr.is-top { border-color: var(--accent); }
  .compare-table--stack tbody th, .compare-table--stack tbody th:first-child { width: 100%; min-width: 0; padding: 12px 16px; background: var(--primary) !important; color: #fff; font-size: 1rem; }
  .compare-table--stack tbody tr.is-top > th { background: var(--accent) !important; }
  .compare-table--stack tbody th .compare-badge { margin: 6px 0 0; background: #fff; color: var(--primary); }
  .compare-table--stack td { display: grid; grid-template-columns: minmax(100px, 34%) minmax(0, 1fr); gap: 4px 16px; padding: 10px 16px; border-bottom: 1px solid var(--border); }
  .compare-table--stack td:last-child { border-bottom: 0; }
  .compare-table--stack .nw { white-space: normal; }
  .compare-table--stack td::before { content: attr(data-label); color: var(--muted); font-size: .75rem; font-weight: 700; letter-spacing: .04em; line-height: 1.5; text-transform: uppercase; }
}
@media (max-width: 480px) {
  .compare-table--stack td { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* long source addresses in a price line must wrap inside their card instead of widening the page */
.pick-card .card__body, .review, .scenario { min-width: 0; overflow-wrap: anywhere; }

/* ---- mini-reviews: two cards per row; a last card without a partner spans the row ------------------------------------------------------ */
.reviews { max-width: none; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.review { display: flex; flex-direction: column; padding: 24px; }
.review__head { display: block; margin-bottom: 0; }
.review__media { margin-bottom: 18px; }
.review__media img { aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 72%; }
.review .review__lead > :last-child { margin-bottom: 1rem; }
.review h3 { font-size: 1.3125rem; margin-bottom: .75rem; }
.review__body { display: flex; flex-direction: column; flex: 1; }
.review__body > p:last-of-type { margin-bottom: 0; }
.review .proscons { margin: 1.25rem 0; padding: 16px 0; gap: 20px; }
.review__price { margin: 0 0 1rem; }
.review__cta { margin-top: auto; }
@media (min-width: 900px) {
  .reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: stretch; }
  .review .proscons { margin-top: auto; }
  .review__body > .proscons ~ * { flex: none; }
  .reviews > .review:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .reviews > .review:last-child:nth-child(odd) .review__head { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 28px; align-items: start; margin-bottom: 1rem; }
  .reviews > .review:last-child:nth-child(odd) .review__media { margin-bottom: 0; }
}
@media (max-width: 899px) {
  .review__media { max-width: none; }
  .review .proscons { grid-template-columns: 1fr; }
}

/* ---- scenarios: three cards per row ---------------------------------------------------------------------------------------------------- */
.scenarios { max-width: none; }
.scenario__media img { aspect-ratio: 16 / 9; object-position: 50% 72%; }
@media (min-width: 900px) {
  .scenarios { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
  .scenario { grid-template-columns: minmax(0, 1fr); align-content: start; padding: 22px; }
}

/* ---- vendor reviews: feature subsections two per row (beside the sticky sub-navigation on wide screens) ------------------------------------- */
@media (min-width: 1100px) {
  .rv-features { grid-template-columns: 240px minmax(0, 1fr); gap: 32px 48px; }
  .rv-features__body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 36px; max-width: none; }
  .rv-features__intro, .rv-feature--wide { grid-column: 1 / -1; }
  .rv-feature { margin: 0; }
  .rv-feature__media img { max-width: none; }
  .rv-feature--wide .rv-feature__media img { max-width: 480px; }
}
.rv-feature p:last-child { margin-bottom: 0; }

/* ---- one rhythm: every section has the same space above and below, and two white sections in a row are divided by a rule ---------------------- */
.page-feature .section, .page-feature .section--tight { padding-block: 72px; }
.page-feature .feat-hero, .page-feature .review-hero { padding-block: 72px; }
.page-feature .verdict-band { padding-block: 72px; }
.page-feature .section__head { margin-bottom: 32px; }
.page-feature .section__head + * { margin-top: 0; }
.page-feature .section:not(.section--alt) + .section:not(.section--alt) { border-top: 1px solid var(--border); }
.page-feature .notice-section { padding-block: 0 72px; margin-top: -24px; }
.page-feature .notice-section .notice-block { margin: 0; }
@media (max-width: 720px) {
  .page-feature .section, .page-feature .section--tight { padding-block: 48px; }
  .page-feature .feat-hero, .page-feature .review-hero { padding-block: 48px; }
  .page-feature .verdict-band { padding-block: 48px; }
  .page-feature .section__head { margin-bottom: 24px; }
  .page-feature .notice-section { padding-block: 0 48px; margin-top: -16px; }
}


/* ======================================================================================================================
   Full width: the site uses the whole screen (fluid side gutters, see --gutter in base.css). Reading text keeps a comfortable
   line length; cards, tables and grids use the space.
   ====================================================================================================================== */
.container--wide { max-width: calc(var(--maxw) + var(--gutter) * 2); }

/* heroes: the copy column keeps a readable measure while the picture takes the rest */
.feat-hero__copy { max-width: 880px; }
.review-hero__copy { max-width: 960px; }
/* two columns only from 900px up: below that pages.css and the review-hero rule above stack the hero in one column
   (an unconditional rule here would beat them, squeeze the title to a sliver and push the verdict box off the screen) */
@media (min-width: 900px) {
  .feat-hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 96px); }
  /* the verdict column is ~42% of the width (never under 320px or over 640px), so the title keeps the rest instead of what a fixed 640px leaves it */
  .review-hero__grid { grid-template-columns: minmax(0, 1fr) clamp(320px, 42%, 640px); gap: clamp(40px, 5vw, 96px); }
}
.feat-hero__media img, .review-hero__media img { max-height: 560px; }
.verdict-box { max-width: 640px; }

/* "why" sections: copy column and quote column centred in the wide page */
@media (min-width: 1000px) {
  .why-grid { grid-template-columns: minmax(0, 880px) 340px; justify-content: center; column-gap: clamp(40px, 5vw, 96px); }
}

/* FAQ: the accordion takes the width, the picture stays a side column */
@media (min-width: 1000px) {
  .faq-layout { grid-template-columns: minmax(0, 1fr) minmax(260px, 420px); gap: clamp(40px, 5vw, 96px); }
  .faq-col, .page-feature .faq-col { max-width: none; }
}
.faq-body { max-width: 100ch; }

/* criteria: two columns of criteria beside the sticky list on big screens */
@media (min-width: 1500px) {
  .criteria__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 56px; }
}

/* picks, mini-reviews and scenarios: more cards per row as the screen grows */
@media (min-width: 1500px) {
  .reviews { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .reviews > .review:last-child:nth-child(odd) { grid-column: auto; }
  .reviews > .review:last-child:nth-child(odd) .review__head { display: block; margin-bottom: 0; }
  .reviews > .review:last-child:nth-child(odd) .review__media { margin-bottom: 18px; }
}
.picks-intro { max-width: 1000px; }

/* vendor review sections: wider reading blocks, tables and grids use the width */
.rv-narrow, .rv-wide, .rv-support, .rv-proscons { max-width: none; margin-inline: 0; }      /* every block starts at the same left edge as its heading */
.rv-narrow p, .rv-wide > p, .rv-support__text p, .rv-closing { max-width: 1100px; }   /* reading text keeps a comfortable line length; tables and cards use the width */
@media (min-width: 1500px) {
  .rv-features { grid-template-columns: 260px minmax(0, 1fr); }
  .rv-features__body { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rv-feature--wide { grid-column: auto; }
  .rv-features__intro { grid-column: 1 / -1; }
}

/* hub pages: a big screen shows more cards per row */
.hub-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }

/* very wide screens: tile rows use the width instead of growing huge pictures */
@media (min-width: 1500px) {
  .photo-grid--3 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .photo-grid--4 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pick-card .card__media { aspect-ratio: 16 / 10; }
}

/* "why" sections without a quote: picture on the left, copy on the right on wide screens */
.why-split { max-width: var(--prose); margin-inline: auto; }
.why-split__fig .section-fig--wide { margin: 0 0 1.5rem; }
.why-split__text p:last-child { margin-bottom: 0; }
@media (min-width: 1000px) {
  .why-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 0 clamp(40px, 5vw, 96px); max-width: none; margin-inline: 0; align-items: start; }
  .why-split .section__head { grid-column: 1 / -1; }
  .why-split__fig .section-fig--wide { margin: 0; }
  .why-split__text { max-width: 820px; }
}


/* ======================================================================================================================
   Text pages (legal and foundational: About, Contact, How We Review, Editorial Policy, Affiliate Disclosure, Corrections Log,
   Advertise / Partner With Us, Privacy, Terms, Cookies, Do Not Sell, DMCA, Accessibility).
   One rail for the whole page: the hero, the reading column and the card rows start at the same left edge, the
   "On this page" list sits at the right edge of the rail, and wide card rows use the full rail.
   ====================================================================================================================== */
.page-doc .container { max-width: calc(1280px + var(--gutter) * 2); }

/* hero: the title block starts at the left edge of the rail (it was centred) */
.page-doc .page-hero__inner, .page-doc .page-hero--media .page-hero__inner { margin-inline: 0; }
.page-doc .page-hero__banner { margin: 32px 0 0; }

/* reading column and sections start at the left edge, like the hero */
.page-doc .doc-main, .page-doc .prose { margin-inline: 0; }
.page-doc .doc-layout:not(.has-toc) .wide { margin-left: 0; }            /* card rows span the rail, starting at its left edge */

/* "On this page": the reading column on the left, the list at the right edge of the rail (aligned with the hero picture) */
@media (min-width: 1024px) {
  .page-doc .doc-layout.toc-bp-1024 { grid-template-columns: minmax(0, var(--prose)) minmax(56px, 1fr) minmax(190px, 264px); column-gap: 0; }
  .page-doc .doc-layout.toc-bp-1024 > .toc-desktop { grid-column: 3; }
}
@media (min-width: 1100px) {
  .page-doc .doc-layout.toc-bp-1100 { grid-template-columns: minmax(0, var(--prose)) minmax(56px, 1fr) minmax(190px, 264px); column-gap: 0; }
  .page-doc .doc-layout.toc-bp-1100 > .toc-desktop { grid-column: 3; }
}

/* the section picture sits at the right edge of the reading column, as before */
.page-doc .section-head { max-width: var(--prose); }

/* dark call-to-action bands and other bands: their text starts at the rail's left edge too */
.page-doc .band .prose, .page-doc .band-split { margin-inline: 0; }

/* legal pages: the header banner sits beside the title block on wide screens instead of under it */
@media (min-width: 900px) {
  .page-doc .page-hero:has(.page-hero__banner) > .container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 700px); gap: clamp(32px, 5vw, 96px); align-items: center; }
  .page-doc .page-hero:has(.page-hero__banner) .page-hero__banner { margin: 0; max-width: none; }
}