/* ==========================================================================
   Spectre design system, Blocksy child theme
   Version 2.0

   Brand blue #243084 sampled from Spectre-proshopsoftware-pantone2746.png
   Product accents sampled from the 2026 app icons.

   1  tokens
   2  product accent themes
   3  base and typography
   4  hero
   5  buttons
   6  sections and bands
   7  cards
   8  feature rows
   9  pricing
   10 media
   11 faq
   12 stats and logos
   13 language switcher
   14 motion
   15 responsive
   ========================================================================== */

/* 1 — Tokens ------------------------------------------------------------- */

:root {
	/* Master brand */
	--sp-brand: #243084;
	--sp-brand-deep: #1A2464;
	--sp-brand-soft: #B7BDEB;
	--sp-brand-wash: #E3E6F7;

	/* Neutrals, warm rather than blue grey so the page does not read as a template */
	--sp-ink: #16182A;
	--sp-body: #3D4152;
	--sp-muted: #6A6F82;
	--sp-line: #E4E1DA;
	--sp-line-soft: #EFEDE8;
	--sp-paper: #FBFAF8;
	--sp-white: #FFFFFF;

	/* Accent, overridden per product page in section 2 */
	--sp-accent: #243084;
	--sp-accent-ink: #243084;
	--sp-accent-soft: #B7BDEB;
	--sp-accent-wash: #E3E6F7;

	/* Type */
	--sp-font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
	--sp-font-body: "DM Sans", "Helvetica Neue", Arial, sans-serif;
	--sp-font-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

	/* Spacious scale */
	--sp-1: 8px;
	--sp-2: 16px;
	--sp-3: 24px;
	--sp-4: 32px;
	--sp-5: 48px;
	--sp-6: 64px;
	--sp-7: 96px;

	--sp-radius: 6px;
	--sp-radius-sm: 4px;
	--sp-radius-pill: 999px;

	--sp-shadow-sm: 0 1px 0 rgba(22, 24, 42, 0.06);
	--sp-shadow-md: 0 1px 0 rgba(22, 24, 42, 0.08), 0 8px 20px rgba(22, 24, 42, 0.07);

	--sp-measure: 64ch;
}

/* 2 — Product accent themes ---------------------------------------------- */
/* functions.php prints a body class per page slug. Each product page picks up
   the colour of its own app icon, everything else stays Spectre blue. */

body.spectre-page-spectre-cloud,
body.spectre-accent-cloud {
	--sp-accent: #6CCCD8;
	--sp-accent-ink: #26828E;
	--sp-accent-soft: #B6E6EC;
	--sp-accent-wash: #E3F5F8;
}

body.spectre-page-spectre-pos,
body.spectre-accent-pos {
	--sp-accent: #18B484;
	--sp-accent-ink: #0F7A59;
	--sp-accent-soft: #B1F1DD;
	--sp-accent-wash: #E2F9F2;
}

body.spectre-page-spectre-stats,
body.spectre-accent-stats {
	--sp-accent: #F09018;
	--sp-accent-ink: #AD650B;
	--sp-accent-soft: #F1D5B1;
	--sp-accent-wash: #F9EEE2;
}

body.spectre-page-spectre-coach,
body.spectre-accent-coach {
	--sp-accent: #E4483C;
	--sp-accent-ink: #C42A1E;
	--sp-accent-soft: #F1B6B1;
	--sp-accent-wash: #F9E3E2;
}

body.spectre-page-spectre-academy,
body.spectre-accent-academy {
	--sp-accent: #9090CC;
	--sp-accent-ink: #6E6EBD;
	--sp-accent-soft: #C0C0E2;
	--sp-accent-wash: #E7E7F4;
}

/* Accent swatches usable inline, for the product grid on the home page */
.sp-accent-cloud   { --sp-accent: #6CCCD8; --sp-accent-ink: #26828E; --sp-accent-soft: #B6E6EC; --sp-accent-wash: #E3F5F8; }
.sp-accent-pos     { --sp-accent: #18B484; --sp-accent-ink: #0F7A59; --sp-accent-soft: #B1F1DD; --sp-accent-wash: #E2F9F2; }
.sp-accent-stats   { --sp-accent: #F09018; --sp-accent-ink: #AD650B; --sp-accent-soft: #F1D5B1; --sp-accent-wash: #F9EEE2; }
.sp-accent-coach   { --sp-accent: #E4483C; --sp-accent-ink: #C42A1E; --sp-accent-soft: #F1B6B1; --sp-accent-wash: #F9E3E2; }
.sp-accent-academy { --sp-accent: #9090CC; --sp-accent-ink: #6E6EBD; --sp-accent-soft: #C0C0E2; --sp-accent-wash: #E7E7F4; }

/* 3 — Base and typography ------------------------------------------------ */

body {
	font-family: var(--sp-font-body);
	color: var(--sp-body);
	background: var(--sp-paper);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.sp-display {
	font-family: var(--sp-font-display);
	font-weight: 800;
	color: var(--sp-ink);
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.entry-content h1 {
	font-size: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
	font-weight: 900;
	letter-spacing: -0.03em;
	line-height: 1.02;
	margin: 0 0 var(--sp-3);
}

.entry-content h2 {
	font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.625rem);
	line-height: 1.14;
	margin: var(--sp-7) 0 var(--sp-3);
}

.entry-content h3 {
	font-size: clamp(1.2rem, 1.08rem + 0.55vw, 1.45rem);
	line-height: 1.28;
	margin: var(--sp-5) 0 var(--sp-2);
	letter-spacing: -0.01em;
}

.entry-content p {
	max-width: var(--sp-measure);
	margin: 0 0 var(--sp-2);
}

.entry-content .lead,
.entry-content p.lead {
	font-size: clamp(1.1rem, 1rem + 0.6vw, 1.375rem);
	line-height: 1.55;
	color: var(--sp-muted);
	max-width: 52ch;
	margin-bottom: var(--sp-4);
	font-weight: 400;
}

/* Section eyebrow: small label above a heading, with a short accent rule.
   This is the main device that keeps sections from all looking identical. */
.entry-content .sp-eyebrow {
	font-family: var(--sp-font-display);
	font-weight: 800;
	font-size: 0.75rem;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--sp-accent-ink);
	margin: 0 0 var(--sp-1);
	display: flex;
	align-items: center;
	gap: 10px;
}

.entry-content .sp-eyebrow::before {
	content: "";
	width: 26px;
	height: 3px;
	border-radius: 2px;
	background: var(--sp-accent);
	flex: none;
}

.entry-content ul.wp-block-list {
	max-width: var(--sp-measure);
	padding-left: 0;
	list-style: none;
	margin: var(--sp-3) 0;
}

.entry-content ul.wp-block-list li {
	position: relative;
	padding-left: 30px;
	margin-bottom: var(--sp-2);
	line-height: 1.6;
}

.entry-content ul.wp-block-list li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 0.62em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--sp-accent);
}

.entry-content ul.wp-block-list li strong {
	color: var(--sp-ink);
	font-weight: 600;
}

.entry-content a {
	color: var(--sp-accent-ink);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.entry-content a:hover,
.entry-content a:focus {
	color: var(--sp-ink);
}

.entry-content code {
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	background: var(--sp-accent-wash);
	border: 1px solid var(--sp-accent-soft);
	border-radius: 6px;
	padding: 2px 8px;
	font-size: 0.88em;
	color: var(--sp-accent-ink);
	font-weight: 500;
}

.entry-content strong {
	font-weight: 600;
	color: var(--sp-ink);
}

.wp-block-separator {
	border: 0;
	border-top: 1px solid var(--sp-line);
	max-width: 100%;
	margin: var(--sp-7) auto;
	opacity: 1;
}

:focus-visible {
	outline: 3px solid var(--sp-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

/* 3b — Core block fallbacks -----------------------------------------------
   WordPress core supplies these, but stating them here means the layout also
   holds if core block styles are dequeued by an optimisation plugin, and it
   makes the design preview render exactly like the live page. */

.entry-content .wp-block-columns {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	align-items: normal;
	margin-bottom: var(--sp-3);
}

.entry-content .wp-block-columns > .wp-block-column {
	flex: 1 1 0%;
	min-width: 0;
	word-break: break-word;
	overflow-wrap: break-word;
}

/* Column proportions.
   Percentage widths plus a flex gap add up to more than 100% and wrap the row,
   so columns carry a ratio class instead. Flex distributes what is left after
   the gap, which holds at every viewport width. */

.entry-content .wp-block-columns > .sp-col-44 { flex: 44 1 0%; }
.entry-content .wp-block-columns > .sp-col-45 { flex: 45 1 0%; }
.entry-content .wp-block-columns > .sp-col-50 { flex: 50 1 0%; }
.entry-content .wp-block-columns > .sp-col-55 { flex: 55 1 0%; }
.entry-content .wp-block-columns > .sp-col-56 { flex: 56 1 0%; }

.entry-content .wp-block-columns.are-vertically-aligned-center {
	align-items: center;
}

.entry-content .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
}

.entry-content .wp-block-image img {
	max-width: 100%;
	height: auto;
	display: block;
}

.entry-content .wp-block-image figure,
.entry-content figure.wp-block-image {
	margin: 0;
}

/* 4 — Hero --------------------------------------------------------------- */
/* Asymmetric, left aligned, text weighted. Nothing centred, which is the
   single biggest tell of a generated page. */

.entry-content .sp-hero {
	position: relative;
	padding: var(--sp-6) 0 var(--sp-5);
	margin-bottom: var(--sp-4);
	overflow: visible;
}

.entry-content .sp-hero > .wp-block-columns {
	align-items: center;
	gap: var(--sp-6);
}

.entry-content .sp-hero h1 {
	max-width: 15ch;
}

.entry-content .sp-hero .lead {
	max-width: 46ch;
}

/* A single ruled corner bracket behind the hero instead of a soft glow —
   reads as deliberate art direction without the generated-page "blob"
   tell. */
.entry-content .sp-hero::before {
	content: "";
	position: absolute;
	top: -32px;
	right: -32px;
	width: 220px;
	height: 220px;
	border-top: 2px solid var(--sp-accent);
	border-right: 2px solid var(--sp-accent);
	z-index: -1;
	pointer-events: none;
}

/* The hero figure reads as a framed photo/illustration card: crisp edge,
   flat shadow, lifted slightly on hover. */
.entry-content .sp-hero-figure {
	border-radius: var(--sp-radius);
	overflow: hidden;
	box-shadow: var(--sp-shadow-md);
	background: var(--sp-white);
	border: 1px solid var(--sp-line);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.entry-content .sp-hero-figure:hover {
	transform: translateY(-4px);
	box-shadow: 0 1px 0 rgba(22, 24, 42, 0.08), 0 16px 32px rgba(22, 24, 42, 0.1);
}

.entry-content .sp-hero-figure img {
	display: block;
	width: 100%;
	height: auto;
}

/* 5 — Buttons ------------------------------------------------------------ */

.entry-content .wp-block-button__link,
.spectre-btn {
	display: inline-block;
	font-family: var(--sp-font-display);
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: -0.01em;
	line-height: 1.2;
	padding: 15px 30px;
	border-radius: var(--sp-radius-sm);
	background: var(--sp-accent-ink);
	color: var(--sp-white);
	border: 2px solid var(--sp-accent-ink);
	text-decoration: none;
	cursor: pointer;
	transition: transform 180ms ease, box-shadow 180ms ease,
		background-color 180ms ease, border-color 180ms ease;
}

.entry-content .wp-block-button__link:hover,
.entry-content .wp-block-button__link:focus,
.spectre-btn:hover,
.spectre-btn:focus {
	background: var(--sp-ink);
	border-color: var(--sp-ink);
	color: var(--sp-white);
	transform: translateY(-2px);
	box-shadow: var(--sp-shadow-md);
}

.entry-content .is-style-outline .wp-block-button__link,
.spectre-btn--outline {
	background: transparent;
	color: var(--sp-ink);
	border-color: var(--sp-line);
}

.entry-content .is-style-outline .wp-block-button__link:hover,
.entry-content .is-style-outline .wp-block-button__link:focus,
.spectre-btn--outline:hover,
.spectre-btn--outline:focus {
	background: transparent;
	color: var(--sp-accent-ink);
	border-color: var(--sp-accent);
	box-shadow: none;
}

.wp-block-buttons {
	gap: 12px;
	margin: var(--sp-3) 0;
}

/* A quiet text link with a moving arrow, used at the foot of cards */
.sp-textlink {
	font-family: var(--sp-font-display);
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--sp-accent-ink);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.sp-textlink::after {
	content: "\2192";
	transition: transform 180ms ease;
}

.sp-textlink:hover::after,
.sp-textlink:focus::after {
	transform: translateX(4px);
}

/* 6 — Sections and bands -------------------------------------------------- */

.entry-content .sp-band {
	background: var(--sp-white);
	border: 1px solid var(--sp-line);
	border-radius: var(--sp-radius);
	padding: var(--sp-5) var(--sp-4);
	margin: var(--sp-6) 0;
}

.entry-content .sp-band-wash {
	background: var(--sp-accent-wash);
	border-color: transparent;
}

.entry-content .sp-band-ink {
	background: var(--sp-brand);
	border-color: transparent;
	color: #DDE0F3;
}

.entry-content .sp-band-ink h2,
.entry-content .sp-band-ink h3,
.entry-content .sp-band-ink strong {
	color: var(--sp-white);
}

.entry-content .sp-band-ink p {
	color: #C8CDE9;
}

.entry-content .sp-band-ink .sp-eyebrow {
	color: var(--sp-brand-soft);
}

.entry-content .sp-band-ink .sp-eyebrow::before {
	background: var(--sp-brand-soft);
}

/* The main call to action. Solid brand block, generous padding, left aligned
   text with the button beside it on wide screens. */
.entry-content .cta-row {
	background: var(--sp-brand);
	border-radius: var(--sp-radius);
	padding: var(--sp-5) var(--sp-4);
	margin: var(--sp-7) 0;
	position: relative;
	overflow: hidden;
}

.entry-content .cta-row::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: 160px;
	height: 160px;
	border-top: 2px solid rgba(255, 255, 255, 0.14);
	border-left: 2px solid rgba(255, 255, 255, 0.14);
	pointer-events: none;
}

/* Core's "constrained" group layout forces margin-left/right: auto (with
   !important) on any narrower child, which centers this headline against the
   flush-left button below it. Pin it back to the left edge. */
.entry-content .cta-row .cta-headline {
	font-family: var(--sp-font-display);
	font-weight: 700;
	color: var(--sp-white);
	font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
	line-height: 1.4;
	max-width: 40ch;
	margin: 0 auto var(--sp-3) 0 !important;
	position: relative;
	z-index: 1;
}

.entry-content .cta-row .cta-headline strong {
	color: var(--sp-white);
}

.entry-content .cta-row p {
	color: #C8CDE9;
	max-width: 48ch;
	margin-left: 0 !important;
	margin-right: auto !important;
}

.entry-content .cta-row code {
	background: rgba(255, 255, 255, 0.14);
	border-color: rgba(255, 255, 255, 0.26);
	color: var(--sp-white);
}

.entry-content .cta-row .wp-block-buttons {
	position: relative;
	z-index: 1;
}

.entry-content .cta-row .wp-block-button__link {
	background: var(--sp-white);
	color: var(--sp-brand);
	border-color: var(--sp-white);
}

.entry-content .cta-row .wp-block-button__link:hover {
	background: var(--sp-brand-soft);
	border-color: var(--sp-brand-soft);
	color: var(--sp-brand-deep);
}

.entry-content .cta-row .is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--sp-white);
	border-color: rgba(255, 255, 255, 0.45);
}

.entry-content .cta-row .is-style-outline .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: var(--sp-white);
	color: var(--sp-white);
}

/* 7 — Cards --------------------------------------------------------------- */

.entry-content .spectre-cards {
	gap: var(--sp-3);
	margin: var(--sp-4) 0 var(--sp-6);
	align-items: stretch;
}

.entry-content .spectre-card {
	background: var(--sp-white);
	border: 1px solid var(--sp-line);
	border-radius: var(--sp-radius);
	padding: var(--sp-4) var(--sp-3) var(--sp-3);
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: hidden;
	transition: transform 200ms ease, box-shadow 200ms ease,
		border-color 200ms ease;
}

/* Accent keyline along the top edge, the card's only colour */
.entry-content .spectre-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: var(--sp-accent);
}

.entry-content .spectre-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--sp-shadow-md);
	border-color: var(--sp-accent-soft);
}

.entry-content .spectre-card h3 {
	margin: 0 0 var(--sp-1);
	font-size: 1.3rem;
}

.entry-content .spectre-card p {
	font-size: 0.98rem;
	color: var(--sp-body);
	margin-bottom: var(--sp-2);
}

.entry-content .spectre-card .spectre-eyebrow,
.entry-content .spectre-card .sp-eyebrow {
	font-family: var(--sp-font-display);
	font-weight: 800;
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sp-accent-ink);
	margin: 0 0 var(--sp-1);
	display: block;
}

.entry-content .spectre-card .spectre-eyebrow::before,
.entry-content .spectre-card .sp-eyebrow::before {
	display: none;
}

.entry-content .spectre-card .wp-block-buttons,
.entry-content .spectre-card .sp-card-foot {
	margin-top: auto;
	padding-top: var(--sp-2);
}

.entry-content .spectre-card ul.wp-block-list {
	margin: var(--sp-2) 0;
	font-size: 0.96rem;
}

/* Product icon at the top of a card */
.sp-card-icon {
	width: 52px;
	height: 52px;
	border-radius: 13px;
	display: block;
	margin-bottom: var(--sp-2);
	box-shadow: var(--sp-shadow-sm);
}

/* 8 — Feature rows -------------------------------------------------------- */
/* Alternating text and figure, the Thalamus rhythm. Odd rows put the text on
   the left, even rows flip it, so the page never falls into one column. */

.entry-content .sp-feature {
	margin: var(--sp-6) 0;
	align-items: center;
	gap: var(--sp-5);
}

.entry-content .sp-feature h3 {
	margin-top: 0;
	font-size: clamp(1.35rem, 1.15rem + 0.9vw, 1.85rem);
}

.entry-content .sp-feature p {
	max-width: 48ch;
}

.entry-content .sp-feature-figure {
	background: var(--sp-line-soft);
	border: 1px solid var(--sp-line);
	border-radius: var(--sp-radius);
	padding: var(--sp-3);
	min-height: 220px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.entry-content .sp-feature-figure img {
	border-radius: var(--sp-radius-sm);
	box-shadow: var(--sp-shadow-md);
	display: block;
	width: 100%;
	height: auto;
}

@media (min-width: 782px) {
	.entry-content .sp-feature-flip {
		flex-direction: row-reverse;
	}
}

/* Numbered step list, used for how it works */
.entry-content .sp-steps {
	counter-reset: sp-step;
	list-style: none;
	padding: 0;
	margin: var(--sp-4) 0;
	max-width: var(--sp-measure);
}

.entry-content .sp-steps li {
	counter-increment: sp-step;
	position: relative;
	padding-left: 58px;
	margin-bottom: var(--sp-3);
	min-height: 42px;
}

.entry-content .sp-steps li::before {
	content: counter(sp-step);
	position: absolute;
	left: 0;
	top: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--sp-accent-wash);
	color: var(--sp-accent-ink);
	font-family: var(--sp-font-display);
	font-weight: 800;
	font-size: 1.05rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 9 — Pricing ------------------------------------------------------------- */

.entry-content .pricing-tiers {
	gap: var(--sp-3);
	margin: var(--sp-4) 0 var(--sp-6);
	align-items: stretch;
}

.entry-content .pricing-tiers .wp-block-column.pricing-tier {
	background: var(--sp-white);
	border: 1px solid var(--sp-line);
	border-radius: var(--sp-radius);
	padding: var(--sp-4) var(--sp-3);
	display: flex;
	flex-direction: column;
}

.entry-content .pricing-tiers .pricing-tier-featured {
	border: 2px solid var(--sp-accent);
	box-shadow: var(--sp-shadow-md);
}

.entry-content .pricing-tiers .pricing-tier h3 {
	margin: 0 0 var(--sp-1);
	font-size: 1.2rem;
}

.entry-content .tier-badge {
	background: var(--sp-accent-ink);
	color: var(--sp-white);
	padding: 5px 13px;
	border-radius: var(--sp-radius-pill);
	font-family: var(--sp-font-display);
	font-size: 0.66rem;
	font-weight: 800;
	letter-spacing: 0.11em;
	display: inline-block;
	width: fit-content;
	margin: 0 0 var(--sp-2);
}

.entry-content .tier-badge strong {
	color: var(--sp-white);
	font-weight: 800;
}

.entry-content .price {
	font-family: var(--sp-font-display);
	color: var(--sp-ink);
	margin: 0 0 var(--sp-2);
	display: flex;
	align-items: baseline;
	gap: 4px;
}

.entry-content .price strong {
	font-family: var(--sp-font-mono);
	font-size: 2.6rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--sp-ink);
}

.entry-content .price small {
	font-family: var(--sp-font-body);
	color: var(--sp-muted);
	font-size: 0.92rem;
	font-weight: 400;
}

.entry-content .pricing-tiers ul.wp-block-list {
	flex-grow: 1;
	margin: var(--sp-2) 0 var(--sp-3);
	font-size: 0.96rem;
}

.entry-content .pricing-tiers .wp-block-buttons {
	margin-top: auto;
	margin-bottom: 0;
}

.spectre-billing-toggle {
	display: inline-flex;
	gap: 4px;
	background: var(--sp-white);
	border: 1px solid var(--sp-line);
	border-radius: var(--sp-radius-pill);
	padding: 5px;
	margin: 0 0 var(--sp-4);
}

.spectre-billing-toggle button {
	font-family: var(--sp-font-display);
	border: 0;
	background: transparent;
	color: var(--sp-muted);
	font-weight: 700;
	font-size: 0.9rem;
	padding: 10px 22px;
	border-radius: var(--sp-radius-pill);
	cursor: pointer;
	min-height: 44px;
	transition: background-color 180ms ease, color 180ms ease;
}

.spectre-billing-toggle button[aria-pressed="true"] {
	background: var(--sp-accent-ink);
	color: var(--sp-white);
}

/* Feature-by-feature tier comparison table, used where a plan has enough
   features that three separate cards stop being scannable. */
.entry-content .compare-table {
	margin: var(--sp-4) 0 var(--sp-6);
	overflow-x: auto;
	border: 1px solid var(--sp-line);
	border-radius: var(--sp-radius);
}

.entry-content .compare-table table {
	width: 100%;
	border-collapse: collapse;
	min-width: 560px;
}

.entry-content .compare-table th,
.entry-content .compare-table td {
	padding: 14px 18px;
	text-align: center;
	border-bottom: 1px solid var(--sp-line);
	font-size: 0.94rem;
}

.entry-content .compare-table th:first-child,
.entry-content .compare-table td:first-child {
	text-align: left;
}

.entry-content .compare-table thead th {
	font-family: var(--sp-font-display);
	font-weight: 700;
	color: var(--sp-ink);
	background: var(--sp-paper);
}

.entry-content .compare-table thead th:first-child {
	background: transparent;
}

.entry-content .compare-table tbody th {
	text-align: left;
	font-weight: 600;
	color: var(--sp-ink);
	background: var(--sp-paper);
}

.entry-content .compare-table tr:last-child td,
.entry-content .compare-table tr:last-child th {
	border-bottom: 0;
}

.entry-content .compare-table td.yes {
	color: var(--sp-accent-ink);
	font-weight: 700;
}

.entry-content .compare-table td.no {
	color: var(--sp-line);
}

.entry-content .compare-table td.featured,
.entry-content .compare-table th.featured {
	background: var(--sp-accent-wash);
}

.entry-content .compare-table caption {
	caption-side: bottom;
	text-align: left;
	padding: 14px 18px;
	font-size: 0.86rem;
	color: var(--sp-muted);
}

/* 10 — Media -------------------------------------------------------------- */

.youtube-playlist-wrapper {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	border-radius: var(--sp-radius);
	box-shadow: var(--sp-shadow-md);
	margin: var(--sp-3) 0 var(--sp-5);
	background: var(--sp-ink);
}

.youtube-playlist-wrapper iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.app-store-badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	align-items: center;
	margin: var(--sp-3) 0 var(--sp-5);
}

.app-store-badges img {
	display: block;
	width: auto;
	transition: transform 180ms ease;
}

.app-store-badges a:hover img,
.app-store-badges a:focus img {
	transform: translateY(-2px);
}

.app-store-badges .badge-apple img { height: 52px; }
.app-store-badges .badge-google img { height: 77px; }

/* 11 — FAQ ---------------------------------------------------------------- */

.spectre-faq-group {
	margin: var(--sp-3) 0 var(--sp-6);
	max-width: var(--sp-measure);
	border-top: 1px solid var(--sp-line);
}

details.spectre-faq {
	border-bottom: 1px solid var(--sp-line);
}

details.spectre-faq summary {
	cursor: pointer;
	list-style: none;
	padding: 22px 46px 22px 0;
	font-family: var(--sp-font-display);
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--sp-ink);
	position: relative;
	line-height: 1.45;
	min-height: 44px;
	transition: color 180ms ease;
}

details.spectre-faq summary::-webkit-details-marker { display: none; }

details.spectre-faq summary::after {
	content: "";
	position: absolute;
	right: 10px;
	top: 50%;
	width: 11px;
	height: 11px;
	margin-top: -7px;
	border-right: 2.5px solid var(--sp-accent-ink);
	border-bottom: 2.5px solid var(--sp-accent-ink);
	transform: rotate(45deg);
	transition: transform 200ms ease;
}

details.spectre-faq[open] summary::after {
	transform: rotate(-135deg);
	margin-top: -2px;
}

details.spectre-faq summary:hover { color: var(--sp-accent-ink); }

.spectre-faq__body {
	padding: 0 46px 24px 0;
	color: var(--sp-body);
}

.spectre-faq__body p { margin-bottom: var(--sp-2); }
.spectre-faq__body p:last-child { margin-bottom: 0; }

/* Stat row on the home page */

.entry-content .sp-stats {
	gap: var(--sp-3);
	margin: var(--sp-5) 0 var(--sp-6);
	padding: var(--sp-4) 0;
	border-top: 1px solid var(--sp-line);
	border-bottom: 1px solid var(--sp-line);
}

/* 12 — Stats and logo strip ----------------------------------------------- */

.entry-content .spectre-stat strong,
.entry-content .sp-stat strong {
	display: block;
	font-family: var(--sp-font-mono);
	font-size: clamp(2.1rem, 1.7rem + 1.7vw, 3rem);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--sp-accent-ink);
}

.entry-content .spectre-stat span,
.entry-content .sp-stat span {
	display: block;
	font-size: 0.94rem;
	color: var(--sp-muted);
	margin-top: 6px;
	max-width: 22ch;
}

.sp-logo-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-4);
	padding: var(--sp-3) 0;
	margin: var(--sp-3) 0 var(--sp-5);
	border-top: 1px solid var(--sp-line-soft);
	border-bottom: 1px solid var(--sp-line-soft);
}

.sp-logo-strip img {
	height: 34px;
	width: auto;
	opacity: 0.55;
	filter: grayscale(1);
	transition: opacity 180ms ease, filter 180ms ease;
}

.sp-logo-strip img:hover {
	opacity: 1;
	filter: none;
}

.sp-logo-strip .sp-logo-strip__label {
	font-size: 0.82rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sp-muted);
	font-weight: 500;
}

/* Pull quote, gives long pages a change of texture */
.entry-content .sp-quote {
	border-left: 4px solid var(--sp-accent);
	padding: 4px 0 4px var(--sp-3);
	margin: var(--sp-5) 0;
	max-width: 52ch;
}

.entry-content .sp-quote p {
	font-family: var(--sp-font-display);
	font-weight: 700;
	font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
	line-height: 1.4;
	color: var(--sp-ink);
	margin-bottom: 10px;
}

.entry-content .sp-quote cite {
	font-style: normal;
	font-size: 0.9rem;
	color: var(--sp-muted);
}

.spectre-note {
	font-size: 0.88rem;
	color: var(--sp-muted);
}

.spectre-compare table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
	background: var(--sp-white);
	border-radius: var(--sp-radius);
	overflow: hidden;
}

.spectre-compare th,
.spectre-compare td {
	border-bottom: 1px solid var(--sp-line);
	padding: 14px 16px;
	text-align: left;
	vertical-align: top;
}

.spectre-compare thead th {
	background: var(--sp-accent-wash);
	color: var(--sp-ink);
	font-family: var(--sp-font-display);
	font-weight: 800;
	font-size: 0.9rem;
}

/* 13 — Language switcher --------------------------------------------------- */

.spectre-lang-switcher {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	background: var(--sp-white);
	border: 1px solid var(--sp-line);
	border-radius: var(--sp-radius-pill);
	padding: 3px;
}

.spectre-lang-switcher a {
	font-family: var(--sp-font-display);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--sp-muted);
	text-decoration: none;
	padding: 8px 14px;
	border-radius: var(--sp-radius-pill);
	min-height: 36px;
	display: inline-flex;
	align-items: center;
	transition: background-color 180ms ease, color 180ms ease;
}

.spectre-lang-switcher a:hover,
.spectre-lang-switcher a:focus {
	color: var(--sp-ink);
	background: var(--sp-line-soft);
}

.spectre-lang-switcher a.is-active {
	background: var(--sp-brand);
	color: var(--sp-white);
}

/* 14 — Motion -------------------------------------------------------------- */

.spectre-reveal {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 350ms ease, transform 350ms ease;
}

.spectre-reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	.spectre-reveal {
		opacity: 1;
		transform: none;
	}
}

/* 15 — Responsive ---------------------------------------------------------- */

@media (max-width: 991px) {
	.entry-content .pricing-tiers,
	.entry-content .spectre-cards,
	.entry-content .sp-feature,
	.entry-content .sp-hero > .wp-block-columns {
		flex-wrap: wrap;
		gap: var(--sp-3);
	}

	.entry-content .pricing-tiers .wp-block-column,
	.entry-content .spectre-cards .wp-block-column,
	.entry-content .sp-feature .wp-block-column,
	.entry-content .sp-hero .wp-block-column {
		flex-basis: 100% !important;
		margin-left: 0 !important;
	}

	.entry-content .sp-hero::before {
		width: 280px;
		height: 280px;
		right: -110px;
		top: -60px;
	}
}

@media (max-width: 600px) {
	body { font-size: 16px; }

	.entry-content .sp-band,
	.entry-content .cta-row {
		padding: var(--sp-4) var(--sp-3);
	}

	.entry-content .wp-block-button__link,
	.spectre-btn {
		padding: 14px 26px;
		width: 100%;
		text-align: center;
	}

	.entry-content .price strong { font-size: 2.2rem; }

	.spectre-compare { overflow-x: auto; }

	.spectre-billing-toggle { width: 100%; }
	.spectre-billing-toggle button { flex: 1; padding: 10px 12px; }
}

@media print {
	.cta-row, .youtube-playlist-wrapper, .spectre-lang-switcher { display: none; }
}