/**
 * Reviews & Recommendations page — built from the client's design.
 *
 * Scoped under .sc-rev with its own small foundation, the same way
 * front-page.css and page-buyers-guide.css work: base.css is scoped to .sc-page
 * and its heading sizes and pill buttons do not match this design.
 *
 * Sizes were measured against the design's 1440 frame.
 *
 * Layout note: unlike the header and footer, the table is NOT inside the
 * 1240/32 shell. In the design it runs the full 1240px edge to edge (103px of
 * white either side at 1440), which is why .sc-rev__shell has no gutter until
 * the viewport is narrower than the table.
 */

/* ------------------------------------------------------------- foundation */
.sc-rev {
	font-family: var(--sc-font-body);
	font-size: var(--sc-fs-base);
	line-height: var(--sc-lh-normal);
	color: var(--sc-text-body);
	background: var(--sc-surface);
	-webkit-font-smoothing: antialiased;
}

.sc-rev *,
.sc-rev *::before,
.sc-rev *::after {
	box-sizing: border-box;
}

/* :where() contributes no specificity, so the component classes below still
   win by source order. Writing this as a plain ".sc-rev h1" would silently
   flatten every heading margin set further down — that trap already cost a
   round on the blog listing. */
.sc-rev :where(h1, h2, h3) {
	margin: 0;
	font-family: var(--sc-font-heading);
	font-weight: var(--sc-fw-bold);
	line-height: var(--sc-lh-heading);
	color: var(--sc-navy-deep);
}

/*
 * Same :where() treatment as the headings, and for the same reason. Written
 * plainly, ".sc-rev p { margin: 0 }" scores (0,1,1) and beat
 * ".sc-rev__lead { margin-inline: auto }" at (0,1,0) — the margin shorthand
 * includes margin-inline, so the centred intro silently snapped to the left
 * edge of the hero. Caught by reading the computed margin-left, not the CSS.
 */
.sc-rev :where(p) {
	margin: 0;
}

/* These two stay at full specificity on purpose: nothing below needs to
   override them, and they have to outrank the parent theme's own list and
   link rules. */
.sc-rev ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sc-rev a {
	text-decoration: none;
}

.sc-rev :focus-visible {
	outline: 2px solid var(--sc-focus);
	outline-offset: 3px;
	border-radius: var(--sc-radius-sm);
}

/* The BuddyBoss page wrappers constrain and pad their content — css/wordpress.css
   also caps "body .site" at 1040px, which would squeeze this table 200px
   narrower than the header and footer. Lifted the same way the homepage, blog,
   guide and legal templates lift it. Class comes from inc/reviews.php. */
.sc-reviews-page #main-wrap,
.sc-reviews-page #inner-wrap,
.sc-reviews-page #page,
.sc-reviews-page #main {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
}

/* ------------------------------------------------------------------- hero */
.sc-rev__hero {
	background: var(--sc-surface-cream);
}

.sc-rev__hero-inner {
	padding-block: 100px 92px;
	text-align: center;
}

.sc-rev__eyebrow {
	margin-bottom: 14px;
	color: var(--sc-orange);
	font-size: var(--sc-fs-eyebrow);
	font-weight: var(--sc-fw-semibold);
	letter-spacing: var(--sc-track-eyebrow);
	text-transform: uppercase;
}

.sc-rev .sc-rev__title {
	margin-bottom: 22px;
	/* Black, not the navy the other headings use — asked for by the client
	   on 2026-07-28. Needs (0,2,0) to outrank the :where() heading reset. */
	color: var(--sc-text-black);
	font-size: 58px;
	letter-spacing: -0.01em;
}

.sc-rev__lead {
	max-width: 750px;
	margin-inline: auto;
	/* Black to match the headline, per the client. */
	color: var(--sc-text-black);
	font-size: 18px;
	/* Lighter than the surrounding body copy, per the client (2026-07-28).
	   Inter 300 is requested in inc/enqueue.php — without it the browser would
	   synthesise this from 400 and nothing would change. */
	font-weight: 300;
	line-height: 1.55;
}

/* ------------------------------------------------------------ table shell */
/*
 * No horizontal padding at full size: the card itself is the 1240px measure.
 * The gutter only appears once the viewport can no longer hold it.
 */
.sc-rev__shell {
	width: 100%;
	max-width: var(--sc-container);
	margin-inline: auto;
}

.sc-rev__scroll {
	margin-top: 30px;
	overflow-x: auto;
	background: var(--sc-surface);
	border: 1px solid var(--sc-border);
	border-radius: 14px;
	box-shadow: var(--sc-shadow-sm);
	/* Rounded corners must clip the header row's background fill. */
	-webkit-overflow-scrolling: touch;
}

.sc-rev__table {
	width: 100%;
	/* Fixed layout is what makes the column percentages below authoritative;
	   with auto layout the browser would re-measure from the content and the
	   columns would move as soon as a product name got longer. */
	table-layout: fixed;
	border-collapse: collapse;
	border-spacing: 0;
	margin: 0;
}

/* ----------------------------------------------------------- column widths */
/* Measured from the design's 1440 frame: 260 / 211 / 298 / 174 / 124 / 174
   inside a 1240px card. */
.sc-rev__th--product  { width: 21%; }
.sc-rev__th--score    { width: 17%; }
.sc-rev__th--features { width: 24%; }
.sc-rev__th--price    { width: 14%; }
.sc-rev__th--setup    { width: 10%; }
.sc-rev__th--visit    { width: 14%; }

/* ------------------------------------------------------------ header row */
.sc-rev__th {
	padding: 18px 20px 18px 0;
	background: var(--sc-table-head);
	/* Black column labels, asked for by the client on 2026-07-28. The design
	   has them muted grey-blue. */
	color: var(--sc-text-black);
	font-family: var(--sc-font-body);
	font-size: 12px;
	font-weight: var(--sc-fw-semibold);
	letter-spacing: 0.06em;
	line-height: 1.2;
	text-align: left;
	text-transform: uppercase;
	white-space: nowrap;
}

.sc-rev__th--product { padding-left: 24px; }

.sc-rev__th--visit {
	padding-right: 24px;
	text-align: center;
}

/* ------------------------------------------------------------------- rows */
.sc-rev__row + .sc-rev__row .sc-rev__cell {
	border-top: 1px solid var(--sc-border);
}

.sc-rev__row:hover {
	background: var(--sc-surface-blue);
}

.sc-rev__cell {
	padding: 22px 20px 22px 0;
	vertical-align: top;
}

.sc-rev__cell--product { padding-left: 24px; }

.sc-rev__cell--visit {
	padding-right: 24px;
	/* The button is centred against the whole row height in the design, not
	   pinned to the top like the other columns. */
	vertical-align: middle;
	text-align: center;
}

/* --------------------------------------------------------------- product */
.sc-rev__product {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.sc-rev__thumb {
	flex: 0 0 auto;
	display: block;
	width: 50px;
	height: 50px;
	overflow: hidden;
	border-radius: 10px;
	background: var(--sc-surface-soft);
}

.sc-rev__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Shown when a system has no logo yet, so the column never collapses. */
.sc-rev__initial {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: var(--sc-navy-tint);
	color: var(--sc-navy);
	font-family: var(--sc-font-heading);
	font-size: 22px;
	font-weight: var(--sc-fw-bold);
	line-height: 1;
}

.sc-rev__id {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding-top: 2px;
}

.sc-rev__name {
	/* Black rather than the brand navy, per the client (2026-07-28). */
	color: var(--sc-text-black);
	font-size: 16px;
	font-weight: var(--sc-fw-semibold);
	line-height: 1.35;
	/*
	 * The design breaks longer names over two lines ("Medical / Guardian")
	 * while "MobileHelp" and "Philips Lifeline" stay on one. That only happens
	 * at this measure — without it the 21% column is wide enough that nothing
	 * ever wraps. Released again on the stacked layout below.
	 *
	 * It is on the NAME, not on the block around it: the award pill shares that
	 * block, and the longest label from the brief ("Best Established Brand")
	 * needs 152px, so constraining the block hung the pill 44px into the
	 * Expert Score column.
	 */
	max-width: 120px;
}

.sc-rev__award {
	display: inline-block;
	padding: 4px 9px;
	border-radius: 6px;
	background: var(--sc-amber-bg);
	color: var(--sc-amber-text);
	font-size: 12px;
	font-weight: var(--sc-fw-semibold);
	line-height: 1.2;
	/* Wraps rather than overflows. The brief labels every system, and the
	   longest labels only just fit the product column. */
	overflow-wrap: break-word;
}

/* ---------------------------------------------------------- expert score */
.sc-rev__score {
	display: flex;
	align-items: baseline;
	gap: 5px;
	margin-bottom: 7px;
}

.sc-rev__score-num {
	color: var(--sc-navy-deep);
	font-family: var(--sc-font-heading);
	font-size: 26px;
	font-weight: var(--sc-fw-bold);
	line-height: 1;
}

.sc-rev__score-max {
	color: var(--sc-text-muted);
	font-size: 15px;
	line-height: 1;
}

.sc-rev__meter {
	display: flex;
	gap: 3px;
}

.sc-rev__pip {
	display: block;
	width: 11px;
	height: 6px;
	border-radius: 2px;
	background: var(--sc-pip-off);
}

.sc-rev__pip.is-on {
	background: var(--sc-pip-on);
}

.sc-rev__sources {
	/* Narrower than its column on purpose — the design wraps this list at about
	   this measure ("NCOA, SafeWise, / SeniorLiving.org, Buyer's / Guide"), not
	   at the full 211px column. Released on the stacked layout below. */
	max-width: 156px;
	margin-top: 8px;
	color: var(--sc-text-muted);
	font-size: 11.5px;
	line-height: 1.5;
}

/* ---------------------------------------------------------- key features */
.sc-rev__features {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.sc-rev__features li {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	color: var(--sc-text);
	font-size: 15px;
	line-height: 1.35;
}

.sc-rev__features svg {
	flex: 0 0 auto;
	/* Optical centring against the first line of a 15px/1.35 item. */
	margin-top: 2px;
	color: var(--sc-green-check);
}

/* -------------------------------------------------------------- pricing */
.sc-rev__price {
	/* Black rather than the brand navy, per the client (2026-07-28). */
	color: var(--sc-text-black);
	font-size: 17px;
	font-weight: var(--sc-fw-bold);
	line-height: 1.5;
}

.sc-rev__per {
	margin-top: 6px;
	color: var(--sc-text-muted);
	font-size: 13px;
	line-height: 1.4;
}

.sc-rev__setup {
	/* Black rather than muted grey, per the client (2026-07-28). */
	color: var(--sc-text-black);
	font-size: 15px;
	line-height: 1.45;
}

/* ------------------------------------------------------------ visit site */
.sc-rev__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 14px 20px;
	border-radius: var(--sc-radius-sm);
	background: var(--sc-orange);
	color: var(--sc-text-invert);
	font-size: 15px;
	font-weight: var(--sc-fw-semibold);
	line-height: 1.1;
	white-space: nowrap;
	transition: background var(--sc-transition);
}

.sc-rev__btn:hover,
.sc-rev__btn:focus-visible {
	background: var(--sc-orange-dark);
	color: var(--sc-text-invert);
}

.sc-rev__btn svg {
	flex: 0 0 auto;
}

/* ------------------------------------------------------------------ empty */
.sc-rev__empty {
	padding: 48px 24px;
	border: 1px solid var(--sc-border);
	border-radius: 14px;
	color: var(--sc-text-body);
	text-align: center;
}


/* ========================================================= article bands */
/*
 * The page is an article, not just the table. Prose sits in a narrow measure
 * for readability; the two reference tables and the comparison table keep the
 * full 1240 shell.
 */
.sc-rev__band {
	padding-block: 72px;
}

.sc-rev__band--tight {
	padding-block: 40px 0;
}

.sc-rev__band--blue {
	background: var(--sc-surface-blue);
}

.sc-rev__prose {
	width: 100%;
	max-width: 884px;   /* 820px of text inside a 32px gutter */
	margin-inline: auto;
	padding-inline: var(--sc-gutter);
}

/* Copy that follows a full-width table, e.g. the "prices shown are for
   monitoring only" note. */
.sc-rev__prose--after {
	margin-top: 26px;
}

/*
 * Headings and notes that belong to the full-width comparison table. They sit
 * in the 1240 shell so they start on the table's own left edge, but the text
 * inside keeps a readable measure rather than running the whole width.
 */
.sc-rev__shell--copy > * {
	max-width: 820px;
}

/* --------------------------------------------------------- article type */
.sc-rev .sc-rev__h2 {
	margin-bottom: 18px;
	font-size: 34px;
	line-height: 1.25;
}

.sc-rev .sc-rev__h3 {
	margin: 30px 0 12px;
	font-size: 21px;
	line-height: 1.3;
}

.sc-rev__p {
	margin-bottom: 16px;
	color: var(--sc-text-body);
	font-size: 17px;
	line-height: 1.75;
}

.sc-rev__p:last-child {
	margin-bottom: 0;
}

.sc-rev__note {
	color: var(--sc-text-muted);
	font-size: 15px;
	line-height: 1.65;
}

.sc-rev__footnote {
	margin-top: 26px;
	color: var(--sc-text-muted);
	font-size: 14px;
	font-style: italic;
	line-height: 1.6;
}

/* ---------------------------------------------------- affiliate disclosure */
/*
 * Moved to the top of the page and boxed, following the client's brief. A
 * disclosure only does its job if the reader meets it before the links it is
 * disclosing, so this deliberately differs from the Figma, which had it as
 * plain text under the table.
 */
.sc-rev__disclosure {
	padding: 20px 24px;
	background: var(--sc-amber-soft);
	border: 1px solid var(--sc-gold-solid);
	border-radius: var(--sc-radius-sm);
	color: var(--sc-amber-text);
	font-size: 15px;
	line-height: 1.65;
}

.sc-rev__disclosure strong {
	color: var(--sc-amber-text);
	font-weight: var(--sc-fw-semibold);
}

/* ------------------------------------------------------ reference tables */
/* "The Sources Behind This Guide" and "What to Look For". Same card shell as
   the comparison table, but a navy header row as the brief shows. */
.sc-rev__reftable {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	border-spacing: 0;
	margin: 0;
}

.sc-rev__reftable thead th {
	padding: 15px 20px;
	background: var(--sc-navy);
	color: var(--sc-text-invert);
	font-family: var(--sc-font-body);
	font-size: 13px;
	font-weight: var(--sc-fw-semibold);
	letter-spacing: 0.04em;
	line-height: 1.2;
	text-align: left;
}

.sc-rev__reftable tbody th,
.sc-rev__reftable tbody td {
	padding: 16px 20px;
	border-top: 1px solid var(--sc-border);
	font-size: 15px;
	line-height: 1.55;
	text-align: left;
	vertical-align: top;
}

.sc-rev__reftable tbody th {
	color: var(--sc-text-black);
	font-weight: var(--sc-fw-semibold);
}

.sc-rev__reftable tbody td {
	color: var(--sc-text-body);
	font-weight: var(--sc-fw-regular);
}

/* Zebra striping: these tables are wide and the eye loses the row otherwise. */
.sc-rev__reftable tbody tr:nth-child(even) th,
.sc-rev__reftable tbody tr:nth-child(even) td {
	background: var(--sc-surface-blue);
}

.sc-rev__reftable colgroup,
.sc-rev__reftable thead th:first-child { width: 25%; }
.sc-rev__reftable thead th:nth-child(2) { width: 33%; }
.sc-rev__reftable thead th:nth-child(3) { width: 42%; }

/* ------------------------------------------------------- system write-ups */
.sc-rev__cards {
	margin-top: 34px;
}

.sc-rev__card {
	padding: 32px 34px;
	margin-bottom: 24px;
	background: var(--sc-surface);
	border: 1px solid var(--sc-border);
	border-radius: 14px;
	box-shadow: var(--sc-shadow-sm);
}

.sc-rev__card:last-child {
	margin-bottom: 0;
}

/* Wirecutter's picks get the accent, because the brief treats that section as
   a separate, more independent voice. */
.sc-rev__card--wc {
	border-left: 4px solid var(--sc-orange);
}

.sc-rev .sc-rev__card-title {
	margin-bottom: 10px;
	font-size: 24px;
	line-height: 1.3;
}

.sc-rev__card-num {
	color: var(--sc-orange);
}

.sc-rev__cited {
	margin-bottom: 16px;
	color: var(--sc-text-muted);
	font-size: 15px;
	line-height: 1.6;
}

.sc-rev__cited span {
	font-weight: var(--sc-fw-semibold);
}

/* Bold lead-in above a paragraph, matching the brief's
   "Why experts recommend it: ..." run-in headings. */
.sc-rev__label {
	margin-bottom: 4px;
	color: var(--sc-text-black);
	font-size: 17px;
	font-weight: var(--sc-fw-semibold);
	line-height: 1.5;
}

.sc-rev__why,
.sc-rev__worth,
.sc-rev__tradeoff {
	margin-top: 18px;
}

.sc-rev__specs {
	margin: 22px 0 0;
	padding: 20px 22px;
	background: var(--sc-surface-blue);
	border-radius: var(--sc-radius-sm);
}

.sc-rev__spec {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 8px;
}

.sc-rev__spec:last-child {
	margin-bottom: 0;
}

.sc-rev__spec dt {
	flex: 0 0 auto;
	margin: 0;
	color: var(--sc-text-black);
	font-size: 16px;
	font-weight: var(--sc-fw-semibold);
	line-height: 1.6;
}

.sc-rev__spec dt::after {
	content: ":";
}

.sc-rev__spec dd {
	flex: 1 1 240px;
	margin: 0;
	color: var(--sc-text-body);
	font-size: 16px;
	line-height: 1.6;
}

.sc-rev__learn {
	margin-top: 20px;
	font-size: 16px;
	line-height: 1.6;
}

.sc-rev__learn span {
	color: var(--sc-text-black);
	font-weight: var(--sc-fw-semibold);
}

.sc-rev__learn a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--sc-navy);
	font-weight: var(--sc-fw-medium);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sc-rev__learn a:hover,
.sc-rev__learn a:focus-visible {
	color: var(--sc-orange-dark);
}

/* ------------------------------------------------------------- bullets */
.sc-rev__bullets {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 14px 0 0;
}

.sc-rev__bullets li {
	position: relative;
	padding-left: 20px;
	color: var(--sc-text-body);
	font-size: 17px;
	line-height: 1.65;
}

/* A dot, matching the brief. Same marker as the Resources list, so the page
   has one bullet style rather than two. */
.sc-rev__bullets li::before {
	content: "";
	position: absolute;
	top: 11px;
	left: 2px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--sc-orange);
}

.sc-rev__bullets strong {
	color: var(--sc-text-black);
	font-weight: var(--sc-fw-semibold);
}

/* -------------------------------------------------------------- callout */
/* "A Note About Life Alert" — an aside, not part of the recommendations. */
.sc-rev__callout {
	padding: 34px 36px;
	background: var(--sc-surface);
	border: 1px solid var(--sc-border);
	border-left: 4px solid var(--sc-navy);
	border-radius: 14px;
}

/* ------------------------------------------------------------------- CTA */
.sc-rev__cta {
	padding: 40px 42px;
	background: var(--sc-navy);
	border-radius: 16px;
	color: var(--sc-text-invert);
}

.sc-rev .sc-rev__cta-title {
	margin-bottom: 14px;
	color: var(--sc-text-invert);
	font-size: 30px;
	line-height: 1.25;
}

.sc-rev__cta-p {
	margin-bottom: 14px;
	color: rgba(255, 255, 255, 0.88);
	font-size: 17px;
	line-height: 1.7;
}

.sc-rev__cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 12px;
	padding: 15px 24px;
	border-radius: var(--sc-radius-sm);
	background: var(--sc-orange);
	color: var(--sc-text-invert);
	font-size: 16px;
	font-weight: var(--sc-fw-semibold);
	line-height: 1.35;
	transition: background var(--sc-transition);
}

/* Without this the text cannot shrink past its min-content width and pushes
   the button wider than the card on a phone. */
.sc-rev__cta-btn span {
	min-width: 0;
	overflow-wrap: break-word;
}

.sc-rev__cta-btn:hover,
.sc-rev__cta-btn:focus-visible {
	background: var(--sc-orange-dark);
	color: var(--sc-text-invert);
}

.sc-rev__cta-btn svg {
	flex: 0 0 auto;
}

/* -------------------------------------------------------------- resources */
.sc-rev__resources {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 18px;
}

.sc-rev__resources li {
	position: relative;
	padding-left: 20px;
	color: var(--sc-text-body);
	font-size: 16px;
	line-height: 1.6;
}

.sc-rev__resources li::before {
	content: "";
	position: absolute;
	top: 10px;
	left: 2px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--sc-orange);
}

.sc-rev__resource-name {
	color: var(--sc-text-black);
	font-weight: var(--sc-fw-medium);
}

.sc-rev__resources a {
	color: var(--sc-navy);
	text-decoration: underline;
	text-underline-offset: 3px;
	word-break: break-word;
}

.sc-rev__resources a:hover,
.sc-rev__resources a:focus-visible {
	color: var(--sc-orange-dark);
}

/* ============================================================ responsive */

/* Between the card width and the table's own width the shell needs a gutter,
   and the columns lose a little breathing room. */
@media (max-width: 1304px) {
	.sc-rev__shell {
		padding-inline: var(--sc-gutter);
	}
}

@media (max-width: 1240px) {
	.sc-rev__cell,
	.sc-rev__th {
		padding-right: 14px;
	}

	.sc-rev__cell--product,
	.sc-rev__th--product {
		padding-left: 18px;
	}

	.sc-rev__cell--visit,
	.sc-rev__th--visit {
		padding-right: 18px;
	}

	.sc-rev__btn {
		padding: 13px 14px;
		font-size: 14px;
	}

	.sc-rev__features li,
	.sc-rev__setup {
		font-size: 14px;
	}

	.sc-rev__name {
		max-width: 108px;
	}
}

@media (max-width: 1024px) {
	.sc-rev__hero-inner {
		padding-block: 72px 64px;
	}

	.sc-rev .sc-rev__title {
		font-size: 44px;
	}

	/*
	 * Stacked layout. Below this width the six columns cannot hold their
	 * content without either wrapping every word or forcing a sideways
	 * scroll, so each row becomes a card and the column names move into the
	 * cells themselves via data-label.
	 */
	.sc-rev__scroll {
		overflow: visible;
		background: none;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}

	.sc-rev__table,
	.sc-rev__table tbody {
		display: block;
		width: auto;
	}

	/*
	 * Flex, not block. The cells need to sit two-up in the tablet band below,
	 * and inline-block cannot do it: the newline between two <td>s in the
	 * template renders as a space, so 50% + 50% + that space overflows and the
	 * second cell drops to its own line. Flex ignores the whitespace.
	 */
	.sc-rev__row {
		display: flex;
		flex-wrap: wrap;
		width: auto;
	}

	.sc-rev__cell {
		flex: 1 1 100%;
		display: block;
		width: auto;
	}

	/* Removed outright rather than hidden visually. Once the cells are blocks
	   the table semantics are gone anyway, so a surviving header row would just
	   read out six stray words before the first card. Each cell announces its
	   own column through the data-label caption below. */
	.sc-rev__table thead {
		display: none;
	}

	.sc-rev__row {
		margin-bottom: 20px;
		padding: 22px 22px 24px;
		background: var(--sc-surface);
		border: 1px solid var(--sc-border);
		border-radius: 14px;
		box-shadow: var(--sc-shadow-sm);
	}

	.sc-rev__row:last-child {
		margin-bottom: 0;
	}

	.sc-rev__row:hover {
		background: var(--sc-surface);
	}

	.sc-rev__cell,
	.sc-rev__row + .sc-rev__row .sc-rev__cell {
		padding: 16px 0 0;
		border-top: 0;
	}

	.sc-rev__cell--product {
		padding: 0;
	}

	.sc-rev__cell--visit {
		padding-top: 20px;
		text-align: left;
	}

	/* A cell with no value would otherwise print its column name over nothing.
	   The class is set in template-parts/review-row.php; :empty cannot be used
	   because the template's own whitespace counts as content. */
	.sc-rev__cell--empty {
		display: none;
	}

	/* The column name, printed once per cell now that the header row is gone.
	   The product cell is self-explanatory and keeps its label hidden. */
	.sc-rev__cell:not(.sc-rev__cell--product, .sc-rev__cell--visit)::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 8px;
		color: var(--sc-text-muted);
		font-size: 11px;
		font-weight: var(--sc-fw-semibold);
		letter-spacing: 0.06em;
		text-transform: uppercase;
	}

	.sc-rev__name,
	.sc-rev__sources {
		max-width: none;
	}

	.sc-rev__name {
		font-size: 18px;
	}

	.sc-rev__thumb {
		width: 56px;
		height: 56px;
	}

	.sc-rev__features li,
	.sc-rev__setup {
		font-size: 15px;
	}

	.sc-rev__btn {
		width: 100%;
		padding: 15px 20px;
		font-size: 15px;
	}
}

/* Two-up cells on tablets: price and setup fee sit side by side rather than
   stacking into a tall column of one-word answers. */
@media (min-width: 576px) and (max-width: 1024px) {
	.sc-rev__cell--price,
	.sc-rev__cell--setup {
		flex: 1 1 50%;
	}
}

@media (max-width: 768px) {
	.sc-rev__hero-inner {
		padding-block: 56px 48px;
	}

	.sc-rev .sc-rev__title {
		font-size: 36px;
	}

	.sc-rev__lead {
		font-size: 16px;
	}
}

@media (max-width: 575px) {
	.sc-rev__shell {
		padding-inline: 16px;
	}

	.sc-rev .sc-rev__title {
		font-size: 30px;
	}

	.sc-rev__row {
		padding: 20px 18px 22px;
	}

	.sc-rev__lead {
		font-size: 15px;
	}
}

/* ============================================ article sections, responsive */
@media (max-width: 1024px) {
	.sc-rev__band {
		padding-block: 56px;
	}

	.sc-rev .sc-rev__h2 {
		font-size: 28px;
	}

	.sc-rev .sc-rev__card-title {
		font-size: 21px;
	}

	.sc-rev__card {
		padding: 26px 24px;
	}

	.sc-rev__callout {
		padding: 26px 24px;
	}

	.sc-rev__cta {
		padding: 32px 28px;
	}

	.sc-rev .sc-rev__cta-title {
		font-size: 25px;
	}

	/*
	 * Reference tables become stacked cards, the same way the comparison table
	 * does. Their third column is long prose and cannot survive a third of a
	 * phone screen.
	 */
	.sc-rev__scroll--ref {
		overflow: visible;
		background: none;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}

	.sc-rev__reftable,
	.sc-rev__reftable tbody,
	.sc-rev__reftable tr,
	.sc-rev__reftable tbody th,
	.sc-rev__reftable tbody td {
		display: block;
		width: auto;
	}

	.sc-rev__reftable thead {
		display: none;
	}

	.sc-rev__reftable tbody tr {
		margin-bottom: 16px;
		padding: 20px 22px;
		background: var(--sc-surface);
		border: 1px solid var(--sc-border);
		border-radius: 14px;
		box-shadow: var(--sc-shadow-sm);
	}

	.sc-rev__reftable tbody tr:last-child {
		margin-bottom: 0;
	}

	/* The striping above would repaint the whole card, not a row. */
	.sc-rev__reftable tbody tr:nth-child(even) th,
	.sc-rev__reftable tbody tr:nth-child(even) td {
		background: none;
	}

	.sc-rev__reftable tbody th,
	.sc-rev__reftable tbody td {
		padding: 0;
		border-top: 0;
	}

	.sc-rev__reftable tbody th {
		font-size: 18px;
	}

	/* The column name, printed per cell now that the header row is gone. */
	.sc-rev__reftable tbody td::before {
		content: attr(data-label);
		display: block;
		margin: 14px 0 4px;
		color: var(--sc-text-muted);
		font-size: 11px;
		font-weight: var(--sc-fw-semibold);
		letter-spacing: 0.06em;
		text-transform: uppercase;
	}
}

@media (max-width: 768px) {
	.sc-rev__band {
		padding-block: 44px;
	}

	.sc-rev__band--tight {
		padding-block: 28px 0;
	}

	.sc-rev .sc-rev__h2 {
		font-size: 25px;
	}

	.sc-rev__p,
	.sc-rev__bullets li {
		font-size: 16px;
	}

	.sc-rev__cta-p {
		font-size: 16px;
	}
}

@media (max-width: 575px) {
	.sc-rev__prose {
		padding-inline: 16px;
	}

	.sc-rev__card,
	.sc-rev__callout {
		padding: 22px 18px;
	}

	.sc-rev__cta {
		padding: 26px 20px;
	}

	.sc-rev .sc-rev__cta-title {
		font-size: 22px;
	}

	/*
	 * The button label is a whole sentence from the brief. On a phone it wraps
	 * to four or five lines, so it needs a smaller size and a looser line
	 * height or it reads as a solid block of text.
	 */
	.sc-rev__cta-btn {
		width: 100%;
		justify-content: center;
		gap: 8px;
		padding: 14px 18px;
		font-size: 14px;
		line-height: 1.5;
		text-align: center;
	}

	.sc-rev__specs {
		padding: 16px 16px;
	}

	.sc-rev__disclosure {
		padding: 16px 18px;
	}
}

/* Smallest phones. Measured at 320px, where the CTA has about 220px of usable
   width. */
@media (max-width: 400px) {
	.sc-rev__cta-btn {
		padding: 13px 14px;
		font-size: 13.5px;
	}

	/* The arrow is decorative and was eating a fifth of every line. */
	.sc-rev__cta-btn svg {
		display: none;
	}

	.sc-rev__cta {
		padding: 24px 16px;
	}
}