/**
 * Buyer's Guide page — built from the client's design.
 *
 * Scoped under .sc-guide with its own small foundation, the same way
 * front-page.css works: 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; they are not read from
 * the Figma file itself.
 */

/* ------------------------------------------------------------- foundation */
.sc-guide {
	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-guide *,
.sc-guide *::before,
.sc-guide *::after {
	box-sizing: border-box;
}

/*
 * ⚠️ These element resets are wrapped in :where() ON PURPOSE — do not unwrap them.
 *
 * Written plainly, ".sc-guide p { margin: 0 }" scores (0,1,1), which outranks
 * every single-class component rule below it, e.g. ".sc-question__intro"
 * (0,1,0). Source order does not help; specificity wins. That silently zeroed
 * EVERY margin on this page — the spacing you saw came from line boxes, not
 * from the values in this file, and editing those values did nothing.
 *
 * :where() contributes zero specificity, so these land at (0,1,0), tie with the
 * component classes, and lose to them on source order — which is what we want.
 * Same fix as .sc-blog in §16. Verify with getComputedStyle(), never by reading
 * the CSS.
 */
.sc-guide :where(h1, h2) {
	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);
}

.sc-guide :where(p) {
	margin: 0;
}

.sc-guide :where(ul) {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sc-guide :where(a) {
	text-decoration: none;
}

.sc-guide :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 layout 200px
   narrower than the header and footer. Lifted the same way the homepage, blog
   and legal templates lift it. Class comes from inc/buyers-guide.php. */
.sc-guide-page #main-wrap,
.sc-guide-page #inner-wrap,
.sc-guide-page #page,
.sc-guide-page #main {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
}

/* ------------------------------------------------------------------- hero */
/* Plain cream band, no decoration: the client's hero reference is a flat
   background with the copy centred on it. */
.sc-guide__hero {
	background: var(--sc-surface-cream);
}

.sc-guide__hero-inner {
	padding-block: 62px 66px;
	text-align: center;
}

/* --------------------------------------------------------------- hero copy
   The hero is deliberately TIGHT — the client's reference sets the four lines
   close together. These small margins only started taking effect once the
   :where() fix above stopped ".sc-guide p" zeroing them, so they were retuned
   against the reference afterwards. */
.sc-guide__eyebrow {
	margin-bottom: 10px;
	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-guide__title {
	max-width: 1000px;
	margin-inline: auto;
	color: var(--sc-text-black);
	font-size: 44px;
	line-height: 1.18;
	letter-spacing: -0.01em;
}

.sc-guide__lead {
	/* 660px, not 720: the reference breaks this paragraph after "Answer" and
	   720px pulls "them" up onto the first line. */
	max-width: 660px;
	margin: 14px auto 0;
	color: var(--sc-text-black);
	font-size: 17px;
	line-height: 1.6;
}

.sc-guide__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin-top: 20px;
}

.sc-guide__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 22px;
	border: 1px solid transparent;
	border-radius: var(--sc-radius-sm);
	font-size: var(--sc-fs-sm);
	font-weight: var(--sc-fw-semibold);
	line-height: 1.2;
	transition: background-color var(--sc-transition), border-color var(--sc-transition), color var(--sc-transition);
}

.sc-guide__btn--primary {
	background: var(--sc-orange);
	color: var(--sc-text-invert);
}

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

.sc-guide__btn--ghost {
	background: var(--sc-surface);
	border-color: var(--sc-border);
	color: var(--sc-navy);
}

.sc-guide__btn--ghost:hover,
.sc-guide__btn--ghost:focus-visible {
	border-color: var(--sc-navy);
	background: var(--sc-navy-tint);
	color: var(--sc-navy);
}

/* --------------------------------------------------------------- questions
   Four gaps the client opened up on 2026-07-28, all inside a question block:
   number row -> heading (28), heading -> description (24), description -> first
   card (36), and answer title -> "That means:" (16). They read as one rhythm,
   so change them together, and keep the step-downs in the media queries in
   proportion. */
.sc-guide__questions {
	padding-block: 76px 88px;
}

.sc-question + .sc-question {
	margin-top: 72px;
}

/* The hero button jumps here; the offset keeps the number chip clear of the
   top of the viewport instead of flush against it. */
.sc-question {
	scroll-margin-top: 28px;
}

.sc-question__head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 28px;
}

.sc-question__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: var(--sc-navy);
	color: var(--sc-text-invert);
	/* Sans, not the heading serif: the design sets the chip in the UI face. */
	font-family: var(--sc-font-body);
	font-size: var(--sc-fs-lg);
	font-weight: var(--sc-fw-bold);
	line-height: 1;
}

.sc-question__label {
	color: var(--sc-green-text);
	font-size: 12px;
	font-weight: var(--sc-fw-semibold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.sc-question__title {
	font-size: var(--sc-fs-3xl);
	line-height: 1.25;
}

/* Measured off the design: the paragraph stops short of the answer cards
   rather than running the full width of the shell.

   A div, not a p: questions 2 and 5 in the source document have two paragraphs,
   so the plugin renders this block through scbg_paragraphs(). */
.sc-question__intro {
	max-width: 1040px;
	margin-top: 24px;
	line-height: 1.75;
}

.sc-question__intro :where(p) + :where(p) {
	margin-top: 14px;
}

/* ---------------------------------------------------------- answer cards */
.sc-answers {
	display: grid;
	gap: 18px;
	margin-top: 36px;
}

.sc-answer {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 22px 26px;
	border: 1px solid var(--sc-border);
	border-radius: var(--sc-radius);
	/* White, not the blue tint — client, 2026-07-28. The border is what
	   separates the card from the section now, so it must stay. */
	background: var(--sc-surface);
}

.sc-answer__check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	margin-top: 2px;
	border-radius: var(--sc-radius-sm);
	background: var(--sc-navy-tint);
	color: var(--sc-navy);
}

.sc-answer__body {
	min-width: 0;   /* lets long lines wrap instead of stretching the card */
}

.sc-answer__label {
	margin-bottom: 8px;
	color: var(--sc-text-muted);
	font-size: 11px;
	font-weight: var(--sc-fw-semibold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.sc-answer__title {
	margin-bottom: 16px;
	color: var(--sc-navy-deep);
	font-size: var(--sc-fs-base);
	font-weight: var(--sc-fw-bold);
	line-height: 1.4;
}

.sc-answer__line {
	font-size: var(--sc-fs-sm);
	line-height: 1.65;
}

.sc-answer__line + .sc-answer__line {
	margin-top: 10px;
}

/* The two fixed labels. Navy for the explanation, green for the
   recommendation — the only place these two colours meet in a sentence. */
.sc-answer__key {
	color: var(--sc-navy-deep);
	font-weight: var(--sc-fw-bold);
}

.sc-answer__key--consider {
	color: var(--sc-green-text);
}

.sc-answer__line a {
	color: var(--sc-navy);
	text-decoration: underline;
}

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

/* Shown only when there are no questions yet, or the plugin is switched off. */
.sc-guide__fallback {
	max-width: 800px;
	line-height: var(--sc-lh-normal);
}

.sc-guide__fallback p {
	margin-bottom: var(--sc-space-4);
}

/* ------------------------------- affiliate notice and opening paragraphs ---
   The source document opens with a highlighted disclosure box, then four
   paragraphs, before question 1. */
.sc-guide__opening {
	padding-block: 56px 0;
}

.sc-disclosure {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 8px;
	max-width: 1040px;
	padding: 18px 22px;
	border: 1px solid var(--sc-amber-text);
	border-left-width: 4px;
	border-radius: var(--sc-radius-sm);
	/* Amber pair added for the comparison table; reused here so the site keeps
	   one "notice" colour rather than inventing a second. */
	background: var(--sc-amber-bg);
	color: var(--sc-amber-text);
	font-size: var(--sc-fs-sm);
	line-height: 1.65;
}

.sc-disclosure__label {
	flex: 0 0 auto;
	font-weight: var(--sc-fw-bold);
}

.sc-disclosure__text {
	flex: 1 1 auto;
	min-width: 0;
}

/* Shared prose block: opening paragraphs, closing advice, companion note. */
.sc-guide__prose {
	max-width: 1040px;
	line-height: 1.8;
}

.sc-guide__prose :where(p) + :where(p) {
	margin-top: 18px;
}

.sc-guide__prose :where(a) {
	color: var(--sc-navy);
	font-weight: var(--sc-fw-semibold);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.sc-guide__prose :where(a):hover,
.sc-guide__prose :where(a):focus-visible {
	color: var(--sc-navy-dark);
}

.sc-guide__opening .sc-guide__prose {
	margin-top: 28px;
}

.sc-guide__prose--small {
	margin-top: 20px;
	font-size: var(--sc-fs-sm);
	line-height: 1.7;
}

/* ------------------------------------------- quick recommendation guide ---
   The shortcut table after the last question. Rows are edited under
   Buyer's Guide -> Recommendations. */
.sc-guide__picks {
	padding-block: 76px 88px;
	background: var(--sc-surface-blue);
	scroll-margin-top: 28px;
}

.sc-picks__title {
	font-size: var(--sc-fs-3xl);
	line-height: 1.25;
}

.sc-picks__lead {
	max-width: 1040px;
	margin-top: 18px;
	line-height: 1.75;
}

/* Horizontal scroll container, so a long system name can never push the page
   sideways on a narrow screen. */
.sc-picks__scroll {
	margin-top: 32px;
	overflow-x: auto;
	border-radius: var(--sc-radius);
}

.sc-picks {
	width: 100%;
	border-collapse: collapse;
	background: var(--sc-surface);
	font-size: var(--sc-fs-sm);
	text-align: left;
}

.sc-picks :where(thead) :where(th) {
	padding: 16px 22px;
	background: var(--sc-navy);
	color: var(--sc-text-invert);
	font-family: var(--sc-font-body);
	font-size: var(--sc-fs-xs);
	font-weight: var(--sc-fw-semibold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.sc-picks :where(tbody) :where(th),
.sc-picks :where(tbody) :where(td) {
	padding: 16px 22px;
	border-top: 1px solid var(--sc-border);
	line-height: 1.6;
	vertical-align: top;
}

/* Left column: the reader's situation. Regular weight — the recommendation is
   what should stand out, as it does in the source document. */
.sc-picks :where(tbody) :where(th) {
	width: 46%;
	color: var(--sc-text-body);
	font-family: var(--sc-font-body);
	font-weight: var(--sc-fw-regular);
}

.sc-picks :where(tbody) :where(td) {
	color: var(--sc-navy-deep);
	font-weight: var(--sc-fw-bold);
}

/* Zebra striping, very faint — it is what keeps a twelve-row table readable. */
.sc-picks :where(tbody) :where(tr):nth-child(even) :where(th),
.sc-picks :where(tbody) :where(tr):nth-child(even) :where(td) {
	background: var(--sc-surface-blue);
}

/* --------------------------------------- closing advice + companion link ---*/
.sc-guide__closing {
	padding-block: 76px 88px;
}

.sc-guide__block-title,
.sc-companion__title {
	margin-bottom: 24px;
	font-size: var(--sc-fs-2xl);
	line-height: 1.3;
}

.sc-companion {
	max-width: 1040px;
	margin-top: 56px;
	padding: 32px 34px;
	border: 1px solid var(--sc-border);
	border-radius: var(--sc-radius);
	background: var(--sc-surface-blue);
}

.sc-companion__link {
	margin-top: 22px;
}

.sc-companion__link :where(a) {
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
	color: var(--sc-navy);
	font-family: var(--sc-font-heading);
	font-size: var(--sc-fs-lg);
	font-weight: var(--sc-fw-bold);
	line-height: 1.4;
}

.sc-companion__link :where(a):hover,
.sc-companion__link :where(a):focus-visible {
	color: var(--sc-orange-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* The arrow must not stretch the baseline row when the title wraps. */
.sc-companion__link :where(svg) {
	flex: 0 0 auto;
	position: relative;
	top: 2px;
}

/* The small print at the very bottom. */
.sc-guide__footnote {
	max-width: 1040px;
	margin-top: 48px;
	padding-top: 24px;
	border-top: 1px solid var(--sc-border);
	color: var(--sc-text-muted);
	font-size: var(--sc-fs-xs);
	font-style: italic;
	line-height: 1.7;
}

/* ------------------------------------------------------------ responsive */
@media (max-width: 1024px) {
	.sc-guide__hero-inner {
		padding-block: 52px 62px;
	}

	.sc-guide__title {
		font-size: 36px;
	}

	.sc-guide__questions {
		padding-block: 60px 70px;
	}

	.sc-question + .sc-question {
		margin-top: 52px;
	}

	.sc-question__title,
	.sc-picks__title {
		font-size: 28px;
	}

	.sc-guide__picks,
	.sc-guide__closing {
		padding-block: 60px 70px;
	}

	.sc-guide__opening {
		padding-block: 46px 0;
	}

	.sc-companion {
		margin-top: 44px;
		padding: 26px 28px;
	}

	.sc-question__head {
		margin-bottom: 24px;
	}

	.sc-question__intro {
		margin-top: 20px;
	}

	.sc-answers {
		margin-top: 30px;
	}
}

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

	.sc-guide__title {
		font-size: 30px;
	}

	.sc-guide__lead {
		font-size: var(--sc-fs-base);
	}

	.sc-guide__questions {
		padding-block: 48px 56px;
	}

	.sc-question + .sc-question {
		margin-top: 44px;
	}

	.sc-question__title,
	.sc-picks__title {
		font-size: 24px;
	}

	.sc-guide__picks,
	.sc-guide__closing {
		padding-block: 48px 56px;
	}

	.sc-guide__opening {
		padding-block: 36px 0;
	}

	.sc-guide__block-title,
	.sc-companion__title {
		font-size: var(--sc-fs-xl);
	}

	.sc-question__number {
		width: 38px;
		height: 38px;
		border-radius: 9px;
		font-size: var(--sc-fs-base);
	}

	.sc-question__head {
		margin-bottom: 20px;
	}

	.sc-question__intro {
		margin-top: 16px;
	}

	.sc-answers {
		margin-top: 26px;
	}

	.sc-answer {
		padding: 18px;
		gap: 14px;
	}

	.sc-answer__title {
		margin-bottom: 12px;
	}
}

@media (max-width: 575px) {
	.sc-guide__title {
		font-size: 26px;
	}

	/* Full-width buttons, the same treatment the homepage hero gets. */
	.sc-guide__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.sc-guide__btn {
		width: 100%;
	}

	.sc-question__title,
	.sc-picks__title {
		font-size: 22px;
	}

	/*
	 * Stack the shortcut table. Two columns of sentences do not survive a phone
	 * width, so each row becomes a small card with the column heading printed
	 * from the data-label attribute.
	 */
	.sc-picks__scroll {
		overflow-x: visible;
	}

	.sc-picks,
	.sc-picks :where(tbody),
	.sc-picks :where(tr),
	.sc-picks :where(tbody) :where(th),
	.sc-picks :where(tbody) :where(td) {
		display: block;
		width: auto;
	}

	/*
	 * Drop the real header row. Each cell prints its own column name from
	 * data-label in this mode, so nothing is lost — and the usual off-screen
	 * "visually hidden" trick would leave a 248px-wide <th> hanging outside a
	 * 375px viewport, which a responsive audit rightly flags.
	 */
	.sc-picks :where(thead) {
		display: none;
	}

	.sc-picks :where(tbody) :where(tr) {
		margin-bottom: 12px;
		border: 1px solid var(--sc-border);
		border-radius: var(--sc-radius-sm);
		overflow: hidden;
	}

	.sc-picks :where(tbody) :where(tr):last-child {
		margin-bottom: 0;
	}

	.sc-picks :where(tbody) :where(th),
	.sc-picks :where(tbody) :where(td) {
		padding: 12px 14px;
		border-top: 0;
	}

	.sc-picks :where(tbody) :where(td) {
		border-top: 1px solid var(--sc-border);
	}

	.sc-picks :where(tbody) :where(th)::before,
	.sc-picks :where(tbody) :where(td)::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 4px;
		color: var(--sc-text-muted);
		font-size: 11px;
		font-weight: var(--sc-fw-semibold);
		letter-spacing: 0.1em;
		text-transform: uppercase;
	}

	.sc-companion {
		padding: 22px 18px;
	}

	.sc-companion__link :where(a) {
		font-size: var(--sc-fs-base);
	}

	.sc-answer {
		padding: 16px;
		gap: 12px;
	}

	.sc-answer__check {
		width: 22px;
		height: 22px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sc-guide *,
	.sc-guide *::before,
	.sc-guide *::after {
		transition-duration: 0.01ms !important;
	}
}