/* ===========================================================
   Stack Pressure Test — studio-mixer aesthetic.
   Six pressure faders on the left feed twelve platform candles
   on the right. Candle heights animate live with brand-color glow.
   =========================================================== */

.ced-spt {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	padding-block: var(--pad-section);
	padding-inline: var(--gutter-x);
	position: relative;
	/* overflow: clip (not hidden) — clips overflowing decorations WITHOUT
	   creating a scrolling ancestor that would break the sticky stage
	   panel on the right column. */
	overflow: clip;
	/* Viewport-breakout — the page template constrains content to 780px
	   (contentSize). We need viewport width to fit 6 candles per row.
	   The negative-margin trick + body's `overflow-x: clip` is the
	   standard pattern used across this theme's full-bleed sections. */
	max-width: none !important;
	width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	border-radius: 0 !important;
}

/* Soft mesh of accent radial washes behind the console — keeps the
   black backdrop from feeling clinical. */
.ced-spt::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(40% 30% at 15% 25%, rgba(20, 110, 245, 0.12) 0%, transparent 60%),
		radial-gradient(40% 30% at 85% 75%, rgba(149, 191, 71, 0.10) 0%, transparent 60%),
		radial-gradient(30% 25% at 70% 15%, rgba(255, 122, 89, 0.08) 0%, transparent 60%);
	pointer-events: none;
}
.ced-spt > * { position: relative; z-index: 1; }

/* ── HEADER ───────────────────────────────────────────────── */
.ced-spt__head {
	max-width: var(--page-max);
	margin: 0 auto var(--wp--preset--spacing--lg);
	display: grid;
	gap: 0.65rem;
}
.ced-spt__title {
	font-size: clamp(2rem, 4.5vw, 4rem);
	font-weight: 500;
	letter-spacing: -0.04em;
	line-height: 1.04;
	margin: 0;
	max-width: 22ch;
	color: var(--wp--preset--color--paper);
}
.ced-spt__lede {
	color: var(--wp--preset--color--mist);
	max-width: 70ch;
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.55;
	margin: 0;
}

/* ── CONSOLE LAYOUT ─────────────────────────────────────────
   Two columns on desktop — fader bank narrow, candle stage wide.
   Single column on tablet/mobile.                             */
.ced-spt__console {
	max-width: var(--page-max);
	margin-inline: auto;
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	align-items: start;
}
@media (max-width: 900px) {
	.ced-spt__console { grid-template-columns: 1fr; }
}

/* ── FADER BANK ─────────────────────────────────────────────
   Each fader is a vertical strip styled like a studio mixer
   channel: label up top, hint, the track itself with tick marks
   and a colored fill, and a current value at the bottom.       */
.ced-spt__faders {
	background: var(--wp--preset--color--graphite);
	border: 1px solid var(--ced-line-08);
	border-radius: var(--wp--custom--radius--lg);
	padding: 1.5rem 1.5rem;
	display: grid;
	gap: 1rem;
}

/* Group header — sits above each band of 6 faders. The first header
   ("Project pressure") gets no top margin since it abuts the bank's
   own padding; the second ("Tech stack pressure") gets a divider line
   above it to mark the band change.                                    */
.ced-spt__group {
	display: grid;
	gap: 0.15rem;
	padding-top: 0.25rem;
}
.ced-spt__group + .ced-spt__fader,
.ced-spt__group:not(:first-child) { /* placeholder for future overrides */ }
.ced-spt__group[data-fader-group="stack"] {
	margin-top: 0.5rem;
	padding-top: 1rem;
	border-top: 1px solid var(--ced-line-08);
}
.ced-spt__group-label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.78rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--lime);
	font-weight: 600;
}
.ced-spt__group-hint {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	letter-spacing: 0.02em;
	line-height: 1.4;
	color: rgba(232, 229, 222, 0.6);
	text-transform: none;
}

.ced-spt__fader {
	display: grid;
	gap: 0.35rem;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"label   value"
		"hint    hint"
		"track   track";
	align-items: baseline;
	cursor: pointer;
	padding-bottom: 0.85rem;
	border-bottom: 1px dashed var(--ced-line-08);
}
.ced-spt__fader:last-child { border-bottom: 0; padding-bottom: 0; }
/* The fader that closes a group (the 6th in each band) doesn't need
   its dashed border since the next group header brings its own divider. */
.ced-spt__fader + .ced-spt__group .ced-spt__group {
	/* no-op, structural placeholder */
}

.ced-spt__fader-label {
	grid-area: label;
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.25;
	color: var(--wp--preset--color--paper);
}
.ced-spt__fader-hint {
	grid-area: hint;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.78rem;
	letter-spacing: 0.02em;
	line-height: 1.35;
	color: rgba(232, 229, 222, 0.7);
	margin-bottom: 0.5rem;
}
.ced-spt__fader-value {
	grid-area: value;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 1.1rem;
	font-weight: 500;
	color: var(--wp--preset--color--lime);
	font-variant-numeric: tabular-nums;
	min-width: 2ch;
	text-align: right;
}

/* Track + custom-styled native range input layered on top so the
   thumb is keyboard-accessible but the visual is fully owned. */
.ced-spt__fader-track {
	grid-area: track;
	position: relative;
	height: 36px;
	display: flex;
	align-items: center;
}
.ced-spt__fader-track input[type="range"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	background: transparent;
	-webkit-appearance: none;
	appearance: none;
	cursor: ew-resize;
	z-index: 3;
}
.ced-spt__fader-track input[type="range"]:focus { outline: none; }
.ced-spt__fader-track input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--wp--preset--color--lime);
	border: 3px solid var(--wp--preset--color--ink);
	box-shadow:
		0 0 0 1px var(--wp--preset--color--lime),
		0 0 18px rgba(203, 108, 230, 0.55);
	cursor: ew-resize;
	transition: transform 160ms var(--ease-smooth), box-shadow 160ms var(--ease-smooth);
}
.ced-spt__fader-track input[type="range"]:hover::-webkit-slider-thumb,
.ced-spt__fader-track input[type="range"]:focus-visible::-webkit-slider-thumb {
	transform: scale(1.12);
	box-shadow:
		0 0 0 1px var(--wp--preset--color--lime),
		0 0 28px rgba(203, 108, 230, 0.9);
}
.ced-spt__fader-track input[type="range"]::-moz-range-thumb {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--wp--preset--color--lime);
	border: 3px solid var(--wp--preset--color--ink);
	box-shadow: 0 0 18px rgba(203, 108, 230, 0.55);
	cursor: ew-resize;
}

.ced-spt__fader-fill {
	position: absolute;
	left: 0; top: 50%;
	transform: translateY(-50%);
	height: 4px;
	width: var(--fill, 50%);
	background: linear-gradient(90deg, var(--wp--preset--color--lime), rgba(203, 108, 230, 0.4));
	border-radius: 2px;
	pointer-events: none;
	z-index: 2;
	transition: width 200ms var(--ease-smooth);
}
.ced-spt__fader-ticks {
	position: absolute;
	left: 0; right: 0; top: 50%;
	transform: translateY(-50%);
	height: 4px;
	background: rgba(232, 229, 222, 0.06);
	border-radius: 2px;
	z-index: 1;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-inline: 0;
}
.ced-spt__fader-tick {
	width: 1px;
	height: 6px;
	background: rgba(232, 229, 222, 0.18);
	margin-top: -1px;
}
.ced-spt__fader-tick.is-major {
	height: 10px;
	background: rgba(232, 229, 222, 0.32);
}

/* ── CANDLE STAGE ───────────────────────────────────────────
   The big visualization. 12 vertical bars in two rows. Heights
   driven by --pct, colors by --accent (per platform brand).    */
.ced-spt__stage {
	background: var(--wp--preset--color--graphite);
	border: 1px solid var(--ced-line-08);
	border-radius: var(--wp--custom--radius--lg);
	padding: 1.5rem clamp(1rem, 2vw, 2rem);
	display: grid;
	gap: 1.25rem;
	align-self: start;
}

/* ── STICKY STAGE ──────────────────────────────────────────
   With 12 faders to drag on the left, the user shouldn't have to
   scroll up to see the live results. On desktop the stage panel
   sticks below the fixed header so the candles (and the mode
   tabs) stay in view the whole time. If the stage is taller than
   the available viewport, it scrolls internally with a tinted
   scrollbar that blends with the dark UI.                          */
@media (min-width: 901px) {
	.ced-spt__stage {
		position: sticky;
		top: 96px;
		max-height: calc(100vh - 120px);
		overflow-y: auto;
		scrollbar-width: thin;
		scrollbar-color: rgba(203, 108, 230, 0.28) transparent;
	}
	.ced-spt__stage::-webkit-scrollbar { width: 6px; }
	.ced-spt__stage::-webkit-scrollbar-track { background: transparent; }
	.ced-spt__stage::-webkit-scrollbar-thumb {
		background: rgba(203, 108, 230, 0.28);
		border-radius: 3px;
	}
	.ced-spt__stage::-webkit-scrollbar-thumb:hover {
		background: rgba(203, 108, 230, 0.55);
	}
}
.ced-spt__stage-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--ced-line-08);
	/* Sticky inside the stage so tabs remain visible if the stage
	   needs to scroll internally (vs-mode with 12 paired rows can
	   exceed the viewport height). The negative margin + extra
	   padding extends the graphite background to cover whatever
	   content scrolls beneath the tabs.                           */
	position: sticky;
	top: 0;
	z-index: 3;
	background: var(--wp--preset--color--graphite);
	margin: -1.5rem clamp(-1rem, -2vw, -2rem) 0;
	padding: 1.5rem clamp(1rem, 2vw, 2rem) 1rem;
}
.ced-spt__stage-meta {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--fog);
}

/* ── MODE TOGGLE ────────────────────────────────────────────
   Two-tab radio-driven pill. Active tab gets a lime fill; the
   inactive tab is a subtle outline. */
.ced-spt__mode {
	display: inline-flex;
	background: rgba(232, 229, 222, 0.04);
	border: 1px solid var(--ced-line-08);
	border-radius: 999px;
	padding: 4px;
	gap: 2px;
}
.ced-spt__mode-tab {
	position: relative;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--fog);
	padding: 0.55rem 1rem;
	border-radius: 999px;
	cursor: pointer;
	transition: color 240ms var(--ease-smooth), background 240ms var(--ease-smooth);
}
.ced-spt__mode-tab input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.ced-spt__mode-tab:hover { color: var(--wp--preset--color--paper); }
.ced-spt__mode-tab.is-active {
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--lime);
}

/* ── VIEW SWITCHING ─────────────────────────────────────────
   Two stacked panels, only the one matching data-mode is visible. */
.ced-spt__view { display: none; }
.ced-spt[data-mode="fit"] .ced-spt__view--fit { display: block; }
.ced-spt[data-mode="vs"]  .ced-spt__view--vs  { display: grid; gap: 1rem; }

/* In vs-mode the fader bank is irrelevant — fade it out. We still keep
   it in the layout (toggling back preserves the visitor's pressures).  */
.ced-spt[data-mode="vs"] .ced-spt__faders {
	opacity: 0.35;
	filter: saturate(0.6);
	transition: opacity 320ms var(--ease-smooth), filter 320ms var(--ease-smooth);
}

/* 12 candles in a fluid grid — auto-fit prevents overflow when the
   stage shrinks, so candles always fill the available width without
   clipping. Each candle has a sensible min-width (110px) so it stays
   legible; the grid reflows naturally as viewport changes. */
.ced-spt__candles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	gap: 0.6rem;
	align-items: end;
	min-height: 260px;
}
@media (max-width: 640px) {
	.ced-spt__candles {
		grid-template-columns: repeat(auto-fit, minmax(95px, 1fr));
		min-height: 200px;
	}
}

.ced-spt__candle {
	display: grid;
	grid-template-rows: auto 1fr auto auto;
	gap: 0.4rem;
	align-items: end;
	min-height: 240px;
	padding-bottom: 0.5rem;
	transition: filter 320ms var(--ease-smooth), transform 320ms var(--ease-emph);
	cursor: default;
}
.ced-spt__candle:hover { transform: translateY(-2px); }

.ced-spt__candle-rank {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--fog);
	text-align: center;
}
.ced-spt__candle.is-top .ced-spt__candle-rank {
	color: var(--accent);
}

.ced-spt__candle-bar {
	height: 200px;
	position: relative;
	background: rgba(232, 229, 222, 0.04);
	border-radius: 4px;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
}
.ced-spt__candle-fill {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: var(--pct, 50%);
	background: linear-gradient(
		180deg,
		var(--accent) 0%,
		color-mix(in oklab, var(--accent) 70%, transparent) 60%,
		color-mix(in oklab, var(--accent) 30%, transparent) 100%
	);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
	transition: height 480ms var(--ease-emph), box-shadow 320ms var(--ease-smooth);
}
.ced-spt__candle.is-top .ced-spt__candle-fill {
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.3),
		0 0 24px color-mix(in oklab, var(--accent) 60%, transparent),
		0 0 4px color-mix(in oklab, var(--accent) 80%, transparent);
}

.ced-spt__candle-name {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.65rem;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--mist);
	text-align: center;
	min-height: 1.6rem;
	line-height: 1.2;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ced-spt__candle.is-top .ced-spt__candle-name {
	color: var(--wp--preset--color--paper);
	font-weight: 500;
}
.ced-spt__candle-pct {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--wp--preset--color--mist);
	text-align: center;
	font-variant-numeric: tabular-nums;
	transition: color 320ms var(--ease-smooth);
}
.ced-spt__candle.is-top .ced-spt__candle-pct {
	color: var(--accent);
	font-size: 0.95rem;
}

/* Dim the non-top candles slightly so the top-3 read first. */
.ced-spt__candle:not(.is-top) {
	filter: saturate(0.7) opacity(0.78);
}

/* ── TOP-3 TAKES PANEL ──────────────────────────────────────
   Below the candle grid, three editorial cards explain WHY each
   top platform fits the current pressures. The cards swap content
   as the ranking changes (handled by view.js). Share button is to
   the right on wide screens, below on mobile. */
.ced-spt__takes-wrap {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 1.5rem;
	align-items: start;
	padding-top: 1rem;
	border-top: 1px solid var(--ced-line-08);
}
@media (max-width: 720px) {
	.ced-spt__takes-wrap { grid-template-columns: 1fr; }
}

.ced-spt__takes {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
}
@media (max-width: 720px) { .ced-spt__takes { grid-template-columns: 1fr; } }

/* ── SHARE BUTTON ───────────────────────────────────────────
   Compact pill with an icon. Tooltip-style "Copied!" replaces the
   label on click. Style mirrors the ghost button pattern from the
   header so it doesn't compete with the lime CTA elsewhere. */
.ced-spt__share {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: transparent;
	border: 1px solid var(--ced-line-18);
	color: var(--wp--preset--color--paper);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 0.7rem 1rem;
	border-radius: 999px;
	cursor: pointer;
	transition: border-color 240ms var(--ease-smooth), background 240ms var(--ease-smooth), color 240ms var(--ease-smooth);
	white-space: nowrap;
}
.ced-spt__share:hover,
.ced-spt__share:focus-visible {
	/* Invert to lime-filled with dark text — unmistakable high-contrast
	   hover. The previous lime-text-on-faintly-tinted-bg was visible but
	   low contrast and users reported the text seeming to "disappear". */
	border-color: var(--wp--preset--color--lime);
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--lime);
}
.ced-spt__share:hover svg { color: var(--wp--preset--color--ink); }
.ced-spt__share.is-copied {
	border-color: var(--wp--preset--color--lime);
	background: var(--wp--preset--color--lime);
	color: var(--wp--preset--color--ink);
}
.ced-spt__share svg { flex-shrink: 0; }

/* ── VS VIEW LAYOUT ─────────────────────────────────────────
   Top: two platform pickers separated by a big "VS" wordmark.
   Below: 12 dimension rows with paired bars (one per platform).
   Bottom: total-strength summary + share button.

   The `display: grid` + `gap` lives on the earlier data-mode rule
   so the VS view stays fully hidden when the FIT tab is active.
   Previously this block had its own `.ced-spt__view--vs { display: grid }`
   rule with no parent-mode scope, which silently overrode the
   `display: none` default and caused the VS view to bleed through
   underneath the FIT view (the bug this comment now prevents).    */

.ced-spt__vs-picks {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: clamp(0.75rem, 2vw, 1.5rem);
	align-items: end;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--ced-line-08);
}
.ced-spt__vs-pick {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.65rem;
	align-items: center;
	position: relative;
}
.ced-spt__vs-pick-label {
	grid-column: 1 / -1;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--fog);
	margin-bottom: 0.4rem;
}
.ced-spt__vs-pick select {
	width: 100%;
	background: rgba(232, 229, 222, 0.04);
	border: 1px solid var(--ced-line-18);
	color: var(--wp--preset--color--paper);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 500;
	letter-spacing: -0.015em;
	padding: 0.75rem 2.25rem 0.75rem 1rem;
	border-radius: 12px;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3 5l4 4 4-4' stroke='%23F4F2EE' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.85rem center;
	background-size: 14px;
	transition: border-color 240ms var(--ease-smooth);
}
.ced-spt__vs-pick select:hover,
.ced-spt__vs-pick select:focus { border-color: var(--wp--preset--color--lime); outline: none; }
.ced-spt__vs-pick-swatch {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.18);
	flex-shrink: 0;
	transition: background 320ms var(--ease-smooth);
}
.ced-spt__vs-versus {
	font-family: var(--wp--preset--font-family--mono);
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	font-weight: 500;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--ash);
	text-align: center;
	align-self: center;
}

/* Dimension rows — one per axis. Label on the left, two bars on the
   right side by side. The bars are normalized to 100% of the row's
   bar-zone, with the numeric strength value at the end of each bar. */
.ced-spt__vs-rows {
	list-style: none;
	margin: 0;
	padding: 0 0 1rem 0;
	display: grid;
	gap: 0.4rem;
	/* padding-bottom reserves clearance for the sticky summary that
	   sits below — otherwise the last row (Integration ecosystem)
	   crowds the summary visually and looks clipped, especially at
	   intermediate widths like 1440px where the summary's top edge
	   sits closer to the last row than to other rows. */
}
.ced-spt__vs-row {
	display: grid;
	grid-template-columns: 170px 1fr;
	gap: 1rem;
	align-items: center;
	padding: 0.45rem 0;
	border-bottom: 1px dashed var(--ced-line-08);
}
.ced-spt__vs-row:last-child { border-bottom: 0; }
.ced-spt__vs-row-label {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	color: var(--wp--preset--color--paper);
	letter-spacing: -0.01em;
}
.ced-spt__vs-row-bars {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem;
}
.ced-spt__vs-row-bar {
	position: relative;
	height: 24px;
	background: rgba(232, 229, 222, 0.04);
	border-radius: 4px;
	overflow: hidden;
	display: flex;
	align-items: center;
	padding-right: 0.65rem;
	justify-content: flex-end;
}
.ced-spt__vs-row-bar-fill {
	position: absolute;
	left: 0; top: 0; bottom: 0;
	background: linear-gradient(90deg, var(--accent), color-mix(in oklab, var(--accent) 50%, transparent));
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
	border-radius: 4px;
	transition: width 480ms var(--ease-emph);
}
.ced-spt__vs-row-bar-num {
	position: relative;
	z-index: 1;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.95rem;
	font-weight: 600;
	/* Paper-light text reads cleanly both inside the colored fill
	   (the gradient is bright enough) AND outside it in the dark
	   bar background. The soft dark halo guarantees contrast in the
	   former case, where the fill colour gets close to the text. */
	color: var(--wp--preset--color--paper);
	font-variant-numeric: tabular-nums;
	text-shadow:
		0 0 8px rgba(0, 0, 0, 0.55),
		0 1px 2px rgba(0, 0, 0, 0.45);
}
.ced-spt__vs-row-bar--b { direction: rtl; padding-right: 0; padding-left: 0.65rem; justify-content: flex-end; }
.ced-spt__vs-row-bar--b .ced-spt__vs-row-bar-fill { left: auto; right: 0; }
.ced-spt__vs-row-bar--b .ced-spt__vs-row-bar-num { direction: ltr; }

@media (max-width: 720px) {
	.ced-spt__vs-row { grid-template-columns: 1fr; gap: 0.6rem; }
	.ced-spt__vs-row-label { font-size: 0.85rem; }
}

/* Summary row at the bottom of vs view.
   Sticky to the bottom of the stage panel so the WINNER announcement
   is always visible — previously, with 12 rows + summary, the summary
   got clipped below the stage panel's max-height and visitors couldn't
   see who actually won the comparison.

   Bleeds into the stage's horizontal padding via negative inline
   margins so the summary fills the stage edge-to-edge — but NO
   negative bottom margin, otherwise the summary visually overlaps
   the last row (Integration ecosystem) when the stage isn't scrolling.
*/
.ced-spt__vs-summary {
	position: sticky;
	bottom: 0;
	z-index: 2;
	background: var(--wp--preset--color--graphite);
	margin-left:   clamp(-2rem, -2vw, -1rem);
	margin-right:  clamp(-2rem, -2vw, -1rem);
	margin-top:    1rem;
	padding: 1.25rem clamp(1rem, 2vw, 2rem) 1.25rem;
	display: grid;
	grid-template-columns: auto 1fr auto auto;
	align-items: center;
	gap: 1rem;
	border-top: 1px solid rgba(203, 108, 230, 0.2);
	/* Softer, shorter upward shadow so the row above doesn't visually
	   fade. The lime-tinted top border + opaque graphite background
	   give the summary clear visual separation without bleeding over
	   the last row. */
	box-shadow: 0 -4px 12px rgba(10, 10, 13, 0.55);
}
.ced-spt__vs-summary-label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--fog);
}
.ced-spt__vs-summary strong {
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 500;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--lime);
}
.ced-spt__vs-summary [data-vs-summary-detail] {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	color: var(--wp--preset--color--mist);
	letter-spacing: 0.02em;
	/* Mid-width viewports (1280-1500) didn't quite have room for the
	   full "X vs Y · WinnerName stronger overall" to sit on one line
	   in the summary grid. line-height tightens so any wrap doesn't
	   throw the row out of vertical alignment, and min-width: 0 lets
	   the column shrink before pushing the share button off-row. */
	min-width: 0;
	line-height: 1.3;
}
@media (max-width: 720px) {
	.ced-spt__vs-summary { grid-template-columns: 1fr; text-align: left; gap: 0.5rem; }
}

/* ── SCROLL-TRIGGER REVEAL ──────────────────────────────────
   On first viewport entry, candles start at 0 height and rise to
   their --pct target with a staggered cascade by DOM order. The
   IntersectionObserver in view.js adds .is-revealed after the
   section crosses the trigger zone. */
.ced-spt__candle .ced-spt__candle-fill {
	transition: height 720ms var(--ease-emph), box-shadow 320ms var(--ease-smooth);
}
.ced-spt[data-spt]:not(.is-revealed) .ced-spt__candle-fill {
	height: 0 !important;
}
.ced-spt.is-revealed .ced-spt__candle:nth-child(1)  .ced-spt__candle-fill { transition-delay: 60ms; }
.ced-spt.is-revealed .ced-spt__candle:nth-child(2)  .ced-spt__candle-fill { transition-delay: 120ms; }
.ced-spt.is-revealed .ced-spt__candle:nth-child(3)  .ced-spt__candle-fill { transition-delay: 180ms; }
.ced-spt.is-revealed .ced-spt__candle:nth-child(4)  .ced-spt__candle-fill { transition-delay: 240ms; }
.ced-spt.is-revealed .ced-spt__candle:nth-child(5)  .ced-spt__candle-fill { transition-delay: 300ms; }
.ced-spt.is-revealed .ced-spt__candle:nth-child(6)  .ced-spt__candle-fill { transition-delay: 360ms; }
.ced-spt.is-revealed .ced-spt__candle:nth-child(7)  .ced-spt__candle-fill { transition-delay: 420ms; }
.ced-spt.is-revealed .ced-spt__candle:nth-child(8)  .ced-spt__candle-fill { transition-delay: 480ms; }
.ced-spt.is-revealed .ced-spt__candle:nth-child(9)  .ced-spt__candle-fill { transition-delay: 540ms; }
.ced-spt.is-revealed .ced-spt__candle:nth-child(10) .ced-spt__candle-fill { transition-delay: 600ms; }
.ced-spt.is-revealed .ced-spt__candle:nth-child(11) .ced-spt__candle-fill { transition-delay: 660ms; }
.ced-spt.is-revealed .ced-spt__candle:nth-child(12) .ced-spt__candle-fill { transition-delay: 720ms; }

/* After the initial reveal, subsequent fader changes should respond
   instantly — clear the stagger delays. Class is added by view.js
   once the cascade has finished. */
.ced-spt.is-settled .ced-spt__candle .ced-spt__candle-fill {
	transition-delay: 0ms;
}

.ced-spt__take {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.85rem;
	align-items: start;
	padding: 0.85rem 0;
	transition: opacity 240ms var(--ease-smooth);
}
.ced-spt__take-rank {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 1.25rem;
	font-weight: 500;
	letter-spacing: -0.02em;
	color: var(--accent);
	line-height: 1;
	padding-right: 0.85rem;
	border-right: 1px solid var(--ced-line-08);
}
.ced-spt__take-name {
	font-size: var(--wp--preset--font-size--base);
	font-weight: 500;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--paper);
	margin: 0 0 0.25rem;
}
.ced-spt__take-body {
	color: var(--wp--preset--color--mist);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.5;
	margin: 0;
}

/* ── REASONING PANEL (per take card) ─────────────────────────
   "Wins for you on:" + top 3 contributing axes. Built from
   (pressure − 5) × strength contributions in view.js, regenerated
   on every fader change. Empty-state hint when no slider is above
   neutral so visitors know the tool waits for input.            */
.ced-spt__take-why {
	margin-top: 0.65rem;
	padding-top: 0.65rem;
	border-top: 1px dashed var(--ced-line-08);
}
.ced-spt__take-why-empty {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.7rem;
	letter-spacing: 0.04em;
	color: rgba(232, 229, 222, 0.5);
	line-height: 1.4;
	margin: 0;
	font-style: italic;
}
.ced-spt__take-why-label {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--lime);
	font-weight: 600;
	margin-bottom: 0.4rem;
}
.ced-spt__take-why-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.25rem;
}
.ced-spt__take-why-item {
	display: flex;
	justify-content: space-between;
	gap: 0.6rem;
	font-size: 0.78rem;
	line-height: 1.35;
}
.ced-spt__take-why-axis {
	color: var(--wp--preset--color--paper);
	font-weight: 500;
}
.ced-spt__take-why-math {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.7rem;
	color: rgba(232, 229, 222, 0.55);
	white-space: nowrap;
}

/* ── TAKES ACTIONS ROW (share + report CTA) ──────────────────
   Two buttons side by side. Share is the existing ghost button.
   Report CTA is the new lead-gen button — lime fill to stand out. */
.ced-spt__takes-actions {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	align-items: stretch;
	min-width: 200px;
}
@media (max-width: 720px) {
	.ced-spt__takes-actions { flex-direction: row; flex-wrap: wrap; min-width: 0; }
	.ced-spt__takes-actions > * { flex: 1 1 calc(50% - 0.3rem); }
}
.ced-spt__report-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	background: var(--wp--preset--color--lime);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 700;
	padding: 0.75rem 1rem;
	border: 1px solid var(--wp--preset--color--lime);
	border-radius: 999px;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(203, 108, 230, 0.22);
	transition: transform 220ms var(--ease-smooth), box-shadow 220ms ease, background 220ms ease;
	white-space: nowrap;
}
.ced-spt__report-cta:hover,
.ced-spt__report-cta:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(203, 108, 230, 0.38);
}
.ced-spt__report-cta svg { flex-shrink: 0; }

/* ── LEAD-GEN MODAL — FORM STEP ─────────────────────────────
   Re-uses the .ced-spt__modal base styles from the trust modal
   but adds form-specific layouts: fields stack vertically, labels
   are mono uppercase, inputs are bordered + dark.                 */
.ced-spt__report-lede {
	color: rgba(232, 229, 222, 0.78);
	font-size: 0.9rem;
	line-height: 1.55;
	margin: 0 0 1.25rem;
}
.ced-spt__report-form {
	display: grid;
	gap: 0.9rem;
}
.ced-spt__report-field {
	display: grid;
	gap: 0.3rem;
}
.ced-spt__report-field-label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.62rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(232, 229, 222, 0.7);
	font-weight: 600;
}
.ced-spt__report-field-opt {
	color: rgba(232, 229, 222, 0.4);
	font-weight: 400;
}
.ced-spt__report-field input,
.ced-spt__report-field textarea {
	width: 100%;
	background: rgba(232, 229, 222, 0.04);
	border: 1px solid var(--ced-line-18);
	border-radius: 10px;
	padding: 0.7rem 0.9rem;
	color: var(--wp--preset--color--paper);
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.95rem;
	transition: border-color 220ms ease, background 220ms ease;
}
.ced-spt__report-field input:focus,
.ced-spt__report-field textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--lime);
	background: rgba(203, 108, 230, 0.04);
}
.ced-spt__report-field textarea { resize: vertical; min-height: 70px; line-height: 1.4; }
.ced-spt__report-field input::placeholder,
.ced-spt__report-field textarea::placeholder {
	color: rgba(232, 229, 222, 0.32);
}
.ced-spt__report-form-foot {
	display: grid;
	gap: 0.55rem;
	padding-top: 0.5rem;
	border-top: 1px solid var(--ced-line-08);
	margin-top: 0.25rem;
}
.ced-spt__report-form-fine {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6rem;
	letter-spacing: 0.04em;
	color: rgba(232, 229, 222, 0.45);
	line-height: 1.5;
}
.ced-spt__report-form-error {
	margin: 0;
	padding: 0.6rem 0.85rem;
	background: rgba(255, 107, 71, 0.1);
	border: 1px solid rgba(255, 107, 71, 0.3);
	border-radius: 8px;
	color: #ffaa90;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
}

/* Success step */
.ced-spt__report-success-eyebrow .ced-spt__modal-dot {
	background: var(--wp--preset--color--lime);
}
.ced-spt__report-success-lede {
	color: rgba(232, 229, 222, 0.78);
	font-size: 0.9rem;
	line-height: 1.55;
	margin: 0 0 1.25rem;
}
.ced-spt__report-success-actions {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
}

/* ─────────────────────────────────────────────────────────────
   TRUST SECTION
   Sits below the tool. Three columns ("what it is" / "what it
   isn't" / "how to use the result") + an algorithm explainer +
   a CTA. Honest framing of an opinionated tool — turns skepticism
   into a conversation rather than hiding from it.
   ───────────────────────────────────────────────────────────── */
.ced-spt__trust {
	max-width: var(--page-max);
	margin: var(--wp--preset--spacing--xl) auto 0;
	padding: 2rem clamp(1.25rem, 3vw, 2.5rem);
	background:
		linear-gradient(165deg, rgba(232, 229, 222, 0.025) 0%, rgba(203, 108, 230, 0.02) 100%);
	border: 1px solid var(--ced-line-08);
	border-radius: var(--wp--custom--radius--lg);
	position: relative;
	overflow: hidden;
}
.ced-spt__trust::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 1px;
	background: linear-gradient(90deg,
		transparent 0%,
		rgba(203, 108, 230, 0.35) 50%,
		transparent 100%);
}

.ced-spt__trust-head {
	max-width: 70ch;
	margin-bottom: 1.75rem;
	display: grid;
	gap: 0.6rem;
}
.ced-spt__trust-title {
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	font-weight: 500;
	letter-spacing: -0.025em;
	line-height: 1.1;
	margin: 0;
	color: var(--wp--preset--color--paper);
}
.ced-spt__trust-title-aside {
	color: var(--wp--preset--color--lime);
	font-style: italic;
	font-weight: 400;
	letter-spacing: -0.02em;
}
.ced-spt__trust-lede {
	color: rgba(232, 229, 222, 0.78);
	font-size: 1rem;
	line-height: 1.55;
	margin: 0;
	max-width: 65ch;
}

/* 3-column grid on desktop, stack on tablet/mobile. Cards have
   slightly different tinted left borders so the eye can tell the
   three categories apart without reading the headers. */
.ced-spt__trust-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	margin-bottom: 1.75rem;
}
@media (max-width: 900px) {
	.ced-spt__trust-grid { grid-template-columns: 1fr; }
}
.ced-spt__trust-card {
	padding: 1.25rem 1.25rem 1.1rem;
	background: rgba(10, 10, 13, 0.4);
	border: 1px solid var(--ced-line-08);
	border-radius: var(--wp--custom--radius--md);
	position: relative;
}
.ced-spt__trust-card::before {
	content: "";
	position: absolute;
	top: 1.25rem; bottom: 1.25rem; left: 0;
	width: 2px;
	border-radius: 2px;
}
.ced-spt__trust-card--is::before   { background: rgba(203, 108, 230, 0.55); }
.ced-spt__trust-card--isnt::before { background: rgba(255, 107, 71, 0.55); }
.ced-spt__trust-card--use::before  { background: rgba(78, 205, 196, 0.55); }

.ced-spt__trust-card-tag {
	display: inline-block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.65rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(232, 229, 222, 0.6);
	margin-bottom: 0.75rem;
}
.ced-spt__trust-card--is   .ced-spt__trust-card-tag { color: var(--wp--preset--color--lime); }
.ced-spt__trust-card--isnt .ced-spt__trust-card-tag { color: #ff6b47; }
.ced-spt__trust-card--use  .ced-spt__trust-card-tag { color: #4ecdc4; }

.ced-spt__trust-card ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 0.6rem;
}
.ced-spt__trust-card li {
	position: relative;
	padding-left: 1.1rem;
	color: rgba(232, 229, 222, 0.85);
	font-size: 0.9rem;
	line-height: 1.45;
}
.ced-spt__trust-card li::before {
	content: "→";
	position: absolute;
	left: 0;
	top: 0;
	color: rgba(232, 229, 222, 0.3);
	font-family: var(--wp--preset--font-family--mono);
}
.ced-spt__trust-card strong {
	color: var(--wp--preset--color--paper);
	font-weight: 500;
}

/* Algorithm details — collapsible. Re-uses the look of the old
   recipe block but inside the new trust container.                 */
.ced-spt__trust-math {
	border: 1px solid var(--ced-line-08);
	border-radius: var(--wp--custom--radius--md);
	background: rgba(232, 229, 222, 0.02);
	padding: 1.1rem 1.25rem;
	margin-bottom: 1.5rem;
}
.ced-spt__trust-math summary {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--lime);
	cursor: pointer;
	list-style: none;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
}
.ced-spt__trust-math summary::-webkit-details-marker { display: none; }
.ced-spt__trust-math summary::before {
	content: "+";
	display: inline-block;
	width: 1.2em; height: 1.2em;
	border: 1px solid var(--ced-line-18);
	border-radius: 999px;
	text-align: center;
	line-height: 1.1em;
	font-size: 0.9rem;
	transition: transform 240ms var(--ease-smooth);
}
.ced-spt__trust-math[open] summary::before { content: "−"; }
.ced-spt__trust-math-body {
	padding-top: 1rem;
	color: rgba(232, 229, 222, 0.78);
	font-size: 0.95rem;
	line-height: 1.6;
	max-width: 80ch;
}
.ced-spt__trust-math-body p { margin: 0 0 0.85rem; }
.ced-spt__trust-math-body p:last-child { margin-bottom: 0; }
.ced-spt__trust-math-body strong { color: var(--wp--preset--color--paper); }
.ced-spt__trust-math-body em {
	color: var(--wp--preset--color--lime);
	font-style: normal;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.92em;
}

/* CTA — turns the trust section into a conversion point. */
.ced-spt__trust-cta {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 1.25rem;
	align-items: center;
	padding: 1.25rem 1.4rem;
	background: rgba(203, 108, 230, 0.04);
	border: 1px solid rgba(203, 108, 230, 0.18);
	border-radius: var(--wp--custom--radius--md);
}
@media (max-width: 720px) {
	.ced-spt__trust-cta { grid-template-columns: 1fr; }
}
.ced-spt__trust-cta-text {
	margin: 0;
	color: rgba(232, 229, 222, 0.85);
	font-size: 0.95rem;
	line-height: 1.5;
}
.ced-spt__trust-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	background: var(--wp--preset--color--lime);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 700;
	padding: 0.85rem 1.2rem;
	border-radius: 999px;
	text-decoration: none;
	box-shadow: 0 6px 18px rgba(203, 108, 230, 0.25);
	transition: transform 220ms var(--ease-smooth), box-shadow 220ms ease;
	white-space: nowrap;
}
.ced-spt__trust-cta-btn:hover,
.ced-spt__trust-cta-btn:focus-visible {
	/* Explicit color + bg so the dark-on-lime contract holds whatever
	   global anchor rule sits later in the cascade. */
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--lime);
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(203, 108, 230, 0.4);
}
.ced-spt__trust-cta-btn:hover svg { color: var(--wp--preset--color--ink); }

/* ─────────────────────────────────────────────────────────────
   TRUST TRIGGER (in the stage head)
   Small "?" button sitting next to the mode tabs. Always visible
   on both fit and vs views, opens the modal that explains why
   the result is trustable in 3 concise points.
   ───────────────────────────────────────────────────────────── */
.ced-spt__trust-trigger {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: transparent;
	border: 1px solid var(--ced-line-18);
	color: rgba(232, 229, 222, 0.75);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.62rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 500;
	padding: 0.4rem 0.7rem;
	border-radius: 999px;
	cursor: pointer;
	transition: border-color 220ms var(--ease-smooth),
				color 220ms var(--ease-smooth),
				background 220ms var(--ease-smooth);
	margin-left: 0.5rem;
	white-space: nowrap;
}
.ced-spt__trust-trigger:hover {
	/* Lime-filled with dark text on hover — same high-contrast pattern
	   as share buttons. Low-opacity lime tint was hard to read against
	   lime text. */
	border-color: var(--wp--preset--color--lime);
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--lime);
}
.ced-spt__trust-trigger:hover svg { color: var(--wp--preset--color--ink); }
.ced-spt__trust-trigger:focus-visible {
	outline: 2px solid var(--wp--preset--color--lime);
	outline-offset: 2px;
}
.ced-spt__trust-trigger svg { flex-shrink: 0; }

/* The stage-head needs to allow the trigger to wrap on narrow widths */
@media (max-width: 720px) {
	.ced-spt__stage-head { flex-wrap: wrap; }
	.ced-spt__trust-trigger { margin-left: auto; }
}

/* ─────────────────────────────────────────────────────────────
   TRUST MODAL
   Lightweight no-framework dialog. Triggered by [data-trust-open],
   closed by ESC, backdrop click, or the × button. Backdrop is a
   <button> so it gets a tab stop and works without JS focus logic
   in screen readers.
   ───────────────────────────────────────────────────────────── */
.ced-spt__modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: grid;
	place-items: center;
	padding: 1rem;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 220ms var(--ease-smooth), visibility 0s linear 220ms;
}
.ced-spt__modal.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 220ms var(--ease-smooth), visibility 0s linear 0s;
}

.ced-spt__modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(8, 8, 11, 0.75);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	border: 0;
	padding: 0;
	cursor: pointer;
	/* Reset native button styles */
	appearance: none;
	-webkit-appearance: none;
	font: inherit;
	color: inherit;
}

.ced-spt__modal-panel {
	position: relative;
	width: 100%;
	max-width: 540px;
	background: linear-gradient(165deg,
		rgba(22, 22, 28, 0.98) 0%,
		rgba(14, 14, 18, 0.98) 100%);
	border: 1px solid rgba(203, 108, 230, 0.28);
	border-radius: 18px;
	padding: 2rem 1.75rem 1.5rem;
	color: var(--wp--preset--color--paper);
	box-shadow:
		0 30px 80px rgba(0, 0, 0, 0.5),
		0 8px 24px rgba(0, 0, 0, 0.35),
		inset 0 1px 0 rgba(255, 255, 255, 0.04);
	transform: translateY(20px) scale(0.97);
	transition: transform 320ms var(--ease-emph);
	max-height: 85vh;
	overflow-y: auto;
}
.ced-spt__modal.is-open .ced-spt__modal-panel {
	transform: translateY(0) scale(1);
}

.ced-spt__modal-close {
	position: absolute;
	top: 0.85rem;
	right: 0.85rem;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(232, 229, 222, 0.06);
	border: 1px solid rgba(232, 229, 222, 0.12);
	color: rgba(232, 229, 222, 0.7);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 200ms ease, color 200ms ease, transform 220ms var(--ease-smooth);
}
.ced-spt__modal-close:hover {
	background: rgba(232, 229, 222, 0.12);
	color: var(--wp--preset--color--paper);
	transform: rotate(90deg);
}

.ced-spt__modal-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--lime);
	font-weight: 600;
	margin-bottom: 0.85rem;
}
.ced-spt__modal-dot {
	width: 6px;
	height: 6px;
	background: var(--wp--preset--color--lime);
	border-radius: 50%;
	box-shadow: 0 0 0 0 rgba(203, 108, 230, 0.6);
	animation: ced-spt-pulse 1.8s ease-out infinite;
}

.ced-spt__modal-title {
	font-size: 1.4rem;
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.2;
	margin: 0 0 1.25rem;
	color: var(--wp--preset--color--paper);
}

.ced-spt__modal-truths {
	list-style: none;
	counter-reset: trust;
	padding: 0;
	margin: 0 0 1.5rem;
	display: grid;
	gap: 1.1rem;
}
.ced-spt__modal-truths li {
	counter-increment: trust;
	position: relative;
	padding-left: 2.4rem;
	color: rgba(232, 229, 222, 0.78);
	font-size: 0.9rem;
	line-height: 1.55;
}
.ced-spt__modal-truths li::before {
	content: counter(trust, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--lime);
	background: rgba(203, 108, 230, 0.1);
	border: 1px solid rgba(203, 108, 230, 0.3);
	border-radius: 999px;
	padding: 0.15rem 0.4rem;
	line-height: 1;
}
.ced-spt__modal-truths strong {
	display: block;
	color: var(--wp--preset--color--paper);
	font-weight: 500;
	font-size: 0.98rem;
	margin-bottom: 0.25rem;
}
.ced-spt__modal-truths em {
	color: var(--wp--preset--color--lime);
	font-style: normal;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.88em;
}

.ced-spt__modal-footer {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	align-items: center;
	padding-top: 1rem;
	border-top: 1px solid var(--ced-line-08);
}
.ced-spt__modal-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: var(--wp--preset--color--lime);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 700;
	padding: 0.7rem 1.1rem;
	border-radius: 999px;
	text-decoration: none;
	box-shadow: 0 4px 14px rgba(203, 108, 230, 0.25);
	transition: transform 220ms var(--ease-smooth), box-shadow 220ms ease;
}
.ced-spt__modal-cta:hover,
.ced-spt__modal-cta:focus-visible {
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--lime);
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgba(203, 108, 230, 0.4);
}
.ced-spt__modal-cta:hover svg { color: var(--wp--preset--color--ink); }
.ced-spt__modal-secondary {
	background: transparent;
	border: 1px solid var(--ced-line-18);
	color: rgba(232, 229, 222, 0.75);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.65rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 0.7rem 1rem;
	border-radius: 999px;
	cursor: pointer;
	transition: color 200ms ease, border-color 200ms ease;
}
.ced-spt__modal-secondary:hover,
.ced-spt__modal-secondary:focus-visible {
	color: var(--wp--preset--color--paper);
	border-color: rgba(232, 229, 222, 0.5);
	background: rgba(232, 229, 222, 0.05);
}

@media (max-width: 480px) {
	.ced-spt__modal-panel {
		padding: 1.5rem 1.25rem 1.25rem;
	}
	.ced-spt__modal-footer { flex-direction: column; align-items: stretch; }
	.ced-spt__modal-cta,
	.ced-spt__modal-secondary { justify-content: center; }
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
	.ced-spt__modal,
	.ced-spt__modal-panel,
	.ced-spt__modal-close,
	.ced-spt__modal-dot {
		transition: opacity 0.15s linear !important;
		animation: none !important;
		transform: none !important;
	}
}

/* ─────────────────────────────────────────────────────────────
   EYE-CATCH LAYER
   Visual decisions that make this section read as the interactive
   centerpiece of the page (not just another content block):
     1. Top accent stripe + soft inner glow when scrolled into view
     2. Pulsing "Live tool" attention bar above the eyebrow
     3. Lime highlight under the wordmark in the title
     4. Feature pills under the lede so visitors see what it does
     5. Bobbing "Drag me" hint on the first fader, dismissed on use
   ───────────────────────────────────────────────────────────── */

/* ── 1. SECTION ACCENT + INNER GLOW ─────────────────────────
   A 2px lime hairline at the very top edge of the section so it
   visually separates from the work-showcase above. Plus a soft
   interior radial glow that intensifies once .is-revealed lands.   */
.ced-spt {
	border-top: 1px solid rgba(203, 108, 230, 0.18);
	box-shadow: 0 -1px 0 rgba(203, 108, 230, 0.35);
}
.ced-spt::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(60% 40% at 50% 0%, rgba(203, 108, 230, 0.10) 0%, transparent 70%);
	opacity: 0;
	transition: opacity 1.2s var(--ease-smooth);
	z-index: 0;
}
.ced-spt.is-revealed::after { opacity: 1; }

/* ── 2. ATTENTION BAR ───────────────────────────────────────
   The first thing the eye lands on. Pulsing dot signals "this is
   live", the stats meta hints at the depth without making you read.
   Width is content-fit so it reads as a chip, not a paragraph.    */
.ced-spt__attention {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	width: max-content;
	max-width: 100%;
	padding: 0.45rem 0.95rem;
	background: rgba(203, 108, 230, 0.06);
	border: 1px solid rgba(203, 108, 230, 0.28);
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.68rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--lime);
	margin-bottom: 0.25rem;
}
.ced-spt__live {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 600;
}
.ced-spt__live-dot {
	width: 8px;
	height: 8px;
	background: var(--wp--preset--color--lime);
	border-radius: 50%;
	box-shadow: 0 0 0 0 rgba(203, 108, 230, 0.7);
	animation: ced-spt-pulse 1.8s ease-out infinite;
	flex-shrink: 0;
}
.ced-spt__attention-divider {
	opacity: 0.4;
	font-size: 1em;
}
.ced-spt__attention-meta {
	color: rgba(232, 229, 222, 0.75);
	font-weight: 400;
	letter-spacing: 0.12em;
}
@keyframes ced-spt-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(203, 108, 230, 0.7); transform: scale(1); }
	70%  { box-shadow: 0 0 0 10px rgba(203, 108, 230, 0); transform: scale(1.08); }
	100% { box-shadow: 0 0 0 0 rgba(203, 108, 230, 0); transform: scale(1); }
}

/* ── 3. TITLE MARK ──────────────────────────────────────────
   Underline-style highlight behind the "Stack Pressure Test"
   wordmark in the title. Doesn't compete with the candle colors
   below; subtle enough to read as editorial, not gimmicky.        */
.ced-spt__title-mark {
	position: relative;
	display: inline-block;
	color: var(--wp--preset--color--lime);
	z-index: 0;
}
.ced-spt__title-mark::before {
	content: "";
	position: absolute;
	left: -0.08em;
	right: -0.08em;
	bottom: 0.1em;
	height: 0.18em;
	background: rgba(203, 108, 230, 0.22);
	border-radius: 2px;
	z-index: -1;
	transition: height 320ms var(--ease-smooth);
}
.ced-spt:hover .ced-spt__title-mark::before,
.ced-spt.is-revealed .ced-spt__title-mark::before {
	height: 0.28em;
}

/* Eyebrow tone — the existing .ced-eyebrow utility is fine; this
   override just nudges letter-spacing for the longer label we use. */
.ced-spt__eyebrow { letter-spacing: 0.16em; }

/* ── 4. FEATURE PILLS ───────────────────────────────────────
   A horizontal row of 4 pills under the lede. Each is a quick
   feature scan; together they make the tool's promise concrete.   */
.ced-spt__pills {
	list-style: none;
	padding: 0;
	margin: 0.5rem 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.ced-spt__pill {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.9rem;
	background: rgba(232, 229, 222, 0.03);
	border: 1px solid var(--ced-line-08);
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	color: rgba(232, 229, 222, 0.85);
	transition: border-color 240ms var(--ease-smooth),
				color 240ms var(--ease-smooth),
				background 240ms var(--ease-smooth),
				transform 240ms var(--ease-smooth);
}
.ced-spt__pill:hover {
	/* Stronger lime border + slightly more visible tint so the hover
	   state reads clearly without sacrificing the calm default look. */
	border-color: rgba(203, 108, 230, 0.6);
	color: var(--wp--preset--color--paper);
	background: rgba(203, 108, 230, 0.1);
	transform: translateY(-1px);
}
.ced-spt__pill-icon {
	display: inline-flex;
	width: 1.1em;
	height: 1.1em;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--lime);
	font-size: 0.95em;
	line-height: 1;
}

/* ── 5. DRAG-ME HINT ────────────────────────────────────────
   A small lime pill anchored to the right edge of the first fader
   track. Bobs gently to draw the eye. Once any fader gets input,
   JS adds [data-drag-used] on the root and the hint fades out.    */
.ced-spt__fader--first { position: relative; }
.ced-spt__drag-hint {
	position: absolute;
	top: 50%;
	right: -0.5rem;
	transform: translate(100%, -50%);
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.4rem 0.7rem;
	background: var(--wp--preset--color--lime);
	color: var(--wp--preset--color--ink);
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 700;
	white-space: nowrap;
	pointer-events: none;
	box-shadow: 0 8px 24px rgba(203, 108, 230, 0.28),
				0 0 0 1px rgba(20, 20, 26, 0.15);
	z-index: 5;
	animation: ced-spt-hint-bob 1.8s ease-in-out infinite;
	transition: opacity 360ms var(--ease-smooth),
				transform 360ms var(--ease-smooth);
}
.ced-spt__drag-hint-arrow {
	display: inline-block;
	font-size: 0.95rem;
	line-height: 1;
	animation: ced-spt-hint-arrow 1.1s ease-in-out infinite;
}
@keyframes ced-spt-hint-bob {
	0%, 100% { transform: translate(100%, -50%); }
	50%      { transform: translate(calc(100% - 4px), -50%); }
}
@keyframes ced-spt-hint-arrow {
	0%, 100% { transform: translateY(0); opacity: 1; }
	50%      { transform: translateY(2px); opacity: 0.7; }
}

/* Once visitor drags any fader (or returns having dragged before)
   the hint dissolves to keep the UI clean. */
.ced-spt[data-drag-used] .ced-spt__drag-hint {
	opacity: 0;
	transform: translate(100%, -50%) scale(0.85);
}

/* In vs-mode the fader bank is dimmed, hide the hint entirely. */
.ced-spt[data-mode="vs"] .ced-spt__drag-hint {
	opacity: 0;
	pointer-events: none;
}

/* Mobile: the hint would overflow the fader bank's right edge on
   small screens (no room beside the track). Reposition above the
   track on viewports under 900px to avoid the overflow.            */
@media (max-width: 900px) {
	.ced-spt__drag-hint {
		top: -1.5rem;
		right: 50%;
		transform: translate(50%, 0);
	}
	@keyframes ced-spt-hint-bob {
		0%, 100% { transform: translate(50%, 0); }
		50%      { transform: translate(50%, -4px); }
	}
	.ced-spt[data-drag-used] .ced-spt__drag-hint {
		transform: translate(50%, -8px) scale(0.85);
	}
}

/* Headline + lede top margin nudge — with the attention bar added
   above, tighten the gap so they read as one block, not two.       */
.ced-spt__eyebrow { margin-top: 0.25rem; }

/* ── REDUCED MOTION ─────────────────────────────────────────
   Kill the candle height transitions; everything snaps to value. */
@media (prefers-reduced-motion: reduce) {
	.ced-spt__candle-fill,
	.ced-spt__fader-fill,
	.ced-spt__candle {
		transition: none;
	}
	.ced-spt__live-dot,
	.ced-spt__drag-hint,
	.ced-spt__drag-hint-arrow {
		animation: none;
	}
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE DEFENSE LAYER
   ───────────────────────────────────────────────────────────────
   Catches edge-case visibility issues at narrow widths that the
   per-component media queries above don't cover. Added after a
   static audit identified these likely failure modes:
     • VS picks (Platform A | VS | Platform B) cramping under 600px
     • Stage-head wrapping awkwardly under 720px
     • Reasoning math text overflowing narrow take cards
     • Long axis labels overflowing fader bank or VS rows
     • Lead-gen modal form fields cramped on small phones
     • Section's own decorations bleeding past viewport edges
   ═══════════════════════════════════════════════════════════════ */

/* ── Text-only overflow safeguards.
   ───────────────────────────────────────────────────────────────
   IMPORTANT: do NOT use a universal `.ced-spt * { max-width: 100% }`
   here — it overrides intentional internal max-width constraints
   (`max-width: var(--page-max)` on the console + head + trust
   section, `max-width: 540px` on modal panels, etc.) and causes
   everything to stretch full-bleed. The section's own `overflow:
   clip` is enough to prevent the section itself from causing page
   scroll; we only need to break long unbreakable words inside
   labels/headings so they don't push out of their grid cells. */
.ced-spt__candle-name,
.ced-spt__fader-label,
.ced-spt__fader-hint,
.ced-spt__vs-row-label,
.ced-spt__take-name,
.ced-spt__take-body {
	min-width: 0;       /* allow flex/grid items to shrink */
	overflow-wrap: anywhere; /* break long words rather than overflow */
}

/* ── VS picks: stack vertically under 600px ──────────────────
   At ~600px wide, the "Platform A | VS | Platform B" three-column
   layout makes each select narrower than the platform names. Stack
   them so each select gets the full width. The "VS" wordmark sits
   between them as a small divider. */
@media (max-width: 600px) {
	.ced-spt__vs-picks {
		grid-template-columns: 1fr;
		gap: 0.85rem;
		text-align: center;
	}
	.ced-spt__vs-versus {
		font-size: 0.85rem;
		opacity: 0.6;
		padding: 0;
	}
	.ced-spt__vs-pick {
		grid-template-columns: 1fr auto;
		text-align: left;
	}
}

/* ── Stage-head: stack tabs + meta + trust-trigger cleanly ───
   At ≤ 600px, the 720px wrap rule already wraps elements, but the
   spacing can look chaotic. Tighten it so each piece sits on its
   own line if needed. */
@media (max-width: 600px) {
	.ced-spt__stage-head {
		gap: 0.65rem;
		padding-bottom: 0.75rem;
	}
	.ced-spt__mode { width: 100%; justify-content: center; }
	.ced-spt__stage-meta { width: 100%; text-align: center; }
	.ced-spt__trust-trigger {
		margin-left: 0;
		width: 100%;
		justify-content: center;
	}
}

/* ── Reasoning panel: math line wraps on narrow cards ────────
   The "axis name — you X × rated Y" row uses justify-content:
   space-between. At narrow widths, the axis label and math should
   stack on their own lines rather than colliding. */
@media (max-width: 540px) {
	.ced-spt__take-why-item {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.1rem;
	}
	.ced-spt__take-why-math {
		font-size: 0.65rem;
		opacity: 0.85;
	}
}

/* ── Takes panel actions: single-column on small phones ───────
   The 720px rule makes share + report buttons sit side-by-side at
   50% width each. Below ~420px that's too narrow for the labels.
   Stack vertically full-width instead. */
@media (max-width: 420px) {
	.ced-spt__takes-actions { flex-direction: column; }
	.ced-spt__takes-actions > * { flex: 1 1 100%; width: 100%; justify-content: center; }
}

/* ── Lead-gen modal: form input sizing on small phones ───────
   Default font-size: 16px on inputs to prevent iOS Safari from
   zooming when focused. Smaller padding so the form doesn't
   overflow vertically on short viewports. */
@media (max-width: 480px) {
	.ced-spt__report-field input,
	.ced-spt__report-field textarea {
		font-size: 16px;  /* iOS zoom-prevention threshold */
		padding: 0.65rem 0.8rem;
	}
	.ced-spt__report-form { gap: 0.75rem; }
	.ced-spt__report-lede,
	.ced-spt__report-success-lede {
		font-size: 0.85rem;
	}
	.ced-spt__modal-title { font-size: 1.2rem; }
}

/* ── Fader bank: ensure labels never overflow at narrow widths */
@media (max-width: 480px) {
	.ced-spt__fader-label { font-size: 0.95rem; }
	.ced-spt__fader-hint { font-size: 0.7rem; letter-spacing: 0; }
	.ced-spt__fader-value { font-size: 1rem; }
	.ced-spt__group-label { font-size: 0.7rem; letter-spacing: 0.14em; }
}

/* ── VS rows: tighter bars on narrow phones, prevent number
   overlap. At very narrow widths the paired-bar layout (1fr 1fr)
   gives each bar ~140px which is OK, but the percentage label at
   the end of a near-empty bar can collide with the start of the
   adjacent bar. Reduce padding and number font-size. */
@media (max-width: 480px) {
	.ced-spt__vs-row-bar {
		height: 22px;
		padding-right: 0.45rem;
	}
	.ced-spt__vs-row-bar-num {
		font-size: 0.82rem;
	}
	.ced-spt__vs-row-bars { gap: 0.35rem; }
}

/* ── Pills row: wrap cleanly on narrow widths ───────────────── */
@media (max-width: 480px) {
	.ced-spt__pills { gap: 0.35rem; }
	.ced-spt__pill {
		font-size: 0.62rem;
		padding: 0.4rem 0.7rem;
	}
}

/* ── Attention bar: stack the meta info if it overflows ──── */
@media (max-width: 540px) {
	.ced-spt__attention {
		flex-wrap: wrap;
		gap: 0.3rem 0.5rem;
		max-width: 100%;
	}
	.ced-spt__attention-divider { display: none; }
	.ced-spt__attention-meta {
		flex: 1 1 100%;
		font-size: 0.6rem;
	}
}

/* ── Trust trigger button at narrow widths: ensure SVG + text
   stay on one line, no awkward wrapping. */
@media (max-width: 360px) {
	.ced-spt__trust-trigger { font-size: 0.58rem; padding: 0.35rem 0.55rem; }
	.ced-spt__trust-trigger svg { width: 11px; height: 11px; }
}

/* ── Modal: ensure it never exceeds viewport height ──────── */
.ced-spt__modal-panel {
	max-height: calc(100vh - 2rem);
	overflow-y: auto;
}
@media (max-width: 480px) {
	.ced-spt__modal { padding: 0.75rem; }
	.ced-spt__modal-panel { max-height: calc(100vh - 1.5rem); }
}

/* ═══════════════════════════════════════════════════════════════
   PDF REPORT — light theme, multi-page document layout.
   ───────────────────────────────────────────────────────────────
   Triggered when ?report=<hash> is in the URL. The render.php
   short-circuits and emits the report HTML instead of the tool.
   This stylesheet block controls the visual identity for that
   report — light backdrop, dark text, brand-tinted accents.

   Each .spt-report__page is sized roughly to US-Letter (~816×1056
   at 96dpi). page-break-after: always makes the html2pdf library
   produce clean, multi-page PDFs.
   ═══════════════════════════════════════════════════════════════ */

/* ── Override the dark page backdrop when in report mode ── */
.ced-spt-report-wrap {
	background: #F4F2EE !important;
	color: #0a0a0d !important;
	padding: 0 !important;
	max-width: none !important;
	width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}

/* When the page is in report mode (body has `.spt-report-mode`,
   set by PHP), hide every other block on the page so the report
   reads as a clean standalone document. The header + footer
   template-parts stay visible for navigation + legal/contact info,
   but content blocks above and beside the report are suppressed. */
body.spt-report-mode .ced-spt-hero,
body.spt-report-mode .ced-spt-hero-wrap,
body.spt-report-mode .ced-marquee-wrap,
body.spt-report-mode .ced-trust-strip,
body.spt-report-mode .ced-cap-scatter-wrap,
body.spt-report-mode .ced-spotlight,
body.spt-report-mode .ced-final-cta {
	display: none !important;
}

/* The page template wraps everything in a .wp-block-group with
   contentSize constraints. In report mode, let the wrapper go
   full-bleed so the report fills the viewport. */
body.spt-report-mode main.wp-block-group {
	max-width: none !important;
	padding: 0 !important;
}

/* Light-theme base for the whole report */
.spt-report {
	background: #F4F2EE;
	color: #0a0a0d;
	font-family: var(--wp--preset--font-family--display, "Inter", system-ui, sans-serif);
	width: 100%;
	min-height: 100vh;
	padding: 0;
	margin: 0;
}

/* ── FLOATING TOOLBAR (top) — hidden in PDF ── */
.spt-report__toolbar {
	position: sticky;
	top: 0;
	z-index: 10;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1.5rem;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-bottom: 1px solid #E5E5DD;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
	flex-wrap: wrap;
}
.spt-report__back {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: #0a0a0d;
	text-decoration: none;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 600;
	padding: 0.5rem 0.85rem;
	border: 1px solid #D9D9D2;
	border-radius: 999px;
	background: white;
	transition: border-color 200ms, background 200ms;
}
.spt-report__back:hover { border-color: #0a0a0d; background: #FAFAF7; }
.spt-report__toolbar-meta {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	color: #555;
	flex: 1;
	text-align: center;
}
.spt-report__toolbar-meta strong { color: #0a0a0d; font-weight: 600; }
.spt-report__download {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: #0a0a0d;
	color: #F4F2EE;
	border: 1px solid #0a0a0d;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 700;
	padding: 0.7rem 1.2rem;
	border-radius: 999px;
	cursor: pointer;
	transition: transform 200ms, box-shadow 200ms;
	white-space: nowrap;
}
.spt-report__download:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(10, 10, 13, 0.25);
}
.spt-report__download[disabled] { opacity: 0.6; cursor: wait; transform: none; }

/* ── PAGE — each section is a "page" of the PDF ── */
.spt-report__page {
	background: white;
	color: #0a0a0d;
	width: 816px;
	max-width: 100%;
	min-height: 1056px;
	margin: 2rem auto;
	padding: 56px 64px;
	box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
	border-radius: 4px;
	page-break-after: always;
	position: relative;
	overflow: hidden;
}
.spt-report__page:last-child { page-break-after: auto; }

/* Constrain the toolbar at the very top — first page starts under it. */
.spt-report .spt-report__page:first-of-type { margin-top: 1rem; }

@media (max-width: 880px) {
	.spt-report__page { padding: 36px 28px; min-height: 0; margin: 1rem auto; }
}

/* ── COVER PAGE ───────────────────────────────────── */
.spt-report__cover {
	display: grid;
	grid-template-rows: auto 1fr auto;
	gap: 2rem;
	background:
		linear-gradient(165deg, #FFFFFF 0%, #FAF8F2 60%, #F0EEDF 100%);
}
.spt-report__cover-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid #E5E5DD;
}
.spt-report__brand {
	display: inline-flex;
	align-items: center;
	gap: 0.85rem;
}
.spt-report__brand-mark { display: inline-flex; align-items: center; }
.spt-report__brand-text {
	display: inline-flex;
	flex-direction: column;
	line-height: 1;
}
.spt-report__brand-name {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 1.4rem;
	letter-spacing: -0.02em;
	color: #0a0a0d;
}
.spt-report__brand-sub {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.62rem;
	letter-spacing: 0.22em;
	color: #777;
	margin-top: 0.15rem;
}
.spt-report__brand-name--dark { color: #0a0a0d; }
.spt-report__doc-id {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.65rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #777;
}

.spt-report__cover-body {
	display: grid;
	gap: 1.5rem;
	align-content: center;
}
.spt-report__cover-eyebrow {
	display: inline-block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.65rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #777;
	padding: 0.35rem 0.7rem;
	background: rgba(203, 108, 230, 0.25);
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 999px;
	width: max-content;
}
.spt-report__cover-title {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2rem, 3.5vw, 2.85rem);
	font-weight: 500;
	letter-spacing: -0.035em;
	line-height: 1.1;
	margin: 0;
	color: #0a0a0d;
	max-width: 22ch;
}
.spt-report__cover-title em {
	font-style: italic;
	font-weight: 500;
	color: #444;
}
.spt-report__cover-lede {
	font-size: 1.05rem;
	line-height: 1.55;
	color: #444;
	margin: 0;
	max-width: 60ch;
}
.spt-report__cover-meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1.25rem 2rem;
	padding-top: 1.25rem;
	border-top: 1px solid #E5E5DD;
}
.spt-report__meta-label {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #888;
	margin-bottom: 0.3rem;
}
.spt-report__meta-value {
	display: block;
	font-size: 1rem;
	font-weight: 500;
	color: #0a0a0d;
}
.spt-report__meta-highlight {
	color: #0a0a0d;
	background: rgba(203, 108, 230, 0.5);
	display: inline-block;
	padding: 0.1rem 0.45rem;
	border-radius: 4px;
}
.spt-report__cover-brief {
	padding: 1rem 1.25rem;
	background: rgba(0, 0, 0, 0.025);
	border-left: 3px solid #CB6CE6;
	border-radius: 0 6px 6px 0;
	margin-top: 0.5rem;
}
.spt-report__cover-brief p {
	margin: 0.5rem 0 0;
	font-style: italic;
	color: #333;
	line-height: 1.5;
}
.spt-report__cover-foot {
	display: flex;
	justify-content: space-between;
	padding-top: 1.25rem;
	border-top: 1px solid #E5E5DD;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.65rem;
	letter-spacing: 0.1em;
	color: #888;
}

/* ── PAGE HEAD (each non-cover page) ───────────────── */
.spt-report__page-head {
	display: grid;
	gap: 0.65rem;
	margin-bottom: 2rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid #E5E5DD;
}
.spt-report__page-number {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.62rem;
	letter-spacing: 0.22em;
	color: #999;
}
.spt-report__page-title {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.85rem;
	font-weight: 500;
	letter-spacing: -0.025em;
	line-height: 1.15;
	margin: 0;
	color: #0a0a0d;
	max-width: 30ch;
}
.spt-report__page-lede {
	font-size: 0.95rem;
	line-height: 1.55;
	color: #444;
	margin: 0;
	max-width: 70ch;
}
.spt-report__page-lede strong { color: #0a0a0d; }
.spt-report__page-lede em {
	font-style: normal;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.88em;
	background: rgba(203, 108, 230, 0.35);
	padding: 0.05rem 0.3rem;
	border-radius: 3px;
}

/* ── PRESSURE BANDS ────────────────────────────────── */
.spt-report__band {
	margin-bottom: 1.75rem;
}
.spt-report__band-head {
	display: flex;
	align-items: baseline;
	gap: 0.85rem;
	margin-bottom: 1rem;
}
.spt-report__band-title {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.7rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #0a0a0d;
	margin: 0;
	font-weight: 700;
}
.spt-report__band-hint {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.65rem;
	color: #999;
	letter-spacing: 0.04em;
}

.spt-report__axis-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.65rem;
}
.spt-report__axis {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 1.5rem;
	align-items: center;
	padding: 0.55rem 0;
	border-bottom: 1px dashed #E5E5DD;
}
.spt-report__axis:last-child { border-bottom: 0; }
.spt-report__axis-name {
	display: block;
	font-size: 0.95rem;
	font-weight: 500;
	color: #0a0a0d;
}
.spt-report__axis-hint {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6rem;
	letter-spacing: 0.02em;
	color: #999;
	margin-top: 0.15rem;
}

.spt-report__axis-bar {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.85rem;
	align-items: center;
}
.spt-report__axis-bar-track {
	position: relative;
	height: 18px;
	background: rgba(0, 0, 0, 0.04);
	border: 1px solid rgba(0, 0, 0, 0.05);
	border-radius: 4px;
	overflow: hidden;
}
.spt-report__axis-bar-mid {
	position: absolute;
	left: 50%;
	top: 0; bottom: 0;
	width: 1px;
	background: rgba(0, 0, 0, 0.18);
	z-index: 1;
}
.spt-report__axis-bar-fill {
	position: absolute;
	left: 0; top: 0; bottom: 0;
	background: #0a0a0d;
	border-radius: 3px;
	transition: width 240ms;
}
.spt-report__axis--is-up .spt-report__axis-bar-fill {
	background: linear-gradient(90deg, #CB6CE6 0%, #B055D4 100%);
}
.spt-report__axis--is-down .spt-report__axis-bar-fill {
	background: linear-gradient(90deg, #FF6B47 0%, #e85a3a 100%);
	opacity: 0.7;
}
.spt-report__axis--is-neutral .spt-report__axis-bar-fill {
	background: rgba(0, 0, 0, 0.18);
}

.spt-report__axis-bar-meta {
	display: grid;
	gap: 0.1rem;
	min-width: 110px;
}
.spt-report__axis-value {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.95rem;
	font-weight: 600;
	color: #0a0a0d;
	font-variant-numeric: tabular-nums;
}
.spt-report__axis-relative {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.58rem;
	letter-spacing: 0.06em;
	color: #888;
}
.spt-report__axis--is-up .spt-report__axis-relative { color: #6b8a1e; }
.spt-report__axis--is-down .spt-report__axis-relative { color: #b94a30; }

/* ── TOP 3 PLATFORMS PAGE ──────────────────────────── */
.spt-report__top3 {
	display: grid;
	gap: 1.5rem;
}
.spt-report__platform {
	padding: 1.5rem 1.5rem 1.25rem;
	background: #FAFAF7;
	border: 1px solid #E5E5DD;
	border-radius: 8px;
	position: relative;
}
.spt-report__platform--rank-1 {
	background: linear-gradient(165deg, #FFFFFF 0%, #F8F8F0 100%);
	border-color: rgba(203, 108, 230, 0.5);
	box-shadow: 0 4px 20px rgba(203, 108, 230, 0.15);
}
.spt-report__platform-head {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1.25rem;
	align-items: center;
	margin-bottom: 1rem;
}
.spt-report__platform-rank {
	display: grid;
	gap: 0.15rem;
	padding-right: 1rem;
	border-right: 1px solid #E5E5DD;
}
.spt-report__platform-rank-label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.55rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #888;
}
.spt-report__platform-rank-num {
	font-family: var(--wp--preset--font-family--display);
	font-size: 2rem;
	font-weight: 500;
	letter-spacing: -0.04em;
	color: #0a0a0d;
	line-height: 1;
}
.spt-report__platform-id {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}
.spt-report__platform-accent {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	flex-shrink: 0;
}
.spt-report__platform-name {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.45rem;
	font-weight: 500;
	letter-spacing: -0.02em;
	color: #0a0a0d;
	margin: 0;
	flex: 1;
}
.spt-report__platform-score {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	color: #0a0a0d;
	background: rgba(203, 108, 230, 0.35);
	padding: 0.25rem 0.55rem;
	border-radius: 4px;
	font-weight: 600;
}

.spt-report__platform-bar {
	height: 6px;
	background: rgba(0, 0, 0, 0.05);
	border-radius: 3px;
	overflow: hidden;
	margin-bottom: 1.1rem;
}
.spt-report__platform-bar-fill {
	display: block;
	height: 100%;
	border-radius: 3px;
}

.spt-report__platform-take {
	font-size: 0.95rem;
	line-height: 1.5;
	color: #333;
	margin: 0 0 1.25rem;
	font-style: italic;
}
.spt-report__platform-take-label {
	display: block;
	font-style: normal;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.58rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #888;
	margin-bottom: 0.35rem;
}

.spt-report__platform-reasons {
	padding-top: 1rem;
	border-top: 1px dashed #E5E5DD;
}
.spt-report__platform-reasons-label {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.58rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #888;
	margin-bottom: 0.55rem;
}
.spt-report__platform-reasons ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 0.35rem;
}
.spt-report__platform-reasons li {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 0.6rem;
	font-size: 0.85rem;
	line-height: 1.4;
	color: #333;
}
.spt-report__reason-arrow { color: #8B4AA0; font-weight: 700; }
.spt-report__reason-axis { color: #0a0a0d; font-weight: 500; }
.spt-report__reason-math {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.7rem;
	color: #777;
	white-space: nowrap;
}
.spt-report__reason-math strong { color: #0a0a0d; font-weight: 600; }

/* ── FULL RANKING ──────────────────────────────────── */
.spt-report__ranking {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.35rem;
}
.spt-report__ranking-row {
	display: grid;
	grid-template-columns: 40px 16px 1.4fr 2fr 60px;
	gap: 0.85rem;
	align-items: center;
	padding: 0.55rem 0.75rem;
	background: #FAFAF7;
	border: 1px solid #EEEEE5;
	border-radius: 6px;
}
.spt-report__ranking-row:first-child {
	background: rgba(203, 108, 230, 0.18);
	border-color: rgba(203, 108, 230, 0.4);
}
.spt-report__ranking-num {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.85rem;
	font-weight: 600;
	color: #0a0a0d;
}
.spt-report__ranking-swatch {
	width: 12px;
	height: 12px;
	border-radius: 50%;
}
.spt-report__ranking-name { font-size: 0.95rem; font-weight: 500; color: #0a0a0d; }
.spt-report__ranking-bar {
	height: 8px;
	background: rgba(0, 0, 0, 0.05);
	border-radius: 4px;
	overflow: hidden;
}
.spt-report__ranking-bar-fill { display: block; height: 100%; border-radius: 4px; }
.spt-report__ranking-score {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.85rem;
	font-weight: 600;
	color: #0a0a0d;
	text-align: right;
}

/* ── METHODOLOGY ──────────────────────────────────── */
.spt-report__method {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin-bottom: 1.5rem;
}
.spt-report__method-card {
	padding: 1.25rem 1.25rem 1rem;
	background: #FAFAF7;
	border: 1px solid #EEEEE5;
	border-radius: 8px;
}
.spt-report__method-step {
	display: inline-block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #8B4AA0;
	background: rgba(203, 108, 230, 0.25);
	padding: 0.2rem 0.55rem;
	border-radius: 999px;
	margin-bottom: 0.65rem;
	font-weight: 700;
}
.spt-report__method-card h3 {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.05rem;
	font-weight: 500;
	letter-spacing: -0.015em;
	margin: 0 0 0.45rem;
	color: #0a0a0d;
}
.spt-report__method-card p {
	margin: 0;
	font-size: 0.85rem;
	line-height: 1.5;
	color: #444;
}
.spt-report__method-card em {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.85em;
	font-style: normal;
	color: #0a0a0d;
	background: rgba(203, 108, 230, 0.25);
	padding: 0.05rem 0.3rem;
	border-radius: 3px;
}

.spt-report__caveats {
	padding: 1.25rem;
	background: rgba(255, 107, 71, 0.05);
	border-left: 3px solid #FF6B47;
	border-radius: 0 6px 6px 0;
}
.spt-report__caveats-label {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #b94a30;
	font-weight: 700;
	margin-bottom: 0.55rem;
}
.spt-report__caveats ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.3rem;
}
.spt-report__caveats li {
	padding-left: 1rem;
	position: relative;
	font-size: 0.85rem;
	line-height: 1.5;
	color: #333;
}
.spt-report__caveats li::before {
	content: "×";
	position: absolute;
	left: 0;
	color: #FF6B47;
	font-weight: 700;
}

/* ── CTA / NEXT STEPS PAGE ────────────────────────── */
.spt-report__cta-page {
	background:
		linear-gradient(165deg, #FFFFFF 0%, #F8F8F0 100%);
}
.spt-report__cta-card {
	padding: 2rem;
	background: white;
	border: 1px solid #E5E5DD;
	border-radius: 12px;
	margin-bottom: 2rem;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}
.spt-report__cta-card h3 {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.5rem;
	font-weight: 500;
	letter-spacing: -0.025em;
	margin: 0 0 0.75rem;
	color: #0a0a0d;
}
.spt-report__cta-card p {
	font-size: 1rem;
	line-height: 1.55;
	color: #444;
	margin: 0 0 1.5rem;
	max-width: 60ch;
}
.spt-report__cta-actions {
	display: flex;
	gap: 1rem;
	align-items: center;
	flex-wrap: wrap;
}
.spt-report__cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: #0a0a0d;
	color: #F4F2EE;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 700;
	padding: 0.9rem 1.4rem;
	border-radius: 999px;
	text-decoration: none;
	transition: transform 200ms, box-shadow 200ms;
}
.spt-report__cta-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(10, 10, 13, 0.25);
}
.spt-report__cta-link {
	color: #444;
	text-decoration: underline;
	text-decoration-color: rgba(0, 0, 0, 0.25);
	font-size: 0.9rem;
}

.spt-report__services {
	margin-bottom: 2rem;
}
.spt-report__services-label {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.62rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #888;
	margin-bottom: 1rem;
}
.spt-report__services-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.25rem;
}
.spt-report__services-grid h4 {
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.95rem;
	font-weight: 500;
	margin: 0 0 0.35rem;
	color: #0a0a0d;
}
.spt-report__services-grid p {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.7rem;
	color: #666;
	line-height: 1.55;
}

.spt-report__final-foot {
	display: grid;
	grid-template-columns: 1.4fr 1.2fr 1fr;
	gap: 1rem;
	padding-top: 1.5rem;
	border-top: 1px solid #E5E5DD;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.65rem;
	letter-spacing: 0.04em;
	color: #777;
	line-height: 1.55;
}
.spt-report__final-foot > div { display: grid; gap: 0.15rem; }
.spt-report__final-foot .spt-report__brand-name {
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #0a0a0d;
	margin-bottom: 0.2rem;
}

/* ── PDF / PRINT MODE — html2pdf renders this layer. ── */
@media print {
	.no-print { display: none !important; }
	.spt-report__page {
		box-shadow: none;
		margin: 0;
		border-radius: 0;
	}
	body { background: white; }
}

/* ── MOBILE RESPONSIVE ────────────────────────────── */
@media (max-width: 720px) {
	.spt-report__axis { grid-template-columns: 1fr; gap: 0.5rem; }
	.spt-report__method { grid-template-columns: 1fr; }
	.spt-report__services-grid { grid-template-columns: 1fr; }
	.spt-report__final-foot { grid-template-columns: 1fr; }
	.spt-report__ranking-row {
		grid-template-columns: 30px 12px 1fr auto;
		font-size: 0.85rem;
	}
	.spt-report__ranking-bar { grid-column: 1 / -1; margin-top: 0.25rem; }
	.spt-report__platform-reasons li {
		grid-template-columns: auto 1fr;
	}
	.spt-report__reason-math { grid-column: 1 / -1; padding-left: 1.2rem; }
}