/*------------------------------------*\
	LONG-FORM ARTICLE STYLES

	Component styling for editorial / comparison articles built with core
	Gutenberg blocks. Scoped to the `.tuft-article` wrapper (a core Group
	block with that class name) so it never leaks into other posts.

	Loaded on the front end and inside the block editor via
	`enqueue_block_assets` — see inc/blocks.php.

	THE THEME OWNS TYPOGRAPHY AND ANYTHING IT ALREADY STYLES. Copy inherits
	DM Sans and var(--text) from style.css; links, buttons and the Details
	block (FAQ accordions) are styled there too and are NOT overridden here.
	Lighter text is the theme's `.faded` class (opacity .5) added in the
	editor — never a hardcoded grey. This file is layout and surface chrome
	only: backgrounds, borders, spacing, and the status colours in
	comparison tables. Dark panels (CTA, dark compare card) invert copy to
	white, same as the theme's own dark sections.

	Block style mapping:
	  core/group   is-style-tuft-byline | tuft-quick-answer | tuft-summary
	               tuft-callout | tuft-cta | tuft-cta-inline | tuft-platform
	               tuft-highlight | tuft-disclosure | tuft-fvp-free | tuft-fvp-paid
	               tuft-qa-box | tuft-stat | tuft-mini-card | tuft-freq
	  core/table   is-style-tuft-compare
	  core/list    is-style-tuft-check | is-style-tuft-dash | is-style-tuft-dot
	  core/button  styled by the theme (.btn system in style.css):
	               default = solid, "Outline" = hollow, "Dark" = tertiary

	Data figures use --notice (blue) as the accent; red (--primary) is for links
	only. No red pastel fills. Card surfaces are white / --bg-light on a
	--nav-border hairline. Layout: the figure grids and the two inline/flex
	components use core Grid/Flex layouts (children render as real items).
\*------------------------------------*/


/*------------------------------------*\
	HEADING RHYTHM

	Blog posts flatten in-content headings: style.css has
	`.single-post article :is(h1,h2,h3){font-size:1.2em}`, so h2 and h3
	both land at ~20px while h4 (1.5em) ends up LARGER than either — no
	usable hierarchy. Re-scale h2–h4 for editorial reading: a clear step
	between levels, and asymmetric spacing (more room above a heading than
	below, so it bonds to the copy it introduces rather than the block above).

	Sizes are in rem (root font-size is 10px) so they don't inherit the post
	context's shrunken em base. The `.wp-block-heading` class lifts specificity
	over the flattening rule and matches in the editor too. Font, weight and
	colour stay the theme's (DM Sans 700, var(--text)) — only size, line-height
	and spacing are set here.
\*------------------------------------*/

.tuft-article h2.wp-block-heading {
	font-size: 3.2rem;
	line-height: 1.25;
	letter-spacing: -.01em;
	margin: 4rem 0 1rem;
	scroll-margin-top: 90px;
}

.tuft-article h3.wp-block-heading {
	font-size: 2.5rem;
	line-height: 1.3;
	margin: 3.2rem 0 .8rem;
	scroll-margin-top: 90px;
}

.tuft-article h4.wp-block-heading {
	font-size: 2rem;
	line-height: 1.4;
	margin: 2.6rem 0 .6rem;
	scroll-margin-top: 90px;
}

/* Core group blocks wrap their content in `.wp-block-group__inner-container`,
   so a panel's first heading is a grandchild — the per-panel `> :first-child`
   resets never reach it, and the heading keeps a full section top-margin
   inside the padded card. Zero it here, piercing the wrapper, so titles sit
   tight to the panel padding. The FVP heading follows a `.pill`, so it isn't
   a first-child — reset that pairing separately. */
.tuft-article :is(
	.is-style-tuft-quick-answer, .is-style-tuft-summary, .is-style-tuft-callout,
	.is-style-tuft-cta, .is-style-tuft-platform, .is-style-tuft-highlight,
	.is-style-tuft-disclosure, .is-style-tuft-fvp-free, .is-style-tuft-fvp-paid
) :is(h1, h2, h3, h4, h5, h6):first-child {
	margin-top: 0;
}

.tuft-article :is(.is-style-tuft-fvp-free, .is-style-tuft-fvp-paid) :is(.pill, .tuft-badge) + h3 {
	margin-top: .25rem;
}


/*------------------------------------*\
	TABLE OF CONTENTS  (rank-math/toc-block)

	A white, soft-shadowed card. Headings list in two row-major columns, each
	with a zero-padded red index number (CSS counter on the plain <ul>) and a
	dark label that turns red on hover — so the theme's link red reads as an
	accent on the number, not as every row being fully red.
\*------------------------------------*/

.tuft-article .wp-block-rank-math-toc-block {
	background: #fff;
	border: 1px solid var(--nav-border);
	border-radius: 22px;
	box-shadow: 0 10px 30px rgba(149, 157, 165, .22);
	padding: clamp(1.75rem, 4vw, 2.75rem);
	margin: 0 0 2.5rem;
}

.tuft-article .wp-block-rank-math-toc-block h2 {
	margin: 0 0 1.5rem;
	font-size: 2rem;
	line-height: 1.2;
	color: var(--text);
}

.tuft-article .wp-block-rank-math-toc-block nav > ul {
	counter-reset: toc;
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 3.5rem;
	row-gap: .4rem;
}

.tuft-article .wp-block-rank-math-toc-block li {
	counter-increment: toc;
	margin: 0;
}

.tuft-article .wp-block-rank-math-toc-block li a {
	display: flex;
	align-items: baseline;
	gap: .9rem;
	padding: .65rem 0;
	color: var(--text);
	text-decoration: none;
	line-height: 1.4;
	transition: color .15s;
}

/* Zero-padded index — always the accent colour; the label stays dark */
.tuft-article .wp-block-rank-math-toc-block li a::before {
	content: counter(toc, decimal-leading-zero);
	flex: 0 0 auto;
	min-width: 1.7em;
	color: var(--primary);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	-webkit-text-stroke: .25px;
}

.tuft-article .wp-block-rank-math-toc-block li a:hover,
.tuft-article .wp-block-rank-math-toc-block li a:focus-visible {
	color: var(--primary);
}


/*------------------------------------*\
	BYLINE
\*------------------------------------*/

.tuft-article .is-style-tuft-byline {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 28px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--nav-border);
}

.tuft-article .is-style-tuft-byline > p {
	margin-bottom: 0;
	font-size: .8em;
	line-height: 1.5;
}

.tuft-article .is-style-tuft-byline .tuft-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--primary-pastel);
	color: var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: .8em;
	flex-shrink: 0;
}


/*------------------------------------*\
	QUICK ANSWER
\*------------------------------------*/

.tuft-article .is-style-tuft-quick-answer {
	background: var(--bg-light);
	border-radius: 10px;
	padding: 18px 22px;
	margin: 0 0 24px;
}

/* Pair with .faded in the editor for the lighter treatment */
.tuft-article .tuft-eyebrow {
	font-size: .6em;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	margin-bottom: 8px;
}

.tuft-article .is-style-tuft-quick-answer > :last-child {
	margin-bottom: 0;
}


/*------------------------------------*\
	SUMMARY CARD
\*------------------------------------*/

.tuft-article .is-style-tuft-summary {
	background: var(--bg-light);
	border-left: 4px solid var(--primary);
	padding: 1.75rem;
	border-radius: 0 8px 8px 0;
	margin-top: 1.75rem;
}

.tuft-article .is-style-tuft-summary > :last-child {
	margin-bottom: 0;
}


/*------------------------------------*\
	COMPARISON TABLE  (core/table)
\*------------------------------------*/

/*
 * "Sticker" card: white table, black grid lines, blue header, hard offset
 * shadow. Tables break out of the article column to 1080px (capped to the
 * viewport) so the data gets room to breathe; inside the summary card they
 * stay at column width. The first column is sticky, so row labels stay in
 * view while the rest of the table swipes horizontally on small screens.
 */
.tuft-article .wp-block-table.is-style-tuft-compare {
	overflow-x: auto;
	background: #fff;
	border: 2px solid #000;
	border-radius: 20px;
	box-shadow: 12px 12px 0 #000;
	margin: 2.5rem 0 calc(2.5rem + 12px);

	/* Break out of the content column */
	width: min(1080px, calc(100vw - 2.5rem));
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}

/* Inside the summary card: same look, no breakout, softer offset */
.tuft-article .is-style-tuft-summary .wp-block-table.is-style-tuft-compare {
	width: 100%;
	position: static;
	transform: none;
	box-shadow: 8px 8px 0 #000;
	margin: 1.25rem 0 calc(1.25rem + 8px);
}

/* border-collapse stays `separate`: collapsed borders belong to the table,
   so they would not travel with the position:sticky first column. */
.tuft-article .is-style-tuft-compare table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	line-height: 1.5;
	border: 0;
}

.tuft-article .is-style-tuft-compare th {
	background: var(--notice);
	color: #fff;
	font-weight: 700;
	text-align: left;
	padding: .9em 1.1em;
}

.tuft-article .is-style-tuft-compare td {
	background: #fff;
	padding: .9em 1.1em;
	vertical-align: top;
}

/* Black grid lines, owned by the cells so they move with them */
.tuft-article .is-style-tuft-compare :is(th, td) {
	border: 0 solid #000;
	border-bottom-width: 2px;
}

.tuft-article .is-style-tuft-compare :is(th, td):not(:last-child) {
	border-right-width: 2px;
}

.tuft-article .is-style-tuft-compare tr:last-child td {
	border-bottom-width: 0;
}

.tuft-article .is-style-tuft-compare td:first-child {
	font-weight: 700;
}

/* Sticky first column: labels stay put while the data swipes */
.tuft-article .is-style-tuft-compare :is(th, td):first-child {
	position: sticky;
	left: 0;
	z-index: 1;
}

/* Row highlight — add `!` to the first cell of a row */
.tuft-article .is-style-tuft-compare tr.tuft-row-highlight td {
	background: var(--success-pastel);
}

/* Caption ("Values correct as of…") — sticky so it doesn't swipe away */
.tuft-article .is-style-tuft-compare figcaption {
	position: sticky;
	left: 0;
	text-align: center;
	font-size: .8em;
	opacity: .5;
	padding: .9em 1.1em 1.1em;
	margin: 0;
}

/* Status cells — applied server-side from `+` / `-` / `~` markers.
   "No" fades its text only — opacity on the cell itself would fade the
   cell's black borders to grey along with it. */
.tuft-article .tuft-yes     { color: #026824; font-weight: 700; }
.tuft-article .tuft-partial { color: #b57100; font-weight: 700; }
/* .tuft-article .tuft-no      { color: color-mix(in srgb, currentColor 50%, transparent); } */
.tuft-article .is-style-tuft-compare td.tuft-yes { background: var(--success-pastel); }
.tuft-article .is-style-tuft-compare td.tuft-partial { background: #fff0d9; }


/*------------------------------------*\
	CALLOUT
\*------------------------------------*/

/* Informational "note". Soft notice-blue surface with a rounded accent on
   the left — the inset shadow is clipped to the radius, so the accent's
   ends curve with the corners instead of the old hard red bar. */
.tuft-article .is-style-tuft-callout {
	background: var(--notice-pastel);
	border-radius: 12px;
	padding: 1.25rem 1.5rem 1.25rem 1.75rem;
	margin: 1.75rem 0;
	box-shadow: inset 4px 0 0 var(--notice);
}

.tuft-article .is-style-tuft-callout > :last-child {
	margin-bottom: 0;
}


/*------------------------------------*\
	CTA PANEL
\*------------------------------------*/

.tuft-article .is-style-tuft-cta {
	background:
		radial-gradient(120% 130% at 15% 0%, rgba(239, 57, 87, .22), transparent 55%),
		linear-gradient(150deg, var(--bg-dark), var(--bg-darkest));
	border-radius: 20px;
	padding: 3rem 2.25rem;
	text-align: center;
	margin: 2.75rem 0;
	box-shadow: 0 14px 34px rgba(64, 75, 93, .28);
}

/* Dark surface — copy inverts here by necessity. */
.tuft-article .is-style-tuft-cta,
.tuft-article .is-style-tuft-cta :is(h1, h2, h3, h4, h5, h6) {
	color: #fff;
}

.tuft-article .is-style-tuft-cta :is(h1, h2, h3, h4, h5, h6) {
	margin-top: 0;
}

.tuft-article .is-style-tuft-cta p {
	max-width: 500px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.75rem;
	opacity: .75;
}

/* Buttons: no rules here on purpose. The theme's .btn system in style.css
   styles .wp-block-button__link directly (solid), maps core's "Outline"
   style to .btn.hollow, and "Dark" (is-style-tuft-dark) to .btn.tertiary. */


/*------------------------------------*\
	CTA — MEDIA  (core/media-text)

	Image one side, text the other, in a red Tuft frame — the theme's
	`.card.halved` idiom (a bg-primary section wrapping a white card with a
	full-bleed image column and a content column), rebuilt on core/media-text
	so authors keep the native image picker and the "media on the right"
	toggle. The red frame is the container's own padding; the two panels sit
	flush in the middle, each rounded on its outer corners only.
\*------------------------------------*/

.tuft-article .wp-block-media-text.is-style-tuft-cta-media {
	align-items: stretch;
	/* Break out to the same width as the comparison tables */
	width: min(1080px, calc(100vw - 2.5rem));
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	margin: 2.75rem 0;
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(149, 157, 165, .22);
	overflow: hidden;
	color: var(--text);
}

/* Image column — the image is always a 4:3 box (object-fit crops to it) and
   centred in the column, so if the text is taller the image keeps its shape
   with matching white above/below rather than stretching. Container's
   overflow:hidden + radius rounds the outer corners in either orientation. */
.tuft-article .is-style-tuft-cta-media > .wp-block-media-text__media {
	align-self: stretch;
	display: grid;
	place-items: center;
	overflow: hidden;
	background: #fff;
}

.tuft-article .is-style-tuft-cta-media > .wp-block-media-text__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}

/* Content panel */
.tuft-article .is-style-tuft-cta-media > .wp-block-media-text__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 2.75rem 2.5rem;
	background: #fff;
}

.tuft-article .is-style-tuft-cta-media > .wp-block-media-text__content > :first-child { margin-top: 0; }
.tuft-article .is-style-tuft-cta-media > .wp-block-media-text__content > :last-child { margin-bottom: 0; }

/* Bigger, tighter headline than a normal in-flow h3 — this is the hook */
.tuft-article .is-style-tuft-cta-media .wp-block-media-text__content :is(h2, h3) {
	font-size: 2.8rem;
	line-height: 1.2;
	margin-bottom: .8rem;
}

/* Solid button uses --notice, not the theme's --primary red */
.tuft-article .is-style-tuft-cta-media .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: var(--notice);
	border-color: var(--notice);
}

.tuft-article .is-style-tuft-cta-media .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background: var(--notice-dark);
	border-color: var(--notice-dark);
}


/*------------------------------------*\
	PLATFORM CARD
\*------------------------------------*/

.tuft-article .is-style-tuft-platform {
	background: var(--bg-light);
	border: 1px solid var(--nav-border);
	border-radius: 10px;
	padding: 1.75rem;
	margin: 1.5rem 0;
}

.tuft-article .is-style-tuft-platform > :is(h1, h2, h3, h4, h5, h6):first-child {
	margin-top: 0;
}

/* Secondary descriptive lines — pair with .faded in the editor */
.tuft-article .tuft-tagline {
	font-size: .85em;
	font-style: italic;
	margin-bottom: .5rem;
}

.tuft-article .tuft-entity {
	font-size: .85em;
	margin-bottom: 1.25rem;
}

/* The positioning line directly under the platform name reads as a subtitle.
   (Live cards dropped the .tuft-tagline class, so target it structurally —
   the name is the card's only h3, the paragraph right after it is the line.) */
.tuft-article .is-style-tuft-platform h3 + p {
	margin-top: -.25rem;
	font-weight: 500;
}

/* The five sections: an intro (name + description) then four labelled rows
   — Pricing, Strengths, Limitations, Good for. Each label becomes a small
   eyebrow with a brand marker and a rule above it, so every section reads as
   its own block and the intro is set off from the details. The dt/dd pairs
   are separate paragraphs, so the rule above each `.tuft-dt` also draws the
   divider between the intro and the first section — no first-child needed. */
.tuft-article .tuft-dt {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin: 1.5rem 0 .6rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--nav-border);
	font-size: .72em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
}

.tuft-article .tuft-dt::before {
	content: "";
	flex: 0 0 auto;
	width: .6rem;
	height: .6rem;
	border-radius: 50%;
	background: var(--primary);
}

/* Semantic markers: strengths (positive) teal, limitations (caution) amber.
   Colour is on the marker only — the label text stays var(--text). */
.tuft-article .tuft-dt-strength::before { background: var(--secondary); }
.tuft-article .tuft-dt-limit::before    { background: var(--alert); }

.tuft-article .tuft-dd {
	margin: 0;
}

.tuft-article .is-style-tuft-platform > :last-child { margin-bottom: 0; }


/*------------------------------------*\
	HIGHLIGHT PANEL
\*------------------------------------*/

/* The article's Tuft product spotlight. An elevated white card lifted off
   the page with the theme's soft shadow, framed by a single primary top
   edge — brand red as an accent, not a fill. (overflow:hidden clips the
   ::before edge round to the card corners; nothing here needs to overflow.) */
.tuft-article .is-style-tuft-highlight {
	position: relative;
	overflow: hidden;
	counter-reset: tuft-hl;
	background: #fff;
	border: 3px solid var(--primary);
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(149, 157, 165, .22);
	padding: 2.5rem;
	margin: 2.25rem 0;
}

.tuft-article .is-style-tuft-highlight > :is(h1, h2, h3, h4, h5, h6):first-child {
	margin-top: 0;
}

/* This spotlight is a long run of parallel feature sub-heads (9 of them) —
   a wall of h4s. Number each one and rule it off from the last so the panel
   skims as an enumerated feature list rather than one dense block. The old
   full-width underline is gone (underlined headings read as links). */
.tuft-article .is-style-tuft-highlight h4 {
	counter-increment: tuft-hl;
	display: flex;
	align-items: center;
	gap: .8rem;
	margin: 2.25rem 0 .8rem;
	padding: 2.25rem 0 0;
	border: 0;
	border-top: 1px solid var(--nav-border);
}

/* First feature sits straight under the title — no rule, tighter gap.
   (Descendant, not `>`: the content lives inside .wp-block-group__inner-container.) */
.tuft-article .is-style-tuft-highlight h4:first-of-type {
	margin-top: 1.5rem;
	padding-top: 0;
	border-top: 0;
}

.tuft-article .is-style-tuft-highlight h4::before {
	content: counter(tuft-hl);
	flex: 0 0 auto;
	width: 3rem;
	height: 3rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--primary);
	color: #fff;
	font-size: 1.5rem;
	line-height: 1;
	-webkit-text-stroke: .25px;
}

.tuft-article .is-style-tuft-highlight > :last-child { margin-bottom: 0; }


/*------------------------------------*\
	TWO-CARD COMPARISON
\*------------------------------------*/

.tuft-article .tuft-fvp.wp-block-columns {
	gap: 1.5rem;
	margin: 1.75rem 0;
}

.tuft-article .is-style-tuft-fvp-free,
.tuft-article .is-style-tuft-fvp-paid {
	border-radius: 16px;
	padding: 1.75rem;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.tuft-article .is-style-tuft-fvp-free {
	background: #fff;
	border: 1px solid var(--nav-border);
	box-shadow: 0 8px 24px rgba(149, 157, 165, .18);
}

/* Dark surface — copy inverts here by necessity. The paid card is the
   recommended one, so it takes the brand glow and more lift to win the eye. */
.tuft-article .is-style-tuft-fvp-paid,
.tuft-article .is-style-tuft-fvp-paid :is(h1, h2, h3, h4, h5, h6) {
	color: #fff;
}

.tuft-article .is-style-tuft-fvp-paid {
	background:
		radial-gradient(120% 130% at 85% 0%, rgba(239, 57, 87, .25), transparent 55%),
		linear-gradient(150deg, var(--bg-dark), var(--bg-darkest));
	box-shadow: 0 14px 32px rgba(64, 75, 93, .30);
}

/* Label pill. The pattern emits `.tuft-badge`; the live post uses the theme's
   `.pill` (which self-centres and has no default fill). Style both, force
   left-alignment, and give each card its own fill. */
.tuft-article .is-style-tuft-fvp-free :is(.tuft-badge, .pill),
.tuft-article .is-style-tuft-fvp-paid :is(.tuft-badge, .pill) {
	display: inline-block;
	width: fit-content;
	left: 0;
	transform: none;
	margin: 0 0 .75rem;
	padding: .4em 1em;
	font-size: .68em;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	border-radius: 100px;
}

.tuft-article .is-style-tuft-fvp-free :is(.tuft-badge, .pill) {
	background: var(--bg-light);
	color: var(--text-light);
}

.tuft-article .is-style-tuft-fvp-paid :is(.tuft-badge, .pill) {
	background: var(--primary);
	color: #fff;
}

.tuft-article .is-style-tuft-fvp-free > :is(h1, h2, h3, h4, h5, h6),
.tuft-article .is-style-tuft-fvp-paid > :is(h1, h2, h3, h4, h5, h6) {
	margin-top: 0;
}

/* Marker lists */
.tuft-article .wp-block-list.is-style-tuft-check,
.tuft-article .wp-block-list.is-style-tuft-dash {
	list-style: none;
	padding: 0;
	margin: 1rem 0;
	flex: 1;
}

.tuft-article .is-style-tuft-check li,
.tuft-article .is-style-tuft-dash li {
	position: relative;
	padding: .5rem 0 .5rem 1.5rem;
	font-size: .9em;
	line-height: 1.5;
	border-bottom: 1px solid rgba(128, 128, 128, .15);
}

.tuft-article .is-style-tuft-check li:last-child,
.tuft-article .is-style-tuft-dash li:last-child {
	border-bottom: none;
}

.tuft-article .is-style-tuft-dash li::before {
	content: '\2013';
	position: absolute;
	left: 0;
	font-weight: 700;
	opacity: .5;
}

.tuft-article .is-style-tuft-check li::before {
	content: '\2713';
	position: absolute;
	left: 0;
	color: var(--secondary-light);
	font-weight: 700;
}

.tuft-article .tuft-verdict {
	font-size: .85em;
	line-height: 1.5;
	margin: 0;
	padding-top: .6rem;
	border-top: 1px solid rgba(128, 128, 128, .2);
}

.tuft-article .is-style-tuft-fvp-paid .tuft-verdict {
	opacity: .75;
}


/*------------------------------------*\
	DISCLOSURE
\*------------------------------------*/

.tuft-article .is-style-tuft-disclosure {
	margin-top: 2.5rem;
	padding: 1.5rem 1.75rem;
	background: var(--bg-light);
	border-radius: 8px;
	font-size: .85em;
}

.tuft-article .is-style-tuft-disclosure > :is(h1, h2, h3, h4, h5, h6):first-child {
	margin-top: 0;
}

.tuft-article .is-style-tuft-disclosure > :last-child {
	margin-bottom: 0;
}


/*------------------------------------*\
	STAT / FIGURE CARDS  (shared)

	One card primitive reused by the answer box price grid and the stat row.
	House rule: data figures are the accent, and the accent is --notice (blue),
	NOT red. Red is reserved for links. Surfaces are white on a --nav-border
	hairline; no red pastel fills anywhere. The grid container uses core's Grid
	layout (columnCount), so children are real grid items — we only set the gap
	and collapse to two columns on small screens.
\*------------------------------------*/

.tuft-article .tuft-grid {
	gap: .8rem;
	margin: 1.75rem 0;
}

.tuft-article .is-style-tuft-stat {
	background: #fff;
	border: 1px solid var(--nav-border);
	border-radius: 12px;
	padding: 1.4rem 1rem;
	text-align: center;
}

.tuft-article .tuft-stat-num {
	display: block;
	margin: 0 0 .4rem;
	font-size: 2.8rem;
	font-weight: 800;
	line-height: 1;
	color: var(--notice);
	font-variant-numeric: tabular-nums;
	-webkit-text-stroke: .25px;
}

.tuft-article .tuft-stat-label {
	display: block;
	margin: 0;
	font-size: 1.3rem;
	line-height: 1.45;
	color: var(--text-light);
}


/*------------------------------------*\
	ANSWER BOX  (with figure grid)

	The featured-answer hero: eyebrow, a keyword heading, a lead line, a grid of
	price tiles, and a footnote. A soft --bg-light card so the white price tiles
	read as tiles inside it.
\*------------------------------------*/

.tuft-article .is-style-tuft-qa-box {
	background: var(--bg-light);
	border: 1px solid var(--nav-border);
	border-radius: 16px;
	padding: 2rem 2.25rem;
	margin: 2rem 0;
}

.tuft-article .is-style-tuft-qa-box .tuft-eyebrow { margin-top: 0; }

.tuft-article .is-style-tuft-qa-box h2.wp-block-heading {
	margin: .2rem 0 .6rem;
	font-size: 2.4rem;
	line-height: 1.2;
}

.tuft-article .is-style-tuft-qa-box .tuft-grid { margin-bottom: .6rem; }

.tuft-article .tuft-qa-note {
	margin: .6rem 0 0;
	font-size: 1.1rem;
	color: var(--text-light);
}


/*------------------------------------*\
	MINI CARD  (city grid etc.)

	Left-aligned bordered card: a label, a figure (--notice), a note. Reuses
	.tuft-stat-num for the figure, sized down for the smaller card.
\*------------------------------------*/

.tuft-article .is-style-tuft-mini-card {
	background: #fff;
	border: 1px solid var(--nav-border);
	border-radius: 12px;
	padding: 1.4rem 1.5rem;
}

.tuft-article .tuft-card-name {
	margin: 0 0 .3rem;
	font-weight: 600;
}

.tuft-article .is-style-tuft-mini-card .tuft-stat-num {
	font-size: 2rem;
	margin-bottom: .3rem;
}

.tuft-article .tuft-card-note {
	margin: 0;
	font-size: 1.3rem;
	line-height: 1.45;
	color: var(--text-light);
}


/*------------------------------------*\
	CTA — INLINE BAR  (core/media-text? no: group + flex)

	Compact dark call-to-action: copy on the left, a button on the right, in the
	theme's dark surface. Built on a core Flex-layout group, so the paragraph and
	the buttons are real flex items. The button is --notice, not red (red = links
	only), matching the CTA-media button treatment.
\*------------------------------------*/

.tuft-article .is-style-tuft-cta-inline {
	background: linear-gradient(150deg, var(--bg-dark), var(--bg-darkest));
	border-radius: 14px;
	padding: 1.5rem 1.75rem;
	margin: 2.25rem 0;
	gap: 1.25rem 1.5rem;
}

.tuft-article .is-style-tuft-cta-inline > p {
	flex: 1 1 300px;
	margin: 0;
	color: rgba(255, 255, 255, .85);
	line-height: 1.5;
}

.tuft-article .is-style-tuft-cta-inline > p strong { color: #fff; }

.tuft-article .is-style-tuft-cta-inline .wp-block-buttons { margin: 0; }

.tuft-article .is-style-tuft-cta-inline .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: var(--notice);
	border-color: var(--notice);
}

.tuft-article .is-style-tuft-cta-inline .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background: var(--notice-dark);
	border-color: var(--notice-dark);
}


/*------------------------------------*\
	INTERVAL LIST  (rebooking cadence)

	Rows of: a round --notice badge (the interval), a title + descriptor, and a
	muted cadence label on the right. Each row is a core Flex-layout group, so
	the three parts are flex items; the container just draws the dividers.
\*------------------------------------*/

.tuft-article .is-style-tuft-freq { margin: 1.75rem 0; }

.tuft-article .tuft-freq-row {
	gap: 1.2rem;
	padding: 1.1rem 0;
	border-bottom: 1px solid var(--nav-border);
}

.tuft-article .is-style-tuft-freq .tuft-freq-row:last-child { border-bottom: none; }

.tuft-article .tuft-freq-badge {
	flex: 0 0 auto;
	width: 4.4rem;
	height: 4.4rem;
	margin: 0;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--notice-pastel);
	color: var(--notice);
	font-weight: 700;
	font-size: 1.15rem;
	line-height: 1;
	text-align: center;
}

.tuft-article .tuft-freq-info {
	flex: 1;
	margin: 0;
	line-height: 1.4;
}

.tuft-article .tuft-freq-info strong { font-weight: 600; }

.tuft-article .tuft-freq-desc {
	display: block;
	font-size: 1.3rem;
	color: var(--text-light);
}

.tuft-article .tuft-freq-weeks {
	flex: 0 0 auto;
	margin: 0;
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--text-light);
	white-space: nowrap;
}


/*------------------------------------*\
	DOT LIST  (neutral marker list)

	Neutral bullet list (used in the mobile-vs-salon compare cards). Marker is a
	small --notice dot; matches the check/dash list rhythm.
\*------------------------------------*/

.tuft-article .wp-block-list.is-style-tuft-dot {
	list-style: none;
	padding: 0;
	margin: 1rem 0;
	flex: 1;
}

.tuft-article .is-style-tuft-dot li {
	position: relative;
	padding: .5rem 0 .5rem 1.5rem;
	font-size: .9em;
	line-height: 1.5;
	border-bottom: 1px solid rgba(128, 128, 128, .15);
}

.tuft-article .is-style-tuft-dot li:last-child { border-bottom: none; }

.tuft-article .is-style-tuft-dot li::before {
	content: "";
	position: absolute;
	left: .15rem;
	top: .95em;
	width: .55rem;
	height: .55rem;
	border-radius: 50%;
	background: var(--notice);
}

/* Compare cards here carry a title after the pill; keep it tight to the pill. */
.tuft-article .is-style-tuft-fvp-free .pill + h4 { margin-top: .25rem; }


/*------------------------------------*\
	RESPONSIVE
\*------------------------------------*/

@media (max-width: 640px) {
	.tuft-article .tuft-fvp.wp-block-columns { gap: 1rem; }

	/* Keep the hierarchy but ease the top sizes down for narrow screens */
	.tuft-article h2.wp-block-heading { font-size: 2.7rem; margin-top: 3rem; }
	.tuft-article h3.wp-block-heading { font-size: 2.1rem; margin-top: 2.6rem; }
	.tuft-article h4.wp-block-heading { font-size: 1.8rem; margin-top: 2.2rem; }

	/* TOC collapses to a single column */
	.tuft-article .wp-block-rank-math-toc-block nav > ul { grid-template-columns: 1fr; }

	/* Figure grids (prices, stats, cities) collapse to two columns */
	.tuft-article .tuft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/* Inline CTA stacks: copy over button */
	.tuft-article .is-style-tuft-cta-inline { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 600px) {
	.tuft-article .wp-block-table.is-style-tuft-compare {
		width: calc(100vw - 1.5rem);
		border-radius: 14px;
		box-shadow: 8px 8px 0 #000;
		margin-bottom: calc(2.5rem + 8px);
	}

	.tuft-article .is-style-tuft-compare th,
	.tuft-article .is-style-tuft-compare td { padding: .6em .8em; }

	.tuft-article .is-style-tuft-platform  { padding: 1.25rem; }
	.tuft-article .is-style-tuft-highlight { padding: 1.75rem; }
	.tuft-article .is-style-tuft-cta       { padding: 2rem 1.5rem; }
	.tuft-article .is-style-tuft-fvp-free,
	.tuft-article .is-style-tuft-fvp-paid  { padding: 1.5rem; }

	/* Match the tables' mobile width; the stacked image needs its own height
	   (no content beside it to set one, and the img is absolutely positioned). */
	.tuft-article .wp-block-media-text.is-style-tuft-cta-media {
		width: calc(100vw - 1.5rem);
	}
	.tuft-article .is-style-tuft-cta-media.is-stacked-on-mobile > .wp-block-media-text__media {
		min-height: 220px;
	}
	.tuft-article .is-style-tuft-cta-media.is-stacked-on-mobile > .wp-block-media-text__content {
		padding: 2rem 1.75rem;
	}
}