/**
 * SGP component layer.
 *
 * Rules:
 *  1. No literal colour, font or space values — tokens only (theme.json presets).
 *     A rebrand must never require editing this file.
 *  2. Mobile-first. Every component is authored small-screen first, then enhanced.
 *  3. No JS dependency. Interactivity uses native <details>, <dialog> and :has().
 */

/* ─── Verification badge ────────────────────────────────────────────────────
   The badge is a dated, sourced claim, never decoration. Symbol + label + date
   are one element; the date can never drift away from the claim it qualifies.

   It WRAPS rather than truncating. At 320px "Needs configuration · tested Aug
   2026" does not fit on one line, and clipping either half destroys the
   meaning: a label without a date is the untrustworthy signal we differentiate
   against, and a date without its label says nothing.

   Colour is never the only signal — each state also has a distinct symbol and
   its own words. */

.sgp-badge {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 0.4rem;
	row-gap: 0.1rem;
	padding: 0.3rem 0.6rem;
	border-radius: var(--wp--custom--radius--md);
	font-size: var(--sq-t-eyebrow);
	font-weight: var(--sq-w-semibold);
	line-height: var(--sq-lh-eyebrow);
	border: 1px solid transparent;
	max-inline-size: 100%;
}

.sgp-badge__symbol { flex: none; }
.sgp-badge__label { white-space: nowrap; }

.sgp-badge__date {
	font-weight: var(--sq-w-medium);
	opacity: 0.9;
	white-space: nowrap;
}

/* Verified — the only state that means "we checked and it works". */
.sgp-badge--verified   { color: var(--wp--preset--color--verified); background: var(--wp--preset--color--verified-bg); border-color: color-mix(in srgb, var(--wp--preset--color--verified) 20%, transparent); }

/* Needs configuration and Partially compatible share the caution family but
   differ by symbol (wrench vs divided circle) and wording. */
.sgp-badge--caution,
.sgp-badge--partial    { color: var(--wp--preset--color--caution);  background: var(--wp--preset--color--caution-bg);  border-color: color-mix(in srgb, var(--wp--preset--color--caution) 20%, transparent); }

/* Critical is reserved for a real negative verdict — we tested it, it failed. */
.sgp-badge--not-recomm { color: var(--wp--preset--color--critical); background: var(--wp--preset--color--critical-bg); border-color: color-mix(in srgb, var(--wp--preset--color--critical) 20%, transparent); }

/* Expired is STALE EVIDENCE, not a failure. It must never read as critical:
   we stopped vouching, which is a different statement from "this is bad". */
.sgp-badge--stale      { color: var(--wp--preset--color--stale);    background: var(--wp--preset--color--stale-bg);    border-color: color-mix(in srgb, var(--wp--preset--color--stale) 20%, transparent); }

.sgp-badge--untested {
	color: var(--sq-badge);
	background: transparent;
	border-color: transparent;
	padding-inline: 0;
	font-weight: var(--sq-w-medium);
}

/* Ownership / disclosure chip — always visible, never hidden behind a tooltip. */
.sgp-chip {
	display: inline-flex;
	align-items: center;
	padding: 0.2rem 0.5rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
	font-size: var(--sq-t-eyebrow);
	color: var(--wp--preset--color--text-muted);
	background: var(--wp--preset--color--surface);
}

/* ─── Product card ──────────────────────────────────────────────────────────
   Variants exist so cards do not get overloaded. Base card carries only what a
   scanning user needs: what it is, whether it is trusted, what it costs. */

/* Images are supporting recognition, not the primary signal. On mobile a 16:10
   card image ate most of the browsing viewport, so it is shortened by ~22% there
   and returns to a fuller ratio once there is width to spare. */

/* Titles are not underlined by default. A grid of permanently underlined titles
   reads as a list of raw links rather than a catalogue; the underline returns on
   hover and focus, where it signals interactivity at the moment it matters. */

/* Whole-card click target without nesting interactive elements. */

.sgp-card__price { font-weight: var(--sq-w-semibold); font-size: var(--sq-t-p3); }
.sgp-card__price--free { color: var(--wp--preset--color--verified); }

/* Compact variant for dense search results. */

/* Featured variant. */

/* ─── Featured evidence ───────────────────────────────────────────────────
   Sparse verified inventory is a sign of deliberate testing, not an empty
   merchandising row. This component presents the finding rather than simply
   enlarging the same catalogue card. */

.sgp-evidence-features {
	display: grid;
	gap: var(--wp--preset--spacing--50);
}

.sgp-evidence-feature {
	display: grid;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--surface-raised);
	box-shadow: var(--wp--custom--shadow--sm);
}

.sgp-evidence-feature__media {
	aspect-ratio: 16 / 8;
	background: var(--wp--preset--color--surface);
	overflow: hidden;
}

.sgp-evidence-feature__media img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.sgp-evidence-feature__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--50);
}

.sgp-evidence-feature__title {
	margin: 0;
	font-size: var(--sq-t-h3);
	line-height: var(--sq-lh-ui);
}

.sgp-evidence-feature__taxo,
.sgp-evidence-feature__finding p,
.sgp-evidence-feature__limit { margin: 0; }

.sgp-evidence-feature__taxo {
	font-size: var(--sq-t-p3);
	color: var(--wp--preset--color--text-subtle);
}

.sgp-evidence-feature__finding {
	inline-size: 100%;
	padding: var(--wp--preset--spacing--40);
	border-inline-start: 3px solid var(--wp--preset--color--verified);
	background: var(--wp--preset--color--verified-bg);
	border-radius: var(--wp--custom--radius--sm);
}

.sgp-evidence-feature__limit {
	font-size: var(--sq-t-p3);
	color: var(--wp--preset--color--text-muted);
}

.sgp-evidence-feature__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	inline-size: 100%;
	margin-block-start: auto;
	padding-block-start: var(--wp--preset--spacing--30);
	border-block-start: 1px solid var(--wp--preset--color--border);
}

.sgp-evidence-feature__foot > div {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
}

.sgp-section__more { margin-block: var(--wp--preset--spacing--40) 0; }

@media (min-width: 768px) {
	.sgp-evidence-feature { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
	.sgp-evidence-feature__media { aspect-ratio: auto; min-block-size: 100%; }
}

/* ─── Catalogue grid ────────────────────────────────────────────────────────
   Intrinsic sizing so the grid reflows without breakpoint maintenance. */

.sgp-grid {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	grid-template-columns: repeat(auto-fill, minmax(min(var(--wp--custom--grid--card-min), 100%), 1fr));
}

/* ─── Catalogue layout: filters + results ───────────────────────────────── */

.sgp-catalogue {
	display: grid;
	gap: var(--wp--preset--spacing--60);
	grid-template-columns: 1fr;
}

@media (min-width: 900px) {
	.sgp-catalogue { grid-template-columns: 260px 1fr; align-items: start; }
	.sgp-catalogue__filters { position: sticky; top: var(--wp--preset--spacing--50); }
}

/* Facet groups. Each is an always-open <details> so its contents are never hidden by
   the user-agent stylesheet; the <summary> is the group heading and the collapse control. */
.sgp-filters > summary {
	font-weight: var(--sq-w-semibold);
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.sgp-filters > summary::-webkit-details-marker { display: none; }
.sgp-filters > summary::after {
	content: "";
	inline-size: 0.5rem;
	block-size: 0.5rem;
	border-inline-end: 1.5px solid var(--wp--preset--color--text-subtle);
	border-block-end: 1.5px solid var(--wp--preset--color--text-subtle);
	transform: rotate(45deg) translateY(-2px);
	transition: transform var(--wp--custom--transition--fast);
}
.sgp-filters[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }

/* ─── Comparison table ──────────────────────────────────────────────────────
   Tables are one of the formats the citation research found actually predicts
   AI citation, so comparisons are authored as real tables, not card stacks. */

.sgp-compare { inline-size: 100%; overflow-x: auto; }
.sgp-compare table { inline-size: 100%; border-collapse: collapse; min-inline-size: 640px; }
.sgp-compare th,
.sgp-compare td {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border-block-end: 1px solid var(--wp--preset--color--border);
	text-align: start;
	font-size: var(--sq-t-p3);
	vertical-align: top;
}
.sgp-compare thead th {
	position: sticky;
	inset-block-start: 0;
	background: var(--wp--preset--color--surface-raised);
	font-weight: var(--sq-w-semibold);
}
.sgp-compare tbody tr:hover { background: var(--wp--preset--color--surface); }

/* ─── Solution page: evidence and honesty blocks ───────────────────────────
   "Why not that" and "Not recommended for" are given real visual weight. Most
   competitors omit negatives entirely; showing them is the trust product. */

.sgp-panel {
	padding: var(--wp--preset--spacing--50);
	border-radius: var(--wp--custom--radius--md);
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--surface);
}
.sgp-panel--free-fix  { border-inline-start: 3px solid var(--wp--preset--color--verified); }
.sgp-panel--caution   { border-inline-start: 3px solid var(--wp--preset--color--caution); }
.sgp-panel--negative  { border-inline-start: 3px solid var(--wp--preset--color--critical); }
.sgp-panel__label {
	font-size: var(--sq-t-eyebrow);
	text-transform: uppercase;
	letter-spacing: var(--sq-ls-eyebrow);
	font-weight: var(--sq-w-semibold);
	color: var(--wp--preset--color--text-subtle);
	margin-block-end: var(--wp--preset--spacing--20);
}

/* ─── Affiliate disclosure ─────────────────────────────────────────────────
   Never hidden, never below the fold on a page that carries a monetised link. */
.sgp-disclosure {
	font-size: var(--sq-t-eyebrow);
	color: var(--wp--preset--color--text-muted);
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--sm);
}

/* ─── Accessibility & motion ───────────────────────────────────────────────*/

:where(a, button, summary, input, select, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	border-radius: var(--wp--custom--radius--sm);
}

/* Touch targets meet the 44px minimum on coarse pointers. */
@media (pointer: coarse) {
	
	.sgp-filters > summary { min-block-size: 44px; }
}

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

.sgp-visually-hidden {
	position: absolute;
	inline-size: 1px; block-size: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 1 — screen components
   Same rules apply: tokens only, mobile-first, no JS dependency.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Buttons ──────────────────────────────────────────────────────────────*/

.sgp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
	padding: 0.7rem 1.15rem;
	border-radius: var(--wp--custom--radius--md);
	border: 1px solid var(--wp--preset--color--border-strong);
	background: var(--wp--preset--color--surface-raised);
	color: var(--wp--preset--color--text);
	font-size: var(--sq-t-p3);
	font-weight: var(--sq-w-semibold);
	text-decoration: none;
	line-height: var(--sq-lh-ui);
	min-block-size: 44px;
	transition: background var(--wp--custom--transition--fast), border-color var(--wp--custom--transition--fast);
}
.sgp-btn:hover { border-color: var(--wp--preset--color--text-subtle); }
.sgp-btn--primary {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-contrast);
	border-color: var(--wp--preset--color--accent);
}
.sgp-btn--primary:hover { opacity: 0.92; }

/* ─── Hero ─────────────────────────────────────────────────────────────────
   Leads with the question, not a catalogue boast. */

.sgp-hero {
	padding-block: var(--wp--preset--spacing--80) var(--wp--preset--spacing--70);
	border-block-end: 1px solid var(--wp--preset--color--border);
}
.sgp-hero__inner { max-inline-size: 46rem; }
.sgp-hero__title {
	font-size: var(--sq-t-h2);
	line-height: var(--sq-lh-h2);
	letter-spacing: var(--sq-ls-h2);
	margin: 0 0 var(--wp--preset--spacing--40);
}
.sgp-hero__sub {
	font-size: var(--sq-t-p1);
	color: var(--wp--preset--color--text-muted);
	margin: 0 0 var(--wp--preset--spacing--50);
	max-inline-size: 38rem;
}
.sgp-hero__search { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--20); }
.sgp-hero__search input[type="search"] {
	flex: 1 1 18rem;
	min-inline-size: 0;
	padding: 0.85rem 1rem;
	font-size: var(--sq-t-p2);
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--surface-raised);
	color: var(--wp--preset--color--text);
	min-block-size: 44px;
}
.sgp-hero__search button {
	padding: 0.85rem 1.35rem;
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-contrast);
	font-size: var(--sq-t-p3);
	font-weight: var(--sq-w-semibold);
	cursor: pointer;
	min-block-size: 44px;
}
.sgp-hero__examples {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	padding: 0;
	margin: var(--wp--preset--spacing--40) 0 0;
}
.sgp-hero__examples a {
	display: inline-block;
	padding: 0.35rem 0.75rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill);
	font-size: var(--sq-t-p3);
	color: var(--wp--preset--color--text-muted);
	text-decoration: none;
	background: var(--wp--preset--color--surface);
}
.sgp-hero__examples a:hover {
	border-color: var(--wp--preset--color--border-strong);
	color: var(--wp--preset--color--text);
}

/* ─── Sections ─────────────────────────────────────────────────────────────*/

.sgp-section { padding-block: var(--wp--preset--spacing--70); }
.sgp-section__title {
	font-size: var(--sq-t-h3);
	margin: 0 0 var(--wp--preset--spacing--30);
}
.sgp-section__sub {
	color: var(--wp--preset--color--text-muted);
	margin: 0 0 var(--wp--preset--spacing--50);
	max-inline-size: 42rem;
}

/* ─── Platform tiles ───────────────────────────────────────────────────────*/

.sgp-tiles {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr));
}
.sgp-tile {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--surface-raised);
	text-decoration: none;
	color: var(--wp--preset--color--text);
	min-block-size: 44px;
	transition: border-color var(--wp--custom--transition--fast);
}
.sgp-tile:hover { border-color: var(--wp--preset--color--border-strong); }
.sgp-tile__name { font-weight: var(--sq-w-semibold); }
.sgp-tile__count { font-size: var(--sq-t-eyebrow); color: var(--wp--preset--color--text-subtle); }

/* ─── Pills ────────────────────────────────────────────────────────────────*/

.sgp-pills { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--20); }
.sgp-pill {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 0.9rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--surface-raised);
	color: var(--wp--preset--color--text);
	text-decoration: none;
	font-size: var(--sq-t-p3);
	min-block-size: 40px;
}
.sgp-pill:hover { border-color: var(--wp--preset--color--border-strong); }

/* ─── Card additions ───────────────────────────────────────────────────────*/

/* At the narrowest width, product type is dropped and platform kept — platform is
   the more decision-relevant of the two, and the title usually implies the type. */

.sgp-card__price--none { color: var(--wp--preset--color--text-subtle); font-weight: var(--sq-w-medium); }

/* ─── Catalogue toolbar ────────────────────────────────────────────────────*/

.sgp-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	padding-block-end: var(--wp--preset--spacing--40);
	margin-block-end: var(--wp--preset--spacing--50);
	border-block-end: 1px solid var(--wp--preset--color--border);
}
.sgp-toolbar__count { margin: 0; font-size: var(--sq-t-p3); color: var(--wp--preset--color--text-muted); }
.sgp-toolbar__sort { display: flex; align-items: center; gap: var(--wp--preset--spacing--20); font-size: var(--sq-t-p3); }
.sgp-toolbar__sort select {
	padding: 0.5rem 0.7rem;
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--surface-raised);
	color: var(--wp--preset--color--text);
	font-size: var(--sq-t-p3);
	min-block-size: 40px;
}

/* ─── Filters ──────────────────────────────────────────────────────────────*/

.sgp-filters__clear {
	display: inline-block;
	margin-block-end: var(--wp--preset--spacing--30);
	font-size: var(--sq-t-p3);
}
.sgp-filters__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--wp--preset--spacing--10); }
.sgp-filters__item {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	padding: 0.4rem 0;
	text-decoration: none;
	color: var(--wp--preset--color--text-muted);
	font-size: var(--sq-t-p3);
	min-block-size: 36px;
}
.sgp-filters__item:hover { color: var(--wp--preset--color--text); }
.sgp-filters__check {
	inline-size: 1rem;
	block-size: 1rem;
	flex: none;
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: 3px;
	background: var(--wp--preset--color--surface-raised);
}
/* State is conveyed by the mark and the label weight, never by colour alone. */
.sgp-filters__item.is-active { color: var(--wp--preset--color--text); font-weight: var(--sq-w-semibold); }
.sgp-filters__item.is-active .sgp-filters__check {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	position: relative;
}
.sgp-filters__item.is-active .sgp-filters__check::after {
	content: "";
	position: absolute;
	inset-block-start: 1px;
	inset-inline-start: 4px;
	inline-size: 4px;
	block-size: 8px;
	border: solid var(--wp--preset--color--accent-contrast);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* ─── Panels / product page ────────────────────────────────────────────────*/

.sgp-note { font-size: var(--sq-t-eyebrow); color: var(--wp--preset--color--text-subtle); margin: 0; flex-basis: 100%; }

.sgp-panel { margin-block: var(--wp--preset--spacing--40); }
.sgp-panel ul, .sgp-panel ol { margin: 0; padding-inline-start: 1.15rem; }
.sgp-panel li { margin-block: var(--wp--preset--spacing--10); }
.sgp-panel--evidence { border-inline-start: 3px solid var(--wp--preset--color--accent); }

.sgp-steps { padding-inline-start: 1.3rem; }
.sgp-steps li { margin-block: var(--wp--preset--spacing--30); }

/* ─── Empty state ──────────────────────────────────────────────────────────*/

.sgp-empty {
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
	border: 1px dashed var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--radius--lg);
	text-align: start;
}
.sgp-empty h2 { margin-block-start: 0; font-size: var(--sq-t-h4); }
.sgp-empty p { color: var(--wp--preset--color--text-muted); max-inline-size: 40rem; }
.sgp-empty .sgp-pills { margin-block: var(--wp--preset--spacing--40); }

/* ─── Pagination ───────────────────────────────────────────────────────────*/

.sgp-pagination { display: flex; justify-content: center; gap: var(--wp--preset--spacing--20); margin-block-start: var(--wp--preset--spacing--70); flex-wrap: wrap; }
.sgp-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 44px;
	min-block-size: 44px;
	padding-inline: var(--wp--preset--spacing--20);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
	text-decoration: none;
	font-size: var(--sq-t-p3);
	color: var(--wp--preset--color--text-muted);
}
.sgp-pagination .page-numbers.current {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-contrast);
	font-weight: var(--sq-w-semibold);
}

/* ─── Platform hub ─────────────────────────────────────────────────────────*/

.sgp-platform-hub__head { padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50); border-block-end: 1px solid var(--wp--preset--color--border); }
.sgp-platform-hub__head h1 { font-size: var(--sq-t-h2); margin: 0 0 var(--wp--preset--spacing--30); }
.sgp-platform-hub__problems { padding-block-end: var(--wp--preset--spacing--50); }
.sgp-platform-hub__browse { margin: 0 0 var(--wp--preset--spacing--70); }
.sgp-platform-redirect {
	max-inline-size: 42rem;
	padding-block: var(--wp--preset--spacing--80);
}
.sgp-platform-redirect h1 { margin-block: 0 var(--wp--preset--spacing--30); font-size: var(--sq-t-h2); }
.sgp-platform-redirect > p:not(.sgp-panel__label) { color: var(--wp--preset--color--text-muted); margin-block-end: var(--wp--preset--spacing--50); }

/* ─── Filter panel wrapper ─────────────────────────────────────────────────
   Rendered `open` always: a closed <details> hides its children via the UA
   stylesheet, and hiding only the <summary> on desktop produced an empty
   sidebar. The summary is the mobile collapse control. */

.sgp-filters-panel { border: 0; }
.sgp-filters-panel__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--surface-raised);
	font-weight: var(--sq-w-semibold);
	font-size: var(--sq-t-p3);
	cursor: pointer;
	list-style: none;
	min-block-size: 44px;
	margin-block-end: var(--wp--preset--spacing--30);
}
.sgp-filters-panel__summary::-webkit-details-marker { display: none; }
.sgp-filters-panel__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 1.4rem;
	block-size: 1.4rem;
	padding-inline: 0.35rem;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-contrast);
	font-size: var(--sq-t-eyebrow);
}
.sgp-filters > summary {
	font-size: var(--sq-t-p3);
	padding: var(--wp--preset--spacing--30) 0;
	border-block-end: 1px solid var(--wp--preset--color--border);
}
.sgp-filters { border: 0; border-radius: 0; }
.sgp-filters__group { padding: var(--wp--preset--spacing--30) 0; }

/* Mobile: collapsed by default so products are reachable without scrolling past
   every facet. Desktop: always expanded, control hidden. Checkbox rather than
   <details> because only a checkbox can hold a different state per breakpoint
   without JavaScript. */
.sgp-filters-panel__body { display: none; }
.sgp-filters-panel__toggle:checked ~ .sgp-filters-panel__body { display: block; }
.sgp-filters-panel__summary::after {
	content: "";
	inline-size: 0.5rem;
	block-size: 0.5rem;
	border-inline-end: 1.5px solid var(--wp--preset--color--text-subtle);
	border-block-end: 1.5px solid var(--wp--preset--color--text-subtle);
	transform: rotate(45deg) translateY(-2px);
	margin-inline-start: auto;
}
.sgp-filters-panel__toggle:checked ~ .sgp-filters-panel__summary::after {
	transform: rotate(-135deg) translateY(-2px);
}
.sgp-filters-panel__toggle:focus-visible ~ .sgp-filters-panel__summary {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

@media (min-width: 900px) {
	.sgp-filters-panel__summary { display: none; }
	.sgp-filters-panel__body { display: block; }
}

/* Hierarchical facet terms read as children rather than as siblings. */
.sgp-filters__item--child { padding-inline-start: var(--wp--preset--spacing--40); }
.sgp-filters__item--child .sgp-filters__label { color: var(--wp--preset--color--text-subtle); }

/* ─── Filter sidebar height ────────────────────────────────────────────────
   Seven facet groups over ~56 terms made the sidebar ~3,700px tall, which made
   the whole page that tall even when a filter returned a single result. Sticky
   positioning alone does not bound height, so the sidebar gets its own scroll
   container and each long facet list is capped. */

@media (min-width: 900px) {
	.sgp-catalogue__filters {
		max-block-size: calc(100vh - var(--wp--preset--spacing--70));
		overflow-y: auto;
		overscroll-behavior: contain;
		padding-inline-end: var(--wp--preset--spacing--20);
	}
}

.sgp-filters__list {
	max-block-size: 17rem;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* Thin, unobtrusive scrollbars inside the facet panel. */
.sgp-catalogue__filters,
.sgp-filters__list {
	scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--border-strong) transparent;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN REVIEW ROUND 1 — implemented from ChatGPT decisions A–H
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Editorial display type ───────────────────────────────────────────────
   Newsreader is opt-in via .sgp-display, on major display headings only.
   Catalogue headings, card titles and all interface text stay in system sans,
   so the contrast between editorial voice and interface voice is legible. */

.sgp-display {
	font-family: var(--sq-font-sans);
	font-weight: var(--sq-w-semibold);
	letter-spacing: var(--sq-ls-h4);
}

/* ─── Problem paths (replaces generic pills) ───────────────────────────────
   Outcome-led, with a diagnostic cue. "Get more qualified leads" tells a
   visitor what they get; "Lead generation" asks them to translate first. */

.sgp-paths {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
}
.sgp-path {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--surface-raised);
	text-decoration: none;
	block-size: 100%;
	transition: border-color var(--wp--custom--transition--fast);
}
.sgp-path:hover { border-color: var(--wp--preset--color--accent); }
.sgp-path__label {
	font-weight: var(--sq-w-semibold);
	color: var(--wp--preset--color--text);
	font-size: var(--sq-t-p2);
}
.sgp-path__cue {
	font-size: var(--sq-t-p3);
	color: var(--wp--preset--color--text-muted);
	line-height: var(--sq-lh-eyebrow);
}

/* ─── Verification promise ─────────────────────────────────────────────────*/

.sgp-promise {
	padding: var(--wp--preset--spacing--60);
	margin-block: var(--wp--preset--spacing--60);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--surface);
}
.sgp-promise__title { font-size: var(--sq-t-h4); margin: 0 0 var(--wp--preset--spacing--40); }
.sgp-promise__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.sgp-promise__list li {
	font-size: var(--sq-t-p3);
	color: var(--wp--preset--color--text-muted);
	line-height: var(--sq-lh-supporting);
	padding-inline-start: var(--wp--preset--spacing--40);
	border-inline-start: 2px solid var(--wp--preset--color--verified);
}
.sgp-promise__list strong { color: var(--wp--preset--color--text); font-weight: var(--sq-w-semibold); }
.sgp-promise__link { margin: var(--wp--preset--spacing--40) 0 0; font-size: var(--sq-t-p3); }

.sgp-section__note {
	margin-block-start: var(--wp--preset--spacing--40);
	font-size: var(--sq-t-p3);
	color: var(--wp--preset--color--text-subtle);
}

/* ─── Tightened vertical rhythm ────────────────────────────────────────────
   Sections were spaced for a magazine. On desktop the first recommendation
   must be able to enter the viewport alongside the block above it. */

@media (min-width: 900px) {
	.sgp-section { padding-block: var(--wp--preset--spacing--60); }
	.sgp-hero { padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60); }
}

/* ─── Mobile filter bottom sheet (decision F) ──────────────────────────────
   CSS-only. Scroll locking, focus trapping, Escape and animated dismissal all
   require JavaScript and are progressive enhancements, not prerequisites for
   browsing — so the sheet works without them and can be upgraded later. */

.sgp-filters-panel__scrim { display: none; }

@media (max-width: 899px) {
	.sgp-filters-panel__toggle:checked ~ .sgp-filters-panel__scrim {
		display: block;
		position: fixed;
		inset: 0;
		background: color-mix(in srgb, var(--wp--preset--color--text) 45%, transparent);
		z-index: 40;
	}

	.sgp-filters-panel__body {
		position: fixed;
		inset-inline: 0;
		inset-block-end: 0;
		z-index: 41;
		display: none;
		grid-template-rows: auto 1fr auto;
		block-size: 85vh;
		max-block-size: 85dvh;
		background: var(--wp--preset--color--canvas);
		border-start-start-radius: var(--wp--custom--radius--lg);
		border-start-end-radius: var(--wp--custom--radius--lg);
		box-shadow: var(--wp--custom--shadow--lg);
	}

	.sgp-filters-panel__toggle:checked ~ .sgp-filters-panel__body { display: grid; }

	/* Header and footer stay put; only the groups scroll. */
	.sgp-filters-panel__bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--wp--preset--spacing--30);
		padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
		border-block-end: 1px solid var(--wp--preset--color--border);
	}
	.sgp-filters-panel__bar-title {
		display: inline-flex;
		align-items: center;
		gap: var(--wp--preset--spacing--20);
		font-weight: var(--sq-w-semibold);
	}
	.sgp-filters-panel__close {
		cursor: pointer;
		padding: 0.5rem 0.75rem;
		margin: -0.5rem -0.75rem;
		min-block-size: 44px;
		display: inline-flex;
		align-items: center;
		color: var(--wp--preset--color--text-muted);
		font-size: var(--sq-t-p3);
	}

	.sgp-filters-panel__scroll {
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 0 var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
		-webkit-overflow-scrolling: touch;
	}

	.sgp-filters-panel__foot {
		display: flex;
		gap: var(--wp--preset--spacing--30);
		padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
		border-block-start: 1px solid var(--wp--preset--color--border);
		background: var(--wp--preset--color--canvas);
	}
	.sgp-filters-panel__apply { flex: 1; cursor: pointer; }

	/* Inside the sheet each group is already open; the internal cap is unnecessary. */
	.sgp-filters__list { max-block-size: none; overflow: visible; }
}

/* At the smallest width the sheet is effectively a full panel — desktop sidebar
   density does not belong here. */
@media (max-width: 359px) {
	.sgp-filters-panel__body { block-size: 95vh; max-block-size: 95dvh; }
}

@media (min-width: 900px) {
	.sgp-filters-panel__bar,
	.sgp-filters-panel__foot { display: none; }
	.sgp-filters-panel__scroll { padding: 0; }
}

/* ─── Applied filter chips ─────────────────────────────────────────────────*/

.sgp-chips {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--wp--preset--spacing--40);
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
}
.sgp-chip--removable {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	text-decoration: none;
	background: var(--wp--preset--color--surface-raised);
	border-color: var(--wp--preset--color--border-strong);
	color: var(--wp--preset--color--text);
	padding: 0.35rem 0.6rem;
	min-block-size: 36px;
}
.sgp-chip--removable:hover { border-color: var(--wp--preset--color--accent); }
.sgp-chip__x { color: var(--wp--preset--color--text-subtle); font-size: var(--sq-t-p3); line-height: var(--sq-lh-h1); }

/* ─── Best for / Avoid if (decision C) ─────────────────────────────────────*/

.sgp-fit {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	margin-block: var(--wp--preset--spacing--50);
}
.sgp-fit__col {
	padding: var(--wp--preset--spacing--50);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--surface-raised);
}
.sgp-fit__col--for   { border-inline-start: 3px solid var(--wp--preset--color--verified); }
.sgp-fit__col--avoid { border-inline-start: 3px solid var(--wp--preset--color--caution); }
.sgp-fit__col ul { margin: 0; padding-inline-start: 1.1rem; font-size: var(--sq-t-p3); color: var(--wp--preset--color--text-muted); }
.sgp-fit__col li { margin-block: var(--wp--preset--spacing--10); }

/* ─── Free-fix bridge (decision B) ─────────────────────────────────────────
   States when you do NOT need to buy anything, which is what stops the free fix
   reading as a consolation prize. */

.sgp-panel__bridge {
	margin: var(--wp--preset--spacing--40) 0 0;
	padding-block-start: var(--wp--preset--spacing--30);
	border-block-start: 1px solid var(--wp--preset--color--border);
	font-size: var(--sq-t-p3);
	color: var(--wp--preset--color--text-muted);
}

.sgp-panel__outcome {
	display: grid;
	grid-template-columns: minmax(6rem, auto) 1fr;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding-block: var(--wp--preset--spacing--20);
}
.sgp-panel__outcome + .sgp-panel__outcome { border-block-start: 1px solid var(--wp--preset--color--border); }
.sgp-panel__outcome strong { color: var(--wp--preset--color--text); }
.sgp-panel__outcome--stop strong { color: var(--wp--preset--color--verified); }
.sgp-panel__outcome--compare strong { color: var(--wp--preset--color--accent); }

.sgp-solution > .sgp-section { padding-block: var(--wp--preset--spacing--40); }

@media (max-width: 767px) {
	.sgp-solution > .sgp-section { padding-block: var(--wp--preset--spacing--50); }
	.sgp-solution > .sgp-panel { margin-block: var(--wp--preset--spacing--30); }
	.sgp-panel__outcome { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--10); }
}

/* ─── Empty state additions (decision H) ───────────────────────────────────*/

.sgp-empty__filters { margin-block: var(--wp--preset--spacing--50); }
.sgp-empty__actions { margin-block: var(--wp--preset--spacing--40); }
.sgp-empty__paths { margin-block-start: var(--wp--preset--spacing--50); }

/* ─── Squarespell marketplace system · 2026 ─────────────────────────────── */
body{font-family:var(--sq-font-sans)!important;background:var(--wp--preset--color--canvas);color:var(--wp--preset--color--text)}
.sgp-display,h1,h2,h3{font-family:var(--sq-font-sans)!important}.sq-logo{display:inline-flex;align-items:center;gap:9px;color:var(--wp--preset--color--text);text-decoration:none;font-size: var(--sq-t-p1);font-weight: var(--sq-w-bold);letter-spacing: var(--sq-ls-h1);white-space:nowrap}.sq-logo__symbol{width:31px;height:31px;display:grid;place-items:center;border-radius:8px;background:var(--wp--preset--color--brand);color:var(--wp--preset--color--accent-contrast);font-size: var(--sq-t-p2);font-weight: var(--sq-w-bold);transform:rotate(-4deg)}.sq-menu{display:none;border:0;background:transparent;font-size: var(--sq-t-h3)}
.sq-home{padding:0!important;max-width:none!important}.sq-hero{padding:34px max(24px,calc((100vw - 1440px)/2));display:grid;grid-template-columns:minmax(0,1.25fr) minmax(380px,.75fr);gap:22px;background:var(--wp--preset--color--surface)}.sq-hero__visual{min-height:480px;display:grid;grid-template-columns:1.15fr .85fr;grid-template-rows:1fr 1fr;gap:8px;border-radius:16px;overflow:hidden;background:var(--wp--preset--color--text)}.sq-hero__visual img{width:100%;height:100%;object-fit:cover;display:block}.sq-hero__visual img:first-child{grid-row:1/3}.sq-hero__copy{padding:45px 38px;border:1px solid var(--wp--preset--color--border-strong);border-radius:16px;background:var(--wp--preset--color--surface-raised);display:flex;flex-direction:column;justify-content:center}.sq-kicker{font-size: var(--sq-t-eyebrow);font-weight: var(--sq-w-bold);text-transform:uppercase;letter-spacing: var(--sq-ls-eyebrow);color:var(--wp--preset--color--brand)}.sq-hero h1{font-size: var(--sq-t-h1) !important;line-height: var(--sq-lh-h1) !important;letter-spacing: var(--sq-ls-h1) !important;margin:12px 0 18px!important}.sq-hero__copy>p{font-size: var(--sq-t-p2);line-height: var(--sq-lh-body);color:var(--wp--preset--color--text-muted);margin:0 0 26px}.sq-hero__copy form{height:54px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;border:2px solid var(--wp--preset--color--text);border-radius:9px;background:var(--wp--preset--color--surface-raised);overflow:hidden}.sq-hero__copy form>span{font-size: var(--sq-t-h4);padding-left:14px}.sq-hero__copy input{height:100%;border:0!important;background:transparent!important;padding:0 12px!important;outline:0}.sq-hero__copy button{height:100%;padding:0 18px;border:0;background:var(--wp--preset--color--brand);color:var(--wp--preset--color--accent-contrast);font-weight: var(--sq-w-bold)}.sq-hero__popular{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px;font-size: var(--sq-t-p3)}.sq-hero__popular a{color:var(--wp--preset--color--text-muted)}
.sq-band{min-height:68px;padding:12px max(24px,calc((100vw - 1440px)/2));display:flex;align-items:center;justify-content:center;gap:15px;background:var(--wp--preset--color--brand);color:var(--wp--preset--color--accent-contrast);font-size: var(--sq-t-p3)}.sq-band a{color:var(--wp--preset--color--accent-contrast);font-weight: var(--sq-w-bold)}.sq-market-section{width:min(1440px,calc(100% - 48px));margin:0 auto;padding:68px 0!important}.sq-section-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:27px}.sq-section-head h2,.sq-market-section>.sgp-section>.sgp-section__title{font-size: var(--sq-t-h3) !important;line-height: var(--sq-lh-h2) !important;letter-spacing: var(--sq-ls-h1) !important;margin:0 0 7px!important}.sq-section-head p{margin:0;color:var(--wp--preset--color--text-muted);font-size: var(--sq-t-p3)}.sq-section-head>a{font-size: var(--sq-t-p3);color:var(--wp--preset--color--text);font-weight: var(--sq-w-bold)}
.sq-category-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}.sq-category-grid a{min-height:160px;padding:19px;display:flex;flex-direction:column;position:relative;overflow:hidden;border:1px solid var(--wp--preset--color--border);border-radius:11px;background:var(--wp--preset--color--surface-raised);text-decoration:none;color:var(--wp--preset--color--text);transition:.2s}.sq-category-grid b{font-size: var(--sq-t-p3)}.sq-category-grid span{font-size: var(--sq-t-p3);color:var(--wp--preset--color--text-subtle);margin-top:4px}.sq-category-grid i{margin-top:auto;align-self:end;width:58px;height:58px;display:grid;place-items:center;border-radius:16px;background:var(--wp--preset--color--brand-soft);color:var(--wp--preset--color--brand);font-style:normal;font-weight: var(--sq-w-bold);font-size: var(--sq-t-h4)}.sq-category-grid a:hover{border-color:var(--wp--preset--color--brand);transform:translateY(-3px);box-shadow:var(--wp--custom--shadow--sm)}
.sq-market-section>.sgp-section{padding:0!important}.sq-market-section .sgp-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:20px!important}.sgp-badge{padding:.22rem .44rem!important;font-size: var(--sq-t-eyebrow) !important}.sgp-badge__symbol{width:10px;height:10px}.sgp-chip{font-size: var(--sq-t-eyebrow) !important}.sgp-card__price{font-size: var(--sq-t-p3) !important}
.sq-solution-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.sq-solution-grid a{min-height:190px;padding:20px;display:flex;flex-direction:column;border-radius:11px;text-decoration:none;color:var(--wp--preset--color--text);background:var(--wp--preset--color--surface-raised);border:1px solid var(--wp--preset--color--border)}.sq-solution-grid span{font-size: var(--sq-t-p3);color:var(--wp--preset--color--brand);font-weight: var(--sq-w-bold)}.sq-solution-grid b{margin-top:auto;font-size: var(--sq-t-p1)}.sq-solution-grid small{margin-top:6px;color:var(--wp--preset--color--text-muted);line-height: var(--sq-lh-eyebrow)}.sq-solution-grid a:hover{border-color:var(--wp--preset--color--brand)}
.sq-feature{padding:75px max(24px,calc((100vw - 1440px)/2));display:grid;grid-template-columns:.8fr 1.2fr;gap:75px;color:var(--wp--preset--color--accent-contrast);background:var(--wp--preset--color--text)}.sq-feature>div:first-child>span{font-size: var(--sq-t-p3);letter-spacing: var(--sq-ls-eyebrow);font-weight: var(--sq-w-bold);color:var(--wp--preset--color--verified-bg)}.sq-feature h2{font-size: var(--sq-t-h1) !important;line-height: var(--sq-lh-h1) !important;letter-spacing: var(--sq-ls-h1) !important;margin:13px 0 20px!important}.sq-feature>div:first-child p{color:color-mix(in srgb,var(--wp--preset--color--accent-contrast) 72%,transparent);font-size: var(--sq-t-p3);line-height: var(--sq-lh-body)}.sq-feature a{color:var(--wp--preset--color--accent-contrast);font-weight: var(--sq-w-bold)}.sq-feature__facts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.sq-feature__facts article{padding:25px;border:1px solid color-mix(in srgb,var(--wp--preset--color--accent-contrast) 22%,transparent);border-radius:11px}.sq-feature__facts strong{display:block;font-size: var(--sq-t-h3);color:var(--wp--preset--color--verified-bg)}.sq-feature__facts h3{font-size: var(--sq-t-p2) !important;margin:45px 0 8px!important}.sq-feature__facts p{font-size: var(--sq-t-p3);line-height: var(--sq-lh-supporting);color:color-mix(in srgb,var(--wp--preset--color--accent-contrast) 65%,transparent)}
.sq-collection-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.sq-collection-grid a{text-decoration:none;color:var(--wp--preset--color--text)}.sq-collection-grid img{width:100%;aspect-ratio:1.65;object-fit:cover;border-radius:11px;display:block;margin-bottom:12px}.sq-collection-grid span{font-size: var(--sq-t-p3);color:var(--wp--preset--color--text-subtle)}.sq-collection-grid b{display:block;margin-top:4px;font-size: var(--sq-t-p3)}
.sq-browse{padding-bottom:80px!important}.sq-browse .sgp-catalogue{grid-template-columns:270px 1fr!important;gap:32px!important;padding-top:28px;border-top:1px solid var(--wp--preset--color--border)}.sq-browse .sgp-catalogue__filters{position:sticky;top:15px}.sq-browse .sgp-filters{border:0!important;background:transparent!important}.sq-browse .sgp-sort{padding:0 0 18px!important;border-bottom:1px solid var(--wp--preset--color--border)}
.sq-footer{padding:0 max(24px,calc((100vw - 1440px)/2));color:var(--wp--preset--color--accent-contrast);background:var(--wp--preset--color--text)}.sq-newsletter{min-height:210px;display:grid;grid-template-columns:1fr minmax(360px,560px);gap:50px;align-items:center;border-bottom:1px solid color-mix(in srgb,var(--wp--preset--color--accent-contrast) 20%,transparent)}.sq-newsletter h2{font-size: var(--sq-t-h3) !important;margin:0 0 8px!important}.sq-newsletter p{font-size: var(--sq-t-p3);color:color-mix(in srgb,var(--wp--preset--color--accent-contrast) 70%,transparent)}.sq-newsletter form{height:50px;display:grid;grid-template-columns:1fr auto;padding:4px;background:var(--wp--preset--color--surface-raised);border-radius:8px}.sq-newsletter input{border:0!important;background:transparent!important;padding:0 13px!important}.sq-newsletter button{border:0;border-radius:6px;padding:0 16px;background:var(--wp--preset--color--brand);color:var(--wp--preset--color--accent-contrast);font-weight: var(--sq-w-bold)}.sq-footer__links{display:grid;grid-template-columns:1.6fr repeat(5,minmax(0,1fr));gap:34px;padding:55px 0}.sq-footer .sq-logo{color:var(--wp--preset--color--accent-contrast)}.sq-footer__brand p{max-width:420px;font-size: var(--sq-t-p3);line-height: var(--sq-lh-body);color:color-mix(in srgb,var(--wp--preset--color--accent-contrast) 65%,transparent)}.sq-footer__social{display:flex;gap:10px;margin-top:18px}.sq-footer .sq-footer__brand .sq-footer__social a{display:flex;align-items:center;justify-content:center;inline-size:38px;block-size:38px;border-radius:999px;border:0;background:var(--wp--preset--color--brand);color:#fff;transition:opacity var(--wp--custom--transition--base)}.sq-footer__social svg{inline-size:19px;block-size:19px}.sq-footer .sq-footer__brand .sq-footer__social a:hover{opacity:.82}.sq-footer__links h3{font-size: var(--sq-t-p3) !important;text-transform:uppercase;letter-spacing: var(--sq-ls-eyebrow);margin:0 0 15px!important}.sq-footer__links>div:not(:first-child){display:flex;flex-direction:column;gap:9px}.sq-footer__links a{color:color-mix(in srgb,var(--wp--preset--color--accent-contrast) 72%,transparent);text-decoration:none;font-size: var(--sq-t-p3)}.sq-footer__bottom{padding:20px 0;display:flex;justify-content:space-between;border-top:1px solid color-mix(in srgb,var(--wp--preset--color--accent-contrast) 20%,transparent);font-size: var(--sq-t-p3);color:color-mix(in srgb,var(--wp--preset--color--accent-contrast) 55%,transparent)}
@media(max-width:1100px){.sq-category-grid{grid-template-columns:repeat(3,1fr)}.sq-market-section .sgp-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}.sq-feature{grid-template-columns:1fr}.sq-feature__facts{grid-template-columns:repeat(3,1fr)}}
@media(max-width:800px){.sq-menu{display:block}.sq-hero{grid-template-columns:1fr;padding:18px}.sq-hero__visual{min-height:330px}.sq-hero__copy{padding:30px 24px}.sq-band{align-items:flex-start;flex-direction:column;gap:5px;padding-block:18px}.sq-market-section{width:calc(100% - 30px);padding-block:48px!important}.sq-market-section .sgp-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.sq-solution-grid{grid-template-columns:1fr 1fr}.sq-feature{padding:55px 22px;gap:35px}.sq-feature__facts{grid-template-columns:1fr}.sq-feature__facts h3{margin-top:25px!important}.sq-collection-grid{grid-template-columns:1fr}.sq-browse .sgp-catalogue{grid-template-columns:1fr!important}.sq-newsletter{grid-template-columns:1fr;padding:40px 0}.sq-footer__links{grid-template-columns:1fr 1fr}.sq-footer__brand{grid-column:1/-1}}
@media(max-width:480px){.sq-hero__visual{min-height:255px}.sq-hero__copy{padding:25px 18px}.sq-hero h1{font-size: var(--sq-t-h1) !important}.sq-hero__copy form{grid-template-columns:auto 1fr}.sq-hero__copy form button{display:none}.sq-category-grid{grid-template-columns:1fr 1fr}.sq-market-section .sgp-grid,.sq-solution-grid{grid-template-columns:1fr}.sq-section-head{align-items:flex-start;flex-direction:column}.sq-newsletter form{height:auto;grid-template-columns:1fr;gap:8px}.sq-newsletter input{min-height:44px}.sq-newsletter button{min-height:44px}.sqpp-trust{flex-wrap:wrap;min-block-size:auto;padding-block:6px}.sqpp-trust__how{flex-basis:100%;margin-inline-start:23px}.sq-footer__links{grid-template-columns:1fr 1fr;gap:30px}.sq-footer__bottom{flex-direction:column;gap:6px}}

/* Item detail mirrors a mature marketplace: preview first, decision panel second. */

/* ─── Squarespell intelligence edition ─────────────────────────────────── */
:root{--sq-ink:var(--wp--preset--color--text);--sq-paper:var(--wp--preset--color--surface);--sq-lime:var(--wp--preset--color--signal);--sq-cobalt:var(--wp--preset--color--brand);--sq-blue:var(--wp--preset--color--brand-soft);--sq-red:var(--wp--preset--color--critical);--sq-max:1440px}
body{font-family:var(--sq-font-sans)!important;background:var(--wp--preset--color--canvas)!important;font-weight: var(--sq-w-regular);letter-spacing: var(--sq-ls-h4)}
.sgp-display,h1,h2{font-family:var(--sq-font-sans)!important;font-weight: var(--sq-w-semibold) !important;letter-spacing: var(--sq-ls-h1) !important}.sq-home h3{font-family:var(--sq-font-sans)!important}.sq-logo{font-size: var(--sq-t-h4);font-weight: var(--sq-w-bold);letter-spacing: var(--sq-ls-h1)}.sq-logo__mark{position:relative;width:30px;height:30px;display:block;border-radius:50%;background:var(--sq-lime);overflow:hidden}.sq-logo__mark i{position:absolute;width:17px;height:6px;border:2px solid var(--sq-ink);border-radius:99px;transform:rotate(-32deg)}.sq-logo__mark i:first-child{left:2px;top:7px}.sq-logo__mark i:last-child{right:2px;bottom:7px}
.sq-intro{min-height:720px;padding:76px max(28px,calc((100vw - var(--sq-max))/2));display:grid;grid-template-columns:minmax(0,.95fr) minmax(560px,1.05fr);gap:70px;align-items:center;background:var(--sq-paper);overflow:hidden}.sq-intro__copy{position:relative;z-index:2}.sq-kicker{font-family:var(--sq-font-sans);font-size: var(--sq-t-eyebrow);font-weight: var(--sq-w-bold);letter-spacing: var(--sq-ls-eyebrow);text-transform:uppercase;color:var(--sq-cobalt)}.sq-intro h1{max-width:780px;margin:18px 0 26px!important;font-size: var(--sq-t-h1) !important;line-height: var(--sq-lh-h1) !important}.sq-intro h1 em,.sq-how h2 em{color:var(--sq-cobalt);font-weight: var(--sq-w-regular)}.sq-intro__copy>p{max-width:650px;font-size: var(--sq-t-p1);line-height: var(--sq-lh-body);color:var(--wp--preset--color--text-muted)}.sq-intro__actions{display:flex;align-items:center;gap:26px;margin-top:34px}.sq-btn-primary{display:inline-flex;min-height:54px;align-items:center;padding:0 24px;border-radius:99px;background:var(--sq-ink);color:var(--wp--preset--color--surface-raised);text-decoration:none;font-weight: var(--sq-w-semibold)}.sq-btn-text{color:var(--sq-ink);font-weight: var(--sq-w-semibold)}.sq-btn-text span{display:inline-grid;width:28px;height:28px;margin-left:7px;place-items:center;border-radius:50%;background:var(--sq-lime);text-decoration:none}.sq-intro__proof{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:72px;padding-top:20px;border-top:1px solid var(--wp--preset--color--border);font-size: var(--sq-t-p3);color:var(--wp--preset--color--text-muted)}.sq-intro__proof b{display:block;color:var(--sq-ink);font-size: var(--sq-t-p3);margin-bottom:3px}.sq-intro__stage{position:relative;min-height:560px;border-radius:50% 50% 44% 56%/44% 46% 54% 56%;background:var(--sq-cobalt);transform:rotate(-2deg)}.sq-stage__seal{position:absolute;inset:50% auto auto 50%;width:150px;height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:50%;background:var(--sq-lime);transform:translate(-50%,-50%) rotate(2deg);color:var(--sq-ink)}.sq-stage__seal span{font-family:var(--sq-font-sans);font-size: var(--sq-t-h1);line-height: var(--sq-lh-h1)}.sq-stage__seal small{text-align:center;font-size: var(--sq-t-p3);text-transform:uppercase;letter-spacing: var(--sq-ls-eyebrow);margin-top:10px}.sq-orbit{position:absolute;width:min(330px,48%);padding:20px;border:1px solid rgba(255,255,255,.45);border-radius:15px;background:rgba(255,255,255,.96);box-shadow:0 22px 60px color-mix(in srgb, var(--wp--preset--color--shadow-cool) 25%, transparent);transform:rotate(2deg)}.sq-orbit small{display:block;font-size: var(--sq-t-p3);letter-spacing: var(--sq-ls-eyebrow);color:var(--sq-cobalt)}.sq-orbit b{display:block;margin:20px 0 5px;font-size: var(--sq-t-p1)}.sq-orbit span{font-size: var(--sq-t-p3);color:var(--wp--preset--color--text-muted)}.sq-orbit--one{top:5%;left:-3%}.sq-orbit--two{right:-4%;top:23%}.sq-orbit--three{left:3%;bottom:4%}
.sq-diagnose{padding:90px max(28px,calc((100vw - var(--sq-max))/2));display:grid;grid-template-columns:.8fr 1.2fr;gap:100px;background:var(--wp--preset--color--surface-raised)}.sq-diagnose h2,.sq-ecosystems h2,.sq-ways h2{font-size: var(--sq-t-h1) !important;line-height: var(--sq-lh-h1) !important;margin:16px 0 20px!important}.sq-diagnose__intro p{max-width:470px;color:var(--wp--preset--color--text-muted);line-height: var(--sq-lh-body)}.sq-diagnose__form{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:28px;border-radius:24px;background:var(--sq-ink);color:var(--wp--preset--color--surface-raised)}.sq-diagnose__form label span{display:block;margin:0 0 8px;font-size: var(--sq-t-p3);letter-spacing: var(--sq-ls-eyebrow);text-transform:uppercase;color:var(--wp--preset--color--text-subtle)}.sq-diagnose__form input,.sq-diagnose__form select{width:100%;height:58px;padding:0 15px!important;border:1px solid var(--wp--preset--color--neutral-badge)!important;border-radius:9px!important;background:var(--wp--preset--color--text)!important;color:var(--wp--preset--color--surface-raised)!important}.sq-diagnose__form button{grid-column:1/-1;min-height:58px;border:0;border-radius:9px;background:var(--sq-lime);color:var(--sq-ink);font-weight: var(--sq-w-bold)}.sq-diagnose__form>p{grid-column:1/-1;margin:0;font-size: var(--sq-t-p3);color:var(--wp--preset--color--text-subtle);text-align:center}
.sq-ecosystems,.sq-ways{padding:100px max(28px,calc((100vw - var(--sq-max))/2))}.sq-platform-rail{display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--wp--preset--color--border-strong);border-left:1px solid var(--wp--preset--color--border-strong)}.sq-platform-rail a{min-height:260px;padding:20px;display:flex;flex-direction:column;border-right:1px solid var(--wp--preset--color--border-strong);border-bottom:1px solid var(--wp--preset--color--border-strong);color:var(--sq-ink);text-decoration:none;transition:.2s}.sq-platform-rail span{font-size: var(--sq-t-p3);color:var(--wp--preset--color--text-muted)}.sq-platform-rail b{margin-top:auto;font-family:var(--sq-font-sans);font-size: var(--sq-t-h3);font-weight: var(--sq-w-regular)}.sq-platform-rail small{margin-top:8px;color:var(--wp--preset--color--text-muted);line-height: var(--sq-lh-eyebrow)}.sq-platform-rail a:hover{background:var(--sq-lime)}
.sq-how{padding:100px max(28px,calc((100vw - var(--sq-max))/2));display:grid;grid-template-columns:1fr 1fr;gap:90px;background:var(--sq-cobalt);color:var(--wp--preset--color--surface-raised)}.sq-how h2{font-size: var(--sq-t-h1) !important;line-height: var(--sq-lh-h1) !important;margin:18px 0!important}.sq-how h2 em{color:var(--sq-lime)}.sq-how .sq-kicker{color:var(--sq-lime)}.sq-how ol{list-style:none;margin:0;padding:0}.sq-how li{display:grid;grid-template-columns:70px 1fr;gap:20px;padding:26px 0;border-bottom:1px solid rgba(255,255,255,.3)}.sq-how li>span{font-family:var(--sq-font-sans);font-size: var(--sq-t-h2);color:var(--sq-lime)}.sq-how h3{font-size: var(--sq-t-p1) !important;margin:0 0 7px!important}.sq-how p{margin:0;color:rgba(255,255,255,.72);font-size: var(--sq-t-p3)}
.sq-curated{max-width:var(--sq-max)!important;padding:100px 0!important}.sq-curated .sgp-section__title{font-family:var(--sq-font-sans)!important;font-size: var(--sq-t-h1) !important;font-weight: var(--sq-w-regular) !important}.sq-curated .sgp-grid{grid-template-columns:repeat(4,1fr)!important}
.sq-ways__grid{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--wp--preset--color--border-strong);border-left:1px solid var(--wp--preset--color--border-strong)}.sq-ways__grid a{min-height:300px;padding:34px;display:flex;flex-direction:column;border-right:1px solid var(--wp--preset--color--border-strong);border-bottom:1px solid var(--wp--preset--color--border-strong);color:var(--sq-ink);text-decoration:none}.sq-ways__grid small{color:var(--sq-cobalt);font-weight: var(--sq-w-bold);letter-spacing: var(--sq-ls-eyebrow)}.sq-ways__grid h3{max-width:480px;font-family:var(--sq-font-sans)!important;font-size: var(--sq-t-h1) !important;font-weight: var(--sq-w-regular);margin:30px 0 10px!important}.sq-ways__grid p{color:var(--wp--preset--color--text-muted)}.sq-ways__grid span{margin-top:auto;font-weight: var(--sq-w-bold)}.sq-ways__grid a:hover{background:var(--wp--preset--color--surface-raised)}
.sq-trust{padding:110px max(28px,calc((100vw - var(--sq-max))/2));display:grid;grid-template-columns:.9fr 1.1fr;gap:100px;background:var(--sq-ink);color:var(--wp--preset--color--surface-raised)}.sq-trust h2{font-size: var(--sq-t-h1) !important;line-height: var(--sq-lh-h1) !important;margin:18px 0 24px!important}.sq-trust>div>p{color:var(--wp--preset--color--text-subtle);line-height: var(--sq-lh-body)}.sq-trust a{color:var(--sq-lime)}.sq-trust__states{display:flex;flex-direction:column;justify-content:center}.sq-trust__states article{display:grid;grid-template-columns:140px 1fr auto;gap:20px;padding:26px 0;border-bottom:1px solid var(--wp--preset--color--neutral-badge);align-items:center}.sq-trust__states article>span{font-size: var(--sq-t-p3);text-transform:uppercase;letter-spacing: var(--sq-ls-eyebrow)}.sq-trust__states b{font-size: var(--sq-t-p2)}.sq-trust__states small{color:var(--wp--preset--color--text-subtle)}.sq-trust__states .is-pass>span{color:var(--wp--preset--color--verified-bg)}.sq-trust__states .is-stale>span{color:var(--wp--preset--color--stale-bg)}.sq-trust__states .is-fail>span{color:var(--wp--preset--color--critical-bg)}
.sgp-compat-grid span{display:block;font-size: var(--sq-t-p3);text-transform:uppercase;letter-spacing: var(--sq-ls-eyebrow);color:var(--wp--preset--color--text-muted)}.sgp-purchase-promises{margin:0;padding:14px 0 0 18px;border-top:1px solid var(--wp--preset--color--border);font-size: var(--sq-t-p3);color:var(--wp--preset--color--text-muted)}.sgp-compat-grid{display:grid;grid-template-columns:1fr 1fr}.sgp-compat-grid>div{padding:20px;border:1px solid var(--wp--preset--color--border);margin:-1px 0 0 -1px}.sgp-compat-grid strong{display:block;margin-top:13px;font-size: var(--sq-t-p3);line-height: var(--sq-lh-eyebrow)}
@media(max-width:1100px){.sq-intro{grid-template-columns:1fr;min-height:auto}.sq-intro__stage{min-height:500px}.sq-platform-rail{grid-template-columns:repeat(3,1fr)}.sq-curated{padding-inline:24px!important}.sq-trust{grid-template-columns:1fr}}
@media(max-width:800px){.sq-intro{padding:55px 20px;gap:45px}.sq-intro h1{font-size: var(--sq-t-h1) !important}.sq-intro__proof{grid-template-columns:1fr}.sq-intro__stage{min-height:430px}.sq-diagnose,.sq-how,.sq-trust{grid-template-columns:1fr;padding:70px 20px;gap:45px}.sq-diagnose__form{grid-template-columns:1fr}.sq-diagnose__form button,.sq-diagnose__form>p{grid-column:auto}.sq-ecosystems,.sq-ways{padding:70px 20px}.sq-platform-rail{grid-template-columns:1fr 1fr}.sq-platform-rail a{min-height:190px}.sq-ways__grid{grid-template-columns:1fr}.sq-trust__states article{grid-template-columns:1fr}.sq-curated .sgp-grid{grid-template-columns:1fr 1fr!important}}
@media(max-width:480px){.sq-intro h1{font-size: var(--sq-t-h1) !important}.sq-intro__stage{min-height:390px}.sq-orbit{width:72%}.sq-orbit--two{top:35%}.sq-platform-rail{grid-template-columns:1fr}.sq-ways__grid h3{font-size: var(--sq-t-h2) !important}.sq-curated .sgp-grid{grid-template-columns:1fr!important}}

/* Commerce is a first-class journey, not WooCommerce left at its defaults. */
.woocommerce-cart main,.woocommerce-checkout main{max-width:1240px!important;margin-inline:auto!important;padding:70px 24px 110px!important}.woocommerce-cart h1,.woocommerce-checkout h1{font-size: var(--sq-t-h1) !important;line-height: var(--sq-lh-h1) !important}.woocommerce table.shop_table{border:0!important;border-collapse:collapse!important;background:var(--wp--preset--color--surface-raised)}.woocommerce table.shop_table th{padding:18px!important;border-bottom:1px solid var(--wp--preset--color--border-strong)!important;font-size: var(--sq-t-p3);text-transform:uppercase;letter-spacing: var(--sq-ls-eyebrow)}.woocommerce table.shop_table td{padding:22px 18px!important;border-bottom:1px solid var(--wp--preset--color--border)!important}.woocommerce-cart .cart-collaterals,.woocommerce-checkout-review-order{padding:28px;border-radius:18px;background:var(--sq-ink);color:var(--wp--preset--color--surface-raised)}.woocommerce-cart .cart_totals h2,.woocommerce-checkout-review-order h3{font-family:var(--sq-font-sans)!important;font-size: var(--sq-t-h2) !important;color:var(--wp--preset--color--surface-raised)}.woocommerce a.checkout-button,.woocommerce #payment #place_order,.woocommerce button.button.alt{min-height:56px!important;border:0!important;border-radius:99px!important;background:var(--sq-lime)!important;color:var(--sq-ink)!important;font-weight: var(--sq-w-bold) !important}.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce form .form-row select{min-height:52px;padding:12px 14px!important;border:1px solid var(--wp--preset--color--border-strong)!important;border-radius:8px!important;background:var(--wp--preset--color--surface-raised)!important}.woocommerce form .form-row label{font-size: var(--sq-t-p3);font-weight: var(--sq-w-semibold)}.woocommerce-checkout #payment{background:var(--wp--preset--color--text)!important;color:var(--wp--preset--color--surface-raised);border-radius:14px!important}.woocommerce-checkout #payment div.payment_box{background:var(--wp--preset--color--text)!important;color:var(--wp--preset--color--surface-raised)}.woocommerce-checkout #payment div.payment_box:before{border-bottom-color:var(--wp--preset--color--text)!important}
@media(max-width:800px){.woocommerce-cart main,.woocommerce-checkout main{padding-top:45px!important}.woocommerce table.shop_table_responsive tr td{padding:14px!important}}

/* ─── Free-font visual system: Instrument Sans + Archivo + IBM Plex Mono ── */
body{font-family:var(--sq-font-sans)!important;background:var(--wp--preset--color--canvas)!important;font-variation-settings:"wdth" 100}
.sgp-display,h1,h2,h3,.sq-ways__grid h3,.sq-product__title{font-family:var(--sq-font-sans)!important;font-style:normal!important}.sq-home em{font-style:normal!important;color:inherit!important}.sq-logo__mark{border-radius:7px;background:var(--wp--preset--color--brand);transform:rotate(-5deg)}.sq-logo__mark i{border-color:var(--wp--preset--color--accent-contrast)}
.sq-intro{min-height:auto;padding-block:72px;grid-template-columns:minmax(0,.88fr) minmax(520px,1.12fr);gap:56px;background:var(--wp--preset--color--canvas)}.sq-intro h1{max-width:740px;margin:16px 0 20px!important;font-family:var(--sq-font-sans)!important;font-size: var(--sq-t-h1) !important;font-weight: var(--sq-w-semibold) !important;line-height: var(--sq-lh-h1) !important;letter-spacing: var(--sq-ls-h1) !important}.sq-intro__copy>p{max-width:650px;margin-bottom:28px;font-size: var(--sq-t-p1);line-height: var(--sq-lh-supporting)}.sq-hero-search{height:62px;display:grid;grid-template-columns:1fr auto;padding:5px;border:1px solid var(--wp--preset--color--border-strong);border-radius:13px;background:var(--wp--preset--color--surface-raised);box-shadow:0 14px 40px rgba(0,0,0,.08)}.sq-hero-search input{width:100%;border:0!important;background:transparent!important;padding-inline:16px!important;font-size: var(--sq-t-p3)}.sq-hero-search button{border:0;border-radius:9px;padding-inline:25px;background:var(--wp--preset--color--brand);color:var(--wp--preset--color--accent-contrast);font-weight: var(--sq-w-bold)}.sq-intro__actions{margin-top:20px}.sq-btn-primary{min-height:48px;background:var(--wp--preset--color--text);font-size: var(--sq-t-p3)}.sq-btn-text{font-size: var(--sq-t-p3);text-decoration:none}.sq-intro__proof{margin-top:42px}.sq-intro__proof b{font-family:var(--sq-font-mono);font-size: var(--sq-t-p3);text-transform:uppercase;letter-spacing: var(--sq-ls-eyebrow)}.sq-intro__stage{min-height:600px;display:grid;grid-template-columns:1.2fr .8fr;grid-template-rows:1fr 1fr;gap:12px;border-radius:0;background:transparent;transform:none}.sq-visual-card{position:relative;display:block;overflow:hidden;border-radius:16px;background:var(--wp--preset--color--surface);color:var(--wp--preset--color--accent-contrast);text-decoration:none}.sq-visual-card--wide{grid-row:1/3}.sq-visual-card img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .45s cubic-bezier(.2,.7,.2,1)}.sq-visual-card:hover img{transform:scale(1.035)}.sq-visual-card:after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,color-mix(in srgb, var(--wp--preset--color--overlay-scrim) 82%, transparent))}.sq-visual-card span{position:absolute;z-index:2;inset:auto 18px 18px}.sq-visual-card small{display:block;font-family:var(--sq-font-mono);font-size: var(--sq-t-p3);text-transform:uppercase;letter-spacing: var(--sq-ls-eyebrow);color:var(--wp--preset--color--signal)}.sq-visual-card b{display:block;max-width:320px;margin-top:7px;font-family:var(--sq-font-sans);font-size: var(--sq-t-h4);line-height: var(--sq-lh-ui)}
.sq-diagnose{background:var(--wp--preset--color--text);color:var(--wp--preset--color--accent-contrast)}.sq-diagnose .sq-kicker{color:var(--wp--preset--color--signal)}.sq-diagnose__intro p{color:var(--wp--preset--color--border)}.sq-diagnose__form{background:var(--wp--preset--color--surface-raised);color:var(--wp--preset--color--text);box-shadow:0 22px 70px rgba(0,0,0,.25)}.sq-diagnose__form label span{color:var(--wp--preset--color--text-muted)}.sq-diagnose__form input,.sq-diagnose__form select{border-color:var(--wp--preset--color--border)!important;background:var(--wp--preset--color--surface)!important;color:var(--wp--preset--color--text)!important}.sq-diagnose__form button{background:var(--wp--preset--color--brand);color:var(--wp--preset--color--accent-contrast)}.sq-diagnose__form>p{color:var(--wp--preset--color--text-subtle)}
.sq-kicker{font-family:var(--sq-font-mono);color:var(--wp--preset--color--brand)}.sq-ecosystems h2,.sq-ways h2,.sq-diagnose h2{font-family:var(--sq-font-sans)!important;font-weight: var(--sq-w-semibold) !important;letter-spacing: var(--sq-ls-h1) !important}.sq-platform-rail{gap:12px;border:0}.sq-platform-rail a{min-height:230px;border:1px solid var(--wp--preset--color--border);border-radius:13px;background:var(--wp--preset--color--surface-raised)}.sq-platform-rail a:hover{border-color:var(--wp--preset--color--brand);background:var(--wp--preset--color--brand-soft);transform:translateY(-3px)}.sq-platform-rail b{font-family:var(--sq-font-sans);font-size: var(--sq-t-h4);font-weight: var(--sq-w-semibold)}
.sq-how{background:var(--wp--preset--color--brand);gap:110px}.sq-how .sq-kicker{color:var(--wp--preset--color--accent-contrast);opacity:.72}.sq-how h2{font-family:var(--sq-font-sans)!important;font-size: var(--sq-t-h1) !important;font-weight: var(--sq-w-semibold) !important;line-height: var(--sq-lh-h1) !important;letter-spacing: var(--sq-ls-h1) !important}.sq-how>div>p{max-width:520px;color:var(--wp--preset--color--brand-soft)}.sq-how li>span{font-family:var(--sq-font-mono);font-size: var(--sq-t-p3);color:var(--wp--preset--color--signal)}
.sq-curated .sgp-section__title{font-family:var(--sq-font-sans)!important;font-size: var(--sq-t-h1) !important;font-weight: var(--sq-w-semibold) !important;letter-spacing: var(--sq-ls-h1) !important}.sgp-badge,.sgp-chip,.sgp-card__price{font-family:var(--sq-font-mono)!important}
.sq-ways__grid{gap:12px;border:0}.sq-ways__grid a{min-height:260px;border:1px solid var(--wp--preset--color--border);border-radius:14px;background:var(--wp--preset--color--surface-raised)}.sq-ways__grid h3{font-family:var(--sq-font-sans)!important;font-size: var(--sq-t-h2) !important;font-weight: var(--sq-w-semibold) !important;letter-spacing: var(--sq-ls-h1)}.sq-ways__grid a:hover{border-color:var(--wp--preset--color--brand);box-shadow:0 18px 40px rgba(0,0,0,.08)}
.sq-trust{background:var(--wp--preset--color--text)}.sq-trust h2{font-family:var(--sq-font-sans)!important;font-weight: var(--sq-w-semibold) !important;letter-spacing: var(--sq-ls-h1) !important}.sq-trust .sq-kicker,.sq-trust a{color:var(--wp--preset--color--signal)}.sq-trust__states article>span,.sgp-compat-grid span,.sgp-panel__label{font-family:var(--sq-font-mono)!important}
.sq-footer{background:var(--wp--preset--color--text)}.sq-newsletter button{background:var(--wp--preset--color--brand)}
.woocommerce a.checkout-button,.woocommerce #payment #place_order,.woocommerce button.button.alt{background:var(--wp--preset--color--brand)!important;color:var(--wp--preset--color--accent-contrast)!important}
@media(max-width:1100px){.sq-intro{grid-template-columns:1fr}.sq-intro__stage{min-height:540px}.sq-platform-rail{grid-template-columns:repeat(3,1fr)}}
@media(max-width:800px){.sq-intro{padding-block:48px}.sq-intro h1{font-size: var(--sq-t-h1) !important}.sq-intro__stage{min-height:470px}.sq-how{gap:55px}}
@media(max-width:480px){.sq-intro h1{font-size: var(--sq-t-h1) !important}.sq-hero-search{height:auto;grid-template-columns:1fr}.sq-hero-search input{min-height:52px}.sq-hero-search button{min-height:48px}.sq-intro__stage{min-height:auto;grid-template-columns:1fr;grid-template-rows:none}.sq-visual-card,.sq-visual-card--wide{min-height:260px;grid-row:auto}.sq-platform-rail{grid-template-columns:1fr}.sq-intro__actions{align-items:flex-start;flex-direction:column}}

/* ─── Catalogue filters: intact desktop rail, mobile drawer ─────────────── */
.sq-browse .sgp-catalogue{position:relative;grid-template-columns:300px minmax(0,1fr)!important;gap:38px!important;align-items:start}.sq-browse .sgp-catalogue__filters{position:relative;top:auto;max-block-size:none;overflow:visible;padding:0;border-right:1px solid var(--wp--preset--color--border)}.sgp-filters-panel__scroll{overflow:visible}.sgp-filters__list{max-block-size:none;overflow:visible}.sgp-filters{border-bottom:1px solid var(--wp--preset--color--border)!important}.sgp-filters>summary{min-height:58px;display:flex;align-items:center;padding:17px 22px 17px 0;border:0;font-family:var(--sq-font-sans);font-size: var(--sq-t-p2);font-weight: var(--sq-w-semibold)}.sgp-filters__group{padding:0 22px 22px 0}.sgp-filters__list{gap:4px}.sgp-filters__item{min-height:42px;display:grid;grid-template-columns:26px minmax(0,1fr);align-items:center;padding:4px 0;font-size: var(--sq-t-p3)}.sgp-filters__check{inline-size:22px;block-size:22px;border:1.5px solid var(--wp--preset--color--border-strong);border-radius:5px;background:var(--wp--preset--color--surface-raised)}.sgp-filters__item.is-active .sgp-filters__check{border-color:var(--wp--preset--color--brand);background:var(--wp--preset--color--brand)}.sgp-filters__item.is-active .sgp-filters__check:after{inline-size:7px;block-size:11px;border-color:var(--wp--preset--color--accent-contrast)}.sgp-filters__clear{display:inline-flex;margin:0 0 16px;font-size: var(--sq-t-p3);color:var(--wp--preset--color--brand)}
.sgp-toolbar{min-height:58px;display:flex;align-items:center;gap:20px;padding:0 0 18px!important;border-bottom:1px solid var(--wp--preset--color--border)}.sgp-toolbar__filter-toggle{display:inline-flex;align-items:center;gap:10px;min-height:42px;padding:0 14px;border:1px solid var(--wp--preset--color--border);border-radius:8px;background:var(--wp--preset--color--surface-raised);font-size: var(--sq-t-p3);font-weight: var(--sq-w-semibold);cursor:pointer}.sgp-toolbar__filter-show{display:none}.sgp-filter-icon{width:22px;height:18px;display:flex;flex-direction:column;justify-content:space-between}.sgp-filter-icon i{position:relative;display:block;height:2px;border-radius:2px;background:currentColor}.sgp-filter-icon i:after{content:"";position:absolute;top:50%;width:5px;height:5px;border:2px solid currentColor;border-radius:50%;background:var(--wp--preset--color--surface-raised);transform:translateY(-50%)}.sgp-filter-icon i:nth-child(1):after,.sgp-filter-icon i:nth-child(3):after{left:4px}.sgp-filter-icon i:nth-child(2):after{right:4px}
@media(min-width:900px){.sgp-filters-panel__summary{display:none}.sgp-filters-panel__body{display:block}.sgp-catalogue:has(#sgp-filters-toggle:checked){grid-template-columns:minmax(0,1fr)!important}.sgp-catalogue:has(#sgp-filters-toggle:checked) .sgp-catalogue__filters{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;border:0}.sgp-catalogue:has(#sgp-filters-toggle:checked) .sgp-catalogue__results{grid-column:1}.sgp-catalogue:has(#sgp-filters-toggle:checked) .sgp-toolbar__filter-hide{display:none}.sgp-catalogue:has(#sgp-filters-toggle:checked) .sgp-toolbar__filter-show{display:inline}}
@media(max-width:899px){.sgp-toolbar__filter-toggle{display:none}.sq-browse .sgp-catalogue{grid-template-columns:1fr!important}.sq-browse .sgp-catalogue__filters{border:0}.sgp-filters-panel__summary{display:flex}.sgp-filters-panel__body{border-radius:18px 18px 0 0}.sgp-filters>summary{font-size: var(--sq-t-p1)}.sgp-filters__item{min-height:48px;font-size: var(--sq-t-p3)}.sgp-filters__check{inline-size:24px;block-size:24px}}
@media(max-width:899px){html.sgp-filter-open{overflow:hidden}}

/* ─── Product detail: preview, decision and purchase system ─────────────── */

.sgp-highlight-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.sgp-highlight-grid article{min-height:230px;padding:24px;border:1px solid var(--wp--preset--color--border);border-radius:12px;background:var(--wp--preset--color--surface-raised)}.sgp-highlight-grid span{font-family:var(--sq-font-mono);font-size: var(--sq-t-p3);color:var(--wp--preset--color--brand)}.sgp-highlight-grid h3{margin:70px 0 10px;font-family:var(--sq-font-sans);font-size: var(--sq-t-p1)}.sgp-highlight-grid p{margin:0;font-size: var(--sq-t-p3);line-height: var(--sq-lh-supporting);color:var(--wp--preset--color--text-muted)}
.sgp-support-stack details{border-top:1px solid var(--wp--preset--color--border-strong)}.sgp-support-stack details:last-of-type{border-bottom:1px solid var(--wp--preset--color--border-strong)}.sgp-support-stack summary{min-height:60px;display:flex;align-items:center;justify-content:space-between;font-weight: var(--sq-w-bold);cursor:pointer}.sgp-support-stack summary:after{content:"+";font-size: var(--sq-t-h4)}.sgp-support-stack details[open] summary:after{content:"−"}.sgp-support-stack details p{padding:0 34px 22px 0;color:var(--wp--preset--color--text-muted)}.sgp-support-stack__actions{display:flex;gap:10px;margin-top:22px}

@media(max-width:899px){.sgp-highlight-grid{grid-template-columns:1fr 1fr}.sgp-highlight-grid article:last-child{grid-column:1/-1}.sgp-support-stack__actions{flex-wrap:wrap}}
@media(max-width:520px){.sgp-highlight-grid{grid-template-columns:1fr}.sgp-highlight-grid article:last-child{grid-column:auto}.sgp-highlight-grid article{min-height:190px}.sgp-highlight-grid h3{margin-top:42px}}

/* WooCommerce block cart and checkout */
.woocommerce-cart .wp-block-woocommerce-cart,.woocommerce-checkout .wp-block-woocommerce-checkout{max-width:1240px;margin-inline:auto;box-sizing:border-box}.woocommerce-cart .wp-block-woocommerce-cart{padding:72px 0 110px}.woocommerce-checkout{background:var(--wp--preset--color--canvas)}.woocommerce-checkout header.wp-block-template-part{max-width:1240px;margin-inline:auto;padding:24px 0;border-bottom:1px solid var(--wp--preset--color--border)}.woocommerce-checkout header.wp-block-template-part a{font-family:var(--sq-font-sans);font-weight: var(--sq-w-bold);text-decoration:none}.woocommerce-checkout .wp-block-woocommerce-checkout{padding:66px 0 110px}.woocommerce-checkout .wc-block-checkout__main{padding-right:58px}.woocommerce-checkout .wc-block-components-title,.woocommerce-checkout .wc-block-checkout__contact-fields .wc-block-components-checkout-step__title{font-family:var(--sq-font-sans);font-weight: var(--sq-w-semibold);letter-spacing: var(--sq-ls-h1)}.woocommerce-checkout .wc-block-components-text-input input,.woocommerce-checkout .wc-block-components-combobox .wc-block-components-combobox-control input{border-color:var(--wp--preset--color--border-strong)!important;border-radius:10px!important;background:var(--wp--preset--color--surface-raised)!important}.woocommerce-checkout .wc-block-checkout__sidebar{position:sticky;top:30px;align-self:start;padding:26px!important;border:1px solid var(--wp--preset--color--border)!important;border-radius:14px;background:var(--wp--preset--color--surface-raised)}.woocommerce-checkout .wc-block-components-checkout-place-order-button,.woocommerce-cart .wc-block-cart__submit-button{min-height:58px;border:0!important;border-radius:10px!important;background:var(--wp--preset--color--brand)!important;color:var(--wp--preset--color--accent-contrast)!important;font-weight: var(--sq-w-bold)}.woocommerce-cart .wc-block-cart-items{border-top:1px solid var(--wp--preset--color--border-strong)!important}.woocommerce-cart .wc-block-cart__totals-title{font-family:var(--sq-font-sans);font-size: var(--sq-t-h4) !important;font-weight: var(--sq-w-bold) !important;text-transform:none!important}.woocommerce-cart .wc-block-cart__sidebar{padding-left:40px!important}.woocommerce-cart .wc-block-components-notice-banner{border-radius:10px!important}
@media(max-width:899px){.woocommerce-cart .wp-block-woocommerce-cart,.woocommerce-checkout .wp-block-woocommerce-checkout{padding:38px 18px 80px}.woocommerce-checkout header.wp-block-template-part{padding-inline:18px}.woocommerce-checkout .wc-block-checkout__main{padding-right:0}.woocommerce-checkout .wc-block-checkout__sidebar{position:static;padding:18px!important}.woocommerce-cart .wc-block-cart__sidebar{padding-left:0!important}}

/* ─── Platform content: creators, comparisons and collections ──────────── */
.sgp-entity,.sgp-library{max-width:1320px;margin-inline:auto;padding:70px 0 110px}.sgp-entity__hero,.sgp-library__head{padding:68px clamp(24px,6vw,82px);border-radius:20px;background:var(--wp--preset--color--text);color:var(--wp--preset--color--accent-contrast)}.sgp-entity__hero--collection{background:var(--wp--preset--color--brand)}.sgp-entity__hero .sgp-panel__label,.sgp-library__head .sgp-panel__label{color:var(--wp--preset--color--signal)}.sgp-entity__hero h1,.sgp-library__head h1{max-width:980px;margin:18px 0 24px;font-family:var(--sq-font-sans);font-size: var(--sq-t-h1);font-weight: var(--sq-w-semibold);line-height: var(--sq-lh-h1);letter-spacing: var(--sq-ls-h1)}.sgp-library__head p:last-child,.sgp-entity__intro{max-width:720px;font-size: var(--sq-t-p2);line-height: var(--sq-lh-body);color:var(--wp--preset--color--border)}.sgp-entity__stats{display:flex;flex-wrap:wrap;gap:35px;margin-top:48px;padding-top:25px;border-top:1px solid var(--wp--preset--color--text-subtle)}.sgp-entity__stats span{font-size: var(--sq-t-p3)}.sgp-entity__stats strong{display:block;margin-bottom:6px;font-family:var(--sq-font-sans);font-size: var(--sq-t-h4);color:var(--wp--preset--color--accent-contrast)}.sgp-library .wp-block-query{margin-top:45px}.sgp-editorial-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;list-style:none;padding:0}.sgp-editorial-card{height:100%;padding:18px 18px 24px;border:1px solid var(--wp--preset--color--border);border-radius:14px;background:var(--wp--preset--color--surface-raised)}.sgp-editorial-card .wp-block-post-featured-image{margin:0 0 22px;overflow:hidden;border-radius:9px;aspect-ratio:1.45}.sgp-editorial-card .wp-block-post-featured-image img{width:100%;height:100%;object-fit:cover}.sgp-editorial-card h2{font-family:var(--sq-font-sans);font-size: var(--sq-t-h3);letter-spacing: var(--sq-ls-h1)}.sgp-editorial-card h2 a,.sgp-editorial-card .wp-block-read-more{color:var(--wp--preset--color--text);text-decoration:none}.sgp-editorial-card p{font-size: var(--sq-t-p3);line-height: var(--sq-lh-supporting);color:var(--wp--preset--color--text-muted)}.sgp-editorial-card .wp-block-read-more{font-size: var(--sq-t-p3);font-weight: var(--sq-w-bold);color:var(--wp--preset--color--brand)}.sgp-verdict{margin:18px 0 0;padding:42px;border-radius:15px;background:var(--wp--preset--color--brand-soft)}.sgp-verdict h2{max-width:980px;margin:12px 0 0;font-family:var(--sq-font-sans);font-size: var(--sq-t-h1);line-height: var(--sq-lh-h1);letter-spacing: var(--sq-ls-h1)}.sgp-criteria{display:grid;grid-template-columns:.7fr 1.3fr;gap:70px}.sgp-criteria ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--wp--preset--color--border-strong)}.sgp-criteria li{display:grid;grid-template-columns:52px 1fr;gap:12px;padding:20px 0;border-bottom:1px solid var(--wp--preset--color--border-strong);font-size: var(--sq-t-p3)}.sgp-criteria li span{font-family:var(--sq-font-mono);font-size: var(--sq-t-p3);color:var(--wp--preset--color--brand)}.sgp-entity__content{max-width:820px!important;margin-inline:auto}.sgp-platform-hub{padding:60px 0 110px}.sgp-platform-hub__head{padding:70px;border-radius:20px;background:var(--wp--preset--color--brand);color:var(--wp--preset--color--accent-contrast)}.sgp-platform-hub__head h1{margin:0;font-family:var(--sq-font-sans);font-size: var(--sq-t-h1);letter-spacing: var(--sq-ls-h1)}.sgp-platform-hub__head .sgp-section__sub{max-width:700px;color:var(--wp--preset--color--brand-soft)}

/* Creator directory cards, restyled 2026-09-03 to match the product card rhythm (.sq-tc) instead
   of the plain editorial-card style still used by collections/comparisons. Reuses .sq-tc's own
   title/body tokens for free; only the parts a product card doesn't have (a square logo tile
   with breathing room instead of an edge-to-edge screenshot, a clamped description instead of a
   price row) get their own rules, scoped to .sgp-vendor-card so nothing else sharing .sq-tc or
   .wp-block-post-featured-image sitewide is affected. */
.sgp-vendor-card{background:transparent;border:0;overflow:visible}
.sgp-vendor-card .wp-block-post-featured-image{position:relative;margin:0;aspect-ratio:1;overflow:hidden;border-radius:14px;background:var(--sq-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sq-ink) 5%,transparent)}
.sgp-vendor-card .wp-block-post-featured-image img{position:absolute;inset:0;width:100%;height:100%;padding:14%;box-sizing:border-box;object-fit:contain!important}
/* min-block-size:2lh reserves the same two-line height whether a creator's excerpt runs to
   two lines, wraps to one, or (rarely) is missing — otherwise cards in the same row end at
   different heights depending on how long each creator's description happens to be. */
.sgp-vendor-card .sq-tc__desc{margin:0 0 10px;min-block-size:2lh;font-size:var(--sq-t-p3);line-height:var(--sq-lh-supporting);color:var(--wp--preset--color--text-muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* .sq-tc__creator is a <div> everywhere else on the site; here it doubles as the card's
   heading (there is no separate product title to hold that role), so browser default h2
   margin/size/weight need resetting back to the plain flex row it is everywhere else. */
.sgp-vendor-card h2.sq-tc__creator{margin:0;font-size:inherit;font-weight:inherit}

/* Creator directory only: .sgp-editorial-card is shared with collections/comparisons, where the
   featured image is a genuine cover photo and cover-fit is correct. Creator logos are mostly
   wordmarks (some over 4:1 wide) and cover-cropping them into a 1.45:1 box shows an unreadable
   fragment of the name. object-fit is set inline by the block itself, so it takes !important to
   override here. */
.post-type-archive-sgp_vendor .sgp-editorial-card .wp-block-post-featured-image img{object-fit:contain!important}
@media(max-width:900px){.sgp-entity,.sgp-library{padding:35px 18px 80px}.sgp-entity__hero,.sgp-library__head,.sgp-platform-hub__head{padding:45px 24px}.sgp-editorial-grid{grid-template-columns:1fr 1fr}.sgp-criteria{grid-template-columns:1fr;gap:25px}}
@media(max-width:560px){.sgp-editorial-grid{grid-template-columns:1fr}.sgp-entity__hero h1,.sgp-library__head h1{font-size: var(--sq-t-h1)}.sgp-verdict{padding:28px 22px}}

/* Customer library and account */


/* Approved Squarespell discovery system — marketplace capability without open-marketplace noise. */
:root{--sq-paper:var(--wp--preset--color--canvas);--sq-ink:var(--wp--preset--color--text);--sq-sheet:var(--wp--preset--color--surface-raised);--sq-soft:var(--wp--preset--color--surface);--sq-line:var(--wp--preset--color--border);--sq-muted:var(--wp--preset--color--text-muted);--sq-signal:var(--wp--preset--color--signal);--sq-signal-ink:var(--wp--preset--color--signal-ink);--sq-good:var(--wp--preset--color--verified);--sq-badge:var(--wp--preset--color--neutral-badge);--sq-caution:var(--wp--preset--color--caution);--sq-critical:var(--wp--preset--color--critical);--sq-stale:var(--wp--preset--color--stale)}
html[data-sq-theme="dark"]{--sq-paper:var(--wp--preset--color--dark-canvas);--sq-ink:var(--wp--preset--color--canvas);--sq-sheet:var(--wp--preset--color--dark-surface);--sq-soft:var(--wp--preset--color--dark-soft);--sq-line:var(--wp--preset--color--dark-border);--sq-muted:var(--wp--preset--color--dark-muted);--sq-signal:var(--wp--preset--color--dark-signal);--sq-signal-ink:var(--wp--preset--color--dark-signal);--sq-good:var(--wp--preset--color--dark-verified);--sq-badge:var(--wp--preset--color--dark-neutral-badge);--sq-caution:var(--wp--preset--color--dark-caution);--sq-critical:var(--wp--preset--color--dark-critical);--sq-stale:var(--wp--preset--color--dark-stale);color-scheme:dark}
body{background:var(--sq-paper)!important;color:var(--sq-ink)!important;font-family:var(--sq-font-sans)!important;transition:background .2s,color .2s}.wp-site-blocks{background:var(--sq-paper);color:var(--sq-ink)}h1,h2,h3,h4,.sq-logo{font-family:var(--sq-font-sans)!important;font-weight: var(--sq-w-semibold) !important}.sq-home--intelligence{display:none!important}.sq-logo{display:flex!important;align-items:center;gap:9px!important;color:var(--sq-ink)!important;font-size: var(--sq-t-h3) !important;letter-spacing: var(--sq-ls-h1) !important}.sq-logo svg{width:25px;height:25px}.sq-logo__signal{fill:var(--sq-signal)}
.sq-market-home{max-width:none!important;margin:0!important}.sq-market-shell{display:grid;grid-template-columns:205px minmax(0,1fr);min-height:720px}.sq-market-sidebar{padding:22px 16px;border-right:1px solid var(--sq-line)}.sq-market-sidebar__title{margin:0;padding:0 8px 11px;color:var(--sq-muted);font-size: var(--sq-t-p3);letter-spacing: var(--sq-ls-eyebrow);text-transform:uppercase}.sq-market-sidebar a{min-height:37px;display:flex;align-items:center;gap:9px;padding:8px;color:var(--sq-ink);font-size: var(--sq-t-p3);text-decoration:none}.sq-market-sidebar a.is-active,.sq-market-sidebar a:hover{background:var(--sq-soft)}.sq-market-sidebar a small{margin-left:auto}.sq-market-sidebar hr{border:0;border-top:1px solid var(--sq-line);margin:15px 8px}.sq-market-sidebar img{width:17px;height:17px}html[data-sq-theme="dark"] .sq-market-sidebar img,html[data-sq-theme="dark"] .sq-platform-market img{filter:invert(1)}.sq-market-feed{min-width:0;padding:28px 26px 65px}.sq-guide{padding:29px;background:var(--sq-ink);color:var(--sq-paper)}.sq-guide .sq-kicker{font:400 10px 'DM Sans',sans-serif!important;letter-spacing: var(--sq-ls-eyebrow);text-transform:uppercase;color:var(--sq-signal)!important}.sq-guide h1{margin:13px 0 11px!important;font-size: var(--sq-t-h1) !important;line-height: var(--sq-lh-h1) !important;letter-spacing: var(--sq-ls-h1) !important}.sq-guide>p{margin:0;color:color-mix(in srgb,var(--sq-paper) 68%,transparent);font-size: var(--sq-t-p3)}.sq-guide form{height:58px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;margin-top:24px;padding:0 8px 0 15px;background:var(--sq-paper);color:var(--sq-ink)}.sq-guide input{min-width:0;border:0;outline:0;background:transparent;color:var(--sq-ink)}.sq-guide button{height:42px;border:0;background:var(--sq-signal);color:var(--wp--preset--color--on-signal);padding:0 17px;font-weight: var(--sq-w-medium)}.sq-market-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:31px 0 15px}.sq-market-heading h2{margin:0!important;font-size: var(--sq-t-h3) !important;letter-spacing: var(--sq-ls-h1) !important}.sq-market-heading a{color:var(--sq-ink);font-size: var(--sq-t-p3);text-underline-offset:4px}.sq-platform-market__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}.sq-platform-market__grid a{min-height:78px;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;padding:12px;border:1px solid var(--sq-line);background:var(--sq-sheet);color:var(--sq-ink);font-size: var(--sq-t-p3);text-decoration:none}.sq-platform-market__grid a:hover{background:var(--sq-soft)}.sq-platform-market img{width:23px;height:23px}.sq-home-products .sgp-section{padding:0!important}.sq-home-products .sgp-section__header{display:none!important}
.sgp-grid{gap:18px 13px!important}.sgp-badge{padding:6px 8px!important;border:0!important;border-radius:0!important;background:var(--sq-sheet)!important;font:500 10px 'DM Sans',sans-serif!important}.sgp-card__price,.sgp-chip{font:500 11px 'DM Sans',sans-serif!important}.sgp-chip{border:0!important;padding:0!important;background:transparent!important}.sq-problem-rails>div:last-child{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--sq-line);border-left:1px solid var(--sq-line)}.sq-problem-rails>div:last-child a{min-height:125px;display:grid;grid-template-columns:35px 1fr;align-content:center;padding:18px;border-right:1px solid var(--sq-line);border-bottom:1px solid var(--sq-line);color:var(--sq-ink);text-decoration:none}.sq-problem-rails b{font-size: var(--sq-t-p1)}.sq-problem-rails small{grid-column:2;color:var(--sq-muted);margin-top:5px}
.sgp-catalogue,.woocommerce-cart .wp-block-woocommerce-cart,.woocommerce-checkout .wp-block-woocommerce-checkout{color:var(--sq-ink)}.sgp-catalogue__filters,.sgp-toolbar,.sgp-filters{border-color:var(--sq-line)!important}.woocommerce-checkout .wc-block-checkout__sidebar,.woocommerce #payment #place_order{border-radius:0!important;background:var(--sq-ink)!important;color:var(--sq-paper)!important}
@media(max-width:900px){.sq-menu{display:block!important}.sq-market-shell{grid-template-columns:1fr}.sq-market-sidebar{display:none}.sq-market-feed{padding:20px 15px 50px}.sq-platform-market__grid{grid-template-columns:repeat(3,1fr)}.sgp-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:480px){.sq-guide{padding:22px 17px}.sq-guide h1{font-size: var(--sq-t-h1) !important}.sq-guide form{height:auto;grid-template-columns:auto 1fr;padding:10px}.sq-guide button{grid-column:1/-1;width:100%}.sq-platform-market__grid{grid-template-columns:repeat(2,1fr)}.sgp-grid{grid-template-columns:1fr!important}.sq-problem-rails>div:last-child{grid-template-columns:1fr}.sq-market-heading h2{font-size: var(--sq-t-h3) !important}}

/* Consistent Lucide-derived navigation icons (ISC licence), rendered through masks. */
.sq-side-link::before,.sq-problem-rails i{content:"";width:18px;height:18px;flex:0 0 18px;background:currentColor;mask-repeat:no-repeat;mask-position:center;mask-size:18px;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-size:18px}
.sq-side-link--for-you::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 3-1.7 4.3L6 9l4.3 1.7L12 15l1.7-4.3L18 9l-4.3-1.7L12 3Z' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='m5 16-.8 2.2L2 19l2.2.8L5 22l.8-2.2L8 19l-2.2-.8L5 16Zm14-2-1.1 2.9L15 18l2.9 1.1L19 22l1.1-2.9L23 18l-2.9-1.1L19 14Z' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 3-1.7 4.3L6 9l4.3 1.7L12 15l1.7-4.3L18 9l-4.3-1.7L12 3Z' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='m5 16-.8 2.2L2 19l2.2.8L5 22l.8-2.2L8 19l-2.2-.8L5 16Zm14-2-1.1 2.9L15 18l2.9 1.1L19 22l1.1-2.9L23 18l-2.9-1.1L19 14Z' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E")}
.sq-side-link--verified::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9 12 2 2 4-4M12 3l2.2 1.4 2.6-.1 1.1 2.4 2.2 1.5-.6 2.6.6 2.6-2.2 1.5-1.1 2.4-2.6-.1L12 21l-2.2-1.4-2.6.1-1.1-2.4-2.2-1.5.6-2.6-.6-2.6 2.2-1.5 1.1-2.4 2.6.1L12 3Z' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9 12 2 2 4-4M12 3l2.2 1.4 2.6-.1 1.1 2.4 2.2 1.5-.6 2.6.6 2.6-2.2 1.5-1.1 2.4-2.6-.1L12 21l-2.2-1.4-2.6.1-1.1-2.4-2.2-1.5.6-2.6-.6-2.6 2.2-1.5 1.1-2.4 2.6.1L12 3Z' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E")}
.sq-side-link--popular::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 16l6-6 4 4 6-8M15 6h5v5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 16l6-6 4 4 6-8M15 6h5v5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.sq-side-link--free::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 12v7a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-7m16-4H4a2 2 0 0 0-2 2v2h20v-2a2 2 0 0 0-2-2ZM12 21V8m0 0H7.5A2.5 2.5 0 1 1 10 5.5L12 8Zm0 0h4.5A2.5 2.5 0 1 0 14 5.5L12 8Z' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 12v7a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-7m16-4H4a2 2 0 0 0-2 2v2h20v-2a2 2 0 0 0-2-2ZM12 21V8m0 0H7.5A2.5 2.5 0 1 1 10 5.5L12 8Zm0 0h4.5A2.5 2.5 0 1 0 14 5.5L12 8Z' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E")}
.sq-side-link--plugin::before,.sq-side-link--extension::before,.sq-side-link--app::before,.sq-side-link--integration::before,.sq-side-link--template::before,.sq-side-link--theme::before,.sq-side-link--component::before,.sq-side-link--course::before,.sq-side-link--expert::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='4' width='7' height='7' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='13' y='4' width='7' height='7' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='4' y='13' width='7' height='7' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='13' y='13' width='7' height='7' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='4' width='7' height='7' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='13' y='4' width='7' height='7' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='4' y='13' width='7' height='7' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='13' y='13' width='7' height='7' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E")}

/* Product cards: a single premium commerce surface with clearer hierarchy. */
.sq-home-products .sgp-badge{box-shadow:var(--wp--custom--shadow--sm)}.sq-home-products .sgp-card__price{font-size: var(--sq-t-p3) !important}.sq-home-products .sgp-chip{display:inline-flex!important;align-items:center;gap:5px!important;color:var(--sq-muted)!important}.sq-home-products .sgp-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--sq-signal)}

/* Full-width outcome section, visually independent from the catalogue shell. */
.sq-problem-rails{padding:64px clamp(24px,5vw,80px) 78px;border-top:1px solid var(--sq-line);background:var(--sq-soft)}.sq-problem-rails .sq-market-heading{margin:0 0 25px}.sq-problem-rails .sq-market-heading h2{font-size: var(--sq-t-h1) !important;line-height: var(--sq-lh-h1) !important;letter-spacing: var(--sq-ls-h1) !important}.sq-problem-rails>div:last-child{grid-template-columns:repeat(4,1fr)!important;border:0!important;gap:1px;background:var(--sq-line)}.sq-problem-rails>div:last-child a{min-height:235px!important;display:grid!important;grid-template-columns:1fr auto!important;grid-template-rows:auto 1fr auto!important;align-content:stretch!important;padding:22px!important;border:0!important;background:var(--sq-sheet);transition:background .2s,color .2s}.sq-problem-rails>div:last-child a:hover{background:var(--sq-ink);color:var(--sq-paper)}.sq-problem-rails i{grid-column:1;grid-row:1;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14m-6-6 6 6-6 6' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14m-6-6 6 6-6 6' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}.sq-problem-rails>div:last-child span{grid-column:2;grid-row:1;color:var(--sq-muted);font-size: var(--sq-t-p3)}.sq-problem-rails b{grid-column:1/-1;grid-row:2;align-self:end;font:500 23px var(--sq-font-sans)!important;letter-spacing: var(--sq-ls-h1)}.sq-problem-rails small{grid-column:1/-1!important;grid-row:3;color:var(--sq-muted);font-size: var(--sq-t-p3);margin-top:7px!important}.sq-problem-rails a:hover span,.sq-problem-rails a:hover small{color:inherit}
@media(max-width:900px){.sq-problem-rails{padding:45px 16px 55px}.sq-problem-rails>div:last-child{grid-template-columns:1fr 1fr!important}.sq-problem-rails>div:last-child a{min-height:190px!important}}
@media(max-width:480px){.sq-problem-rails>div:last-child{grid-template-columns:1fr!important}.sq-problem-rails>div:last-child a{min-height:155px!important}}

.sq-side-link--for-you::before{mask-image:url('../icons/sparkles.svg');-webkit-mask-image:url('../icons/sparkles.svg')}.sq-side-link--verified::before{mask-image:url('../icons/badge-check.svg');-webkit-mask-image:url('../icons/badge-check.svg')}.sq-side-link--popular::before{mask-image:url('../icons/chart-no-axes-column-increasing.svg');-webkit-mask-image:url('../icons/chart-no-axes-column-increasing.svg')}.sq-side-link--free::before{mask-image:url('../icons/gift.svg');-webkit-mask-image:url('../icons/gift.svg')}.sq-side-link--plugin::before{mask-image:url('../icons/plug.svg');-webkit-mask-image:url('../icons/plug.svg')}.sq-side-link--extension::before{mask-image:url('../icons/puzzle.svg');-webkit-mask-image:url('../icons/puzzle.svg')}.sq-side-link--app::before{mask-image:url('../icons/app-window.svg');-webkit-mask-image:url('../icons/app-window.svg')}.sq-side-link--integration::before{mask-image:url('../icons/workflow.svg');-webkit-mask-image:url('../icons/workflow.svg')}.sq-side-link--template::before{mask-image:url('../icons/layout-template.svg');-webkit-mask-image:url('../icons/layout-template.svg')}.sq-side-link--theme::before{mask-image:url('../icons/panels-top-left.svg');-webkit-mask-image:url('../icons/panels-top-left.svg')}.sq-side-link--component::before{mask-image:url('../icons/blocks.svg');-webkit-mask-image:url('../icons/blocks.svg')}.sq-side-link--course::before{mask-image:url('../icons/graduation-cap.svg');-webkit-mask-image:url('../icons/graduation-cap.svg')}.sq-side-link--expert::before{mask-image:url('../icons/user-round-check.svg');-webkit-mask-image:url('../icons/user-round-check.svg')}.sq-problem-rails i{mask-image:url('../icons/arrow-right.svg');-webkit-mask-image:url('../icons/arrow-right.svg')}.home .sq-logo{font-size: var(--sq-t-h3) !important}.home .sq-logo svg{width:26px;height:26px}
.sq-ref-home{background:var(--sq-paper);color:var(--sq-ink);padding-bottom:18px}.sq-ref-home *{box-sizing:border-box}.sq-ref-wrap{width:min(1434px,calc(100% - 84px));margin-inline:auto}.sq-ref-platforms{padding:35px 0 27px}.sq-ref-heading,.sq-ref-title{display:flex;align-items:flex-end;gap:14px}.sq-ref-heading>div{flex:1}.sq-ref-heading span,.sq-ref-kicker{display:block;margin-bottom:7px;color:var(--sq-signal);font-size: var(--sq-t-eyebrow);font-weight: var(--sq-w-bold);letter-spacing: var(--sq-ls-eyebrow);text-transform:uppercase}.sq-ref-heading h1,.sq-ref-heading h2,.sq-ref-title h2{margin:0!important;color:var(--sq-ink);font-family:var(--sq-font-sans)!important;font-size: var(--sq-t-h3) !important;line-height: var(--sq-lh-h1) !important;font-weight: var(--sq-w-semibold) !important;letter-spacing: var(--sq-ls-h1) !important}.sq-ref-heading>a,.sq-ref-title>a{margin-left:auto;color:var(--sq-ink);font-size: var(--sq-t-p3);text-decoration:none}.sq-ref-heading>a b{margin-left:4px}.sq-ref-platform-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:18px;margin-top:20px}.sq-ref-platform-grid a{height:157px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;border:1px solid var(--sq-line);border-radius:12px;background:var(--sq-sheet);color:var(--sq-ink);text-decoration:none;box-shadow:0 9px 28px rgba(0,0,0,.07)}.sq-ref-platform-grid img{width:52px;height:52px;object-fit:contain}.sq-ref-platform-grid b{font-size: var(--sq-t-p3);font-weight: var(--sq-w-semibold)}.sq-ref-wordmark{font-size: var(--sq-t-h1);font-weight: var(--sq-w-bold);line-height: var(--sq-lh-h1);color:var(--wp--preset--color--platform-weebly)}.sq-ref-appgrid{font-size: var(--sq-t-h1);line-height: var(--sq-lh-h1);color:var(--sq-muted);transform:rotate(90deg)}
.sq-ref-guide{position:relative;overflow:hidden;min-height:443px;padding:39px 76px;border-radius:13px;background:radial-gradient(circle at 70% 30%,var(--sq-ink) 0,var(--sq-ink) 45%,var(--sq-ink) 100%);color:var(--sq-sheet)}.sq-ref-guide:after{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(var(--sq-sheet) 1px,transparent 1px);background-size:85px 67px;opacity:.13}.sq-ref-guide>*{position:relative;z-index:1}.sq-ref-guide .sq-ref-kicker{color:var(--sq-signal)}.sq-ref-guide h1{margin:23px 0 15px!important;color:var(--sq-sheet)!important;font-family:var(--sq-font-sans)!important;font-size: var(--sq-t-h1) !important;line-height: var(--sq-lh-h1) !important;font-weight: var(--sq-w-semibold) !important;letter-spacing: var(--sq-ls-h2) !important}.sq-ref-guide h1 em{color:var(--sq-signal);font-style:normal}.sq-ref-guide>p{margin:0;color:var(--sq-muted);font-size: var(--sq-t-p3)}.sq-ref-guide form{height:66px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:15px;margin-top:28px;padding:7px 8px 7px 22px;border-radius:4px;background:var(--sq-sheet);color:var(--sq-ink)}.sq-ref-guide input{height:100%;border:0!important;outline:0;background:transparent!important;font-size: var(--sq-t-p3)}.sq-ref-guide button{height:52px;padding:0 29px;border:0;border-radius:4px;background:var(--sq-signal);color:var(--sq-sheet);font-weight: var(--sq-w-semibold)}.sq-ref-guide-proof{display:grid;grid-template-columns:repeat(4,1fr);margin-top:24px}.sq-ref-guide-proof span{padding:0 28px;border-right:1px solid var(--sq-muted);color:var(--sq-line);font-size: var(--sq-t-p3)}.sq-ref-guide-proof span:first-child{padding-left:0}.sq-ref-guide-proof span:last-child{border:0}.sq-ref-guide-proof b{margin-left:8px;font-weight: var(--sq-w-medium)}
.sq-ref-section{padding-top:32px}.sq-ref-products{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:14px}.sq-ref-product{position:relative;overflow:hidden;display:block;border:1px solid var(--sq-line);border-radius:8px;background:var(--sq-sheet);color:var(--sq-ink);text-decoration:none}.sq-ref-product>i{height:29px;display:flex;align-items:center;padding:0 12px;border-bottom:1px solid var(--sq-line);background:var(--sq-sheet);color:var(--sq-muted);font-size: var(--sq-t-p3);font-style:normal}.sq-ref-product>i.is-verified{color:var(--sq-good)}.sq-ref-product>i.is-tested{color:var(--sq-caution)}.sq-ref-product>i.is-partial{color:var(--sq-caution)}.sq-ref-product>i.is-expired{color:var(--sq-critical)}.sq-ref-product>img{width:100%;height:139px;display:block;object-fit:cover}.sq-ref-product>div{padding:15px 13px 16px}.sq-ref-product h3,.sq-ref-template-grid h3,.sq-ref-mini-grid h3{margin:0 0 5px!important;font-family:var(--sq-font-sans)!important;font-size: var(--sq-t-p3) !important;font-weight: var(--sq-w-semibold) !important;letter-spacing: var(--sq-ls-h3) !important}.sq-ref-product p,.sq-ref-template-grid p,.sq-ref-mini-grid p{margin:0 0 13px;color:var(--sq-muted);font-size: var(--sq-t-p3)}.sq-ref-product div>b,.sq-ref-template-grid a>b{display:block;font-size: var(--sq-t-p3);font-weight: var(--sq-w-semibold)}.sq-ref-product small{display:block;margin-top:11px;color:var(--sq-muted);font-size: var(--sq-t-p3)}.sq-ref-product small:first-letter{color:var(--sq-signal)}.sq-ref-outline{width:max-content;display:block;margin:14px auto 0;padding:11px 24px;border:1px solid var(--sq-muted);border-radius:4px;color:var(--sq-ink);font-size: var(--sq-t-p3);text-decoration:none}
.sq-ref-title{margin-bottom:15px}.sq-ref-title p{margin:0 0 1px;color:var(--sq-muted);font-size: var(--sq-t-p3)}.sq-ref-mini-grid,.sq-ref-template-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}.sq-ref-mini-grid>a{min-height:115px;display:flex;gap:12px;padding:20px 16px;border:1px solid var(--sq-line);border-radius:7px;color:var(--sq-ink);text-decoration:none}.sq-ref-mini-grid p{margin-bottom:3px}.sq-ref-mini-grid b{display:block;color:var(--sq-stale);font-size: var(--sq-t-p3);font-weight: var(--sq-w-medium)}.sq-ref-mini-grid small{display:block;margin-top:9px;color:var(--sq-muted);font-size: var(--sq-t-p3)}.sq-ref-mini-icon,.sq-ref-round{width:40px;height:40px;flex:0 0 40px;display:grid;place-items:center;border-radius:7px;background:var(--sq-ink);color:var(--sq-sheet);font-size: var(--sq-t-h4);font-weight: var(--sq-w-bold)}.sq-ref-round{border-radius:50%}.is-coral{background:var(--sq-signal)}.is-blue{background:var(--wp--preset--color--icon-blue)}.is-purple{background:var(--wp--preset--color--icon-purple)}.is-green{background:var(--sq-good)}.is-cyan{background:var(--wp--preset--color--icon-cyan)}.is-violet{background:var(--wp--preset--color--icon-violet)}.is-dark{background:var(--sq-ink)}.is-cream{background:var(--sq-soft);color:var(--sq-ink)}.is-soft{background:var(--sq-soft);color:var(--sq-muted)}.is-rainbow{background:conic-gradient(var(--sq-signal),var(--wp--preset--color--stale),var(--sq-good),var(--wp--preset--color--brand),var(--wp--preset--color--brand),var(--sq-signal))}.sq-ref-template-grid>a{overflow:hidden;padding-bottom:16px;border:1px solid var(--sq-line);border-radius:7px;color:var(--sq-ink);text-decoration:none}.sq-ref-template-grid img{width:100%;height:95px;display:block;object-fit:cover;margin-bottom:13px}.sq-ref-template-grid h3,.sq-ref-template-grid p,.sq-ref-template-grid a>b{margin-left:13px!important;margin-right:13px!important}
.sq-ref-trust{margin-top:36px;padding:27px 0 32px;background:var(--sq-soft);border-block:1px solid var(--sq-line)}.sq-ref-trust-grid{display:grid;grid-template-columns:repeat(4,1fr);margin-top:15px}.sq-ref-trust-grid article{display:grid;grid-template-columns:38px 1fr;gap:8px;padding:0 33px;border-right:1px solid var(--sq-line)}.sq-ref-trust-grid article:first-child{padding-left:0}.sq-ref-trust-grid article:last-child{border:0}.sq-ref-trust-grid article>b{font-size: var(--sq-t-h3);font-weight: var(--sq-w-regular)}.sq-ref-trust-grid h3{margin:0 0 6px!important;font-family:var(--sq-font-sans)!important;font-size: var(--sq-t-p3) !important;font-weight: var(--sq-w-semibold) !important}.sq-ref-trust-grid p{max-width:240px;margin:0;color:var(--sq-muted);font-size: var(--sq-t-p3);line-height: var(--sq-lh-supporting)}.sq-ref-collections{padding-top:27px}.sq-ref-collection-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:15px}.sq-ref-collection-grid a{position:relative;min-height:79px;display:grid;grid-template-columns:35px 1fr;align-items:center;padding:13px;border:1px solid var(--sq-line);border-radius:7px;color:var(--sq-ink);text-decoration:none}.sq-ref-collection-grid span{grid-row:1/3;width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--sq-line);border-radius:6px}.sq-ref-collection-grid b{font-size: var(--sq-t-p3)}.sq-ref-collection-grid small{color:var(--sq-muted);font-size: var(--sq-t-p3)}.sq-ref-collection-grid i{position:absolute;right:12px;font-style:normal}.sq-ref-rating{min-height:92px;display:grid;grid-template-columns:55px 1.3fr .7fr 1.5fr;align-items:center;margin-top:23px;padding:15px 40px;border-radius:8px;background:linear-gradient(100deg,var(--sq-ink),var(--sq-ink));color:var(--sq-sheet)}.sq-ref-rating blockquote{margin:0;font-size: var(--sq-t-h1);line-height: var(--sq-lh-h1)}.sq-ref-rating p{margin:0;font-size: var(--sq-t-p3);line-height: var(--sq-lh-supporting)}.sq-ref-rating strong{display:flex;align-items:center;gap:8px;font-size: var(--sq-t-h3)}.sq-ref-rating strong small{font-size: var(--sq-t-p3);font-weight: var(--sq-w-regular)}.sq-ref-rating>div{display:flex;justify-content:space-around;gap:25px;color:var(--sq-line);font-size: var(--sq-t-p3)}
.home .sq-footer{max-width:none!important;padding-inline:max(42px,calc((100vw - 1434px)/2))!important}.home .sq-newsletter{min-height:82px!important;grid-template-columns:1fr!important;padding:20px 0!important}.home .sq-newsletter h2{margin:0 0 4px!important;font-family:var(--sq-font-sans)!important;font-size: var(--sq-t-h4) !important}.home .sq-newsletter p{margin:0}.home .sq-newsletter form{display:none}.home .sq-footer__links{grid-template-columns:1.6fr repeat(4,1fr)!important;padding:35px 0!important}.home .sq-footer__brand p{font-size: var(--sq-t-p3)}.home .sq-footer__links h3{font-size: var(--sq-t-p3) !important}.home .sq-footer__links a{font-size: var(--sq-t-p3)}.home .sq-footer__bottom{font-size: var(--sq-t-p3)}
@media(max-width:1100px){.sq-ref-wrap{width:calc(100% - 40px)}.sq-ref-platform-grid{grid-template-columns:repeat(4,1fr)}.sq-ref-products,.sq-ref-mini-grid,.sq-ref-template-grid,.sq-ref-collection-grid{grid-template-columns:repeat(3,1fr)}.sq-ref-guide-proof{grid-template-columns:1fr 1fr;gap:18px}.sq-ref-guide-proof span:nth-child(2){border:0}.sq-ref-trust-grid{grid-template-columns:1fr 1fr;gap:25px}.sq-ref-trust-grid article:nth-child(2){border:0}}
@media(max-width:700px){.sq-ref-wrap{width:calc(100% - 28px)}.sq-ref-platforms{padding-top:24px}.sq-ref-platform-grid{grid-template-columns:repeat(2,1fr);gap:10px}.sq-ref-platform-grid a{height:118px}.sq-ref-guide{padding:30px 20px;min-height:auto}.sq-ref-guide h1{font-size: var(--sq-t-h2) !important}.sq-ref-guide form{height:auto;grid-template-columns:auto 1fr;padding:9px}.sq-ref-guide button{grid-column:1/-1;width:100%}.sq-ref-guide-proof{grid-template-columns:1fr}.sq-ref-guide-proof span{padding:0 0 12px;border:0;border-bottom:1px solid var(--sq-muted)}.sq-ref-products,.sq-ref-mini-grid,.sq-ref-template-grid,.sq-ref-collection-grid{grid-template-columns:1fr 1fr}.sq-ref-trust-grid{grid-template-columns:1fr}.sq-ref-trust-grid article{padding:0 0 20px;border:0;border-bottom:1px solid var(--sq-line)}.sq-ref-rating{grid-template-columns:40px 1fr}.sq-ref-rating strong,.sq-ref-rating>div{grid-column:2;margin-top:12px}.home .sq-footer{padding-inline:16px!important}}
@media(max-width:430px){.sq-ref-products,.sq-ref-mini-grid,.sq-ref-template-grid,.sq-ref-collection-grid{grid-template-columns:1fr}.sq-ref-heading,.sq-ref-title{align-items:flex-start;flex-wrap:wrap}.sq-ref-heading>a,.sq-ref-title>a{margin-left:0}.sq-ref-rating{padding:18px}.home .sq-footer__links{grid-template-columns:1fr 1fr!important}.home .sq-footer__brand{grid-column:1/-1}}
.sq-ref-product small,.sq-ref-mini-grid small,.sq-ref-mini-grid b,.sq-ref-collection-grid small{font-size: var(--sq-t-p3)}

@media(max-width:700px){.sq-ref-rating>*{min-width:0}.sq-ref-rating>div{flex-wrap:wrap;justify-content:flex-start;gap:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}

/* Browse: editorial marketplace shell, aligned with the approved homepage. */
.sq-browse{max-width:none!important;padding:0 0 96px!important}
.sq-browse>.sgp-catalogue{width:min(1440px,calc(100% - 56px));margin:0 auto;padding-top:42px!important}.sq-browse .sgp-catalogue__filters{padding-top:4px}.sq-browse .sgp-toolbar{min-height:54px;margin-bottom:22px;padding:0 0 18px!important}.sq-browse .sgp-toolbar__count{font-family:var(--sq-font-sans);font-size: var(--sq-t-p3)}.sq-browse .sgp-toolbar__count strong{font-size: var(--sq-t-h4)}.sq-browse .sgp-toolbar__sort{display:flex;align-items:center;gap:10px}.sq-browse .sgp-toolbar__sort label{font-family:var(--sq-font-mono);font-size: var(--sq-t-p3);letter-spacing: var(--sq-ls-eyebrow);text-transform:uppercase}.sq-browse .sgp-toolbar__sort select{min-height:40px;padding:0 38px 0 13px;border:1px solid var(--wp--preset--color--border-strong);border-radius:8px;background-color:var(--wp--preset--color--surface-raised);font-size: var(--sq-t-p3)}.sq-browse .sgp-pagination{display:flex;justify-content:center;gap:6px;margin-top:48px;padding-top:28px;border-top:1px solid var(--wp--preset--color--border)}.sq-browse .sgp-pagination .page-numbers{display:inline-flex;min-width:40px;height:40px;align-items:center;justify-content:center;border:1px solid var(--wp--preset--color--border);border-radius:8px;text-decoration:none;font-size: var(--sq-t-p3)}.sq-browse .sgp-pagination .current{border-color:var(--wp--preset--color--text);background:var(--wp--preset--color--text);color:var(--wp--preset--color--surface)}
@media(max-width:900px){.sq-browse>.sgp-catalogue{width:calc(100% - 48px)}}
@media(max-width:560px){.sq-browse>.sgp-catalogue{width:calc(100% - 36px);padding-top:28px!important}.sq-browse .sgp-toolbar{align-items:center}.sq-browse .sgp-toolbar__sort label{display:none}}

/* Browse correction: compact, non-italic, image-led, and free of filter dead space. */.sq-browse>.sgp-catalogue{grid-template-columns:248px minmax(0,1fr)!important;gap:30px!important;padding-top:30px!important}.sq-browse .sgp-catalogue__filters{border-right:0;padding-right:18px}.sq-browse .sgp-filters{border-bottom:1px solid var(--wp--preset--color--border)!important}.sq-browse .sgp-filters>summary{min-height:48px;padding:13px 2px;font-size: var(--sq-t-p3)}.sq-browse .sgp-filters__group{padding:2px 0 13px}.sq-browse .sgp-filters__list{gap:1px}.sq-browse .sgp-filters__item{min-height:34px;grid-template-columns:21px minmax(0,1fr);gap:8px;padding:2px 0;font-size: var(--sq-t-p3)}.sq-browse .sgp-filters__check{width:18px;height:18px;border-radius:4px}.sq-browse .sgp-filters__item--child{padding-left:28px}.sq-browse .sgp-toolbar{margin-bottom:15px}.sq-browse .sgp-card__price,.sq-browse .sgp-chip{font-size: var(--sq-t-eyebrow) !important}.sq-browse .sgp-chip{display:inline-flex!important;align-items:center;gap:5px!important}.sq-browse .sgp-chip:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--wp--preset--color--signal)}
@media(max-width:900px){.sq-browse>.sgp-catalogue{grid-template-columns:1fr!important}.sq-browse .sgp-catalogue__filters{padding:0}}

/* Product detail: premium marketplace presentation using the approved Squarespell system. */

.sgp-highlight-grid article{min-height:210px!important;border-radius:12px!important}.sgp-highlight-grid article span{display:flex;width:34px;height:34px;align-items:center;justify-content:center;border:1px solid var(--sq-line);border-radius:50%}.sgp-highlight-grid h3{margin-top:54px!important}.sgp-compat-grid{overflow:hidden;border:1px solid var(--sq-line);border-radius:12px}.sgp-compat-grid>div{border-width:0 1px 1px 0!important;background:var(--sq-sheet)}.sgp-panel--evidence{border-radius:12px!important}.sgp-support-stack details{border-bottom:1px solid var(--sq-line)}.sgp-support-stack summary{padding:18px 0;font-weight: var(--sq-w-semibold)}

/* Product correction: compact decision page, no floating commerce or empty editorial acreage. */
.sgp-compat-grid{grid-template-columns:1fr 1fr!important}.sgp-compat-grid>div{min-height:112px;padding:16px!important}.sgp-panel--evidence{margin:12px 0!important;padding:24px!important;overflow:hidden}.sgp-panel--evidence .sgp-compare{overflow-x:auto}.sgp-panel--evidence table{min-width:680px;font-size: var(--sq-t-p3)}.sgp-panel--evidence th,.sgp-panel--evidence td{padding:13px 14px!important}.sgp-support-stack summary{padding:15px 0!important}.sgp-support-stack details p{margin:0 0 15px;font-size: var(--sq-t-p3);line-height: var(--sq-lh-body);color:var(--sq-muted)}

/* Approved product concept — final WordPress translation. */
.sgp-detail-icon{display:inline-block;width:18px;height:18px;flex:0 0 18px;background:currentColor;mask-position:center;mask-repeat:no-repeat;mask-size:contain;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat;-webkit-mask-size:contain}.sgp-detail-icon--clock{mask-image:url('../icons/clock-3.svg');-webkit-mask-image:url('../icons/clock-3.svg')}.sgp-detail-icon--skill,.sgp-detail-icon--requirements{mask-image:url('../icons/gauge.svg');-webkit-mask-image:url('../icons/gauge.svg')}.sgp-detail-icon--effort,.sgp-detail-icon--install{mask-image:url('../icons/sliders-horizontal.svg');-webkit-mask-image:url('../icons/sliders-horizontal.svg')}.sgp-detail-icon--evidence,.sgp-detail-icon--support{mask-image:url('../icons/shield-check.svg');-webkit-mask-image:url('../icons/shield-check.svg')}.sgp-detail-icon--best{mask-image:url('../icons/circle-check.svg');-webkit-mask-image:url('../icons/circle-check.svg')}.sgp-detail-icon--avoid{mask-image:url('../icons/circle-alert.svg');-webkit-mask-image:url('../icons/circle-alert.svg')}.sgp-detail-icon--platform{mask-image:url('../icons/blocks.svg');-webkit-mask-image:url('../icons/blocks.svg')}.sgp-detail-icon--license{mask-image:url('../icons/key-round.svg');-webkit-mask-image:url('../icons/key-round.svg')}.sgp-detail-icon--updates{mask-image:url('../icons/refresh-cw.svg');-webkit-mask-image:url('../icons/refresh-cw.svg')}
.sgp-fit{overflow:hidden;display:grid!important;grid-template-columns:1fr 1fr!important;gap:0!important;margin:42px 0 0!important;padding:0!important;border:1px solid var(--sq-line)!important;border-radius:0!important}.sgp-fit__col{padding:22px!important}.sgp-fit__col+.sgp-fit__col{border-left:1px solid var(--sq-line)}.sgp-fit .sgp-panel__label{display:flex;align-items:center;gap:8px}.sgp-fit__col--for .sgp-detail-icon{color:var(--wp--preset--color--verified)}.sgp-fit__col--avoid .sgp-detail-icon{color:var(--wp--preset--color--caution)}.sgp-fit ul{margin-bottom:0}.sgp-compat-grid{border-radius:0!important}.sgp-compat-grid>div{display:grid;grid-template-columns:22px 1fr;grid-template-rows:auto 1fr;gap:4px 10px;align-content:center}.sgp-compat-grid .sgp-detail-icon{grid-row:1/3;align-self:start;color:var(--wp--preset--color--brand)}.sgp-compat-grid span,.sgp-compat-grid strong{grid-column:2}.sgp-compat-grid strong{margin-top:4px!important}.sgp-panel--evidence{border-radius:0!important}.sgp-support-stack summary{display:flex;align-items:center;gap:10px}.sgp-support-stack summary .sgp-detail-icon{color:var(--wp--preset--color--brand)}

@media(max-width:899px){.sgp-fit{grid-template-columns:1fr!important}.sgp-fit__col+.sgp-fit__col{border-left:0;border-top:1px solid var(--sq-line)}}
@media(max-width:520px){.sgp-fit__col{padding:18px!important}}

/* Exact approved product composition: homepage type, color and icon system. */

.sgp-detail-icon--preview{mask-image:url('../icons/play.svg');-webkit-mask-image:url('../icons/play.svg')}
.sgp-fit{margin:48px 0 0!important;background:transparent!important}.sgp-fit__col{padding:24px!important;background:var(--sq-sheet)}.sgp-fit .sgp-panel__label{font:500 14px 'DM Sans',sans-serif!important;letter-spacing:0!important;text-transform:none!important}.sgp-fit li{font-size: var(--sq-t-p3);line-height: var(--sq-lh-body)}.sgp-compat-grid>div{min-height:124px!important;padding:20px!important;background:var(--sq-sheet)!important}.sgp-compat-grid span{font:400 12px 'DM Sans',sans-serif!important;letter-spacing:0!important;text-transform:none!important}.sgp-compat-grid strong{font:500 14px/1.45 'DM Sans',sans-serif!important}.sgp-panel--evidence{padding:28px!important;background:var(--sq-soft)!important;border-left:3px solid var(--sq-ink)!important}.sgp-panel--evidence .sgp-panel__label{font:400 12px 'DM Sans',sans-serif!important;letter-spacing: var(--sq-ls-eyebrow)}.sgp-support-stack summary{font:500 16px 'DM Sans',sans-serif!important}

/* Product marketplace v3 — shared Squarespell canvas, compact commerce hierarchy. */

.sgp-license-picker{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0 4px}.sgp-license-picker button{min-height:78px;padding:14px;text-align:left;border:1px solid var(--sq-line);border-radius:9px;background:transparent;color:var(--sq-ink);font:inherit;cursor:pointer}.sgp-license-picker button:hover{border-color:var(--sq-muted)}.sgp-license-picker button.is-selected{border-color:var(--sq-signal);box-shadow:inset 0 0 0 1px var(--sq-signal);background:color-mix(in srgb,var(--sq-signal) 5%,transparent)}.sgp-license-picker span{display:block;font:500 15px 'DM Sans',sans-serif}.sgp-license-picker small{display:block;margin-top:5px;color:var(--sq-muted);font-size: var(--sq-t-p3);line-height: var(--sq-lh-eyebrow)}
.sgp-fit{margin:26px 0 0!important;border-radius:12px!important;overflow:hidden}.sgp-compat-grid{border-radius:12px!important;overflow:hidden}.sgp-compat-grid .sgp-detail-icon,.sgp-support-stack summary .sgp-detail-icon{color:var(--sq-signal)!important}.sgp-panel--evidence{border-radius:12px!important}
@media(min-width:900px){.sgp-fit{grid-column:1/-1!important}}

@media(max-width:560px){.sgp-license-picker{grid-template-columns:1fr!important}}

/* Approved product detail — marketplace workspace matching the Home-page system. */

.sgp-license-picker{order:4;grid-template-columns:1fr!important;margin:10px 0 12px!important}.sgp-license-picker button{min-height:74px!important;border-radius:8px!important}.sgp-purchase-promises{order:6}
.sgp-fit{margin:8px 0 0!important}.sgp-compat-grid{border-radius:10px!important}.sgp-panel--evidence{border-radius:10px!important}
@media(min-width:1100px){.sgp-fit{grid-column:1/-1!important}}
@media(min-width:900px) and (max-width:1099px){.sgp-fit{grid-column:1/-1!important}}

.sgp-license-picker--variations small .price{color:inherit!important;font-size: var(--sq-t-p3) !important}

/* Saved and Cart carry icons, matching the header search mark. The glyphs are inline
   Lucide-style paths rather than mask images so they inherit the link colour directly
   and stay correct when the header inverts in dark mode. */

/* Target size, WCAG 2.5.8 (AA, 24x24). These links were 16-22px tall. The negative
   margin cancels the added padding so the hit area grows without moving anything:
   the layout is identical, the tap target is not. */

.sq-ref-heading>a,.sq-ref-title>a{padding-block:4px;margin-block:-4px}
.sq-footer__links>div>a{padding-block:4px;margin-block:-4px}

/* ═══════════════════════════════════════════════════════════════════════════
   BLOG — magazine-style article & listing layout
   Built on the --sq-* tokens (the live light/dark system defined above under
   "Approved Squarespell discovery system") rather than raw wp--preset colours,
   so these components pick up dark mode and the site's real body/heading
   fonts (DM Sans / Bricolage Grotesque, forced !important on body/h1-h4)
   automatically instead of fighting them. New class names throughout —
   nothing here reuses .sgp-card/.sgp-grid, which that override block already
   strips to a borderless, excerpt-hidden marketplace-tile style.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Breadcrumb ────────────────────────────────────────────────────────── */
.sq-breadcrumb {
	display: flex !important;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0 0 var(--wp--preset--spacing--40);
	font-size: var(--sq-t-p3);
	color: var(--sq-muted);
}
.sq-breadcrumb a,
.sq-breadcrumb .wp-block-post-terms a { color: var(--sq-muted); text-decoration: none; }
.sq-breadcrumb a:hover,
.sq-breadcrumb .wp-block-post-terms a:hover { color: var(--sq-ink); text-decoration: underline; text-underline-offset: 2px; }
.sq-breadcrumb__sep { opacity: 0.5; }
.sq-breadcrumb .wp-block-post-terms { display: inline; margin: 0; font-size: inherit; color: inherit; }

/* ─── Post hero ─────────────────────────────────────────────────────────── */
.sq-post-hero { padding-block: var(--wp--preset--spacing--80) var(--wp--preset--spacing--60); }

.sq-post-hero__title.wp-block-post-title {
	font-size: var(--sq-t-h1) !important;
	line-height: var(--sq-lh-h1) !important;
	letter-spacing: var(--sq-ls-h3);
	margin: 0 0 var(--wp--preset--spacing--40) !important;
	max-inline-size: 20ch;
}

.sq-post-hero__meta { gap: 0.5rem !important; font-size: var(--sq-t-p3); color: var(--sq-muted); }
.sq-post-hero__meta .wp-block-post-author-name,
.sq-post-hero__meta .wp-block-post-date { margin: 0; }
.sq-post-hero__dot { opacity: 0.5; }

.sq-post-hero__image.wp-block-post-featured-image { margin-block: 0 var(--wp--preset--spacing--70) !important; overflow: hidden; }
.sq-post-hero__image.wp-block-post-featured-image img {
	border-radius: var(--wp--custom--radius--lg);
	inline-size: 100%;
	max-block-size: 520px;
	object-fit: cover;
}

/* ─── Post layout: sticky share/newsletter rail + article column ─────────── */
.sq-post-layout {
	display: grid;
	gap: var(--wp--preset--spacing--60);
	grid-template-columns: 1fr;
	padding-block-end: var(--wp--preset--spacing--90);
}
@media (min-width: 900px) {
	.sq-post-layout { grid-template-columns: 240px minmax(0, 1fr); align-items: start; }
	.sq-post-sidebar { position: sticky; top: var(--wp--preset--spacing--50); }
}
.sq-post-sidebar { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--60); }

.sq-share { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--20); }
.sq-share__label { font-size: var(--sq-t-eyebrow); font-weight: var(--sq-w-bold); text-transform: uppercase; letter-spacing: var(--sq-ls-eyebrow); color: var(--sq-muted); }
.sq-share__row { display: flex; gap: var(--wp--preset--spacing--20); }
@media (min-width: 900px) { .sq-share__row { flex-direction: column; } }
.sq-share__btn {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--wp--preset--spacing--30);
	inline-size: 40px; block-size: 40px; border-radius: var(--wp--custom--radius--pill);
	border: 1px solid var(--sq-line); background: var(--sq-sheet); color: var(--sq-muted);
	cursor: pointer; text-decoration: none;
	transition: border-color .2s, color .2s, box-shadow .2s;
}
@media (min-width: 900px) { .sq-share__btn { inline-size: 100%; justify-content: flex-start; padding-inline: 0.85rem; } }
.sq-share__btn span { display: none; font-size: var(--sq-t-p3); font-weight: var(--sq-w-semibold); }
@media (min-width: 900px) { .sq-share__btn span { display: inline; } }
.sq-share__btn svg { width: 16px; height: 16px; flex: none; }
.sq-share__btn--x svg, .sq-share__btn--facebook svg, .sq-share__btn--linkedin svg { fill: currentColor; }
.sq-share__btn--copy svg { stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sq-share__btn:hover, .sq-share__btn:focus-visible { color: var(--sq-ink); border-color: var(--sq-ink); }
.sq-share__btn.is-copied { color: var(--sq-good); border-color: var(--sq-good); }

.sq-post-newsletter { padding: var(--wp--preset--spacing--50); background: var(--sq-soft); border: 1px solid var(--sq-line); border-radius: var(--wp--custom--radius--lg); }
.sq-post-newsletter h2 { font-size: var(--sq-t-p1) !important; margin: 0 0 var(--wp--preset--spacing--20) !important; }
.sq-post-newsletter p { font-size: var(--sq-t-p3); color: var(--sq-muted); margin: 0 0 var(--wp--preset--spacing--40); }
.sq-post-newsletter form { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--20); }
.sq-post-newsletter input { inline-size: 100%; padding: 0.65rem 0.85rem; border-radius: var(--wp--custom--radius--md); border: 1px solid var(--sq-line); background: var(--sq-paper); color: var(--sq-ink); font-size: var(--sq-t-p3); }
.sq-post-newsletter button { padding: 0.65rem 0.85rem; border-radius: var(--wp--custom--radius--md); border: none; background: var(--sq-ink); color: var(--sq-paper); font-weight: var(--sq-w-semibold); font-size: var(--sq-t-p3); cursor: pointer; }

.sq-post-main .wp-block-post-content { font-size: var(--sq-t-p1); line-height: 1.75; max-inline-size: 68ch; color: var(--sq-ink); }
.sq-post-main .wp-block-post-content > * + * { margin-block-start: var(--wp--preset--spacing--50); }
.sq-post-main .wp-block-post-content h2 { font-size: var(--sq-t-h3) !important; margin-block-start: var(--wp--preset--spacing--70) !important; }
.sq-post-main .wp-block-post-content h3 { font-size: var(--sq-t-h3) !important; margin-block-start: var(--wp--preset--spacing--60) !important; }
/* Imported (Squarespace-export) content has raw <img> tags at their native
   pixel size — some 1500-2500px wide — which blew out the page horizontally.
   Force them responsive regardless of any width/height attribute on the tag. */
.sq-post-main .wp-block-post-content img,
.sq-post-card__media img,
.sq-post-hero__image img {
	max-inline-size: 100% !important;
	block-size: auto !important;
}
.sq-post-main .wp-block-post-content img { border-radius: var(--wp--custom--radius--md); display: block; }
.sq-post-layout, .sq-post-hero, .sq-blog-hero, .sq-mag-section { max-inline-size: 100%; overflow-x: hidden; }
.sq-post-main .wp-block-post-content blockquote { margin: 0; padding-inline-start: var(--wp--preset--spacing--40); border-inline-start: 3px solid var(--sq-signal); font-style: italic; color: var(--sq-muted); }
.sq-post-main .wp-block-post-content a { color: var(--sq-ink); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 899px) {
	.sq-post-hero { padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50); }
	.sq-post-hero__title.wp-block-post-title { max-inline-size: none; }
	.sq-post-hero__image.wp-block-post-featured-image img { max-block-size: 320px; }
	.sq-share__row { overflow-x: auto; }
}

/* ══════════════════════════════════════════════════════════════════════════
   EDITORIAL BLOG

   Layout architecture from the approved blueprint; every colour, font, border,
   radius and button below resolves to the site's own --sq-* tokens, so the blog
   reads as Squarespell rather than as a second design system.

   /blog/    masthead → featured stories → toolbar → Trending now →
             Learn and build → Browse all → Essential resources → newsletter →
             platforms
   archives  intro → toolbar → Browse all → newsletter

   Browse all and every category archive render the same .sqb-article card from
   the same PHP function, so they cannot drift apart.

   Everything is rooted at .sqb-page — the blog's own root class — so no rule
   here can reach the global header, drawer or footer.
   ══════════════════════════════════════════════════════════════════════════ */

.sqb-page {
	--sqb-max: 1504px;
	--sqb-pad: clamp(16px, 4vw, 32px);
	--sqb-sec: clamp(20px, 3.1vw, 44px);
	--sqb-r: 12px;
	background: var(--sq-paper);
	color: var(--sq-ink);
	overflow-x: clip;
}
.sqb-page, .sqb-page *, .sqb-page *::before, .sqb-page *::after { box-sizing: border-box; }
/* WordPress adds a block-gap margin to flow children; spacing here is explicit. */
.sqb-page .is-layout-flow > *, .sqb-page .is-layout-flex > * { margin-block: 0; }

.sqb-page .sqb-shell {
	inline-size: 100%;
	max-inline-size: var(--sqb-max);
	padding-inline: var(--sqb-pad);
	margin-inline: auto;
}
.sqb-page .sqb-section { padding-block: var(--sqb-sec); border-block-start: 1px solid var(--sq-line); }
.sqb-page .sqb-section:first-child { border-block-start: none; }

/* ─── Shared atoms ───────────────────────────────────────────────────────── */
.sqb-eyebrow, .sqb-cat {
	display: block;
	margin: 0 0 10px;
	font-size: var(--sq-t-eyebrow);
	font-weight: var(--sq-w-bold);
	line-height: var(--sq-lh-ui);
	letter-spacing: var(--sq-ls-eyebrow);
	text-transform: uppercase;
	color: var(--sq-signal);
}
.sqb-eyebrow a { color: inherit; text-decoration: none; }
.sqb-eyebrow a:hover, .sqb-eyebrow a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

.sqb-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-block-start: auto;
	padding-block-start: 16px;
	font-size: var(--sq-t-p3);
	line-height: var(--sq-lh-eyebrow);
	color: var(--sq-muted);
}
.sqb-meta i { font-style: normal; opacity: 0.55; }
.sqb-readlink { margin-block-start: 12px; font-size: var(--sq-t-p3); font-weight: var(--sq-w-semibold); color: var(--sq-ink); }

.sqb-img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; transition: transform var(--wp--custom--transition--base); }

/* Whole-card link. The category is a span and the meta is text, so nothing is
   ever nested inside this anchor. */
.sqb-cardlink { color: var(--sq-ink); text-decoration: none; }
.sqb-cardlink::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.sqb-cardlink:hover { text-decoration: underline; text-underline-offset: 2px; }
.sqb-article, .sqb-lead, .sqb-support, .sqb-trend, .sqb-guide, .sqb-row, .sqb-resource { position: relative; }
.sqb-article:focus-within, .sqb-lead:focus-within, .sqb-support:focus-within,
.sqb-trend:focus-within, .sqb-resource:focus-within { outline: 2px solid var(--sq-signal); outline-offset: 2px; }
.sqb-cardlink:focus-visible { outline: none; }

.sqb-pill {
	display: inline-flex;
	align-items: center;
	block-size: 34px;
	padding-inline: 14px;
	border: 1px solid var(--sq-line);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--sq-sheet);
	color: var(--sq-muted);
	font-size: var(--sq-t-p3);
	font-weight: var(--sq-w-medium);
	line-height: var(--sq-lh-h1);
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--wp--custom--transition--fast), border-color var(--wp--custom--transition--fast), background var(--wp--custom--transition--fast);
}
.sqb-pill:hover, .sqb-pill:focus-visible { color: var(--sq-ink); border-color: var(--sq-ink); }
.sqb-pill.is-active { background: var(--sq-ink); border-color: var(--sq-ink); color: var(--sq-paper); font-weight: var(--sq-w-semibold); }
.sqb-pill--ghost { block-size: 30px; background: transparent; font-size: var(--sq-t-p3); }

.sqb-sechead { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 24px; margin-block-end: 22px; }
.sqb-sechead__title { margin: 0; font-size: var(--sq-t-h2); line-height: var(--sq-lh-h3); letter-spacing: var(--sq-ls-h2); color: var(--sq-ink); }
.sqb-sechead__sub { margin: 8px 0 0; font-size: var(--sq-t-p2); line-height: var(--sq-lh-supporting); color: var(--sq-muted); max-inline-size: 70ch; }
.sqb-headlink { flex: none; font-size: var(--sq-t-p3); font-weight: var(--sq-w-semibold); color: var(--sq-signal); text-decoration: none; white-space: nowrap; }
.sqb-headlink:hover, .sqb-headlink:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

/* ─── Search ─────────────────────────────────────────────────────────────── */
.sqb-search {
	position: relative;
	display: flex;
	align-items: center;
	inline-size: 100%;
	max-inline-size: 320px;
	block-size: 38px;
	padding-inline: 16px 40px;
	border: 1px solid var(--sq-line);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--sq-sheet);
	transition: border-color var(--wp--custom--transition--fast);
}
.sqb-search--lg { block-size: 46px; max-inline-size: none; }
.sqb-search:focus-within { border-color: var(--sq-ink); }
.sqb-search__input { inline-size: 100%; border: none; background: transparent; color: var(--sq-ink); font-size: var(--sq-t-p3); font-family: inherit; padding: 0; }
.sqb-search__input:focus { outline: none; }
.sqb-search__input::placeholder { color: var(--sq-muted); }
.sqb-search__go {
	position: absolute; inset-inline-end: 6px;
	inline-size: 28px; block-size: 28px;
	display: grid; place-items: center;
	border: none; border-radius: 50%; background: transparent;
	color: var(--sq-muted); cursor: pointer; padding: 0;
}
.sqb-search--lg .sqb-search__go { inline-size: 34px; block-size: 34px; background: var(--sq-ink); color: var(--sq-paper); }
.sqb-search__go:hover { color: var(--sq-ink); }
.sqb-search--lg .sqb-search__go:hover { color: var(--sq-paper); opacity: 0.85; }

/* ─── 1. Text-led masthead. No hero image by design. ─────────────────────── */
.sqb-masthead {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(24px, 4vw, 64px);
	padding-block: clamp(32px, 4.5vw, 72px);
}
@media (min-width: 900px) {
	/* A floor, not a fixed height: the brief asks for roughly 280-320px and the
	   content lands just under that at some widths. It still grows with content. */
	.sqb-masthead { grid-template-columns: minmax(0, 55fr) minmax(320px, 45fr); align-items: end; min-block-size: 280px; }
}
.sqb-masthead__title {
	margin: 0;
	font-size: var(--sq-t-h1);
	line-height: var(--sq-lh-h1);
	letter-spacing: var(--sq-ls-h1);
	color: var(--sq-ink);
	max-inline-size: 760px;
	text-wrap: balance;
}
.sqb-masthead__intro { margin: 0 0 18px; font-size: var(--sq-t-p2); line-height: var(--sq-lh-body); color: var(--sq-muted); max-inline-size: 52ch; }
.sqb-topics { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 14px; }

/* ─── 2. Featured stories: one lead, two supporting ──────────────────────── */
.sqb-featured { display: grid; grid-template-columns: 1fr; gap: 24px; padding-block-end: clamp(32px, 4vw, 56px); }
@media (min-width: 900px)  { .sqb-featured { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1160px) { .sqb-featured { grid-template-columns: minmax(0, 1.55fr) minmax(340px, 0.75fr); } }

.sqb-lead, .sqb-support, .sqb-trend, .sqb-article, .sqb-guide, .sqb-row, .sqb-resource {
	background: var(--sq-sheet);
	border: 1px solid var(--sq-line);
	border-radius: var(--sqb-r);
	overflow: hidden;
	transition: border-color var(--wp--custom--transition--base), box-shadow var(--wp--custom--transition--base);
}
.sqb-lead:hover, .sqb-support:hover, .sqb-trend:hover, .sqb-article:hover, .sqb-resource:hover { border-color: var(--sq-ink); box-shadow: var(--wp--custom--shadow--md); }

.sqb-lead { display: grid; grid-template-columns: 1fr; }
@media (min-width: 640px) { .sqb-lead { grid-template-columns: 42% 58%; max-block-size: 400px; } }
/* Stacked lead card: the image spans the card and crops to 220px, rather than
   keeping a 4:3 box and leaving a strip of empty card beside it. */
.sqb-lead__media { position: relative; overflow: hidden; background: var(--sq-soft); inline-size: 100%; block-size: 220px; }
@media (min-width: 640px) { .sqb-lead__media { block-size: 100%; } }
.sqb-lead__copy { display: flex; flex-direction: column; padding: clamp(18px, 2vw, 28px); min-inline-size: 0; }
.sqb-lead__title { margin: 0; font-size: var(--sq-t-h2); line-height: var(--sq-lh-ui); letter-spacing: var(--sq-ls-h2); font-weight: var(--sq-w-semibold);
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sqb-lead__excerpt { margin: 12px 0 0; font-size: var(--sq-t-p2); line-height: var(--sq-lh-supporting); color: var(--sq-muted);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.sqb-featured__side { display: grid; grid-template-columns: 1fr; grid-auto-rows: 1fr; gap: 24px; }
@media (min-width: 900px) and (max-width: 1159.98px) { .sqb-featured__side { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; } }
.sqb-support { display: grid; grid-template-columns: minmax(0, 1fr) 132px; gap: 14px; padding: 20px; align-items: start; }
.sqb-support__copy { display: flex; flex-direction: column; min-inline-size: 0; }
.sqb-support__title { margin: 0; font-size: var(--sq-t-p2); line-height: var(--sq-lh-h4); font-weight: var(--sq-w-semibold); letter-spacing: var(--sq-ls-h4);
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-block-size: 3.96em; }
.sqb-support__thumb { inline-size: 132px; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: var(--sq-soft); }

/* ─── 3. Toolbar ─────────────────────────────────────────────────────────── */
.sqb-toolbar { display: flex; align-items: center; gap: 16px; padding-block: 16px; border-block: 1px solid var(--sq-line); }
.sqb-filters { flex: 1 1 auto; min-inline-size: 0; }
/* Scrolls inside its own row rather than wrapping into ragged lines. */
.sqb-filters__rail { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-block: 2px; }
.sqb-filters__rail::-webkit-scrollbar { display: none; }
.sqb-sort { flex: none; display: flex; align-items: center; gap: 8px; }
.sqb-sort__label { font-size: var(--sq-t-p3); color: var(--sq-muted); }
.sqb-sort__select {
	block-size: 34px; padding-inline: 12px 30px;
	border: 1px solid var(--sq-line); border-radius: var(--wp--custom--radius--pill);
	background: var(--sq-sheet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 13px;
	color: var(--sq-ink); font-size: var(--sq-t-p3); font-family: inherit; appearance: none; cursor: pointer;
}
.sqb-sort__go { block-size: 34px; padding-inline: 12px; border: 1px solid var(--sq-ink); border-radius: var(--wp--custom--radius--pill); background: var(--sq-ink); color: var(--sq-paper); font-size: var(--sq-t-p3); font-family: inherit; cursor: pointer; }

/* ─── 4. Trending now ────────────────────────────────────────────────────── */
.sqb-trending { display: grid; grid-template-columns: 1fr; gap: 14px; grid-auto-rows: 1fr; }
@media (min-width: 560px)  { .sqb-trending { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .sqb-trending { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sqb-trend { display: flex; flex-direction: column; }
.sqb-trend__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--sq-soft); border-block-end: 1px solid var(--sq-line); }
.sqb-rank {
	position: absolute; inset-block-start: 8px; inset-inline-start: 8px; z-index: 2;
	inline-size: 24px; block-size: 24px; display: grid; place-items: center;
	border-radius: 7px; background: var(--sq-ink); color: var(--sq-paper); font-size: var(--sq-t-p3); font-weight: var(--sq-w-bold);
}
.sqb-trend__copy { display: flex; flex-direction: column; flex: 1; padding: 16px; }
.sqb-trend__title { margin: 0; font-size: var(--sq-t-p2); line-height: var(--sq-lh-h4); font-weight: var(--sq-w-semibold); letter-spacing: var(--sq-ls-h4);
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-block-size: 4.02em; }

/* ─── 5. Learn and build ─────────────────────────────────────────────────── */
.sqb-learn { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: start; }
@media (min-width: 1100px) { .sqb-learn { grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr); } }
.sqb-guide { display: flex; flex-direction: column; }
.sqb-guide__top { display: grid; grid-template-columns: 1fr; }
@media (min-width: 640px) { .sqb-guide__top { grid-template-columns: 42% 58%; } }
.sqb-guide__copy { display: flex; flex-direction: column; padding: clamp(18px, 2vw, 26px); min-inline-size: 0; }
.sqb-guide__title { margin: 0; font-size: var(--sq-t-h3); line-height: var(--sq-lh-ui); font-weight: var(--sq-w-semibold); letter-spacing: var(--sq-ls-h2);
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sqb-guide__excerpt { margin: 12px 0 0; font-size: var(--sq-t-p2); line-height: var(--sq-lh-supporting); color: var(--sq-muted);
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sqb-guide__media { position: relative; overflow: hidden; background: var(--sq-soft); aspect-ratio: 16 / 10; }
@media (min-width: 640px) { .sqb-guide__media { aspect-ratio: auto; min-block-size: 230px; } }

.sqb-tray, .sqb-row__products { padding: 16px; border-block-start: 1px solid var(--sq-line); background: var(--sq-soft); }
.sqb-tray__label { margin: 0 0 10px; font-size: var(--sq-t-eyebrow); font-weight: var(--sq-w-bold); letter-spacing: var(--sq-ls-eyebrow); text-transform: uppercase; color: var(--sq-muted); }
.sqb-tray__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 780px) { .sqb-tray__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sqb-row__chips { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 480px) { .sqb-row__chips { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* A real catalogue product, small. Lifted above the card link so it stays clickable. */
.sqb-chip {
	position: relative; z-index: 2;
	display: flex; align-items: center; gap: 8px; min-inline-size: 0;
	padding: 9px 10px;
	border: 1px solid var(--sq-line); border-radius: 9px; background: var(--sq-sheet);
	color: var(--sq-ink); text-decoration: none;
	transition: border-color var(--wp--custom--transition--fast);
}
.sqb-chip:hover, .sqb-chip:focus-visible { border-color: var(--sq-ink); }
.sqb-chip__mark { flex: none; inline-size: 24px; block-size: 24px; display: grid; place-items: center; border-radius: 6px; background: var(--sq-ink); color: var(--sq-paper); font-size: var(--sq-t-eyebrow); font-weight: var(--sq-w-bold); }
.sqb-chip__text { min-inline-size: 0; }
.sqb-chip__text b { display: block; font-size: var(--sq-t-p3); font-weight: var(--sq-w-semibold); line-height: var(--sq-lh-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sqb-chip__text small { display: block; font-size: var(--sq-t-p3); color: var(--sq-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sqb-learn__stack { display: grid; grid-template-columns: 1fr; grid-auto-rows: 1fr; gap: 22px; }
.sqb-row { display: grid; grid-template-columns: 1fr; }
@media (min-width: 620px) { .sqb-row { grid-template-columns: 40% 60%; } }
.sqb-row__copy { display: flex; flex-direction: column; padding: 18px; min-inline-size: 0; }
.sqb-row__title { margin: 0; font-size: var(--sq-t-p2); line-height: var(--sq-lh-h4); font-weight: var(--sq-w-semibold); letter-spacing: var(--sq-ls-h3);
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 620px) { .sqb-row__products { border-block-start: none; border-inline-start: 1px solid var(--sq-line); } }

/* ─── 6. Browse all — the shared archive card ────────────────────────────── */
.sqb-browse__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 24px; margin-block-end: 22px; }
.sqb-grid { display: grid; grid-template-columns: 1fr; grid-auto-rows: 1fr; gap: 18px; }
@media (min-width: 640px)  { .sqb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .sqb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .sqb-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.sqb-article { display: flex; flex-direction: column; }
.sqb-article__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--sq-soft); border-block-end: 1px solid var(--sq-line); flex: none; }
.sqb-article__copy { display: flex; flex-direction: column; flex: 1; padding: 18px; }
.sqb-article__title { margin: 0; font-size: var(--sq-t-p1); line-height: var(--sq-lh-h4); font-weight: var(--sq-w-semibold); letter-spacing: var(--sq-ls-h3);
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-block-size: 3.96em; }
.sqb-article__excerpt { margin: 10px 0 0; font-size: var(--sq-t-p2); line-height: var(--sq-lh-supporting); color: var(--sq-muted);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-block-size: 3.1em; }
.sqb-article:hover .sqb-img, .sqb-trend:hover .sqb-img, .sqb-lead:hover .sqb-img, .sqb-resource:hover .sqb-img { transform: scale(1.03); }

.sqb-pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-block-start: 36px; }
.sqb-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-inline-size: 36px; block-size: 36px; padding-inline: 12px;
	border: 1px solid var(--sq-line); border-radius: var(--wp--custom--radius--pill);
	color: var(--sq-muted); font-size: var(--sq-t-p3); font-weight: var(--sq-w-medium); text-decoration: none;
	transition: color var(--wp--custom--transition--fast), border-color var(--wp--custom--transition--fast), background var(--wp--custom--transition--fast);
}
.sqb-pagination a.page-numbers:hover, .sqb-pagination a.page-numbers:focus-visible { color: var(--sq-ink); border-color: var(--sq-ink); }
.sqb-pagination .page-numbers.current { background: var(--sq-ink); border-color: var(--sq-ink); color: var(--sq-paper); font-weight: var(--sq-w-semibold); }
.sqb-pagination .page-numbers.dots { border-color: transparent; }

.sqb-empty { text-align: center; padding: clamp(36px, 6vw, 64px) 24px; border: 1px dashed var(--sq-line); border-radius: var(--sqb-r); background: var(--sq-soft); }
.sqb-empty h3 { margin: 0 0 10px; font-size: var(--sq-t-h4); }
.sqb-empty p { margin: 0 auto 14px; font-size: var(--sq-t-p2); color: var(--sq-muted); max-inline-size: 44ch; }
.sqb-empty a { color: var(--sq-ink); font-size: var(--sq-t-p2); font-weight: var(--sq-w-semibold); text-underline-offset: 3px; }

/* ─── 404 ────────────────────────────────────────────────────────────────── */
.sqb-404 { max-inline-size: 640px; padding-block: clamp(56px, 10vw, 120px); text-align: center; margin-inline: auto; }
.sqb-404__eyebrow { margin: 0 0 14px; color: var(--sq-signal-ink); font-size: var(--sq-t-eyebrow); font-weight: var(--sq-w-bold); letter-spacing: var(--sq-ls-eyebrow); text-transform: uppercase; }
.sqb-404__title { margin: 0 0 14px; font-size: var(--sq-t-h2); letter-spacing: var(--sq-ls-h1); }
.sqb-404__lead { margin: 0 auto 28px; font-size: var(--sq-t-p2); color: var(--sq-muted); max-inline-size: 46ch; }
.sqb-404__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* ─── 7. Essential resources ─────────────────────────────────────────────── */
.sqb-resources { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 14px; }
@media (min-width: 1000px) { .sqb-resources { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sqb-resource { display: flex; flex-direction: column; }
.sqb-resource__media { position: relative; aspect-ratio: 2 / 1; overflow: hidden; background: var(--sq-soft); border-block-end: 1px solid var(--sq-line); }
.sqb-resource__copy { display: flex; flex-direction: column; flex: 1; padding: 14px; }
.sqb-resource__title { margin: 0; font-size: var(--sq-t-p3); line-height: var(--sq-lh-eyebrow); font-weight: var(--sq-w-semibold); letter-spacing: var(--sq-ls-h4);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ─── 8. Newsletter ──────────────────────────────────────────────────────── */
.sqb-news {
	display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center;
	padding: clamp(22px, 3vw, 34px);
	border: 1px solid var(--sq-line); border-radius: var(--sqb-r);
	background: var(--sq-soft);
}
@media (min-width: 860px) { .sqb-news { grid-template-columns: 1fr 1.2fr; gap: 32px; } }
.sqb-news__title { margin: 0; font-size: var(--sq-t-h3); line-height: var(--sq-lh-h3); letter-spacing: var(--sq-ls-h2); color: var(--sq-ink); }
.sqb-news__sub { margin: 8px 0 0; font-size: var(--sq-t-p3); line-height: var(--sq-lh-supporting); color: var(--sq-muted); }
.sqb-news__form { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 560px) { .sqb-news__form { grid-template-columns: minmax(0, 1fr) auto; } }
.sqb-news__input {
	block-size: 46px; padding-inline: 16px;
	border: 1px solid var(--sq-line); border-radius: var(--wp--custom--radius--md);
	background: var(--sq-paper); color: var(--sq-ink); font-size: var(--sq-t-p2); font-family: inherit;
}
.sqb-news__input:focus { outline: none; border-color: var(--sq-ink); }
.sqb-news__btn {
	block-size: 46px; padding-inline: 22px;
	border: none; border-radius: var(--wp--custom--radius--md);
	background: var(--sq-signal); color: var(--sq-signal-ink);
	font-size: var(--sq-t-p2); font-weight: var(--sq-w-semibold); font-family: inherit; cursor: pointer; white-space: nowrap;
	transition: opacity var(--wp--custom--transition--fast);
}
.sqb-news__btn:hover { opacity: 0.9; }
.sqb-news__btn[disabled] { opacity: 0.6; cursor: progress; }
.sqb-news__status { grid-column: 1 / -1; margin: 0; font-size: var(--sq-t-p3); color: var(--sq-muted); min-block-size: 1.2em; }
.sqb-news__status.is-error { color: var(--sq-critical); }
.sqb-news__status.is-ok { color: var(--sq-good); }

/* ─── 9. Platforms ───────────────────────────────────────────────────────── */
.sqb-platformswrap { padding-block: clamp(28px, 3.5vw, 44px) var(--sqb-sec); border-block-start: 1px solid var(--sq-line); text-align: center; }
.sqb-platforms__label { margin: 0 0 18px; font-size: var(--sq-t-eyebrow); font-weight: var(--sq-w-bold); letter-spacing: var(--sq-ls-eyebrow); text-transform: uppercase; color: var(--sq-muted); }
.sqb-platforms { list-style: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 32px; margin: 0; padding: 0; }
.sqb-platforms a { display: inline-flex; align-items: center; gap: 8px; color: var(--sq-muted); font-size: var(--sq-t-p3); font-weight: var(--sq-w-semibold); text-decoration: none; transition: color var(--wp--custom--transition--fast); }
.sqb-platforms a:hover, .sqb-platforms a:focus-visible { color: var(--sq-ink); }
.sqb-platforms img { inline-size: 22px; block-size: 22px; object-fit: contain; filter: grayscale(1); opacity: 0.7; transition: filter var(--wp--custom--transition--fast), opacity var(--wp--custom--transition--fast); }
.sqb-platforms a:hover img { filter: none; opacity: 1; }
[data-sq-theme="dark"] .sqb-platforms img { filter: grayscale(1) invert(1); opacity: 0.8; }
[data-sq-theme="dark"] .sqb-platforms a:hover img { filter: invert(1); }

/* ─── Archive intro ──────────────────────────────────────────────────────── */
.sqb-intro { padding-block: clamp(28px, 4vw, 56px) clamp(18px, 2.5vw, 26px); }
.sqb-intro__title { margin: 0 0 14px; font-size: var(--sq-t-h1); line-height: var(--sq-lh-h1); letter-spacing: var(--sq-ls-h1); color: var(--sq-ink); text-wrap: balance; }
.sqb-intro__sub { margin: 0; font-size: var(--sq-t-p2); line-height: var(--sq-lh-body); color: var(--sq-muted); max-inline-size: 660px; }
.sqb-intro__count { margin: 12px 0 0; font-size: var(--sq-t-p3); color: var(--sq-muted); }

/* ─── Narrow viewports ───────────────────────────────────────────────────── */
@media (max-width: 899.98px) {
	.sqb-toolbar { flex-direction: column; align-items: stretch; gap: 12px; }
	.sqb-sort { justify-content: flex-end; }
	.sqb-search { max-inline-size: none; }
	.sqb-browse__head { flex-direction: column; align-items: stretch; }
}
@media (max-width: 559.98px) {
	/* Supporting stories stay compact horizontal cards with a 96px thumbnail. */
	.sqb-support { grid-template-columns: minmax(0, 1fr) 96px; padding: 15px; gap: 12px; }
	.sqb-support__thumb { inline-size: 96px; }
	.sqb-sort__label { display: none; }
	.sqb-sort__select { flex: 1; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ARTICLE LAYOUT V2 — master blog article template

   Live only on posts flagged `squarespell_post_layout_v2`. Rooted at .sqp-page,
   so no rule here reaches the header, the blog landing page or the archives.
   Colours, fonts, radii and buttons all resolve to the site's own --sq-* tokens.

   The grid is: utility rail | article | chapter navigation. The sidebar column
   spans the whole row (align-items: stretch) and only the panel inside it is
   sticky — the previous build made the column itself the sticky element inside a
   600px-tall parent, so it had no travel and left an empty gutter for 27,000px.
   ══════════════════════════════════════════════════════════════════════════ */

.sqp-page {
	--sqp-shell: 1260px;
	--sqp-pad: clamp(20px, 4vw, 32px);
	--sqp-measure: 720px;
	--sqp-rail: 52px;
	--sqp-side: 300px;
	--sqp-gap: 44px;
	--sqp-sticky: 108px;          /* sticky site header + breathing room */
	--sqp-sec: clamp(48px, 6vw, 80px);
	background: var(--sq-paper);
	color: var(--sq-ink);
	overflow-x: clip;
}
.sqp-page, .sqp-page *, .sqp-page *::before, .sqp-page *::after { box-sizing: border-box; }
.sqp-page .is-layout-flow > *, .sqp-page .is-layout-flex > * { margin-block: 0; }

.sqp-page .sqp-shell {
	inline-size: 100%;
	max-inline-size: var(--sqp-shell);
	padding-inline: var(--sqp-pad);
	margin-inline: auto;
}
.sqp-page :where(h2, h3)[id] { scroll-margin-block-start: var(--sqp-sticky); }

/* Every interactive control on the article gets the same visible focus ring —
   the site reset removes the UA outline, which left body links with none. */
.sqp-page :is(a, button, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--sq-signal);
	outline-offset: 2px;
	border-radius: 4px;
}

.sqp-i { flex: none; inline-size: 18px; block-size: 18px; }
.sqp-i--sm { inline-size: 14px; block-size: 14px; }
.sqp-i--accent { color: var(--sq-signal); }

/* ─── Reading progress ───────────────────────────────────────────────────── */
.sqp-progress { position: sticky; inset-block-start: 0; z-index: 40; block-size: 3px; }
.sqp-progress__bar { display: block; block-size: 100%; inline-size: 0; background: var(--sq-signal); }
@media (prefers-reduced-motion: no-preference) { .sqp-progress__bar { transition: inline-size 80ms linear; } }

/* ─── Breadcrumb ─────────────────────────────────────────────────────────── */
.sqp-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-block: 20px 0; font-size: var(--sq-t-p3); color: var(--sq-muted); }
.sqp-crumbs a { color: inherit; text-decoration: none; }
.sqp-crumbs a:hover, .sqp-crumbs a:focus-visible { color: var(--sq-ink); text-decoration: underline; text-underline-offset: 3px; }
.sqp-crumbs__sep { opacity: 0.45; }
.sqp-crumbs [aria-current="page"] { color: var(--sq-ink); max-inline-size: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ─── Masthead: 58 / 42, centred, contained ──────────────────────────────── */
.sqp-mast {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	align-items: center;
	padding-block: 40px 44px;
}
@media (min-width: 900px) {
	.sqp-mast { grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); gap: clamp(48px, 4.4vw, 64px); padding-block: 44px 52px; }
}
.sqp-kicker { margin: 0 0 12px; font-size: var(--sq-t-eyebrow); font-weight: var(--sq-w-bold); letter-spacing: var(--sq-ls-eyebrow); text-transform: uppercase; color: var(--sq-signal); }
.sqp-title {
	margin: 0 0 16px;
	font-size: var(--sq-t-h1);
	line-height: var(--sq-lh-h1);
	letter-spacing: var(--sq-ls-h1);
	color: var(--sq-ink);
	text-wrap: balance;
}
.sqp-dek { margin: 0 0 20px; font-size: var(--sq-t-h4); line-height: var(--sq-lh-supporting); color: var(--sq-muted); max-inline-size: 54ch; }

.sqp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: var(--sq-t-p3); color: var(--sq-muted); }
.sqp-meta__id, .sqp-meta__bit, .sqp-meta__badge { display: inline-flex; align-items: center; gap: 7px; }
.sqp-meta__author { color: var(--sq-ink); font-weight: var(--sq-w-semibold); }
.sqp-avatar { inline-size: 26px; block-size: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--sq-ink); color: var(--sq-paper); font-size: var(--sq-t-p3); font-weight: var(--sq-w-bold); }
.sqp-avatar--lg { inline-size: 46px; block-size: 46px; font-size: var(--sq-t-h4); }
.sqp-avatar--photo { object-fit: cover; flex-shrink: 0; }
.sqp-meta__badge { padding: 5px 10px; border: 1px solid var(--sq-line); border-radius: var(--wp--custom--radius--pill); background: var(--sq-sheet); color: var(--sq-ink); font-weight: var(--sq-w-semibold); }
.sqp-meta__badge .sqp-i { color: var(--sq-good); }

.sqp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 22px; }
.sqp-act {
	display: inline-flex; align-items: center; gap: 7px;
	min-block-size: 36px; padding-inline: 13px;
	border: 1px solid var(--sq-line); border-radius: var(--wp--custom--radius--pill);
	background: var(--sq-sheet); color: var(--sq-muted);
	font-size: var(--sq-t-p3); font-family: inherit; cursor: pointer; text-decoration: none;
	transition: color var(--wp--custom--transition--fast), border-color var(--wp--custom--transition--fast);
}
.sqp-act:hover, .sqp-act:focus-visible { color: var(--sq-ink); border-color: var(--sq-ink); }
.sqp-act.is-on { color: var(--sq-ink); border-color: var(--sq-ink); }

/* One framed visual. Contained, not cropped, and never a full-bleed hero. */
.sqp-mast__visual {
	margin: 0; padding: 16px;
	border: 1px solid var(--sq-line); border-radius: 14px; background: var(--sq-soft);
	display: grid; place-items: center;
}
.sqp-mast__img {
	inline-size: 100%; block-size: auto;
	max-block-size: 360px; object-fit: contain;
	border-radius: 8px; display: block;
}

/* ─── At a glance ────────────────────────────────────────────────────────── */
.sqp-glance {
	display: grid; grid-template-columns: 1fr; gap: 20px 40px; align-items: center;
	padding: clamp(18px, 2vw, 24px);
	border: 1px solid var(--sq-line); border-radius: 14px; background: var(--sq-soft);
}
@media (min-width: 900px) { .sqp-glance { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); max-block-size: 220px; } }
.sqp-glance__title { margin: 0 0 8px; font-size: var(--sq-t-p3); font-weight: var(--sq-w-bold); letter-spacing: var(--sq-ls-eyebrow); text-transform: uppercase; color: var(--sq-signal); }
.sqp-glance__answer p { margin: 0; font-size: var(--sq-t-p2); line-height: var(--sq-lh-body); color: var(--sq-ink); }
.sqp-glance__jump { display: inline-flex; align-items: center; gap: 6px; margin-block-start: 12px; font-size: var(--sq-t-p3); font-weight: var(--sq-w-semibold); color: var(--sq-ink); text-decoration: none; }
.sqp-glance__jump:hover { color: var(--sq-signal); }
.sqp-glance__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 560px) { .sqp-glance__facts { grid-template-columns: 1fr 1fr; } }
.sqp-glance__facts li { display: flex; align-items: flex-start; gap: 9px; font-size: var(--sq-t-p3); line-height: var(--sq-lh-eyebrow); color: var(--sq-muted); }

/* ─── Reading grid ───────────────────────────────────────────────────────── */
.sqp-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; padding-block: var(--sqp-sec); }
/* The sidebar column stretches the full row; only the panel inside it sticks. */
@media (min-width: 900px)  { .sqp-grid { grid-template-columns: minmax(0, 1fr) var(--sqp-side); gap: var(--sqp-gap); align-items: stretch; } }
@media (min-width: 1200px) { .sqp-grid { grid-template-columns: var(--sqp-rail) minmax(0, var(--sqp-measure)) var(--sqp-side); justify-content: center; } }

.sqp-article { min-inline-size: 0; max-inline-size: var(--sqp-measure); }
@media (max-width: 1199.98px) { .sqp-article { max-inline-size: none; } }

/* ─── Utility rail ───────────────────────────────────────────────────────── */
.sqp-rail { display: none; }
@media (min-width: 1200px) { .sqp-rail { display: block; } }
.sqp-rail__inner { position: sticky; inset-block-start: var(--sqp-sticky); display: flex; flex-direction: column; gap: 8px; }
.sqp-rail__btn {
	position: relative;
	inline-size: 40px; block-size: 40px;
	display: grid; place-items: center;
	border: 1px solid var(--sq-line); border-radius: 10px;
	background: var(--sq-sheet); color: var(--sq-muted);
	cursor: pointer; padding: 0; text-decoration: none;
	transition: color var(--wp--custom--transition--fast), border-color var(--wp--custom--transition--fast);
}
.sqp-rail__btn:hover, .sqp-rail__btn:focus-visible { color: var(--sq-ink); border-color: var(--sq-ink); }
.sqp-rail__btn.is-on { color: var(--sq-signal); border-color: var(--sq-signal); }
.sqp-rail__tip {
	position: absolute; inset-inline-start: calc(100% + 8px); inset-block-start: 50%;
	transform: translateY(-50%);
	padding: 5px 9px; border-radius: 6px;
	background: var(--sq-ink); color: var(--sq-paper);
	font-size: var(--sq-t-p3); white-space: nowrap;
	opacity: 0; pointer-events: none;
}
.sqp-rail__btn:hover .sqp-rail__tip, .sqp-rail__btn:focus-visible .sqp-rail__tip { opacity: 1; }

/* ─── Chapter navigation ─────────────────────────────────────────────────── */
.sqp-side { display: none; min-inline-size: 0; }
@media (min-width: 900px) { .sqp-side { display: block; } }
.sqp-toc {
	position: sticky;
	inset-block-start: var(--sqp-sticky);
	display: flex; flex-direction: column;
	max-block-size: calc(100vh - var(--sqp-sticky) - 40px);
	padding: 16px;
	border: 1px solid var(--sq-line); border-radius: 12px; background: var(--sq-sheet);
}
.sqp-toc__head { display: flex; align-items: center; gap: 8px; font-size: var(--sq-t-p3); font-weight: var(--sq-w-bold); letter-spacing: var(--sq-ls-eyebrow); text-transform: uppercase; color: var(--sq-muted); }
.sqp-toc__meter { block-size: 3px; margin-block: 12px 8px; border-radius: 99px; background: var(--sq-line); overflow: hidden; }
.sqp-toc__meterbar { display: block; block-size: 100%; inline-size: 0; background: var(--sq-signal); }
.sqp-toc__stat { margin: 0 0 10px; font-size: var(--sq-t-p3); color: var(--sq-muted); }
.sqp-toc__stat i { font-style: normal; opacity: 0.5; }

/* Scrolls internally when the chapter list is long — never clipped. */
.sqp-toc__list { margin: 0; padding: 0 2px 0 0; list-style: none; overflow-y: auto; overscroll-behavior: contain; }
.sqp-toc__ch { position: relative; }
.sqp-toc__link {
	display: block; padding: 7px 10px 7px 12px;
	border-inline-start: 2px solid transparent;
	font-size: var(--sq-t-p3); line-height: var(--sq-lh-eyebrow); color: var(--sq-muted); text-decoration: none;
}
.sqp-toc__link:hover { color: var(--sq-ink); }
.sqp-toc__link:focus-visible { outline: 2px solid var(--sq-signal); outline-offset: -2px; border-radius: 4px; }
.sqp-toc__ch.is-active > .sqp-toc__link { color: var(--sq-ink); font-weight: var(--sq-w-semibold); border-inline-start-color: var(--sq-signal); }
.sqp-toc__chev { position: absolute; inset-block-start: 6px; inset-inline-end: 2px; color: var(--sq-muted); display: none; }
/* Long chapter titles were running underneath the expand chevron. */
.sqp-toc__ch:has(.sqp-toc__sub) > .sqp-toc__link { padding-inline-end: 26px; }
.sqp-toc__ch:has(.sqp-toc__sub) > .sqp-toc__chev { display: block; }
@media (prefers-reduced-motion: no-preference) { .sqp-toc__chev { transition: transform 150ms ease; } }
.sqp-toc__ch.is-active > .sqp-toc__chev { transform: rotate(180deg); }

/* Only the active chapter reveals its steps, so ten links show instead of forty-five. */
.sqp-toc__sub { display: none; margin: 2px 0 6px; padding: 0 0 0 14px; list-style: none; }
.sqp-toc__ch.is-active > .sqp-toc__sub { display: block; }
.sqp-toc__sub a { display: block; padding: 5px 8px; font-size: var(--sq-t-p3); line-height: var(--sq-lh-h4); color: var(--sq-muted); text-decoration: none; border-inline-start: 1px solid var(--sq-line); }
.sqp-toc__sub a:hover { color: var(--sq-ink); }
.sqp-toc__sub a[aria-current="location"] { color: var(--sq-ink); font-weight: var(--sq-w-semibold); border-inline-start-color: var(--sq-signal); }
.sqp-toc__top {
	display: flex; align-items: center; gap: 7px; margin-block-start: 12px; padding-block-start: 12px;
	border: none; border-block-start: 1px solid var(--sq-line); background: none;
	color: var(--sq-muted); font-size: var(--sq-t-p3); font-family: inherit; cursor: pointer;
}
.sqp-toc__top:hover { color: var(--sq-ink); }

/* ─── Mobile chapter bar + drawer ────────────────────────────────────────── */
.sqp-tocbar { display: block; position: sticky; inset-block-start: 3px; z-index: 25; background: var(--sq-paper); }
@media (min-width: 900px) { .sqp-tocbar { display: none; } }
.sqp-tocbar__btn {
	inline-size: 100%; min-block-size: 46px;
	display: flex; align-items: center; gap: 9px;
	padding-inline: var(--sqp-pad);
	border: none; border-block: 1px solid var(--sq-line); background: var(--sq-sheet);
	color: var(--sq-ink); font-size: var(--sq-t-p3); font-weight: var(--sq-w-semibold); font-family: inherit; cursor: pointer;
}
.sqp-tocbar__pct { margin-inline-start: auto; font-weight: var(--sq-w-medium); color: var(--sq-muted); }
.sqp-drawer { position: fixed; inset: 0; z-index: 60; }
.sqp-drawer[hidden] { display: none; }
.sqp-drawer__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.42); }
.sqp-drawer__panel {
	position: absolute; inset: auto 0 0 0;
	max-block-size: 72vh; display: flex; flex-direction: column;
	border-start-start-radius: 16px; border-start-end-radius: 16px;
	background: var(--sq-paper); padding: 16px var(--sqp-pad) 24px;
}
.sqp-drawer__head { display: flex; align-items: center; justify-content: space-between; font-size: var(--sq-t-p3); font-weight: var(--sq-w-bold); letter-spacing: var(--sq-ls-eyebrow); text-transform: uppercase; color: var(--sq-muted); }
.sqp-drawer__close, .sqp-lightbox__close {
	display: inline-flex; align-items: center; gap: 6px;
	min-inline-size: 44px; min-block-size: 44px; justify-content: center;
	border: 1px solid var(--sq-line); border-radius: 10px; background: var(--sq-sheet);
	color: var(--sq-ink); font-family: inherit; font-size: var(--sq-t-p3); cursor: pointer;
}
.sqp-drawer__list { margin: 12px 0 0; padding: 0; list-style: none; overflow-y: auto; }
.sqp-drawer__list a { display: block; min-block-size: 44px; display: flex; align-items: center; padding: 8px 4px; border-block-end: 1px solid var(--sq-line); color: var(--sq-ink); font-size: var(--sq-t-p2); text-decoration: none; }

/* ─── Body typography ────────────────────────────────────────────────────── */
/* The article reading setting. P1 with a 1.75 leading -- 18px/31.5px at desktop,
   which is what this template measured before the cleanup and the one part of the
   old scale worth keeping. It is P1, not H4: a heading token on running prose is
   what produced a 20px body in the first place. */
.sqp-body { font-size: var(--sq-t-p1); line-height: 1.75; color: var(--sq-ink); }
.sqp-body > * + * { margin-block-start: 22px; }
.sqp-body p { margin: 0; max-inline-size: var(--sq-measure); }
.sqp-body a { color: var(--sq-ink); text-decoration: underline; text-underline-offset: 3px; }
.sqp-body a:hover { color: var(--sq-signal); }
.sqp-body :is(p, li, td, th, figcaption, blockquote, dd) a:not([class]) {
	color: var(--sq-signal-ink);
	text-decoration-color: color-mix(in srgb, var(--sq-signal-ink) 45%, transparent);
	text-decoration-thickness: 1px;
}
.sqp-body :is(p, li, td, th, figcaption, blockquote, dd) a:not([class]):hover {
	color: var(--sq-signal-ink);
	text-decoration-color: currentColor;
	text-decoration-thickness: 2px;
}
.sqp-body h2, .sqp-h2 { margin: 0; font-size: var(--sq-t-h2); line-height: var(--sq-lh-h3); letter-spacing: var(--sq-ls-h2); font-weight: var(--sq-w-semibold); }
.sqp-body > h2 { margin-block-start: var(--sqp-sec); padding-block-start: 26px; border-block-start: 1px solid var(--sq-line); }
.sqp-body h3 { margin: 0; font-size: var(--sq-t-h3); line-height: var(--sq-lh-ui); letter-spacing: var(--sq-ls-h3); font-weight: var(--sq-w-semibold); }
.sqp-body > h3 { margin-block-start: 40px; }
.sqp-body h4 { margin: 0; font-size: var(--sq-t-h4); font-weight: var(--sq-w-semibold); }
.sqp-body ul, .sqp-body ol { margin: 0; padding-inline-start: 1.3em; max-inline-size: var(--sq-measure); }
.sqp-body li + li { margin-block-start: 8px; }
.sqp-body code { font-family: var(--sq-font-mono); font-size: var(--sq-t-p3); background: var(--sq-soft); padding: 2px 5px; border-radius: 4px; }
.sqp-sep.wp-block-separator { border: none; border-block-start: 1px solid var(--sq-line); margin-block: 34px; opacity: 1; }

/* ─── Video ──────────────────────────────────────────────────────────────────
   A poster and a play button. The YouTube iframe is only inserted on click, so the
   page loads nothing from a third party until the reader asks for it. */
.sqp-video { margin: 0; }
.sqp-video__frame {
	display: block; position: relative; inline-size: 100%; padding: 0;
	aspect-ratio: 16 / 9; overflow: hidden; cursor: pointer;
	border: 1px solid var(--sq-line); border-radius: 12px; background: var(--sq-ink);
}
.sqp-video__frame:focus-visible { outline: 2px solid var(--sq-signal); outline-offset: 2px; }
/* The 4:3 thumbnail carries letterbox bars; `cover` in a 16:9 box crops exactly
   those off, so no extra zoom is needed. */
.sqp-video__poster { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.sqp-video__play {
	position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
	transform: translate(-50%, -50%);
	display: grid; place-items: center;
	inline-size: 64px; block-size: 64px; border-radius: 50%;
	background: var(--wp--preset--color--signal); color: var(--wp--preset--color--on-signal);
	box-shadow: 0 6px 24px rgb(0 0 0 / 0.35);
}
.sqp-video__play .sqp-i { inline-size: 26px; block-size: 26px; margin-inline-start: 3px; }
@media (prefers-reduced-motion: no-preference) {
	.sqp-video__play { transition: transform 160ms ease, background 160ms ease; }
	.sqp-video__frame:hover .sqp-video__play { transform: translate(-50%, -50%) scale(1.08); }
}
.sqp-video__frame:hover .sqp-video__play { background: var(--wp--preset--color--signal-ink); }
.sqp-video iframe { display: block; inline-size: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 12px; }
.sqp-body .sqp-video figcaption { margin-block-start: 10px; }

/* ─── Inline article cards ───────────────────────────────────────────────────
   A guide the article points at mid-flow, read live from the blog. */
.sqp-pcards { margin: 0; }
.sqp-pcards__title {
	margin: 0 0 12px; font-size: var(--sq-t-p3); font-weight: var(--sq-w-bold); letter-spacing: var(--sq-ls-eyebrow);
	text-transform: uppercase; color: var(--sq-muted); max-inline-size: none;
}
.sqp-pcards__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.sqp-body .sqp-pcards__list > li + li { margin-block-start: 0; }
.sqp-pcard {
	display: grid; grid-template-columns: 1fr;
	border: 1px solid var(--sq-line); border-radius: 12px; overflow: hidden; background: var(--sq-sheet);
}
@media (min-width: 600px) { .sqp-pcard { grid-template-columns: 220px minmax(0, 1fr); } }
.sqp-pcard__media { display: block; background: var(--sq-soft); }
.sqp-pcard__img { display: block; inline-size: 100%; block-size: 100%; min-block-size: 132px; object-fit: cover; }
.sqp-pcard__body { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; min-inline-size: 0; }
.sqp-body .sqp-pcard__kicker {
	margin: 0 !important; font-size: var(--sq-t-eyebrow); font-weight: var(--sq-w-bold); letter-spacing: var(--sq-ls-eyebrow);
	text-transform: uppercase; color: var(--sq-signal); max-inline-size: none;
}
.sqp-body .sqp-pcard__title { margin: 0 !important; font-size: var(--sq-t-h4) !important; line-height: var(--sq-lh-h4) !important; font-weight: var(--sq-w-semibold); }
.sqp-pcard__title a { color: inherit; text-decoration: none; }
.sqp-pcard__title a:hover { text-decoration: underline; }
.sqp-body .sqp-pcard__meta { margin: 0 !important; font-size: var(--sq-t-p3); color: var(--sq-muted); max-inline-size: none; }

/* ─── Wireframe mockups ──────────────────────────────────────────────────────
   The live articles illustrate features with CSS-drawn mockups. They are markup,
   not images, so they migrate as markup: every label the original carried, drawn
   as a small wireframe panel rather than pasted in as a screenshot. */
.sqp-mock {
	margin: 0; border: 1px solid var(--sq-line); border-radius: 12px;
	background: var(--sq-sheet); overflow: hidden; font-size: var(--sq-t-p3);
}
.sqp-mock__chrome {
	display: flex; align-items: center; gap: 8px; padding: 7px 10px;
	background: var(--sq-soft); border-block-end: 1px solid var(--sq-line);
}
.sqp-mock__dots { inline-size: 30px; block-size: 8px; border-radius: 99px; background: var(--sq-line); flex: none; }
.sqp-mock__url { font-size: var(--sq-t-p3); color: var(--sq-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sqp-mock__brand {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 8px 12px; border-block-end: 1px solid var(--sq-line); font-weight: var(--sq-w-semibold);
}
.sqp-mock__nav { display: flex; gap: 10px; font-weight: var(--sq-w-regular); font-size: var(--sq-t-p3); color: var(--sq-muted); }
.sqp-mock__head {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 9px 12px; border-block-end: 1px solid var(--sq-line);
}
.sqp-mock__title { font-size: var(--sq-t-p3); font-weight: var(--sq-w-bold); letter-spacing: var(--sq-ls-eyebrow); text-transform: uppercase; color: var(--sq-muted); }
.sqp-mock__badge {
	padding: 2px 8px; border-radius: 99px; font-size: var(--sq-t-eyebrow); font-weight: var(--sq-w-semibold);
	background: color-mix(in srgb, var(--sq-good) 14%, transparent); color: var(--sq-good);
}
.sqp-mock__body { display: grid; gap: 6px; padding: 12px; }
.sqp-body .sqp-mock p { margin: 0 !important; max-inline-size: none; font-size: var(--sq-t-p3); line-height: var(--sq-lh-eyebrow); }
.sqp-mock__q { font-weight: var(--sq-w-semibold); }
.sqp-mock__opt { padding: 6px 9px; border: 1px solid var(--sq-line); border-radius: 8px; color: var(--sq-muted); }
.sqp-mock__opt.is-on { border-color: var(--sq-ink); color: var(--sq-ink); font-weight: var(--sq-w-semibold); }
.sqp-mock__btn {
	padding: 7px 10px; border-radius: 8px; text-align: center; font-weight: var(--sq-w-semibold);
	background: var(--sq-ink); color: var(--sq-paper);
}
.sqp-mock__line { color: var(--sq-muted); }
.sqp-mock__row { display: flex; align-items: baseline; gap: 8px; }
.sqp-mock__k { flex: 1; min-inline-size: 0; }
.sqp-mock__v { font-weight: var(--sq-w-semibold); }
.sqp-mock__tag {
	padding: 1px 7px; border-radius: 99px; font-size: var(--sq-t-eyebrow); font-weight: var(--sq-w-bold); letter-spacing: var(--sq-ls-body);
	background: var(--sq-soft); color: var(--sq-muted);
}
.sqp-body .sqp-mock__foot {
	margin: 0; padding: 9px 12px; font-size: var(--sq-t-p3); font-weight: var(--sq-w-semibold);
	border-block-start: 1px solid var(--sq-line); max-inline-size: none;
}
.sqp-mock__foot--ok   { color: var(--sq-good);   background: color-mix(in srgb, var(--sq-good) 8%, transparent); }
.sqp-mock__foot--warn { color: var(--sq-signal-ink); background: color-mix(in srgb, var(--sq-signal) 9%, transparent); }
.sqp-mock__foot--bad  { color: var(--wp--preset--color--critical); background: color-mix(in srgb, var(--wp--preset--color--critical) 8%, transparent); }
/* Three mockups side by side, wrapping on narrow screens. */
.sqp-mocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }

/* ─── Catalogue strip ────────────────────────────────────────────────────────
   The live articles end with a Summary block cycling the plugin catalogue. This is
   a scrollable row rather than a carousel: everything stays reachable, and reachable
   by keyboard, without a script. */
.sqp-strip { margin: 0; }
.sqp-strip__title {
	margin: 0 0 12px; font-size: var(--sq-t-p3); font-weight: var(--sq-w-bold); letter-spacing: var(--sq-ls-eyebrow);
	text-transform: uppercase; color: var(--sq-muted); max-inline-size: none;
}
.sqp-strip__rail {
	list-style: none; margin: 0; padding: 0 0 10px;
	display: grid; grid-auto-flow: column; grid-auto-columns: 232px; gap: 12px;
	align-items: stretch;
	overflow-x: auto; overscroll-behavior-inline: contain;
	scroll-snap-type: x proximity;
}
.sqp-strip__rail:focus-visible { outline: 2px solid var(--sq-signal); outline-offset: 3px; border-radius: 10px; }
.sqp-body .sqp-strip__rail > li + li { margin-block-start: 0; }
.sqp-strip__item { scroll-snap-align: start; }
.sqp-strip__link {
	display: flex; flex-direction: column; gap: 8px; block-size: 100%;
	padding: 10px; border: 1px solid var(--sq-line); border-radius: 12px;
	background: var(--sq-sheet); color: var(--sq-ink); text-decoration: none;
}
/* The whole card is the link, so nothing inside it should be underlined; the body's
   prose-link rule would otherwise underline every line. */
.sqp-strip__link, .sqp-strip__link * { text-decoration: none !important; }
.sqp-strip__link:hover { border-color: var(--sq-ink); }
.sqp-strip__link:hover .sqp-strip__name { text-decoration: underline !important; }
.sqp-strip__link:focus-visible { outline: 2px solid var(--sq-signal); outline-offset: 2px; }
.sqp-strip__media { display: block; background: var(--sq-soft); border-radius: 8px; overflow: hidden; }
.sqp-strip__img { display: block; inline-size: 100%; block-size: 104px; object-fit: cover; }
.sqp-strip__name { font-size: var(--sq-t-p3); font-weight: var(--sq-w-semibold); line-height: var(--sq-lh-h4); }
.sqp-strip__price { font-size: var(--sq-t-p3); font-weight: var(--sq-w-semibold); color: var(--sq-ink); }
.sqp-strip__desc { font-size: var(--sq-t-p3); line-height: var(--sq-lh-eyebrow); color: var(--sq-muted); }
.sqp-strip__desc { margin-block-end: auto; }
.sqp-strip__more { margin: 4px 0 0; font-size: var(--sq-t-p3); }
.sqp-strip__more a { color: var(--sq-signal-ink); }

/* ─── Code blocks ─────────────────────────────────────────────────────────
   Every snippet sits in a framed block with a copy button. A long one starts
   collapsed, because a 371-line listing otherwise buries the rest of the article. */
.sqp-codeblock {
	margin: 0; border: 1px solid var(--sq-line); border-radius: 12px;
	background: var(--sq-ink); overflow: hidden; position: relative;
}
/* `.sqp-body figcaption` caps captions at 68ch; the toolbar is chrome, not a caption. */
.sqp-body .sqp-codeblock__bar, .sqp-codeblock__bar {
	display: flex; align-items: center; gap: 10px;
	padding: 9px 10px 9px 16px;
	background: color-mix(in srgb, var(--sq-paper) 8%, var(--sq-ink));
	border-block-end: 1px solid color-mix(in srgb, var(--sq-paper) 16%, transparent);
	margin: 0 !important; max-inline-size: none !important; inline-size: 100%;
}
.sqp-body .sqp-codeblock__label {
	font-family: var(--sq-font-mono);
	font-size: var(--sq-t-eyebrow); font-weight: var(--sq-w-bold); letter-spacing: var(--sq-ls-eyebrow); text-transform: uppercase;
	color: var(--sq-signal);
}
.sqp-body .sqp-codeblock__lines {
	font-size: var(--sq-t-p3); color: color-mix(in srgb, var(--sq-paper) 55%, transparent);
}
.sqp-codeblock__copy {
	margin-inline-start: auto;
	display: inline-flex; align-items: center; gap: 7px;
	min-block-size: 32px; padding-inline: 13px;
	border: 1px solid color-mix(in srgb, var(--sq-paper) 26%, transparent);
	border-radius: 8px; background: transparent; color: var(--sq-paper);
	font-family: inherit; font-size: var(--sq-t-p3); font-weight: var(--sq-w-semibold); cursor: pointer;
}
.sqp-codeblock__copy:hover { background: color-mix(in srgb, var(--sq-paper) 12%, transparent); border-color: var(--sq-paper); }
.sqp-codeblock__copy:focus-visible { outline: 2px solid var(--sq-signal); outline-offset: 2px; }
.sqp-codeblock__copy.is-done { border-color: var(--sq-good); color: var(--sq-good); }
.sqp-codeblock__copy .sqp-i { inline-size: 15px; block-size: 15px; }
@media (prefers-reduced-motion: no-preference) {
	.sqp-codeblock__copy { transition: background 160ms ease, border-color 160ms ease, color 160ms ease; }
}
.sqp-codeblock__scroll { overflow: auto; overscroll-behavior: contain; }
.sqp-codeblock__scroll:focus-visible { outline: 2px solid var(--sq-signal); outline-offset: -2px; }
/* Collapsed: about twelve lines, then a fade into the "show all" control. */
.sqp-codeblock.is-collapsed .sqp-codeblock__scroll { max-block-size: 260px; overflow-y: hidden; }
.sqp-codeblock.is-collapsed::after {
	content: ""; position: absolute; inset-block-end: 46px; inset-inline: 0; block-size: 80px;
	background: linear-gradient(transparent, var(--sq-ink)); pointer-events: none;
}
.sqp-codeblock__more {
	inline-size: 100%; min-block-size: 46px; padding: 0;
	border: 0; border-block-start: 1px solid color-mix(in srgb, var(--sq-paper) 16%, transparent);
	background: color-mix(in srgb, var(--sq-paper) 8%, var(--sq-ink));
	color: var(--sq-paper); font-family: inherit; font-size: var(--sq-t-p3); font-weight: var(--sq-w-semibold); cursor: pointer;
}
.sqp-codeblock__more:hover { background: color-mix(in srgb, var(--sq-paper) 14%, var(--sq-ink)); }
.sqp-codeblock__more:focus-visible { outline: 2px solid var(--sq-signal); outline-offset: -2px; }

.sqp-body .sqp-code {
	margin: 0; padding: 16px 18px;
	border: 0; border-radius: 0;
	background: var(--sq-ink); color: var(--sq-paper);
	overflow: visible; max-inline-size: none;
}
.sqp-body .sqp-code code {
	font-family: var(--sq-font-mono);
	font-size: var(--sq-t-p3); line-height: var(--sq-lh-body); white-space: pre; background: none; padding: 0; color: inherit;
}

/* ─── Figures: bounded, never viewport-dominating ────────────────────────── */
.sqp-figure { margin: 0; }
.sqp-figure__zoom, .sqp-gallery__item {
	display: block; inline-size: 100%; padding: 8px; cursor: zoom-in;
	border: 1px solid var(--sq-line); border-radius: 12px; background: var(--sq-soft);
}
.sqp-figure__zoom:focus-visible, .sqp-gallery__item:focus-visible { outline: 2px solid var(--sq-signal); outline-offset: 2px; }
.sqp-figure img {
	display: block; inline-size: 100%; block-size: auto;
	/* Interface screenshots are contained and capped well under 70vh. */
	max-block-size: min(480px, 62vh); object-fit: contain; border-radius: 6px;
}
.sqp-figure--lead img { max-block-size: min(420px, 56vh); }
/* A tall screenshot in a full-width frame leaves wide empty bands either side.
   Portrait figures get a frame the shape of their content instead. */
.sqp-figure--tall .sqp-figure__zoom { max-inline-size: 420px; margin-inline: auto; }
.sqp-figure--tall img { max-block-size: min(560px, 70vh); }
.sqp-figure figcaption, .sqp-body figcaption { margin-block-start: 10px; font-size: var(--sq-t-p3); line-height: var(--sq-lh-supporting); color: var(--sq-muted); max-inline-size: 68ch; }

.sqp-gallery { margin: 0; }
.sqp-gallery__label { margin: 0 0 12px; font-size: var(--sq-t-eyebrow); font-weight: var(--sq-w-bold); letter-spacing: var(--sq-ls-eyebrow); text-transform: uppercase; color: var(--sq-muted); }
/* `--n` is the item count, set inline, so a three-shot gallery is three across
   instead of two plus an orphan. */
.sqp-gallery__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 2), 1fr); gap: 14px; }
.sqp-gallery__grid:has(> li:only-child) { grid-template-columns: 1fr; }
.sqp-gallery__item img { display: block; inline-size: 100%; block-size: 230px; object-fit: contain; border-radius: 6px; }
.sqp-gallery__grid:has(> li:only-child) .sqp-gallery__item img { block-size: auto; max-block-size: 380px; }
.sqp-gallery__cap { display: block; margin-block-start: 10px; font-size: var(--sq-t-p3); line-height: var(--sq-lh-supporting); color: var(--sq-muted); }

/* ─── Feature grid ───────────────────────────────────────────────────────── */
.sqp-features { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 620px)  { .sqp-features { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .sqp-features { grid-template-columns: repeat(3, 1fr); } }
.sqp-feature { padding: 18px; border: 1px solid var(--sq-line); border-radius: 12px; background: var(--sq-sheet); }
.sqp-feature__icon { display: inline-grid; place-items: center; inline-size: 34px; block-size: 34px; margin-block-end: 12px; border-radius: 9px; background: var(--sq-soft); color: var(--sq-signal); }
.sqp-feature__title { margin: 0 0 6px !important; font-size: var(--sq-t-p2) !important; line-height: var(--sq-lh-h4); font-weight: var(--sq-w-semibold); }
.sqp-feature p { margin: 0; font-size: var(--sq-t-p3); line-height: var(--sq-lh-supporting); color: var(--sq-muted); }

/* ─── Statistic cards ────────────────────────────────────────────────────── */
/* Equal rows, and the source line sits on the bottom edge of every card, so three
   labels of different lengths still line up. */
.sqp-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; grid-auto-rows: 1fr; gap: 14px; }
@media (min-width: 620px) { .sqp-stats { grid-template-columns: repeat(var(--n, 3), 1fr); } }
.sqp-stat { padding: 18px; border: 1px solid var(--sq-line); border-radius: 12px; background: var(--sq-sheet); }
/* The body's `li + li` rule adds a top margin, which on a grid item eats into the
   stretched row height and left the cards 8px apart in size. Grid lists opt out. */
.sqp-body :is(.sqp-stats, .sqp-features, .sqp-glance__facts, .sqp-prod__facts, .sqp-gallery__grid, .sqp-prod__desc ul) > li + li { margin-block-start: 0; }
.sqp-stat { display: flex; flex-direction: column; }
.sqp-stat__value { margin: 0 0 8px; font-size: var(--sq-t-h2); line-height: var(--sq-lh-h1); font-weight: var(--sq-w-bold); letter-spacing: var(--sq-ls-h2); color: var(--sq-signal); }
.sqp-stat__label { margin: 0 0 16px; font-size: var(--sq-t-p3); line-height: var(--sq-lh-eyebrow); color: var(--sq-ink); }
.sqp-stat__src {
	margin-block-start: auto; padding-block-start: 12px;
	border-block-start: 1px solid var(--sq-line);
	font-size: var(--sq-t-eyebrow); color: var(--sq-muted);
}

/* ─── Callouts, takeaways, requirements ──────────────────────────────────── */
.sqp-note, .sqp-takeaways {
	margin: 0; padding: 18px 20px;
	border: 1px solid var(--sq-line); border-inline-start: 3px solid var(--sq-signal);
	border-radius: 10px; background: var(--sq-soft);
}
.sqp-note__title, .sqp-takeaways__title {
	display: flex; align-items: center; gap: 8px;
	margin: 0 0 10px; font-size: var(--sq-t-p3); font-weight: var(--sq-w-bold);
	letter-spacing: var(--sq-ls-eyebrow); text-transform: uppercase; color: var(--sq-signal);
}
.sqp-note ul, .sqp-takeaways ul { margin: 0; padding-inline-start: 1.2em; font-size: var(--sq-t-p2); line-height: var(--sq-lh-body); color: var(--sq-muted); }
.sqp-note p { font-size: var(--sq-t-p2); color: var(--sq-muted); }

/* ─── Step timeline ──────────────────────────────────────────────────────── */
.sqp-body .sqp-step__head {
	display: flex; align-items: center; gap: 14px;
	margin-block-start: 46px; padding-block-start: 0; border: none;
}
.sqp-step__num {
	flex: none; inline-size: 34px; block-size: 34px;
	display: grid; place-items: center; border-radius: 50%;
	background: var(--sq-ink); color: var(--sq-paper);
	font-size: var(--sq-t-p2); font-weight: var(--sq-w-bold); letter-spacing: var(--sq-ls-h4);
}
.sqp-step__title { min-inline-size: 0; }
/* A quiet progress line joining the steps. */
.sqp-body .sqp-step__head { position: relative; }
.sqp-step__num { position: relative; z-index: 1; }

/* ─── Tables ─────────────────────────────────────────────────────────────── */
.sqp-body .sqp-table { margin: 0; }
.sqp-table__scroll {
	overflow-x: auto; border: 1px solid var(--sq-line);
	border-radius: 12px; background: var(--sq-sheet);
	box-shadow: var(--wp--custom--shadow--sm);
}
.sqp-table__scroll:focus-visible { outline: 2px solid var(--sq-signal); outline-offset: 2px; }
.sqp-body .sqp-table table { inline-size: 100%; border-collapse: collapse; font-size: var(--sq-t-p2); line-height: var(--sq-lh-supporting); min-inline-size: 460px; }
/* `display: flex` here stopped the element being a caption box at all, so the
   browser dropped it into an anonymous cell below the header row. It has to stay
   `table-caption`; the icon is aligned inline instead. */
.sqp-body .sqp-table caption {
	caption-side: top; text-align: start;
	display: table-caption;
	padding: 14px 18px; margin: 0;
	font-size: var(--sq-t-eyebrow); font-weight: var(--sq-w-bold); letter-spacing: var(--sq-ls-eyebrow); text-transform: uppercase;
	color: var(--sq-signal); background: var(--sq-soft);
	border-block-end: 1px solid var(--sq-line);
}
.sqp-body .sqp-table caption .sqp-i { vertical-align: -0.28em; margin-inline-end: 8px; }
/* A caption can carry the longer description the source held for screen readers. */
.sqp-body .sqp-table caption .sqp-table__note {
	display: block; margin-block-start: 4px;
	font-size: var(--sq-t-eyebrow); font-weight: var(--sq-w-medium); letter-spacing: 0; text-transform: none;
	color: var(--sq-muted);
}
.sqp-body .sqp-table th, .sqp-body .sqp-table td { padding: 13px 18px; text-align: start; vertical-align: top; }
/* A cell can carry a list (a plan's feature set); it should read as one, not as a
   run-on sentence. */
.sqp-body .sqp-table td > ul { margin: 0; padding-inline-start: 1.1em; }
.sqp-body .sqp-table td > ul > li { margin: 0 0 4px; }
.sqp-body .sqp-table td > ul > li:last-child { margin-block-end: 0; }
/* A header qualifier such as "this plugin" reads as a sub-label, not as more of
   the column name. */
.sqp-body .sqp-table .sqp-th__note {
	display: block; margin-block-start: 3px;
	font-size: var(--sq-t-eyebrow); font-weight: var(--sq-w-medium); letter-spacing: var(--sq-ls-eyebrow); text-transform: uppercase;
	color: color-mix(in srgb, currentColor 62%, transparent);
}
/* Solid header, as the source article used — the strongest signal that a block of
   text is a reference table and not prose. */
.sqp-body .sqp-table thead th {
	font-weight: var(--sq-w-semibold); font-size: var(--sq-t-p3); letter-spacing: var(--sq-ls-body);
	color: var(--sq-paper); background: var(--sq-ink);
	border-block-end: 2px solid var(--sq-signal);
	position: sticky; inset-block-start: 0; z-index: 1;
}
.sqp-body .sqp-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--sq-soft) 60%, transparent); }
.sqp-body .sqp-table tbody tr + tr { border-block-start: 1px solid var(--sq-line); }
.sqp-body .sqp-table tbody tr:hover { background: color-mix(in srgb, var(--sq-signal) 7%, transparent); }
.sqp-body .sqp-table tbody th[scope="row"] {
	font-weight: var(--sq-w-semibold); color: var(--sq-ink);
	border-inline-start: 3px solid transparent;
	padding-inline-start: 15px;
}
.sqp-body .sqp-table tbody tr:hover th[scope="row"] { border-inline-start-color: var(--sq-signal); }
.sqp-body .sqp-table tbody td { color: var(--sq-muted); }
.sqp-body .sqp-table figcaption, .sqp-table--compare figcaption { margin-block-start: 10px; }
.sqp-table--compare figcaption { margin-block-end: 10px; }

/* ─── Product panel ──────────────────────────────────────────────────────── */
.sqp-product { margin: 0; padding: clamp(20px, 2.2vw, 26px); border: 1px solid var(--sq-line); border-radius: 14px; background: var(--sq-sheet); }
.sqp-product__head { display: flex; align-items: center; gap: 14px; margin-block-end: 14px; }
.sqp-product__icon { display: grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: 11px; background: var(--sq-ink); color: var(--sq-paper); }
.sqp-product__kicker { margin: 0; font-size: var(--sq-t-eyebrow); font-weight: var(--sq-w-bold); letter-spacing: var(--sq-ls-eyebrow); text-transform: uppercase; color: var(--sq-muted); }
.sqp-product__name { margin: 2px 0 0; font-size: var(--sq-t-h4); font-weight: var(--sq-w-semibold); letter-spacing: var(--sq-ls-h3); color: var(--sq-ink); }
.sqp-product__desc { margin: 0 0 16px; font-size: var(--sq-t-p2); line-height: var(--sq-lh-body); color: var(--sq-muted); }
.sqp-product__facts { margin: 0 0 18px; display: grid; grid-template-columns: 1fr; gap: 10px 24px; }
@media (min-width: 560px) { .sqp-product__facts { grid-template-columns: 1fr 1fr; } }
.sqp-product__facts dt { font-size: var(--sq-t-p3); font-weight: var(--sq-w-bold); letter-spacing: var(--sq-ls-eyebrow); text-transform: uppercase; color: var(--sq-muted); }
.sqp-product__facts dd { margin: 3px 0 0; font-size: var(--sq-t-p2); color: var(--sq-ink); }
.sqp-body .sqp-product__cta {
	display: inline-flex; align-items: center; min-block-size: 46px; padding-inline: 22px;
	border-radius: var(--wp--custom--radius--md); background: var(--sq-ink);
	color: var(--sq-paper); font-size: var(--sq-t-p2); font-weight: var(--sq-w-semibold); text-decoration: none;
}
.sqp-body .sqp-product__cta:hover { color: var(--sq-paper); opacity: 0.88; }
.sqp-product__disclosure { display: flex; align-items: flex-start; gap: 8px; margin: 16px 0 0; font-size: var(--sq-t-p3); line-height: var(--sq-lh-supporting); color: var(--sq-muted); }

/* ─── FAQ accordion ──────────────────────────────────────────────────────── */
.sqp-faq { display: grid; gap: 8px; }
.sqp-faq__item { border: 1px solid var(--sq-line); border-radius: 10px; background: var(--sq-sheet); }
.sqp-faq__item summary {
	display: flex; align-items: center; justify-content: space-between; gap: 14px;
	min-block-size: 52px; padding: 12px 16px; cursor: pointer;
	font-size: var(--sq-t-p2); font-weight: var(--sq-w-semibold); color: var(--sq-ink); list-style: none;
}
.sqp-faq__item summary::-webkit-details-marker { display: none; }
.sqp-faq__item summary:focus-visible { outline: 2px solid var(--sq-signal); outline-offset: -2px; border-radius: 10px; }
.sqp-faq__chev { flex: none; inline-size: 9px; block-size: 9px; border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); color: var(--sq-muted); }
@media (prefers-reduced-motion: no-preference) { .sqp-faq__chev { transition: transform 150ms ease; } }
.sqp-faq__item[open] .sqp-faq__chev { transform: rotate(-135deg) translate(-2px, -2px); }
.sqp-faq__body { padding: 0 16px 16px; font-size: var(--sq-t-p2); line-height: var(--sq-lh-body); color: var(--sq-muted); }
.sqp-faq__body p { margin: 0; max-inline-size: none; }
.sqp-faq__body p + p { margin-block-start: 12px; }

/* ─── Lightbox ───────────────────────────────────────────────────────────── */
.sqp-lightbox { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; }
.sqp-lightbox[hidden] { display: none; }
.sqp-lightbox__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.82); }
.sqp-lightbox__figure { position: relative; margin: 0; max-inline-size: min(1200px, 94vw); max-block-size: 92vh; display: flex; flex-direction: column; gap: 10px; }
.sqp-lightbox__figure img { max-inline-size: 100%; max-block-size: 80vh; object-fit: contain; border-radius: 8px; background: var(--sq-paper); }
/* The caption sits on the fixed dark scrim in both themes, so it takes the
   on-a-coloured-surface token rather than the theme's own foreground. */
.sqp-lightbox__figure figcaption { color: var(--wp--preset--color--on-signal); font-size: var(--sq-t-p3); }
.sqp-lightbox__close { position: absolute; inset-block-start: -52px; inset-inline-end: 0; padding-inline: 12px; }

/* ─── Sources, author, related ───────────────────────────────────────────── */
.sqp-sources, .sqp-author { margin-block-start: var(--sqp-sec); padding-block-start: 28px; border-block-start: 1px solid var(--sq-line); }
.sqp-sources__list { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.sqp-sources__list li { display: grid; gap: 2px; }
.sqp-sources__list a { display: inline-flex; align-items: center; gap: 6px; font-size: var(--sq-t-p2); font-weight: var(--sq-w-semibold); color: var(--sq-ink); }
.sqp-sources__pub { font-size: var(--sq-t-p3); color: var(--sq-muted); }
.sqp-sources__note { font-size: var(--sq-t-p3); color: var(--sq-muted); }
.sqp-sources__meta { margin: 20px 0 0; font-size: var(--sq-t-p3); color: var(--sq-muted); }

.sqp-author { display: flex; gap: 16px; align-items: flex-start; }
.sqp-author__name { margin: 0; font-size: var(--sq-t-p1); font-weight: var(--sq-w-semibold); }
.sqp-author__role { margin: 2px 0 0; font-size: var(--sq-t-p3); color: var(--sq-muted); }
.sqp-author__bio { margin: 10px 0 0; font-size: var(--sq-t-p2); line-height: var(--sq-lh-body); color: var(--sq-muted); max-inline-size: 60ch; }
.sqp-author__links { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 16px; font-size: var(--sq-t-p3); }
.sqp-author__links a { color: var(--sq-ink); }

.sqp-related { padding-block: var(--sqp-sec) 0; border-block-start: 1px solid var(--sq-line); }
.sqp-related .sqp-h2 { margin-block-end: 22px; }
.sqb-grid--related { grid-auto-rows: 1fr; }
.sqb-grid--related .sqb-article__title { font-size: var(--sq-t-p2); }
.sqb-grid--related .sqb-article__excerpt { display: none; }
.sqb-grid--related .sqb-article__copy { padding: 16px; }
@media (min-width: 700px) { .sqb-grid--related { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ─── Narrow viewports ───────────────────────────────────────────────────── */
@media (max-width: 899.98px) {
	.sqp-mast__visual { order: 2; }
	.sqp-mast__copy { order: 1; }
	.sqp-mast__img { max-block-size: 260px; }
	.sqp-gallery__grid { grid-template-columns: 1fr; }
	.sqp-gallery__item img { block-size: auto; max-block-size: 300px; }
	.sqp-author { flex-direction: column; }
}
@media (max-width: 559.98px) {
	.sqp-body .sqp-table table { min-inline-size: 380px; }
	.sqp-stat__value { font-size: var(--sq-t-h3); }
}

/* ─── Section index eyebrow (approved reference) ──────────────────────────── */
.sqp-body .sqp-index {
	display: flex; align-items: center; gap: 8px;
	margin: 0 0 6px; font-size: var(--sq-t-eyebrow); font-weight: var(--sq-w-bold);
	letter-spacing: var(--sq-ls-eyebrow); text-transform: uppercase; color: var(--sq-signal);
	max-inline-size: none;
}
.sqp-index__dot { opacity: 0.6; }
/* The eyebrow belongs to the heading beneath it, so the heading loses its own rule. */
.sqp-body > .sqp-index + h2 { margin-block-start: 0; padding-block-start: 0; border-block-start: none; }
.sqp-body > .sqp-index { margin-block-start: var(--sqp-sec); padding-block-start: 30px; border-block-start: 1px solid var(--sq-line); }
/* Some articles carry their own group labels inside a walkthrough ("BEFORE YOU
   START"). They are eyebrows too, but they are not sections, so no number and no
   section rule above them. */
.sqp-body > .sqp-index--plain { margin-block-start: 30px; padding-block-start: 0; border-block-start: none; color: var(--sq-muted); }
.sqp-body > .sqp-index--plain + :is(h2, h3, h4) { margin-block-start: 0; padding-block-start: 0; border-block-start: none; }

/* ─── Feature explorer ────────────────────────────────────────────────────
   Replaces the five tall cards. All five explanations stay in the delivered
   HTML — the panels are only hidden, never fetched. */
/* The tab row fits as many even columns as the width allows and wraps the rest,
   so an explorer works with two options or with six. */
.sqf { margin: 0; }
.sqf__tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 7px; margin-block-end: 14px; }
.sqf__tab {
	display: flex; align-items: center; justify-content: center; gap: 7px;
	min-block-size: 44px; padding-inline: 10px;
	border: 1px solid var(--sq-line); border-radius: 10px;
	background: var(--sq-sheet); color: var(--sq-muted);
	font-family: inherit; font-size: var(--sq-t-p3); font-weight: var(--sq-w-semibold); cursor: pointer;
	transition: color var(--wp--custom--transition--fast), border-color var(--wp--custom--transition--fast), background var(--wp--custom--transition--fast);
}
.sqf__tab span { text-align: center; line-height: var(--sq-lh-ui); }
.sqf__tab:hover { color: var(--sq-ink); border-color: var(--sq-ink); }
.sqf__tab[aria-selected="true"] { background: var(--sq-ink); border-color: var(--sq-ink); color: var(--sq-paper); font-weight: var(--sq-w-semibold); }
.sqf__tab .sqp-i { inline-size: 16px; block-size: 16px; }

.sqf__stages { border: 1px solid var(--sq-line); border-radius: 14px; overflow: hidden; background: var(--sq-sheet); }
/* Height follows the content: no fixed stage height, so nothing is cut off. */
/* The media column fills the row and centres its image, so a long explanation never
   leaves a band of empty card under the screenshot. */
.sqf__stage { display: grid; grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 720px) { .sqf__stage:has(.sqf__media) { grid-template-columns: minmax(0, 66fr) minmax(0, 34fr); } }
/* Not every explorer has a screenshot per option. Without one the copy takes the
   whole panel rather than leaving an empty media column beside it. */
.sqf__stage:not(:has(.sqf__media)) .sqf__copy { padding: 22px 24px; }
.sqf__stage[hidden] { display: none; }
.sqf__media { padding: 14px; background: var(--sq-soft); display: grid; place-items: center; block-size: 100%; }
@media (min-width: 720px) { .sqf__media { border-inline-end: 1px solid var(--sq-line); } }
.sqf__media img {
	inline-size: 100%; block-size: auto;
	max-block-size: 340px; object-fit: contain;
	border-radius: 8px; display: block;
}
.sqf__copy { display: flex; flex-direction: column; gap: 8px; padding: 20px; min-inline-size: 0; }
.sqf__count { margin: 0; font-size: var(--sq-t-eyebrow); font-weight: var(--sq-w-bold); letter-spacing: var(--sq-ls-eyebrow); color: var(--sq-signal); }
.sqf__title { margin: 0 !important; font-size: var(--sq-t-h4) !important; line-height: var(--sq-lh-ui) !important; font-weight: var(--sq-w-semibold); letter-spacing: var(--sq-ls-h4); }
.sqf__body { margin: 0 !important; font-size: var(--sq-t-p3); line-height: var(--sq-lh-body); color: var(--sq-muted); max-inline-size: none !important; }
.sqf__proof {
	display: flex; align-items: flex-start; gap: 8px;
	margin: 4px 0 0 !important; padding-block-start: 10px;
	border-block-start: 1px solid var(--sq-line);
	font-size: var(--sq-t-p3); line-height: var(--sq-lh-eyebrow); color: var(--sq-good); max-inline-size: none !important;
}
.sqf__proof .sqp-i { color: var(--sq-good); inline-size: 16px; block-size: 16px; margin-block-start: 1px; }

/* ─── WooCommerce product listing ─────────────────────────────────────────
   Every value is read from the WC_Product at render time. */
.sqp-prods { margin: 0; }
.sqp-body .sqp-prods__title, .sqp-prods__title {
	margin: 0 0 14px !important; padding-block-start: 0 !important; border: none !important;
	font-size: var(--sq-t-p3) !important; line-height: var(--sq-lh-h4) !important; font-weight: var(--sq-w-bold);
	letter-spacing: var(--sq-ls-eyebrow); text-transform: uppercase; color: var(--sq-muted);
}
/* Two products side by side rarely have descriptions of the same length. The cards
   share a row height and the price and buttons sit on the same line as each other. */
.sqp-prods__list { display: grid; gap: 16px; align-items: stretch; }
.sqp-prods--single .sqp-prods__list { align-items: start; }
/* Products always stack, one under the next. Side by side forced two descriptions of
   very different lengths into equal columns and left a tall empty block under the
   shorter one. Stacked, each product runs image-left and details-right, so a card is
   only as tall as its own content. */
.sqp-prods__list { grid-template-columns: 1fr; }
@media (min-width: 640px) {
	.sqp-prods--two .sqp-prod, .sqp-prods--grid .sqp-prod {
		display: grid; grid-template-columns: 260px minmax(0, 1fr); align-items: stretch;
	}
	.sqp-prods--two .sqp-prod__media, .sqp-prods--grid .sqp-prod__media {
		border-block-end: none; border-inline-end: 1px solid var(--sq-line);
	}
	.sqp-prods--two .sqp-prod__img, .sqp-prods--grid .sqp-prod__img { max-block-size: 220px; }
}

/* Top-aligned: the image panel is only as tall as its image, so a long product
   description never leaves a tall empty block beside it. */
/* Image above, details below — one column at every width. A side-by-side split left
   a tall empty panel beside a long description. */
.sqp-prod {
	display: flex; flex-direction: column;
	border: 1px solid var(--sq-line); border-radius: 14px; background: var(--sq-sheet); overflow: hidden;
}
.sqp-prod__media { padding: 18px; background: var(--sq-soft); border-block-end: 1px solid var(--sq-line); display: grid; place-items: center; }
.sqp-prod__img { inline-size: 100%; block-size: auto; max-block-size: 300px; object-fit: contain; border-radius: 8px; display: block; }
.sqp-prod__body { display: flex; flex-direction: column; gap: 12px; padding: clamp(18px, 2.2vw, 26px); min-inline-size: 0; }
.sqp-prod__kicker { margin: 0; font-size: var(--sq-t-eyebrow); font-weight: var(--sq-w-bold); letter-spacing: var(--sq-ls-eyebrow); text-transform: uppercase; color: var(--sq-muted); }
.sqp-prod__name { margin: 0 !important; font-size: var(--sq-t-h4) !important; line-height: var(--sq-lh-ui) !important; font-weight: var(--sq-w-semibold); letter-spacing: var(--sq-ls-h3); }
.sqp-body .sqp-prod__name a { color: var(--sq-ink); text-decoration: none; }
.sqp-body .sqp-prod__name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.sqp-prod__desc { margin: 0 !important; font-size: var(--sq-t-p2); line-height: var(--sq-lh-supporting); color: var(--sq-muted); max-inline-size: none !important; }
.sqp-prod__desc p { margin: 0 !important; max-inline-size: none !important; }
.sqp-prod__desc p + p { margin-block-start: 10px !important; }
.sqp-prod__desc .sqp-prod__lead { font-size: var(--sq-t-p2); font-weight: var(--sq-w-semibold); color: var(--sq-ink); }
.sqp-prod__desc .sqp-prod__intro { margin-block-start: 12px !important; color: var(--sq-ink); }
.sqp-prod__desc ul { list-style: none; margin: 12px 0 0 !important; padding: 0 !important; display: grid; gap: 8px; max-inline-size: none !important; }
.sqp-prod__desc li { display: flex; align-items: flex-start; gap: 9px; margin: 0 !important; font-size: var(--sq-t-p2); line-height: var(--sq-lh-eyebrow); color: var(--sq-ink); }
.sqp-prod__desc li .sqp-i { flex: none; inline-size: 16px; block-size: 16px; margin-block-start: 2px; color: var(--sq-good); }
.sqp-prod__facts { list-style: none; margin: 2px 0 0 !important; padding: 0 !important; display: grid; gap: 7px; max-inline-size: none !important; }
.sqp-prod__facts li { display: flex; align-items: flex-start; gap: 8px; margin: 0 !important; font-size: var(--sq-t-p3); line-height: var(--sq-lh-eyebrow); color: var(--sq-ink); }
.sqp-prod__facts .sqp-i { color: var(--sq-signal); inline-size: 16px; block-size: 16px; margin-block-start: 1px; }
.sqp-prod__price { margin: 4px 0 0 !important; font-size: var(--sq-t-h3); font-weight: var(--sq-w-bold); letter-spacing: var(--sq-ls-h3); color: var(--sq-ink); }
.sqp-prod__price .woocommerce-Price-amount { font-size: inherit; }
.sqp-prod__from { font-size: var(--sq-t-p3); font-weight: var(--sq-w-medium); color: var(--sq-muted); }
.sqp-prod__rating { margin: 0 !important; font-size: var(--sq-t-p3); color: var(--sq-muted); }
.sqp-prod__actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 0 !important; }
/* The site's primary button everywhere else — hero search, footer newsletter,
   WooCommerce checkout — is `brand` filled with `accent-contrast` text. This is that
   button. Hover deepens the fill and lifts, the way the site's cards do; the label
   stays white, because red-on-red made it vanish. */
.sqp-body .sqp-prod__cta {
	display: inline-flex; align-items: center; min-block-size: 46px; padding-inline: 24px;
	border: 1px solid transparent; border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--accent-contrast);
	font-size: var(--sq-t-p2); font-weight: var(--sq-w-bold); text-decoration: none;
}
@media (prefers-reduced-motion: no-preference) {
	.sqp-body .sqp-prod__cta, .sqp-body .sqp-prod__alt { transition: background 200ms ease, border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease; }
}
.sqp-body .sqp-prod__cta:hover, .sqp-body .sqp-prod__cta:focus-visible {
	background: var(--wp--preset--color--signal-ink);
	color: var(--wp--preset--color--accent-contrast);
	transform: translateY(-1px);
	box-shadow: var(--wp--custom--shadow--sm);
}
.sqp-body .sqp-prod__cta:active { transform: translateY(0); box-shadow: none; }
.sqp-body .sqp-prod__alt {
	display: inline-flex; align-items: center; min-block-size: 46px; padding-inline: 18px;
	border: 1px solid var(--sq-line); border-radius: var(--wp--custom--radius--md);
	background: transparent; color: var(--sq-ink); font-size: var(--sq-t-p2); font-weight: var(--sq-w-semibold); text-decoration: none;
}
/* The secondary action follows the site's card hover: the brand outline, a small
   lift, no fill. */
.sqp-body .sqp-prod__alt:hover, .sqp-body .sqp-prod__alt:focus-visible {
	border-color: var(--wp--preset--color--brand);
	color: var(--sq-signal-ink);
	transform: translateY(-1px);
	box-shadow: var(--wp--custom--shadow--sm);
}
.sqp-body .sqp-prod__alt:active { transform: translateY(0); box-shadow: none; }
.sqp-prod__disclosure { display: flex; align-items: flex-start; gap: 8px; margin: 6px 0 0 !important; font-size: var(--sq-t-p3); line-height: var(--sq-lh-supporting); color: var(--sq-muted); max-inline-size: none !important; }

/* ─── Masthead hero caption strip (approved reference) ────────────────────── */
.sqp-mast__note {
	margin: 0; padding: 10px 14px;
	border-block-start: 1px solid var(--sq-line);
	font-size: var(--sq-t-eyebrow); color: var(--sq-muted); text-align: start;
}

/* ─── Density: the approved spacing scale ────────────────────────────────── */
.sqp-page { --sqp-sec: clamp(40px, 4.4vw, 64px); }
.sqp-body { --flow: 20px; }
.sqp-body > * + * { margin-block-start: var(--flow); }
.sqp-body > h2 { margin-block-start: var(--sqp-sec); padding-block-start: 30px; }
.sqp-body > h3 { margin-block-start: 30px; }
.sqp-body > :is(h2, h3, .sqp-index) + * { margin-block-start: 14px; }
.sqp-body > :is(figure, .sqp-codeblock, .sqp-video, .sqf, .sqp-prods, .sqp-strip, .sqp-pcards, .sqp-mocks, .sqp-table, .sqp-gallery, .sqp-note, .sqp-takeaways, .sqp-stats, .sqp-faq, .sqp-code) { margin-block-start: 26px; }
.sqp-body > :is(figure, .sqp-codeblock, .sqp-video, .sqf, .sqp-prods, .sqp-strip, .sqp-pcards, .sqp-mocks, .sqp-table, .sqp-gallery, .sqp-note, .sqp-takeaways, .sqp-stats, .sqp-faq, .sqp-code) + :is(p, ul, ol) { margin-block-start: 26px; }
.sqp-body .sqp-step__head { margin-block-start: 34px; }

@media (max-width: 899.98px) {
	.sqp-page { --sqp-sec: clamp(36px, 6vw, 52px); }
}

/* ─── Feature explorer on small screens ──────────────────────────────────── */
@media (max-width: 719.98px) {
	/* Tabs wrap to two columns; the fifth spans the row. */
	.sqf__tabs { grid-template-columns: 1fr 1fr; }
	/* An odd number of tabs leaves the last one alone on its row: let it span. */
	.sqf__tab:last-child:nth-child(odd) { grid-column: 1 / -1; }
	.sqf__media img { max-block-size: 260px; }
	.sqf__copy { padding: 16px; }
}

/* Template previews are portrait website mockups, and the live storefront shows them at
   3:4 with a square crop on mobile. The shared card ratio is landscape, which is right for
   a plugin screenshot and wrong for a template — it cuts the page off just below the fold.
   Scoped to the type so nothing else changes. */

.sq-ref-template-grid img{height:auto;aspect-ratio:3/4;border-radius:10px 10px 0 0}
@media(max-width:700px){
  
  .sq-ref-template-grid img{aspect-ratio:1/1}
}

/* ══════════════════════════════════════════════════════════════════════════
   Dark mode for the catalogue shell.

   The sgp-* component layer predates the --sq-* alias system and reads the raw
   theme.json presets directly — surface-raised for a card, surface for its media
   well, border for every hairline. Those presets are the LIGHT palette and have no
   dark counterpart, so under data-sq-theme="dark" the text inverted (it follows
   --sq-ink) while every background stayed light. /browse/ ended up with near-white
   text on white cards: the hero H1 measured 1.11:1 and the card footer — which
   carries the price and the affiliate disclosure — 1.10:1.

   Rather than rewrite 63 rules across a file another agent is actively editing,
   the presets are re-pointed at the aliases that already carry the dark remap.
   Custom properties inherit, so every existing rule picks up the dark value with
   no change to the rule itself. This is the same --sq-* system the homepage uses;
   it is not a second dark mode.

   Scoped away from .home because the sq-ref-* homepage layer is already tokenised
   and correct.
   ══════════════════════════════════════════════════════════════════════════ */
html[data-sq-theme="dark"] body:not(.home){
  --wp--preset--color--canvas:var(--sq-paper);
  --wp--preset--color--surface:var(--sq-soft);
  --wp--preset--color--surface-raised:var(--sq-sheet);
  --wp--preset--color--border:var(--sq-line);
  --wp--preset--color--border-strong:var(--wp--preset--color--dark-muted);
  --wp--preset--color--text:var(--sq-ink);
  --wp--preset--color--text-muted:var(--sq-muted);
  --wp--preset--color--text-subtle:var(--sq-muted);
  --wp--preset--color--accent:var(--sq-ink);
  --wp--preset--color--accent-contrast:var(--sq-paper);
  --wp--preset--color--neutral-badge:var(--sq-badge);
  /* Verification state colours already have dark counterparts; point the presets
     at them so badges rendered through the sgp-* layer match the sq-ref-* ones. */
  --wp--preset--color--verified:var(--wp--preset--color--dark-verified);
  --wp--preset--color--caution:var(--wp--preset--color--dark-caution);
  --wp--preset--color--critical:var(--wp--preset--color--dark-critical);
  --wp--preset--color--stale:var(--wp--preset--color--dark-stale);

  /*
   * The tints those four sit on.
   *
   * The foregrounds above were remapped for dark; their `-bg` partners were not, so every
   * badge in the theme — the verified pill on a product card, the caution row on a product
   * page, the stale marker, the critical warning, thirty usages in all — painted a light
   * dark-mode foreground onto the pale tint meant for a white page. Measured 1.57:1 on the
   * verified badge against a 4.5:1 requirement: legible only because you already knew what
   * it said.
   *
   * Rebuilt from the foreground itself against the dark surface rather than hand-picked, so
   * the hue relationship survives, one rule covers every badge family at once, and a fifth
   * state added later inherits the same treatment instead of needing its own override.
   */
  --wp--preset--color--verified-bg:color-mix(in srgb,var(--wp--preset--color--dark-verified) 14%,var(--sq-sheet));
  --wp--preset--color--caution-bg:color-mix(in srgb,var(--wp--preset--color--dark-caution) 14%,var(--sq-sheet));
  --wp--preset--color--critical-bg:color-mix(in srgb,var(--wp--preset--color--dark-critical) 14%,var(--sq-sheet));
  --wp--preset--color--stale-bg:color-mix(in srgb,var(--wp--preset--color--dark-stale) 14%,var(--sq-sheet));
}

/* Breadcrumb and filter-clear links measured 16-18px tall, under the WCAG 2.5.8 minimum
   of 24x24. The negative margin cancels the padding so the hit area grows without anything
   moving. Deliberately limited to these: links sitting inside a sentence are exempt under
   2.5.8, and the WooCommerce account controls are core markup, not ours. */
.sgp-filters__clear{display:inline-flex;align-items:center;min-block-size:24px;padding-block:4px;margin-block:-4px}

/* The footer wordmark was invisible on every page: a later `.sq-logo{color:var(--sq-ink)
   !important}` outranks `.sq-footer .sq-logo`, so dark text sat on the dark footer at
   exactly 1.00:1. Re-assert the footer's own colour, which follows the theme in both
   modes because accent-contrast is remapped alongside everything else. */
.sq-footer .sq-logo,
.sq-footer .sq-logo span{color:var(--wp--preset--color--accent-contrast)!important}

/* The footer is a deliberately inverted band — dark against a light page. Remapping the
   presets flipped it the other way in dark mode, giving a light slab at the bottom of a
   dark page: readable, but it reads as a mistake rather than a decision. Pin it back to a
   dark band, lifted one step off the page so the edge still reads as intentional. */
html[data-sq-theme="dark"] body:not(.home) .sq-footer{
  --wp--preset--color--text:var(--wp--preset--color--dark-surface);
  --wp--preset--color--accent-contrast:var(--sq-ink);
  --wp--preset--color--border:var(--wp--preset--color--dark-border);
}

/* ── Production product detail v2 ──────────────────────────────────────────
   Isolated namespace: the retired .sgp-product layers cannot affect this UI. */

/* ══════════════════════════════════════════════════════════════════════════
   MARKETPLACE PRODUCT CARD

   One shell for every product type. The card reads as one system because the
   border, radius, spacing, type scale and footer are identical everywhere; what
   changes per type is only how the picture is fitted, because a plugin
   screenshot and a website mockup are not the same kind of image.

   Every optional row — rating, badge, verification flag, creator — is emitted by
   PHP only when real data exists, so there is nothing here reserving blank space
   for metadata this catalogue does not have.
   ══════════════════════════════════════════════════════════════════════════ */
.sq-pc{
  position:relative;display:flex;flex-direction:column;block-size:100%;
  background:var(--sq-sheet);border:1px solid var(--sq-line);border-radius:12px;
  overflow:hidden;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.sq-pc:hover,.sq-pc:focus-within{
  border-color:var(--sq-ink);box-shadow:0 6px 22px rgb(0 0 0 / .07);transform:translateY(-2px);
}

/* ── Media ───────────────────────────────────────────────────────────────── */
.sq-pc__media{
  position:relative;display:grid;place-items:center;overflow:hidden;
  background:var(--sq-soft);border-block-end:1px solid var(--sq-line);
}
.sq-pc__img{inline-size:100%;block-size:100%;display:block;transition:transform .25s ease}
.sq-pc:hover .sq-pc__img{transform:scale(1.015)}
.sq-pc__img--none{background:var(--sq-soft)}

/* Plugin-family artwork: screenshots, dashboards, browser UI. Cropping these
   removes the thing being sold, so the whole image stays visible on a neutral
   ground with breathing room. Small source images are never upscaled past their
   own size, so an old low-resolution asset stays sharp instead of going soft. */
.sq-pc--media-contain .sq-pc__media{aspect-ratio:16/10;padding:14px}
.sq-pc--media-contain .sq-pc__img{object-fit:contain;max-block-size:100%;max-inline-size:100%;inline-size:auto;block-size:auto}

/* Template and theme mockups: the design is the product, and the hero is what
   sells it, so the frame fills from the top rather than centre-cropping the page
   in half. */
.sq-pc--media-cover-top .sq-pc__media{aspect-ratio:4/3}
.sq-pc--media-cover-top .sq-pc__img{object-fit:cover;object-position:top center}

.sq-pc--media-cover .sq-pc__media{aspect-ratio:16/10}
.sq-pc--media-cover .sq-pc__img{object-fit:cover;object-position:center}

/* ── Flags on the media ──────────────────────────────────────────────────── */
.sq-pc__flags{position:absolute;inset-block-start:10px;inset-inline-start:10px;display:flex;flex-wrap:wrap;gap:6px;z-index:2}
.sq-pc__flag,.sq-pc__badge{
  display:inline-flex;align-items:center;gap:5px;min-block-size:24px;padding:0 9px;
  border-radius:999px;font-size: var(--sq-t-eyebrow);font-weight: var(--sq-w-semibold);line-height: var(--sq-lh-h1);letter-spacing: var(--sq-ls-h4);
  background:var(--sq-sheet);border:1px solid var(--sq-line);color:var(--sq-ink);
}
.sq-pc__flag--verified{color:var(--sq-good);border-color:color-mix(in srgb,var(--sq-good) 40%,transparent)}
.sq-pc__flag--tested,.sq-pc__flag--partially-compatible,.sq-pc__flag--needs-configuration{color:var(--sq-caution);border-color:color-mix(in srgb,var(--sq-caution) 40%,transparent)}
.sq-pc__flag--expired,.sq-pc__flag--not-recommended{color:var(--sq-critical);border-color:color-mix(in srgb,var(--sq-critical) 40%,transparent)}
.sq-pc__flag-date{color:var(--sq-muted);font-weight: var(--sq-w-medium)}
.sq-pc__badge--new{color:var(--sq-stale)}
/* The bright brand orange is a 3.08:1 foreground on the card — the same measurement that
   already sent .sqpp-buy and the discount badge to the ink variant. --sq-signal-ink is the
   darker orange in light mode and remaps back to the bright one in dark, so one token
   covers both grounds. */
.sq-pc__badge--best-seller,.sq-pc__badge--featured{color:var(--sq-signal-ink)}

/* ── Save ────────────────────────────────────────────────────────────────── */
.sq-pc__save{
  position:absolute;inset-block-start:10px;inset-inline-end:10px;z-index:3;
  inline-size:34px;block-size:34px;display:grid;place-items:center;padding:0;cursor:pointer;
  border:1px solid var(--sq-line);border-radius:999px;background:var(--sq-sheet);
  transition:border-color .18s ease,background .18s ease,transform .18s ease;
}
.sq-pc__save:hover{border-color:var(--sq-ink);transform:scale(1.06)}
.sq-pc__save-icon{
  inline-size:16px;block-size:16px;display:block;background:var(--sq-muted);
  transition:background .18s ease;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E") center/contain no-repeat;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.sq-pc__save:hover .sq-pc__save-icon{background:var(--sq-ink)}
.sq-pc__save[aria-pressed="true"]{border-color:var(--sq-signal)}
.sq-pc__save[aria-pressed="true"] .sq-pc__save-icon{
  background:var(--sq-signal);
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E");
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E");
}

/* ── Body ────────────────────────────────────────────────────────────────── */
.sq-pc__body{display:flex;flex-direction:column;gap:4px;padding:14px 15px 15px;flex:1}
/* The brand coral is a 3.08:1 pair on white — fine for a 48px headline, not for
   10px uppercase. `signal-ink` is the same hue and saturation taken dark enough to
   clear 4.5:1, so the label keeps the brand colour and stays readable. In dark mode
   the alias points back at the dark signal, which already passes at 6.6:1. */
.sq-pc__type{
  margin:0;font-size: var(--sq-t-p3);font-weight: var(--sq-w-bold);letter-spacing: var(--sq-ls-eyebrow);text-transform:uppercase;
  color:var(--sq-signal-ink);
}
.sq-pc__title{margin:2px 0 0!important;font-size: var(--sq-t-p2) !important;line-height: var(--sq-lh-h4) !important;font-weight: var(--sq-w-semibold) !important;letter-spacing: var(--sq-ls-h3) !important}
.sq-pc__title a{
  color:var(--sq-ink);text-decoration:none;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* The link is stretched over the whole card, so the target is the card and the
   save control — which sits higher on z-index — stays independently clickable. */
.sq-pc__title a::after{content:"";position:absolute;inset:0;z-index:1}
.sq-pc__meta{margin:0;font-size: var(--sq-t-p3);color:var(--sq-muted);display:flex;flex-wrap:wrap;align-items:center;gap:5px}
.sq-pc__sep{opacity:.55}

.sq-pc__foot{
  margin-block-start:auto;padding-block-start:11px;display:flex;align-items:baseline;
  justify-content:space-between;gap:10px;
}
.sq-pc__price{margin:0;display:flex;align-items:baseline;gap:6px;font-size: var(--sq-t-p2);font-weight: var(--sq-w-semibold);color:var(--sq-ink)}
.sq-pc__price--deferred .sq-pc__price-now{font-size: var(--sq-t-p3);font-weight: var(--sq-w-medium);color:var(--sq-muted)}
.sq-pc__price-was{font-size: var(--sq-t-p3);font-weight: var(--sq-w-medium);color:var(--sq-muted);text-decoration:line-through}
.sq-pc__rating{margin:0;display:flex;align-items:center;gap:4px;font-size: var(--sq-t-p3);color:var(--sq-muted)}
.sq-pc__star{color:var(--sq-caution)}
.sq-pc__rating-value{font-weight: var(--sq-w-semibold);color:var(--sq-ink)}

/* ── Creator link ────────────────────────────────────────────────────────── */
/* The card's title anchor is stretched across the whole card at z-index 1, so any
   other control inside the card has to lift itself above that layer or the card
   link eats the click. `position:relative` is what creates the stacking context —
   z-index alone on a static element does nothing. */
.sq-pc__creator--link{
  position:relative;z-index:2;color:var(--sq-muted);text-decoration:none;
  border-block-end:1px solid transparent;transition:color .15s ease,border-color .15s ease;
}
.sq-pc__creator--link:hover{color:var(--sq-ink);border-block-end-color:var(--sq-line)}
.sq-pc__creator--link:focus-visible{
  outline:2px solid var(--sq-signal);outline-offset:2px;border-radius:2px;color:var(--sq-ink);
}

/* ── Discount badge ──────────────────────────────────────────────────────── */
/* Filled rather than outlined, unlike the verification flags beside it. A saving is
   the one thing on the card the reader is being offered rather than told, and at
   11px an outline in the signal colour reads as just another grey chip. */
/*
 * The discount badge carried white on the bright brand orange at 3.08:1 — the identical
 * failure `.sqpp-buy` above already documents and already solved. Same solution here rather
 * than a second one: the darkened `signal-ink` behind the white, which is what `on-signal` is
 * the partner for. 5.51:1, same hue family, same recognisable badge.
 *
 * Dark mode keeps the lighter orange with a near-black label, which it was already doing and
 * which already passes at 6.15:1 — the failure was only ever in light.
 */
.sq-pc__badge--discount{
  background:var(--wp--preset--color--signal-ink);border-color:var(--wp--preset--color--signal-ink);
  color:var(--wp--preset--color--on-signal);
  letter-spacing: var(--sq-ls-body);
}
html[data-sq-theme="dark"] .sq-pc__badge--discount{
  background:var(--sq-signal);border-color:var(--sq-signal);color:var(--wp--preset--color--dark-canvas);
}

/* ── Actions ─────────────────────────────────────────────────────────────── */
.sq-pc__actions{
  position:relative;z-index:2;
  display:flex;flex-wrap:wrap;gap:7px;margin-block-start:12px;
}
.sq-pc__act{
  flex:1 1 auto;min-inline-size:0;min-block-size:36px;
  display:inline-flex;align-items:center;justify-content:center;padding:0 12px;
  border:1px solid var(--sq-line);border-radius:7px;
  background:var(--sq-sheet);color:var(--sq-ink);
  font-size: var(--sq-t-p3);font-weight: var(--sq-w-semibold);line-height: var(--sq-lh-ui);text-align:center;text-decoration:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.sq-pc__act:hover{background:var(--sq-soft);border-color:var(--sq-ink)}
.sq-pc__act:focus-visible{outline:2px solid var(--sq-signal);outline-offset:2px}

/* Buy is the only filled control on the card, and it takes the whole row beneath the
   two secondary ones so the primary action never ends up as the narrowest target. */
.sq-pc__act--buy{
  flex:1 1 100%;
  background:var(--sq-ink);border-color:var(--sq-ink);color:var(--sq-paper);
}
.sq-pc__act--buy:hover{background:var(--sq-signal);border-color:var(--sq-signal);color:var(--wp--preset--color--on-signal)}
html[data-sq-theme="dark"] .sq-pc__act--buy:hover{color:var(--wp--preset--color--dark-canvas)}

@media(max-width:560px){
  .sq-pc__act{min-block-size:42px;font-size: var(--sq-t-p3)}
}
@media(prefers-reduced-motion:reduce){
  .sq-pc__act,.sq-pc__creator--link{transition:none}
}

/* ── Grid ────────────────────────────────────────────────────────────────── */
.sgp-grid{
  display:grid!important;gap:20px!important;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr))!important;
}
@media(min-width:1500px){
  .sgp-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))!important}
}
@media(max-width:900px){
  .sgp-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}
}
@media(max-width:560px){
  .sgp-grid{grid-template-columns:1fr!important}
  .sq-pc__save{inline-size:38px;block-size:38px}
  .sq-pc__title{font-size: var(--sq-t-p2) !important}
}

@media(prefers-reduced-motion:reduce){
  .sq-pc,.sq-pc__img,.sq-pc__save,.sq-pc__save-icon{transition:none}
  .sq-pc:hover{transform:none}
  .sq-pc:hover .sq-pc__img{transform:none}
}

/* Plugin-family artwork is authored for a light page — a good share of it is a
   transparent PNG, and most of the rest has a white background baked in. Painted
   onto the dark plate, the transparent ones lose their black type entirely and
   the opaque ones burn a white rectangle into the layout. So under dark mode the
   contain plate stays light: the screenshot keeps the ground it was drawn for.

   `media-plate` exists precisely for this: it is the one surface token deliberately
   excluded from the dark remap, because what sits on it is not themed content but
   somebody else's artwork.

   Template artwork is full-bleed photography with no transparency, so it is left
   to sit directly on the dark surface. */
html[data-sq-theme="dark"] .sq-pc--media-contain .sq-pc__media{
  background:var(--wp--preset--color--media-plate);
}

/* Compact context: the related-products strip and the solution rails, which run
   five to a row rather than three. Same card, dialled down — the media well gets
   shallower so a narrow column does not turn into a tall stack, and the type
   drops a step. Nothing is hidden that carries information. */
.sq-pc--ctx-compact .sq-pc__media{padding:9px}
.sq-pc--ctx-compact.sq-pc--media-contain .sq-pc__media,
.sq-pc--ctx-compact.sq-pc--media-cover-top .sq-pc__media,
.sq-pc--ctx-compact.sq-pc--media-cover .sq-pc__media{aspect-ratio:4/3}
.sq-pc--ctx-compact .sq-pc__body{gap:3px;padding:11px 12px 12px}
.sq-pc--ctx-compact .sq-pc__title{font-size: var(--sq-t-p3) !important}
.sq-pc--ctx-compact .sq-pc__meta,
.sq-pc--ctx-compact .sq-pc__price{font-size: var(--sq-t-p3)}
.sq-pc--ctx-compact .sq-pc__price{font-size: var(--sq-t-p3)}
.sq-pc--ctx-compact .sq-pc__foot{padding-block-start:8px}
.sq-pc--ctx-compact .sq-pc__save{inline-size:28px;block-size:28px;inset:7px 7px auto auto}
.sq-pc--ctx-compact .sq-pc__save-icon{inline-size:13px;block-size:13px}
.sq-pc--ctx-compact .sq-pc__flags{inset-block-start:7px;inset-inline-start:7px}
.sq-pc--ctx-compact .sq-pc__flag,
.sq-pc--ctx-compact .sq-pc__badge{min-block-size:21px;padding:0 7px;font-size: var(--sq-t-eyebrow)}
/* The separator must not wrap away from its own segment, but a long creator name
   still has to be allowed to give way rather than push past the card edge — so the
   segment holds together and the name inside it ellipsises. */
.sq-pc__meta{max-inline-size:100%}
.sq-pc__segment{display:inline-flex;align-items:center;gap:5px;min-inline-size:0;max-inline-size:100%}
.sq-pc__segment .sq-pc__sep{flex:none}
.sq-pc__platform,.sq-pc__creator{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-inline-size:0}

/* ══════════════════════════════════════════════════════════════════════════
   PRODUCT PAGE

   An editorial marketplace page: a dominant media column, a purchase panel that
   stays put while you read, and a repeating two-column section rhythm where a
   small label and heading sit to the left of the content they introduce.

   The old .sqpd and .sgp-product implementations are gone; nothing here needs to
   coexist with them.
   ══════════════════════════════════════════════════════════════════════════ */
.sqpp{
  --sqpp-gap:clamp(48px,6vw,86px);
  inline-size:min(1240px,calc(100% - 64px));margin-inline:auto;padding-block:22px 90px;
  color:var(--sq-ink);
}

/* ── Breadcrumbs ─────────────────────────────────────────────────────────── */
.sqpp-crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding-block-end:26px;margin-block-end:26px;border-block-end:1px solid var(--sq-line);
  color:var(--sq-muted);font-size: var(--sq-t-p3);
}
.sqpp-crumbs a{color:inherit;text-decoration:none;min-block-size:24px;display:inline-flex;align-items:center}
.sqpp-crumbs a:hover{color:var(--sq-ink);text-decoration:underline;text-underline-offset:3px}
.sqpp-crumbs__sep{opacity:.45}
.sqpp-crumbs [aria-current]{color:var(--sq-ink)}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.sqpp-hero{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:34px;align-items:start}

.sqpp-gallery{position:relative;min-inline-size:0}
/* Unlike the catalogue card, the stage does not impose a ratio.
   A card is a thumbnail, so cropping it to a common shape is the right trade. This
   is the page where somebody decides whether to spend money, and every product's
   art is a different shape — so the frame takes the shape of the picture instead,
   bounded top and bottom, and nothing is cut off or letterboxed into a slab. */
.sqpp-gallery__stage{
  position:relative;display:grid;place-items:center;inline-size:100%;
  min-block-size:280px;
  margin:0;padding:0;overflow:hidden;cursor:zoom-in;
  border:1px solid var(--sq-line);border-radius:14px;background:var(--sq-soft);
}
.sqpp-gallery__stage--empty{cursor:default;aspect-ratio:4/3}
/* `inline-size:100%` stretched every image to the stage whether or not it had the pixels.
   A Common Ninja screenshot is published at 685px and the stage is 770px, so 372 of them were
   being enlarged 12% and rendered soft — and no larger file exists to fetch, because their CDN
   serves 685px whatever width you ask it for. Rendering at natural size and centring is both
   sharper and honest: the image is shown at the resolution it was made at.
   `--sqpp-natural-w` is written per image by the renderer; without it the old behaviour stands. */
.sqpp-gallery__stage img{
  inline-size:100%;max-inline-size:var(--sqpp-natural-w,100%);
  block-size:auto;max-block-size:640px;object-fit:contain;
  margin-inline:auto;display:block;transition:transform .35s ease;
}
.sqpp-gallery--contain .sqpp-gallery__stage{padding:26px;background:var(--wp--preset--color--media-plate)}
.sqpp-gallery--contain .sqpp-gallery__stage img{inline-size:auto;max-inline-size:100%;max-block-size:560px}
.sqpp-gallery__stage:hover img{transform:scale(1.02)}
.sqpp-gallery__zoom{
  position:absolute;inset-block-end:14px;inset-inline-end:14px;inline-size:34px;block-size:34px;
  display:grid;place-items:center;border-radius:50%;background:var(--sq-sheet);
  border:1px solid var(--sq-line);opacity:0;transition:opacity .18s ease;
}
.sqpp-gallery__zoom::before{content:"⤢";font-size: var(--sq-t-p3);color:var(--sq-ink)}
.sqpp-gallery__stage:hover .sqpp-gallery__zoom,
.sqpp-gallery__stage:focus-visible .sqpp-gallery__zoom{opacity:1}

.sqpp-gallery__nav{
  position:absolute;inset-block-start:calc(50% - 40px);z-index:2;
  inline-size:38px;block-size:38px;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--sq-line);border-radius:50%;background:var(--sq-sheet);
  opacity:0;transition:opacity .18s ease,transform .18s ease;
}
.sqpp-gallery:hover .sqpp-gallery__nav,
.sqpp-gallery:focus-within .sqpp-gallery__nav{opacity:1}
.sqpp-gallery__nav:hover{transform:scale(1.07)}
.sqpp-gallery__nav--prev{inset-inline-start:12px}
.sqpp-gallery__nav--next{inset-inline-end:12px}
.sqpp-gallery__nav::before{content:"";inline-size:8px;block-size:8px;border-inline-start:1.6px solid var(--sq-ink);border-block-start:1.6px solid var(--sq-ink)}
.sqpp-gallery__nav--prev::before{transform:translateX(2px) rotate(-45deg)}
.sqpp-gallery__nav--next::before{transform:translateX(-2px) rotate(135deg)}

.sqpp-gallery__thumbs{display:flex;gap:10px;margin:12px 0 0;padding:0;list-style:none;overflow-x:auto;scrollbar-width:thin}
.sqpp-gallery__thumb{
  inline-size:92px;block-size:70px;display:block;padding:0;cursor:pointer;overflow:hidden;
  border:1px solid var(--sq-line);border-radius:9px;background:var(--sq-soft);
  transition:border-color .18s ease;
}
.sqpp-gallery__thumb img{inline-size:100%;block-size:100%;object-fit:cover;display:block}
.sqpp-gallery__thumb:hover{border-color:var(--sq-muted)}
.sqpp-gallery__thumb.is-active{border-color:var(--sq-signal);border-width:2px}

.sqpp-lightbox{
  inline-size:min(1180px,92vw);max-block-size:92vh;padding:0;
  border:1px solid var(--sq-line);border-radius:14px;background:var(--sq-sheet);
}
.sqpp-lightbox::backdrop{background:rgb(0 0 0 / .74)}
.sqpp-lightbox img{inline-size:100%;block-size:auto;max-block-size:92vh;object-fit:contain;display:block}
.sqpp-lightbox__close{
  position:absolute;inset-block-start:12px;inset-inline-end:12px;z-index:2;
  inline-size:38px;block-size:38px;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--sq-line);border-radius:50%;background:var(--sq-sheet);color:var(--sq-ink);
}
.sqpp-lightbox__close::before{content:"✕";font-size: var(--sq-t-p2)}

/* ── Purchase panel ──────────────────────────────────────────────────────── */
.sqpp-panel{
  position:sticky;inset-block-start:18px;
  display:flex;flex-direction:column;gap:13px;
  padding:24px;border:1px solid var(--sq-line);border-radius:14px;background:var(--sq-sheet);
}
.sqpp-panel__title{
  margin:0!important;font-size: var(--sq-t-h3) !important;line-height: var(--sq-lh-h3) !important;
  font-weight: var(--sq-w-semibold) !important;letter-spacing: var(--sq-ls-h2) !important;
}
.sqpp-panel__taxo{margin:0;display:flex;flex-wrap:wrap;gap:7px;align-items:center;font-size: var(--sq-t-p3);color:var(--sq-muted)}
.sqpp-panel__taxo a{color:inherit;text-decoration:none}
.sqpp-panel__taxo a:hover{color:var(--sq-ink);text-decoration:underline;text-underline-offset:3px}
.sqpp-panel__rating{margin:0;display:flex;align-items:center;gap:7px;font-size: var(--sq-t-p3);color:var(--sq-muted)}
.sqpp-panel__rating strong{color:var(--sq-ink)}
.sqpp-panel__rating a{color:inherit}

.sqpp-stars{display:inline-flex;gap:1px;color:var(--sq-line);font-size: var(--sq-t-p3);letter-spacing: var(--sq-ls-body)}
.sqpp-star.is-on,.sqpp-star.is-half{color:var(--sq-caution)}

.sqpp-avatar{
  inline-size:32px;block-size:32px;flex:none;display:grid;place-items:center;
  border-radius:50%;background:var(--sq-ink);color:var(--sq-paper);
  font-size: var(--sq-t-p3);font-weight: var(--sq-w-semibold);
}
.sqpp-avatar--lg{inline-size:46px;block-size:46px;font-size: var(--sq-t-h4)}
.sqpp-panel__creator{display:flex;align-items:center;gap:10px;padding-block:11px;border-block:1px solid var(--sq-line)}
.sqpp-panel__creator strong{display:block;font-size: var(--sq-t-p3);font-weight: var(--sq-w-semibold)}
.sqpp-panel__creator a{display:block;font-size: var(--sq-t-p3);color:var(--sq-muted)}

.sqpp-price{display:flex;flex-direction:column;gap:2px}
.sqpp-price__value{margin:0;font-size: var(--sq-t-h2);font-weight: var(--sq-w-semibold);letter-spacing: var(--sq-ls-h1);line-height: var(--sq-lh-h2)}
.sqpp-price--unknown .sqpp-price__value{font-size: var(--sq-t-h4);font-weight: var(--sq-w-semibold);color:var(--sq-muted)}
.sqpp-price__model{margin:0;font-size: var(--sq-t-p3);color:var(--sq-muted)}

.sqpp-actions{display:flex;flex-direction:column;gap:10px}
/* The bright brand orange carries white text at 3.08:1, which is not a legible
   button. This is the same hue and saturation taken dark enough to clear AA, and it
   is the preset rather than the alias so the button does not flip to a lighter red
   in dark mode and fail there instead. The label is `on-signal` rather than
   `accent-contrast` for the same reason: accent-contrast is remapped under dark mode
   and turned the button text near-black on red, at 3.44:1. */
.sqpp-buy{
  min-block-size:52px;display:flex;align-items:center;justify-content:center;gap:8px;
  padding-inline:20px;border-radius:10px;
  background:var(--wp--preset--color--signal-ink);color:var(--wp--preset--color--on-signal);
  font-size: var(--sq-t-p2);font-weight: var(--sq-w-semibold);text-decoration:none;
  transition:filter .18s ease,transform .18s ease;
}
.sqpp-buy:hover{filter:brightness(.93);transform:translateY(-1px)}
.sqpp-actions__note{margin:0;font-size: var(--sq-t-p3);color:var(--sq-muted);text-align:center;line-height: var(--sq-lh-supporting)}
/* Seven affiliate products have no destination on the live site either — their
   "Get this template" link is empty at source. Saying so is right; shouting it in
   red where the buy button should be is not, so it reads as a stated fact. */
.sqpp-actions__note--blocked{
  padding:13px 15px;border:1px solid var(--sq-line);border-radius:10px;
  background:var(--sq-soft);color:var(--sq-ink);text-align:start;
}
.sqpp-actions__row{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.sqpp-ghost{
  min-block-size:44px;display:flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;
  border:1px solid var(--sq-line);border-radius:10px;background:transparent;
  color:var(--sq-ink);font-size: var(--sq-t-p3);font-weight: var(--sq-w-medium);text-decoration:none;
  transition:border-color .18s ease,background .18s ease;
}
.sqpp-ghost:hover{border-color:var(--sq-ink);background:var(--sq-soft)}
.sqpp-ghost--wide{inline-size:100%;margin-block-start:4px}
.sqpp-ghost[aria-pressed="true"]{border-color:var(--sq-signal);color:var(--sq-signal)}
.sqpp-demo{
  min-block-size:38px;display:flex;align-items:center;justify-content:center;
  font-size: var(--sq-t-p3);color:var(--sq-ink);text-decoration:none;
}
.sqpp-demo:hover{text-decoration:underline;text-underline-offset:3px}

.sqpp-disclosure{
  display:flex;gap:9px;margin:0;padding-block-start:13px;border-block-start:1px solid var(--sq-line);
  font-size: var(--sq-t-p3);line-height: var(--sq-lh-supporting);color:var(--sq-muted);
}
.sqpp-disclosure strong{display:block;color:var(--sq-ink);font-weight: var(--sq-w-semibold);font-size: var(--sq-t-p3)}
.sqpp-disclosure a{color:var(--sq-muted)}

/* ── Trust ───────────────────────────────────────────────────────────────── */
.sqpp-trust{
  display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  min-block-size:26px;margin:0;padding-inline:11px;border-radius:999px;
  border:1px solid var(--sq-line);font-size: var(--sq-t-p3);font-weight: var(--sq-w-semibold);
}
.sqpp-trust__dot{inline-size:6px;block-size:6px;border-radius:50%;background:currentColor}
.sqpp-trust__date{color:var(--sq-muted);font-weight: var(--sq-w-medium)}
.sqpp-trust--good{color:var(--sq-good);border-color:color-mix(in srgb,var(--sq-good) 42%,transparent)}
.sqpp-trust--caution{color:var(--sq-caution);border-color:color-mix(in srgb,var(--sq-caution) 42%,transparent)}
.sqpp-trust--critical{color:var(--sq-critical);border-color:color-mix(in srgb,var(--sq-critical) 42%,transparent)}
.sqpp-trust--neutral{color:var(--sq-muted)}

/* ── Icons (masked, so they follow currentColor in both themes) ──────────── */
.sqpp-icon{inline-size:17px;block-size:17px;flex:none;display:block;background:currentColor}
.sqpp-icon--heart{-webkit-mask:var(--i-heart) center/contain no-repeat;mask:var(--i-heart) center/contain no-repeat}
.sqpp-icon--share{-webkit-mask:var(--i-share) center/contain no-repeat;mask:var(--i-share) center/contain no-repeat}
.sqpp-icon--info{-webkit-mask:var(--i-info) center/contain no-repeat;mask:var(--i-info) center/contain no-repeat}
.sqpp-icon--platform{-webkit-mask:var(--i-grid) center/contain no-repeat;mask:var(--i-grid) center/contain no-repeat}
.sqpp-icon--effort{-webkit-mask:var(--i-bolt) center/contain no-repeat;mask:var(--i-bolt) center/contain no-repeat}
.sqpp-icon--creator{-webkit-mask:var(--i-store) center/contain no-repeat;mask:var(--i-store) center/contain no-repeat}
.sqpp-icon--updated{-webkit-mask:var(--i-refresh) center/contain no-repeat;mask:var(--i-refresh) center/contain no-repeat}
:root{
  --i-heart:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E");
  --i-share:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cpath d='m8.6 13.5 6.8 4M15.4 6.5l-6.8 4'/%3E%3C/svg%3E");
  --i-info:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E");
  --i-grid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E");
  --i-bolt:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M13 2 4 14h7l-1 8 9-12h-7l1-8Z'/%3E%3C/svg%3E");
  --i-store:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 9h18l-1.5-5h-15L3 9Z'/%3E%3Cpath d='M5 9v11h14V9'/%3E%3Cpath d='M9 20v-6h6v6'/%3E%3C/svg%3E");
  --i-refresh:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-3-6.7'/%3E%3Cpath d='M21 3v6h-6'/%3E%3C/svg%3E");
  --i-external:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6'/%3E%3Cpath d='M20 4 10 14'/%3E%3Cpath d='M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E");
  --i-scroll:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='5' width='8' height='14' rx='1.5'/%3E%3Cpath d='M4 8.5v7M20 8.5v7'/%3E%3C/svg%3E");
  --i-mobile:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='2' width='12' height='20' rx='2'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E");
  --i-clipboard:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='2' width='8' height='4' rx='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='M9 13h6M9 17h4'/%3E%3C/svg%3E");
  --i-gauge:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 17a9 9 0 1 1 17 0'/%3E%3Cpath d='m14.5 10.5-3.5 4'/%3E%3Ccircle cx='12' cy='16' r='1.4'/%3E%3C/svg%3E");
  --i-pencil:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L20 8a2.8 2.8 0 0 0-4-4L4 16Z'/%3E%3Cpath d='m14.5 5.5 4 4'/%3E%3C/svg%3E");
  --i-infinity:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 8.5a3.5 3.5 0 1 0 0 7c3 0 5-7 8-7a3.5 3.5 0 1 1 0 7c-3 0-5-7-8-7Z'/%3E%3C/svg%3E");
  --i-lifebuoy:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='3.6'/%3E%3Cpath d='m5.7 5.7 3.8 3.8M14.5 14.5l3.8 3.8M18.3 5.7l-3.8 3.8M9.5 14.5l-3.8 3.8'/%3E%3C/svg%3E");
  --i-book:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5a2 2 0 0 1 2-2h13v16H6a2 2 0 0 0-2 2Z'/%3E%3Cpath d='M8 7h7M8 11h7'/%3E%3C/svg%3E");
  --i-mail:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3.5 7 8.5 6 8.5-6'/%3E%3C/svg%3E");
  --i-shield:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 5 6v5.5c0 4.3 2.9 8.2 7 9.5 4.1-1.3 7-5.2 7-9.5V6Z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}

/* ── Benefit strip ───────────────────────────────────────────────────────── */
/* The separators are drawn on the cells rather than by letting a coloured
   container show through 1px gaps: with an odd number of items the old approach
   left a block of raw border colour where the last row ran out. */
.sqpp-benefits{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;
  margin-block-start:var(--sqpp-gap);
  border:1px solid var(--sq-line);border-radius:14px;background:var(--sq-sheet);overflow:hidden;
}
.sqpp-benefit{padding:24px 22px;background:var(--sq-sheet);box-shadow:0 0 0 1px var(--sq-line)}
.sqpp-benefit__icon{margin-block-end:13px;color:var(--sq-ink)}
.sqpp-benefits{list-style:none;padding:0}
.sqpp-benefit .sqpp-benefit__title{margin:0 0 5px;font-size: var(--sq-t-p3);font-weight: var(--sq-w-semibold);letter-spacing: var(--sq-ls-h4);color:var(--sq-ink)}
.sqpp-benefit p{margin:0;font-size: var(--sq-t-p3);line-height: var(--sq-lh-supporting);color:var(--sq-muted)}

/* ── Section rhythm: label + heading left, content right ─────────────────── */
.sqpp-section{
  display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:56px;
  margin-block-start:var(--sqpp-gap);padding-block-start:var(--sqpp-gap);
  border-block-start:1px solid var(--sq-line);
}
.sqpp-section:first-of-type{border-block-start:0}
.sqpp-section__aside h2{
  margin:9px 0 0!important;font-size: var(--sq-t-h2) !important;
  line-height: var(--sq-lh-h3) !important;font-weight: var(--sq-w-semibold) !important;letter-spacing: var(--sq-ls-h1) !important;
}
.sqpp-label{
  margin:0;font-size: var(--sq-t-eyebrow);font-weight: var(--sq-w-bold);letter-spacing: var(--sq-ls-eyebrow);text-transform:uppercase;
  color:var(--sq-signal-ink);
}
.sqpp-lede{margin:0 0 16px;font-size: var(--sq-t-p2);line-height: var(--sq-lh-body);color:var(--sq-ink)}
.sqpp-prose{font-size: var(--sq-t-p2);line-height: var(--sq-lh-body);color:var(--sq-muted)}
.sqpp-prose > * + *{margin-block-start:14px}
.sqpp-chips{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0;padding:0;list-style:none}
.sqpp-chips li{
  min-block-size:32px;display:inline-flex;align-items:center;padding-inline:13px;
  border:1px solid var(--sq-line);border-radius:8px;background:var(--sq-sheet);
  font-size: var(--sq-t-p3);font-weight: var(--sq-w-medium);
}

/* ── Showcase rail ───────────────────────────────────────────────────────── */
.sqpp-showcase__rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(258px,342px);gap:16px;justify-content:start;
  margin:0;padding:0 4px 8px 0;list-style:none;overflow-x:auto;
  scroll-snap-type:x mandatory;scrollbar-width:thin;overscroll-behavior-x:contain;
}
.sqpp-showcase__rail > li{scroll-snap-align:start}
.sqpp-showcase__item{
  inline-size:100%;display:block;padding:0;cursor:zoom-in;overflow:hidden;
  border:1px solid var(--sq-line);border-radius:12px;background:var(--sq-soft);
  transition:border-color .18s ease,transform .18s ease;
}
.sqpp-showcase__item:hover{border-color:var(--sq-ink);transform:translateY(-2px)}
/* Template mockups are portrait and plugin screenshots are landscape. Forcing both
   into one 4:3 thumbnail cropped a 768x1024 mockup down to a sliver of its header,
   which tells a reader nothing about the page they are being sold. */
.sqpp-showcase__item img{inline-size:100%;object-fit:cover;object-position:top center;display:block}
.sqpp-showcase--landscape .sqpp-showcase__item img{aspect-ratio:4/3}
.sqpp-showcase--portrait .sqpp-showcase__item img{aspect-ratio:3/4}
.sqpp-showcase--portrait .sqpp-showcase__rail{grid-auto-columns:minmax(210px,262px)}

/* ── Compatibility ───────────────────────────────────────────────────────── */
.sqpp-compat__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;margin:0;
  border:1px solid var(--sq-line);border-radius:12px;background:var(--sq-sheet);overflow:hidden;
}
.sqpp-compat__grid > div{padding:18px 20px;background:var(--sq-sheet);box-shadow:0 0 0 1px var(--sq-line)}
.sqpp-compat__grid dt{margin:0 0 4px;font-size: var(--sq-t-p3);font-weight: var(--sq-w-semibold);letter-spacing: var(--sq-ls-eyebrow);text-transform:uppercase;color:var(--sq-muted)}
.sqpp-compat__grid dd{margin:0;font-size: var(--sq-t-p3);line-height: var(--sq-lh-supporting)}

/* ── Creator ─────────────────────────────────────────────────────────────── */
.sqpp-creator__card{
  max-inline-size:430px;padding:24px;
  border:1px solid var(--sq-line);border-radius:14px;background:var(--sq-sheet);
}
.sqpp-creator__head{display:flex;align-items:center;gap:13px}
.sqpp-creator__logo{inline-size:46px;block-size:46px;border-radius:50%;object-fit:cover;display:block}
.sqpp-creator__head h3{margin:0!important;font-size: var(--sq-t-p1) !important;font-weight: var(--sq-w-semibold) !important;letter-spacing: var(--sq-ls-h3) !important}
.sqpp-creator__rel{margin:2px 0 0;font-size: var(--sq-t-p3);color:var(--sq-muted)}
.sqpp-creator__bio{margin:15px 0 0;font-size: var(--sq-t-p3);line-height: var(--sq-lh-body);color:var(--sq-muted)}
.sqpp-creator__stats{display:flex;gap:30px;margin:18px 0 0}
.sqpp-creator__stats dt{margin:0;font-size: var(--sq-t-p3);color:var(--sq-muted)}
.sqpp-creator__stats dd{margin:3px 0 0;font-size: var(--sq-t-h4);font-weight: var(--sq-w-semibold);letter-spacing: var(--sq-ls-h3)}

/* ── Reviews ─────────────────────────────────────────────────────────────── */
.sqpp-reviews__summary{display:grid;grid-template-columns:auto minmax(0,1fr);gap:40px;align-items:center;margin-block-end:28px}
.sqpp-reviews__score strong{display:block;font-size: var(--sq-t-h1);font-weight: var(--sq-w-semibold);letter-spacing: var(--sq-ls-h1);line-height: var(--sq-lh-h1)}
.sqpp-reviews__score .sqpp-stars{margin-block:6px;font-size: var(--sq-t-p2)}
.sqpp-reviews__score p{margin:0;font-size: var(--sq-t-p3);color:var(--sq-muted)}
.sqpp-reviews__split{display:flex;flex-direction:column;gap:5px;margin:0;padding:0;list-style:none}
.sqpp-reviews__split li{display:grid;grid-template-columns:14px minmax(0,1fr) 38px;gap:10px;align-items:center;font-size: var(--sq-t-p3);color:var(--sq-muted)}
.sqpp-reviews__bar{block-size:5px;border-radius:999px;background:var(--sq-soft);overflow:hidden}
.sqpp-reviews__bar > span{display:block;block-size:100%;background:var(--sq-ink)}
.sqpp-reviews__split-pct{text-align:end}

.sqpp-reviews__list{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:14px;margin:0;padding:0;list-style:none}
.sqpp-review{padding:19px;border:1px solid var(--sq-line);border-radius:12px;background:var(--sq-sheet)}
.sqpp-review__head{display:flex;align-items:center;gap:10px;margin-block-end:10px}
.sqpp-review__head strong{display:block;font-size: var(--sq-t-p3);font-weight: var(--sq-w-semibold)}
.sqpp-review__head time{margin-inline-start:auto;font-size: var(--sq-t-p3);color:var(--sq-muted)}
.sqpp-review__verified{font-size: var(--sq-t-p3);color:var(--sq-good)}
.sqpp-review p{margin:9px 0 0;font-size: var(--sq-t-p3);line-height: var(--sq-lh-body);color:var(--sq-muted)}

.sqpp-reviews__empty{
  padding:34px 28px;border:1px dashed var(--sq-line);border-radius:12px;
  background:var(--sq-sheet);max-inline-size:560px;
}
.sqpp-reviews__empty-title{margin:0 0 6px;font-size: var(--sq-t-p2);font-weight: var(--sq-w-semibold)}
.sqpp-reviews__empty p{margin:0;font-size: var(--sq-t-p3);line-height: var(--sq-lh-body);color:var(--sq-muted)}

/* ── Closing call to action ──────────────────────────────────────────────────
   The only button on a long listing is otherwise in the hero, thousands of words
   above the point somebody decides. Centred and on the tinted surface so it reads
   as the end of the argument rather than as one more section of it.
   ────────────────────────────────────────────────────────────────────────── */
.sqsw-close__inner{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:clamp(30px,4.4vw,58px) clamp(20px,3vw,44px);
  border:1px solid var(--sq-line);border-radius:var(--wp--custom--radius--lg);
  background:var(--sq-soft);
}
.sqsw-close__inner .sqsw-eyebrow{margin:0 0 12px}
.sqsw-close__inner .sqsw-band__title{max-inline-size:20ch}
.sqsw-close__lede{max-inline-size:56ch;margin:16px 0 0;font-size: var(--sq-t-p2);line-height: var(--sq-lh-body);color:var(--sq-muted)}
.sqsw-close__buy{margin-block-start:26px;min-inline-size:min(320px,100%)}
.sqsw-close__note{margin:14px 0 0;max-inline-size:56ch;font-size: var(--sq-t-p3);line-height: var(--sq-lh-supporting);color:var(--sq-muted)}
.sqsw-close .sqc-disc--chips{margin-block-start:16px}

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.sqpp-faq__list{border-block-start:1px solid var(--sq-line)}
.sqpp-faq__item{border-block-end:1px solid var(--sq-line)}
.sqpp-faq__item summary{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  min-block-size:60px;padding-block:16px;cursor:pointer;list-style:none;
  font-size: var(--sq-t-p3);font-weight: var(--sq-w-semibold);
}
.sqpp-faq__item summary::-webkit-details-marker{display:none}
.sqpp-faq__mark{position:relative;inline-size:13px;block-size:13px;flex:none}
.sqpp-faq__mark::before,.sqpp-faq__mark::after{
  content:"";position:absolute;inset-block-start:50%;inset-inline-start:0;
  inline-size:13px;block-size:1.6px;background:var(--sq-ink);transition:transform .22s ease;
}
.sqpp-faq__mark::after{transform:rotate(90deg)}
.sqpp-faq__item[open] .sqpp-faq__mark::after{transform:rotate(0)}
.sqpp-faq__item > p{margin:0;padding-block:0 20px;max-inline-size:64ch;font-size: var(--sq-t-p3);line-height: var(--sq-lh-body);color:var(--sq-muted)}

/* ── Related ─────────────────────────────────────────────────────────────── */
.sqpp-related{margin-block-start:var(--sqpp-gap);padding-block-start:var(--sqpp-gap);border-block-start:1px solid var(--sq-line)}
.sqpp-related__head{margin-block-end:24px}
.sqpp-related__head h2{margin:9px 0 0!important;font-size: var(--sq-t-h2) !important;font-weight: var(--sq-w-semibold) !important;letter-spacing: var(--sq-ls-h1) !important}
.sqpp-related .sgp-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:16px!important}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media(max-width:1180px){
  .sqpp-hero{grid-template-columns:minmax(0,1fr) 330px;gap:26px}
  .sqpp-section{grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:38px}
  .sqpp-related .sgp-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:900px){
  .sqpp{inline-size:min(100%,calc(100% - 36px));padding-block-end:64px}
  /* The panel stops being a sidebar and becomes the block directly under the
     preview, so the title stays next to the image it belongs to. */
  .sqpp-hero{grid-template-columns:1fr;gap:20px}
  .sqpp-panel{position:static}
  .sqpp-section{grid-template-columns:1fr;gap:20px;padding-block-start:44px;margin-block-start:44px}
  .sqpp-reviews__summary{grid-template-columns:1fr;gap:20px}
  .sqpp-related .sgp-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .sqpp-showcase__rail{grid-auto-columns:minmax(228px,300px)}
}
@media(max-width:560px){
  .sqpp{inline-size:min(100%,calc(100% - 28px))}
  .sqpp-panel{padding:19px}
  .sqpp-panel__title{font-size: var(--sq-t-h3) !important}
  .sqpp-price__value{font-size: var(--sq-t-h3)}
  .sqpp-buy{min-block-size:54px}
  .sqpp-gallery__stage{aspect-ratio:3/2}
  .sqpp-gallery--contain .sqpp-gallery__stage{padding:15px}
  .sqpp-gallery__thumb{inline-size:74px;block-size:56px}
  .sqpp-benefits{grid-template-columns:1fr}
  .sqpp-compat__grid{grid-template-columns:1fr}
  .sqpp-related .sgp-grid{grid-template-columns:1fr!important}
  .sqpp-showcase__rail{grid-auto-columns:86%}
  .sqpp-reviews__list{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .sqpp-gallery__stage img,.sqpp-gallery__nav,.sqpp-showcase__item,.sqpp-buy,.sqpp-faq__mark::before,.sqpp-faq__mark::after{transition:none}
  .sqpp-gallery__stage:hover img,.sqpp-showcase__item:hover,.sqpp-buy:hover{transform:none}
}

/* Standalone links in the purchase panel measured 19-21px tall, under the WCAG 2.5.8
   minimum of 24. The negative margin cancels the padding so the target grows without
   anything shifting. The "Learn more" inside the affiliate sentence is deliberately
   left alone — links within a block of text are exempt under 2.5.8, and padding it
   would break the line it sits in. */
.sqpp-panel__taxo a,
.sqpp-panel__creator a{
  display:inline-flex;align-items:center;min-block-size:24px;
  padding-block:3px;margin-block:-3px;
}

/* ── Product page: what's included, licence/support, creator extras ──────── */
.sqpp-includes__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:34px}
.sqpp-includes__head{
  margin:0 0 13px;font-size: var(--sq-t-p3);font-weight: var(--sq-w-semibold);letter-spacing: var(--sq-ls-eyebrow);
  text-transform:uppercase;color:var(--sq-muted);
}
.sqpp-ticks{display:flex;flex-direction:column;gap:11px;margin:0;padding:0;list-style:none}
.sqpp-ticks li{display:flex;gap:11px;font-size: var(--sq-t-p3);line-height: var(--sq-lh-supporting)}
.sqpp-tick{
  inline-size:17px;block-size:17px;flex:none;margin-block-start:2px;border-radius:50%;
  background:color-mix(in srgb,var(--sq-good) 15%,transparent);position:relative;
}
.sqpp-tick::before{
  content:"";position:absolute;inset-block-start:5px;inset-inline-start:5px;
  inline-size:6px;block-size:3px;border-inline-start:1.6px solid var(--sq-good);
  border-block-end:1.6px solid var(--sq-good);transform:rotate(-45deg);
}
/* The caveat list is the same shape in a different key: an exclamation, not a tick,
   so the two columns cannot be mistaken for each other at a glance. */
.sqpp-ticks--caution .sqpp-tick{background:color-mix(in srgb,var(--sq-caution) 15%,transparent)}
.sqpp-ticks--caution .sqpp-tick::before{
  inset-block-start:4px;inset-inline-start:8px;inline-size:1.6px;block-size:6px;
  border:0;background:var(--sq-caution);transform:none;
}
.sqpp-ticks--caution .sqpp-tick::after{
  content:"";position:absolute;inset-block-start:12px;inset-inline-start:8px;
  inline-size:1.6px;block-size:1.6px;background:var(--sq-caution);
}

.sqpp-terms__list{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:1px;margin:0;
  border:1px solid var(--sq-line);border-radius:12px;background:var(--sq-sheet);overflow:hidden;
}
.sqpp-terms__list > div{padding:18px 20px;background:var(--sq-sheet);box-shadow:0 0 0 1px var(--sq-line)}
.sqpp-terms__list dt{margin:0 0 4px;font-size: var(--sq-t-p3);font-weight: var(--sq-w-semibold);letter-spacing: var(--sq-ls-eyebrow);text-transform:uppercase;color:var(--sq-muted)}
.sqpp-terms__list dd{margin:0;font-size: var(--sq-t-p3);line-height: var(--sq-lh-supporting)}
.sqpp-ghost--inline{display:inline-flex;inline-size:auto;padding-inline:17px;margin-block-start:18px}

.sqpp-success{
  margin:18px 0 0;padding:15px 17px;border-inline-start:2px solid var(--sq-good);
  background:var(--sq-sheet);font-size: var(--sq-t-p3);line-height: var(--sq-lh-body);color:var(--sq-muted);
}
.sqpp-success strong{display:block;color:var(--sq-ink);font-size: var(--sq-t-p3);font-weight: var(--sq-w-semibold);margin-block-end:3px}

.sqpp-creator__notes{margin:14px 0 0;font-size: var(--sq-t-p3);line-height: var(--sq-lh-supporting);color:var(--sq-muted)}
.sqpp-creator__paid{
  margin:12px 0 0;padding:9px 12px;border-radius:8px;
  background:color-mix(in srgb,var(--sq-caution) 12%,transparent);
  color:var(--sq-caution);font-size: var(--sq-t-p3);line-height: var(--sq-lh-supporting);
}
.sqpp-creator__actions{display:flex;flex-wrap:wrap;gap:9px;margin-block-start:18px}
.sqpp-creator__actions .sqpp-ghost{flex:1 1 140px;padding-inline:14px}

.sqpp-showcase__caption{margin:9px 2px 0;font-size: var(--sq-t-eyebrow);font-weight: var(--sq-w-medium);color:var(--sq-ink)}
.sqpp-showcase__all{
  display:inline-flex;align-items:center;gap:7px;min-block-size:24px;
  margin-block-start:17px;padding:0;border:0;background:transparent;cursor:pointer;
  color:var(--sq-signal-ink);font-size: var(--sq-t-p3);font-weight: var(--sq-w-semibold);
}
.sqpp-showcase__all:hover{text-decoration:underline;text-underline-offset:3px}

@media(max-width:560px){
  .sqpp-includes__cols{gap:26px}
  .sqpp-terms__list{grid-template-columns:1fr}
  .sqpp-creator__actions .sqpp-ghost{flex:1 1 100%}
}

/* ── Migrated long-form description ─────────────────────────────────────── */
/* Some of this copy contains code snippets that were pasted as plain text on the
   old site. A single unbroken 200-character string pushed the whole document 27px
   wider than the viewport, which no element scan finds because the culprit is a
   text node rather than a box. */
.sqpp-prose{overflow-wrap:anywhere;word-break:break-word}
.sqpp-prose h2,.sqpp-prose h3,.sqpp-prose h4{
  margin:26px 0 9px!important;font-size: var(--sq-t-p1) !important;font-weight: var(--sq-w-semibold) !important;
  letter-spacing: var(--sq-ls-h3) !important;color:var(--sq-ink)!important;
}
.sqpp-prose ul,.sqpp-prose ol{margin:12px 0;padding-inline-start:20px}
.sqpp-prose li{margin-block:5px}
.sqpp-prose a{color:var(--sq-ink);text-underline-offset:3px}
.sqpp-prose blockquote{
  margin:18px 0;padding-inline-start:16px;border-inline-start:2px solid var(--sq-line);
  color:var(--sq-muted);
}

.sqpp-longread{position:relative}
.sqpp-longread__body{max-block-size:340px;overflow:hidden}
.sqpp-longread.is-open .sqpp-longread__body{max-block-size:none}
/* The fade signals there is more without hiding a hard edge mid-sentence. */
.sqpp-longread:not(.is-open) .sqpp-longread__body::after{
  content:"";position:absolute;inset-inline:0;inset-block-end:44px;block-size:120px;
  background:linear-gradient(to bottom,transparent,var(--sq-paper));pointer-events:none;
}
.sqpp-longread__toggle{
  position:relative;min-block-size:40px;margin-block-start:12px;padding-inline:17px;
  border:1px solid var(--sq-line);border-radius:10px;background:var(--sq-sheet);
  color:var(--sq-ink);font-size: var(--sq-t-p3);font-weight: var(--sq-w-medium);cursor:pointer;
}
.sqpp-longread__toggle:hover{border-color:var(--sq-ink)}

/* A grid item's default min-width is auto, so the horizontally-scrolling screenshot
   rail pushed its own column wider than the viewport instead of scrolling inside it.
   The section columns are already minmax(0,…); the body needs the same on its own
   box for the scroller to have something to be constrained by. */
.sqpp-section__body,
.sqpp-section__aside{min-inline-size:0}
@media(max-width:560px){
  .sqpp-showcase--portrait .sqpp-showcase__rail{grid-auto-columns:74%}
  .sqpp-showcase--landscape .sqpp-showcase__rail{grid-auto-columns:86%}
}
.sqpp-includes__source{
  margin:14px 0 0;padding-block-start:11px;border-block-start:1px solid var(--sq-line);
  font-size: var(--sq-t-p3);color:var(--sq-muted);
}
.sqpp-lightbox__frame{display:block;line-height: var(--sq-lh-h1)}
.sqpp-lightbox__frame img{inline-size:100%;block-size:auto;max-block-size:92vh;object-fit:contain;display:block}

/* Installation snippets published as part of a product's own copy. They are content,
   not leftover markup, so they get a code treatment rather than being hidden. */
.sqpp-prose pre,
.sqpp-prose code{
  font-family:var(--sq-font-mono);
  font-size: var(--sq-t-p3);line-height: var(--sq-lh-body);
}
.sqpp-prose code{
  padding:2px 5px;border-radius:4px;background:var(--sq-soft);
  overflow-wrap:anywhere;
}
.sqpp-prose pre{
  margin:16px 0;padding:15px 17px;overflow-x:auto;
  border:1px solid var(--sq-line);border-radius:10px;background:var(--sq-soft);
  white-space:pre;overflow-wrap:normal;
}
.sqpp-prose pre code{padding:0;background:transparent}
.sqpp-terms__source,
.sqpp-terms__none{margin:16px 0 0;font-size: var(--sq-t-p3);line-height: var(--sq-lh-body);color:var(--sq-muted)}
.sqpp-terms__none{padding:13px 15px;border:1px solid var(--sq-line);border-radius:10px;background:var(--sq-soft)}

/* ══════════════════════════════════════════════════════════════════════════
   PRODUCT PAGE — SHOWCASE LAYOUT

   The second product layout, for products that were sold as long-form sales
   pages. It keeps the same container, breadcrumbs, gallery and reviews as the
   catalogue layout and replaces the section rhythm: instead of a small label
   beside its content, each band is centred under a large heading with one run
   of words in the signal colour, which is how the source pages read.

   It is the same palette as the rest of the site — the source page's own black
   and lime are nowhere in here, so this page follows the reader's light/dark
   choice like every other.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Hero ────────────────────────────────────────────────────────────────── */
/* A page header across the top, the reading column under the preview, and only the
   part you act on in the right-hand card. The earlier arrangement — everything
   except the image stacked on the right — left the right column at 1029px against
   a 467px preview, and no amount of enlarging a 16:9 screenshot closes that gap.

   Explicit placement rather than auto-flow, so the buy card can span both of the
   left column's rows and have somewhere to travel while stuck. */
.sqsw-hero{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);
  column-gap:clamp(32px,3.6vw,58px);
  row-gap:clamp(22px,2.6vw,32px);
  align-items:start;
}
.sqsw-hero__head{grid-column:1 / -1;min-inline-size:0}
.sqsw-hero__media{grid-column:1;grid-row:2;min-inline-size:0}
/* Opt-in per listing, via `_sgp_sticky_media`. Where a purchase card is genuinely long —
   payment options, facts, disclosure — the picture beside it scrolled away while the
   reader was still reading about what they were buying, so it stays put. Not a default:
   most cards are shorter than the gallery and have no problem to solve. Desktop only:
   the two columns are stacked below this, where sticky would pin the image over the
   copy. `max-block-size` keeps a tall gallery from being taller than the viewport,
   which is the one way a sticky element becomes impossible to scroll past. */
@media (min-width:1024px){
  .sqsw-hero__media--sticky{
    position:sticky;inset-block-start:24px;
    max-block-size:calc(100vh - 48px);overflow:auto;
    scrollbar-width:none;
  }
  .sqsw-hero__media--sticky::-webkit-scrollbar{display:none}
}
.sqsw-hero .sqsw-points{grid-column:1;grid-row:3;margin:0}
.sqsw-hero__buy{grid-column:2;grid-row:2 / span 2;min-inline-size:0}

.sqsw-hero__title{
  margin:10px 0 0!important;font-size: var(--sq-t-h1) !important;line-height: var(--sq-lh-h2) !important;
  font-weight: var(--sq-w-semibold) !important;letter-spacing: var(--sq-ls-h1) !important;color:var(--sq-ink)!important;
}
.sqsw-hero__lede{
  max-inline-size:62ch;margin:16px 0 0;
  font-size: var(--sq-t-p1);line-height: var(--sq-lh-body);color:var(--sq-muted);
}

/* The purchase card. A bordered surface rather than three loose blocks: it is the
   one part of the page that takes money, and it should look like a single object
   you are dealing with. Sticky offset is 20px — the site header scrolls away
   rather than pinning, so there is nothing above it to clear. */
.sqsw-hero__buy{
  position:sticky;inset-block-start:20px;
  display:flex;flex-direction:column;gap:16px;
  padding:clamp(18px,1.7vw,24px);
  border:1px solid var(--sq-line);border-radius:var(--wp--custom--radius--lg);
  background:var(--sq-sheet);box-shadow:var(--wp--custom--shadow--md);
}
/* Inside the card the bundle panel is already on a surface, so it drops its own
   border and sits as a tinted inset instead of a box within a box. */
.sqsw-hero__buy .sqsw-bundle{
  border-color:transparent;background:color-mix(in srgb,var(--wp--preset--color--signal-ink) 6%,transparent);
}

/* The selling points. The bolded lead is the claim; the rest qualifies it, so the
   two carry different weight and colour rather than running together as one line. */
.sqsw-points{display:flex;flex-direction:column;gap:11px;margin:0;padding-inline-start:19px}
.sqsw-points li{font-size: var(--sq-t-p3);line-height: var(--sq-lh-body);color:var(--sq-muted)}
.sqsw-points li::marker{color:var(--sq-line)}
.sqsw-points strong{font-weight: var(--sq-w-semibold);color:var(--sq-ink)}

/* ── Bundle promotion ────────────────────────────────────────────────────── */
/* A shop-wide offer, so it is stated as a quiet panel rather than as a second
   call to action competing with the licence cards directly beneath it. */
.sqsw-bundle{
  padding:15px 17px;
  border:1px solid var(--sq-line);border-radius:var(--wp--custom--radius--lg);
  background:var(--sq-soft);
}
.sqsw-bundle__head{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin:0 0 12px;
}
.sqsw-bundle__label{
  display:inline-flex;align-items:center;gap:7px;
  font-size: var(--sq-t-eyebrow);font-weight: var(--sq-w-bold);letter-spacing: var(--sq-ls-eyebrow);text-transform:uppercase;
  color:var(--sq-signal-ink);
}
.sqsw-bundle__label::before{
  content:"";inline-size:6px;block-size:6px;border-radius:50%;background:currentColor;
}
.sqsw-bundle__auto{
  padding:3px 9px;border-radius:var(--wp--custom--radius--pill);
  background:var(--sq-paper);border:1px solid var(--sq-line);
  font-size: var(--sq-t-eyebrow);font-weight: var(--sq-w-semibold);letter-spacing: var(--sq-ls-body);text-transform:uppercase;color:var(--sq-muted);
}
.sqsw-bundle__tiers{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:0;padding:0;list-style:none;
}
.sqsw-bundle__tiers li{
  padding:10px 8px;text-align:center;
  border:1px solid var(--sq-line);border-radius:var(--wp--custom--radius--md);background:var(--sq-paper);
}
.sqsw-bundle__count{
  display:block;font-size: var(--sq-t-eyebrow);font-weight: var(--sq-w-semibold);letter-spacing: var(--sq-ls-eyebrow);text-transform:uppercase;
  color:var(--sq-muted);
}
.sqsw-bundle__pct{display:block;margin-block:3px 1px;font-size: var(--sq-t-h4);font-weight: var(--sq-w-semibold);letter-spacing: var(--sq-ls-h2);color:var(--sq-ink)}
.sqsw-bundle__off{display:block;font-size: var(--sq-t-eyebrow);letter-spacing: var(--sq-ls-eyebrow);text-transform:uppercase;color:var(--sq-muted)}

/* ── Licence chooser ─────────────────────────────────────────────────────── */
/* Rows that select, then one button that buys. Each row reads as a choice — a tick
   that fills when it is the active one — rather than as its own call to action, so
   the only thing on the panel styled like a button is the thing that takes money. */
.sqsw-licences{min-inline-size:0}
/* The creator's payment options, in the purchase card where the price is. Two short
   rows rather than two cards: the panel is a column, and a reader is choosing how to
   pay, not choosing between products. */
.sqsw-pay{display:grid;gap:8px;margin:0 0 18px;padding:0;list-style:none}
.sqsw-pay__row{
  display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:4px 12px;
  padding:10px 12px;border:1px solid var(--sq-line);border-radius:10px;background:var(--sq-soft);
}
.sqsw-pay__label{font-size: var(--sq-t-p3);font-weight: var(--sq-w-semibold);color:var(--sq-ink)}
.sqsw-pay__price{font-size: var(--sq-t-p2);font-weight: var(--sq-w-bold);color:var(--sq-ink);font-variant-numeric:tabular-nums}
.sqsw-pay__note{grid-column:1/-1;font-size: var(--sq-t-p3);color:var(--sq-muted)}

.sqsw-licences__label{
  margin:0 0 10px;font-size: var(--sq-t-eyebrow);font-weight: var(--sq-w-bold);letter-spacing: var(--sq-ls-eyebrow);text-transform:uppercase;
  color:var(--sq-muted);
}
.sqsw-licences__list{
  margin:0 0 14px;padding:0;list-style:none;
  border:1px solid var(--sq-line);border-radius:var(--wp--custom--radius--lg);
  background:var(--sq-paper);overflow:hidden;
}
.sqsw-licence + .sqsw-licence{border-block-start:1px solid var(--sq-line)}
.sqsw-licence__pick{
  display:flex;align-items:center;gap:13px;padding:15px 17px;
  text-decoration:none;color:var(--sq-ink);
  transition:background var(--wp--custom--transition--base);
}
.sqsw-licence__pick:hover{background:var(--sq-sheet)}
.sqsw-licence__pick:focus-visible{
  outline:2px solid var(--wp--preset--color--signal-ink);outline-offset:-2px;
}
/* The selected row is marked three ways — tick, weight and a filled ground — because
   colour alone is not a state anyone can rely on. */
.sqsw-licence__pick.is-on{background:color-mix(in srgb,var(--wp--preset--color--signal-ink) 7%,transparent)}
.sqsw-licence__tick{
  inline-size:19px;block-size:19px;flex:none;position:relative;
  border:1.6px solid var(--sq-muted);border-radius:50%;
  transition:border-color var(--wp--custom--transition--base);
}
.sqsw-licence__pick.is-on .sqsw-licence__tick{border-color:var(--wp--preset--color--signal-ink)}
.sqsw-licence__pick.is-on .sqsw-licence__tick::after{
  content:"";position:absolute;inset:3px;border-radius:50%;
  background:var(--wp--preset--color--signal-ink);
}
.sqsw-licence__text{display:flex;flex-direction:column;gap:3px;min-inline-size:0;flex:1 1 auto}
.sqsw-licence__name{font-size: var(--sq-t-p2);font-weight: var(--sq-w-semibold);letter-spacing: var(--sq-ls-h4)}
.sqsw-licence__meta{font-size: var(--sq-t-p3);color:var(--sq-muted)}
/* One edition, so the price is stated rather than chosen. */
.sqsw-price{display:flex;flex-direction:column;gap:2px;margin:0 0 14px}
.sqsw-price__value{font-size: var(--sq-t-h2);font-weight: var(--sq-w-semibold);letter-spacing: var(--sq-ls-h1);line-height: var(--sq-lh-h2);color:var(--sq-ink)}
.sqsw-price__model{font-size: var(--sq-t-p3);color:var(--sq-muted)}
.sqsw-licences__note{
  margin:0;padding:13px 15px;border:1px solid var(--sq-line);border-radius:var(--wp--custom--radius--md);
  background:var(--sq-soft);font-size: var(--sq-t-p3);line-height: var(--sq-lh-supporting);color:var(--sq-ink);
}

/* The one control on the page that takes money. `signal-ink` rather than the brighter
   alias: white on the bright orange measures 3.08:1, which is not a legible button. */
/* No `inline-size:100%`: it is a flex child of the purchase card, which stretches it
   already, and under WordPress's content-box default the 100% would have been
   *plus* its own padding — the button hanging 40px past the card it sits in. */
.sqsw-buy{
  min-block-size:56px;display:flex;align-items:center;justify-content:center;
  padding-inline:20px;border-radius:var(--wp--custom--radius--md);
  background:var(--wp--preset--color--signal-ink);color:var(--wp--preset--color--on-signal);
  font-size: var(--sq-t-p2);font-weight: var(--sq-w-semibold);letter-spacing: var(--sq-ls-h4);text-decoration:none;
  transition:filter var(--wp--custom--transition--base),transform var(--wp--custom--transition--base);
}
.sqsw-buy:hover{filter:brightness(.93);transform:translateY(-1px)}
/* Whose checkout it is, said plainly under the button rather than discovered on arrival. */
.sqsw-licences__where{
  margin:12px 0 0;font-size: var(--sq-t-p3);line-height: var(--sq-lh-body);color:var(--sq-muted);
}
/* ── The facts at the foot of the card ───────────────────────────────────── */
/* Hairline rows rather than a bordered table: this is the quiet half of the card,
   under the thing you click, and it should read as a spec sheet rather than compete
   with the price above it. */
.sqsw-facts{
  margin:18px 0 0;padding-block-start:16px;border-block-start:1px solid var(--sq-line);
}
.sqsw-facts > div{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding-block:8px;
}
.sqsw-facts > div + div{border-block-start:1px solid var(--sq-line)}
.sqsw-facts dt{margin:0;flex:none;font-size: var(--sq-t-p3);color:var(--sq-muted)}
.sqsw-facts dd{
  margin:0;min-inline-size:0;text-align:end;
  font-size: var(--sq-t-p3);font-weight: var(--sq-w-semibold);color:var(--sq-ink);
}
/* The verification result keeps the colour it carries everywhere else, so a reader who
   has learned what "Verified" looks like on a card recognises it here. */
.sqsw-facts__tone--good{color:var(--sq-good)}
.sqsw-facts__tone--caution{color:var(--sq-caution)}
.sqsw-facts__tone--critical{color:var(--sq-critical)}
.sqsw-facts__tone--neutral{color:var(--sq-muted)}
.sqsw-buy:focus-visible{outline:2px solid var(--sq-ink);outline-offset:3px}

/* ── Demo and utilities ──────────────────────────────────────────────────── */
.sqsw-demo{
  min-block-size:52px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--sq-ink);border-radius:var(--wp--custom--radius--md);
  background:transparent;color:var(--sq-ink);text-decoration:none;
  font-size: var(--sq-t-p3);font-weight: var(--sq-w-semibold);letter-spacing: var(--sq-ls-eyebrow);text-transform:uppercase;
  transition:background var(--wp--custom--transition--base),color var(--wp--custom--transition--base);
}
.sqsw-demo:hover{background:var(--sq-ink);color:var(--sq-paper)}
/* Under the preview, and quieter than anything in the purchase column. */
.sqsw-hero__utils{display:flex;gap:8px;margin-block-start:14px}
.sqsw-util{
  min-block-size:38px;display:inline-flex;align-items:center;gap:7px;padding-inline:14px;cursor:pointer;
  border:1px solid var(--sq-line);border-radius:var(--wp--custom--radius--pill);background:transparent;
  color:var(--sq-muted);font-size: var(--sq-t-p3);font-weight: var(--sq-w-medium);
  transition:border-color var(--wp--custom--transition--base),color var(--wp--custom--transition--base);
}
.sqsw-util:hover{border-color:var(--sq-ink);color:var(--sq-ink)}
.sqsw-util[aria-pressed="true"]{border-color:var(--sq-signal);color:var(--sq-signal)}

/* ── Demo video ──────────────────────────────────────────────────────────── */
/* A poster the reader clicks, not an embed: the player is ~900K of script on a page
   held to a 400K budget, and most readers never press play. */
.sqsw-video{margin-block-start:var(--sqpp-gap)}
.sqsw-video__frame{
  position:relative;display:block;overflow:hidden;
  border:1px solid var(--sq-line);border-radius:var(--wp--custom--radius--lg);background:var(--sq-soft);
}
.sqsw-video__frame img{inline-size:100%;block-size:auto;aspect-ratio:16/9;object-fit:cover;display:block}
/* A walkthrough we cannot embed. Same affordance as the video frame, at the size of
   a link rather than a hero, because there is no thumbnail behind it. */
.sqsw-video--link{display:flex}
.sqsw-videolink{
  display:inline-flex;align-items:center;gap:12px;
  min-block-size:52px;padding-inline:20px;
  border:1px solid var(--sq-line);border-radius:var(--wp--custom--radius--lg);
  background:var(--sq-soft);color:var(--sq-ink);
  font-size: var(--sq-t-p2);font-weight: var(--sq-w-semibold);text-decoration:none;
}
.sqsw-videolink:hover{border-color:var(--sq-signal-ink)}
.sqsw-videolink__play{
  inline-size:0;block-size:0;
  border-block:8px solid transparent;
  border-inline-start:13px solid var(--sq-signal-ink);
}

.sqsw-video__play{
  position:absolute;inset-block-start:50%;inset-inline-start:50%;translate:-50% -50%;
  inline-size:74px;block-size:74px;border-radius:50%;
  background:var(--wp--preset--color--signal-ink);
  display:grid;place-items:center;
  transition:transform var(--wp--custom--transition--base);
}
.sqsw-video__play::before{
  content:"";inline-size:0;block-size:0;margin-inline-start:5px;
  border-block:12px solid transparent;
  border-inline-start:20px solid var(--wp--preset--color--on-signal);
}
.sqsw-video__frame:hover .sqsw-video__play,
.sqsw-video__frame:focus-visible .sqsw-video__play{transform:scale(1.08)}
/* Once the reader asks for it, the iframe replaces the poster in the same box. */
.sqsw-video__player{
  display:block;inline-size:100%;aspect-ratio:16/9;border:0;
  border-radius:var(--wp--custom--radius--lg);overflow:hidden;
}

/* ── Section bands ───────────────────────────────────────────────────────── */
.sqsw-band{
  margin-block-start:var(--sqpp-gap);padding-block-start:var(--sqpp-gap);
  border-block-start:1px solid var(--sq-line);
}
/* The heading runs the full content width, as it does on the source pages — capping it
   broke "Everything you need. Nothing you don't." across two lines at desktop. Only the
   lede is measured, because that is prose and prose needs a measure. */
.sqsw-band__head{margin-block-end:clamp(28px,3.5vw,46px)}
.sqsw-eyebrow{
  margin:0 0 12px;font-size: var(--sq-t-eyebrow);font-weight: var(--sq-w-bold);letter-spacing: var(--sq-ls-eyebrow);text-transform:uppercase;
  color:var(--sq-signal-ink);
}
.sqsw-band__title{
  margin:0!important;font-size: var(--sq-t-h1) !important;line-height: var(--sq-lh-h2) !important;
  font-weight: var(--sq-w-semibold) !important;letter-spacing: var(--sq-ls-h1) !important;color:var(--sq-ink)!important;
}
.sqsw-band__title em{font-style:normal;color:var(--sq-signal-ink)}
/* In a 340px rail a four-word heading wraps to three ragged lines with one word
   stranded on the last. `balance` is the property for exactly this and degrades to
   normal wrapping where it is unsupported. */
.sqsw-band__title,.sqsw-close__inner .sqsw-band__title{text-wrap:balance}
.sqsw-band__lede,.sqsw-card__title,.sqsw-plan__name,.sqsw-steps__title{text-wrap:pretty}
.sqsw-band__lede{max-inline-size:56ch;margin:16px 0 0;font-size: var(--sq-t-p2);line-height: var(--sq-lh-body);color:var(--sq-muted)}
.sqsw-band__source{
  margin:24px 0 0;padding-block-start:14px;border-block-start:1px solid var(--sq-line);
  font-size: var(--sq-t-p3);color:var(--sq-muted);
}

/* Prose bands. Not every creator writes in cards: some write a heading and three
   paragraphs, and that shape needs a column narrow enough to read rather than the
   full band width the card grid uses. */
/* Heading beside the prose rather than above it, the same shape the FAQ uses, so a
   page that mixes card bands and prose bands still reads as one page. Below the
   breakpoint it stacks, which is the natural order anyway. */
@media (min-width:1024px){
  .sqsw-prose-band{
    display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);
    gap:clamp(28px,4vw,64px);align-items:start;
  }
  .sqsw-prose-band .sqsw-band__head{margin-block-end:0}
}
/* With a picture: heading and copy in one column, image in the other, the way the
   source pages set them. Stacks below the breakpoint, image last. */
@media (min-width:1024px){
  /* Heading across the top, copy and picture side by side beneath it.
     The image deliberately does not span the heading's row: a grid item spanning two
     rows distributes its height across both, so a tall photo pushed the copy halfway
     down the band and left a hole under the heading. One row, two columns, no gap. */
  .sqsw-prose-band--media{
    grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
    align-items:start;
  }
  .sqsw-prose-band--media .sqsw-band__head{grid-column:1 / -1;margin-block-end:0}
  .sqsw-prose-band--media .sqsw-prose{grid-column:1;grid-row:2;max-inline-size:56ch}
  .sqsw-prose-band--media .sqsw-prose__media{grid-column:2;grid-row:2}
}
/* ── Rich band blocks ────────────────────────────────────────────────────────
   Tables, priced plans, ordered steps and screenshots.

   These live in the SAME two-column grid as a plain prose band — heading rail on
   the left, everything else in one content column on the right — and they all
   fill that column edge to edge.

   The first attempt gave them the full band width instead, and it read badly for
   a reason worth recording: prose capped at 68ch beside a table spanning 1168px
   produced a 420px ragged gutter down the right of every paragraph, and stretched
   three short columns of table across the whole page so the rows looked empty. One
   column, one left edge, one right edge, is what makes a page look composed.
   ────────────────────────────────────────────────────────────────────────── */
@media (min-width:1024px){
  /* Same grid as .sqsw-prose-band; declared again so a band carrying both classes
     cannot depend on source order to get the right shape. */
  .sqsw-band--wide{
    display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);
    gap:clamp(28px,4vw,64px);align-items:start;
  }
  /* The rail follows the reader down a long section, so the heading a table belongs
     to is still on screen at the bottom of it. */
  .sqsw-band--wide .sqsw-band__head,
  .sqsw-prose-band .sqsw-band__head{position:sticky;inset-block-start:96px;margin-block-end:0}
}
/* Nothing inside the content column carries its own measure: the column is the
   measure. Caps here are what re-introduce the ragged edge. */
.sqsw-band--wide .sqsw-prose,
.sqsw-band--wide .sqsw-prose>p,
.sqsw-band--wide .sqsw-prose>.sqsw-prose__note{max-inline-size:none}
.sqsw-prose-band .sqsw-band__lede{max-inline-size:none}

/* One line that has to be read, set apart from the argument around it. */
.sqsw-prose__note{
  margin:20px 0 0;padding:14px 16px;
  border-inline-start:3px solid var(--sq-signal-ink);
  border-radius:0 var(--wp--custom--radius--sm) var(--wp--custom--radius--sm) 0;
  background:var(--sq-soft);
  font-size: var(--sq-t-p3);line-height: var(--sq-lh-body);color:var(--sq-ink);
}

/* Steps. Numbered by CSS counter, so the markup carries the order and nothing has
   to be renumbered by hand when a step is inserted. */
.sqsw-steps{
  counter-reset:sqsw-step;list-style:none;margin:24px 0 0;padding:0;
  display:grid;gap:12px;
}
@media (min-width:760px){.sqsw-steps{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}}
.sqsw-steps__item{
  counter-increment:sqsw-step;position:relative;
  padding:18px 18px 18px 20px;
  border:1px solid var(--sq-line);border-radius:var(--wp--custom--radius--md);
  background:var(--sq-sheet);
}
.sqsw-steps__item::before{
  content:counter(sqsw-step,decimal-leading-zero);
  display:block;margin-block-end:10px;
  font-size: var(--sq-t-p3);font-weight: var(--sq-w-bold);letter-spacing: var(--sq-ls-eyebrow);color:var(--sq-signal-ink);
}
.sqsw-steps__title{margin:0!important;font-size: var(--sq-t-p2) !important;line-height: var(--sq-lh-h4) !important;font-weight: var(--sq-w-semibold) !important;letter-spacing: var(--sq-ls-h4) !important;color:var(--sq-ink)!important}
.sqsw-steps__body{margin:8px 0 0;font-size: var(--sq-t-p3);line-height: var(--sq-lh-body);color:var(--sq-muted)}

/* Comparison tables. The wrapper scrolls, not the page. */
.sqsw-tablewrap{
  margin:24px 0 0;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--sq-line);border-radius:var(--wp--custom--radius--md);
  background:var(--sq-sheet);
}
.sqsw-tablewrap:focus-visible{outline:2px solid var(--wp--preset--color--signal-ink);outline-offset:2px}
/* Where a table still will not fit, say so. A column sheared off at the frame edge
   reads as a rendering fault; a fade that stops at the last fully visible column
   reads as "there is more this way". `scroll-timeline` is not needed — the gradient
   is painted on the scroll container and only shows while there is somewhere to go. */
.sqsw-tablewrap{
  background-image:linear-gradient(to right,transparent calc(100% - 56px),color-mix(in srgb,var(--sq-sheet) 92%,transparent));
  background-repeat:no-repeat;background-attachment:local,scroll;
}
.sqsw-table{inline-size:100%;border-collapse:collapse;font-size: var(--sq-t-p3);line-height: var(--sq-lh-supporting)}
.sqsw-table th,.sqsw-table td{padding:11px 16px;text-align:start;vertical-align:top;border-block-end:1px solid var(--sq-line)}
/* A column of one-word values does not need a third of the table. The label column
   takes the room it needs and the rest share what is left, so "Free" stops sitting
   alone in 156px of white. */
.sqsw-table td{inline-size:1%}
.sqsw-table td:not(:last-child){inline-size:auto}
/* Six columns or more: tighter type and padding before the wrapper has to scroll. */
.sqsw-table--dense{font-size: var(--sq-t-p3)}
.sqsw-table--dense th,.sqsw-table--dense td{padding:9px 11px;white-space:nowrap}
.sqsw-table thead th{
  position:sticky;inset-block-start:0;z-index:1;
  background:var(--sq-soft);color:var(--sq-ink);
  font-size: var(--sq-t-p3);font-weight: var(--sq-w-bold);letter-spacing: var(--sq-ls-eyebrow);text-transform:uppercase;
  white-space:nowrap;
}
.sqsw-table tbody th{font-weight: var(--sq-w-semibold);color:var(--sq-ink);min-inline-size:11rem}
.sqsw-table tbody td{color:var(--sq-muted)}
.sqsw-table tbody tr:last-child th,.sqsw-table tbody tr:last-child td{border-block-end:0}
.sqsw-table tbody tr:nth-child(even) th,.sqsw-table tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--sq-soft) 45%,transparent)}

/* Priced tiers. */
.sqsw-plans{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:14px}
/* Two up, always. Four tiers across a 780px content column gives each one 180px,
   which is narrower than the price inside it; two rows of two reads as a comparison
   rather than as a squeezed row. */
@media (min-width:560px){.sqsw-plans{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1400px){
  .sqsw-plans--3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.sqsw-plan{
  display:flex;flex-direction:column;padding:20px;
  border:1px solid var(--sq-line);border-radius:var(--wp--custom--radius--md);
  background:var(--sq-sheet);
}
.sqsw-plan.is-featured{border-color:var(--sq-signal-ink);box-shadow:var(--wp--custom--shadow--sm)}
.sqsw-plan__badge{
  margin:0 0 10px;font-size: var(--sq-t-eyebrow);font-weight: var(--sq-w-bold);letter-spacing: var(--sq-ls-eyebrow);
  text-transform:uppercase;color:var(--sq-signal-ink);
}
.sqsw-plan__name{margin:0!important;font-size: var(--sq-t-p3) !important;font-weight: var(--sq-w-semibold) !important;letter-spacing: var(--sq-ls-body) !important;color:var(--sq-muted)!important;text-transform:uppercase!important}
.sqsw-plan__price{margin:8px 0 0;font-size: var(--sq-t-h3);line-height: var(--sq-lh-h2);font-weight: var(--sq-w-semibold);letter-spacing: var(--sq-ls-h2);color:var(--sq-ink)}
.sqsw-plan__sub{margin:6px 0 0;font-size: var(--sq-t-p3);line-height: var(--sq-lh-supporting);color:var(--sq-muted)}
.sqsw-plan__items{list-style:none;margin:14px 0 0;padding:14px 0 0;border-block-start:1px solid var(--sq-line);display:grid;gap:8px}
.sqsw-plan__items li{position:relative;padding-inline-start:18px;font-size: var(--sq-t-p3);line-height: var(--sq-lh-supporting);color:var(--sq-muted)}
.sqsw-plan__items li::before{
  content:"";position:absolute;inset-inline-start:0;inset-block-start:.5em;
  inline-size:8px;block-size:8px;border-radius:50%;background:var(--sq-signal-ink);opacity:.5;
}

/* Screenshots inside a band. */
.sqsw-figure{margin:26px 0 0}
.sqsw-figure__img{
  display:block;inline-size:100%;block-size:auto;
  border:1px solid var(--sq-line);border-radius:var(--wp--custom--radius--lg);
  background:var(--sq-soft);
}
.sqsw-figure__caption{margin:10px 0 0;font-size: var(--sq-t-eyebrow);line-height: var(--sq-lh-supporting);color:var(--sq-muted)}
@media (min-width:1024px){.sqsw-figure--wide{margin-block-start:32px}}

.sqsw-prose__media{margin:24px 0 0}
.sqsw-prose__media img{
  inline-size:100%;block-size:auto;display:block;
  border-radius:var(--wp--custom--radius--lg);
}
/* Beside copy, the picture takes its height from the words rather than the other way
   round.

   A fixed cap was the first attempt and it only moved the problem: 420px of photograph
   against 368px of copy is fine, against 179px it leaves a 241px hole. Taking the image
   out of the flow — absolute inside a stretched figure — means the row is as tall as the
   text, and the image fills whatever that turns out to be. The floor stops a one-line
   band from reducing the picture to a strip. */
@media (min-width:1024px){
  .sqsw-prose-band--media .sqsw-prose__media{
    position:relative;align-self:stretch;min-block-size:220px;
  }
  .sqsw-prose-band--media .sqsw-prose__media img{
    position:absolute;inset:0;
    inline-size:100%;block-size:100%;max-block-size:none;object-fit:cover;
  }
}
@media (min-width:1024px){ .sqsw-prose__media{margin:0} }
.sqsw-prose{max-inline-size:68ch}
.sqsw-prose > p{margin:0 0 16px;font-size: var(--sq-t-p2);line-height: var(--sq-lh-body);color:var(--sq-ink)}
.sqsw-prose__list{margin:20px 0;padding:0;list-style:none;display:grid;gap:10px}
.sqsw-prose > :last-child{margin-block-end:0}
/* One rhythm for the whole column.
   Each block used to set only its own top margin, so a figure followed by a
   paragraph had nothing between them at all — the caption and the next sentence
   ran together and read as one paragraph. Spacing belongs between siblings, not
   on one side of each block. */
.sqsw-prose > * + *{margin-block-start:28px}
.sqsw-prose > p + p{margin-block-start:0}
.sqsw-prose__list > li{
  position:relative;padding-inline-start:24px;
  font-size: var(--sq-t-p2);line-height: var(--sq-lh-body);color:var(--sq-ink);
}
.sqsw-prose__list > li::before{
  content:"";position:absolute;inset-inline-start:2px;inset-block-start:.62em;
  inline-size:7px;block-size:7px;border-radius:50%;background:var(--sq-signal-ink);
}

/* Feature and support cards. The source pages lay these out column-major — the
   reading order down a column, not across a row — and the cards are independent of
   each other, so the visual order carries no meaning the DOM order has to preserve. */
.sqsw-cards{display:grid;gap:clamp(26px,3vw,40px) clamp(24px,3vw,44px);margin:0;padding:0;list-style:none}
.sqsw-cards--1{grid-template-columns:minmax(0,62ch)}
.sqsw-cards--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.sqsw-cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sqsw-cards--4{grid-template-columns:repeat(4,minmax(0,1fr))}
/* Exactly six cards fill column-major, which is the order the source pages read in.
   Any other count flows in rows: column-major over five or seven would scramble the
   sequence for no gain, because there is no tidy second row to line up with. */
.sqsw-cards--major{grid-template-rows:repeat(2,auto);grid-auto-flow:column}
.sqsw-card{min-inline-size:0}
.sqsw-card__title{
  margin:0 0 9px!important;font-size: var(--sq-t-p2) !important;line-height: var(--sq-lh-h4) !important;
  font-weight: var(--sq-w-semibold) !important;letter-spacing: var(--sq-ls-h3) !important;color:var(--sq-signal-ink)!important;
}
.sqsw-card__body{margin:0;font-size: var(--sq-t-p3);line-height: var(--sq-lh-body);color:var(--sq-muted)}

/* Related reading reuses the card band, so the only thing it needs is a title that
   reads as a link. The whole card is not made clickable: these sit beside cards that
   are not links, and a card that behaves differently from its neighbours without
   looking different is worse than an underlined heading. */
.sqsw-read .sqsw-card__title a{color:inherit;text-decoration:none;
  text-underline-offset:3px;text-decoration-thickness:1px}
.sqsw-read .sqsw-card__title a:hover,
.sqsw-read .sqsw-card__title a:focus-visible{text-decoration:underline}

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
/* Heading left, one accordion right. The previous two-column grid of cards looked
   orderly until an answer opened: the column it was in grew and the other did not,
   so the whole block lurched sideways every time somebody read something. A single
   column can only grow downwards.

   `interpolate-size` is scoped here rather than set on :root — it changes how every
   keyword size animates, and this is the only place on the page that wants it. */
.sqsw-faq{interpolate-size:allow-keywords}
.sqsw-faq__layout{
  display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);
  gap:clamp(28px,4vw,64px);align-items:start;
}
/* The way to ask a question stays on screen for the length of the answers rather
   than arriving after them. */
.sqsw-faq__intro{position:sticky;inset-block-start:24px}
.sqsw-faq .sqsw-band__head{margin-block-end:0}
.sqsw-faq__contact{
  margin:22px 0 0;font-size: var(--sq-t-p3);line-height: var(--sq-lh-body);color:var(--sq-muted);
}
.sqsw-faq__contact a{
  display:inline-flex;align-items:center;min-block-size:24px;
  color:var(--sq-signal-ink);font-weight: var(--sq-w-semibold);text-underline-offset:3px;
}

/* Rows, not cards. A hairline between each and nothing else: eight bordered white
   boxes stacked in a column read as eight objects rather than as one list. */
.sqsw-faq__list{border-block-start:1px solid var(--sq-line)}
.sqsw-faq__item{border-block-end:1px solid var(--sq-line)}
.sqsw-faq__summary{
  display:flex;align-items:baseline;gap:16px;
  padding-block:20px;cursor:pointer;list-style:none;
  font-size: var(--sq-t-p2);font-weight: var(--sq-w-semibold);line-height: var(--sq-lh-eyebrow);color:var(--sq-ink);
  transition:color var(--wp--custom--transition--base);
}
.sqsw-faq__summary::-webkit-details-marker{display:none}
.sqsw-faq__summary:hover{color:var(--sq-signal-ink)}
/* The focus ring wraps the whole row, inset so it is not clipped by the divider. */
.sqsw-faq__summary:focus-visible{
  outline:2px solid var(--wp--preset--color--signal-ink);outline-offset:-3px;
  border-radius:var(--wp--custom--radius--sm);
}
.sqsw-faq__item[open] .sqsw-faq__summary{color:var(--sq-ink)}
/* Index text, not a badge. It gives the eye a fixed left edge to run down a column
   of ragged question lengths, and weighs nothing. */
.sqsw-faq__n{
  flex:none;inline-size:22px;
  font-size: var(--sq-t-eyebrow);font-weight: var(--sq-w-semibold);font-variant-numeric:tabular-nums;
  color:var(--sq-muted);
}
.sqsw-faq__item[open] .sqsw-faq__n{color:var(--sq-signal-ink)}
.sqsw-faq__q{flex:1 1 auto;min-inline-size:0}
.sqsw-faq__mark{
  position:relative;inline-size:14px;block-size:14px;flex:none;align-self:center;
}
.sqsw-faq__mark::before{
  content:"";position:absolute;inset-block-start:2px;inset-inline-start:1px;
  inline-size:9px;block-size:9px;
  border-inline-end:1.8px solid var(--sq-muted);border-block-end:1.8px solid var(--sq-muted);
  transform:rotate(45deg);transform-origin:60% 60%;
  transition:transform var(--wp--custom--transition--base),border-color var(--wp--custom--transition--base);
}
.sqsw-faq__summary:hover .sqsw-faq__mark::before{border-color:var(--sq-signal-ink)}
.sqsw-faq__item[open] .sqsw-faq__mark::before{transform:rotate(-135deg);border-color:var(--sq-signal-ink)}
/* The answer belongs to the row above it: no border, no fill, just the indent that
   lines it up under the question rather than under the index. */
.sqsw-faq__answer{padding:0 34px 22px 38px}
.sqsw-faq__answer p{margin:0;max-inline-size:70ch;font-size: var(--sq-t-p3);line-height: 1.75;color:var(--sq-muted)}
.sqsw-faq__answer p + p{margin-block-start:12px}
.sqsw-faq__answer a{color:var(--sq-signal-ink);text-underline-offset:3px}
/* Opening slides rather than snapping. `::details-content` is a progressive
   enhancement — where it is unsupported the answer simply appears, which is what
   `details` did before any of this. */
.sqsw-faq__item::details-content{
  block-size:0;overflow:hidden;opacity:0;
  transition:block-size .3s ease,opacity .25s ease,content-visibility .3s allow-discrete;
  transition-behavior:allow-discrete;
}
.sqsw-faq__item[open]::details-content{block-size:auto;opacity:1}

/* ── Card icons ──────────────────────────────────────────────────────────── */
/* One shape, masked over currentColor, so a single asset serves both themes. */
.sqsw-card__icon{
  inline-size:40px;block-size:40px;display:block;margin-block-end:14px;
  border-radius:var(--wp--custom--radius--md);
  background:color-mix(in srgb,var(--wp--preset--color--signal-ink) 9%,transparent);
  position:relative;
  transition:background var(--wp--custom--transition--base),transform var(--wp--custom--transition--base);
}
.sqsw-card__icon::before{
  content:"";position:absolute;inset:0;margin:auto;inline-size:20px;block-size:20px;
  background:var(--wp--preset--color--signal-ink);
  -webkit-mask:var(--sqsw-ic) center/contain no-repeat;mask:var(--sqsw-ic) center/contain no-repeat;
}
.sqsw-card:hover .sqsw-card__icon{
  background:color-mix(in srgb,var(--wp--preset--color--signal-ink) 16%,transparent);transform:translateY(-2px);
}
/* Holds the row straight for a card the icon mapping had nothing honest to give. */
.sqsw-card__icon--blank{background:transparent}
.sqsw-card__icon--blank::before{content:none}
.sqsw-card:hover .sqsw-card__icon--blank{background:transparent;transform:none}
.sqsw-ic--scroll{--sqsw-ic:var(--i-scroll)}
.sqsw-ic--mobile{--sqsw-ic:var(--i-mobile)}
.sqsw-ic--clipboard{--sqsw-ic:var(--i-clipboard)}
.sqsw-ic--gauge{--sqsw-ic:var(--i-gauge)}
.sqsw-ic--pencil{--sqsw-ic:var(--i-pencil)}
.sqsw-ic--infinity{--sqsw-ic:var(--i-infinity)}
.sqsw-ic--lifebuoy{--sqsw-ic:var(--i-lifebuoy)}
.sqsw-ic--book{--sqsw-ic:var(--i-book)}
.sqsw-ic--mail{--sqsw-ic:var(--i-mail)}
.sqsw-ic--shield{--sqsw-ic:var(--i-shield)}

/* ── Creator byline ──────────────────────────────────────────────────────── */
/* Who made this and what it runs on, in one line under the title. It replaced a
   full-width creator band with a card, three statistics and two buttons: that
   section pushed the FAQ a screen further down to tell the reader something they
   settle in half a second. Shared and data-driven — a third-party product renders
   their mark, their name and a link to their archive through the same component. */
.sq-byline{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin:12px 0 0;font-size: var(--sq-t-p3);color:var(--sq-muted);
}
.sq-byline__creator{
  display:inline-flex;align-items:center;gap:8px;min-block-size:24px;
  color:var(--sq-ink);font-weight: var(--sq-w-semibold);text-decoration:none;
  border-radius:var(--wp--custom--radius--sm);
  transition:color var(--wp--custom--transition--base);
}
a.sq-byline__creator:hover{color:var(--sq-signal-ink);text-decoration:underline;text-underline-offset:3px}
a.sq-byline__creator:focus-visible{
  outline:2px solid var(--wp--preset--color--signal-ink);outline-offset:3px;text-decoration:none;
}
.sq-byline__mark{
  inline-size:24px;block-size:24px;flex:none;display:grid;place-items:center;overflow:hidden;
  border-radius:50%;background:var(--sq-soft);color:var(--sq-ink);
  font-size: var(--sq-t-eyebrow);font-weight: var(--sq-w-bold);line-height: var(--sq-lh-h1);
}
/* A creator's logo, whatever shape it is.
   `cover` was right for a square avatar and actively misleading for a wordmark: Launch Out
   Loud's logo is 1000x123, and a 24px circle cropped from the middle of it showed "OU" — a
   fragment of LOUD, reading as somebody's initials. `contain` letterboxes instead, so a wide
   logo stays a whole logo, and the disc widens to a rounded rectangle to give it room. */
.sq-byline__mark--logo{
  background:var(--sq-soft);
  /* A fixed box, not `auto`: the image inside is sized at 100%, so an auto-width parent and a
     full-width child size from each other and the logo collapses to a sliver. */
  inline-size:58px;block-size:24px;
  padding:3px 5px;border-radius:6px;
}
/* A square brand mark, which is a different object from a wordmark: it wants the disc
   back, edge to edge, with no letterboxing and no padding to shrink it into the middle. */
.sq-byline__mark--square{
  inline-size:24px;block-size:24px;padding:0;border-radius:50%;
  background:transparent;
}
.sq-byline__mark img{inline-size:100%;block-size:100%;object-fit:cover;display:block}
.sq-byline__mark--logo img{object-fit:contain}
.sq-byline__mark--square img{object-fit:cover}
/* The real mark, not an initial in a circle. It carries the brand's own two
   colours, so the disc behind it steps back to the page surface. */
.sq-byline__mark--brand{background:var(--sq-ink);color:var(--sq-paper)}
.sq-byline__brand{inline-size:14px;block-size:14px;display:block}
.sq-byline__brand .sq-logo__signal{fill:var(--wp--preset--color--signal-ink)}
.sq-byline__sep{opacity:.5}
.sq-byline__platform{display:inline-flex;align-items:center;gap:7px}
.sq-byline__platform-icon{inline-size:18px;block-size:18px;display:block;border-radius:4px}

/* ── Also from us ────────────────────────────────────────────────────────── */
/* The rail. Position is relative so the arrows can sit against the heading row
   above it without a wrapper of their own. */
.sqsw-rail{position:relative}
.sqsw-rail__nav{
  position:absolute;inset-block-end:100%;inset-inline-end:0;
  display:flex;align-items:center;gap:8px;margin-block-end:20px;
}
.sqsw-rail__arrow{
  inline-size:42px;block-size:42px;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--sq-line);border-radius:50%;background:var(--sq-sheet);
  transition:border-color var(--wp--custom--transition--base),
             background var(--wp--custom--transition--base),
             opacity var(--wp--custom--transition--base);
}
.sqsw-rail__arrow::before{
  content:"";inline-size:9px;block-size:9px;
  border-inline-start:1.8px solid var(--sq-ink);border-block-start:1.8px solid var(--sq-ink);
}
.sqsw-rail__arrow--prev::before{transform:translateX(2px) rotate(-45deg)}
.sqsw-rail__arrow--next::before{transform:translateX(-2px) rotate(135deg)}
.sqsw-rail__arrow:hover:not(:disabled){border-color:var(--sq-ink);background:var(--sq-soft)}
/* Disabled rather than hidden at the ends: a control that vanishes moves the one
   next to it under the cursor mid-click. */
.sqsw-rail__arrow:disabled{opacity:.35;cursor:default}

/* `scroll-behavior` stays `auto`: the loop wraps by assigning scrollLeft, and a
   smooth default would animate that jump instead of making it instant — which is
   exactly the seam the loop exists to hide. The arrows ask for smooth explicitly. */
.sqsw-rail__track{
  display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 2 * clamp(18px,2.4vw,30px)) / 3);
  gap:clamp(18px,2.4vw,30px);
  align-items:stretch;
  margin:0;padding:4px 0 8px;list-style:none;
  overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  scrollbar-width:none;scroll-behavior:auto;
}
.sqsw-rail__track::-webkit-scrollbar{display:none}
.sqsw-rail__track:focus-visible{outline:2px solid var(--wp--preset--color--signal-ink);outline-offset:4px}
.sqsw-rail__item{min-inline-size:0;scroll-snap-align:start;display:flex}
.sqsw-rail__item > .sq-pc{inline-size:100%}
/* Snap stays on. The carousel steps a card at a time rather than drifting, so the
   track always comes to rest on a card boundary and nothing is ever half off the
   edge — including before the script loads. */
.sqsw-rail__item > .sq-pc{block-size:100%}

/* Pause. Same size and shape as the arrows — it belongs to the same set of
   controls — with the glyph swapped on aria-pressed rather than by a class, so
   the picture and the announced state cannot disagree. */
.sqsw-rail__toggle{
  inline-size:42px;block-size:42px;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--sq-line);border-radius:50%;background:var(--sq-sheet);
  transition:border-color var(--wp--custom--transition--base),background var(--wp--custom--transition--base);
}
.sqsw-rail__toggle:hover{border-color:var(--sq-ink);background:var(--sq-soft)}
.sqsw-rail__toggle::before{
  content:"";inline-size:11px;block-size:12px;
  border-inline:3px solid var(--sq-ink);
}
.sqsw-rail__toggle[aria-pressed="true"]::before{
  inline-size:0;block-size:0;margin-inline-start:3px;
  border-inline:0;border-inline-start:11px solid var(--sq-ink);
  border-block:7px solid transparent;
}

.sqsw-more__cta{margin:clamp(30px,4vw,48px) 0 0;text-align:center}
.sqsw-cta{
  display:inline-flex;align-items:center;justify-content:center;min-block-size:50px;
  padding-inline:30px;border-radius:var(--wp--custom--radius--pill);
  background:var(--wp--preset--color--signal-ink);color:var(--wp--preset--color--on-signal);
  font-size: var(--sq-t-p3);font-weight: var(--sq-w-semibold);letter-spacing: var(--sq-ls-eyebrow);text-transform:uppercase;text-decoration:none;
  transition:filter var(--wp--custom--transition--base),transform var(--wp--custom--transition--base);
}
.sqsw-cta:hover{filter:brightness(.93);transform:translateY(-1px)}

/* The reviews block is shared with the catalogue layout, which sets it in the
   label-beside-content rhythm. Here it is a band like every other section. */
.sqsw .sqpp-reviews{
  display:block;grid-template-columns:none;
  margin-block-start:var(--sqpp-gap);padding-block-start:var(--sqpp-gap);
  border-block-start:1px solid var(--sq-line);
}
.sqsw .sqpp-reviews .sqpp-section__aside{max-inline-size:44ch;margin-block-end:clamp(28px,3.5vw,46px)}
.sqsw .sqpp-reviews .sqpp-section__aside h2{font-size: var(--sq-t-h1) !important;letter-spacing: var(--sq-ls-h1) !important}
.sqsw .sqpp-crumbs{border-block-end:0;margin-block-end:14px}

/* The gallery is shared with the catalogue layout, which mats plugin screenshots on a
   plate so a 4:3 UI shot and a 3:4 template mockup can sit in one grid. Here there is
   only ever one product's own artwork, shot 16:9 for this page, so it fills the frame
   the way the source listing shows it. `contain` rather than `cover` because a future
   screenshot at another ratio should letterbox, not lose its edges. */
.sqsw .sqpp-gallery__stage{aspect-ratio:16/9}
.sqsw .sqpp-gallery--contain .sqpp-gallery__stage{padding:0}
.sqsw .sqpp-gallery--contain .sqpp-gallery__stage img{
  inline-size:100%;block-size:100%;max-inline-size:none;max-block-size:none;object-fit:contain;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media(max-width:1100px){
  .sqsw-cards--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:1100px){
  /* The card stops being a sidebar and becomes a column; below this the preview
     needs more of the width than a 1.3/0.7 split leaves it. */
  .sqsw-hero{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
}
@media(max-width:900px){
  /* One column. Explicit placement is dropped so `order` decides, and the purchase
     card moves above the selling points: on a phone, seven bullets between the
     preview and the price is a long way to scroll to find out what it costs. */
  .sqsw-hero{grid-template-columns:1fr;row-gap:24px}
  .sqsw-hero__head,
  .sqsw-hero__media,
  .sqsw-hero .sqsw-points,
  .sqsw-hero__buy{grid-column:auto;grid-row:auto}
  .sqsw-hero__head{order:1}
  .sqsw-hero__media{order:2}
  .sqsw-hero__buy{order:3;position:static}
  .sqsw-hero .sqsw-points{order:4}
  /* Column-major only reads as columns when there are columns. Below this the cards
     stack, and the source order — which is the order the copy was written in — is
     restored by dropping back to row flow. */
  .sqsw-cards--3,.sqsw-cards--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sqsw-cards--major{grid-template-rows:none;grid-auto-flow:row}
  .sqsw-faq__layout{grid-template-columns:1fr;gap:26px}
  .sqsw-faq__intro{position:static}
  .sqsw-rail__track{grid-auto-columns:calc((100% - clamp(18px,2.4vw,30px)) / 2)}
  .sqsw-band{margin-block-start:52px;padding-block-start:52px}
  .sqsw-video{margin-block-start:52px}
}
@media(max-width:640px){
  .sqsw-cards--2,.sqsw-cards--3,.sqsw-cards--4{grid-template-columns:1fr}
  /* One whole card, not one and a sliver. A peek hints at more content and crops the
     card's own title and price to do it; the arrows say the same thing without
     cutting anything in half. */
  .sqsw-rail__track{grid-auto-columns:100%}
  /* The arrows would sit on top of a heading that is now three lines tall. */
  .sqsw-rail__nav{position:static;justify-content:flex-end;margin:0 0 16px}
  .sqsw-faq__answer{padding-inline:0 8px}
  .sqsw-faq__summary{gap:12px}
  .sqsw-bundle__tiers{gap:6px}
  .sqsw-video__play{inline-size:56px;block-size:56px}
  .sqsw-video__play::before{border-block-width:9px;border-inline-start-width:15px}
}

/* ── Motion ──────────────────────────────────────────────────────────────── */
/* Scroll reveal, gated on a class the script adds to <html>. The hidden state is
   therefore never applied unless something is there to remove it again: if the
   script fails to parse, or is blocked, the page renders fully visible rather
   than as a column of blank space. That ordering is the whole point — a reveal
   animation is the easiest way to ship an invisible page by accident. */
[data-sq-reveal]{--sq-step:0}
.sq-anim [data-sq-reveal]{
  opacity:0;transform:translateY(16px);
  transition:opacity .55s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1);
  /* Staggered by position, capped so a nine-card carousel does not spend a second
     and a half finishing its last card. */
  transition-delay:calc(min(var(--sq-step),5) * 70ms);
}
.sq-anim [data-sq-reveal].is-in{opacity:1;transform:none}
/* Nested reveals — cards inside a band — must not wait for the band to finish, so
   they observe themselves and carry their own delay. Nothing to do here beyond
   making sure the band's own transform does not create a containing block that
   would trap them; translateY on a parent is fine for that. */

/* The hero is above the fold: it fades in on load rather than on scroll, because
   an element already in view has no intersection to wait for. The four children
   come in in reading order — header, preview, points, purchase card. */
.sq-anim .sqsw-hero > *{
  animation:sqsw-rise .6s cubic-bezier(.22,.61,.36,1) backwards;
}
.sq-anim .sqsw-hero__head{animation-delay:.02s}
.sq-anim .sqsw-hero__media{animation-delay:.1s}
.sq-anim .sqsw-hero .sqsw-points{animation-delay:.16s}
.sq-anim .sqsw-hero__buy{animation-delay:.22s}
@keyframes sqsw-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* Reduced motion is honoured twice over: the script never adds `.sq-anim` when the
   preference is set, and these rules neutralise anything that slipped through —
   including the case where the reader changes the setting on an open page. */
@media(prefers-reduced-motion:reduce){
  .sqsw-licence__pick,.sqsw-licence__tick,.sqsw-buy,.sqsw-cta,.sqsw-video__play,
  .sqsw-faq__mark::before,.sqsw-faq__item,.sqsw-card__icon,.sqsw-rail__arrow,.sqsw-rail__toggle,
  .sqsw-util,.sqsw-creator__link{transition:none}
  .sqsw-cta:hover,.sqsw-card:hover .sqsw-card__icon{transform:none}
  .sqsw-buy:hover{transform:none}
  .sqsw-video__frame:hover .sqsw-video__play{transform:scale(1)}
  .sqsw-faq__item::details-content{transition:none}
  .sqsw-rail__track{scroll-behavior:auto}
  .sq-anim [data-sq-reveal]{opacity:1;transform:none;transition:none}
  .sq-anim .sqsw-hero > *{animation:none}
}

/* ════════════════════════════════════════════════════════════════════════════
   Creator profile
   The page a template card's creator link opens. Built as a collection browser
   rather than a bio page: the hero establishes who and what, the offer panel
   states the deal in full, and everything below it is the catalogue.
   ════════════════════════════════════════════════════════════════════════════ */

.sgp-creator__hero{display:flex;flex-direction:column;gap:20px}
.sgp-creator__identity{display:flex;align-items:center;gap:18px}
.sgp-creator__identity h1{margin:2px 0 0!important}

/* Until a creator supplies a logo this is their initials, not their borrowed mark. */
.sgp-creator__mark{
  flex:0 0 auto;inline-size:64px;block-size:64px;display:grid;place-items:center;
  border-radius:14px;background:var(--sq-ink);color:var(--sq-paper);
  font-size: var(--sq-t-h3);font-weight: var(--sq-w-bold);letter-spacing: var(--sq-ls-h2);overflow:hidden;
}
.sgp-creator__mark--logo{background:var(--sq-sheet);border:1px solid var(--sq-line);padding:6px}
.sgp-creator__mark img{inline-size:100%;block-size:100%;object-fit:contain;display:block}

.sgp-creator__chips{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0 0!important}
.sgp-creator__chip{
  display:inline-flex;align-items:center;min-block-size:26px;padding:0 10px;
  border:1px solid var(--sq-line);border-radius:999px;
  font-size: var(--sq-t-eyebrow);font-weight: var(--sq-w-semibold);letter-spacing: var(--sq-ls-h4);color:var(--sq-muted);
}
.sgp-creator__chip--platform{color:var(--sq-ink)}
.sgp-creator__chip--offer{
  background:var(--sq-signal);border-color:var(--sq-signal);color:var(--wp--preset--color--on-signal);
}
html[data-sq-theme="dark"] .sgp-creator__chip--offer{color:var(--wp--preset--color--dark-canvas)}

.sgp-creator__intro{max-inline-size:62ch;margin:0!important;font-size: var(--sq-t-p2);color:var(--sq-muted)}
.sgp-creator__cta{display:flex;flex-wrap:wrap;gap:10px}

/* ── Offer panel ─────────────────────────────────────────────────────────── */
/* A grid rather than a stack: on a wide screen the headline, the code and the
   arithmetic are three things read at once, and stacking them buries the number
   the reader came for. */
.sgp-offer{
  display:grid;gap:18px 28px;margin:32px 0 0;padding:26px;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  border:1px solid var(--sq-line);border-radius:14px;background:var(--sq-soft);
}
.sgp-offer__lead{grid-column:1;align-self:start}
.sgp-offer__headline{
  margin:8px 0 4px!important;font-size: var(--sq-t-h2) !important;line-height: var(--sq-lh-h1) !important;
  letter-spacing: var(--sq-ls-h1) !important;color:var(--sq-ink);
}
.sgp-offer__scope{margin:0;color:var(--sq-muted);font-size: var(--sq-t-p3)}

.sgp-offer__code{grid-column:2;grid-row:1/3;align-self:start}
.sgp-offer__code-row{display:flex;align-items:stretch;gap:0;margin-block-start:8px}
.sgp-offer__code-value{
  flex:1 1 auto;min-inline-size:0;display:flex;align-items:center;padding:0 14px;min-block-size:48px;
  border:1px dashed var(--sq-ink);border-inline-end:0;border-radius:9px 0 0 9px;
  background:var(--sq-sheet);color:var(--sq-ink);
  font-family:var(--sq-font-mono);
  font-size: var(--sq-t-p2);font-weight: var(--sq-w-semibold);letter-spacing: var(--sq-ls-eyebrow);overflow-wrap:anywhere;
}
.sgp-offer__copy{
  flex:0 0 auto;min-block-size:48px;padding:0 18px;cursor:pointer;
  border:1px solid var(--sq-ink);border-radius:0 9px 9px 0;
  background:var(--sq-ink);color:var(--sq-paper);
  font-size: var(--sq-t-p3);font-weight: var(--sq-w-bold);letter-spacing: var(--sq-ls-body);text-transform:uppercase;
  transition:background .15s ease,color .15s ease;
}
.sgp-offer__copy:hover{background:var(--sq-signal);border-color:var(--sq-signal);color:var(--wp--preset--color--on-signal)}
.sgp-offer__copy:focus-visible{outline:2px solid var(--sq-signal);outline-offset:2px}
.sgp-offer__copy.is-copied{background:var(--sq-good);border-color:var(--sq-good);color:var(--wp--preset--color--on-signal)}
.sgp-offer__validity{margin:9px 0 0;color:var(--sq-muted);font-size: var(--sq-t-p3)}

/* Tabular figures so the three amounts line up on their decimal points. */
.sgp-offer__maths{
  grid-column:1;display:grid;grid-template-columns:repeat(3,auto);gap:0 26px;
  margin:0;justify-content:start;font-variant-numeric:tabular-nums;
}
.sgp-offer__maths div{display:flex;flex-direction:column;gap:3px}
.sgp-offer__maths dt{color:var(--sq-muted);font-size: var(--sq-t-p3);letter-spacing: var(--sq-ls-body)}
.sgp-offer__maths dd{margin:0;font-size: var(--sq-t-h4);font-weight: var(--sq-w-semibold);color:var(--sq-ink)}
.sgp-offer__maths .is-saving{color:var(--sq-signal-ink)}

.sgp-offer__smallprint,.sgp-offer__howto{grid-column:1/-1;margin:0;color:var(--sq-muted);font-size: var(--sq-t-p3);line-height: var(--sq-lh-body);max-inline-size:74ch}
.sgp-offer__smallprint{margin-block-start:-8px}
.sgp-offer__cta{grid-column:1/-1;justify-self:start}
.sgp-offer__disclosure{
  grid-column:1/-1;margin:0;padding-block-start:16px;border-block-start:1px solid var(--sq-line);
  color:var(--sq-muted);font-size: var(--sq-t-p2);line-height: var(--sq-lh-body);max-inline-size:var(--sq-measure);
}
.sgp-offer__checked{display:block;margin-block-start:4px;opacity:.85}

/* ── Collection ──────────────────────────────────────────────────────────── */
.sgp-creator__collection-head{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px;
}
.sgp-creator__count{margin:0;color:var(--sq-muted);font-size: var(--sq-t-p3);font-variant-numeric:tabular-nums}

.sgp-creator__controls{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0 14px}
.sgp-creator__search{flex:1 1 280px;display:flex;min-inline-size:0}
.sgp-creator__search input{
  flex:1 1 auto;min-inline-size:0;min-block-size:44px;padding:0 14px;
  border:1px solid var(--sq-line);border-inline-end:0;border-radius:9px 0 0 9px;
  background:var(--sq-sheet);color:var(--sq-ink);font-size: var(--sq-t-p3);
}
.sgp-creator__search input:focus-visible{outline:2px solid var(--sq-signal);outline-offset:-1px}
.sgp-creator__search button{
  flex:0 0 auto;min-block-size:44px;padding:0 18px;cursor:pointer;
  border:1px solid var(--sq-line);border-radius:0 9px 9px 0;
  background:var(--sq-soft);color:var(--sq-ink);font-size: var(--sq-t-p3);font-weight: var(--sq-w-semibold);
}
.sgp-creator__search button:hover{background:var(--sq-ink);color:var(--sq-paper)}
.sgp-creator__sort{display:flex;align-items:center;gap:9px}
.sgp-creator__sort label{color:var(--sq-muted);font-size: var(--sq-t-p3)}
.sgp-creator__sort select{
  min-block-size:44px;padding:0 12px;border:1px solid var(--sq-line);border-radius:9px;
  background:var(--sq-sheet);color:var(--sq-ink);font-size: var(--sq-t-p3);
}

/* Horizontal strip: at fourteen industries a wrapped block would push the grid
   below the fold on a phone, and the counts make it scannable in one pass. */
.sgp-creator__industries{
  display:flex;gap:8px;margin-block-end:20px;padding-block-end:4px;
  overflow-x:auto;scrollbar-width:thin;
}
.sgp-creator__ind{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;min-block-size:34px;padding:0 13px;
  border:1px solid var(--sq-line);border-radius:999px;background:var(--sq-sheet);
  color:var(--sq-ink);font-size: var(--sq-t-p3);font-weight: var(--sq-w-semibold);text-decoration:none;white-space:nowrap;
}
.sgp-creator__ind span{color:var(--sq-muted);font-size: var(--sq-t-p3);font-variant-numeric:tabular-nums}
.sgp-creator__ind:hover{border-color:var(--sq-ink)}
.sgp-creator__ind:focus-visible{outline:2px solid var(--sq-signal);outline-offset:2px}
.sgp-creator__ind.is-active{background:var(--sq-ink);border-color:var(--sq-ink);color:var(--sq-paper)}
.sgp-creator__ind.is-active span{color:inherit;opacity:.7}

/* ── Pagination ──────────────────────────────────────────────────────────── */
.sgp-creator__pages{display:flex;flex-wrap:wrap;gap:7px;margin-block-start:28px}
.sgp-creator__page{
  min-inline-size:40px;min-block-size:40px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 12px;border:1px solid var(--sq-line);border-radius:9px;
  background:var(--sq-sheet);color:var(--sq-ink);font-size: var(--sq-t-p3);font-weight: var(--sq-w-semibold);text-decoration:none;
  font-variant-numeric:tabular-nums;
}
.sgp-creator__page:hover{border-color:var(--sq-ink)}
.sgp-creator__page:focus-visible{outline:2px solid var(--sq-signal);outline-offset:2px}
.sgp-creator__page.is-current{background:var(--sq-ink);border-color:var(--sq-ink);color:var(--sq-paper)}
.sgp-creator__page--step{font-weight: var(--sq-w-semibold);color:var(--sq-muted)}

/* ── Empty state ─────────────────────────────────────────────────────────── */
.sgp-creator__empty{
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  padding:40px 28px;border:1px dashed var(--sq-line);border-radius:14px;background:var(--sq-soft);
}
.sgp-creator__empty-title{margin:0;font-size: var(--sq-t-p1);font-weight: var(--sq-w-semibold);color:var(--sq-ink)}
.sgp-creator__empty-body{margin:0;color:var(--sq-muted);font-size: var(--sq-t-p3);max-inline-size:56ch}

.sgp-creator__body{max-inline-size:72ch}
.sgp-creator__body p{color:var(--sq-muted);line-height: var(--sq-lh-body)}
/* Matches every other section's top gap instead of its own tighter 36px, and the divider is
   a short rule rather than the full width — a hairline the full width of the page read as
   crowding the bordered box directly above it, closer to a stray line than a section break. */
.sgp-creator__footnote{
  margin:var(--sgc-gap) 0 0;
  color:var(--sq-muted);font-size: var(--sq-t-p2);line-height: var(--sq-lh-body);max-inline-size:var(--sq-measure);
}

@media(max-width:860px){
  .sgp-offer{grid-template-columns:1fr;padding:20px}
  .sgp-offer__lead,.sgp-offer__code,.sgp-offer__maths{grid-column:1;grid-row:auto}
  .sgp-offer__maths{grid-template-columns:1fr;gap:12px}
  .sgp-offer__maths div{flex-direction:row;align-items:baseline;justify-content:space-between;gap:16px}
  .sgp-offer__smallprint{margin-block-start:0}
  .sgp-offer__cta{justify-self:stretch;text-align:center}
  .sgp-creator__identity{gap:14px}
  .sgp-creator__mark{inline-size:52px;block-size:52px;font-size: var(--sq-t-h4);border-radius:12px}
  .sgp-creator__controls{flex-direction:column;gap:10px}
  .sgp-creator__sort{justify-content:space-between}
  /* The sort control and the search button both sit at the 14px interface floor, which
     is a little wider than the 13px they used to be. Neither could shrink, so the row
     ran 6px past a 320px viewport. Letting them shrink is the whole fix -- no size
     change, and the 44px tap targets are untouched. */
  .sgp-creator__sort select{flex:1 1 auto;min-inline-size:0;max-inline-size:100%}
  .sgp-creator__sort label{flex:0 0 auto}
  .sgp-creator__search button{padding:0 14px}
}
@media(prefers-reduced-motion:reduce){
  .sgp-offer__copy{transition:none}
}

/* The entity hero is painted dark in both themes (.sgp-entity__hero sets its own
   background and colour), so anything placed inside it has to take its palette
   from the hero rather than from the page tokens — --sq-ink is near-black in light
   mode and near-white in dark, and either one is wrong against a fixed dark ground.
   These are the only rules in the creator profile that hard-code a side. */
.sgp-creator__hero .sgp-creator__mark{
  background:var(--wp--preset--color--accent-contrast);
  color:var(--wp--preset--color--text);
}
.sgp-creator__hero .sgp-creator__mark--logo{
  background:var(--wp--preset--color--accent-contrast);
  border-color:transparent;
}
.sgp-creator__hero .sgp-creator__chip{
  border-color:var(--wp--preset--color--text-subtle);
  color:var(--wp--preset--color--border);
}
.sgp-creator__hero .sgp-creator__chip--platform{
  color:var(--wp--preset--color--accent-contrast);
  border-color:var(--wp--preset--color--border-strong);
}
.sgp-creator__hero .sgp-creator__chip--offer{
  background:var(--wp--preset--color--signal);
  border-color:var(--wp--preset--color--signal);
  color:var(--wp--preset--color--on-signal);
}
.sgp-creator__hero .sgp-creator__intro{color:var(--wp--preset--color--border)}
.sgp-creator__hero h1{margin:0!important;font-size: var(--sq-t-h1) !important}

/* Two buttons, one dominant. The shop link is the page's primary action so it takes
   the solid white fill; the catalogue link stays an outline beside it. */
.sgp-creator__cta .sgp-btn{
  min-block-size:46px;display:inline-flex;align-items:center;padding:0 20px;
  border:1px solid var(--wp--preset--color--border-strong);border-radius:9px;
  background:transparent;color:var(--wp--preset--color--accent-contrast);
  font-size: var(--sq-t-p3);font-weight: var(--sq-w-semibold);text-decoration:none;
}
.sgp-creator__cta .sgp-btn:hover{border-color:var(--wp--preset--color--accent-contrast)}
.sgp-creator__cta .sgp-btn--primary{
  background:var(--wp--preset--color--accent-contrast);
  border-color:var(--wp--preset--color--accent-contrast);
  color:var(--wp--preset--color--text);
}
.sgp-creator__cta .sgp-btn--primary:hover{
  background:var(--wp--preset--color--signal);border-color:var(--wp--preset--color--signal);color:var(--wp--preset--color--on-signal);
}
.sgp-creator__cta .sgp-btn:focus-visible{
  outline:2px solid var(--wp--preset--color--signal);outline-offset:3px;
}

/* The offer panel and empty state sit on the page, not the hero, so they keep the
   theme tokens — but their buttons need the same shape as the hero's. */
.sgp-offer__cta,.sgp-creator__empty .sgp-btn{
  min-block-size:46px;display:inline-flex;align-items:center;padding:0 20px;
  border:1px solid var(--sq-line);border-radius:9px;
  background:var(--sq-sheet);color:var(--sq-ink);
  font-size: var(--sq-t-p3);font-weight: var(--sq-w-semibold);text-decoration:none;
}
.sgp-offer__cta.sgp-btn--primary{background:var(--sq-ink);border-color:var(--sq-ink);color:var(--sq-paper)}
.sgp-offer__cta.sgp-btn--primary:hover{background:var(--sq-signal);border-color:var(--sq-signal);color:var(--wp--preset--color--on-signal)}
.sgp-creator__empty .sgp-btn:hover{border-color:var(--sq-ink)}
.sgp-offer__cta:focus-visible,.sgp-creator__empty .sgp-btn:focus-visible{
  outline:2px solid var(--sq-signal);outline-offset:2px;
}

/* ── Product-page offer ──────────────────────────────────────────────────── */
/* Sits inside the buy panel between the price and the button, so the code is read
   in the order it is used. Compact by design — the full terms and the disclosure
   live one link away on the creator profile rather than crowding the purchase. */
.sqpp-offer{
  display:flex;flex-direction:column;gap:9px;margin:16px 0 0;padding:15px 16px;
  border:1px solid color-mix(in srgb,var(--sq-signal) 35%,var(--sq-line));
  border-radius:11px;background:color-mix(in srgb,var(--sq-signal) 7%,var(--sq-sheet));
}
.sqpp-offer__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin:0!important}
.sqpp-offer__save{font-size: var(--sq-t-p2);font-weight: var(--sq-w-bold);letter-spacing: var(--sq-ls-h3);color:var(--sq-signal-ink)}
.sqpp-offer__validity{color:var(--sq-muted);font-size: var(--sq-t-p3)}

.sqpp-offer__code-row{display:flex;align-items:stretch}
.sqpp-offer__code{
  flex:1 1 auto;min-inline-size:0;display:flex;align-items:center;min-block-size:42px;padding:0 12px;
  border:1px dashed var(--sq-ink);border-inline-end:0;border-radius:8px 0 0 8px;
  background:var(--sq-sheet);color:var(--sq-ink);
  font-family:var(--sq-font-mono);
  font-size: var(--sq-t-p3);font-weight: var(--sq-w-semibold);letter-spacing: var(--sq-ls-eyebrow);overflow-wrap:anywhere;
}
.sqpp-offer__copy{
  flex:0 0 auto;min-block-size:42px;padding:0 15px;cursor:pointer;
  border:1px solid var(--sq-ink);border-radius:0 8px 8px 0;
  background:var(--sq-ink);color:var(--sq-paper);
  font-size: var(--sq-t-p3);font-weight: var(--sq-w-bold);letter-spacing: var(--sq-ls-body);text-transform:uppercase;
  transition:background .15s ease,border-color .15s ease;
}
.sqpp-offer__copy:hover{background:var(--sq-signal);border-color:var(--sq-signal);color:var(--wp--preset--color--on-signal)}
.sqpp-offer__copy:focus-visible{outline:2px solid var(--sq-signal);outline-offset:2px}
.sqpp-offer__copy.is-copied{background:var(--sq-good);border-color:var(--sq-good);color:var(--wp--preset--color--on-signal)}

.sqpp-offer__maths{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:9px;margin:0!important;
  font-variant-numeric:tabular-nums;
}
.sqpp-offer__was{color:var(--sq-muted);font-size: var(--sq-t-p3);text-decoration:line-through}
.sqpp-offer__now{font-size: var(--sq-t-h4);font-weight: var(--sq-w-bold);letter-spacing: var(--sq-ls-h2);color:var(--sq-ink)}
.sqpp-offer__delta{color:var(--sq-signal-ink);font-size: var(--sq-t-p3);font-weight: var(--sq-w-semibold)}
.sqpp-offer__note{margin:0!important;color:var(--sq-muted);font-size: var(--sq-t-p3);line-height: var(--sq-lh-supporting)}
.sqpp-offer__more{color:var(--sq-muted);font-size: var(--sq-t-p3);text-underline-offset:3px}
.sqpp-offer__more:hover{color:var(--sq-ink)}
.sqpp-offer__more:focus-visible{outline:2px solid var(--sq-signal);outline-offset:2px;border-radius:2px}

@media(prefers-reduced-motion:reduce){.sqpp-offer__copy{transition:none}}

/* The offer panel's code column is a control, not a canvas — at 1440px an
   unconstrained input stretched most of the panel width for an eleven-character
   code. */
.sgp-offer__code{max-inline-size:420px}

/* Facet counts. Pushed to the trailing edge so the creator names stay left-aligned
   and scannable — a count inline after each name makes a ragged column of labels.

   The filter row is a two-column grid (checkbox, label), so the count needs a third
   track or it wraps onto its own line under the name. Added only on rows that
   actually have a count, via :has(), so untouched rows keep their existing layout —
   and the track widths are restated at the one breakpoint that changes them. */
.sgp-filters__item:has(.sgp-filters__count){grid-template-columns:26px minmax(0,1fr) auto}
@media(max-width:899px){
  .sgp-filters__item:has(.sgp-filters__count){grid-template-columns:26px minmax(0,1fr) auto}
}
.sgp-filters__count{
  justify-self:end;padding-inline-start:10px;
  color:var(--sq-muted);font-size: var(--sq-t-p3);font-variant-numeric:tabular-nums;
}
.sgp-filters__item.is-active .sgp-filters__count{color:inherit;opacity:.75}

/* ═══════════════════════════════════════════════════════════════════════════
   DISCLOSURE NAVIGATION · site header
   ═══════════════════════════════════════════════════════════════════════════

   Replaces the four-mega-panel layer. `.sq-nav` is long gone from the markup;
   so now are the product card, the platform logos and the promotional block
   that used to live inside the panels. What is left is three columns of text
   and sprite icons.

   MOTION. Only `opacity` and `transform` are animated, at 150ms. No height
   animation, no `transition: all`, no backdrop filter, and the shadow is a
   static value rather than something that transitions. Everything is inside a
   `prefers-reduced-motion: no-preference` guard.

   COLOUR. `--sq-*` aliases only, never raw presets: the dark-mode preset remap
   is scoped `body:not(.home)`, so a header built on presets would have no dark
   mode on the homepage.
   ══════════════════════════════════════════════════════════════════════════ */

/* The sprite is a zero-size node, but belt and braces. */
.sgp-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Every icon on the page is a <use> reference; size is set here, once. */

/* Not positioned: the panel resolves against the header, not against its own
   ~100px-wide trigger. */

/* ── The panels ──────────────────────────────────────────────────────────────
   Three panels, three sizes. The previous version gave all three the same
   full-bleed 1220px sheet, which is why they read as "enormous white sheets
   detached from the navigation": a two-column list stretched that wide leaves
   most of the panel empty, and empty reads as broken.

   POSITIONING. The panel is anchored to the nav bar's own left edge, not the
   viewport's, via a custom property the bar sets on the header. It is clamped
   to 24px from either viewport edge so it can never overhang on a narrow
   laptop. `margin-block-start: 0` and `inset-block-start: 100%` mean there is
   no physical gap between trigger and panel for the pointer to fall through. */

/* `is-open` drives ONLY the fade — never hit-testing.
   It is added in requestAnimationFrame so the transition has a start state to
   move from, which meant a panel gated on it for `pointer-events` was still
   `none` for a frame after opening. That is exactly long enough for a pointer
   travelling into the panel to hit the page underneath instead, so the hover
   guard saw "not over the panel" and closed it. `hidden` is toggled
   synchronously by the controller, so a visible panel is interactive
   immediately and the fade is purely cosmetic. */

@media (prefers-reduced-motion: no-preference) {
	.sq-tile, .sq-chip, .sq-lead { transition: background 150ms ease, border-color 150ms ease; }
}

/* A bordered surface, not text floating in whitespace. */
.sq-tile {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	block-size: 100%;
	min-block-size: 44px;
	padding: 11px 12px;
	border: 1px solid transparent;
	border-radius: 11px;
	color: var(--sq-ink);
	text-decoration: none;
}

.sq-tile:hover,
.sq-tile:focus-visible { border-color: var(--sq-line); background: var(--sq-sheet); }

.sq-tile__icon {
	flex: none;
	display: grid;
	place-items: center;
	inline-size: 34px;
	block-size: 34px;
	border-radius: 9px;
	background: color-mix(in srgb, var(--sq-signal) 10%, transparent);
	color: var(--sq-signal-ink);
}

.sq-tile__glyph { inline-size: 18px; block-size: 18px; }
.sq-tile__body { min-inline-size: 0; }

.sq-tile__title {
	display: flex;
	align-items: baseline;
	gap: 7px;
	font-size: var(--sq-t-p3);
	font-weight: var(--sq-w-medium);
	line-height: var(--sq-lh-h4);
}

.sq-tile__count {
	padding: 1px 6px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--sq-soft);
	color: var(--sq-muted);
	font-size: var(--sq-t-eyebrow);
	font-weight: var(--sq-w-medium);
}

.sq-tile__desc {
	display: block;
	margin-block-start: 2px;
	color: var(--sq-muted);
	font-size: var(--sq-t-eyebrow);
	line-height: var(--sq-lh-eyebrow);
}

.sq-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-block-size: 44px;
	padding-inline: 12px;
	border: 1px solid var(--sq-line);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--sq-sheet);
	color: var(--sq-ink);
	font-size: var(--sq-t-eyebrow);
	font-weight: var(--sq-w-medium);
	text-decoration: none;
}

.sq-chip:hover,
.sq-chip:focus-visible { border-color: var(--sq-signal); }
/* The official brand mark sits on its own light plate: these are full-colour
   logos drawn for a light ground and they vanish on a dark surface. */
.sq-chip img { inline-size: 18px; block-size: 18px; }
.sq-chip b { color: var(--sq-muted); font-weight: var(--sq-w-medium); }

html[data-sq-theme="dark"] .sq-chip { background: var(--wp--preset--color--media-plate); color: var(--wp--preset--color--dark-canvas); }
html[data-sq-theme="dark"] .sq-chip b { color: var(--wp--preset--color--dark-canvas); opacity: 0.65; }

/* ── Feature cards ───────────────────────────────────────────────────────── */

.sq-feat {
	display: block;
	border: 1px solid var(--sq-line);
	border-radius: 12px;
	background: var(--sq-sheet);
	overflow: hidden;
	color: var(--sq-ink);
	text-decoration: none;
}

.sq-feat:hover { border-color: var(--sq-signal); }

/* Fixed ratio so the panel cannot resize as the image arrives. */
.sq-feat__media { display: block; aspect-ratio: 16 / 10; background: var(--sq-soft); }
.sq-feat__img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.sq-feat__body { display: grid; gap: 5px; padding: 12px 13px 14px; }
.sq-feat__title { font-size: var(--sq-t-p3); font-weight: var(--sq-w-medium); line-height: var(--sq-lh-h4); }
.sq-feat__meta, .sq-feat__price { color: var(--sq-muted); font-size: var(--sq-t-eyebrow); }
.sq-feat__price { color: var(--sq-ink); font-weight: var(--sq-w-medium); }
.sq-feat__cat { color: var(--sq-signal-ink); font-size: var(--sq-t-eyebrow); font-weight: var(--sq-w-medium); letter-spacing: var(--sq-ls-eyebrow); text-transform: uppercase; }
.sq-feat .sgp-badge { justify-self: start; }

/* ── Solutions: lead item, list, mosaic ──────────────────────────────────── */

.sq-lead {
	display: flex;
	align-items: center;
	gap: 11px;
	min-block-size: 44px;
	padding: 11px 12px;
	margin-block-end: 8px;
	border: 1px solid color-mix(in srgb, var(--sq-signal) 30%, transparent);
	border-radius: 11px;
	background: color-mix(in srgb, var(--sq-signal) 7%, transparent);
	color: var(--sq-ink);
	text-decoration: none;
}

.sq-lead:hover { border-color: var(--sq-signal); }
.sq-lead__icon { flex: none; display: grid; place-items: center; inline-size: 34px; block-size: 34px; border-radius: 9px; background: var(--sq-signal); color: var(--wp--preset--color--on-signal); }
.sq-lead strong { display: block; font-size: var(--sq-t-p3); font-weight: var(--sq-w-medium); }
.sq-lead small { display: block; margin-block-start: 1px; color: var(--sq-muted); font-size: var(--sq-t-eyebrow); }

/* Two columns by default in the medium panels. Six goals stacked in one column
   measured 461px against a 380px ceiling, which pushed "Grow a blog" and the
   coming-soon line behind a scrollbar — a dropdown that hides two of its own
   items. Three rows of two fits with room to spare. */

/* Four real product thumbnails from the leading goal. Never generated art. */
.sq-mosaic {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 4px;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid var(--sq-line);
}

.sq-mosaic img { inline-size: 100%; block-size: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: var(--sq-soft); }

/* ── Breakpoints ─────────────────────────────────────────────────────────── */

@media (min-width: 901px) and (max-width: 1100px) {
	/* Saved and Cart collapse to icons here — the drawer that would otherwise
	   carry them does not appear until 900px. The label is clipped, not
	   removed, so it is still the link's accessible name. */
	
}

/* ── WordPress admin bar ─────────────────────────────────────────────────────
   Fixed and 32px tall above 782px, and WordPress pushes the document down with
   `html { margin-top: 32px }`. A `position: sticky; top: 0` header ignores that
   once it detaches, so a logged-in editor's header slid under the admin bar on
   every scrolled page. Below 783px the bar is absolute and scrolls away, so
   only the fixed drawer needs clearing there. */

/* ═══════════════════════════════════════════════════════════════════════════
   MARKETPLACE HOMEPAGE · and the shared type / layout scale it establishes
   ═══════════════════════════════════════════════════════════════════════════

   THE SCALE. Headings across this site were set independently per page and had
   drifted badly: homepage H2s measured ~25px while blog H2s measured ~40px, and
   inner-page H1s ranged from 48px to over 76px. The `--wp--custom--type--*` and
   `--wp--custom--leading--*` tokens added to theme.json are now the one place
   those sizes are decided; `.sqh-h1` / `.sqh-h2` / `.sqh-h3` apply them.

   Deliberately applied by CLASS, not by element. A bare `h2 { font-size }` rule
   would reach into the product-detail layouts and the migrated showcase page,
   both of which set their own scale for good reasons. New and reworked surfaces
   opt in; nothing else moves.

   COLOUR is `--sq-*` throughout, never a raw preset — the dark-mode remap is
   scoped `body:not(.home)`, so a homepage built on presets would have no dark
   mode at all. See the mega-menu layer above for the full explanation.
   ══════════════════════════════════════════════════════════════════════════ */

.sqh-home,
.sqh-home *,
.sqh-home *::before,
.sqh-home *::after { box-sizing: border-box; }

.sqh-home {
	--sq-shell: var(--wp--custom--shell--content);
	--sq-gutter: var(--wp--custom--shell--gutter);
	--sq-section: var(--wp--custom--shell--section);
	--sq-gap: var(--wp--custom--shell--gap);
	--sq-tint: color-mix(in srgb, var(--sq-signal) 10%, transparent);
	--sq-lift: 0 1px 2px color-mix(in srgb, var(--sq-ink) 5%, transparent);
	--sq-lift-hover: 0 8px 24px color-mix(in srgb, var(--sq-ink) 10%, transparent);

	display: block;
	max-inline-size: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: var(--sq-paper);
	color: var(--sq-ink);
}

/* One shell for every row on the page, so nothing is 6px out of line with the
   thing above it. */
.sqh-wrap {
	inline-size: 100%;
	max-inline-size: calc(var(--sq-shell) + (var(--sq-gutter) * 2));
	margin-inline: auto;
	padding-inline: var(--sq-gutter);
}

/* ── Type ────────────────────────────────────────────────────────────────── */

.sqh-home .sqh-h2,
.sqh-trust .sqh-h2 {
	margin: 0;
	font-size: var(--sq-t-h2) !important;
	line-height: var(--sq-lh-h2) !important;
	letter-spacing: var(--sq-ls-h1);
	font-weight: var(--sq-w-medium);
	color: var(--sq-ink);
}

.sqh-hero__title {
	margin: 12px 0 0;
	font-size: var(--sq-t-h1) !important;
	line-height: var(--sq-lh-h1) !important;
	letter-spacing: var(--sq-ls-h1);
	font-weight: var(--sq-w-medium);
	color: var(--sq-ink);
}

.sqh-hero__title em { font-style: normal; color: var(--sq-signal-ink); }

.sqh-eyebrow {
	margin: 0;
	font-size: var(--sq-t-eyebrow);
	font-weight: var(--sq-w-medium);
	letter-spacing: var(--sq-ls-eyebrow);
	text-transform: uppercase;
	color: var(--sq-signal-ink);
}

/* ── Section furniture ───────────────────────────────────────────────────── */

.sqh-home > section,
.sqh-home > .sqh-wrap:first-of-type { display: block; }

.sqh-shead {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-block: var(--sq-section) 24px;
}

.sqh-shead__text {
	margin: 8px 0 0;
	max-inline-size: 62ch;
	font-size: var(--sq-t-p2);
	line-height: var(--sq-lh-body);
	color: var(--sq-muted);
}

.sqh-shead__link {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-block-size: 44px;
	color: var(--sq-ink);
	font-size: var(--sq-t-p3);
	font-weight: var(--sq-w-medium);
	text-decoration: none;
	white-space: nowrap;
}

.sqh-shead__link:hover { color: var(--sq-signal-ink); }
.sqh-btn__arrow { inline-size: 16px; block-size: 16px; flex: none; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.sqh-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-block-size: 48px;
	padding-inline: 22px;
	border: 1px solid transparent;
	border-radius: var(--wp--custom--radius--md);
	font-family: inherit;
	font-size: var(--sq-t-p2);
	font-weight: var(--sq-w-medium);
	line-height: var(--sq-lh-h1);
	text-decoration: none;
	cursor: pointer;
}

.sqh-btn--primary { background: var(--sq-signal); color: var(--wp--preset--color--on-signal); }
.sqh-btn--primary:hover { background: var(--sq-ink); color: var(--sq-paper); }
.sqh-btn--ghost { border-color: var(--sq-line); background: var(--sq-sheet); color: var(--sq-ink); }
.sqh-btn--ghost:hover { border-color: var(--sq-ink); }

.sqh-home :focus-visible {
	outline: 2px solid var(--sq-signal);
	outline-offset: 2px;
	border-radius: var(--wp--custom--radius--sm);
}

/* ── 1 · Hero ────────────────────────────────────────────────────────────── */

.sqh-hero { padding-block: clamp(32px, 5vw, 64px) 0; }

.sqh-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
	gap: clamp(32px, 4vw, 64px);
	align-items: start;
}

.sqh-hero__lede {
	margin: 20px 0 0;
	max-inline-size: 56ch;
	font-size: var(--sq-t-p1);
	line-height: var(--sq-lh-body);
	color: var(--sq-muted);
}

.sqh-hero__search {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px;
	margin-block-start: 28px;
	padding: 6px 6px 6px 16px;
	border: 1px solid var(--sq-line);
	border-radius: var(--wp--custom--radius--md);
	background: var(--sq-sheet);
}

.sqh-hero__search:focus-within {
	border-color: var(--sq-signal);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--sq-signal) 15%, transparent);
}

.sqh-hero__search-glyph { inline-size: 20px; block-size: 20px; color: var(--sq-signal-ink); }

.sqh-hero__search input {
	min-inline-size: 0;
	min-block-size: 48px;
	border: 0 !important;
	background: transparent !important;
	padding: 0 !important;
	outline: 0;
	color: var(--sq-ink);
	font-size: var(--sq-t-p2);
}

.sqh-hero__alt { margin: 14px 0 0; }

.sqh-hero__trust {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
}

.sqh-hero__trust li {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: var(--sq-t-p3);
	color: var(--sq-muted);
}

.sqh-hero__trust-glyph { inline-size: 16px; block-size: 16px; color: var(--sq-good); }

/* The panel is a real catalogue card, not a mockup. It is the only product on
   the page above the fold, so it carries the full card rather than a summary. */
.sqh-hero__panel {
	padding: 18px;
	border: 1px solid var(--sq-line);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--sq-soft);
}

/* An <h2>, so it needs its own size reset — the shared heading rules would
   otherwise render a 2.5rem section title inside a 300px panel. */
.sqh-hero__panel-head {
	font-size: var(--sq-t-eyebrow) !important;
	line-height: var(--sq-lh-h4) !important;
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	font-size: var(--sq-t-eyebrow);
	font-weight: var(--sq-w-medium);
	letter-spacing: var(--sq-ls-eyebrow);
	text-transform: uppercase;
	color: var(--sq-muted);
}

.sqh-hero__panel-glyph { inline-size: 15px; block-size: 15px; }

.sqh-hero__panel-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-block-size: 44px;
	margin-block-start: 6px;
	color: var(--sq-ink);
	font-size: var(--sq-t-p3);
	font-weight: var(--sq-w-medium);
	text-decoration: none;
}

.sqh-hero__panel-link:hover { color: var(--sq-signal-ink); }

/* Live inventory, replacing the invented "4.9/5 from 2,400+ users". */
.sqh-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 0;
	margin: clamp(32px, 4vw, 56px) 0 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--sq-line);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--sq-sheet);
	overflow: hidden;
}

.sqh-stats li + li { border-inline-start: 1px solid var(--sq-line); }

.sqh-stats a {
	display: block;
	padding: 22px 24px;
	color: var(--sq-ink);
	text-decoration: none;
}

.sqh-stats a:hover { background: var(--sq-soft); }
.sqh-stats strong { display: block; font-size: var(--sq-t-h3); font-weight: var(--sq-w-medium); letter-spacing: var(--sq-ls-h1); }
.sqh-stats span { display: block; margin-block-start: 3px; font-size: var(--sq-t-p3); color: var(--sq-muted); }

/* ── 2 · Category cards ──────────────────────────────────────────────────── */

.sqh-cats,
.sqh-plats,
.sqh-goals,
.sqh-creators,
.sqh-posts { margin: 0; padding: 0; list-style: none; }

.sqh-cats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }

.sqh-cat {
	display: flex;
	flex-direction: column;
	gap: 6px;
	block-size: 100%;
	min-block-size: 168px;
	padding: 22px;
	border: 1px solid var(--sq-line);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--sq-sheet);
	color: var(--sq-ink);
	text-decoration: none;
	box-shadow: var(--sq-lift);
}

.sqh-cat:hover,
.sqh-cat:focus-visible { border-color: var(--sq-signal); box-shadow: var(--sq-lift-hover); }

.sqh-cat__icon,
.sqh-goal__icon {
	display: grid;
	place-items: center;
	inline-size: 42px;
	block-size: 42px;
	margin-block-end: 8px;
	border-radius: var(--wp--custom--radius--md);
	background: var(--sq-tint);
	color: var(--sq-signal-ink);
}

.sqh-cat__glyph { inline-size: 22px; block-size: 22px; }
.sqh-cat__name { font-size: var(--sq-t-h4); font-weight: var(--sq-w-medium); letter-spacing: var(--sq-ls-h3); line-height: var(--sq-lh-ui); }
.sqh-cat__desc { font-size: var(--sq-t-p3); line-height: var(--sq-lh-eyebrow); color: var(--sq-muted); }

.sqh-cat__count {
	margin-block-start: auto;
	padding-block-start: 12px;
	font-size: var(--sq-t-p3);
	font-weight: var(--sq-w-medium);
	color: var(--sq-ink);
}

.sqh-cat__count em,
.sqh-plat__count em { font-style: italic; font-weight: var(--sq-w-regular); color: var(--sq-muted); }
.sqh-cat.is-soon .sqh-cat__icon { opacity: 0.5; }
.sqh-cat.is-soon .sqh-cat__name { color: var(--sq-muted); }

/* ── 3 & 4 · Product grids ───────────────────────────────────────────────── */

/* Four across at the content width gives ~292px cards — the catalogue card was
   drawn for that, and the six-across homepage row it replaces gave it 190px,
   which is where the truncated titles and unreadable metadata came from. */
.sqh-grid { display: grid; gap: var(--sq-gap); }
.sqh-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ── 4 · Tabs ────────────────────────────────────────────────────────────── */

.sqh-tabs__bar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-block-end: 22px;
}

.sqh-tabs__tab {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	padding-inline: 18px;
	border: 1px solid var(--sq-line);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--sq-sheet);
	color: var(--sq-muted);
	font-size: var(--sq-t-p3);
	font-weight: var(--sq-w-medium);
	cursor: pointer;
}

.sqh-tabs__tab:hover { color: var(--sq-ink); border-color: var(--sq-ink); }

/* No JavaScript anywhere in this component: the radios hold the state and CSS
   shows the matching panel. Every panel's markup is in the document, so all
   four sets of products are reachable with scripting off. */
.sqh-tabs__panel { display: none; }
.sqh-tabs__radio:checked + .sqh-tabs__tab { background: var(--sq-ink); border-color: var(--sq-ink); color: var(--sq-paper); }
.sqh-tabs__radio:focus-visible + .sqh-tabs__tab { outline: 2px solid var(--sq-signal); outline-offset: 2px; }

.sqh-tabs:has(#sqh-pick-plugins:checked)   [data-sqh-pick="plugins"],
.sqh-tabs:has(#sqh-pick-templates:checked) [data-sqh-pick="templates"],
.sqh-tabs:has(#sqh-pick-free:checked)      [data-sqh-pick="free"],
.sqh-tabs:has(#sqh-pick-new:checked)       [data-sqh-pick="new"] { display: block; }

.sqh-tabs__more { margin: 22px 0 0; }

.sqh-tabs__more a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-block-size: 44px;
	color: var(--sq-ink);
	font-size: var(--sq-t-p3);
	font-weight: var(--sq-w-medium);
	text-decoration: none;
}

.sqh-tabs__more a:hover { color: var(--sq-signal-ink); }

/* ── 5 · Platforms ───────────────────────────────────────────────────────── */

.sqh-plats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }

.sqh-plats a {
	display: flex;
	align-items: center;
	gap: 14px;
	min-block-size: 76px;
	padding: 14px 18px;
	border: 1px solid var(--sq-line);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--sq-sheet);
	color: var(--sq-ink);
	text-decoration: none;
}

.sqh-plats a:hover,
.sqh-plats a:focus-visible { border-color: var(--sq-signal); background: var(--sq-soft); }

/* Pinned to media-plate, not --sq-soft: vendor logos are full-colour marks
   drawn for a light ground and vanish on a dark plate. Same call as the mega
   menu's platform tiles. */
.sqh-plat__mark {
	flex: none;
	display: grid;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--media-plate);
	color: var(--wp--preset--color--dark-canvas);
}

.sqh-plat__mark img { inline-size: 26px; block-size: 26px; }
.sqh-plat__mark b { font-size: var(--sq-t-h4); font-weight: var(--sq-w-medium); }
.sqh-plat__name { font-size: var(--sq-t-p2); font-weight: var(--sq-w-medium); }
.sqh-plat__count { margin-inline-start: auto; font-size: var(--sq-t-p3); color: var(--sq-muted); white-space: nowrap; }

/* ── 6 · Goals ───────────────────────────────────────────────────────────── */

.sqh-goals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sq-gap); }

.sqh-goal {
	display: flex;
	flex-direction: column;
	block-size: 100%;
	min-block-size: 210px;
	padding: 26px;
	border: 1px solid var(--sq-line);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--sq-sheet);
	color: var(--sq-ink);
	text-decoration: none;
	box-shadow: var(--sq-lift);
}

.sqh-goal:hover,
.sqh-goal:focus-visible { border-color: var(--sq-signal); box-shadow: var(--sq-lift-hover); }
.sqh-goal__name { font-size: var(--sq-t-h4); font-weight: var(--sq-w-medium); letter-spacing: var(--sq-ls-h3); line-height: var(--sq-lh-ui); }
.sqh-goal__desc { margin-block-start: 7px; font-size: var(--sq-t-p3); line-height: var(--sq-lh-supporting); color: var(--sq-muted); }

.sqh-goal__cta {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-block-start: auto;
	padding-block-start: 18px;
	font-size: var(--sq-t-p3);
	font-weight: var(--sq-w-medium);
	color: var(--sq-signal-ink);
}

.sqh-goal.is-soon .sqh-goal__icon { opacity: 0.5; }

/* ── 7 · Creators ────────────────────────────────────────────────────────── */

.sqh-creators { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sq-gap); }

.sqh-creator {
	display: flex;
	flex-direction: column;
	block-size: 100%;
	padding: 24px;
	border: 1px solid var(--sq-line);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--sq-sheet);
	color: var(--sq-ink);
	text-decoration: none;
	box-shadow: var(--sq-lift);
}

.sqh-creator:hover,
.sqh-creator:focus-visible { border-color: var(--sq-signal); box-shadow: var(--sq-lift-hover); }

/* No vendor in this catalogue has a logo, so a lettermark is the honest visual
   rather than a stretched placeholder. */
.sqh-creator__mark {
	display: grid;
	place-items: center;
	inline-size: 46px;
	block-size: 46px;
	margin-block-end: 16px;
	border-radius: var(--wp--custom--radius--md);
	background: var(--sq-tint);
	color: var(--sq-signal-ink);
	font-size: var(--sq-t-h4);
	font-weight: var(--sq-w-medium);
}

.sqh-creator__name { font-size: var(--sq-t-p2); font-weight: var(--sq-w-medium); line-height: var(--sq-lh-h4); }
.sqh-creator__plats { margin-block-start: 5px; font-size: var(--sq-t-p3); color: var(--sq-muted); }
.sqh-creator__count { margin-block-start: auto; padding-block-start: 16px; font-size: var(--sq-t-p3); font-weight: var(--sq-w-medium); }

.sqh-creator__rel {
	align-self: flex-start;
	margin-block-start: 10px;
	padding: 3px 9px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--sq-soft);
	font-size: var(--sq-t-eyebrow);
	color: var(--sq-muted);
}

/* ── 8 · Guides ──────────────────────────────────────────────────────────── */

.sqh-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sq-gap); }

.sqh-post {
	display: flex;
	flex-direction: column;
	block-size: 100%;
	border: 1px solid var(--sq-line);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--sq-sheet);
	overflow: hidden;
	box-shadow: var(--sq-lift);
}

.sqh-post:hover { border-color: var(--sq-signal); box-shadow: var(--sq-lift-hover); }

/* Explicit ratio so the row never reflows as images arrive. */
.sqh-post__media { aspect-ratio: 16 / 9; background: var(--sq-soft); }
.sqh-post__img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.sqh-post__body { display: flex; flex-direction: column; flex: 1; padding: 22px; }
.sqh-post__cat { margin: 0 0 8px; font-size: var(--sq-t-eyebrow); font-weight: var(--sq-w-medium); letter-spacing: var(--sq-ls-eyebrow); text-transform: uppercase; color: var(--sq-signal-ink); }
.sqh-post__title { margin: 0; font-size: var(--sq-t-h4) !important; line-height: var(--sq-lh-h4) !important; font-weight: var(--sq-w-medium); letter-spacing: var(--sq-ls-h3); }
.sqh-post__title a { color: var(--sq-ink); text-decoration: none; }
.sqh-post__title a:hover { color: var(--sq-signal-ink); }
.sqh-post__excerpt { margin: 10px 0 0; font-size: var(--sq-t-p3); line-height: var(--sq-lh-supporting); color: var(--sq-muted); }

.sqh-post__meta {
	display: flex;
	gap: 14px;
	margin: 16px 0 0;
	padding-block-start: 14px;
	border-block-start: 1px solid var(--sq-line);
	font-size: var(--sq-t-p3);
	color: var(--sq-muted);
}

/* ── 9 · Trust ───────────────────────────────────────────────────────────── */

.sqh-trust {
	margin-block-start: var(--sq-section);
	padding-block: clamp(48px, 6vw, 84px);
	background: var(--sq-soft);
	border-block: 1px solid var(--sq-line);
}

.sqh-trust__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(32px, 4vw, 64px);
	align-items: start;
}

.sqh-trust__lead .sqh-h2 { margin-block-start: 12px; }
.sqh-trust__text { margin: 18px 0 26px; font-size: var(--sq-t-p1); line-height: var(--sq-lh-body); color: var(--sq-muted); }
.sqh-trust__points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 32px; margin: 0; padding: 0; list-style: none; }
.sqh-trust__points li { display: flex; gap: 14px; }
.sqh-trust__glyph { flex: none; inline-size: 22px; block-size: 22px; color: var(--sq-good); margin-block-start: 2px; }
.sqh-trust__points h3 { margin: 0 0 6px !important; font-size: var(--sq-t-p2) !important; font-weight: var(--sq-w-medium) !important; line-height: var(--sq-lh-eyebrow) !important; color: var(--sq-ink); }
.sqh-trust__points p { margin: 0; font-size: var(--sq-t-p3); line-height: var(--sq-lh-supporting); color: var(--sq-muted); }

/* ── Responsive ──────────────────────────────────────────────────────────── */

/* At 1280 the 48px gutter left four cards at 277px — three under the 280px
   floor the card was drawn for. Capping the gutter at 40px between 1200 and
   1400 puts them back at 281px without dropping to a three-up row, which is
   the wrong answer at a width that comfortably holds four. */
@media (min-width: 1200px) and (max-width: 1399px) {
	.sqh-home { --sq-gutter: 40px; }
}

@media (max-width: 1180px) {
	.sqh-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sqh-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sqh-creators { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
	.sqh-hero__inner { grid-template-columns: minmax(0, 1fr); }
	.sqh-hero__panel { max-inline-size: 420px; }
	.sqh-trust__inner { grid-template-columns: minmax(0, 1fr); }
	.sqh-plats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sqh-goals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
	.sqh-shead { flex-direction: column; align-items: flex-start; gap: 12px; }
	.sqh-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sqh-posts { grid-template-columns: minmax(0, 1fr); }
	.sqh-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sqh-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sqh-stats li + li { border-inline-start: 0; }
	.sqh-stats li { border-block-start: 1px solid var(--sq-line); }
	.sqh-stats li:nth-child(-n+2) { border-block-start: 0; }
	.sqh-stats li:nth-child(even) { border-inline-start: 1px solid var(--sq-line); }
	.sqh-trust__points { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
	/* One column. A two-up product grid at 390px gives ~170px cards, which is
	   the unreadable size this redesign exists to get away from. */
	.sqh-grid--4 { grid-template-columns: minmax(0, 1fr); }
	.sqh-goals { grid-template-columns: minmax(0, 1fr); }
	.sqh-creators { grid-template-columns: minmax(0, 1fr); }
	/* Platforms stay two-up: they are a compact index, not content, and eight
	   full-width blocks is the wall of logos this section was moved to avoid. */
	.sqh-plats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sqh-plats a { flex-direction: column; align-items: flex-start; gap: 10px; min-block-size: 116px; }
	.sqh-plat__count { margin-inline-start: 0; }
	.sqh-cat { min-block-size: 0; padding: 18px; }
	.sqh-hero__search { grid-template-columns: auto minmax(0, 1fr); row-gap: 6px; padding: 10px 14px; }
	.sqh-hero__search .sqh-btn { grid-column: 1 / -1; }
	.sqh-hero__panel { max-inline-size: none; }
}

/* Buttons and links keep a real hit area on touch. */
@media (hover: none) {
	.sqh-cat, .sqh-goal, .sqh-creator, .sqh-plats a { min-block-size: 44px; }
}

/* ── Catalogue card touch targets ────────────────────────────────────────────
   The shared card shrinks its controls below 560px — `.sq-pc__act` to 42px and
   `.sq-pc__save` to 28px — which inverts the rule it should follow: a control
   needs MORE room on a phone, not less. Both are under the 44px minimum in
   WCAG 2.5.8, on the only viewport where the target is a fingertip.

   Restored here rather than by editing the rules above, because those live on
   minified lines shared with unrelated declarations. Nothing about the card's
   appearance changes at desktop width. */

@media (max-width: 900px) {
	.sq-pc__act { min-block-size: 44px; }
	/* Not the compact rail: its card is a third the width and a 44px disc would
	   cover the image it sits on. That variant only ever appears in a
	   related-products strip, never as the primary way to reach a product. */
	.sq-pc:not(.sq-pc--ctx-compact) .sq-pc__save { inline-size: 44px; block-size: 44px; }
}

/* ── WordPress admin bar ─────────────────────────────────────────────────────
   The admin bar is `position: fixed` at 32px tall for logged-in users on
   viewports above 782px, and WordPress pushes the document down with
   `html { margin-top: 32px }`. A `position: sticky; top: 0` header ignores that
   margin once it detaches, so on any scrolled page an editor's header slid
   underneath the admin bar and the primary navigation went with it.

   Below 783px the admin bar is `position: absolute` and scrolls away with the
   document, so the sticky header needs no offset there — but the drawer, which
   is `position: fixed`, still has to clear it at the top of the page. */

@media (max-width: 782px) {
	/* Absolute, and 46px tall at this width. */
	
}

/* ── Card: single outbound action, and the honest media fallback ─────────────
   The stacked "View details" + "Buy from …" pair is gone. "View details" only
   ever duplicated the card's own stretched link, so two full-width buttons sat
   under every title pointing where a click on the card already went. What is
   left is the one action the card link cannot perform: leaving the site. */

.sq-pc__act--out {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	inline-size: 100%;
	min-block-size: 44px;
	padding-inline: 14px;
	border: 1px solid var(--sq-line);
	border-radius: var(--wp--custom--radius--md);
	background: transparent;
	color: var(--sq-ink);
	font-size: var(--sq-t-eyebrow);
	font-weight: var(--sq-w-medium);
	text-decoration: none;
	/* Above the card's stretched title link, which covers the whole card. */
	position: relative;
	z-index: 2;
}

/* Coral on hover, not grey.
   This rule sits after `.sq-pc__act--buy:hover` above and has the same specificity, so a
   neutral background here was quietly cancelling the brand hover on every outbound card
   button, on the browse grid and in the related rail alike. The outbound action is the
   card's primary one and should look like it. */
.sq-pc__act--out:hover,
.sq-pc__act--out:focus-visible {
	background: var(--sq-signal);
	border-color: var(--sq-signal);
	color: var(--wp--preset--color--on-signal);
}
html[data-sq-theme="dark"] .sq-pc__act--out:hover,
html[data-sq-theme="dark"] .sq-pc__act--out:focus-visible { color: var(--wp--preset--color--dark-canvas); }
.sq-pc__act-glyph { inline-size: 14px; block-size: 14px; flex: none; opacity: 0.7; }

/* Branded placeholder. Fills the same fixed media box the real image would, so
   a product with no picture cannot shift the row it sits in. */
.sq-pc__img--none {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	inline-size: 100%;
	block-size: 100%;
	background:
		repeating-linear-gradient(
			135deg,
			transparent 0 10px,
			color-mix(in srgb, var(--sq-signal) 5%, transparent) 10px 20px
		),
		var(--sq-soft);
	color: var(--sq-muted);
	font-size: var(--sq-t-eyebrow);
	font-weight: var(--sq-w-medium);
	text-align: center;
}

.sq-pc__img-glyph { inline-size: 22px; block-size: 22px; color: var(--sq-signal-ink); opacity: 0.6; }

/* ── Homepage: evidence strip and statistics band ────────────────────────────
   Two sections split out of the hero so the page reads argument-first: what
   this is, why it can be trusted, how big it actually is. The strip is the
   short form of the methodology section at the foot of the page — those are
   the only two places the trust claims appear, down from three. */

.sqh-evidence {
	border-block: 1px solid var(--sq-line);
	background: var(--sq-sheet);
}

.sqh-evidence__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px 32px;
	margin: 0;
	padding-block: 18px;
	list-style: none;
}

.sqh-evidence__list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: var(--sq-t-p3);
	line-height: var(--sq-lh-eyebrow);
	color: var(--sq-muted);
}

.sqh-evidence__list strong { color: var(--sq-ink); font-weight: var(--sq-w-medium); }
.sqh-evidence__glyph { flex: none; inline-size: 18px; block-size: 18px; color: var(--sq-good); margin-block-start: 1px; }

.sqh-statsec { padding-block: clamp(28px, 3vw, 44px); }

@media (max-width: 820px) {
	.sqh-evidence__list { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}

/* ── Canonical card metrics ──────────────────────────────────────────────────
   One card, one set of measurements, used by the homepage, browse, archives,
   search, platform and creator pages alike. The body was padded 14/15/15,
   which reads tight against a 20px grid gap and left the price and the outbound
   action closer to the card edge than to each other.

   The compact rail keeps its own tighter padding: it is a fifth-width strip far
   down a page, not a primary entry point. */

.sq-pc:not(.sq-pc--ctx-compact) .sq-pc__body { padding: 20px; gap: 5px; }
.sq-pc:not(.sq-pc--ctx-compact) .sq-pc__actions { margin-block-start: 14px; }

/* Two lines, then ellipsis — a title is allowed to wrap but never to push the
   price and action out of alignment with the card beside it. */
.sq-pc__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* The drawer wordmark measured 40px — under the 44px touch minimum, on the one
   viewport where every target is a fingertip. */

/* ═══════════════════════════════════════════════════════════════════════════
   SELL ON SQUARESPELL · creator recruitment page and application form
   ═══════════════════════════════════════════════════════════════════════════

   Namespaced `sqs-` for the same reason the homepage is namespaced `sqh-`: the
   short `sq-` prefix carries several layers of accumulated `!important` from
   retired designs, and a new surface that inherits them is a surface that
   fights them forever.

   Reuses the shared type scale (`--wp--custom--type--*`) and the `--sq-*`
   colour aliases, which are the ones remapped for dark mode. No new tokens,
   no redesign of the header, footer, cards or typography.
   ══════════════════════════════════════════════════════════════════════════ */

.sqs-page,
.sqs-page *,
.sqs-page *::before,
.sqs-page *::after { box-sizing: border-box; }

.sqs-page {
	display: block;
	max-inline-size: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: var(--sq-paper);
	color: var(--sq-ink);
}

.sqs-wrap {
	inline-size: 100%;
	max-inline-size: calc(var(--wp--custom--shell--content) + (var(--wp--custom--shell--gutter) * 2));
	margin-inline: auto;
	padding-inline: var(--wp--custom--shell--gutter);
}

.sqs-wrap--narrow { max-inline-size: 860px; }

.sqs-section { padding-block: var(--wp--custom--shell--section); }
.sqs-section + .sqs-section { padding-block-start: 0; }

/* ── Type ────────────────────────────────────────────────────────────────── */

.sqs-h1 {
	margin: 14px 0 0;
	font-size: var(--sq-t-h1) !important;
	line-height: var(--sq-lh-h1) !important;
	letter-spacing: var(--sq-ls-h1);
	font-weight: var(--sq-w-medium);
	max-inline-size: 20ch;
}

.sqs-h2 {
	margin: 0;
	font-size: var(--sq-t-h2) !important;
	line-height: var(--sq-lh-h2) !important;
	letter-spacing: var(--sq-ls-h2);
	font-weight: var(--sq-w-medium);
	color: var(--sq-ink);
}

.sqs-eyebrow {
	margin: 0;
	font-size: var(--sq-t-eyebrow);
	font-weight: var(--sq-w-medium);
	letter-spacing: var(--sq-ls-eyebrow);
	text-transform: uppercase;
	color: var(--sq-signal-ink);
}

.sqs-lede {
	margin: 18px 0 0;
	max-inline-size: 62ch;
	font-size: var(--sq-t-p1);
	line-height: var(--sq-lh-body);
	color: var(--sq-muted);
}

.sqs-section__text {
	margin: 10px 0 26px;
	max-inline-size: 68ch;
	font-size: var(--sq-t-p2);
	line-height: var(--sq-lh-body);
	color: var(--sq-muted);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.sqs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-block-size: 48px;
	padding-inline: 24px;
	border: 1px solid transparent;
	border-radius: var(--wp--custom--radius--md);
	font-family: inherit;
	font-size: var(--sq-t-p2);
	font-weight: var(--sq-w-medium);
	line-height: var(--sq-lh-h1);
	text-decoration: none;
	cursor: pointer;
}

.sqs-btn--primary { background: var(--sq-signal); color: var(--wp--preset--color--on-signal); }
.sqs-btn--primary:hover { background: var(--sq-ink); color: var(--sq-paper); }
.sqs-btn--ghost { border-color: var(--sq-line); background: var(--sq-sheet); color: var(--sq-ink); }
.sqs-btn--ghost:hover { border-color: var(--sq-ink); }
.sqs-btn[disabled] { opacity: 0.6; cursor: progress; }

.sqs-page :focus-visible {
	outline: 2px solid var(--sq-signal);
	outline-offset: 2px;
	border-radius: var(--wp--custom--radius--sm);
}

/* ── Hero ────────────────────────────────────────────────────────────────── */

.sqs-hero { padding-block: clamp(36px, 5vw, 72px) 0; }
.sqs-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 0; }

.sqs-note {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 22px 0 0;
	max-inline-size: 60ch;
	font-size: var(--sq-t-p3);
	line-height: var(--sq-lh-supporting);
	color: var(--sq-muted);
}

.sqs-note__glyph { flex: none; inline-size: 17px; block-size: 17px; margin-block-start: 1px; color: var(--sq-signal-ink); }

/* ── Relationship cards ──────────────────────────────────────────────────── */

.sqs-cards,
.sqs-list,
.sqs-receive,
.sqs-steps,
.sqs-trust__grid { margin: 0; padding: 0; list-style: none; }

.sqs-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--wp--custom--shell--gap); }

.sqs-card {
	display: flex;
	flex-direction: column;
	padding: 24px;
	border: 1px solid var(--sq-line);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--sq-sheet);
}

.sqs-card__icon {
	display: grid;
	place-items: center;
	inline-size: 42px;
	block-size: 42px;
	margin-block-end: 16px;
	border-radius: var(--wp--custom--radius--md);
	background: color-mix(in srgb, var(--sq-signal) 10%, transparent);
	color: var(--sq-signal-ink);
}

.sqs-card__glyph { inline-size: 21px; block-size: 21px; }
.sqs-card__title { margin: 0; font-size: var(--sq-t-h4) !important; font-weight: var(--sq-w-medium); letter-spacing: var(--sq-ls-h3); line-height: var(--sq-lh-ui); }
.sqs-card__text { margin: 9px 0 0; font-size: var(--sq-t-p3); line-height: var(--sq-lh-supporting); color: var(--sq-muted); }

/* The label is the point of this page: a paid relationship says so on the card
   that sells it, not only on the placement it produces. */
.sqs-card__tag {
	align-self: flex-start;
	margin-block-start: 16px;
	padding: 3px 10px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--sq-soft);
	font-size: var(--sq-t-eyebrow);
	font-weight: var(--sq-w-medium);
	letter-spacing: var(--sq-ls-eyebrow);
	text-transform: uppercase;
	color: var(--sq-muted);
}

.sqs-card__link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-block-size: 44px;
	margin-block-start: auto;
	padding-block-start: 14px;
	font-size: var(--sq-t-p3);
	font-weight: var(--sq-w-medium);
	color: var(--sq-signal-ink);
	text-decoration: none;
}

.sqs-card__link:hover { text-decoration: underline; text-underline-offset: 4px; }
.sqs-card__arrow { inline-size: 15px; block-size: 15px; }

/* ── Process ─────────────────────────────────────────────────────────────── */

.sqs-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--wp--custom--shell--gap); counter-reset: sqs; }
.sqs-steps li { display: flex; flex-direction: column; gap: 12px; padding-block-start: 18px; border-block-start: 2px solid var(--sq-line); }

.sqs-steps__num {
	display: grid;
	place-items: center;
	inline-size: 30px;
	block-size: 30px;
	border-radius: 50%;
	background: var(--sq-ink);
	color: var(--sq-paper);
	font-size: var(--sq-t-p3);
	font-weight: var(--sq-w-medium);
}

.sqs-steps__text { font-size: var(--sq-t-p2); line-height: var(--sq-lh-supporting); color: var(--sq-ink); }

/* ── Accept / reject ─────────────────────────────────────────────────────── */

.sqs-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); }
.sqs-list { display: grid; gap: 12px; margin-block-start: 22px; }
.sqs-list li { display: flex; align-items: flex-start; gap: 11px; font-size: var(--sq-t-p2); line-height: var(--sq-lh-supporting); }
.sqs-list__glyph { flex: none; inline-size: 19px; block-size: 19px; margin-block-start: 2px; }
.sqs-list--yes .sqs-list__glyph { color: var(--sq-good); }
.sqs-list--no .sqs-list__glyph { color: var(--sq-critical); }

/* ── What creators receive ───────────────────────────────────────────────── */

.sqs-receive { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 32px; }
.sqs-receive li { display: flex; gap: 13px; }
.sqs-receive__glyph { flex: none; inline-size: 21px; block-size: 21px; margin-block-start: 3px; color: var(--sq-signal-ink); }
.sqs-receive h3 { margin: 0 0 5px !important; font-size: var(--sq-t-p2) !important; font-weight: var(--sq-w-medium) !important; line-height: var(--sq-lh-eyebrow) !important; }
.sqs-receive p { margin: 0; font-size: var(--sq-t-p3); line-height: var(--sq-lh-supporting); color: var(--sq-muted); }

/* ── Trust band ──────────────────────────────────────────────────────────────
   The one inverted surface on the page. Pinned to the `dark-*` tokens rather
   than `--sq-ink`, because that alias inverts under dark mode and the band
   would become a light slab on a dark page — the mistake the footer made. */

.sqs-trust {
	margin-block-start: var(--wp--custom--shell--section);
	padding-block: clamp(48px, 6vw, 88px);
	background: var(--wp--preset--color--dark-canvas);
	color: var(--sq-signal-ink);
}

html[data-sq-theme="dark"] .sqs-trust {
	background: var(--wp--preset--color--dark-soft);
	border-block: 1px solid var(--wp--preset--color--dark-border);
}

.sqs-eyebrow--light { color: var(--wp--preset--color--signal); }
html[data-sq-theme="dark"] .sqs-eyebrow--light { color: var(--wp--preset--color--dark-signal); }
.sqs-h2--light { color: var(--wp--preset--color--on-signal) !important; margin-block-start: 12px; }

.sqs-trust__lede {
	margin: 18px 0 40px;
	max-inline-size: 62ch;
	font-size: var(--sq-t-p1);
	line-height: var(--sq-lh-body);
	color: color-mix(in srgb, var(--wp--preset--color--on-signal) 78%, transparent);
}

.sqs-trust__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 40px; }
.sqs-trust__glyph { inline-size: 22px; block-size: 22px; color: var(--wp--preset--color--verified); }
.sqs-trust__grid h3 { margin: 12px 0 7px !important; font-size: var(--sq-t-p2) !important; font-weight: var(--sq-w-medium) !important; color: var(--sq-signal-ink); }
.sqs-trust__grid p { margin: 0; font-size: var(--sq-t-p3); line-height: var(--sq-lh-supporting); color: color-mix(in srgb, var(--wp--preset--color--on-signal) 70%, transparent); }

/* ── The other application ───────────────────────────────────────────────── */

/*
 * Someone who reached the product form and found it was the wrong form. The card is
 * deliberately quiet — a bordered aside, not a second hero — because the page's one
 * primary action is still listing a product, and the Experts pilot is a side door.
 */

.sqs-aside__card {
	display: flex;
	gap: 18px;
	align-items: flex-start;
	padding: clamp(20px, 3vw, 30px);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg, 14px);
	background: var(--wp--preset--color--surface);
}

.sqs-aside__glyph {
	flex: none;
	inline-size: 24px;
	block-size: 24px;
	margin-block-start: 2px;
	color: var(--sq-signal-ink);
}

.sqs-h3 {
	margin: 8px 0 0;
	font-size: var(--sq-t-h3) !important;
	line-height: var(--sq-lh-h3) !important;
	letter-spacing: var(--sq-ls-h3);
	font-weight: var(--sq-w-medium);
	color: var(--sq-ink);
}

.sqs-aside__card > div > p { margin: 10px 0 0; color: var(--sq-muted); max-inline-size: 62ch; }
.sqs-aside__actions { margin-block-start: 18px !important; }
.sqs-aside .sqs-note { margin-block-start: 16px; }

@media (max-width: 520px) {
	.sqs-aside__card { flex-direction: column; gap: 12px; }
}


/* ── FAQ ─────────────────────────────────────────────────────────────────── */

.sqs-faq { margin-block-start: 8px; border-block-start: 1px solid var(--sq-line); }
.sqs-faq__item { border-block-end: 1px solid var(--sq-line); }

.sqs-faq__item > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-block-size: 60px;
	padding-block: 16px;
	font-size: var(--sq-t-p2);
	font-weight: var(--sq-w-medium);
	cursor: pointer;
	list-style: none;
}

.sqs-faq__item > summary::-webkit-details-marker { display: none; }
.sqs-faq__item > summary::marker { content: ""; }
.sqs-faq__item > summary:hover { color: var(--sq-signal-ink); }
.sqs-faq__chevron { flex: none; inline-size: 18px; block-size: 18px; color: var(--sq-muted); }
.sqs-faq__item[open] > summary .sqs-faq__chevron { transform: rotate(180deg); }
.sqs-faq__item p { margin: 0 0 20px; max-inline-size: 72ch; font-size: var(--sq-t-p2); line-height: var(--sq-lh-body); color: var(--sq-muted); }

/* ── The form ────────────────────────────────────────────────────────────── */

.sqs-apply { scroll-margin-block-start: 100px; }
#apply-result { scroll-margin-block-start: 100px; }

.sqs-alert {
	display: flex;
	align-items: flex-start;
	gap: 13px;
	margin-block-end: 28px;
	padding: 18px 20px;
	border: 1px solid var(--sq-line);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--sq-sheet);
}

.sqs-alert__glyph { flex: none; inline-size: 21px; block-size: 21px; margin-block-start: 1px; }
.sqs-alert strong { display: block; font-size: var(--sq-t-p2); font-weight: var(--sq-w-medium); }
.sqs-alert p { margin: 6px 0 0; font-size: var(--sq-t-p3); line-height: var(--sq-lh-supporting); color: var(--sq-muted); }
.sqs-alert ul { margin: 10px 0 0; padding-inline-start: 20px; font-size: var(--sq-t-p3); line-height: var(--sq-lh-body); }
.sqs-alert a { color: inherit; }

.sqs-alert--ok { border-color: color-mix(in srgb, var(--sq-good) 40%, transparent); background: color-mix(in srgb, var(--sq-good) 8%, transparent); }
.sqs-alert--ok .sqs-alert__glyph { color: var(--sq-good); }
.sqs-alert--bad { border-color: color-mix(in srgb, var(--sq-critical) 40%, transparent); background: color-mix(in srgb, var(--sq-critical) 7%, transparent); }
.sqs-alert--bad .sqs-alert__glyph { color: var(--sq-critical); }

.sqs-fieldset { margin: 0 0 34px; padding: 0; border: 0; }
.sqs-fieldset legend { padding: 0; font-size: var(--sq-t-h4); font-weight: var(--sq-w-medium); letter-spacing: var(--sq-ls-h3); }
.sqs-fieldset__text { margin: 6px 0 20px; font-size: var(--sq-t-p3); color: var(--sq-muted); }

.sqs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.sqs-field { display: flex; flex-direction: column; min-inline-size: 0; }
.sqs-field--wide { grid-column: 1 / -1; }

.sqs-field label {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-block-end: 6px;
	font-size: var(--sq-t-p3);
	font-weight: var(--sq-w-medium);
	color: var(--sq-ink);
}

/* A word, not an asterisk: "*" has to be explained in a legend somebody has to
   find, and screen readers announce it as "star". */
.sqs-req {
	padding: 1px 7px;
	border-radius: var(--wp--custom--radius--pill);
	background: color-mix(in srgb, var(--sq-signal) 12%, transparent);
	color: var(--sq-signal-ink);
	font-size: var(--sq-t-p3);
	font-weight: var(--sq-w-medium);
	letter-spacing: var(--sq-ls-body);
	text-transform: uppercase;
}

.sqs-help { margin: 0 0 7px; font-size: var(--sq-t-p3); line-height: var(--sq-lh-eyebrow); color: var(--sq-muted); }

/* Push the control to the bottom of its cell.
   Help text sits between the label and the input (a hint is more use before the
   field than after it), but only some fields have one — so without this the two
   inputs in a row start at different heights and the form looks broken. */
.sqs-field input,
.sqs-field select,
.sqs-field textarea {
	margin-block-start: auto;
	inline-size: 100%;
	min-block-size: 48px;
	padding: 12px 14px !important;
	border: 1px solid var(--sq-line) !important;
	border-radius: var(--wp--custom--radius--md) !important;
	background: var(--sq-sheet) !important;
	color: var(--sq-ink) !important;
	font-family: inherit;
	font-size: var(--sq-t-p2);
	line-height: var(--sq-lh-eyebrow);
}

.sqs-field textarea { min-block-size: 0; resize: vertical; }

.sqs-field input:focus,
.sqs-field select:focus,
.sqs-field textarea:focus {
	border-color: var(--sq-signal) !important;
	outline: 2px solid transparent;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--sq-signal) 18%, transparent);
}

.sqs-field.is-bad input,
.sqs-field.is-bad select,
.sqs-field.is-bad textarea { border-color: var(--sq-critical) !important; }

.sqs-error {
	display: flex;
	align-items: flex-start;
	gap: 7px;
	margin: 7px 0 0;
	font-size: var(--sq-t-p3);
	line-height: var(--sq-lh-eyebrow);
	color: var(--sq-critical);
}

.sqs-error__glyph { flex: none; inline-size: 15px; block-size: 15px; margin-block-start: 2px; }

.sqs-check { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 11px; margin-block-end: 14px; }
/* 24px, not 20: WCAG 2.5.8 sets 24×24 as the minimum target and a consent
   checkbox is the last control anyone should have to aim at twice. The label is
   associated with `for`, so the text is a target too. */
.sqs-check input { inline-size: 24px; block-size: 24px; margin: 0; accent-color: var(--sq-signal); }
.sqs-check label { min-block-size: 24px; display: flex; align-items: center; }
.sqs-check label { font-size: var(--sq-t-p3); line-height: var(--sq-lh-supporting); color: var(--sq-ink); }
.sqs-check label a { color: var(--sq-signal-ink); }
.sqs-check .sqs-error { grid-column: 2; }

/* The honeypot. Off-screen rather than display:none — some bots deliberately
   skip fields that are display:none, and this one wants to be filled in. */
.sqs-trap {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.sqs-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin: 30px 0 0; }
.sqs-form__note { font-size: var(--sq-t-p3); color: var(--sq-muted); }

.sqs-spinner {
	inline-size: 15px;
	block-size: 15px;
	border: 2px solid color-mix(in srgb, var(--wp--preset--color--on-signal) 40%, transparent);
	border-top-color: var(--sq-signal-ink);
	border-radius: 50%;
}

@media (prefers-reduced-motion: no-preference) {
	.sqs-spinner { animation: sqs-spin 700ms linear infinite; }
	.sqs-faq__chevron { transition: transform 150ms ease; }
	.sqs-card__link, .sqs-btn { transition: background 150ms ease, border-color 150ms ease, color 150ms ease; }
}

/* Reduced motion keeps the spinner as a static ring — it still marks the
   control as busy, it simply does not rotate. */
@keyframes sqs-spin { to { transform: rotate(360deg); } }

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
	.sqs-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sqs-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sqs-receive { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
	.sqs-split { grid-template-columns: minmax(0, 1fr); }
	.sqs-trust__grid { grid-template-columns: minmax(0, 1fr); }
	.sqs-grid { grid-template-columns: minmax(0, 1fr); }
	.sqs-h1 { max-inline-size: none; }
}

@media (max-width: 560px) {
	.sqs-cards { grid-template-columns: minmax(0, 1fr); }
	.sqs-steps { grid-template-columns: minmax(0, 1fr); }
	.sqs-receive { grid-template-columns: minmax(0, 1fr); }
	.sqs-cta-row .sqs-btn { inline-size: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LEGAL PAGES · privacy policy and seller submission terms
   ═══════════════════════════════════════════════════════════════════════════

   Namespaced `sgl-`, on the same reasoning as `sqh-` and `sqs-`: the bare `sq-`
   prefix carries several layers of retired `!important`, and a document that
   has to stay readable for years should not inherit an argument.

   Measure is the point of this layer. Legal text is read linearly and in full,
   so the column is capped near 70ch rather than filling the content width, and
   the type is one step larger than body copy elsewhere.
   ══════════════════════════════════════════════════════════════════════════ */

.sgl-page,
.sgl-page *,
.sgl-page *::before,
.sgl-page *::after { box-sizing: border-box; }

.sgl-page {
	display: block;
	max-inline-size: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: var(--sq-paper);
	color: var(--sq-ink);
}

.sgl-wrap {
	inline-size: 100%;
	max-inline-size: calc(820px + (var(--wp--custom--shell--gutter) * 2));
	margin-inline: auto;
	padding-inline: var(--wp--custom--shell--gutter);
	padding-block: clamp(36px, 5vw, 72px) var(--wp--custom--shell--section);
}

/* ── Head ────────────────────────────────────────────────────────────────── */

.sgl-eyebrow {
	margin: 0;
	font-size: var(--sq-t-eyebrow);
	font-weight: var(--sq-w-medium);
	letter-spacing: var(--sq-ls-eyebrow);
	text-transform: uppercase;
	color: var(--sq-signal-ink);
}

.sgl-h1 {
	margin: 12px 0 0;
	font-size: var(--sq-t-h1) !important;
	line-height: var(--sq-lh-h1) !important;
	letter-spacing: var(--sq-ls-h1);
	font-weight: var(--sq-w-medium);
}

.sgl-dates {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 18px 0 0;
	font-size: var(--sq-t-p3);
	color: var(--sq-muted);
}

.sgl-dates__glyph { flex: none; inline-size: 16px; block-size: 16px; }

.sgl-summary {
	margin: 22px 0 0;
	padding: 18px 20px;
	border-inline-start: 3px solid var(--sq-signal);
	border-radius: 0 var(--wp--custom--radius--md) var(--wp--custom--radius--md) 0;
	background: var(--sq-sheet);
	font-size: var(--sq-t-p1);
	line-height: var(--sq-lh-body);
	color: var(--sq-ink);
}

/* ── Contents ────────────────────────────────────────────────────────────── */

.sgl-toc {
	margin-block-start: 34px;
	padding: 22px 24px;
	border: 1px solid var(--sq-line);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--sq-sheet);
}

.sgl-toc__title {
	margin: 0 0 12px !important;
	font-size: var(--sq-t-eyebrow) !important;
	font-weight: var(--sq-w-medium) !important;
	letter-spacing: var(--sq-ls-eyebrow);
	text-transform: uppercase;
	color: var(--sq-muted);
}

.sgl-toc ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 1px; }

.sgl-toc a {
	display: flex;
	align-items: baseline;
	gap: 11px;
	min-block-size: 40px;
	padding: 8px 10px;
	margin-inline: -10px;
	border-radius: var(--wp--custom--radius--sm);
	color: var(--sq-ink);
	font-size: var(--sq-t-p3);
	text-decoration: none;
}

.sgl-toc a:hover,
.sgl-toc a:focus-visible { background: var(--sq-soft); color: var(--sq-signal-ink); }
.sgl-toc__num { flex: none; inline-size: 1.6em; color: var(--sq-muted); font-variant-numeric: tabular-nums; }

/* ── Body ────────────────────────────────────────────────────────────────── */

.sgl-body { margin-block-start: clamp(36px, 4vw, 56px); }

/* Clears the sticky header when a contents link jumps to a section. */
.sgl-section { scroll-margin-block-start: 110px; }
.sgl-section + .sgl-section { margin-block-start: 44px; padding-block-start: 40px; border-block-start: 1px solid var(--sq-line); }

.sgl-h2 {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 0 0 16px !important;
	font-size: var(--sq-t-h2) !important;
	line-height: var(--sq-lh-h2) !important;
	letter-spacing: var(--sq-ls-h2);
	font-weight: var(--sq-w-medium) !important;
}

.sgl-h2__num { flex: none; color: var(--sq-signal-ink); font-variant-numeric: tabular-nums; }

.sgl-h3 {
	margin: 30px 0 10px !important;
	font-size: var(--sq-t-h4) !important;
	line-height: var(--sq-lh-h4) !important;
	font-weight: var(--sq-w-medium) !important;
	letter-spacing: var(--sq-ls-h3);
}

.sgl-body p {
	margin: 0 0 16px;
	max-inline-size: 70ch;
	font-size: var(--sq-t-p1);
	line-height: var(--sq-lh-body);
	color: var(--sq-ink);
}

.sgl-body a { color: var(--sq-signal-ink); text-underline-offset: 3px; }

.sgl-list { margin: 0 0 18px; padding-inline-start: 22px; max-inline-size: 70ch; }
.sgl-list li { margin-block-end: 9px; font-size: var(--sq-t-p1); line-height: var(--sq-lh-body); }
.sgl-list li::marker { color: var(--sq-muted); }

/* A note is a qualification, not an aside to skip — same size as body copy,
   distinguished by ground rather than by being made smaller. */
.sgl-note {
	max-inline-size: 70ch;
	padding: 14px 16px;
	border-radius: var(--wp--custom--radius--md);
	background: var(--sq-soft);
	color: var(--sq-muted) !important;
	font-size: var(--sq-t-p2) !important;
	line-height: var(--sq-lh-supporting) !important;
}

/* ── Tables ──────────────────────────────────────────────────────────────── */

/* Own scroll container: a three-column retention table cannot shrink below its
   content at 390px, and the page body must never scroll sideways. */
.sgl-tablewrap { overflow-x: auto; margin: 0 0 20px; border: 1px solid var(--sq-line); border-radius: var(--wp--custom--radius--md); }

.sgl-table { inline-size: 100%; border-collapse: collapse; font-size: var(--sq-t-p3); }
.sgl-table th,
.sgl-table td { padding: 11px 14px; text-align: start; vertical-align: top; line-height: var(--sq-lh-supporting); border-block-end: 1px solid var(--sq-line); }
.sgl-table thead th { background: var(--sq-soft); font-weight: var(--sq-w-medium); white-space: nowrap; }
.sgl-table tbody th { font-weight: var(--sq-w-medium); color: var(--sq-ink); }
.sgl-table td { color: var(--sq-muted); }
.sgl-table tbody tr:last-child th,
.sgl-table tbody tr:last-child td { border-block-end: 0; }

.sgl-foot {
	margin-block-start: 44px;
	padding-block-start: 24px;
	border-block-start: 1px solid var(--sq-line);
	color: var(--sq-muted) !important;
	font-size: var(--sq-t-p3) !important;
}

.sgl-page :focus-visible {
	outline: 2px solid var(--sq-signal);
	outline-offset: 2px;
	border-radius: var(--wp--custom--radius--sm);
}

/* ── Seller form: the unbundled privacy notice ───────────────────────────── */

.sqs-privacy-note {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 22px 0 0;
	max-inline-size: 66ch;
	font-size: var(--sq-t-p3);
	line-height: var(--sq-lh-supporting);
	color: var(--sq-muted);
}

.sqs-privacy-note a { color: var(--sq-signal-ink); }

@media (max-width: 560px) {
	.sgl-h2 { flex-direction: column; gap: 2px; }
	.sgl-body p, .sgl-list li { font-size: var(--sq-t-p2); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SUBMIT A PRODUCT · approved-creator intake
   ═══════════════════════════════════════════════════════════════════════════

   Reuses the Step 01 form layer wholesale — `.sqs-form`, `.sqs-fieldset`,
   `.sqs-grid`, `.sqs-field`, `.sqs-check`, `.sqs-btn`, `.sqs-spinner` — because
   it renders through the same `Seller::field()` and `Seller::checkbox()`. Only
   the page furniture around it is new, under `sqi-`.
   ══════════════════════════════════════════════════════════════════════════ */

.sqi-page,
.sqi-page *,
.sqi-page *::before,
.sqi-page *::after { box-sizing: border-box; }

.sqi-page {
	display: block;
	max-inline-size: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: var(--sq-paper);
	color: var(--sq-ink);
}

.sqi-wrap {
	inline-size: 100%;
	max-inline-size: calc(880px + (var(--wp--custom--shell--gutter) * 2));
	margin-inline: auto;
	padding-inline: var(--wp--custom--shell--gutter);
	padding-block: clamp(36px, 5vw, 72px) var(--wp--custom--shell--section);
}

.sqi-eyebrow {
	margin: 0;
	font-size: var(--sq-t-eyebrow);
	font-weight: var(--sq-w-medium);
	letter-spacing: var(--sq-ls-eyebrow);
	text-transform: uppercase;
	color: var(--sq-signal-ink);
}

.sqi-h1 {
	margin: 12px 0 0;
	font-size: var(--sq-t-h1) !important;
	line-height: var(--sq-lh-h1) !important;
	letter-spacing: var(--sq-ls-h1);
	font-weight: var(--sq-w-medium);
}

.sqi-h2 {
	margin: 0 0 16px !important;
	font-size: var(--sq-t-h2) !important;
	line-height: var(--sq-lh-h2) !important;
	letter-spacing: var(--sq-ls-h2);
	font-weight: var(--sq-w-medium) !important;
}

.sqi-lede {
	margin: 18px 0 0;
	max-inline-size: 62ch;
	font-size: var(--sq-t-p1);
	line-height: var(--sq-lh-body);
	color: var(--sq-muted);
}

.sqi-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; }

.sqi-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-block-size: 48px;
	padding-inline: 24px;
	border: 1px solid transparent;
	border-radius: var(--wp--custom--radius--md);
	font-size: var(--sq-t-p2);
	font-weight: var(--sq-w-medium);
	line-height: var(--sq-lh-h1);
	text-decoration: none;
	cursor: pointer;
}

.sqi-btn--primary { background: var(--sq-signal); color: var(--wp--preset--color--on-signal); }
.sqi-btn--primary:hover { background: var(--sq-ink); color: var(--sq-paper); }
.sqi-btn--ghost { border-color: var(--sq-line); background: var(--sq-sheet); color: var(--sq-ink); }
.sqi-btn--ghost:hover { border-color: var(--sq-ink); }

/* The identity strip. Deliberately prominent: a creator needs to know which
   business name a submission is going out under before they fill anything in. */
.sqi-identity,
.sqi-note {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	max-inline-size: 68ch;
	font-size: var(--sq-t-p3);
	line-height: var(--sq-lh-supporting);
}

.sqi-identity {
	margin: 26px 0 0;
	padding: 14px 16px;
	border: 1px solid var(--sq-line);
	border-radius: var(--wp--custom--radius--md);
	background: var(--sq-sheet);
	color: var(--sq-ink);
}

.sqi-note { margin: 14px 0 0; color: var(--sq-muted); }
.sqi-identity__glyph, .sqi-note__glyph { flex: none; inline-size: 17px; block-size: 17px; margin-block-start: 1px; color: var(--sq-signal-ink); }
.sqi-identity__glyph { color: var(--sq-good); }

/* ── Result banners ──────────────────────────────────────────────────────── */

#intake-result { scroll-margin-block-start: 110px; }
#intake-result:focus { outline: none; }

.sqi-alert {
	display: flex;
	align-items: flex-start;
	gap: 13px;
	margin-block-start: 30px;
	padding: 18px 20px;
	border: 1px solid var(--sq-line);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--sq-sheet);
}

.sqi-alert__glyph { flex: none; inline-size: 21px; block-size: 21px; margin-block-start: 1px; }
.sqi-alert strong { display: block; font-size: var(--sq-t-p2); font-weight: var(--sq-w-medium); }
.sqi-alert p { margin: 6px 0 0; font-size: var(--sq-t-p3); line-height: var(--sq-lh-supporting); color: var(--sq-muted); }
.sqi-alert ul { margin: 10px 0 0; padding-inline-start: 20px; font-size: var(--sq-t-p3); line-height: var(--sq-lh-body); }
.sqi-alert a { color: inherit; }
.sqi-alert--ok { border-color: color-mix(in srgb, var(--sq-good) 40%, transparent); background: color-mix(in srgb, var(--sq-good) 8%, transparent); }
.sqi-alert--ok .sqi-alert__glyph { color: var(--sq-good); }
.sqi-alert--bad { border-color: color-mix(in srgb, var(--sq-critical) 40%, transparent); background: color-mix(in srgb, var(--sq-critical) 7%, transparent); }
.sqi-alert--bad .sqi-alert__glyph { color: var(--sq-critical); }

/* ── The creator's own submissions ───────────────────────────────────────── */

.sqi-mine { margin-block: 44px; padding-block-start: 36px; border-block-start: 1px solid var(--sq-line); }

.sqi-status {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--sq-soft);
	font-size: var(--sq-t-eyebrow);
	font-weight: var(--sq-w-medium);
	white-space: nowrap;
}

/* Colour is never the only signal — each status keeps its own words. */
.sqi-status--approved { background: color-mix(in srgb, var(--sq-good) 15%, transparent); color: var(--sq-good); }
.sqi-status--declined { background: color-mix(in srgb, var(--sq-critical) 12%, transparent); color: var(--sq-critical); }
.sqi-status--changes { background: color-mix(in srgb, var(--sq-caution) 15%, transparent); color: var(--sq-caution); }

.sqi-form { margin-block-start: 40px; }
.sqi-page :focus-visible { outline: 2px solid var(--sq-signal); outline-offset: 2px; border-radius: var(--wp--custom--radius--sm); }

@media (max-width: 560px) {
	.sqi-actions .sqi-btn { inline-size: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MY ACCOUNT  ·  .sqa-
   ───────────────────────────────────────────────────────────────────────────
   The grid is declared on the two real children by name, not by auto-placement.
   WooCommerce prints an empty `.woocommerce-notices-wrapper` as the first child
   of `.woocommerce`, and auto-placement handed it column one — which is what put
   the navigation in column two and the content on row two.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The account area is a sidebar plus data tables. It does not belong in the
   760px prose measure `.entry-content` imposes. */
.sqa .entry-content,
.sqa main .woocommerce,
.sqa .wp-block-post-title {
	/* `shell--content` (1280px) is the site's standard page measure — the same one the
	   catalogue and the intake page sit on. `shell--wide` is 1440 and would make this the
	   widest page on the site, which it has no business being. */
	max-width: var(--wp--custom--shell--content, 1280px) !important;
}

.sqa main { padding-block: 56px 96px; }

.sqa .wp-block-post-title {
	margin-block-end: 8px;
	font-size: var(--sq-t-h1) !important;
	line-height: var(--sq-lh-h1) !important;
	letter-spacing: var(--sq-ls-h1);
}

/* Two columns only when there IS a sidebar. Logged out, the same `.woocommerce` wrapper holds
   an <h2> and the login form, and auto-placement dropped the heading into the 272px sidebar
   track with the form beside it. */
.sqa .entry-content > .woocommerce {
	margin-block-start: 36px;
}

.sqa .entry-content > .woocommerce:has(.woocommerce-MyAccount-navigation) {
	display: grid;
	grid-template-columns: 272px minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}

/* Named areas, so a stray sibling cannot displace anything. */
.sqa .entry-content > .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; grid-row: 1; }
.sqa .entry-content > .woocommerce > .sqa-side                    { grid-column: 1;      grid-row: 2; }
.sqa .entry-content > .woocommerce > .woocommerce-MyAccount-content { grid-column: 2;    grid-row: 2; }

.sqa .entry-content > .woocommerce > .woocommerce-notices-wrapper:empty { display: none; }
.sqa .entry-content > .woocommerce::before,
.sqa .entry-content > .woocommerce::after { content: none !important; }

/* ── Sidebar ────────────────────────────────────────────────────────────── */

.sqa-side {
	position: sticky;
	inset-block-start: 24px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	inline-size: auto !important;
	float: none !important;
}

.sqa .sqa-side .sqa-who {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px;
	border: 1px solid var(--sq-line);
	border-radius: var(--wp--custom--radius--md, 14px);
	background: var(--sq-sheet);
}

.sqa-who__mark {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	inline-size: 40px;
	block-size: 40px;
	border-radius: 50%;
	background: var(--sq-signal);
	color: var(--wp--preset--color--on-signal);
	font-weight: var(--sq-w-bold);
	font-size: var(--sq-t-p2);
	line-height: var(--sq-lh-h1);
}

.sqa-who__text { display: grid; gap: 2px; min-inline-size: 0; }

.sqa-who__name {
	font-size: var(--sq-t-p3);
	font-weight: var(--sq-w-bold);
	color: var(--sq-ink);
	overflow-wrap: anywhere;
}

.sqa-who__mail {
	font-size: var(--sq-t-p3);
	color: var(--sq-muted);
	overflow-wrap: anywhere;
}

.sqa .sqa-side .sqa-side__list {
	list-style: none;
	margin: 0;
	padding: 6px;
	border: 1px solid var(--sq-line);
	border-radius: var(--wp--custom--radius--md, 14px);
	background: var(--sq-sheet);
}

.sqa .sqa-side .sqa-side__item { border: 0 !important; }

.sqa .sqa-side .sqa-side__link {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 11px 12px !important;
	border-radius: var(--wp--custom--radius--sm, 9px);
	color: var(--sq-ink);
	font-size: var(--sq-t-p3);
	font-weight: var(--sq-w-semibold);
	text-decoration: none;
	transition: background 0.14s ease, color 0.14s ease;
}

.sqa .sqa-side .sqa-side__link:hover { background: var(--sq-soft); }

.sqa .sqa-side .sqa-side__icon {
	flex: 0 0 auto;
	inline-size: 17px;
	block-size: 17px;
	color: var(--sq-muted);
	transition: color 0.14s ease;
}

.sqa .sqa-side .sqa-side__link:hover .sqa-side__icon { color: var(--sq-ink); }

.sqa .sqa-side .sqa-side__item.is-active .sqa-side__link,
.sqa .sqa-side .sqa-side__link[aria-current="page"] {
	background: var(--sq-signal);
	color: var(--wp--preset--color--on-signal);
	/* woocommerce-blocktheme.css underlines the current item at 0,3,2. The state is already
	   carried by the filled background and aria-current; an underline on top reads as a
	   second, competing affordance. */
	text-decoration: none;
}

.sqa .sqa-side .sqa-side__item.is-active .sqa-side__icon,
.sqa .sqa-side .sqa-side__link[aria-current="page"] .sqa-side__icon { color: currentColor; }

.sqa .sqa-side .sqa-side__link--quiet { color: var(--sq-muted); font-weight: var(--sq-w-semibold); }
.sqa .sqa-side .sqa-side__link--quiet:hover { color: var(--sq-critical); background: var(--sq-soft); }

/* ── Content panel ──────────────────────────────────────────────────────── */

.sqa .woocommerce-MyAccount-content {
	inline-size: auto !important;
	float: none !important;
	padding: 30px 32px !important;
	border: 1px solid var(--sq-line) !important;
	border-radius: var(--wp--custom--radius--md, 14px) !important;
	background: var(--sq-sheet) !important;
	color: var(--sq-ink);
}

.sqa .woocommerce-MyAccount-content > :first-child { margin-block-start: 0; }
.sqa .woocommerce-MyAccount-content > :last-child { margin-block-end: 0; }

.sqa .woocommerce-MyAccount-content h2,
.sqa .woocommerce-MyAccount-content h3 {
	font-family: var(--sq-font-sans);
	letter-spacing: var(--sq-ls-h1);
	color: var(--sq-ink);
}

.sqa .woocommerce-MyAccount-content p { color: var(--sq-ink); }
.sqa .woocommerce-MyAccount-content a { color: var(--sq-signal); }

/* ── Dashboard ──────────────────────────────────────────────────────────── */

.sqa-dash__head { margin-block-end: 24px; }

.sqa .woocommerce-MyAccount-content .sqa-dash__title {
	margin: 0 0 6px;
	font-family: var(--sq-font-sans);
	font-size: var(--sq-t-h2);
	line-height: var(--sq-lh-h2);
	letter-spacing: var(--sq-ls-h1);
}

.sqa .woocommerce-MyAccount-content .sqa-dash__sub {
	margin: 0;
	max-inline-size: 52ch;
	font-size: var(--sq-t-p3);
	line-height: var(--sq-lh-supporting);
	color: var(--sq-muted) !important;
}

.sqa .woocommerce-MyAccount-content .sqa-cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 12px;
}

/* The li is a grid container so its single child stretches to fill it, and the li itself
   stretches to fill the row. The obvious `block-size: 100%` on the link instead sets up a
   percentage-height cycle against a stretched grid item: the row gets sized from a
   contribution that does not include the link's real content, so the track came out 120px
   while the link painted 154px — straight over the top of the row beneath it. */
.sqa .woocommerce-MyAccount-content .sqa-card { margin: 0; display: grid; }

.sqa .woocommerce-MyAccount-content .sqa-card__link {
	display: flex;
	align-items: flex-start;
	gap: 13px;
	padding: 16px;
	border: 1px solid var(--sq-line);
	border-radius: var(--wp--custom--radius--md, 14px);
	background: var(--sq-paper);
	color: var(--sq-ink) !important;
	text-decoration: none;
	transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.sqa .woocommerce-MyAccount-content .sqa-card__link:hover {
	border-color: var(--sq-ink);
	transform: translateY(-2px);
	box-shadow: var(--sq-lift, 0 10px 24px rgba(0, 0, 0, 0.07));
}

.sqa-card__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	inline-size: 36px;
	block-size: 36px;
	border-radius: var(--wp--custom--radius--sm, 9px);
	background: var(--sq-soft);
}

.sqa-card__glyph { inline-size: 18px; block-size: 18px; color: var(--sq-ink); }

.sqa-card__body { display: grid; gap: 3px; min-inline-size: 0; flex: 1 1 auto; }

.sqa-card__title { font-size: var(--sq-t-p3); font-weight: var(--sq-w-bold); line-height: var(--sq-lh-ui); }

.sqa-card__blurb {
	font-size: var(--sq-t-p3);
	line-height: var(--sq-lh-eyebrow);
	color: var(--sq-muted);
}

.sqa-card__badge {
	justify-self: start;
	margin-block-start: 5px;
	padding: 3px 9px;
	border-radius: 99px;
	background: var(--sq-soft);
	font-size: var(--sq-t-eyebrow);
	font-weight: var(--sq-w-bold);
	letter-spacing: var(--sq-ls-body);
	color: var(--sq-muted);
}

.sqa-card__go {
	flex: 0 0 auto;
	inline-size: 15px;
	block-size: 15px;
	margin-block-start: 11px;
	color: var(--sq-muted);
	transition: transform 0.15s ease, color 0.15s ease;
}

.sqa-card__link:hover .sqa-card__go { transform: translateX(3px); color: var(--sq-ink); }

.sqa .woocommerce-MyAccount-content .sqa-dash__foot {
	margin-block-start: 22px;
	padding-block-start: 18px;
	border-block-start: 1px solid var(--sq-line);
	font-size: var(--sq-t-p3);
	color: var(--sq-muted) !important;
}

/* ── Tables: orders and downloads ───────────────────────────────────────── */

.sqa .woocommerce-MyAccount-content table.shop_table {
	inline-size: 100%;
	margin: 0;
	border: 1px solid var(--sq-line) !important;
	border-radius: var(--wp--custom--radius--md, 14px) !important;
	border-collapse: separate !important;
	border-spacing: 0;
	overflow: hidden;
	background: var(--sq-paper);
}

.sqa .woocommerce-MyAccount-content table.shop_table thead th {
	padding: 13px 16px !important;
	border: 0 !important;
	border-block-end: 1px solid var(--sq-line) !important;
	background: var(--sq-soft);
	font-size: var(--sq-t-p3);
	font-weight: var(--sq-w-bold);
	text-transform: uppercase;
	letter-spacing: var(--sq-ls-eyebrow);
	color: var(--sq-muted);
	text-align: start;
}

.sqa .woocommerce-MyAccount-content table.shop_table tbody td {
	padding: 15px 16px !important;
	border: 0 !important;
	border-block-end: 1px solid var(--sq-line) !important;
	font-size: var(--sq-t-p3);
	color: var(--sq-ink);
	vertical-align: middle;
}

.sqa .woocommerce-MyAccount-content table.shop_table tbody tr:last-child td { border-block-end: 0 !important; }

/* ── Buttons ────────────────────────────────────────────────────────────── */

.sqa .woocommerce-MyAccount-content .button,
.sqa .woocommerce-MyAccount-content button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 42px;
	padding: 0 18px !important;
	border: 1px solid var(--sq-ink) !important;
	border-radius: var(--wp--custom--radius--sm, 9px) !important;
	background: var(--sq-ink) !important;
	color: var(--sq-paper) !important;
	font-size: var(--sq-t-p3);
	font-weight: var(--sq-w-bold);
	text-decoration: none;
	cursor: pointer;
	transition: opacity 0.15s ease;
}

.sqa .woocommerce-MyAccount-content .button:hover,
.sqa .woocommerce-MyAccount-content button[type="submit"]:hover { opacity: 0.86; }

/* ── Downloads: the purchased plugin file ───────────────────────────────── */

/* The button carries the action ("Download Plugin") and the filename sits under it as a
   quiet second line. The other way round — filename as the button label — is what
   WooCommerce does by default, and it makes a row of purchases read as a row of build
   artefacts rather than as things you own. */
/* Unscoped: the same table is printed on the order-received page straight after payment,
   which is not inside the account area's `.sqa` shell. */
.sqa-download { white-space: nowrap; }

.sqa-download__file {
	display: block;
	margin-block-start: 7px;
	font-size: var(--sq-t-p3);
	line-height: var(--sq-lh-eyebrow);
	color: var(--sq-muted);
	/* Filenames have no spaces to break at, so a long one would otherwise force the whole
	   table wider than the panel. */
	overflow-wrap: anywhere;
}

/* ── Forms: addresses and account details ───────────────────────────────── */

.sqa .woocommerce-MyAccount-content form .form-row { padding: 0; margin-block-end: 16px; }

.sqa .woocommerce-MyAccount-content label {
	display: block;
	margin-block-end: 6px;
	font-size: var(--sq-t-p3);
	font-weight: var(--sq-w-semibold);
	color: var(--sq-ink);
}

.sqa .woocommerce-MyAccount-content input.input-text,
.sqa .woocommerce-MyAccount-content textarea,
.sqa .woocommerce-MyAccount-content select,
.sqa .woocommerce-MyAccount-content .select2-container .select2-selection {
	inline-size: 100%;
	min-block-size: 46px;
	padding: 10px 13px !important;
	border: 1px solid var(--sq-line) !important;
	border-radius: var(--wp--custom--radius--sm, 9px) !important;
	background: var(--sq-paper) !important;
	color: var(--sq-ink) !important;
	font-size: var(--sq-t-p3);
}

.sqa .woocommerce-MyAccount-content fieldset {
	margin-block-start: 26px;
	padding: 0;
	border: 0;
	border-block-start: 1px solid var(--sq-line);
	padding-block-start: 22px;
}

.sqa .woocommerce-MyAccount-content fieldset legend {
	padding: 0;
	font-family: var(--sq-font-sans);
	font-size: var(--sq-t-p1);
	font-weight: var(--sq-w-bold);
	letter-spacing: var(--sq-ls-h2);
}

/* Address cards on the Addresses screen. */
.sqa .woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin: 0;
}

/* WooCommerce's `.col2-set` carries a float clearfix. A `::before` on a grid container is a
   grid item, so it silently claimed column one and pushed both address cards one track right —
   the same failure as the empty notices wrapper at the top of this section. */
.sqa .woocommerce-Addresses::before,
.sqa .woocommerce-Addresses::after { content: none !important; }

.sqa .woocommerce-Address {
	inline-size: auto !important;
	float: none !important;
	padding: 18px;
	border: 1px solid var(--sq-line);
	border-radius: var(--wp--custom--radius--md, 14px);
	background: var(--sq-paper);
}

.sqa .woocommerce-Address-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sqa .woocommerce-Address-title h2,
.sqa .woocommerce-Address-title h3 { margin: 0; font-size: var(--sq-t-p2); }
.sqa .woocommerce-Address address { font-style: normal; font-size: var(--sq-t-p3); line-height: var(--sq-lh-body); color: var(--sq-muted); }

/* ── Logged out: the login card ──────────────────────────────────────────── */

.sqa .woocommerce > h2 {
	margin: 0 0 16px;
	font-family: var(--sq-font-sans);
	font-size: var(--sq-t-h3);
	letter-spacing: var(--sq-ls-h1);
}

.sqa .woocommerce-form-login {
	max-inline-size: 460px;
	margin: 0;
	padding: 28px !important;
	border: 1px solid var(--sq-line) !important;
	border-radius: var(--wp--custom--radius--md, 14px) !important;
	background: var(--sq-sheet);
}

.sqa .woocommerce-form-login .form-row { padding: 0; margin-block-end: 16px; }

.sqa .woocommerce-form-login label {
	display: block;
	margin-block-end: 6px;
	font-size: var(--sq-t-p3);
	font-weight: var(--sq-w-semibold);
	color: var(--sq-ink);
}

.sqa .woocommerce-form-login input.input-text,
.sqa .woocommerce-form-login .woocommerce-Input {
	inline-size: 100%;
	min-block-size: 46px;
	padding: 10px 13px !important;
	border: 1px solid var(--sq-line) !important;
	border-radius: var(--wp--custom--radius--sm, 9px) !important;
	background: var(--sq-paper) !important;
	color: var(--sq-ink) !important;
	font-size: var(--sq-t-p3);
}

.sqa .woocommerce-form-login button[type="submit"] {
	inline-size: 100%;
	min-block-size: 46px;
	margin-block-end: 12px;
	border: 1px solid var(--sq-signal) !important;
	border-radius: var(--wp--custom--radius--sm, 9px) !important;
	background: var(--sq-signal) !important;
	color: var(--wp--preset--color--on-signal) !important;
	font-size: var(--sq-t-p3);
	font-weight: var(--sq-w-bold);
	cursor: pointer;
}

.sqa .woocommerce-form-login .woocommerce-form-login__rememberme {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-block-end: 18px;
	font-size: var(--sq-t-p3);
	color: var(--sq-muted);
}

.sqa .woocommerce-form-login .woocommerce-form-login__rememberme input { inline-size: auto; min-block-size: 0; }

.sqa .woocommerce-LostPassword { margin: 0; font-size: var(--sq-t-p3); }
.sqa .woocommerce-LostPassword a { color: var(--sq-signal); }

/* ── Notices ────────────────────────────────────────────────────────────── */

.sqa .woocommerce-message,
.sqa .woocommerce-info,
.sqa .woocommerce-error {
	margin: 0 0 20px;
	padding: 14px 18px !important;
	border: 1px solid var(--sq-line) !important;
	border-radius: var(--wp--custom--radius--md, 14px) !important;
	background: var(--sq-sheet) !important;
	color: var(--sq-ink) !important;
	font-size: var(--sq-t-p3);
	list-style: none;
}

.sqa .woocommerce-message::before,
.sqa .woocommerce-info::before,
.sqa .woocommerce-error::before { content: none !important; }

.sqa .woocommerce-message { border-inline-start: 3px solid var(--sq-good) !important; }
.sqa .woocommerce-info { border-inline-start: 3px solid var(--sq-signal) !important; }
.sqa .woocommerce-error { border-inline-start: 3px solid var(--sq-critical) !important; }

/* WooCommerce Blocks notices are a separate component from the classic ones above and ship
   hard-coded light backgrounds, so in dark mode they arrive as white cards. */

.sqa .wc-block-components-notice-banner {
	margin: 0 0 12px !important;
	padding: 14px 16px !important;
	border: 1px solid var(--sq-line) !important;
	border-radius: var(--wp--custom--radius--md, 14px) !important;
	background: var(--sq-paper) !important;
	color: var(--sq-ink) !important;
	font-size: var(--sq-t-p3);
	align-items: center;
}

.sqa .wc-block-components-notice-banner > svg {
	fill: var(--sq-muted) !important;
	background: transparent !important;
}

.sqa .wc-block-components-notice-banner__content,
.sqa .wc-block-components-notice-banner p { color: var(--sq-ink) !important; }

.sqa .wc-block-components-notice-banner.is-info { border-inline-start: 3px solid var(--sq-signal) !important; }
.sqa .wc-block-components-notice-banner.is-success { border-inline-start: 3px solid var(--sq-good) !important; }
.sqa .wc-block-components-notice-banner.is-error { border-inline-start: 3px solid var(--sq-critical) !important; }

.sqa .wc-block-components-notice-banner .wc-forward,
.sqa .wc-block-components-notice-banner .button {
	flex: 0 0 auto;
	min-block-size: 38px;
	padding: 0 15px !important;
	border: 1px solid var(--sq-line) !important;
	border-radius: var(--wp--custom--radius--sm, 9px) !important;
	background: var(--sq-soft) !important;
	color: var(--sq-ink) !important;
	font-size: var(--sq-t-p3);
	font-weight: var(--sq-w-bold);
}

/* ── Focus ──────────────────────────────────────────────────────────────── */

.sqa :focus-visible {
	outline: 2px solid var(--sq-signal);
	outline-offset: 2px;
	border-radius: var(--wp--custom--radius--sm, 9px);
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
	/* `1fr` is `minmax(auto, 1fr)`, so the track floors at the sidebar's min-content — which,
	   once the item list becomes a horizontal scroller, is the sum of every item in it. That is
	   what pushed 434px of this page off the right edge on a phone. */
	.sqa .entry-content > .woocommerce:has(.woocommerce-MyAccount-navigation) { grid-template-columns: minmax(0, 1fr); gap: 22px; }
	.sqa .entry-content > .woocommerce > .sqa-side { grid-column: 1; grid-row: 2; }
	.sqa .entry-content > .woocommerce > .woocommerce-MyAccount-content { grid-column: 1; grid-row: 3; }

	.sqa .sqa-side { position: static; min-inline-size: 0; }
	.sqa .woocommerce-MyAccount-content { min-inline-size: 0; }

	.sqa .sqa-side .sqa-side__list {
		display: flex;
		gap: 4px;
		overflow-x: auto;
		scrollbar-width: thin;
	}

	.sqa .sqa-side .sqa-side__item { flex: 0 0 auto; }
	.sqa .sqa-side .sqa-side__link { white-space: nowrap; }
	.sqa .sqa-side .sqa-side__list--end { display: block; }

	.sqa main { padding-block: 34px 72px; }
	.sqa .woocommerce-MyAccount-content { padding: 22px 18px !important; }
}

@media (max-width: 560px) {
	.sqa .woocommerce-MyAccount-content .sqa-cards { grid-template-columns: 1fr; }
	.sqa .woocommerce-Addresses { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.sqa-card__link, .sqa-card__go, .sqa-side__link, .sqa-side__icon { transition: none; }
	.sqa-card__link:hover { transform: none; }
	.sqa-card__link:hover .sqa-card__go { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMMERCIAL DISCLOSURE  ·  .sqc-
   ───────────────────────────────────────────────────────────────────────────
   Text labels, never colour alone: the tone classes change the border and the
   background, but the word is what carries the meaning and it is always there.
   Contrast is taken from the same ink/muted tokens the rest of the site uses,
   so both themes are covered by the existing contrast check.
   ═══════════════════════════════════════════════════════════════════════════ */

.sqc-disc--chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-block-start: 10px;
}

.sqc-chip {
	display: inline-flex;
	align-items: center;
	padding: 3px 9px;
	border: 1px solid var(--sq-line);
	border-radius: 99px;
	background: var(--sq-soft);
	/* Full ink, not muted. Muted-on-surface measures 4.4989:1 in light mode — under AA by a
	   rounding error, which is not a place to be clever on a disclosure a reader is entitled
	   to be able to read. */
	color: var(--sq-ink);
	font-size: var(--sq-t-eyebrow);
	font-weight: var(--sq-w-bold);
	letter-spacing: var(--sq-ls-body);
	line-height: var(--sq-lh-supporting);
	white-space: nowrap;
}

/* Squarespell Original — ours, so it reads as the house mark rather than a warning. */
.sqc-chip--own {
	border-color: var(--sq-ink);
	background: var(--sq-ink);
	color: var(--sq-paper);
}

/* Affiliate — the quiet, most common case. */
.sqc-chip--aff {
	border-color: var(--sq-line);
	background: var(--sq-soft);
	color: var(--sq-ink);
}

/* Paid placement — the one a reader most needs to notice. */
.sqc-chip--paid {
	border-color: var(--sq-signal);
	background: color-mix(in srgb, var(--sq-signal) 12%, transparent);
	color: var(--sq-signal-ink);
}

/* ── Full sentence form, beside a CTA ──────────────────────────────────────── */

.sqc-disc--full {
	margin-block-start: 14px;
	padding: 12px 14px;
	border: 1px solid var(--sq-line);
	border-radius: var(--wp--custom--radius--sm, 9px);
	background: var(--sq-soft);
}

.sqc-disc__line {
	margin: 0 0 6px;
	font-size: var(--sq-t-p3);
	line-height: var(--sq-lh-supporting);
	color: var(--sq-ink);
}

.sqc-disc__line:last-of-type { margin-block-end: 0; }

.sqc-disc__line--paid strong { color: var(--sq-signal-ink); }

.sqc-disc__policy {
	margin: 8px 0 0;
	padding-block-start: 8px;
	border-block-start: 1px solid var(--sq-line);
	font-size: var(--sq-t-p3);
}

.sqc-disc__policy a { color: var(--sq-signal-ink); }

/* ═══════════════════════════════════════════════════════════════════════════
   REVENUE HOMEPAGE V2

   The legacy .sqh primitives above remain shared by the card and article
   layouts. These rules arrange the new, shorter hierarchy and make commercial
   rails visibly separate without changing the completed navigation layer.
   ══════════════════════════════════════════════════════════════════════════ */

.sqh-section { display: block; }
.sqh-hero__inner--solo { grid-template-columns: minmax(0, 720px); }

.sqh-hero__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px 20px;
	margin-block-start: 14px;
}

.sqh-hero__original-link {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	color: var(--sq-signal-ink);
	font-size: var(--sq-t-p3);
	font-weight: var(--sq-w-medium);
	text-underline-offset: 4px;
}

.sqh-shead__note {
	margin: 12px 0 0;
	max-inline-size: 72ch;
	padding-inline-start: 12px;
	border-inline-start: 3px solid var(--sq-signal);
	color: var(--sq-ink);
	font-size: var(--sq-t-p3);
	line-height: var(--sq-lh-supporting);
}

.sqh-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sqh-grid--single { grid-template-columns: minmax(0, 410px); }

.sqh-cardwrap {
	display: flex;
	min-inline-size: 0;
	flex-direction: column;
}

.sqh-cardwrap > .sq-pc { flex: 1; inline-size: 100%; }

.sqh-original-card .sq-pc {
	border-end-start-radius: 0;
	border-end-end-radius: 0;
}

.sqh-original-card .sqc-chip--own { display: none; }

.sqh-original-card__note {
	margin: -1px 0 0;
	padding: 11px 16px;
	border: 1px solid var(--sq-line);
	border-block-start-color: color-mix(in srgb, var(--sq-signal) 45%, var(--sq-line));
	border-end-start-radius: var(--wp--custom--radius--lg);
	border-end-end-radius: var(--wp--custom--radius--lg);
	background: var(--sq-tint);
	color: var(--sq-ink);
	font-size: var(--sq-t-p3);
	font-weight: var(--sq-w-medium);
	line-height: var(--sq-lh-eyebrow);
}

/* Three grouped indexes replace separate product/platform/goal sections. */
.sqh-discovery__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sq-gap);
}

.sqh-discovery__group {
	min-inline-size: 0;
	padding: 22px;
	border: 1px solid var(--sq-line);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--sq-sheet);
	box-shadow: var(--sq-lift);
}

.sqh-discovery__group h3 {
	margin: 0 0 12px !important;
	font-size: var(--sq-t-h4) !important;
	font-weight: var(--sq-w-medium) !important;
	line-height: var(--sq-lh-h4) !important;
}

.sqh-discovery__group ul { margin: 0; padding: 0; list-style: none; }
.sqh-discovery__group li + li { border-block-start: 1px solid var(--sq-line); }

.sqh-discovery__group a,
.sqh-discovery__group li > span {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-inline-size: 0;
	min-block-size: 46px;
	padding-block: 9px;
	color: var(--sq-ink);
	font-size: var(--sq-t-p3);
	text-decoration: none;
}

.sqh-discovery__group a:hover { color: var(--sq-signal-ink); }
.sqh-discovery__group a > span,
.sqh-discovery__group li > span > span { min-inline-size: 0; overflow-wrap: anywhere; }

.sqh-discovery__group small {
	flex: none;
	color: var(--sq-muted);
	font-size: var(--sq-t-eyebrow);
	white-space: nowrap;
}

.sqh-discovery__group .is-soon { color: var(--sq-muted); }
.sqh-discovery__group .is-soon small { font-style: italic; white-space: normal; text-align: end; }

/* Paid inventory is physically and visually separate from editorial ranking. */
.sqh-paid {
	margin-block-start: var(--sq-section);
	padding-block: 1px clamp(40px, 5vw, 64px);
	border-block: 1px solid var(--sq-line);
	background: var(--sq-soft);
}

.sqh-paid .sqh-shead { margin-block-start: clamp(38px, 5vw, 60px); }

.sqh-deals .sqh-shead__text::before {
	content: "";
	display: inline-block;
	inline-size: 7px;
	block-size: 7px;
	margin-inline-end: 8px;
	border-radius: 50%;
	background: var(--sq-good);
}

/* One server-rendered group per resource type. No client-only tab state. */
.sqh-resources__groups { display: grid; gap: clamp(34px, 5vw, 56px); }

.sqh-resource-group__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-block-end: 18px;
}

.sqh-resource-group__head h3 {
	margin: 0 !important;
	font-size: var(--sq-t-h4) !important;
	font-weight: var(--sq-w-medium) !important;
}

.sqh-resource-group__head a,
.sqh-trust__links a,
.sqh-seller__actions > a:not(.sqh-btn) {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-block-size: 44px;
	color: var(--sq-signal-ink);
	font-size: var(--sq-t-p3);
	font-weight: var(--sq-w-medium);
	text-underline-offset: 4px;
}

.sqh-creatorwrap { display: flex; min-inline-size: 0; }
.sqh-creatorwrap .sqh-creator { flex: 1; min-inline-size: 0; }
.sqh-creator__mark { overflow: hidden; }
.sqh-creator__mark img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.sqh-creator .sqc-disc--chips { margin-block-start: 12px; }

/* Seller conversion band. */
.sqh-seller {
	margin-block-start: var(--sq-section);
	padding-block: clamp(42px, 5vw, 66px);
	background: var(--sq-ink);
	color: var(--sq-paper);
}

.sqh-seller__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(240px, 0.65fr);
	align-items: center;
	gap: clamp(28px, 5vw, 70px);
}

.sqh-seller .sqh-eyebrow { color: var(--sq-signal); }
.sqh-seller .sqh-h2 { margin-block-start: 10px; color: var(--sq-paper); }
.sqh-seller__inner p:not(.sqh-eyebrow) { margin: 14px 0 0; max-inline-size: 64ch; color: var(--sq-sheet); line-height: var(--sq-lh-body); }
.sqh-seller__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.sqh-seller__actions > a:not(.sqh-btn) { color: var(--sq-sheet); }

/* Newsletter is a conversion panel, but remains an ordinary HTML form. */
.sqh-newsletter {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(320px, 0.8fr);
	gap: clamp(28px, 5vw, 70px);
	align-items: center;
	margin-block-start: clamp(28px, 4vw, 48px);
	padding: clamp(26px, 4vw, 50px);
	border: 1px solid var(--sq-line);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--sq-soft);
}

.sqh-newsletter h2 {
	margin: 10px 0 0 !important;
	font-size: var(--sq-t-h2) !important;
	font-weight: var(--sq-w-medium) !important;
	line-height: var(--sq-lh-h2) !important;
	letter-spacing: var(--sq-ls-h1);
}

.sqh-newsletter > div > p:last-child { margin: 14px 0 0; color: var(--sq-muted); line-height: var(--sq-lh-body); }
.sqh-newsletter__form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 10px; }
.sqh-newsletter__form .sqb-news__status,
.sqh-newsletter__privacy { grid-column: 1 / -1; }
.sqh-newsletter__privacy { margin: 0; color: var(--sq-muted); font-size: var(--sq-t-eyebrow); line-height: var(--sq-lh-supporting); }
.sqh-newsletter__privacy a { color: inherit; text-underline-offset: 3px; }

/* The closing method is intentionally concise; detailed policy lives on its pages. */
.sqh-trust__links { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.sqh-trust__text { margin-block-start: 0; }

/* The homepage now owns the real, validated subscription form. Collapse the
   footer's legacy decorative duplicate on this route only. */
.home .sq-footer > .sq-newsletter { display: none !important; }

/* The old platform component can still be used elsewhere. Its count must wrap at
   640px/200% zoom instead of forcing the document 16px wider than the viewport. */
.sqh-plats a > * { min-inline-size: 0; }
.sqh-plat__count { white-space: normal; overflow-wrap: anywhere; text-align: end; }

@media (max-width: 1180px) {
	.sqh-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	.sqh-discovery__grid { grid-template-columns: minmax(0, 1fr); }
	.sqh-discovery__group { padding: 18px 22px; }
	.sqh-seller__inner,
	.sqh-newsletter { grid-template-columns: minmax(0, 1fr); }
	.sqh-seller__actions { flex-direction: row; flex-wrap: wrap; align-items: center; }
}

@media (max-width: 820px) {
	.sqh-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sqh-resource-group__head { align-items: flex-start; }
}

@media (max-width: 560px) {
	.sqh-hero { padding-block-start: 28px; }
	.sqh-hero__actions { align-items: stretch; flex-direction: column; }
	.sqh-hero__actions .sqh-btn { inline-size: 100%; }
	.sqh-hero__original-link { justify-content: center; }
	.sqh-grid--3 { grid-template-columns: minmax(0, 1fr); }
	.sqh-grid--single { grid-template-columns: minmax(0, 1fr); }
	.sqh-resource-group__head { flex-direction: column; gap: 4px; }
	.sqh-newsletter { padding: 22px 18px; }
	.sqh-newsletter__form { grid-template-columns: minmax(0, 1fr); }
	.sqh-newsletter__form .sqb-news__status,
	.sqh-newsletter__privacy { grid-column: auto; }
	.sqh-seller__actions { align-items: stretch; flex-direction: column; }
	.sqh-seller__actions .sqh-btn { inline-size: 100%; }
}

@media (max-width: 380px) {
	.sqh-discovery__group { padding-inline: 16px; }
	.sqh-discovery__group a,
	.sqh-discovery__group li > span { gap: 8px; }
	.sqh-shead__link { white-space: normal; }
}

@media (max-width: 480px) {
	.sqc-chip { white-space: normal; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PREMIUM MARKETPLACE HOMEPAGE V3

   A visual-density pass over the revenue-safe V2 structure. Inventory,
   disclosures, ranking and the completed navigation are unchanged; this layer
   gives the homepage a clearer art direction, one decisive card action and
   horizontally scannable mobile rails instead of a 19,000px stack.
   ══════════════════════════════════════════════════════════════════════════ */

.sqh-home {
	--sq-section: clamp(56px, 6vw, 88px);
	--sq-home-radius: clamp(18px, 2vw, 26px);
}

/* The hero reads as one branded marketplace canvas rather than copy beside an
   unrelated catalogue card. Both gradients are derived from theme tokens. */
.sqh-hero {
	position: relative;
	overflow: clip;
	padding-block: clamp(38px, 5.5vw, 78px) clamp(34px, 4vw, 58px);
	border-block-end: 1px solid var(--sq-line);
	background:
		radial-gradient(circle at 88% 10%, color-mix(in srgb, var(--sq-signal) 17%, transparent) 0, transparent 31%),
		linear-gradient(145deg, var(--sq-paper) 0 58%, color-mix(in srgb, var(--sq-soft) 86%, var(--sq-paper)) 100%);
}

.sqh-hero__inner {
	grid-template-columns: minmax(0, 1.12fr) minmax(360px, 0.88fr);
	align-items: center;
	min-block-size: 590px;
}

.sqh-hero__copy { position: relative; z-index: 1; }
.sqh-hero__title { max-inline-size: 12.5ch; }
.sqh-hero__lede { max-inline-size: 59ch; }

.sqh-hero__panel {
	position: relative;
	padding: 16px;
	border-color: color-mix(in srgb, var(--sq-ink) 14%, var(--sq-line));
	border-radius: var(--sq-home-radius);
	background: color-mix(in srgb, var(--sq-sheet) 92%, transparent);
	box-shadow: 0 24px 70px color-mix(in srgb, var(--sq-ink) 15%, transparent);
}

.sqh-hero__panel::before {
	content: "";
	position: absolute;
	inset: -14px 12% auto;
	block-size: 26px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--sq-signal) 30%, transparent);
	filter: blur(22px);
	pointer-events: none;
}

.sqh-hero__panel .sq-pc { border-radius: calc(var(--sq-home-radius) - 7px); }
.sqh-hero__panel-head { position: relative; margin: 2px 2px 14px; color: var(--sq-ink); }

.sqh-hero__facts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	max-inline-size: 680px;
	margin: 28px 0 0;
	padding: 18px 0 0;
	border-block-start: 1px solid var(--sq-line);
	list-style: none;
}

.sqh-hero__facts li + li { border-inline-start: 1px solid var(--sq-line); }

.sqh-hero__facts a {
	display: block;
	min-block-size: 44px;
	padding-inline: 18px;
	color: var(--sq-ink);
	text-decoration: none;
}

.sqh-hero__facts li:first-child a { padding-inline-start: 0; }
.sqh-hero__facts a:hover strong { color: var(--sq-signal-ink); }
.sqh-hero__facts strong { display: block; font-size: var(--sq-t-h4); font-weight: var(--sq-w-semibold); letter-spacing: var(--sq-ls-h1); }
.sqh-hero__facts span { display: block; margin-block-start: 2px; color: var(--sq-muted); font-size: var(--sq-t-eyebrow); line-height: var(--sq-lh-eyebrow); }

.sqh-evidence { box-shadow: 0 12px 34px color-mix(in srgb, var(--sq-ink) 4%, transparent); }
.sqh-evidence__list { padding-block: 15px; }

/* Editorial furniture shared by all rails. */
.sqh-shead { margin-block: var(--sq-section) 26px; }

.sqh-shead__eyebrow {
	margin: 0 0 9px;
	color: var(--sq-signal-ink);
	font-size: var(--sq-t-eyebrow);
	font-weight: var(--sq-w-semibold);
	letter-spacing: var(--sq-ls-eyebrow);
	text-transform: uppercase;
}

.sqh-shead__link {
	padding-block-end: 3px;
	border-block-end: 1px solid color-mix(in srgb, var(--sq-ink) 28%, transparent);
}

.sqh-shead__link:hover { border-block-end-color: var(--sq-signal); }

/* Homepage cards are the same truthful component as the catalogue, with a
   more editorial shell and one explicit action. The whole card remains the
   details link; the visible button is reserved for buying/visiting whenever
   that action exists. */
.sqh-home .sqh-cardwrap > .sq-pc {
	border-radius: 18px;
	box-shadow: 0 10px 34px color-mix(in srgb, var(--sq-ink) 7%, transparent);
}

.sqh-home .sqh-cardwrap > .sq-pc:hover,
.sqh-home .sqh-cardwrap > .sq-pc:focus-within {
	transform: translateY(-4px);
	box-shadow: 0 18px 46px color-mix(in srgb, var(--sq-ink) 12%, transparent);
}

.sqh-home .sq-pc__media { border-block-end-color: color-mix(in srgb, var(--sq-line) 72%, transparent); }
.sqh-home .sq-pc__body { padding: 18px; }
.sqh-home .sq-pc__actions:has(.sq-pc__act--buy) .sq-pc__act--detail { display: none; }
.sqh-home .sq-pc__actions:has(.sq-pc__act--buy) { display: block; }
.sqh-home .sq-pc__actions:has(.sq-pc__act--buy) .sq-pc__act--buy { inline-size: 100%; }
.sqh-home .sqc-disc--chips { margin-block-start: 9px; }

/* Originals become a compact house collection rather than four identical
   catalogue tiles with the same disclosure sentence repeated four times. */
.sqh-originals {
	margin-block-start: 0;
	padding-block: clamp(54px, 6vw, 84px);
	border-block-end: 1px solid var(--sq-line);
	background: color-mix(in srgb, var(--sq-soft) 78%, var(--sq-paper));
}

.sqh-originals .sqh-shead { margin-block: 0 28px; }
.sqh-grid--originals { grid-template-columns: minmax(0, 1.25fr) repeat(2, minmax(0, 1fr)); }
.sqh-original-card .sq-pc { border-radius: 18px; }
.sqh-original-card .sqc-chip--own { display: inline-flex; }
.sqh-original-card__note { display: none; }
.sqh-grid--originals .sqh-cardwrap:first-child .sq-pc__media { background: color-mix(in srgb, var(--sq-ink) 5%, var(--sq-soft)); }

/* The catalogue index is a three-part editorial object: numbered groups,
   denser rows and visible inventory counts. */
.sqh-discovery__grid { grid-template-columns: 0.9fr 1.12fr 0.98fr; gap: clamp(14px, 2vw, 24px); }

.sqh-discovery__group {
	padding: 0;
	overflow: hidden;
	border-radius: 18px;
	box-shadow: 0 10px 30px color-mix(in srgb, var(--sq-ink) 5%, transparent);
}

.sqh-discovery__head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 18px 20px;
	border-block-end: 1px solid var(--sq-line);
	background: color-mix(in srgb, var(--sq-soft) 78%, var(--sq-sheet));
}

.sqh-discovery__head > span {
	display: grid;
	place-items: center;
	inline-size: 32px;
	block-size: 32px;
	border-radius: 50%;
	background: var(--sq-ink);
	color: var(--sq-paper);
	font-size: var(--sq-t-eyebrow);
	font-weight: var(--sq-w-semibold);
}

.sqh-discovery__group .sqh-discovery__head h3 { margin: 0 !important; }
.sqh-discovery__group ul { padding-inline: 20px; }
.sqh-discovery__group a,
.sqh-discovery__group li > span { min-block-size: 43px; padding-block: 7px; }
.sqh-discovery__group a:hover { padding-inline: 5px; background: color-mix(in srgb, var(--sq-signal) 6%, transparent); }

/* The three main commerce/evidence rails now each have their own visual voice. */
.sqh-marketplace { padding-block-end: clamp(12px, 2vw, 28px); }

.sqh-deals {
	margin-block-start: var(--sq-section);
	padding-block: clamp(50px, 5vw, 72px);
	border-block: 1px solid var(--sq-line);
	background: color-mix(in srgb, var(--sq-signal) 5%, var(--sq-soft));
}

.sqh-deals .sqh-shead { margin-block: 0 26px; }
.sqh-deals .sq-pc__act--buy { background: var(--sq-signal); border-color: var(--sq-signal); color: var(--wp--preset--color--on-signal); }

.sqh-tested {
	margin-block-start: 0;
	padding-block: clamp(50px, 5vw, 72px);
	background: var(--sq-ink);
	color: var(--sq-paper);
}

.sqh-tested .sqh-shead { margin-block: 0 26px; }
.sqh-tested .sqh-h2,
.sqh-tested .sqh-shead__eyebrow { color: var(--sq-paper); }
.sqh-tested .sqh-shead__text { color: var(--sq-sheet); }
.sqh-tested .sqh-shead__link { color: var(--sq-paper); border-block-end-color: color-mix(in srgb, var(--sq-paper) 38%, transparent); }
.sqh-tested .sqh-grid--single { grid-template-columns: minmax(0, 780px); }
.sqh-tested .sqh-grid--single .sq-pc { display: grid; grid-template-columns: minmax(250px, 0.85fr) minmax(0, 1.15fr); }
.sqh-tested .sqh-grid--single .sq-pc__media { min-block-size: 100%; aspect-ratio: auto; border-block-end: 0; border-inline-end: 1px solid var(--sq-line); }

/* Templates and the single maintained course share one composed canvas on
   wide screens instead of producing two full-height page sections. */
.sqh-resources__groups {
	grid-template-columns: minmax(0, 1.6fr) minmax(290px, 0.55fr);
	align-items: start;
	gap: clamp(24px, 3vw, 42px);
}

.sqh-resource-group--templates .sqh-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sqh-resource-group--courses { padding: 20px; border: 1px solid var(--sq-line); border-radius: 18px; background: var(--sq-soft); }
.sqh-resource-group--courses .sqh-resource-group__head { margin-block-end: 14px; }

/* Creator and conversion surfaces are intentionally shorter and more brand-led. */
.sqh-creator { padding: 20px; border-radius: 18px; box-shadow: none; }
.sqh-creator__mark { inline-size: 52px; block-size: 52px; border-radius: 50%; }

.sqh-seller {
	margin-block-start: var(--sq-section);
	padding-block: 0;
	background: var(--sq-paper);
}

.sqh-seller__inner {
	position: relative;
	overflow: hidden;
	padding: clamp(34px, 5vw, 64px);
	border-radius: var(--sq-home-radius);
	background:
		radial-gradient(circle at 90% 5%, color-mix(in srgb, var(--sq-signal) 33%, transparent) 0, transparent 28%),
		var(--sq-ink);
}

.sqh-newsletter { border-radius: var(--sq-home-radius); box-shadow: 0 12px 38px color-mix(in srgb, var(--sq-ink) 6%, transparent); }
.sqh-trust { padding-block: clamp(38px, 4vw, 58px); }
.sqh-trust__inner { align-items: center; }

@media (max-width: 1180px) {
	.sqh-grid--originals { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sqh-resources__groups { grid-template-columns: minmax(0, 1fr); }
	.sqh-resource-group--templates .sqh-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
	.sqh-hero__inner { min-block-size: 0; grid-template-columns: minmax(0, 1fr); }
	.sqh-hero__panel { max-inline-size: 560px; }
	.sqh-discovery__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 820px) {
	.sqh-home { --sq-section: 48px; }
	.sqh-hero { padding-block: 26px 34px; }
	.sqh-hero__inner { gap: 24px; }
	.sqh-hero__lede { margin-block-start: 15px; }
	.sqh-hero__search { margin-block-start: 20px; }
	.sqh-hero__actions { margin-block-start: 10px; }
	.sqh-hero__facts { margin-block-start: 20px; padding-block-start: 14px; }
	.sqh-hero__facts a { padding-inline: 10px; }
	.sqh-hero__facts strong { font-size: var(--sq-t-p1); }
	.sqh-hero__facts span { font-size: var(--sq-t-p3); }

	/* The hero Original becomes a compact split card so the first catalogue
	   collection starts roughly one screen earlier on a phone. */
	.sqh-hero__panel { max-inline-size: none; padding: 12px; }
	.sqh-hero__panel .sq-pc { display: grid; grid-template-columns: minmax(112px, 0.42fr) minmax(0, 0.58fr); }
	.sqh-hero__panel .sq-pc__media { min-block-size: 100%; aspect-ratio: auto; padding: 8px; border-block-end: 0; border-inline-end: 1px solid var(--sq-line); }
	.sqh-hero__panel .sq-pc__body { min-inline-size: 0; padding: 13px; }
	.sqh-hero__panel .sq-pc__meta { display: none; }
	.sqh-hero__panel .sq-pc__actions { margin-block-start: 8px; }
	.sqh-hero__panel .sq-pc__act { min-block-size: 42px; padding-inline: 8px; white-space: normal; }
	/* The 112px media column cannot hold the truthful verification label and a
	   44px save target side by side. Saving remains available on the product
	   page and in the full Originals rail immediately below. */
	.sqh-hero__panel .sq-pc__save { display: none; }
	.sqh-hero__panel .sq-pc__flags { inset-block-start: 6px; inset-inline-start: 6px; }
	.sqh-hero__panel-head { margin-block-end: 10px; }

	.sqh-evidence__list {
		display: flex;
		gap: 10px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}
	.sqh-evidence__list::-webkit-scrollbar { display: none; }
	.sqh-evidence__list li { flex: 0 0 78vw; scroll-snap-align: start; }

	.sqh-shead { margin-block: var(--sq-section) 18px; gap: 8px; }
	.sqh-shead__text { margin-block-start: 6px; }
	.sqh-shead__note { margin-block-start: 9px; }

	.sqh-originals { padding-block: 46px; }
	.sqh-originals .sqh-shead { margin-block: 0 20px; }
	.sqh-deals { padding-block: 46px; }
	.sqh-deals .sqh-shead,
	.sqh-tested .sqh-shead { margin-block: 0 20px; }
	.sqh-tested { padding-block: 46px; }

	/* Product, creator and guide rows are genuine horizontal rails: every item
	   remains server-rendered, focusable and reachable without JavaScript. */
	.sqh-originals .sqh-grid,
	.sqh-marketplace .sqh-grid,
	.sqh-deals .sqh-grid,
	.sqh-resources .sqh-grid,
	.sqh-creators,
	.sqh-posts {
		display: flex;
		gap: 14px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		margin-inline: calc(var(--sq-gutter) * -1);
		padding-inline: var(--sq-gutter);
		padding-block-end: 8px;
	}

	.sqh-originals .sqh-grid::-webkit-scrollbar,
	.sqh-marketplace .sqh-grid::-webkit-scrollbar,
	.sqh-deals .sqh-grid::-webkit-scrollbar,
	.sqh-resources .sqh-grid::-webkit-scrollbar,
	.sqh-creators::-webkit-scrollbar,
	.sqh-posts::-webkit-scrollbar { display: none; }

	.sqh-originals .sqh-cardwrap,
	.sqh-marketplace .sqh-cardwrap,
	.sqh-deals .sqh-cardwrap,
	.sqh-resources .sqh-cardwrap,
	.sqh-creatorwrap,
	.sqh-posts > li {
		flex: 0 0 min(82vw, 330px);
		scroll-snap-align: start;
	}

	.sqh-discovery__grid {
		display: flex;
		gap: 14px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		margin-inline: calc(var(--sq-gutter) * -1);
		padding-inline: var(--sq-gutter);
		padding-block-end: 8px;
	}
	.sqh-discovery__grid::-webkit-scrollbar { display: none; }
	.sqh-discovery__group { flex: 0 0 min(84vw, 350px); scroll-snap-align: start; }

	.sqh-tested .sqh-grid--single { display: block; }
	.sqh-tested .sqh-grid--single .sq-pc { display: flex; }
	.sqh-tested .sqh-grid--single .sq-pc__media { aspect-ratio: 16 / 10; border-inline-end: 0; border-block-end: 1px solid var(--sq-line); }

	.sqh-resources__groups { gap: 34px; }
	.sqh-resource-group--courses { padding: 16px; }
	.sqh-resource-group__head { flex-direction: row; align-items: center; }
	.sqh-seller__inner { padding: 30px 22px; border-radius: 18px; }
	.sqh-newsletter { margin-block-start: 28px; }
}

/* Portrait tablets get the compact visual rhythm and rails above, but have
   enough width for a properly proportioned two-column spotlight instead of
   the narrow phone treatment. The same split prevents the 1024px stacked hero
   from becoming taller than the desktop page's entire opening canvas. */
@media (min-width: 701px) and (max-width: 1024px) {
	.sqh-hero__panel { max-inline-size: 680px; }
	.sqh-hero__panel .sq-pc { display: grid; grid-template-columns: minmax(220px, 0.82fr) minmax(0, 1.18fr); }
	.sqh-hero__panel .sq-pc__media { min-block-size: 100%; aspect-ratio: auto; padding: 14px; border-block-end: 0; border-inline-end: 1px solid var(--sq-line); }
	.sqh-hero__panel .sq-pc__body { padding: 18px; }
	.sqh-hero__panel .sq-pc__meta { display: flex; }
	.sqh-hero__panel .sq-pc__save { display: grid; }
}

@media (max-width: 420px) {
	.sqh-hero__panel .sq-pc { grid-template-columns: 108px minmax(0, 1fr); }
	.sqh-hero__panel .sq-pc__type { font-size: var(--sq-t-p3); }
	.sqh-hero__panel .sq-pc__title { font-size: var(--sq-t-p3) !important; }
	.sqh-hero__panel .sq-pc__price { font-size: var(--sq-t-p3); }
	.sqh-hero__facts span { max-inline-size: 10ch; }
	.sqh-resource-group__head { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
	.sqh-home .sqh-cardwrap > .sq-pc,
	.sqh-discovery__group a,
	.sqh-hero__facts strong { transition: none; }
	.sqh-home .sqh-cardwrap > .sq-pc:hover,
	.sqh-home .sqh-cardwrap > .sq-pc:focus-within { transform: none; }
}

/* The sell page's policy cross-links, on the dark trust panel. */
.sqs-trust__policies {
	margin: 26px 0 0;
	padding-block-start: 20px;
	border-block-start: 1px solid var(--wp--preset--color--dark-border);
	font-size: var(--sq-t-p3);
	color: var(--wp--preset--color--dark-muted);
}

.sqs-trust__policies a {
	color: var(--wp--preset--color--canvas);
	text-underline-offset: 3px;
}

/* ══════════════════════════════════════════════════════════════════════════
   TEMPLATE LISTING CARD
   ──────────────────────────────────────────────────────────────────────────
   Templates only. Every other product type keeps `.sq-pc` above untouched.

   A template is bought on how the design looks, so the picture is the card and
   everything else is a caption under it. Borderless and flat: a grid of
   twenty-four bordered boxes reads as twenty-four boxes, and the covers are
   already rectangles with their own edges.

   The frame is SQUARE and the image fills it with `cover`. No `contain`, no
   padding, no blurred backdrop, no letterboxing — a website cover letterboxed
   into a square is two grey bars and a smaller design.
   ══════════════════════════════════════════════════════════════════════════ */
.sq-tc{
  position:relative;display:flex;flex-direction:column;gap:0;
  background:transparent;border:0;border-radius:0;overflow:visible;
  transition:none;
}
.sq-tc:hover,.sq-tc:focus-within{border:0;box-shadow:none;transform:none}

.sq-tc__cover{
  position:relative;display:block;inline-size:100%;aspect-ratio:1;
  overflow:hidden;border-radius:14px;background:var(--sq-soft);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sq-ink) 5%,transparent);
}
/* Centre the picture in the frame.
   The image keeps its own size — it fills the card's width at its natural aspect, which is what
   these covers are composed for. What it did not do was sit in the middle: every one of them was
   pinned to the top of the frame, so a wide screenshot left 93-170px of dead ground beneath it
   and a tall one spilled past the bottom and was clipped there and nowhere else. Centring gives
   the short ones equal air above and below, and trims the tall ones evenly top and bottom, which
   reads as a crop rather than as a mistake. */
.sq-tc__coverlink{position:relative;display:block;inline-size:100%;block-size:100%}
/* Grid centring only centres an item that FITS; one taller than the frame is aligned to the
   start instead, which is why the tall screenshots stayed pinned to the top and lost their whole
   bottom edge. Positioning from the middle centres regardless, so an image too tall for the
   square is trimmed evenly top and bottom. `translate` is used rather than `transform` so the
   hover `scale` below still has `transform` to itself. */
.sq-tc__coverlink > .sq-tc__img{
  position:absolute;inset-block-start:50%;inset-inline-start:50%;translate:-50% -50%;
  /* And it stays inside the frame. A screenshot taller than the square used to hang out of the
     bottom of it; capping the height keeps the whole picture in its box. Only the tall minority
     is affected — a wide cover is already shorter than the frame and keeps the size it had. */
  max-block-size:100%;max-inline-size:100%;
}
/* One frame size for every template card; only the FIT changes.
   The grid stays even — a contained image letterboxes inside the same square a cropped one
   fills, rather than the card growing to suit its picture. */
.sq-tc__img{
  display:block;inline-size:100%;block-size:100%;
  /* The contained variant pads inward; without this the padding is added to the 100% and the
     image overflows the frame it is supposed to sit inside. */
  box-sizing:border-box;
  object-fit:cover;object-position:center;
  transition:transform .22s ease;
}

/* The normal case. A dedicated cover is composed square for this frame, so filling it is what
   the artwork was made for — no padding, no ground showing. */
.sq-tc__img--cover{object-fit:cover}

/* The fallback, and only the fallback.
   Reached when a product has no dedicated cover and its featured image is not square. It keeps
   the whole picture rather than cropping something we have not looked at, and the ground is the
   same soft tone as the empty frame so the spare space reads as card rather than as a bar behind
   a photo. One template is in this state; it is not the presentation the catalogue is built on. */
.sq-tc__img--contain{
  object-fit:contain;
  padding:5.5%;
  background:var(--sq-soft);
}

.sq-tc:hover .sq-tc__img{transform:scale(1.018)}
/* A contained image is inset already; scaling it would push artwork under the frame edge. */
.sq-tc:hover .sq-tc__img--contain{transform:none}

/* No cover on file. A stated absence, not a broken-image glyph or a borrowed picture. */
.sq-tc__img--none{
  display:grid;place-items:center;inline-size:100%;block-size:100%;
  background:var(--sq-soft);color:var(--sq-muted);font-size: var(--sq-t-p3);
}

/* Only ever rendered when a reduction is real — see Product_Card::badges(). */
.sq-tc__offer{position:absolute;inset-block-start:11px;inset-inline-start:11px;z-index:2;display:flex;gap:6px}

/* The save button sits over the image, and is a sibling of the cover link rather
   than inside it. Larger and higher-contrast than the standard card's, because
   here it floats on photography instead of a panel. */
.sq-tc .sq-pc__save{
  inset-block-start:11px;inset-inline-end:11px;inline-size:40px;block-size:40px;
  background:color-mix(in srgb,var(--sq-sheet) 96%,transparent);
  border-color:color-mix(in srgb,var(--sq-ink) 10%,transparent);
  box-shadow:0 2px 8px color-mix(in srgb,var(--sq-ink) 15%,transparent);
}
.sq-tc .sq-pc__save-icon{inline-size:19px;block-size:19px;background:var(--sq-ink)}

/* ── Caption ─────────────────────────────────────────────────────────────── */
.sq-tc__body{display:flex;flex-direction:column;gap:10px;padding:12px 2px 0}

.sq-tc__head{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:4px 14px;
}
.sq-tc__title{
  margin:0;min-inline-size:0;font-size: var(--sq-t-p2);font-weight: var(--sq-w-bold);line-height: var(--sq-lh-ui);letter-spacing: var(--sq-ls-h4);
}
/* The clamp lives on the ANCHOR, not the heading.
   `marketplace-system.css` sets `text-wrap: balance` on every h1-h6 site-wide, at a
   specificity this block cannot reach without an escalation war — and `text-wrap` is half of
   the `white-space` shorthand, so `nowrap` on the h3 was silently losing and fifteen of the
   twenty-four titles wrapped to two lines, leaving the creator rows misaligned across the grid.
   An anchor is not a heading, so the rule does not apply to it. */
.sq-tc__title a{
  display:block;color:inherit;text-decoration:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sq-tc__title a:hover{text-decoration:underline;text-underline-offset:3px}
/* The card link is the title's, and it has to be reachable: no stretched overlay
   here, so focus lands on something visible. */
.sq-tc__title a:focus-visible{outline:2px solid var(--sq-signal);outline-offset:3px;border-radius:3px}

.sq-tc .sq-pc__price{
  margin:0;font-size: var(--sq-t-p2);font-weight: var(--sq-w-bold);letter-spacing: var(--sq-ls-h3);
  white-space:normal;text-align:end;max-inline-size:15ch;
}
.sq-tc .sq-pc__price-was{margin-inline-start:6px;font-size: var(--sq-t-p3);font-weight: var(--sq-w-medium);opacity:.6}

.sq-tc__creator{display:flex;min-inline-size:0;align-items:center;gap:9px}
.sq-tc__mark{
  inline-size:30px;block-size:30px;flex:0 0 auto;display:grid;place-items:center;
  border-radius:8px;background:var(--sq-ink);color:var(--sq-sheet);
  border:1px solid color-mix(in srgb,var(--sq-ink) 10%,transparent);
  font-size: var(--sq-t-eyebrow);font-weight: var(--sq-w-bold);letter-spacing: var(--sq-ls-body);overflow:hidden;
}
.sq-tc__mark img{inline-size:100%;block-size:100%;object-fit:cover;display:block}
.sq-tc__creator-copy{min-inline-size:0;flex:1 1 auto}
.sq-tc__creator-name{
  display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--sq-ink);font-size: var(--sq-t-p3);font-weight: var(--sq-w-bold);text-decoration:none;
}
.sq-tc__creator-name:hover{text-decoration:underline;text-underline-offset:2px}
.sq-tc__type{display:block;margin-block-start:2px;color:var(--sq-muted);font-size: var(--sq-t-p3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sq-tc__affiliate{
  flex:0 0 auto;color:var(--sq-muted);font-size: var(--sq-t-p3);font-weight: var(--sq-w-bold);
  letter-spacing: var(--sq-ls-body);text-transform:uppercase;
}
.sq-tc__creator--nameless{display:flex;align-items:center;justify-content:space-between;gap:9px;margin:0}

@media(prefers-reduced-motion:reduce){
  .sq-tc__img{transition:none}
  .sq-tc:hover .sq-tc__img{transform:none}
}

/* A template in a compact rail keeps the square, loses the caption's breathing room. */
/* Density only, and only on the home page — /browse/ uses the standard context and is not
   affected by this block at all. It used to shrink the title and price to P3 here, so the same
   product read as a different card on the home page than on /browse/: 14px against 16px on the
   two lines a reader actually looks at. Spacing stays; the type sizes come from the card. */
.sq-tc.sq-pc--ctx-compact .sq-tc__body{gap:8px;padding-block-start:10px}

/* ══════════════════════════════════════════════════════════════════════════
   PLUGIN LISTING CARD
   ──────────────────────────────────────────────────────────────────────────
   Plugins only. Templates keep `.sq-tc` and every other type keeps `.sq-pc`.

   The opposite media rule to a template. A template cover is a website and
   cropping it square loses nothing; a plugin screenshot IS the product, and
   the screenshots are every shape there is — 4:3 product shots, 768x396
   strips, 768x761 chat bubbles. So: one fixed 4:3 frame on every card, the
   whole image inside it with `contain`, and the leftover filled by a blurred
   copy of the same file rather than by white bars.

   The frame is declared with `aspect-ratio`, so the row's height is known
   before any image arrives and nothing shifts as they load.
   ══════════════════════════════════════════════════════════════════════════ */
.sq-plc{
  position:relative;display:flex;flex-direction:column;block-size:100%;min-inline-size:0;
  overflow:hidden;background:var(--sq-sheet);
  border:1px solid var(--sq-line);border-radius:16px;
  box-shadow:0 1px 0 color-mix(in srgb,var(--sq-ink) 3%,transparent);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
/* Elevation only — the box never changes size, so a hover cannot reflow the row. */
.sq-plc:hover,.sq-plc:focus-within{
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--sq-ink) 18%,var(--sq-line));
  box-shadow:0 11px 26px color-mix(in srgb,var(--sq-ink) 10%,transparent);
}

.sq-plc__media{
  position:relative;inline-size:100%;aspect-ratio:4/3;
  overflow:hidden;isolation:isolate;background:var(--sq-soft);
  border-block-end:1px solid var(--sq-line);
}

/* The same file as the main image, at the same size: identical src and srcset, so
   this is a cache hit and not a second download. Inset negatively so the blur has
   no visible edge inside the frame. */
.sq-plc__backdrop{
  position:absolute;inset:-26px;z-index:-2;
  inline-size:calc(100% + 52px);block-size:calc(100% + 52px);
  object-fit:cover;filter:blur(23px) saturate(.78);opacity:.48;transform:scale(1.08);
}
/* A light neutral veil over the backdrop, so it stays a backdrop. */
.sq-plc__media::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:color-mix(in srgb,var(--sq-sheet) 32%,transparent);
}

.sq-plc__img{
  position:relative;z-index:1;display:block;
  inline-size:100%;block-size:100%;padding:10px;
  object-fit:contain;object-position:center;
  filter:drop-shadow(0 7px 14px color-mix(in srgb,var(--sq-ink) 13%,transparent));
  transition:transform .22s ease;
}
.sq-plc:hover .sq-plc__img{transform:scale(1.012)}

.sq-plc__img--none{
  display:grid;place-items:center;inline-size:100%;block-size:100%;
  background:var(--sq-soft);color:var(--sq-muted);font-size: var(--sq-t-p3);
}

/* Covers the frame for the mouse; the title below is the real, focusable link. */
.sq-plc__medialink{position:absolute;inset:0;z-index:2;display:block}

.sq-plc .sq-pc__save{
  inset-block-start:10px;inset-inline-end:10px;z-index:3;inline-size:38px;block-size:38px;
  background:color-mix(in srgb,var(--sq-sheet) 96%,transparent);
  border-color:color-mix(in srgb,var(--sq-ink) 10%,transparent);
  box-shadow:0 2px 8px color-mix(in srgb,var(--sq-ink) 14%,transparent);
}
.sq-plc .sq-pc__save-icon{inline-size:19px;block-size:19px;background:var(--sq-ink)}

/* ── Caption ─────────────────────────────────────────────────────────────
   `space-between` with a min-height keeps the creator row on the same
   baseline across a row whether or not a title wraps. */
.sq-plc__body{
  display:flex;flex:1 1 auto;flex-direction:column;justify-content:space-between;
  min-block-size:102px;padding:14px 15px 15px;
}

.sq-plc__head{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:12px;
  margin-block-end:12px;
}
.sq-plc__title{margin:0;min-inline-size:0;font-size: var(--sq-t-p2);font-weight: var(--sq-w-bold);line-height: var(--sq-lh-ui);letter-spacing: var(--sq-ls-h3)}
/* The clamp lives on the ANCHOR: `marketplace-system.css` sets `text-wrap:balance` on every
   heading site-wide, and `text-wrap` is half of the `white-space` shorthand, so `nowrap` on
   the h3 silently loses. An anchor is not a heading. Same trap as `.sq-tc__title a`. */
.sq-plc__title a{
  display:block;color:inherit;text-decoration:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sq-plc__title a:hover{text-decoration:underline;text-underline-offset:3px}
.sq-plc__title a:focus-visible{outline:2px solid var(--sq-signal);outline-offset:3px;border-radius:3px}

/* The price becomes the status pill: "Free plan available" on a freemium listing. */
.sq-plc .sq-pc__price{
  margin:0;padding:5px 8px;white-space:nowrap;
  color:var(--wp--preset--color--verified);
  background:var(--wp--preset--color--verified-bg);
  border-radius:999px;font-size: var(--sq-t-p3);font-weight: var(--sq-w-bold);letter-spacing:0;
}
.sq-plc .sq-pc__price-was{margin-inline-start:6px;font-weight: var(--sq-w-medium);opacity:.65}

.sq-plc__creator{display:flex;min-inline-size:0;align-items:center;gap:9px}

/* Always a circle, never a square avatar. */
.sq-plc__mark{
  inline-size:34px;block-size:34px;aspect-ratio:1;flex:0 0 auto;
  display:grid;place-items:center;overflow:hidden;border-radius:50%;
  background:var(--sq-ink);color:var(--sq-sheet);
  border:1px solid color-mix(in srgb,var(--sq-ink) 11%,transparent);
  box-shadow:0 1px 3px color-mix(in srgb,var(--sq-ink) 8%,transparent);
  font-size: var(--sq-t-eyebrow);font-weight: var(--sq-w-bold);letter-spacing: var(--sq-ls-body);
}
.sq-plc__mark--logo{background:var(--wp--preset--color--media-plate)}
.sq-plc__mark img{inline-size:100%;block-size:100%;object-fit:cover;display:block}
/* A wide wordmark cover-cropped to a circle keeps three letters of the name, so it is
   contained on a plain disc instead. Still a circle; still not a square. */
.sq-plc__mark--wide{background:var(--sq-sheet)}
.sq-plc__mark--wide img{object-fit:contain;padding:4px}

.sq-plc__creator-copy{min-inline-size:0;flex:1 1 auto}
.sq-plc__creator-name{
  display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--sq-ink);font-size: var(--sq-t-p3);font-weight: var(--sq-w-bold);text-decoration:none;
}
.sq-plc__creator-name:hover{text-decoration:underline;text-underline-offset:2px}
.sq-plc__type{display:block;margin-block-start:2px;color:var(--sq-muted);font-size: var(--sq-t-p3)}
/* Visible, and quiet. */
.sq-plc__affiliate{
  flex:0 0 auto;color:var(--sq-muted);font-size: var(--sq-t-p3);font-weight: var(--sq-w-bold);
  letter-spacing: var(--sq-ls-body);text-transform:uppercase;
}
.sq-plc__creator--nameless{display:flex;align-items:center;justify-content:space-between;gap:9px;margin:0}

/* Three across, two on a tablet, one on a phone — but only on a grid that is ALL plugins.
   The browse grid is shared with templates, whose own layout is approved and must not move,
   so an unfiltered grid holding both keeps the auto-fill columns it has. */
.sgp-grid:has(.sq-plc):not(:has(.sq-tc)){grid-template-columns:repeat(3,minmax(0,1fr))!important}
@media(max-width:900px){
  .sgp-grid:has(.sq-plc):not(:has(.sq-tc)){grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:540px){
  .sgp-grid:has(.sq-plc):not(:has(.sq-tc)){grid-template-columns:1fr!important}
}

@media(prefers-reduced-motion:reduce){
  .sq-plc,.sq-plc__img{transition:none}
  .sq-plc:hover,.sq-plc:focus-within{transform:none}
  .sq-plc:hover .sq-plc__img{transform:none}
}

/* A plugin in a compact rail keeps the frame, tightens the caption. */
.sq-plc.sq-pc--ctx-compact .sq-plc__body{min-block-size:0;padding:12px 12px 13px}
.sq-plc.sq-pc--ctx-compact .sq-plc__title{font-size: var(--sq-t-p3)}

/* ══════════════════════════════════════════════════════════════════════════
   CREATOR MARK — one system, everywhere
   ──────────────────────────────────────────────────────────────────────────
   Cards, product bylines, creator profiles, homepage strips and search all
   render `Creator_Logo::mark()`, so a creator looks the same wherever they
   appear. Before this, six call sites each decided for themselves and the
   same creator could be a circle on a card, a rounded wordmark slot in a
   byline and a bare initial on the homepage, in one visit.

   Always a circle, and the logo is always `contain`. A wordmark and a square
   symbol are different shapes and neither survives being cropped to fit the
   other, so nothing is cropped: the disc is padded and the logo sits whole
   inside it. `overflow:hidden` keeps a stray transparent edge off the border.
   ══════════════════════════════════════════════════════════════════════════ */
.sq-cmark{
  --sq-cmark-size:36px;
  /* The disc carries a 1px border, and a border that grows the box makes a logo mark 38px
     next to a 36px initials mark — a two-pixel step in a row of avatars that reads as a
     wobble. Border-box keeps every size in SIZES exact whatever the theme sets globally. */
  box-sizing:border-box;
  flex:0 0 auto;
  inline-size:var(--sq-cmark-size);block-size:var(--sq-cmark-size);aspect-ratio:1;
  display:grid;place-items:center;overflow:hidden;
  border-radius:50%;
  background:var(--sq-ink);color:var(--sq-sheet);
  font-weight: var(--sq-w-bold);letter-spacing: var(--sq-ls-body);line-height: var(--sq-lh-h1);
  /* Own the vertical rhythm so a mark beside a two-line name still centres. */
  align-self:center;
}

.sq-cmark--compact{--sq-cmark-size:28px;font-size: var(--sq-t-p3)}
.sq-cmark--card{--sq-cmark-size:36px;font-size: var(--sq-t-p3)}
.sq-cmark--profile{--sq-cmark-size:48px;font-size: var(--sq-t-p2)}
.sq-cmark--hero{--sq-cmark-size:64px;font-size: var(--sq-t-h3);align-self:flex-start}

/* A real logo: light ground and a hairline, so a transparent PNG reads as a
   mark rather than as a hole, and a white logo still has an edge. */
.sq-cmark--logo{
  background:var(--wp--preset--color--surface-raised);
  border:1px solid color-mix(in srgb,var(--sq-ink) 11%,transparent);
  box-shadow:0 1px 3px color-mix(in srgb,var(--sq-ink) 8%,transparent);
}
.sq-cmark--logo img{
  inline-size:100%;block-size:100%;display:block;
  /* The padding below is inside the 100%, not added to it. Without this the image box is
     larger than the disc that clips it, so the logo is scaled to a box bigger than the frame
     and loses the breathing room the padding was meant to buy. */
  box-sizing:border-box;
  object-fit:contain;object-position:center;
  /* Room for a wordmark to breathe inside a circle without touching the rim. */
  padding:14%;
  /* A creator row is flex; without this a long creator name can squeeze the mark. */
  min-inline-size:0;
  /* Inherited margins, transforms and offsets from card-image rules must not reach a mark. */
  margin:0;transform:none;
}

/* A creator's own square icon, used at card sizes in place of a wordmark.
   It is already drawn to be small, so it needs less breathing room than a wordmark and can
   sit larger in the disc — but it is still contained, never cropped. */
.sq-cmark--logo img.sq-cmark__icon{padding:11%}

/* A mark that carries its own solid ground fills the disc rather than sitting inside it.
   The disc takes the artwork's own colour, so a lime tile becomes a lime circle instead of a
   lime square inside a white one. `cover` crops nothing here: the source is square and the
   frame is square, so the two agree and the whole tile is visible. */
.sq-cmark--bleed{background:var(--sq-cmark-ground)!important;border-color:color-mix(in srgb,var(--sq-cmark-ground) 78%,var(--wp--preset--color--text))}
.sq-cmark--bleed img{padding:0!important;object-fit:cover}

/* In dark, the rim has to lighten rather than darken.
   Mixing a black tile toward the text colour leaves it black, so Gorgias, LiveChat and
   Intention to Empire lost their edge entirely against a near-black page and read as holes.
   Mixing toward the stable white gives every ground a rim, whatever colour it is. */
html[data-sq-theme="dark"] .sq-cmark--bleed{
  border-color:color-mix(in srgb,var(--sq-cmark-ground) 62%,var(--wp--preset--color--on-signal));
}

/* The disc stays a light, stable ground in BOTH themes.
   A favicon is drawn to sit on whatever the brand's own site uses, which is usually white, and
   several here are dark artwork on transparent — Candor and Station Seven among them. Letting
   the disc follow the theme put dark marks on a dark disc and they vanished. So the ground is
   fixed and the border does the theme-adapting: hairline in light, a visible neutral ring in
   dark so the disc still reads as an object.
   No invert() or filter anywhere near a brand mark: it is the creator's artwork, and inverting
   it produces a colour they never chose. */
html[data-sq-theme="dark"] .sq-cmark--logo{
  /* `on-signal` and not `accent-contrast`: accent-contrast flips with the theme, so using it
     here painted the disc the same near-black as the page and every dark-artwork mark vanished
     — Candor and Station Seven among them. `on-signal` is the palette's deliberately stable
     white, kept that way precisely so a value that must not follow the theme can say so. */
  background:var(--wp--preset--color--on-signal);
  border-color:color-mix(in srgb,var(--wp--preset--color--on-signal) 30%,transparent);
  box-shadow:none;
}
/* White-on-transparent artwork is the exception the flag already exists for: it keeps its dark
   disc in dark mode rather than being forced onto a light one it would disappear against. */
html[data-sq-theme="dark"] .sq-cmark--ondark{
  background:var(--wp--preset--color--text);
  border-color:color-mix(in srgb,var(--wp--preset--color--accent-contrast) 30%,transparent);
}

/* Our own mark. It's a full circular badge with its own colours baked in, so it fills the
   disc edge to edge rather than sitting inset like a single-colour glyph would. */
.sq-cmark--brand{background:var(--sq-ink);color:var(--sq-paper)}
.sq-cmark__brand{inline-size:100%;block-size:100%;display:block;object-fit:cover}

/* The last resort, and it should look deliberate rather than broken. */
.sq-cmark--initials{background:var(--sq-ink);color:var(--sq-paper)}

/* The creator profile hero paints a fixed dark ground in both themes, so the
   mark takes a light disc there regardless of the active theme. */
.sgp-creator__hero .sq-cmark{
  background:var(--wp--preset--color--accent-contrast);
  color:var(--wp--preset--color--text);
}
.sgp-creator__hero .sq-cmark--logo{border-color:color-mix(in srgb,var(--sq-ink) 8%,transparent)}

@media(max-width:700px){
  .sq-cmark--hero{--sq-cmark-size:52px;font-size: var(--sq-t-h4)}
}

/* A logo drawn in white keeps a dark disc, or it is not there at all. Measured from
   the file at import (`_sgp_logo_dark_ground`), not decided per creator by hand. */
.sq-cmark--ondark{
  background:var(--wp--preset--color--text);
  border-color:color-mix(in srgb,var(--wp--preset--color--text) 25%,transparent);
}
.sgp-creator__hero .sq-cmark--ondark{background:var(--wp--preset--color--text)}

/* Extension titles carry the creator and a descriptor — "Termageddon — Auto-Updating Website
   Policies" — so the single line the plugin card clamps to hid most of the name. Two lines,
   with the space for both always reserved, so a one-line title and a two-line title still put
   their creator rows on the same baseline across a row. Scoped to extensions: plugin titles
   are short and their one-line clamp is right for them. */
.sq-plc.sq-pc--extension .sq-plc__title{min-block-size:calc(2 * 1.25em)}
.sq-plc.sq-pc--extension .sq-plc__title a{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  white-space:normal;overflow:hidden;
}


/* ═══ BROWSE FILTERS ═══════════════════════════════════════════════════════════

   The panel became real form controls — checkboxes for refinements, radios for the
   product-type scope — so that it is keyboard-operable, announces itself to a screen
   reader, and can hold several draft choices on a phone before being applied. This
   sheet is what makes them look like Squarespell rather than like a form.

   Everything below is built from the existing system: `--wp--preset--color--*` for
   colour so light and dark follow the rest of the site for free, `--sq-t-*` for type,
   `--wp--custom--radius--*` for corners, and the shared Lucide sprite for every glyph
   — the same set, weight and currentColor inheritance as the header.

   Transitions are 150–200ms and every one of them is switched off under
   prefers-reduced-motion at the end of this block.                                  */

/* ─── Shared: the hidden control ───────────────────────────────────────────────
   Out of sight, in the tab order and in the accessibility tree, so `:has(:checked)`
   and `:has(:focus-visible)` can drive the visuals of the label around it. */

.sgp-facets__input{
  position:absolute;inline-size:1px;block-size:1px;
  margin:0;padding:0;border:0;opacity:0;pointer-events:none;
}

/* ─── The panel header ─────────────────────────────────────────────────────────
   Title, count and the way out, once. The sheet has its own bar on a phone, so this
   one is desktop-only rather than duplicated. */

.sgp-facets__head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-block-size:44px;padding-block-end:14px;
  border-block-end:1px solid var(--wp--preset--color--border);
  margin-block-end:18px;
}
.sgp-facets__title{
  display:flex;align-items:center;gap:9px;margin:0;
  font-family:var(--sq-font-sans);font-size:var(--sq-t-p3);
  font-weight:var(--sq-w-semibold);letter-spacing:var(--sq-ls-h4);
  color:var(--wp--preset--color--text);
}
.sgp-facets__head-icon{inline-size:17px;block-size:17px;color:var(--wp--preset--color--text-subtle)}
.sgp-facets__clear-row{display:inline-flex}
.sq-browse .sgp-filters__clear{
  display:inline-flex;align-items:center;min-block-size:28px;margin:0;padding:0;
  font-family:var(--sq-font-sans);font-size:var(--sq-t-eyebrow);font-weight:var(--sq-w-medium);
  color:var(--wp--preset--color--text-muted);text-decoration:none;
  border-block-end:1px solid transparent;
  transition:color var(--wp--custom--transition--base),border-color var(--wp--custom--transition--base);
}
.sq-browse .sgp-filters__clear:hover{
  color:var(--wp--preset--color--brand);
  border-block-end-color:color-mix(in srgb,var(--wp--preset--color--brand) 45%,transparent);
}
@media (max-width:899px){.sgp-facets__head{display:none}}

/* ─── Product-type scope ───────────────────────────────────────────────────────
   Not a facet: one browsing scope, so radios, no checkbox mark, and a selected state
   strong enough to read as "the page you are on" from across the sidebar. */

.sgp-facets__scope{border:0;padding:0;margin:0 0 18px}
.sgp-facets__scope-legend{
  display:flex;align-items:center;gap:7px;padding:0;margin-block-end:8px;
  font-family:var(--sq-font-mono);font-size:var(--sq-t-eyebrow);
  letter-spacing:var(--sq-ls-eyebrow);text-transform:uppercase;
  color:var(--wp--preset--color--text-subtle);
}
.sgp-facets__legend-icon{inline-size:14px;block-size:14px}
.sgp-facets__scope-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.sgp-facets__scope-item{
  position:relative;display:grid;
  grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:10px;
  min-block-size:38px;padding:0 10px;
  border-radius:var(--wp--custom--radius--md);cursor:pointer;
  font-family:var(--sq-font-sans);font-size:var(--sq-t-p3);
  color:var(--wp--preset--color--text-muted);
  transition:background var(--wp--custom--transition--base),color var(--wp--custom--transition--base);
}
.sgp-facets__scope-icon{inline-size:16px;block-size:16px;opacity:.75}
.sgp-facets__scope-item:hover{background:var(--wp--preset--color--surface);color:var(--wp--preset--color--text)}
.sgp-facets__scope-item:has(.sgp-facets__input:checked){
  background:var(--wp--preset--color--surface);
  color:var(--wp--preset--color--text);
  font-weight:var(--sq-w-semibold);
}
.sgp-facets__scope-item:has(.sgp-facets__input:checked) .sgp-facets__scope-icon{opacity:1;color:var(--wp--preset--color--brand)}
/* The rail is the strong part of the selected state; the fill stays quiet. */
.sgp-facets__scope-item:has(.sgp-facets__input:checked)::before{
  content:"";position:absolute;inset-block:7px;inset-inline-start:-1px;
  inline-size:3px;border-radius:var(--wp--custom--radius--pill);
  background:var(--wp--preset--color--brand);
}
.sgp-facets__scope-count{
  font-family:var(--sq-font-mono);font-size:var(--sq-t-eyebrow);
  font-variant-numeric:tabular-nums;color:var(--wp--preset--color--text-subtle);
}
.sgp-facets__scope-item:has(.sgp-facets__input:checked) .sgp-facets__scope-count{color:var(--wp--preset--color--text-muted)}
.sgp-facets__scope-item:has(.sgp-facets__input:focus-visible){
  outline:2px solid var(--wp--preset--color--brand);outline-offset:1px;
}
.sgp-facets__scope-go{margin-block-start:8px}

/* ─── Group headings ───────────────────────────────────────────────────────────
   Icon, label, selected-count, chevron — on one aligned row, with the chevron
   rotating rather than a caret redrawing itself. */

.sq-browse .sgp-filters{border-block-end:1px solid var(--wp--preset--color--border)!important}
.sq-browse .sgp-filters:last-of-type{border-block-end:0!important}
.sq-browse .sgp-filters > summary{
  min-block-size:46px;display:flex;align-items:center;
  padding:11px 2px;border:0;cursor:pointer;list-style:none;
}
.sq-browse .sgp-filters > summary::-webkit-details-marker{display:none}
/* The old CSS-drawn caret. Replaced by a sprite chevron so the shape and stroke
   weight match every other chevron on the site, including the header's. */
.sq-browse .sgp-filters > summary::after{display:none!important}
.sgp-filters__summary{
  display:grid;grid-template-columns:18px minmax(0,1fr) auto auto;
  align-items:center;gap:9px;inline-size:100%;
}
.sgp-filters__summary-icon{inline-size:16px;block-size:16px;color:var(--wp--preset--color--text-subtle)}
.sgp-filters__summary-label{
  font-family:var(--sq-font-sans);font-size:var(--sq-t-p3);
  font-weight:var(--sq-w-semibold);letter-spacing:var(--sq-ls-h4);
  color:var(--wp--preset--color--text);
}
.sgp-filters__summary-count{
  display:inline-flex;align-items:center;justify-content:center;
  min-inline-size:18px;block-size:18px;padding-inline:5px;
  border-radius:var(--wp--custom--radius--pill);
  background:var(--wp--preset--color--brand);color:var(--wp--preset--color--accent-contrast);
  font-family:var(--sq-font-mono);font-size:0.625rem;font-variant-numeric:tabular-nums;
  line-height:var(--sq-lh-ui);
}
.sgp-filters__chevron{
  inline-size:15px;block-size:15px;color:var(--wp--preset--color--text-subtle);
  transition:transform var(--wp--custom--transition--base);
}
.sgp-filters[open] > summary .sgp-filters__chevron{transform:rotate(180deg)}
.sq-browse .sgp-filters > summary:hover .sgp-filters__summary-icon,
.sq-browse .sgp-filters > summary:hover .sgp-filters__chevron{color:var(--wp--preset--color--text)}
.sq-browse .sgp-filters > summary:focus-visible{
  outline:2px solid var(--wp--preset--color--brand);outline-offset:2px;
  border-radius:var(--wp--custom--radius--sm);
}
.sq-browse .sgp-filters__group{padding:0 0 16px}

/* ─── Option rows ──────────────────────────────────────────────────────────────
   The square mark, the label, and a quiet count that is information rather than a
   second control competing with it. */

.sgp-filters__item{position:relative;cursor:pointer}
.sq-browse .sgp-filters__item{
  min-block-size:34px;display:grid;
  grid-template-columns:18px minmax(0,1fr);align-items:center;gap:10px;
  padding:2px 8px 2px 2px;border-radius:var(--wp--custom--radius--sm);
  font-family:var(--sq-font-sans);font-size:var(--sq-t-p3);
  color:var(--wp--preset--color--text-muted);
  transition:background var(--wp--custom--transition--base),color var(--wp--custom--transition--base);
}
.sq-browse .sgp-filters__item:has(.sgp-filters__mark){grid-template-columns:18px 18px minmax(0,1fr)}
.sq-browse .sgp-filters__item:has(.sgp-filters__count){grid-template-columns:18px minmax(0,1fr) auto}
.sq-browse .sgp-filters__item:has(.sgp-filters__mark):has(.sgp-filters__count){grid-template-columns:18px 18px minmax(0,1fr) auto}
.sq-browse .sgp-filters__item:hover{background:var(--wp--preset--color--surface);color:var(--wp--preset--color--text)}
.sq-browse .sgp-filters__check{
  inline-size:17px;block-size:17px;
  border:1.5px solid var(--wp--preset--color--border-strong);
  border-radius:5px;background:var(--wp--preset--color--surface-raised);
  transition:background var(--wp--custom--transition--base),border-color var(--wp--custom--transition--base);
}
.sgp-filters__mark{inline-size:16px;block-size:16px;object-fit:contain;flex:none}
.sgp-filters__item:has(.sgp-facets__input:checked){color:var(--wp--preset--color--text);font-weight:var(--sq-w-semibold)}
.sgp-filters__item:has(.sgp-facets__input:checked) .sgp-filters__check{
  border-color:var(--wp--preset--color--brand);background:var(--wp--preset--color--brand);
}
.sgp-filters__item:has(.sgp-facets__input:checked) .sgp-filters__check::after{opacity:1}
.sq-browse .sgp-filters__item:has(.sgp-facets__input:checked) .sgp-filters__check::after{
  inline-size:6px;block-size:10px;border-color:var(--wp--preset--color--accent-contrast);
}
/* Focus has to be visible on the mark, because the control it belongs to is not. */
.sgp-filters__item:has(.sgp-facets__input:focus-visible) .sgp-filters__check{
  outline:2px solid var(--wp--preset--color--brand);outline-offset:2px;
}
.sgp-filters__count{
  font-family:var(--sq-font-mono);font-size:var(--sq-t-eyebrow);
  font-variant-numeric:tabular-nums;color:var(--wp--preset--color--text-subtle);
}
.sgp-filters__item:has(.sgp-facets__input:checked) .sgp-filters__count{color:var(--wp--preset--color--text-muted)}

/* An option that cannot return anything, kept visible so it can come back when the
   constraint that emptied it is lifted. Removing it instead reads as a bug. */
.sq-browse .sgp-filters__item.is-empty{opacity:.42;cursor:not-allowed}
.sq-browse .sgp-filters__item.is-empty:hover{background:transparent}
.sq-browse .sgp-filters__item.is-empty .sgp-filters__check{
  border-style:dashed;background:transparent;
}

/* ─── Show more, and search within a long facet ────────────────────────────────
   Both belong to the group rather than sitting under it: the search shares the option
   rows' left edge, and "Show more" reads as the last row of the list. */

.sgp-filters__more{
  display:flex;align-items:center;gap:6px;
  inline-size:100%;min-block-size:34px;margin-block-start:2px;
  padding:0 8px 0 30px;border:0;background:none;cursor:pointer;text-align:start;
  font-family:var(--sq-font-sans);font-size:var(--sq-t-eyebrow);
  font-weight:var(--sq-w-medium);color:var(--wp--preset--color--brand);
  border-radius:var(--wp--custom--radius--sm);
  transition:background var(--wp--custom--transition--base);
}
.sgp-filters__more:hover{background:var(--wp--preset--color--surface)}
.sgp-filters__more:focus-visible{outline:2px solid var(--wp--preset--color--brand);outline-offset:1px}
.sgp-filters__search{margin:0 0 8px}
.sgp-filters__search-input{
  inline-size:100%;min-block-size:34px;padding:0 10px;
  border:1px solid var(--wp--preset--color--border);
  border-radius:var(--wp--custom--radius--sm);
  background:var(--wp--preset--color--surface);
  color:var(--wp--preset--color--text);
  font-family:var(--sq-font-sans);font-size:var(--sq-t-eyebrow);
  transition:border-color var(--wp--custom--transition--base),background var(--wp--custom--transition--base);
}
.sgp-filters__search-input::placeholder{color:var(--wp--preset--color--text-subtle)}
.sgp-filters__search-input:focus{
  outline:none;background:var(--wp--preset--color--surface-raised);
  border-color:var(--wp--preset--color--brand);
}

/* ─── Price range ──────────────────────────────────────────────────────────── */

.sgp-filters__range{border:0;padding:0;margin:0;min-inline-size:0}
.sgp-filters__range-row{display:flex;gap:10px;margin:0 0 8px}
.sgp-filters__range-field{display:flex;flex-direction:column;gap:4px;flex:1;min-inline-size:0}
.sgp-filters__range-field label{
  font-family:var(--sq-font-mono);font-size:0.625rem;
  letter-spacing:var(--sq-ls-eyebrow);text-transform:uppercase;
  color:var(--wp--preset--color--text-subtle);
}
.sgp-filters__range-field input{
  inline-size:100%;min-block-size:36px;padding:0 10px;
  border:1px solid var(--wp--preset--color--border);
  border-radius:var(--wp--custom--radius--sm);
  background:var(--wp--preset--color--surface);
  color:var(--wp--preset--color--text);
  font-family:var(--sq-font-mono);font-size:var(--sq-t-p3);
  transition:border-color var(--wp--custom--transition--base),background var(--wp--custom--transition--base);
}
.sgp-filters__range-field input:focus{
  outline:none;background:var(--wp--preset--color--surface-raised);
  border-color:var(--wp--preset--color--brand);
}
.sgp-filters__range-note{margin:0;font-size:var(--sq-t-eyebrow);color:var(--wp--preset--color--text-subtle)}
.sgp-facets__none{font-size:var(--sq-t-p3);color:var(--wp--preset--color--text-subtle)}

/* A <fieldset> is what gives each group a name a screen reader can announce, but the
   user-agent draws it a border and an inset. The <summary> is the visible heading, so
   the box is chrome the design never asked for. */
.sgp-filters__group fieldset{border:0;margin:0;padding:0;min-inline-size:0}

/* A <button> does not inherit the page font, and .sgp-btn is now on one. */
button.sgp-btn{font-family:var(--sq-font-sans);cursor:pointer}

/* ─── Sticky rail ──────────────────────────────────────────────────────────────
   Sticky below the header, scrolling inside itself only when it is genuinely taller
   than the viewport — and with overscroll chaining left ON, so reaching the end of
   the rail carries on scrolling the page rather than trapping the pointer in it.
   Switched off entirely on a short viewport, where a sticky rail would leave a
   letterbox of options. */

@media (min-width:900px) and (min-height:640px){
  .sq-browse .sgp-catalogue__filters{
    position:sticky;top:88px;align-self:start;
    max-block-size:calc(100dvh - 112px);
    overflow-y:auto;overscroll-behavior:auto;
    scrollbar-width:thin;
  }
  .sq-browse .sgp-catalogue__filters::-webkit-scrollbar{inline-size:6px}
  .sq-browse .sgp-catalogue__filters::-webkit-scrollbar-thumb{
    border-radius:var(--wp--custom--radius--pill);
    background:var(--wp--preset--color--border-strong);
  }
}

/* ─── Applied filters ──────────────────────────────────────────────────────────
   One height, a quiet fill, and a remove control that looks like one. The group name
   rides in the chip because "Squarespace" alone is ambiguous — it is a platform here
   and could as easily have been a creator. */

.sgp-applied:empty{display:none}
.sgp-applied .sgp-chips--applied{
  display:flex;flex-wrap:wrap;gap:8px;
  list-style:none;margin:0 0 16px;padding:0;
}
.sq-browse .sgp-chip--removable{
  display:inline-flex;align-items:center;gap:6px;
  min-block-size:30px;padding:0 6px 0 10px!important;
  border:1px solid var(--wp--preset--color--border)!important;
  border-radius:var(--wp--custom--radius--pill);
  background:var(--wp--preset--color--surface-raised)!important;
  font-family:var(--sq-font-sans);font-size:var(--sq-t-eyebrow)!important;
  color:var(--wp--preset--color--text);text-decoration:none;
  transition:border-color var(--wp--custom--transition--base),background var(--wp--custom--transition--base);
}
.sq-browse .sgp-chip--removable::before{display:none}
.sq-browse .sgp-chip--removable:hover{
  border-color:var(--wp--preset--color--border-strong)!important;
  background:var(--wp--preset--color--surface)!important;
}
.sq-browse .sgp-chip--removable:focus-visible{outline:2px solid var(--wp--preset--color--brand);outline-offset:2px}
.sgp-chip__group{color:var(--wp--preset--color--text-subtle);font-weight:var(--sq-w-regular)}
.sgp-chip__group::after{content:":";margin-inline-start:1px}
.sgp-chip__value{font-weight:var(--sq-w-semibold)}
.sgp-chip__x{
  display:inline-flex;align-items:center;justify-content:center;
  inline-size:18px;block-size:18px;border-radius:var(--wp--custom--radius--pill);
  color:var(--wp--preset--color--text-subtle);
  transition:background var(--wp--custom--transition--base),color var(--wp--custom--transition--base);
}
.sgp-chip__x svg{inline-size:11px;block-size:11px}
.sgp-chip--removable:hover .sgp-chip__x{
  background:var(--wp--preset--color--text);color:var(--wp--preset--color--surface-raised);
}
.sq-browse .sgp-chip--clear{
  display:inline-flex;align-items:center;gap:5px;min-block-size:30px;
  border:0!important;background:none!important;padding:0 6px!important;
  color:var(--wp--preset--color--text-muted);
  font-family:var(--sq-font-sans);font-size:var(--sq-t-eyebrow)!important;
  text-decoration:none;
}
.sq-browse .sgp-chip--clear::before{display:none}
.sq-browse .sgp-chip--clear:hover{color:var(--wp--preset--color--brand)}
.sq-browse .sgp-chip--clear svg{inline-size:12px;block-size:12px}
.sgp-pill__count{
  margin-inline-start:6px;font-family:var(--sq-font-mono);
  font-size:var(--sq-t-eyebrow);color:var(--wp--preset--color--text-subtle);
}

/* ─── Toolbar ──────────────────────────────────────────────────────────────── */

.sgp-toolbar__filter-icon{inline-size:16px;block-size:16px}
.sgp-toolbar__filter-open{display:none}
.sgp-toolbar__scope{
  display:inline-flex;align-items:center;gap:6px;
  margin-inline-start:10px;padding-inline-start:10px;
  border-inline-start:1px solid var(--wp--preset--color--border);
  color:var(--wp--preset--color--text);font-weight:var(--sq-w-semibold);
}
.sgp-toolbar__scope-icon{inline-size:14px;block-size:14px;color:var(--wp--preset--color--text-subtle)}
.sgp-toolbar__all{
  margin-inline-start:10px;font-size:var(--sq-t-eyebrow);
  color:var(--wp--preset--color--text-muted);text-decoration:underline;
  text-underline-offset:3px;
}
.sgp-toolbar__all:hover{color:var(--wp--preset--color--brand)}
/* The native select arrow is the one control on this page drawn by the OS. */
.sgp-toolbar__select{position:relative;display:inline-flex;align-items:center}
.sq-browse .sgp-toolbar__sort select{
  appearance:none;-webkit-appearance:none;
  padding-inline-end:34px;
  font-family:var(--sq-font-sans);
  transition:border-color var(--wp--custom--transition--base);
}
.sq-browse .sgp-toolbar__sort select:hover{border-color:var(--wp--preset--color--text-subtle)}
.sgp-toolbar__select-chevron{
  position:absolute;inset-inline-end:12px;pointer-events:none;
  inline-size:14px;block-size:14px;color:var(--wp--preset--color--text-subtle);
}

/* ─── Asynchronous updates ─────────────────────────────────────────────────────
   Dimmed, never blanked and never collapsed: the grid keeps its height so the page
   does not jump under a pointer or a thumb mid-refinement. A hairline at the top of
   the results says something is happening without a spinner taking the screen. */

.sgp-catalogue__results{position:relative}
.sgp-catalogue__results[aria-busy="true"] [data-sgp-results]{
  opacity:.45;transition:opacity var(--wp--custom--transition--base);
}
.sgp-catalogue__results[aria-busy="true"]::before{
  content:"";position:absolute;inset-block-start:0;inset-inline:0;
  block-size:2px;border-radius:var(--wp--custom--radius--pill);
  background:linear-gradient(90deg,transparent,var(--wp--preset--color--brand),transparent);
  background-size:40% 100%;background-repeat:no-repeat;
  animation:sgp-facet-progress 1100ms linear infinite;
  z-index:2;
}
@keyframes sgp-facet-progress{
  from{background-position:-40% 0}
  to{background-position:140% 0}
}

/* ─── Mobile: the bottom sheet ─────────────────────────────────────────────────
   Draft-then-apply, dressed as the sheet it behaves like. */

@media (max-width:899px){
  /* The rail's own trigger stands down IN FAVOUR of the toolbar's, which sits beside
     Sort so the two controls a phone has read as the matched pair they are — but only
     once the script is running. With no script the toolbar's label is not focusable, so
     this one stays: it is then the only keyboard route into the sheet. */
  .sgp-browse--enhanced .sgp-filters-panel__summary{display:none}
  .sgp-filters-panel__toggle:focus-visible ~ .sgp-filters-panel__summary{
    outline:2px solid var(--wp--preset--color--brand);outline-offset:2px;
  }
  .sq-browse .sgp-catalogue__filters{padding:0;border:0}

  .sgp-toolbar{
    display:grid;grid-template-columns:1fr 1fr;align-items:center;
    gap:10px;min-block-size:0;
  }
  .sgp-toolbar__count{grid-column:1/-1;order:-1}
  .sgp-toolbar__filter-toggle{
    display:inline-flex!important;align-items:center;justify-content:center;gap:8px;
    min-block-size:44px;padding:0 14px;
    border:1px solid var(--wp--preset--color--border-strong);
    border-radius:var(--wp--custom--radius--md);
    background:var(--wp--preset--color--surface-raised);
    font-family:var(--sq-font-sans);font-size:var(--sq-t-p3);
    font-weight:var(--sq-w-semibold);cursor:pointer;
  }
  .sgp-toolbar__filter-hide,.sgp-toolbar__filter-show{display:none}
  .sgp-toolbar__filter-open{display:inline}
  .sq-browse .sgp-toolbar__sort{display:flex;margin:0}
  .sq-browse .sgp-toolbar__sort label{display:none}
  .sq-browse .sgp-toolbar__sort select{
    inline-size:100%;min-block-size:44px;
    border-radius:var(--wp--custom--radius--md);
    font-size:var(--sq-t-p3);
  }
  .sgp-toolbar__select{inline-size:100%}

  /* Backdrop. Present at all times so it can fade rather than appear. */
  .sgp-filters-panel__scrim{
    display:block;position:fixed;inset:0;z-index:60;
    background:color-mix(in srgb,var(--wp--preset--color--text) 45%,transparent);
    opacity:0;visibility:hidden;
    transition:opacity var(--wp--custom--transition--base),visibility var(--wp--custom--transition--base);
  }
  .sgp-filters-panel__toggle:checked ~ .sgp-filters-panel__scrim{opacity:1;visibility:visible}

  /* The sheet itself. Kept in the layout and translated off-screen rather than
     display:none'd, because `display` cannot be transitioned and a sheet that
     appears instantly reads as a page change rather than as a panel. `visibility`
     takes it out of the tab order while it is down. */
  .sgp-filters-panel__body{
    display:grid!important;
    grid-template-rows:auto minmax(0,1fr) auto;
    position:fixed;inset-inline:0;inset-block-end:0;z-index:61;
    block-size:min(88dvh,760px);
    border-radius:20px 20px 0 0;
    background:var(--wp--preset--color--canvas);
    box-shadow:var(--wp--custom--shadow--lg);
    transform:translateY(101%);visibility:hidden;
    transition:transform var(--wp--custom--transition--base),visibility var(--wp--custom--transition--base);
  }
  .sgp-filters-panel__toggle:checked ~ .sgp-filters-panel__body{
    transform:translateY(0);visibility:visible;
  }

  .sgp-filters-panel__bar{
    position:relative;display:flex;align-items:center;justify-content:space-between;
    gap:12px;padding:18px 20px 14px;
    border-block-end:1px solid var(--wp--preset--color--border);
    background:var(--wp--preset--color--canvas);
    border-radius:20px 20px 0 0;
  }
  .sgp-filters-panel__grip{
    position:absolute;inset-block-start:8px;inset-inline-start:50%;
    inline-size:38px;block-size:4px;transform:translateX(-50%);
    border-radius:var(--wp--custom--radius--pill);
    background:var(--wp--preset--color--border-strong);
  }
  .sgp-filters-panel__bar-title{
    display:flex;align-items:center;gap:8px;
    font-family:var(--sq-font-sans);font-size:var(--sq-t-h4);
    font-weight:var(--sq-w-semibold);letter-spacing:var(--sq-ls-h4);
  }
  .sgp-filters-panel__close{
    display:inline-flex;align-items:center;justify-content:center;
    inline-size:44px;block-size:44px;margin-inline-end:-10px;
    border-radius:var(--wp--custom--radius--pill);cursor:pointer;
    color:var(--wp--preset--color--text-muted);
    transition:background var(--wp--custom--transition--base),color var(--wp--custom--transition--base);
  }
  .sgp-filters-panel__close:hover{background:var(--wp--preset--color--surface);color:var(--wp--preset--color--text)}
  .sgp-filters-panel__close svg{inline-size:18px;block-size:18px}

  .sgp-filters-panel__scroll{
    overflow-y:auto;overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding:16px 20px 20px;
  }

  .sgp-filters-panel__foot{
    display:flex;gap:10px;
    padding:14px 20px calc(14px + env(safe-area-inset-bottom,0px));
    border-block-start:1px solid var(--wp--preset--color--border);
    background:var(--wp--preset--color--canvas);
  }
  .sgp-filters-panel__apply{
    flex:1;min-block-size:48px;white-space:nowrap;gap:8px;
    border-radius:var(--wp--custom--radius--md);
  }
  .sgp-filters-panel__apply svg{inline-size:15px;block-size:15px}
  .sgp-filters-panel__foot .sgp-btn:not(.sgp-filters-panel__apply){
    min-block-size:48px;border-radius:var(--wp--custom--radius--md);
  }

  /* Comfortable spacing, and 44px targets throughout the sheet. */
  .sq-browse .sgp-filters__item{min-block-size:44px;font-size:var(--sq-t-p3);grid-template-columns:22px minmax(0,1fr)}
  .sq-browse .sgp-filters__item:has(.sgp-filters__count){grid-template-columns:22px minmax(0,1fr) auto}
  .sq-browse .sgp-filters__item:has(.sgp-filters__mark){grid-template-columns:22px 18px minmax(0,1fr)}
  .sq-browse .sgp-filters__item:has(.sgp-filters__mark):has(.sgp-filters__count){grid-template-columns:22px 18px minmax(0,1fr) auto}
  .sq-browse .sgp-filters__check{inline-size:20px;block-size:20px}
  .sq-browse .sgp-filters > summary{min-block-size:52px;font-size:var(--sq-t-p2)}
  .sgp-filters__summary-label{font-size:var(--sq-t-p2)}
  .sgp-facets__scope-item{min-block-size:46px;font-size:var(--sq-t-p2)}
  .sgp-filters__more{min-block-size:44px;padding-inline-start:32px}
  .sgp-filters__search-input,.sgp-filters__range-field input{min-block-size:44px}

  /* Chips scroll, and say so: a fade at the trailing edge is the only honest way to
     show there are more without a second row of chrome. */
  .sgp-applied .sgp-chips--applied{
    flex-wrap:nowrap;overflow-x:auto;
    margin-inline:calc(var(--wp--custom--shell--gutter) * -1);
    padding-inline:var(--wp--custom--shell--gutter);
    padding-block-end:2px;scrollbar-width:none;
    /* Only the alpha channel of a mask is read, so the opaque stop is `currentColor`
       rather than a literal — the hue is never rendered and needs no token. */
    -webkit-mask-image:linear-gradient(to right,currentColor calc(100% - 28px),transparent);
    mask-image:linear-gradient(to right,currentColor calc(100% - 28px),transparent);
  }
  .sgp-applied .sgp-chips--applied::-webkit-scrollbar{display:none}
  .sgp-applied .sgp-chips--applied > li{flex:0 0 auto}
}

/* Body scroll lock while the sheet is open. */
body.sgp-sheet-open{overflow:hidden}
@media (min-width:900px){body.sgp-sheet-open{overflow:auto}}

/* The badge sets its own `display`, which beats the user-agent rule for [hidden].
   Without this a clean scoped page shows a filter badge reading "0". */
.sgp-filters-panel__badge[hidden]{display:none}

/* ─── Verification badges ──────────────────────────────────────────────────────
   Two tiers, and they must not be mistakable for each other at a glance. The
   hands-on tier keeps the verified green and a badge-check; the listing tier is a
   quiet shield on the neutral surface, because it is a weaker claim and has to look
   like one. */

.sgp-badge__symbol{flex:none;inline-size:13px;block-size:13px}
.sgp-badge--listing{
  color:var(--wp--preset--color--text-muted);
  background:var(--wp--preset--color--surface);
  border-color:var(--wp--preset--color--border);
}
.sgp-badge[data-sgp-tier="hands_on"] .sgp-badge__label{font-weight:var(--sq-w-semibold)}
.sgp-badge[data-sgp-tier="listing"] .sgp-badge__label{font-weight:var(--sq-w-medium)}

.sqpp-trust__icon{inline-size:15px;block-size:15px;flex:none}
.sqpp-trust__how{
  margin-inline-start:8px;font-size:var(--sq-t-eyebrow);
  color:var(--wp--preset--color--text-muted);text-decoration:underline;
  text-underline-offset:3px;
}
.sqpp-trust__how:hover{color:var(--wp--preset--color--brand)}

/* ─── Reduced motion ───────────────────────────────────────────────────────────
   Every transition and the one animation above, switched off together. State still
   changes; it simply stops moving. */

@media (prefers-reduced-motion:reduce){
  .sgp-filters__chevron,
  .sgp-filters-panel__body,
  .sgp-filters-panel__scrim,
  .sgp-filters__item,
  .sgp-facets__scope-item,
  .sgp-filters__check,
  .sgp-chip--removable,
  .sgp-chip__x,
  .sgp-catalogue__results[aria-busy="true"] [data-sgp-results]{transition:none!important}
  .sgp-catalogue__results[aria-busy="true"]::before{animation:none;opacity:.7}
}

/* ─── Rail width and desktop toolbar ───────────────────────────────────────────
   A deliberate width rather than whatever the grid left over: the rail carries an
   icon, a label and a count on one row, and 248px made all three fight. */

@media (min-width:900px){
  .sq-browse > .sgp-catalogue{grid-template-columns:264px minmax(0,1fr)!important;gap:36px!important}
  .sq-browse .sgp-catalogue__filters{padding-inline-end:6px}
  /* The count belongs to the mobile trigger. On desktop the rail is on screen with
     its own header and badge, and a second copy in the toolbar reads as a second
     number rather than the same one. */
  .sgp-toolbar__filter-toggle .sgp-filters-panel__badge{display:none}
}
@media (min-width:1280px){
  .sq-browse > .sgp-catalogue{grid-template-columns:280px minmax(0,1fr)!important;gap:44px!important}
}

/* Platform brand marks are flat black SVGs with no fill attribute, so in dark mode they
   are black on near-black. Inverted to white rather than plated, which is the treatment
   this sheet already gives the same files on the platform grid (`.sqb-platforms img`) —
   one decision about brand marks in the dark, not two. */
html[data-sq-theme="dark"] .sgp-filters__mark{filter:grayscale(1) invert(1);opacity:.85}

/* The standard card's meta line is inline text; the mark has to sit on the baseline of that
   line rather than stretch it, and the name must stay vertically centred beside it. */
.sq-pc__creator{display:inline-flex;align-items:center;gap:7px;min-inline-size:0}
.sq-pc__creator .sq-cmark{--sq-cmark-size:22px;flex:0 0 22px}

/* ═══ EXPERTS PILOT ════════════════════════════════════════════════════════════

   A curated directory of people a visitor can hire, sharing the marketplace's
   components rather than introducing a second design: `--wp--preset--color--*` for
   colour so light and dark follow the rest of the site, `--sq-t-*` for type,
   `--wp--custom--radius--*` for corners, and the shared Lucide sprite for glyphs.

   Two things this sheet is built around. Cards must line up — every one is the same
   grid with the same rows, so a freelancer offering one service and an agency
   offering four still put their buttons on the same line. And an avatar must never
   be cropped off-centre or squashed: one square box, `object-fit: cover`, one size
   for everybody.                                                                   */

.ssx{--ssx-gap:clamp(20px,2.4vw,32px)}

/* ─── Hero ─────────────────────────────────────────────────────────────────── */

.ssx-hero{
  max-inline-size:52rem;
  padding-block:clamp(36px,5vw,64px) clamp(24px,3vw,36px);
}
.ssx-hero--narrow{max-inline-size:44rem}
.ssx-hero__eyebrow{
  margin:0 0 12px;font-family:var(--sq-font-mono);
  font-size:var(--sq-t-eyebrow);letter-spacing:var(--sq-ls-eyebrow);
  text-transform:uppercase;color:var(--wp--preset--color--brand);
}
.ssx-hero__title{
  margin:0 0 16px;font-family:var(--sq-font-sans);
  font-size:var(--sq-t-h1);line-height:var(--sq-lh-h1);
  letter-spacing:var(--sq-ls-h1);font-weight:var(--sq-w-semibold);
}
.ssx-hero__lead{
  margin:0;max-inline-size:var(--sq-measure);
  font-size:var(--sq-t-p1);line-height:var(--sq-lh-body);
  color:var(--wp--preset--color--text-muted);
}
.ssx-hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-block-start:26px}

/* ─── Pre-launch: the honest empty state ───────────────────────────────────── */

.ssx-prelaunch{
  max-inline-size:44rem;margin-block:8px clamp(40px,5vw,64px);
  padding:clamp(28px,4vw,44px);
  border:1px solid var(--wp--preset--color--border);
  border-radius:var(--wp--custom--radius--lg);
  background:var(--wp--preset--color--surface-raised);
}
.ssx-prelaunch__mark{
  inline-size:44px;block-size:44px;margin-block-end:18px;
  display:grid;place-items:center;border-radius:var(--wp--custom--radius--pill);
  background:var(--wp--preset--color--surface);color:var(--wp--preset--color--brand);
}
.ssx-prelaunch__mark svg{inline-size:21px;block-size:21px}
.ssx-prelaunch h2{
  margin:0 0 12px;font-size:var(--sq-t-h3);line-height:var(--sq-lh-h3);
  letter-spacing:var(--sq-ls-h3);font-weight:var(--sq-w-semibold);
}
.ssx-prelaunch p{margin:0 0 12px;color:var(--wp--preset--color--text-muted);line-height:var(--sq-lh-body)}
.ssx-prelaunch__what{font-size:var(--sq-t-p3)}
.ssx-prelaunch__actions{display:flex;flex-wrap:wrap;gap:12px;margin-block-start:22px;margin-block-end:0}

/* ─── The trust band ───────────────────────────────────────────────────────── */

.ssx-promise{
  margin-block:clamp(40px,5vw,72px);padding-block-start:clamp(28px,3vw,40px);
  border-block-start:1px solid var(--wp--preset--color--border);
}
.ssx-promise h2{
  margin:0 0 24px;font-size:var(--sq-t-h4);letter-spacing:var(--sq-ls-h4);
  font-weight:var(--sq-w-semibold);
}
.ssx-promise__list{
  list-style:none;margin:0;padding:0;display:grid;gap:var(--ssx-gap);
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.ssx-promise__icon{inline-size:19px;block-size:19px;color:var(--wp--preset--color--brand)}
.ssx-promise__list h3{
  margin:10px 0 6px;font-size:var(--sq-t-p2);font-weight:var(--sq-w-semibold);
  letter-spacing:var(--sq-ls-h4);
}
.ssx-promise__list p{
  margin:0;font-size:var(--sq-t-p3);line-height:var(--sq-lh-supporting);
  color:var(--wp--preset--color--text-muted);
}
.ssx-promise__links{display:flex;flex-wrap:wrap;gap:18px;margin-block-start:26px;font-size:var(--sq-t-p3)}
.ssx-promise__links a{color:var(--wp--preset--color--text-muted);text-underline-offset:3px}
.ssx-promise__links a:hover{color:var(--wp--preset--color--brand)}

/* ─── Directory layout ─────────────────────────────────────────────────────── */

.ssx-layout{display:grid;gap:var(--ssx-gap);align-items:start}
@media (min-width:900px){
  .ssx-layout{grid-template-columns:250px minmax(0,1fr);gap:40px}
  .ssx-layout__filters{position:sticky;top:88px}
}
.ssx-count{
  margin:0 0 18px;font-size:var(--sq-t-p3);color:var(--wp--preset--color--text-muted);
}
.ssx-count strong{
  font-family:var(--sq-font-sans);font-size:var(--sq-t-h4);
  color:var(--wp--preset--color--text);margin-inline-end:4px;
}

/* ─── Filters ──────────────────────────────────────────────────────────────── */

.ssx-filters__head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-block-end:14px;margin-block-end:6px;
  border-block-end:1px solid var(--wp--preset--color--border);
}
.ssx-filters__head h3{
  display:flex;align-items:center;gap:9px;margin:0;
  font-size:var(--sq-t-p3);font-weight:var(--sq-w-semibold);letter-spacing:var(--sq-ls-h4);
}
.ssx-filters__icon{inline-size:17px;block-size:17px;color:var(--wp--preset--color--text-subtle)}
.ssx-filters__clear{
  font-size:var(--sq-t-eyebrow);color:var(--wp--preset--color--text-muted);
  text-decoration:none;border-block-end:1px solid transparent;
  transition:color var(--wp--custom--transition--base),border-color var(--wp--custom--transition--base);
}
.ssx-filters__clear:hover{
  color:var(--wp--preset--color--brand);
  border-block-end-color:color-mix(in srgb,var(--wp--preset--color--brand) 45%,transparent);
}
.ssx-facet{border-block-end:1px solid var(--wp--preset--color--border)}
.ssx-facet:last-of-type{border-block-end:0}
.ssx-facet > summary{
  display:flex;align-items:center;gap:9px;
  min-block-size:46px;padding-block:11px;cursor:pointer;list-style:none;
  font-size:var(--sq-t-p3);font-weight:var(--sq-w-semibold);letter-spacing:var(--sq-ls-h4);
}
.ssx-facet > summary::-webkit-details-marker{display:none}
.ssx-facet > summary:focus-visible{outline:2px solid var(--wp--preset--color--brand);outline-offset:2px;border-radius:var(--wp--custom--radius--sm)}
.ssx-facet__icon{inline-size:16px;block-size:16px;color:var(--wp--preset--color--text-subtle)}
.ssx-facet__label{flex:1}
.ssx-facet__chevron{
  inline-size:15px;block-size:15px;color:var(--wp--preset--color--text-subtle);
  transition:transform var(--wp--custom--transition--base);
}
.ssx-facet[open] > summary .ssx-facet__chevron{transform:rotate(180deg)}
.ssx-facet fieldset{border:0;margin:0;padding:0 0 14px;min-inline-size:0}
.ssx-facet ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}

.ssx-option{
  position:relative;display:grid;grid-template-columns:18px minmax(0,1fr);
  align-items:center;gap:10px;min-block-size:34px;
  padding:2px 8px 2px 2px;border-radius:var(--wp--custom--radius--sm);cursor:pointer;
  font-size:var(--sq-t-p3);color:var(--wp--preset--color--text-muted);
  transition:background var(--wp--custom--transition--base),color var(--wp--custom--transition--base);
}
.ssx-option:hover{background:var(--wp--preset--color--surface);color:var(--wp--preset--color--text)}
.ssx-option__input{position:absolute;inline-size:1px;block-size:1px;opacity:0;margin:0;pointer-events:none}
.ssx-option__mark{
  inline-size:17px;block-size:17px;position:relative;
  border:1.5px solid var(--wp--preset--color--border-strong);
  border-radius:5px;background:var(--wp--preset--color--surface-raised);
  transition:background var(--wp--custom--transition--base),border-color var(--wp--custom--transition--base);
}
.ssx-option__input[type="radio"] ~ .ssx-option__mark{border-radius:var(--wp--custom--radius--pill)}
.ssx-option__mark::after{
  content:"";position:absolute;inset-block-start:1px;inset-inline-start:5px;
  inline-size:5px;block-size:9px;opacity:0;
  border:solid var(--wp--preset--color--accent-contrast);
  border-width:0 2px 2px 0;transform:rotate(45deg);
}
.ssx-option:has(.ssx-option__input:checked){color:var(--wp--preset--color--text);font-weight:var(--sq-w-semibold)}
.ssx-option:has(.ssx-option__input:checked) .ssx-option__mark{
  border-color:var(--wp--preset--color--brand);background:var(--wp--preset--color--brand);
}
.ssx-option:has(.ssx-option__input:checked) .ssx-option__mark::after{opacity:1}
.ssx-option:has(.ssx-option__input:focus-visible) .ssx-option__mark{
  outline:2px solid var(--wp--preset--color--brand);outline-offset:2px;
}
.ssx-filters__apply{inline-size:100%;margin-block-start:18px;justify-content:center}

/* ─── Cards ────────────────────────────────────────────────────────────────── */

.ssx-grid{
  list-style:none;margin:0;padding:0;display:grid;gap:var(--ssx-gap);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));
}
.ssx-card{
  /* A column with the actions pushed to the bottom, rather than a fixed grid of rows.
     Not every card has every row — a badge is absent until a review is current, a
     disclosure only where there is something to disclose — so a fixed row list put the
     buttons on a different line depending on which optional parts existed. `margin-block
     -start:auto` on the actions pins them to the bottom whatever is above. */
  display:flex;flex-direction:column;gap:14px;
  block-size:100%;padding:22px;
  border:1px solid var(--wp--preset--color--border);
  border-radius:var(--wp--custom--radius--lg);
  background:var(--wp--preset--color--surface-raised);
  transition:border-color var(--wp--custom--transition--base),box-shadow var(--wp--custom--transition--base);
}
.ssx-card:hover{border-color:var(--wp--preset--color--border-strong);box-shadow:var(--wp--custom--shadow--sm)}
.ssx-card:focus-within{border-color:var(--wp--preset--color--brand)}
.ssx-card__head{display:flex;align-items:center;gap:14px}
.ssx-card__name{margin:0;font-size:var(--sq-t-p1);line-height:var(--sq-lh-h4);letter-spacing:var(--sq-ls-h4);font-weight:var(--sq-w-semibold)}
.ssx-card__name a{color:inherit;text-decoration:none}
.ssx-card__name a:hover{color:var(--wp--preset--color--brand)}
.ssx-card__name a:focus-visible{outline:2px solid var(--wp--preset--color--brand);outline-offset:3px;border-radius:var(--wp--custom--radius--sm)}
.ssx-card__kind{margin:4px 0 0;font-size:var(--sq-t-eyebrow);color:var(--wp--preset--color--text-muted)}
.ssx-card__dot{margin-inline:5px}
.ssx-card__services{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;
}
.ssx-card__services li{
  padding:4px 9px;border-radius:var(--wp--custom--radius--pill);
  background:var(--wp--preset--color--surface);
  font-size:var(--sq-t-eyebrow);color:var(--wp--preset--color--text-muted);
}
.ssx-card__facts{margin:0;display:grid;gap:7px}
.ssx-card__facts > div{display:flex;justify-content:space-between;gap:12px;font-size:var(--sq-t-eyebrow)}
.ssx-card__facts dt{color:var(--wp--preset--color--text-subtle)}
.ssx-card__facts dd{margin:0;text-align:end;color:var(--wp--preset--color--text)}
.ssx-card__actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:auto 0 0}
.ssx-card__actions .sgp-btn{justify-content:center;min-block-size:42px;font-size:var(--sq-t-eyebrow)}

/* ─── Avatars: two kinds of image, two treatments ──────────────────────────────
   A headshot and an agency logo are opposite problems. A photograph should fill the
   disc and be cropped to it — the subject is in the middle and the corners are
   background. A logo must never be cropped: a wide wordmark cover-fitted into a
   circle loses both ends of the name, which is the one thing a brand mark cannot
   survive. Which treatment applies is stored on the profile, never guessed from the
   filename or the aspect ratio. */

.ssx-avatar{
  inline-size:var(--ssx-avatar,64px);block-size:var(--ssx-avatar,64px);
  flex:0 0 var(--ssx-avatar,64px);
  display:grid;place-items:center;overflow:hidden;
  border-radius:var(--wp--custom--radius--pill);
  background:var(--wp--preset--color--surface);
  border:1px solid var(--wp--preset--color--border);
}
.ssx-avatar__img{inline-size:100%;block-size:100%;display:block}

/* A person. Fills the disc; `center` keeps a head-and-shoulders crop on the face
   rather than the chin, which is where a top-anchored crop puts it. */
.ssx-avatar--photo .ssx-avatar__img{object-fit:cover;object-position:center}

/* An agency mark. Fitted whole, centred on both axes, with breathing room inside the
   circle so a square logo does not touch the curve. `media-plate` is the one surface
   token deliberately excluded from the dark remap — it exists precisely for somebody
   else's artwork, most of which is a transparent PNG with dark type or a baked-in
   white ground. Either would disappear on the dark surface; on the plate both read in
   both themes. */
.ssx-avatar--logo{
  background:var(--wp--preset--color--media-plate);
  border-color:color-mix(in srgb,var(--wp--preset--color--text) 12%,transparent);
}
.ssx-avatar--logo .ssx-avatar__img{
  object-fit:contain;object-position:center;
  inline-size:calc(100% - 18%);block-size:calc(100% - 18%);
}
html[data-sq-theme="dark"] .ssx-avatar--logo{background:var(--wp--preset--color--media-plate)}
.ssx-avatar--initial{
  font-family:var(--sq-font-sans);font-weight:var(--sq-w-semibold);
  font-size:calc(var(--ssx-avatar,64px) * 0.38);
  color:var(--wp--preset--color--text-muted);
}

/* ─── Badge and disclosure ─────────────────────────────────────────────────── */

.ssx-badge{
  display:inline-flex;align-items:center;gap:7px;margin:0;
  padding:5px 11px;border-radius:var(--wp--custom--radius--pill);
  font-size:var(--sq-t-eyebrow);font-weight:var(--sq-w-semibold);
  border:1px solid transparent;inline-size:fit-content;
}
.ssx-badge__icon{inline-size:14px;block-size:14px;flex:none}
.ssx-badge--vetted{
  color:var(--wp--preset--color--verified);
  background:var(--wp--preset--color--verified-bg);
  border-color:color-mix(in srgb,var(--wp--preset--color--verified) 22%,transparent);
}
.ssx-badge--lapsed{
  color:var(--wp--preset--color--stale);
  background:var(--wp--preset--color--stale-bg);
  border-color:color-mix(in srgb,var(--wp--preset--color--stale) 22%,transparent);
}
.ssx-badge__date{font-weight:var(--sq-w-regular);opacity:.8}
.ssx-disclosure{
  display:flex;align-items:flex-start;gap:7px;margin:0;
  font-size:var(--sq-t-eyebrow);color:var(--wp--preset--color--text-muted);
}
.ssx-disclosure__icon{inline-size:14px;block-size:14px;flex:none;margin-block-start:2px}

/* ─── Profile ──────────────────────────────────────────────────────────────── */

.ssx-profile{max-inline-size:62rem;padding-block:clamp(24px,3vw,40px) clamp(40px,5vw,72px)}
.ssx-profile__back{margin-block-end:24px;font-size:var(--sq-t-p3)}
.ssx-profile__back a{
  display:inline-flex;align-items:center;gap:6px;min-block-size:32px;
  color:var(--wp--preset--color--text-muted);text-decoration:none;
}
.ssx-profile__back a:hover{color:var(--wp--preset--color--brand)}
.ssx-profile__back svg{inline-size:15px;block-size:15px}
.ssx-preview-note{
  display:flex;align-items:center;gap:9px;margin-block-end:22px;padding:12px 16px;
  border-radius:var(--wp--custom--radius--md);
  background:var(--wp--preset--color--caution-bg);color:var(--wp--preset--color--caution);
  font-size:var(--sq-t-p3);
}
.ssx-preview-note svg{inline-size:17px;block-size:17px;flex:none}
.ssx-profile__head{display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,32px);align-items:flex-start}
.ssx-profile__id{flex:1;min-inline-size:min(100%,260px);display:grid;gap:12px;justify-items:start}
.ssx-profile__id h1{
  margin:0;font-size:var(--sq-t-h2);line-height:var(--sq-lh-h2);
  letter-spacing:var(--sq-ls-h2);font-weight:var(--sq-w-semibold);
}
.ssx-profile__kind{margin:0;font-size:var(--sq-t-p3);color:var(--wp--preset--color--text-muted)}
.ssx-profile__intro{margin:0;font-size:var(--sq-t-p1);line-height:var(--sq-lh-body);max-inline-size:var(--sq-measure)}
.ssx-profile__actions{display:flex;flex-wrap:wrap;gap:12px;margin:6px 0 0}
.ssx-profile__actions svg{inline-size:14px;block-size:14px}
.ssx-profile__facts{
  margin-block:clamp(28px,4vw,44px);padding-block:24px;
  border-block:1px solid var(--wp--preset--color--border);
  display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
.ssx-profile__facts dt{
  font-family:var(--sq-font-mono);font-size:var(--sq-t-eyebrow);
  letter-spacing:var(--sq-ls-eyebrow);text-transform:uppercase;
  color:var(--wp--preset--color--text-subtle);margin-block-end:5px;
}
.ssx-profile__facts dd{margin:0;font-size:var(--sq-t-p3)}
.ssx-profile__section{margin-block-end:clamp(32px,4vw,52px)}
.ssx-profile__section h2{
  margin:0 0 16px;font-size:var(--sq-t-h4);letter-spacing:var(--sq-ls-h4);
  font-weight:var(--sq-w-semibold);
}
.ssx-taglist{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ssx-taglist li{
  padding:6px 12px;border-radius:var(--wp--custom--radius--pill);
  background:var(--wp--preset--color--surface);font-size:var(--sq-t-p3);
}
.ssx-prose{max-inline-size:var(--sq-measure);line-height:var(--sq-lh-body);color:var(--wp--preset--color--text-muted)}
.ssx-prose p{margin:0 0 1em}
.ssx-related{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ssx-related a{font-size:var(--sq-t-p3)}
.ssx-limits p{max-inline-size:var(--sq-measure);color:var(--wp--preset--color--text-muted);line-height:var(--sq-lh-body)}
.ssx-limits__links{display:flex;flex-wrap:wrap;gap:18px;margin-block-start:16px;font-size:var(--sq-t-p3)}

.ssx-portfolio{
  list-style:none;margin:0;padding:0;display:grid;gap:var(--ssx-gap);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));
}
.ssx-work{
  overflow:hidden;border:1px solid var(--wp--preset--color--border);
  border-radius:var(--wp--custom--radius--md);background:var(--wp--preset--color--surface-raised);
}
.ssx-work__img{
  inline-size:100%;block-size:auto;aspect-ratio:16/10;object-fit:cover;display:block;
  background:var(--wp--preset--color--surface);
}
.ssx-work__body{padding:16px}
.ssx-work__body h3{margin:0 0 6px;font-size:var(--sq-t-p2);font-weight:var(--sq-w-semibold)}
.ssx-work__meta{margin:0 0 8px;font-size:var(--sq-t-eyebrow);color:var(--wp--preset--color--text-subtle)}
.ssx-work__body p{margin:0;font-size:var(--sq-t-p3);color:var(--wp--preset--color--text-muted);line-height:var(--sq-lh-supporting)}

/* ─── Product / solution call to action ────────────────────────────────────── */

.ssx-cta{
  display:flex;flex-wrap:wrap;align-items:center;gap:18px;
  margin-block:clamp(28px,3vw,40px);padding:22px 24px;
  border:1px solid var(--wp--preset--color--border);
  border-radius:var(--wp--custom--radius--lg);
  background:var(--wp--preset--color--surface);
}
.ssx-cta__mark{
  inline-size:40px;block-size:40px;flex:none;display:grid;place-items:center;
  border-radius:var(--wp--custom--radius--pill);
  background:var(--wp--preset--color--surface-raised);color:var(--wp--preset--color--brand);
}
.ssx-cta__mark svg{inline-size:19px;block-size:19px}
.ssx-cta__body{flex:1;min-inline-size:min(100%,220px)}
.ssx-cta__body h2{margin:0 0 4px;font-size:var(--sq-t-p2);font-weight:var(--sq-w-semibold);letter-spacing:var(--sq-ls-h4)}
.ssx-cta__body p{margin:0;font-size:var(--sq-t-p3);color:var(--wp--preset--color--text-muted)}
.ssx-cta__action svg{inline-size:14px;block-size:14px}

/* ─── Forms ────────────────────────────────────────────────────────────────── */

.ssx-form-page{max-inline-size:46rem;padding-block-end:clamp(40px,5vw,72px)}
.ssx-form__group{
  border:0;padding:0;margin:0 0 clamp(28px,3vw,40px);min-inline-size:0;
}
.ssx-form__group legend{
  padding:0;margin-block-end:6px;font-size:var(--sq-t-h4);
  letter-spacing:var(--sq-ls-h4);font-weight:var(--sq-w-semibold);
}
.ssx-form__note{margin:0 0 20px;font-size:var(--sq-t-p3);color:var(--wp--preset--color--text-muted)}
.ssx-field{margin:0 0 20px}
.ssx-field label{
  display:block;margin-block-end:6px;font-size:var(--sq-t-p3);
  font-weight:var(--sq-w-semibold);
}
.ssx-field input,.ssx-field textarea,.ssx-field select{
  /* border-box explicitly: the theme leaves form controls at the user-agent's content-box,
     so `inline-size:100%` plus padding and a border overflowed the field by 28px and pushed
     the whole document 4px wider than the viewport at 768. */
  box-sizing:border-box;
  inline-size:100%;min-block-size:46px;padding:11px 13px;
  border:1px solid var(--wp--preset--color--border-strong);
  border-radius:var(--wp--custom--radius--md);
  background:var(--wp--preset--color--surface-raised);
  color:var(--wp--preset--color--text);
  font-family:var(--sq-font-sans);font-size:var(--sq-t-p3);
  transition:border-color var(--wp--custom--transition--base);
}
.ssx-field textarea{min-block-size:auto;line-height:var(--sq-lh-body);resize:vertical}
.ssx-field input:focus,.ssx-field textarea:focus,.ssx-field select:focus{
  outline:2px solid var(--wp--preset--color--brand);outline-offset:1px;
  border-color:var(--wp--preset--color--brand);
}
.ssx-field--check label{display:flex;align-items:flex-start;gap:10px;font-weight:var(--sq-w-regular)}
.ssx-field--check input{inline-size:20px;block-size:20px;min-block-size:20px;flex:none;margin-block-start:2px;padding:0}
.ssx-req{color:var(--wp--preset--color--brand);margin-inline-start:2px}
.ssx-field__help{display:block;margin-block-start:6px;font-size:var(--sq-t-eyebrow);color:var(--wp--preset--color--text-subtle)}
.ssx-field__error{
  display:block;margin-block-start:6px;font-size:var(--sq-t-eyebrow);
  font-weight:var(--sq-w-semibold);color:var(--wp--preset--color--critical);
}
.ssx-field.is-invalid input,.ssx-field.is-invalid textarea,.ssx-field.is-invalid select{
  border-color:var(--wp--preset--color--critical);
}
.ssx-form__legal{
  display:flex;flex-wrap:wrap;gap:16px;margin-block-start:8px;
  font-size:var(--sq-t-eyebrow);color:var(--wp--preset--color--text-muted);
}
.ssx-form__submit{min-block-size:50px;padding-inline:28px}
.ssx-result{
  display:flex;gap:14px;margin-block:24px;padding:20px 22px;
  border-radius:var(--wp--custom--radius--lg);
}
.ssx-result svg{inline-size:22px;block-size:22px;flex:none}
.ssx-result h2{margin:0 0 6px;font-size:var(--sq-t-p1);font-weight:var(--sq-w-semibold)}
.ssx-result p{margin:0 0 8px;line-height:var(--sq-lh-body)}
.ssx-result p:last-child{margin-block-end:0}
.ssx-result--ok{background:var(--wp--preset--color--verified-bg);color:var(--wp--preset--color--verified)}
.ssx-result--error{background:var(--wp--preset--color--critical-bg);color:var(--wp--preset--color--critical);align-items:center}

/* The honeypot. Off-screen rather than display:none, which some bots skip. */
.ssx-trap{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ─── Mobile ───────────────────────────────────────────────────────────────── */

@media (max-width:899px){
  .ssx-card__actions .sgp-btn,.ssx-option{min-block-size:44px}
  .ssx-facet > summary{min-block-size:50px;font-size:var(--sq-t-p2)}
  .ssx-option{grid-template-columns:22px minmax(0,1fr);font-size:var(--sq-t-p2)}
  .ssx-option__mark{inline-size:20px;block-size:20px}
  .ssx-profile__head{gap:18px}
  .ssx-card__actions{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  .ssx-facet__chevron,.ssx-card,.ssx-option,.ssx-option__mark,
  .ssx-filters__clear,.ssx-field input,.ssx-field textarea,.ssx-field select{transition:none!important}
}

/* The Experts badges need no dark-mode override of their own: they are built from the same
   `--verified-bg` / `--stale-bg` / `--caution-bg` / `--critical-bg` tokens the rest of the
   theme uses, and those are remapped for dark alongside their foregrounds above. One
   mechanism for every badge on the site rather than a per-component patch. */

/*
 * The Experts side door on the product-submission page. Separated by a rule rather than a
 * card so it reads as a footnote to the page, not a competing offer within it.
 */
.sqi-note--footnote {
	margin-block-start: clamp(28px, 4vw, 44px);
	padding-block-start: 20px;
	border-block-start: 1px solid var(--wp--preset--color--border);
}

/* ══════════════════════════════════════════════════════════════════════════
   CREATOR PROFILE — the approved storefront layout
   ──────────────────────────────────────────────────────────────────────────
   A light premium page: breadcrumbs, an asymmetric hero with the creator's
   identity left and their own product artwork right, a facts strip, their own
   tab rail, featured work, what they specialise in, the full catalogue with
   working filters, then trust, support and other creators.

   Every figure on it is arithmetic over this creator's catalogue. Where the
   approved concept shows a value this database cannot evidence — "first seen",
   the ribbon labels on the featured cards — the composition is kept and the
   claim is dropped, because a number invented to fill a space is the one thing
   a marketplace cannot recover from.
   ══════════════════════════════════════════════════════════════════════════ */
.sgc{--sgc-gap:clamp(32px,4.4vw,58px);display:block}

/* ── Breadcrumbs ─────────────────────────────────────────────────────────── */
.sgc-crumbs{padding-block:14px 4px}
.sgc-crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:0;list-style:none}
.sgc-crumbs li{display:flex;align-items:center;gap:8px;color:var(--sq-muted);font-size:var(--sq-t-p3)}
.sgc-crumbs li+li::before{content:"/";color:var(--sq-line)}
.sgc-crumbs a{color:var(--sq-muted);text-decoration:none}
.sgc-crumbs a:hover{color:var(--sq-ink);text-decoration:underline;text-underline-offset:3px}
.sgc-crumbs [aria-current]{color:var(--sq-ink);font-weight:var(--sq-w-semibold)}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.sgc-hero{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  align-items:center;gap:clamp(24px,4vw,56px);
  padding:clamp(24px,3vw,40px) 0 clamp(28px,3.4vw,44px);
}
.sgc-hero--nomedia{grid-template-columns:minmax(0,1fr)}
.sgc-hero__identity{display:flex;align-items:flex-start;gap:clamp(16px,1.8vw,24px);min-inline-size:0}
.sgc-hero__copy{min-inline-size:0}

.sgc-hero__verified{
  display:inline-flex;align-items:center;gap:6px;margin:0 0 10px;
  color:var(--wp--preset--color--verified);font-size:var(--sq-t-p3);font-weight:var(--sq-w-semibold);
}
.sgc-hero__verified-icon{inline-size:15px;block-size:15px}

.sgc-hero__name{
  margin:0;font-size:var(--sq-t-h1);font-weight:var(--sq-w-bold);
  line-height:var(--sq-lh-h1);letter-spacing:var(--sq-ls-h1);
}
.sgc-hero__intro{
  margin:10px 0 0;max-inline-size:46ch;color:var(--sq-muted);
  font-size:var(--sq-t-p2);line-height:var(--sq-lh-body);
}
.sgc-hero__platforms{
  display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0;padding:0;list-style:none;
}
.sgc-hero__platforms li{
  padding:5px 10px;border:1px solid var(--sq-line);border-radius:999px;
  background:var(--sq-sheet);color:var(--sq-ink);font-size:var(--sq-t-p3);font-weight:var(--sq-w-semibold);
}
.sgc-hero__actions{display:flex;flex-wrap:wrap;gap:10px;margin-block-start:22px}

.sgc-btn{
  display:inline-flex;align-items:center;gap:8px;min-block-size:44px;padding-inline:18px;
  border-radius:10px;font-size:var(--sq-t-p3);font-weight:var(--sq-w-semibold);
  text-decoration:none;cursor:pointer;
  transition:background var(--wp--custom--transition--base),border-color var(--wp--custom--transition--base);
}
.sgc-btn--primary{background:var(--sq-signal);color:var(--wp--preset--color--on-signal);border:1px solid transparent}
.sgc-btn--primary:hover{background:var(--sq-signal-ink)}
.sgc-btn--ghost{background:var(--sq-sheet);color:var(--sq-ink);border:1px solid var(--sq-line)}
.sgc-btn--ghost:hover{border-color:color-mix(in srgb,var(--sq-ink) 30%,var(--sq-line))}
.sgc-btn:focus-visible{outline:2px solid var(--sq-signal);outline-offset:2px}

/* The showcase: the creator's own covers, fanned. Decorative, so it is hidden
   from assistive tech and never carries a caption or a statistic. */
.sgc-hero__showcase{
  position:relative;min-block-size:clamp(240px,26vw,340px);
}
.sgc-hero__shot{
  position:absolute;margin:0;overflow:hidden;border-radius:14px;
  background:var(--sq-sheet);border:1px solid var(--sq-line);
  box-shadow:0 18px 44px rgba(0,0,0,.13);
}
.sgc-hero__shot img{display:block;inline-size:100%;block-size:100%;object-fit:contain}
.sgc-hero__shot--1{inset-block-start:6%;inset-inline-start:2%;inline-size:46%;aspect-ratio:4/3;z-index:3}
.sgc-hero__shot--2{inset-block-start:0;inset-inline-end:6%;inline-size:38%;aspect-ratio:3/4;z-index:2}
.sgc-hero__shot--3{inset-block-end:2%;inset-inline-start:24%;inline-size:42%;aspect-ratio:4/3;z-index:4}
.sgc-hero__shot--4{inset-block-end:10%;inset-inline-end:0;inline-size:32%;aspect-ratio:1;z-index:1}
.sgc-hero__shot--5{display:none}

/* ── Facts strip ─────────────────────────────────────────────────────────── */
.sgc-stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;
  margin:0;padding:0;border:1px solid var(--sq-line);border-radius:14px;background:var(--sq-sheet);
  overflow:hidden;
}
.sgc-stats__cell{padding:16px 18px;border-inline-start:1px solid var(--sq-line);min-inline-size:0}
.sgc-stats__cell:first-child{border-inline-start:0}
.sgc-stats dt{display:flex;align-items:center;gap:7px;color:var(--sq-muted);font-size:var(--sq-t-p3)}
.sgc-stats__icon{inline-size:15px;block-size:15px;flex:0 0 auto}
.sgc-stats dd{
  margin:6px 0 0;color:var(--sq-ink);font-size:var(--sq-t-p2);font-weight:var(--sq-w-semibold);
  overflow:hidden;text-overflow:ellipsis;
}

/* ── The creator's own tabs ──────────────────────────────────────────────── */
.sgc-tabs{margin-block-start:26px;border-block-end:1px solid var(--sq-line)}
.sgc-tabs ul{display:flex;gap:4px;margin:0;padding:0;list-style:none;overflow-x:auto;scrollbar-width:none}
.sgc-tabs ul::-webkit-scrollbar{display:none}
.sgc-tabs a{
  display:inline-flex;align-items:center;gap:7px;padding:12px 14px;
  color:var(--sq-muted);font-size:var(--sq-t-p3);font-weight:var(--sq-w-semibold);
  text-decoration:none;white-space:nowrap;border-block-end:2px solid transparent;
}
.sgc-tabs a:hover{color:var(--sq-ink)}
.sgc-tabs a.is-current{color:var(--sq-signal);border-block-end-color:var(--sq-signal)}
.sgc-tabs a:focus-visible{outline:2px solid var(--sq-signal);outline-offset:-2px;border-radius:4px}
.sgc-tabs__icon{inline-size:15px;block-size:15px}
.sgc-tabs b{color:var(--sq-muted);font-weight:var(--sq-w-semibold)}

/* ── Section furniture, shared ───────────────────────────────────────────── */
.sgc-section{margin-block-start:var(--sgc-gap)}
.sgc-section__head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-block-end:16px;
}
/* The same rule the homepage already uses for an h2 in this exact role (.sq-section-head h2):
   h3's size, h2's leading, h1's tracking. Copied rather than reinvented, so "Featured by X"
   and the homepage's own section titles are the same size everywhere on the site. */
.sgc-section__title{margin:0;font-size:var(--sq-t-h3);font-weight:var(--sq-w-bold);line-height:var(--sq-lh-h2);letter-spacing:var(--sq-ls-h1)}
.sgc-section__sub{margin:5px 0 0;color:var(--sq-muted);font-size:var(--sq-t-p3)}
.sgc-section__more{
  display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;padding:9px 14px;
  border:1px solid var(--sq-line);border-radius:999px;background:var(--sq-sheet);
  color:var(--sq-ink);font-size:var(--sq-t-p3);font-weight:var(--sq-w-semibold);text-decoration:none;
}
.sgc-section__more:hover{border-color:color-mix(in srgb,var(--sq-ink) 30%,var(--sq-line))}
.sgc-section__more-icon{inline-size:14px;block-size:14px}

/* ── Expertise rail ──────────────────────────────────────────────────────── */
.sgc-expertise__rail{
  display:flex;gap:12px;margin:0;padding:2px;list-style:none;
  overflow-x:auto;scrollbar-width:none;
}
.sgc-expertise__rail::-webkit-scrollbar{display:none}
.sgc-expertise__rail li{flex:0 0 auto}
.sgc-expertise__rail a{
  display:flex;align-items:center;gap:11px;min-inline-size:190px;padding:14px 16px;
  border:1px solid var(--sq-line);border-radius:12px;background:var(--sq-sheet);
  color:var(--sq-ink);text-decoration:none;
}
.sgc-expertise__rail a:hover{border-color:color-mix(in srgb,var(--sq-ink) 26%,var(--sq-line))}
.sgc-expertise__rail a:focus-visible{outline:2px solid var(--sq-signal);outline-offset:2px}
.sgc-expertise__icon{inline-size:19px;block-size:19px;flex:0 0 auto;color:var(--sq-signal)}
.sgc-expertise__copy{min-inline-size:0}
.sgc-expertise__name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--sq-t-p3);font-weight:var(--sq-w-semibold)}
.sgc-expertise__count{display:block;margin-block-start:2px;color:var(--sq-muted);font-size:var(--sq-t-p3)}

/* ── Trust / reviews / about ─────────────────────────────────────────────── */
.sgc-trust{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0;
  margin-block-start:var(--sgc-gap);
  border:1px solid var(--sq-line);border-radius:14px;background:var(--sq-sheet);overflow:hidden;
}
.sgc-trust__col{padding:22px;border-inline-start:1px solid var(--sq-line)}
.sgc-trust__col:first-child{border-inline-start:0}
.sgc-trust h2{margin:0 0 14px;font-size:var(--sq-t-p2);font-weight:var(--sq-w-bold)}
.sgc-trust ul{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.sgc-trust li{display:flex;align-items:flex-start;gap:9px;color:var(--sq-ink);font-size:var(--sq-t-p3);line-height:var(--sq-lh-body)}
.sgc-trust__tick{inline-size:16px;block-size:16px;flex:0 0 auto;margin-block-start:1px;color:var(--wp--preset--color--verified)}
.sgc-trust p{margin:0;color:var(--sq-muted);font-size:var(--sq-t-p3);line-height:var(--sq-lh-body)}

/* ── Support ─────────────────────────────────────────────────────────────── */
.sgc-support__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;
  margin:0;padding:0;list-style:none;
}
.sgc-support__grid a{
  display:grid;gap:7px;block-size:100%;padding:20px;
  border:1px solid var(--sq-line);border-radius:12px;background:var(--sq-sheet);
  color:var(--sq-ink);text-decoration:none;
}
.sgc-support__grid a:hover{border-color:color-mix(in srgb,var(--sq-ink) 26%,var(--sq-line))}
.sgc-support__grid a:focus-visible{outline:2px solid var(--sq-signal);outline-offset:2px}
.sgc-support__icon{inline-size:22px;block-size:22px;color:var(--sq-ink)}
.sgc-support__grid strong{font-size:var(--sq-t-p3);font-weight:var(--sq-w-bold)}
.sgc-support__grid small{color:var(--sq-muted);font-size:var(--sq-t-p3);line-height:var(--sq-lh-body)}

/* ── Related creators ────────────────────────────────────────────────────── */
.sgc-related__rail{
  display:flex;gap:12px;margin:0;padding:2px;list-style:none;overflow-x:auto;scrollbar-width:none;
}
.sgc-related__rail::-webkit-scrollbar{display:none}
.sgc-related__rail li{flex:0 0 auto}
.sgc-related__rail a{
  display:flex;align-items:center;gap:12px;min-inline-size:230px;padding:15px 17px;
  border:1px solid var(--sq-line);border-radius:12px;background:var(--sq-sheet);
  color:var(--sq-ink);text-decoration:none;
}
.sgc-related__rail a:hover{border-color:color-mix(in srgb,var(--sq-ink) 26%,var(--sq-line))}
.sgc-related__rail a:focus-visible{outline:2px solid var(--sq-signal);outline-offset:2px}
.sgc-related__copy{min-inline-size:0}
.sgc-related__copy strong{display:block;font-size:var(--sq-t-p3);font-weight:var(--sq-w-bold)}
.sgc-related__copy small{display:block;margin-block-start:2px;color:var(--sq-muted);font-size:var(--sq-t-p3)}
.sgc-related__verified{
  display:inline-flex;align-items:center;gap:5px;margin-block-start:5px;
  color:var(--wp--preset--color--verified);font-size:var(--sq-t-p3);font-style:normal;font-weight:var(--sq-w-semibold);
}
.sgc-related__tick{inline-size:13px;block-size:13px}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media(max-width:1000px){
  .sgc-hero{grid-template-columns:minmax(0,1fr)}
  .sgc-hero__showcase{min-block-size:270px;order:2}
}
@media(max-width:700px){
  .sgc-hero__identity{flex-direction:column}
  .sgc-hero__showcase{min-block-size:210px}
  .sgc-hero__actions .sgc-btn{flex:1 1 auto;justify-content:center}
  .sgc-stats__cell{border-inline-start:0;border-block-start:1px solid var(--sq-line)}
  .sgc-stats__cell:first-child{border-block-start:0}
  .sgc-trust__col{border-inline-start:0;border-block-start:1px solid var(--sq-line)}
  .sgc-trust__col:first-child{border-block-start:0}
  .sgc-section__head{flex-direction:column;align-items:flex-start}
}

/* The reviews cell states the record and links to the panel; it does not contain it. */
.sgc-trust__empty{display:grid;justify-items:start;gap:6px}
.sgc-trust__star{inline-size:24px;block-size:24px;color:var(--sq-muted)}
.sgc-trust__empty strong{font-size:var(--sq-t-p3);font-weight:var(--sq-w-bold)}
.sgc-trust__score{display:flex;align-items:baseline;gap:8px;margin:0}
/* Matches .sgp-rv-reputation__score, the site's own rating-number size, rendered in the
   full panel directly below this cell — the same fact should not change size between them. */
.sgc-trust__score strong{font-size:var(--sq-t-h4);font-weight:var(--sq-w-bold);letter-spacing:var(--sq-ls-h1)}
.sgc-trust__score span{color:var(--sq-muted);font-size:var(--sq-t-p3)}
.sgc-trust__write{margin-block-start:14px}
/* The review-limit disclosure sits under the outbound action it qualifies. */
.sgc-hero__disclosure{margin-block-start:14px}

/* ── Creator page: spacing and equal boxes ────────────────────────────────
   Measured rather than eyeballed. The hero ran to 424px because the showcase
   asked for a 340px minimum and the identity centred against it, so the name
   sat halfway down a screen of air. The expertise rail sized each card to its
   own label, so "Content & Layout" was 263px beside a 224px neighbour. The
   related rail laid eight 266px cards in a 1376px row and cut the last one in
   half. All three are the same mistake: letting content decide a dimension the
   grid should own. */
.sgc-hero{padding-block:clamp(18px,2vw,26px) clamp(20px,2.2vw,30px);align-items:start}
.sgc-hero__showcase{min-block-size:clamp(240px,24vw,320px)}
.sgc-hero__identity{padding-block-start:6px}
.sgc-hero__intro{margin-block-start:8px}
.sgc-hero__platforms{margin-block-start:12px}
.sgc-hero__actions{margin-block-start:16px}

/* The mark top-aligns with the identity column (fixed 2026-09-03: it used to
   centre against the whole column, including the description and buttons,
   dragging it far below the name). But the "Verified Creator" line is only
   22px tall against a 64px mark, so on verified creators the mark still hangs
   13px below that line before the name even starts. Verified creators only:
   push the mark down by the verified line's own height + margin so it lands
   level with the name instead of the badge. Unverified creators have no line
   above the name, so the plain top-alignment already lands the mark on it. */
.sgc-hero__identity:has(.sgc-hero__verified) .sq-cmark--hero{margin-block-start:33px}

/* Every chip the same width, so the row reads as a set rather than a ransom note. */
.sgc-expertise__rail a{inline-size:224px;min-inline-size:224px}
.sgc-expertise__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* A wrapping grid, not a scroller: nothing is ever half-visible at the edge. */
.sgc-related__rail{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;overflow:visible;
}
.sgc-related__rail a{min-inline-size:0;block-size:100%}

/* The reputation panel is a section like any other; it had inherited a wider gap. */
.sgc + .sgp-rv-reputation,
.sgc-trust + .sgp-section{margin-block-start:var(--sgc-gap)}
.sgc .sgp-rv-reputation{margin-block-start:var(--sgc-gap)}

@media(max-width:700px){
  .sgc-expertise__rail a{inline-size:196px;min-inline-size:196px}
}

/* The fan is sized from the frame's HEIGHT, not its width.
   Sized by width, the portrait card resolved to 330px inside a 268px frame and hung 62px over
   the facts strip below it. Every shot now takes a share of the frame height and derives its
   width from its own aspect, so the composition scales with the hero instead of escaping it. */
.sgc-hero__shot--1{inset-block-start:8%;inset-inline-start:2%;inline-size:auto;block-size:66%;aspect-ratio:4/3}
.sgc-hero__shot--2{inset-block-start:2%;inset-inline-end:8%;inline-size:auto;block-size:88%;aspect-ratio:3/4}
.sgc-hero__shot--3{inset-block-end:4%;inset-inline-start:26%;inline-size:auto;block-size:60%;aspect-ratio:4/3}
.sgc-hero__shot--4{inset-block-end:12%;inset-inline-end:0;inline-size:auto;block-size:52%;aspect-ratio:1}

/* Landing-page intro (plugins, templates, extensions, courses) — the block itself was
   removed from the four templates 2026-09-05 in favour of .sqmh below, but the rule stays
   in case a future editor puts post-content back under the hero rather than deleting it. */
.sq-browse--landing .sq-browse__intro{width:min(760px,calc(100% - 56px));margin:0 auto;padding:48px 0 0}
.sq-browse--landing .sq-browse__intro h1{font-family:var(--sq-font-sans);font-size:var(--sq-t-h2);font-weight:var(--sq-w-bold);line-height:1.15;margin:0 0 16px}
.sq-browse--landing .sq-browse__intro p{font-size:var(--sq-t-p2);line-height:1.7;color:var(--wp--preset--color--text-secondary);margin:0 0 12px}

/* ── Marketplace landing hero (.sqmh) ───────────────────────────────────────
   /plugins/, /templates/, /extensions/, /courses/. Reuses the same animated mark
   composition as .sqbh (browse_hero, on the generic /browse/ page) via identical
   .sqbh__tile/.sqbh__stage markup and the shared data-sqbh-art rotation script, so
   this needed no new JS — only the extra copy (search, trust stats, pills) around it. */
.sqmh{padding:clamp(28px,3.4vw,44px) max(24px,calc((100vw - var(--sq-max))/2)) 0}
.sqmh__top{display:flex;align-items:center;gap:clamp(24px,4vw,56px)}
.sqmh__copy{flex:1 1 auto;min-inline-size:0}
.sqmh__eyebrow{margin:0 0 10px;font-size:var(--sq-t-eyebrow);font-weight:var(--sq-w-bold);letter-spacing:var(--sq-ls-eyebrow);text-transform:uppercase;color:var(--sq-signal)}
.sqmh__title{margin:0 0 12px;font-family:var(--sq-font-sans);font-size:var(--sq-t-h1);font-weight:var(--sq-w-bold);line-height:var(--sq-lh-h1);letter-spacing:var(--sq-ls-h1);color:var(--sq-ink)}
.sqmh__lede{margin:0 0 22px;max-width:46ch;font-size:var(--sq-t-p2);line-height:var(--sq-lh-body);color:var(--sq-muted)}
.sqmh__search{display:flex;align-items:center;gap:10px;max-width:520px;padding:6px 6px 6px 16px;border:1px solid var(--sq-line);border-radius:12px;background:var(--sq-sheet)}
.sqmh__search-icon{inline-size:18px;block-size:18px;flex:0 0 auto;color:var(--sq-muted)}
.sqmh__search input{flex:1 1 auto;min-inline-size:0;border:0;background:transparent;font-size:var(--sq-t-p3);color:var(--sq-ink)}
.sqmh__search input:focus{outline:0}
.sqmh__search input::placeholder{color:var(--sq-muted)}
.sqmh__search button{flex:0 0 auto;min-block-size:40px;padding-inline:20px;border:0;border-radius:8px;background:var(--sq-signal);color:var(--wp--preset--color--on-signal);font-size:var(--sq-t-p3);font-weight:var(--sq-w-semibold);cursor:pointer;transition:background var(--wp--custom--transition--base)}
.sqmh__search button:hover{background:var(--sq-signal-ink)}
.sqmh__search:focus-within{border-color:color-mix(in srgb,var(--sq-ink) 30%,var(--sq-line))}
.sqmh__trust{display:flex;flex-wrap:wrap;gap:10px 22px;margin:18px 0 0;padding:0;list-style:none}
.sqmh__trust li{display:inline-flex;align-items:center;gap:6px;font-size:var(--sq-t-p3);color:var(--sq-muted)}
.sqmh__trust svg{inline-size:15px;block-size:15px;flex:0 0 auto;color:var(--sq-signal)}
.sqmh__stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:28px 0 0;padding:0;list-style:none;border:1px solid var(--sq-line);border-radius:14px;background:var(--sq-sheet);overflow:hidden}
.sqmh__stats li{padding:16px 18px;border-inline-start:1px solid var(--sq-line);text-align:center}
.sqmh__stats li:first-child{border-inline-start:0}
.sqmh__stats strong{display:block;font-family:var(--sq-font-sans);font-size:var(--sq-t-h4);font-weight:var(--sq-w-bold);color:var(--sq-ink)}
.sqmh__stats span{display:block;margin-block-start:2px;font-size:var(--sq-t-p3);color:var(--sq-muted)}
.sqmh__pills{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 0;padding:0;list-style:none}
.sqmh__pill{display:flex;align-items:center;gap:10px;padding:12px 16px;min-inline-size:150px;border:1px solid var(--sq-line);border-radius:12px;background:var(--sq-sheet);color:var(--sq-ink);text-decoration:none;transition:border-color var(--wp--custom--transition--base)}
.sqmh__pill:hover{border-color:color-mix(in srgb,var(--sq-ink) 30%,var(--sq-line))}
.sqmh__pill-icon{inline-size:16px;block-size:16px;flex:0 0 auto;color:var(--sq-signal)}
.sqmh__pill-name{display:block;font-size:var(--sq-t-p3);font-weight:var(--sq-w-semibold)}
.sqmh__pill-count{display:block;margin-block-start:1px;font-size:var(--sq-t-eyebrow);color:var(--sq-muted)}
/* .sqbh__art (browse-hero.css) re-anchors its own tiles at 1100px and shrinks again
   at 740px; .sqmh__top only needs to match its stacking point, at the same 740px. */
@media(max-width:740px){
  .sqmh__top{flex-direction:column;align-items:flex-start}
}
@media(max-width:900px){
  .sqmh__stats{grid-template-columns:repeat(2,1fr)}
  .sqmh__stats li:nth-child(3){border-inline-start:0}
}
@media(max-width:560px){
  .sqmh__stats{grid-template-columns:1fr 1fr}
}

/* ── Featured carousel (.sqmf) ───────────────────────────────────────────── */
.sqmf{padding:clamp(32px,4vw,48px) max(24px,calc((100vw - var(--sq-max))/2)) 0}
.sqmf__head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:0 0 18px}
.sqmf__title{margin:0;font-family:var(--sq-font-sans);font-size:var(--sq-t-h3);font-weight:var(--sq-w-bold);color:var(--sq-ink)}
.sqmf__sub{margin:4px 0 0;font-size:var(--sq-t-p3);color:var(--sq-muted)}
.sqmf__all{flex:0 0 auto;font-size:var(--sq-t-p3);font-weight:var(--sq-w-semibold);color:var(--sq-ink);text-decoration:none}
.sqmf__all:hover{text-decoration:underline;text-underline-offset:3px}
.sqmf__rail{display:flex;gap:16px;overflow-x:auto;padding-block-end:4px;scroll-snap-type:x proximity;scrollbar-width:none}
.sqmf__rail::-webkit-scrollbar{display:none}
.sqmf__rail>.sq-tc{flex:0 0 auto;inline-size:min(240px,80vw);scroll-snap-align:start}

/* ── Sidebar "request a listing" card (.sqmc-cta) ───────────────────────── */
.sqmc-cta{margin-block-start:24px;padding:18px;border:1px solid var(--sq-line);border-radius:12px;background:var(--sq-sheet)}
.sqmc-cta__title{margin:0 0 4px;font-size:var(--sq-t-p3);font-weight:var(--sq-w-bold);color:var(--sq-ink)}
.sqmc-cta__sub{margin:0 0 14px;font-size:var(--sq-t-eyebrow);line-height:1.5;color:var(--sq-muted)}
.sqmc-cta .sgc-btn{inline-size:100%;box-sizing:border-box;justify-content:center}