/*
 * StoreLogic marketing-site component library.
 * Everything is scoped to slg-* classes; Twenty Twenty-Five internals are
 * never targeted directly. Tokens come from style.css :root (--slg-*).
 */

/* ---------------------------------------------------------------- sections */

.slg-section {
	padding-top: clamp(4rem, 9vw, 7rem);
	padding-bottom: clamp(4rem, 9vw, 7rem);
}

.slg-section--alt {
	background: var(--slg-slate-50);
}

.slg-hero {
	background:
		radial-gradient(1100px 520px at 50% -12%, rgb(219 234 254 / 0.55), transparent);
}

.slg-eyebrow {
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--slg-blue-700);
	margin-bottom: 0.5rem;
}

.slg-accent {
	color: var(--slg-blue-700);
}

.slg-lede {
	font-size: 1.2rem;
	color: var(--slg-slate-600);
	line-height: 1.6;
}

.slg-caption {
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--slg-slate-400);
}

/* ------------------------------------------------------------------- pill */

.slg-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	background: var(--slg-blue-50);
	border: 1px solid var(--slg-blue-100);
	color: var(--slg-blue-800);
	border-radius: 999px;
	padding: 0.35em 1em;
	font-size: 0.8125rem;
	font-weight: 500;
	text-decoration: none;
}

.slg-pill:hover {
	border-color: var(--slg-blue-800);
	color: var(--slg-blue-800);
}

/* ---------------------------------------------------------------- buttons */

/* Solid fill + dark border + a hard offset shadow that "presses" on hover. */
.slg-btn-primary a,
a.slg-btn-primary,
.slg-btn-secondary a,
a.slg-btn-secondary {
	display: inline-block;
	border-radius: var(--slg-radius-btn);
	font-weight: 700;
	padding: 0.72em 1.45em;
	text-decoration: none;
	border: 2px solid var(--slg-ink);
	box-shadow: 3px 3px 0 var(--slg-ink);
	transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
	will-change: transform;
}

.slg-btn-primary a,
a.slg-btn-primary {
	background: var(--slg-blue-800);
	color: var(--slg-white);
}

.slg-btn-secondary a,
a.slg-btn-secondary {
	background: var(--slg-white);
	color: var(--slg-ink);
}

.slg-btn-primary a:hover,
a.slg-btn-primary:hover,
.slg-btn-secondary a:hover,
a.slg-btn-secondary:hover {
	transform: translate(2px, 2px);
	box-shadow: 1px 1px 0 var(--slg-ink);
}

.slg-btn-primary a:hover,
a.slg-btn-primary:hover {
	background: var(--slg-blue-700);
	color: var(--slg-white);
}

.slg-btn-primary a:focus-visible,
a.slg-btn-primary:focus-visible,
.slg-btn-secondary a:focus-visible,
a.slg-btn-secondary:focus-visible {
	outline: 2px solid var(--slg-blue-700);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.slg-btn-primary a,
	a.slg-btn-primary,
	.slg-btn-secondary a,
	a.slg-btn-secondary {
		transition: none;
	}
}

/* Inverted buttons inside the dark CTA band: white/outline on navy, with a
   translucent hard shadow instead of the ink one. */
.slg-cta-band .slg-btn-primary a,
.slg-cta-band a.slg-btn-primary {
	background: var(--slg-white);
	border-color: var(--slg-white);
	color: var(--slg-blue-900);
	box-shadow: 3px 3px 0 rgb(0 0 0 / 0.35);
}

.slg-cta-band .slg-btn-secondary a,
.slg-cta-band a.slg-btn-secondary {
	background: transparent;
	border-color: rgb(255 255 255 / 0.7);
	color: var(--slg-white);
	box-shadow: 3px 3px 0 rgb(0 0 0 / 0.25);
}

.slg-cta-band .slg-btn-primary a:hover,
.slg-cta-band a.slg-btn-primary:hover {
	background: var(--slg-blue-50);
	color: var(--slg-blue-900);
	box-shadow: 1px 1px 0 rgb(0 0 0 / 0.35);
}

.slg-cta-band .slg-btn-secondary a:hover,
.slg-cta-band a.slg-btn-secondary:hover {
	border-color: var(--slg-white);
	color: var(--slg-white);
	box-shadow: 1px 1px 0 rgb(0 0 0 / 0.25);
}

/* --------------------------------------------------------------- check row */

.slg-check-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	list-style: none;
	padding: 0;
	margin: 0;
	color: var(--slg-slate-600);
	font-size: 0.9375rem;
}

.slg-check-row li {
	margin: 0;
}

.slg-check-row li::before {
	content: "✓ ";
	color: var(--slg-green-600);
	font-weight: 700;
}

/* ------------------------------------------------------------------ chips */

.slg-chip-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	padding: 0;
	margin: 0;
}

.slg-chip {
	display: inline-block;
	background: var(--slg-blue-50);
	border: 1px solid var(--slg-blue-100);
	color: var(--slg-blue-800);
	border-radius: 999px;
	padding: 0.25em 0.85em;
	font-size: 0.8125rem;
	font-weight: 500;
}

.slg-chip--ok {
	background: rgb(22 163 74 / 0.08);
	border-color: rgb(22 163 74 / 0.25);
	color: var(--slg-green-600);
}

.slg-chip--block {
	background: rgb(220 38 38 / 0.08);
	border-color: rgb(220 38 38 / 0.25);
	color: var(--slg-red-600);
}

/* ----------------------------------------------------------- browser card */

.slg-browser-card {
	background: var(--slg-white);
	border: var(--slg-border);
	border-radius: var(--slg-radius-browser);
	box-shadow: var(--slg-shadow-browser);
	overflow: hidden;
}

.slg-browser-bar {
	display: flex;
	align-items: center;
	height: 40px;
	padding: 0 14px;
	border-bottom: var(--slg-border);
	background: var(--slg-white);
	position: relative;
}

.slg-browser-bar::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--slg-slate-200);
	box-shadow: 16px 0 0 var(--slg-slate-200), 32px 0 0 var(--slg-slate-200);
}

.slg-browser-url {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	background: var(--slg-slate-50);
	border-radius: 999px;
	padding: 0.2em 1.1em;
	font-family: var(--slg-mono);
	font-size: 0.75rem;
	color: var(--slg-slate-400);
}

.slg-browser-body {
	padding: 8px;
}

/* Keep the embedded plugin table usable inside the card on phones */
.slg-browser-body .storelogic {
	margin: 0.5em 0;
}

/* ------------------------------------------------------------------ cards */

.slg-card {
	background: var(--slg-white);
	border: var(--slg-border);
	border-radius: var(--slg-radius-card);
	box-shadow: var(--slg-shadow-card);
	padding: 24px;
}

/* ---------------------------------------------------------------- feature */

.slg-feature {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

.slg-feature--flip > .slg-feature-text {
	order: 2;
}

.slg-feature--flip > .slg-feature-vignette {
	order: 1;
}

@media (max-width: 880px) {
	.slg-feature {
		grid-template-columns: 1fr;
	}

	.slg-feature--flip > .slg-feature-text {
		order: 1;
	}

	.slg-feature--flip > .slg-feature-vignette {
		order: 2;
	}
}

.slg-bullets {
	list-style: none;
	padding: 0;
	margin: 1.25rem 0 0;
	display: grid;
	gap: 0.75rem;
}

.slg-bullets li {
	margin: 0;
	color: var(--slg-slate-600);
}

.slg-bullets strong {
	color: var(--slg-ink);
	font-weight: 650;
}

/* ------------------------------------------------------------- comparison */

.slg-compare {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 1rem;
}

.slg-compare th,
.slg-compare td {
	padding: 0.85em 1.1em;
	text-align: left;
	border-bottom: var(--slg-border);
}

.slg-compare thead th {
	color: var(--slg-ink);
	font-weight: 650;
	font-size: 0.9375rem;
}

.slg-compare td:nth-child(1) {
	color: var(--slg-ink);
	font-weight: 500;
}

.slg-compare td:nth-child(2),
.slg-compare th:nth-child(2) {
	color: var(--slg-slate-400);
}

.slg-compare th:nth-child(3),
.slg-compare td:nth-child(3) {
	background: var(--slg-blue-50);
	border-left: 1px solid var(--slg-blue-100);
	border-right: 1px solid var(--slg-blue-100);
}

.slg-compare thead th:nth-child(3) {
	border-top: 1px solid var(--slg-blue-100);
	border-radius: 12px 12px 0 0;
	color: var(--slg-blue-800);
}

.slg-compare tbody tr:last-child td:nth-child(3) {
	border-radius: 0 0 12px 12px;
	border-bottom: 1px solid var(--slg-blue-100);
}

.slg-compare td:nth-child(3) {
	color: var(--slg-ink);
	font-weight: 600;
}

.slg-compare .slg-yes::before {
	content: "✓ ";
	color: var(--slg-green-600);
	font-weight: 700;
}

.slg-compare-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

@media (max-width: 640px) {
	.slg-compare {
		min-width: 560px;
	}
}

/* ------------------------------------------------------------------ bento */

.slg-bento {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.slg-bento > .slg-bento-card:first-child {
	grid-column: span 2;
}

@media (max-width: 980px) {
	.slg-bento {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.slg-bento {
		grid-template-columns: 1fr;
	}

	.slg-bento > .slg-bento-card:first-child {
		grid-column: span 1;
	}
}

.slg-bento-card {
	background: var(--slg-white);
	border: var(--slg-border);
	border-radius: var(--slg-radius-card);
	box-shadow: var(--slg-shadow-card);
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

/* Per-card icon chip, tinted with the section's tier accent. Free and Pro
   share the brand blue (the default); only the AI tier is set apart in violet.
   The tier colour is set once on the .slg-bento grid and inherited. */
.slg-bento {
	--slg-tier: var(--slg-blue-800);
	--slg-tier-bg: var(--slg-blue-50);
}

.slg-bento--ai {
	--slg-tier: #7c3aed;
	--slg-tier-bg: #f5f3ff;
}

.slg-bento-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 42px;
	height: 42px;
	border-radius: 11px;
	background: var(--slg-tier-bg);
	color: var(--slg-tier);
	margin-bottom: 0.2rem;
}

.slg-bento-ico svg {
	display: block;
	width: 22px;
	height: 22px;
}

.slg-bento-card h3 {
	margin: 0;
}

.slg-bento-card p {
	margin: 0;
	color: var(--slg-slate-600);
	font-size: 0.9375rem;
}

.slg-bento-link {
	margin-top: auto;
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
}

/* Integration mark(s) on cards that name a real third-party product — a quiet,
   muted logo row anchored to the card foot. Official brand paths, one tone. */
.slg-bento-logos {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: auto;
	padding-top: 0.6rem;
}

.slg-logo {
	height: 20px;
	width: auto;
	flex: none;
	fill: var(--slg-slate-400);
}

/* ---------------------------------------------------------- micro-mockups */

.slg-mock {
	border: var(--slg-border);
	border-radius: 10px;
	padding: 14px;
	background: var(--slg-slate-50);
	font-size: 0.8125rem;
	color: var(--slg-slate-600);
	display: grid;
	gap: 8px;
}

.slg-mock-input {
	background: var(--slg-white);
	border: var(--slg-border);
	border-radius: 8px;
	padding: 0.5em 0.9em;
	color: var(--slg-ink);
	font-weight: 500;
}

.slg-mock-input::after {
	content: "|";
	color: var(--slg-blue-700);
	animation: none;
}

.slg-mock-row {
	display: flex;
	justify-content: space-between;
	gap: 1em;
	background: var(--slg-white);
	border: var(--slg-border);
	border-radius: 8px;
	padding: 0.45em 0.9em;
}

.slg-mock-row--muted {
	color: var(--slg-slate-400);
}

.slg-mock-bar {
	height: 8px;
	border-radius: 999px;
	background: var(--slg-blue-100);
	overflow: hidden;
	position: relative;
}

.slg-mock-bar::after {
	content: "";
	position: absolute;
	inset: 0 28% 0 0;
	background: var(--slg-blue-800);
	border-radius: 999px;
}

/* --------------------------------------------------------------- log card */

.slg-log-card {
	background: var(--slg-ink);
	border-radius: var(--slg-radius-browser);
	padding: 20px;
	font-family: var(--slg-mono);
	font-size: 0.8125rem;
	font-weight: 450;
	color: rgb(248 250 252 / 0.85);
	display: grid;
	gap: 10px;
}

.slg-log-head {
	display: flex;
	align-items: center;
	gap: 0.6em;
	color: rgb(248 250 252 / 0.6);
	padding-bottom: 6px;
	border-bottom: 1px solid rgb(248 250 252 / 0.12);
}

.slg-log-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--slg-green-600);
}

@media (prefers-reduced-motion: no-preference) {
	.slg-log-dot {
		animation: slg-pulse 2s ease-in-out infinite;
	}

	@keyframes slg-pulse {
		50% { opacity: 0.35; }
	}
}

.slg-log-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1em;
	flex-wrap: wrap;
}

.slg-log-row .slg-chip {
	background: transparent;
	font-family: var(--slg-mono);
}

/* Ask chat widget (plugin): use the brand blue accent on the marketing site. */
.slg-ask { --slg-accent: var(--slg-blue-800); }

/* Ask-this-library vignette (legacy static card; kept for any other usage) */
.slg-ask-q {
	margin-top: 0.75rem;
	font-weight: 600;
	color: var(--slg-ink);
}

.slg-ask-a {
	margin-top: 0.5rem;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--slg-slate-600);
}

.slg-ask-a sup {
	color: var(--slg-blue-700);
	font-weight: 700;
}

.slg-ask-cite {
	margin-top: 0.75rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.slg-ask-cite .slg-chip {
	font-family: var(--slg-mono);
	font-size: 0.75rem;
}

/* Inline privacy note under a feature */
.slg-note {
	margin-top: 1rem;
	padding: 0.75rem 1rem;
	background: var(--slg-slate-50);
	border-left: 3px solid var(--slg-blue-700);
	border-radius: 6px;
	font-size: 0.9375rem;
	color: var(--slg-slate-600);
}

/* --------------------------------------------------------------- CTA band */

.slg-cta-band {
	background: var(--slg-blue-900);
}

.slg-cta-band h2,
.slg-cta-band p {
	color: var(--slg-white);
}

.slg-cta-band .slg-lede {
	color: rgb(255 255 255 / 0.85);
}

/* ---------------------------------------------------------- persona cards */

.slg-persona-card {
	background: var(--slg-white);
	border: var(--slg-border);
	border-radius: var(--slg-radius-card);
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.slg-persona-card h3 {
	margin: 0;
}

.slg-persona-card p {
	margin: 0;
	color: var(--slg-slate-600);
	font-size: 0.9375rem;
}

.slg-persona-card a {
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
	margin-top: auto;
}

/* ------------------------------------------------------------ trust strip */

.slg-trust {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

@media (max-width: 880px) {
	.slg-trust {
		grid-template-columns: 1fr;
	}
}

.slg-trust-item strong {
	display: block;
	color: var(--slg-ink);
	font-size: 1.1rem;
	font-weight: 650;
}

.slg-trust-item span {
	color: var(--slg-slate-600);
	font-size: 0.9375rem;
}

/* Linked promise items: plain by default, underline the promise on hover. */
a.slg-trust-item {
	text-decoration: none;
}

a.slg-trust-item:hover strong,
a.slg-trust-item:focus strong {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ----------------------------------------------------------------- plans */

.slg-plans {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	align-items: stretch;
}

@media (max-width: 760px) {
	.slg-plans {
		grid-template-columns: 1fr;
	}
}

.slg-plan-list {
	list-style: none;
	padding: 0;
	margin: 0.75rem 0 1.25rem;
	display: grid;
	gap: 0.4rem;
	color: var(--slg-slate-600);
	font-size: 0.9375rem;
}

.slg-plan-list li::before {
	content: "✓ ";
	color: var(--slg-green-600);
	font-weight: 700;
}

/* ----------------------------------------------------------------- header */

.slg-header {
	position: sticky;
	top: 0;
	z-index: 100;
	border-bottom: 1px solid transparent;
	transition: border-color 150ms ease;
}

/* The frosted-glass backdrop lives on a ::before layer: backdrop-filter on the
   header itself makes it the containing block for position:fixed descendants,
   which trapped the mobile menu overlay inside the 68px header bar. */
.slg-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgb(255 255 255 / 0.88);
	backdrop-filter: saturate(1.2) blur(8px);
	-webkit-backdrop-filter: saturate(1.2) blur(8px);
}

.slg-header.is-scrolled {
	border-bottom-color: var(--slg-slate-200);
}

.slg-wordmark img {
	height: 32px;
	width: auto;
	display: block;
}

@media (max-width: 600px) {
	.slg-wordmark img {
		height: 28px;
	}
}

/* ----------------------------------------------------------------- motion */

@media (prefers-reduced-motion: no-preference) {
	.slg-reveal {
		opacity: 0;
		transform: translateY(12px);
		transition: opacity 400ms ease-out, transform 400ms ease-out;
	}

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

	.slg-card,
	.slg-bento-card,
	.slg-persona-card {
		transition: transform 150ms ease, box-shadow 150ms ease;
	}

	.slg-card:hover,
	.slg-bento-card:hover,
	.slg-persona-card:hover {
		transform: translateY(-2px);
		box-shadow: 0 2px 4px rgb(15 23 42 / 0.06), 0 16px 32px -12px rgb(30 64 175 / 0.18);
	}
}

/* ---------------------------------------------------------- pricing page */

.slg-plans--4 {
	grid-template-columns: repeat(4, 1fr);
	align-items: stretch;
}

@media (max-width: 880px) {
	.slg-plans--4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.slg-plans--4 {
		grid-template-columns: 1fr;
	}
}

.slg-plans--3 {
	grid-template-columns: repeat(3, 1fr);
	align-items: stretch;
}

@media (max-width: 820px) {
	.slg-plans--3 {
		grid-template-columns: 1fr;
	}
}

/* Multi-site price sub-line under the headline price. */
.slg-plan-sub {
	margin: 0.15rem 0 0;
	font-size: 0.875rem;
	color: var(--slg-slate-400);
}

.slg-plans .slg-card {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.slg-card--highlight {
	border-color: var(--slg-blue-100);
	background: var(--slg-blue-50);
}

/* Neobrutalist plan cards (pricing page) — match the button language. The
   highlighted plan pops with a blue border + hard blue shadow and a lift. */
.slg-plans .slg-card {
	border: 2px solid var(--slg-ink);
	box-shadow: 4px 4px 0 var(--slg-ink);
	border-radius: 14px;
}

.slg-plans .slg-card--highlight {
	border-color: var(--slg-blue-800);
	box-shadow: 5px 5px 0 var(--slg-blue-800);
	position: relative;
}

@media (min-width: 821px) {
	.slg-plans--3 .slg-card--highlight {
		transform: translateY(-8px);
	}
}

/* Plan cards are static pricing cards — keep the hard shadow on hover instead of
   the generic soft card lift. */
.slg-plans .slg-card:hover {
	transform: none;
	box-shadow: 4px 4px 0 var(--slg-ink);
}

@media (min-width: 821px) {
	.slg-plans--3 .slg-card--highlight:hover {
		transform: translateY(-8px);
	}
}

.slg-plans .slg-card--highlight:hover {
	box-shadow: 5px 5px 0 var(--slg-blue-800);
}

.slg-plan-name {
	font-size: 1.15rem;
	font-weight: 650;
	margin: 0;
	display: flex;
	align-items: center;
	gap: 0.5em;
	flex-wrap: wrap;
}

.slg-plan-price {
	font-size: 2.2rem;
	font-weight: 750;
	letter-spacing: -0.02em;
	color: var(--slg-ink);
	margin: 0;
	line-height: 1.1;
}

.slg-plan-per {
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--slg-slate-400);
	letter-spacing: 0;
}

.slg-plan-tag {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--slg-slate-600);
}

/* ---------------------------------------------------------------- FAQ */

.slg-faq {
	display: grid;
	gap: 0.75rem;
}

.slg-faq-item {
	background: var(--slg-white);
	border: var(--slg-border);
	border-radius: 12px;
	padding: 0;
	overflow: hidden;
}

.slg-faq-item summary {
	cursor: pointer;
	padding: 1em 1.25em;
	font-weight: 650;
	color: var(--slg-ink);
	list-style: none;
	position: relative;
	padding-right: 2.5em;
}

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

.slg-faq-item summary::after {
	content: "+";
	position: absolute;
	right: 1.1em;
	top: 50%;
	transform: translateY(-50%);
	color: var(--slg-blue-700);
	font-weight: 600;
	font-size: 1.2em;
}

.slg-faq-item[open] summary::after {
	content: "–";
}

.slg-faq-item p {
	margin: 0;
	padding: 0 1.25em 1.1em;
	color: var(--slg-slate-600);
}

/* ------------------------------------------------------------ demo sandbox */

.slg-tabs {
	display: flex;
	gap: 0.25rem;
	border-bottom: var(--slg-border);
	margin-bottom: 1rem;
	flex-wrap: wrap;
}

.slg-tab {
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	padding: 0.6em 1.1em;
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--slg-slate-600);
	cursor: pointer;
}

.slg-tab:hover {
	color: var(--slg-blue-800);
}

.slg-tab.is-active {
	color: var(--slg-blue-800);
	border-bottom-color: var(--slg-blue-800);
}

.slg-tab:focus-visible {
	outline: 2px solid var(--slg-blue-700);
	outline-offset: -2px;
}

.slg-tabpanel[hidden] {
	display: none;
}

.slg-try-chips {
	margin: 0 0 1rem;
}

.slg-try-chips .slg-chip {
	background: var(--slg-white);
}

/* --------------------------------------------------------- how it works */

.slg-steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	counter-reset: slg-step;
}

@media (max-width: 760px) {
	.slg-steps {
		grid-template-columns: 1fr;
	}
}

.slg-step {
	background: var(--slg-white);
	border: var(--slg-border);
	border-radius: var(--slg-radius-card);
	box-shadow: var(--slg-shadow-card);
	padding: 24px;
}

.slg-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 999px;
	background: var(--slg-blue-800);
	color: var(--slg-white);
	font-weight: 700;
	margin-bottom: 0.75rem;
}

.slg-step h3 {
	margin: 0 0 0.4rem;
}

.slg-step p {
	margin: 0;
	color: var(--slg-slate-600);
	font-size: 0.9375rem;
}

/* ------------------------------------------------------------- admin tour */

.slg-tour {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

@media (max-width: 980px) {
	.slg-tour {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 620px) {
	.slg-tour {
		grid-template-columns: 1fr;
	}
}

.slg-tour-item {
	background: var(--slg-white);
	border: var(--slg-border);
	border-radius: var(--slg-radius-card);
	box-shadow: var(--slg-shadow-card);
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.slg-tour-item h3 {
	margin: 0.5rem 0 0;
	font-size: 1.1rem;
}

.slg-tour-item p {
	margin: 0;
	color: var(--slg-slate-600);
	font-size: 0.9rem;
}

.slg-admin-mock {
	background: var(--slg-slate-50);
	border: var(--slg-border);
	border-radius: 10px;
	padding: 12px;
	font-size: 0.78rem;
	color: var(--slg-slate-600);
	display: grid;
	gap: 6px;
	min-height: 168px;
}

.slg-admin-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 2px;
}

.slg-admin-title {
	font-weight: 700;
	color: var(--slg-ink);
}

.slg-admin-btn,
.slg-admin-field--btn {
	display: inline-block;
	background: var(--slg-white);
	border: 1px solid var(--slg-blue-100);
	color: var(--slg-blue-800);
	border-radius: 6px;
	padding: 0.2em 0.6em;
	font-weight: 600;
	font-size: 0.72rem;
}

.slg-admin-row {
	display: flex;
	justify-content: space-between;
	gap: 0.5em;
	background: var(--slg-white);
	border: var(--slg-border);
	border-radius: 6px;
	padding: 0.35em 0.6em;
	color: var(--slg-ink);
}

.slg-admin-tag {
	color: var(--slg-blue-800);
	font-size: 0.72rem;
}

.slg-admin-label {
	font-weight: 600;
	color: var(--slg-ink);
	margin-top: 2px;
}

.slg-admin-field {
	background: var(--slg-white);
	border: var(--slg-border);
	border-radius: 6px;
	padding: 0.35em 0.6em;
}

.slg-admin-hint {
	color: var(--slg-slate-400);
	font-size: 0.72rem;
}

.slg-admin-checks {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em 0.8em;
	color: var(--slg-ink);
}

.slg-admin-divider {
	border-top: var(--slg-border);
	margin: 2px 0;
}

/* =====================================================================
 * Design pass — bolder headings, tighter nav, a real footer, uniform
 * feature cards (easymcpai.com-inspired, StoreLogic blue).
 * ===================================================================== */

/* Heavier, tighter marketing headings. Scoped to Gutenberg headings so the
   embedded plugin table and admin UI are untouched. */
h1.wp-block-heading,
h2.wp-block-heading {
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.08;
}

h3.wp-block-heading {
	font-weight: 750;
	letter-spacing: -0.015em;
}

.slg-hero h1.wp-block-heading,
.slg-hero h2.wp-block-heading {
	line-height: 1.05;
}

/* The accent word inside a heading gets a touch more weight. */
h1 .slg-accent,
h2 .slg-accent {
	font-weight: inherit;
}

/* ------------------------------------------------------------ header nav */

/* Contain + gutter the header and footer so content never sits flush against
   the viewport edges (sections are already constrained; these bars weren't). */
.slg-header .alignwide,
.slg-footer .alignwide {
	max-width: 1260px;
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 5vw, 3rem);
	box-sizing: border-box;
	width: 100%;
}

.slg-header .alignwide {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: clamp(1rem, 3vw, 2.25rem);
}

/* Nav sits next to the logo; the CTA cluster is pushed to the far right. */
.slg-header .wp-block-navigation {
	margin-right: auto;
}

.slg-header .wp-block-navigation {
	gap: clamp(0.9rem, 2vw, 1.75rem);
	font-weight: 500;
}

.slg-header .wp-block-navigation .wp-block-navigation-item > a,
.slg-header .wp-block-navigation .wp-block-navigation-item > .wp-block-navigation-submenu__toggle {
	color: var(--slg-slate-600);
	font-size: 0.95rem;
	padding: 0.35em 0;
}

.slg-header .wp-block-navigation a:hover,
.slg-header .wp-block-navigation button:hover {
	color: var(--slg-blue-800);
}

/* Mobile menu toggle: a real button in the site's button language (44px tap
   target), not core's bare 24px hairline icon that disappears next to the CTA. */
.slg-header .wp-block-navigation__responsive-container-open,
.slg-header .wp-block-navigation__responsive-container-close {
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	color: var(--slg-ink);
	background: var(--slg-white);
	border: 1.5px solid var(--slg-ink);
	border-radius: var(--slg-radius-btn);
	box-shadow: 2px 2px 0 var(--slg-ink);
	padding: 0;
	cursor: pointer;
}

.slg-header .wp-block-navigation__responsive-container-open:hover,
.slg-header .wp-block-navigation__responsive-container-close:hover {
	color: var(--slg-ink);
	box-shadow: 1px 1px 0 var(--slg-ink);
	transform: translate(1px, 1px);
}

/* The open overlay: core paints it with background-color:inherit, which
   resolves to transparent now that the header's own background lives on
   ::before — give it a solid one, and comfortable tap-sized links. */
.slg-header .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--slg-white);
}

.slg-header .wp-block-navigation .is-menu-open .wp-block-navigation-item > a,
.slg-header .wp-block-navigation .is-menu-open .wp-block-navigation-item > .wp-block-navigation-submenu__toggle {
	font-size: 1.15rem;
	padding: 0.5em 0;
}

/* Right-hand CTA cluster in the header. */
.slg-nav-cta {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex-wrap: nowrap;
}

.slg-nav-cta .slg-btn-primary a,
.slg-nav-cta .slg-btn-secondary a {
	padding: 0.55em 1.1em;
	font-size: 0.9rem;
	box-shadow: 2px 2px 0 var(--slg-ink);
}

.slg-nav-cta .slg-btn-primary a:hover,
.slg-nav-cta .slg-btn-secondary a:hover {
	box-shadow: 1px 1px 0 var(--slg-ink);
}

@media (max-width: 860px) {
	/* On small screens the secondary "See pricing" button is redundant with the
	   mobile menu; keep only the primary CTA. */
	.slg-nav-cta .slg-btn-secondary {
		display: none;
	}
}

@media (max-width: 600px) {
	/* Keep logo + menu button + CTA on one row now that the toggle is a real
	   44px button: tighter gap, slightly smaller toggle and CTA. */
	.slg-header .alignwide {
		gap: 0.6rem;
	}

	.slg-header .wp-block-navigation__responsive-container-open {
		width: 42px;
		height: 42px;
	}

	.slg-nav-cta .slg-btn-primary a {
		padding: 0.5em 0.85em;
		font-size: 0.85rem;
	}
}

/* ---------------------------------------------------------------- footer */

.slg-footer {
	background: var(--slg-slate-50);
	border-top: 1px solid var(--slg-slate-200);
}

/* Even, contained columns — brand a touch wider, link columns equal. Replaces
   the flex layout so short link lists don't leave a dead gap after the brand. */
.slg-footer .wp-block-columns {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr 1fr;
	gap: 2.5rem 2rem;
	align-items: start;
}

.slg-footer .wp-block-column {
	flex-basis: auto;
	width: auto;
}

@media (max-width: 900px) {
	.slg-footer .wp-block-columns {
		grid-template-columns: 1fr 1fr;
	}
	.slg-footer .slg-footer-brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 520px) {
	.slg-footer .wp-block-columns {
		grid-template-columns: 1fr;
	}
}

.slg-footer .slg-footer-brand p {
	color: var(--slg-slate-600);
	font-size: 0.9375rem;
	line-height: 1.6;
	max-width: 30ch;
	margin: 0.9rem 0 0;
}

/* Column headings: small, uppercase, tracked. Targets the first paragraph in
   each footer column (the bold label we author there). */
.slg-footer .wp-block-column > p:first-child {
	text-transform: uppercase;
	letter-spacing: 0.07em;
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--slg-slate-400);
	margin: 0 0 0.9rem;
}

.slg-footer .wp-block-column ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 0.55rem;
}

.slg-footer .wp-block-column ul a {
	color: var(--slg-slate-600);
	text-decoration: none;
	font-size: 0.95rem;
}

.slg-footer .wp-block-column ul a:hover {
	color: var(--slg-blue-800);
}

.slg-footer .wp-block-separator {
	border-color: var(--slg-slate-200);
	opacity: 1;
	margin-block: 2.5rem 1.5rem;
}

.slg-footer-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
}

.slg-footer-bottom .slg-wordmark img {
	height: 26px;
}

/* ------------------------------------------------------- uniform bento */

/* Feature grids where every card should be equal — no double-wide first
   card (that lift is only for the homepage highlight bento). */
.slg-bento--even > .slg-bento-card:first-child {
	grid-column: auto;
}

/* --------------------------------------------------------- pill / eyebrow */

.slg-pill {
	box-shadow: 2px 2px 0 var(--slg-blue-100);
}

.slg-eyebrow {
	color: var(--slg-blue-800);
}

/* ------------------------------------------------------- hero scale + rhythm */

/* Bigger, tighter hero headline (the reference leads with a large, heavy H1). */
.slg-hero h1.wp-block-heading {
	font-size: clamp(2.6rem, 6vw, 4.35rem);
	line-height: 1.04;
	max-width: 17ch;
	margin-left: auto;
	margin-right: auto;
}

.slg-hero .slg-pill {
	margin-bottom: 0.4rem;
}

.slg-hero .slg-lede {
	max-width: 50ch;
	margin-left: auto;
	margin-right: auto;
	font-size: 1.25rem;
}

.slg-hero .slg-check-row {
	margin-top: 0.5rem;
	font-weight: 500;
}

/* --------------------------------------------------- section heading rhythm */

/* An eyebrow immediately above a heading should hug it, not float. Sections use
   an .slg-eyebrow paragraph followed by the heading. */
.slg-eyebrow {
	margin-bottom: 0.35rem;
}

.slg-section > .wp-block-heading:first-child,
.slg-hero h1.wp-block-heading {
	margin-top: 0;
}

/* A centred section lede sits under the heading with a comfortable measure. */
.slg-section .slg-lede {
	max-width: 60ch;
}

.has-text-align-center.slg-lede {
	margin-left: auto;
	margin-right: auto;
}

/* --------------------------------------------------------------- changelog */
/* Linear-style release feed: a left rail with the date + version, the write-up
   on the right, entries separated by a hairline. Powered by inc/changelog.php. */

.slg-cl {
	margin-top: 2.5rem;
}

.slg-cl-entry {
	display: grid;
	grid-template-columns: 160px 1fr;
	gap: clamp(1.5rem, 4vw, 3rem);
	padding: clamp(2rem, 5vw, 3.5rem) 0;
	border-top: var(--slg-border);
}

.slg-cl-entry:first-child {
	border-top: 0;
	padding-top: 0;
}

/* Left rail — sticks alongside the entry on desktop. */
.slg-cl-meta {
	position: sticky;
	top: 96px;
	align-self: start;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.slg-cl-date {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--slg-slate-600);
}

.slg-cl-ver {
	display: inline-block;
	width: fit-content;
	font-family: var(--slg-mono);
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--slg-blue-700);
	background: var(--slg-blue-50);
	border: 1px solid var(--slg-blue-100);
	border-radius: 999px;
	padding: 0.1rem 0.55rem;
}

.slg-cl-title {
	margin: 0 0 1.25rem;
	font-size: clamp(1.5rem, 3.5vw, 2rem);
	line-height: 1.2;
	letter-spacing: -0.02em;
}

/* Screenshots / clips. Hero sits under the title; inline shots between prose. */
.slg-cl-shot {
	margin: 1.5rem 0;
	border: var(--slg-border);
	border-radius: var(--slg-radius-browser);
	overflow: hidden;
	box-shadow: var(--slg-shadow-browser);
	background: var(--slg-slate-50);
}

.slg-cl-hero {
	margin-top: 0;
}

.slg-cl-shot img,
.slg-cl-shot video {
	display: block;
	width: 100%;
	height: auto;
}

/* Prose inside an entry. */
.slg-cl-prose > :first-child {
	margin-top: 0;
}

.slg-cl-prose p {
	color: var(--slg-slate-600);
	line-height: 1.7;
	margin: 0 0 1rem;
}

.slg-cl-prose a {
	color: var(--slg-blue-700);
	font-weight: 500;
}

.slg-cl-prose code {
	font-family: var(--slg-mono);
	font-size: 0.85em;
	background: var(--slg-slate-50);
	border: var(--slg-border);
	border-radius: 6px;
	padding: 0.1em 0.35em;
}

/* Featured-change subhead. */
.slg-cl-sub {
	margin: 2rem 0 0.5rem;
	font-size: 1.1rem;
	letter-spacing: -0.01em;
	color: var(--slg-ink);
}

/* "Fixes & improvements" list. */
.slg-cl-fixes {
	margin: 0.5rem 0 1rem;
	padding-left: 1.1rem;
	list-style: none;
}

.slg-cl-fixes li {
	position: relative;
	color: var(--slg-slate-600);
	line-height: 1.6;
	margin: 0.4rem 0;
}

.slg-cl-fixes li::before {
	content: "";
	position: absolute;
	left: -1.1rem;
	top: 0.62em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--slg-slate-400);
}

@media (max-width: 720px) {
	.slg-cl-entry {
		grid-template-columns: 1fr;
		gap: 0.75rem;
	}
	.slg-cl-meta {
		position: static;
		flex-direction: row;
		align-items: center;
		gap: 0.75rem;
	}
}

/* --------------------------------------------------------------------- docs */
/* Knowledge base at /docs — collection sidebar + article column. Rendered by
   inc/docs.php from theme/storelogic-theme/docs/ (built by ops/build-docs.sh). */

.slg-docs-main .entry-content,
.slg-docs-main > .wp-block-post-content {
	max-width: none;
}

.slg-docs-shell {
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 3.5rem);
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 clamp(1rem, 4vw, 2rem);
}

.slg-docs-main-col {
	min-width: 0;
	max-width: 760px;
}

.slg-docs-shell--hub .slg-docs-main-col {
	max-width: none;
}

/* --- sidebar --- */
.slg-docs-aside {
	position: relative;
}

.slg-docs-nav {
	position: sticky;
	top: 88px;
	max-height: calc(100vh - 108px);
	overflow-y: auto;
	font-size: 0.9rem;
	padding-right: 0.5rem;
}

.slg-docs-nav-home {
	margin: 0 0 1rem;
	font-weight: 600;
}

.slg-docs-nav-home a {
	color: var(--slg-ink);
	text-decoration: none;
}

.slg-docs-nav-group {
	margin-bottom: 1.25rem;
}

.slg-docs-nav-title {
	display: block;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--slg-slate-400);
	margin-bottom: 0.4rem;
}

.slg-docs-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}

.slg-docs-nav li a {
	display: block;
	padding: 0.28rem 0.6rem;
	border-radius: 8px;
	color: var(--slg-slate-600);
	text-decoration: none;
	line-height: 1.35;
}

.slg-docs-nav li a:hover {
	background: var(--slg-slate-50);
	color: var(--slg-ink);
}

.slg-docs-nav li.is-current a {
	background: var(--slg-blue-50);
	color: var(--slg-blue-800);
	font-weight: 600;
}

/* --- shared headings --- */
.slg-docs-h1 {
	font-size: clamp(1.9rem, 4vw, 2.6rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin: 0 0 0.75rem;
}

/* --- hub --- */
.slg-docs-hubhead {
	margin-bottom: 2.5rem;
}

.slg-docs-search {
	width: 100%;
	max-width: 460px;
	margin-top: 1.25rem;
	padding: 0.7rem 1rem;
	font-size: 1rem;
	border: var(--slg-border);
	border-radius: var(--slg-radius-btn);
	background: var(--slg-white);
}

.slg-docs-search:focus {
	outline: none;
	border-color: var(--slg-blue-700);
	box-shadow: 0 0 0 3px var(--slg-blue-100);
}

/* --- floating docs search (persistent bottom bar) --- */
.slg-docsearch {
	position: fixed;
	left: 50%;
	bottom: clamp(1rem, 4vw, 2rem);
	transform: translateX(-50%);
	z-index: 60;
	width: min(92vw, 560px);
	animation: slg-docsearch-in 0.28s ease;
}

@keyframes slg-docsearch-in {
	from { opacity: 0; transform: translate(-50%, 14px); }
	to   { opacity: 1; transform: translate(-50%, 0); }
}

.slg-docsearch-inner {
	position: relative;
}

.slg-docsearch-bar {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.6rem 0.85rem;
	background: var(--slg-white);
	border: var(--slg-border);
	border-radius: 999px;
	box-shadow: var(--slg-shadow-card);
}

.slg-docsearch-bar:focus-within {
	border-color: var(--slg-blue-700);
	box-shadow: 0 0 0 3px var(--slg-blue-100), var(--slg-shadow-card);
}

.slg-docsearch-ico {
	width: 18px;
	height: 18px;
	flex: none;
	color: var(--slg-slate-600);
}

.slg-docsearch-input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	outline: none;
	background: transparent;
	font-size: 1rem;
	color: var(--slg-ink);
}

.slg-docsearch-kbd {
	flex: none;
	font-family: inherit;
	font-size: 0.72rem;
	line-height: 1;
	color: var(--slg-slate-600);
	background: var(--slg-slate-50);
	border: var(--slg-border);
	border-radius: 6px;
	padding: 0.28rem 0.42rem;
}

.slg-docsearch-results {
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(100% + 0.6rem);
	margin: 0;
	padding: 0.35rem;
	list-style: none;
	max-height: 58vh;
	overflow-y: auto;
	background: var(--slg-white);
	border: var(--slg-border);
	border-radius: 16px;
	box-shadow: var(--slg-shadow-card);
}

.slg-docsearch-item a {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding: 0.55rem 0.7rem;
	border-radius: 10px;
	text-decoration: none;
	color: var(--slg-ink);
}

.slg-docsearch-item.is-active a,
.slg-docsearch-item a:hover {
	background: var(--slg-slate-50);
}

.slg-docsearch-item-title {
	font-weight: 600;
	font-size: 0.95rem;
}

.slg-docsearch-item-coll {
	font-size: 0.8rem;
	color: var(--slg-slate-600);
}

.slg-docsearch-pill {
	display: inline-block;
	font-size: 0.68rem;
	font-weight: 600;
	color: var(--slg-blue-800);
	background: var(--slg-blue-100);
	border-radius: 999px;
	padding: 0.05rem 0.42rem;
	vertical-align: middle;
}

.slg-docsearch-empty {
	padding: 0.7rem 0.75rem;
	font-size: 0.9rem;
	color: var(--slg-slate-600);
}

@media (max-width: 600px) {
	.slg-docsearch-kbd {
		display: none;
	}
}

.slg-docs-collections {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
}

.slg-docs-collection h2 {
	font-size: 1.15rem;
	letter-spacing: -0.01em;
	margin: 0 0 1rem;
	padding-bottom: 0.5rem;
	border-bottom: var(--slg-border);
}

.slg-docs-cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 0.75rem;
}

.slg-docs-card a {
	display: block;
	height: 100%;
	padding: 0.9rem 1rem;
	border: var(--slg-border);
	border-radius: var(--slg-radius-btn);
	background: var(--slg-white);
	text-decoration: none;
	transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.slg-docs-card a:hover {
	border-color: var(--slg-blue-100);
	box-shadow: var(--slg-shadow-card);
	transform: translateY(-1px);
}

.slg-docs-card-title {
	display: block;
	font-weight: 600;
	color: var(--slg-ink);
	margin-bottom: 0.2rem;
}

.slg-docs-card-desc {
	display: block;
	font-size: 0.85rem;
	color: var(--slg-slate-600);
	line-height: 1.45;
}

.slg-docs-pill {
	display: inline-block;
	margin-left: 0.4rem;
	font-size: 0.62rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--slg-blue-700);
	background: var(--slg-blue-50);
	border: 1px solid var(--slg-blue-100);
	border-radius: 999px;
	padding: 0.05rem 0.4rem;
	vertical-align: middle;
}

.slg-docs-noresult {
	margin-top: 2rem;
	color: var(--slg-slate-600);
}

/* --- article --- */
.slg-docs-crumbs {
	font-size: 0.85rem;
	color: var(--slg-slate-400);
	margin-bottom: 1rem;
}

.slg-docs-crumbs a {
	color: var(--slg-slate-600);
	text-decoration: none;
}

.slg-docs-crumbs span {
	margin: 0 0.35rem;
}

.slg-docs-tier {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-radius: 999px;
	padding: 0.15rem 0.55rem;
	vertical-align: middle;
	position: relative;
	top: -0.3em;
}

.slg-docs-tier--pro {
	color: var(--slg-blue-800);
	background: var(--slg-blue-50);
	border: 1px solid var(--slg-blue-100);
}

.slg-docs-tier--free,
.slg-docs-tier--both {
	color: var(--slg-slate-600);
	background: var(--slg-slate-50);
	border: var(--slg-border);
}

/* rendered-markdown typography */
.slg-docs-body {
	color: var(--slg-ink);
	line-height: 1.7;
	margin-top: 2rem;
}

.slg-docs-body h2 {
	font-size: 1.4rem;
	letter-spacing: -0.01em;
	margin: 2.25rem 0 0.75rem;
	padding-top: 0.5rem;
}

.slg-docs-body h3 {
	font-size: 1.12rem;
	margin: 1.75rem 0 0.5rem;
}

.slg-docs-body p,
.slg-docs-body li {
	color: var(--slg-slate-600);
}

.slg-docs-body p {
	margin: 0 0 1rem;
}

.slg-docs-body a {
	color: var(--slg-blue-700);
	font-weight: 500;
}

.slg-docs-body ul,
.slg-docs-body ol {
	margin: 0 0 1rem;
	padding-left: 1.4rem;
}

.slg-docs-body li {
	margin: 0.3rem 0;
}

.slg-docs-body code {
	font-family: var(--slg-mono);
	font-size: 0.85em;
	background: var(--slg-slate-50);
	border: var(--slg-border);
	border-radius: 6px;
	padding: 0.1em 0.35em;
}

.slg-docs-body pre {
	background: var(--slg-ink);
	color: #e2e8f0;
	border-radius: var(--slg-radius-btn);
	padding: 1rem 1.15rem;
	overflow-x: auto;
	margin: 0 0 1.25rem;
	font-size: 0.85rem;
	line-height: 1.5;
}

.slg-docs-body pre code {
	background: none;
	border: 0;
	padding: 0;
	color: inherit;
	font-size: inherit;
}

.slg-docs-body blockquote {
	margin: 0 0 1.25rem;
	padding: 0.75rem 1.1rem;
	border-left: 3px solid var(--slg-blue-700);
	background: var(--slg-blue-50);
	border-radius: 0 8px 8px 0;
	color: var(--slg-slate-600);
}

.slg-docs-body blockquote p:last-child {
	margin-bottom: 0;
}

.slg-docs-body img {
	max-width: 100%;
	height: auto;
	border: var(--slg-border);
	border-radius: var(--slg-radius-browser);
	box-shadow: var(--slg-shadow-card);
	margin: 1rem 0;
}

.slg-docs-body table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.25rem;
	font-size: 0.92rem;
	display: block;
	overflow-x: auto;
}

.slg-docs-body th,
.slg-docs-body td {
	border: var(--slg-border);
	padding: 0.5rem 0.75rem;
	text-align: left;
	vertical-align: top;
}

.slg-docs-body th {
	background: var(--slg-slate-50);
	font-weight: 600;
	color: var(--slg-ink);
}

.slg-docs-body h2:first-child,
.slg-docs-body > :first-child {
	margin-top: 0;
}

/* related + help */
.slg-docs-related {
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: var(--slg-border);
}

.slg-docs-related h2 {
	font-size: 1rem;
	margin: 0 0 0.75rem;
}

.slg-docs-related ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
}

.slg-docs-related a {
	color: var(--slg-blue-700);
	font-weight: 500;
	text-decoration: none;
}

.slg-docs-help {
	margin-top: 2.5rem;
}

@media (max-width: 900px) {
	.slg-docs-shell {
		grid-template-columns: 1fr;
	}
	.slg-docs-aside {
		display: none;
	}
}

/* ------------------------------------------------ feature-request form */

.slg-frf {
	max-width: 480px;
	margin: 1.5rem auto 0;
	text-align: left;
}

.slg-frf-field {
	margin-bottom: 1rem;
}

.slg-frf label {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	margin-bottom: 0.35rem;
	color: var(--slg-ink);
}

.slg-frf label span {
	font-weight: 400;
	color: var(--slg-slate-400);
}

.slg-frf textarea,
.slg-frf input[type="email"],
.slg-frf input[type="text"],
.slg-frf input[type="url"],
.slg-frf select {
	width: 100%;
	box-sizing: border-box;
	padding: 0.6rem 0.7rem;
	font: inherit;
	font-size: 0.95rem;
	color: var(--slg-ink);
	background: var(--slg-white);
	border: 1.5px solid var(--slg-slate-200);
	border-radius: var(--slg-radius-btn);
}

.slg-frf textarea:focus,
.slg-frf input[type="email"]:focus,
.slg-frf input[type="text"]:focus,
.slg-frf input[type="url"]:focus,
.slg-frf select:focus {
	outline: none;
	border-color: var(--slg-blue-800);
	box-shadow: 0 0 0 3px var(--slg-blue-100);
}

.slg-frf textarea {
	resize: vertical;
	min-height: 92px;
}

.slg-frf-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

@media (max-width: 520px) {
	.slg-frf-row {
		grid-template-columns: 1fr;
	}
}

/* Honeypot: kept in the layout for bots, off-screen for humans + AT. */
.slg-frf-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.slg-frf-submit {
	width: 100%;
	margin-top: 0.25rem;
	padding: 0.7rem 1.1rem;
	font: inherit;
	font-weight: 700;
	font-size: 1rem;
	color: var(--slg-white);
	background: var(--slg-blue-800);
	border: 1.5px solid var(--slg-ink);
	border-radius: var(--slg-radius-btn);
	box-shadow: 3px 3px 0 var(--slg-ink);
	cursor: pointer;
	transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.slg-frf-submit:hover {
	box-shadow: 1px 1px 0 var(--slg-ink);
	transform: translate(2px, 2px);
}

.slg-frf-submit:disabled {
	opacity: 0.7;
	cursor: default;
	box-shadow: 3px 3px 0 var(--slg-ink);
	transform: none;
}

.slg-frf-note {
	margin: 0.6rem 0 0;
	font-size: 0.75rem;
	color: var(--slg-slate-400);
	text-align: center;
}

.slg-frf-status {
	margin: 0.6rem 0 0;
	padding: 0.5rem 0.75rem;
	font-size: 0.875rem;
	text-align: center;
	border-radius: var(--slg-radius-btn);
}

.slg-frf-status.is-ok {
	background: #ecfdf5;
	color: var(--slg-green-600);
}

.slg-frf-status.is-error {
	background: #fef2f2;
	color: var(--slg-red-600);
}

/* ------------------------------------------------- StoreLogic Embed (/embed) */

.slg-embed-snippet {
	margin: 1.75rem auto 0.5rem;
	max-width: 100%;
	width: fit-content;
	border: var(--slg-border);
	border-radius: 10px;
	background: var(--slg-ink);
	padding: 0.8em 1.2em;
	overflow-x: auto;
}

.slg-embed-snippet code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.85rem;
	color: #93c5fd;
	white-space: nowrap;
	background: none;
	padding: 0;
}

/* ==========================================================================
   v3 — quiet editorial surface
   Rewritten 2026-07-21 against measurements taken from the reference site
   rather than an impression of it. The first attempt got the direction right
   and several specifics wrong:

     - it washed the whole page warm; the reference is a WHITE page that uses
       warm tones for bands, cards, hairlines and the footer
     - its eyebrows were tracked-out uppercase; the reference sets them at
       14px, weight 400, sentence case, no tracking
     - its buttons were 500-weight at ~15.5px; the reference is 400 at 14px
     - headings ran larger and tighter than the reference's 65px/-0.02em h1

   v1/v2 (bright-blue SaaS: 800-weight display type, gradient headlines, a
   mesh-gradient hero, glassmorphism, hard offset shadows) are replaced
   wholesale. Emphasis here comes from scale and whitespace, not from weight,
   colour and shadow.

   Palette values live in style.css :root; this file governs how much of them
   gets used.
   ========================================================================== */

body {
	background: var(--slg-white);
	-webkit-font-smoothing: antialiased;
}

/* Vertical rhythm is generous but not vast: the reference gets its air from
   internal spacing and large type, not from enormous section padding. */
.slg-section {
	padding-top: clamp(3.5rem, 6vw, 5.5rem);
	padding-bottom: clamp(3.5rem, 6vw, 5.5rem);
}

/* The warm band, used sparingly to separate sections — never as the page. */
.slg-section--alt { background: var(--slg-slate-50); }

.slg-hero,
.slg-hero-v2 { background: none; }

/* --- Type ---------------------------------------------------------------- */

/* v1 hard-set every Gutenberg heading to 800 with tight tracking, from a
   "bolder headings" design pass. That rule is more specific than theme.json's
   element styles, so the whole type system above it was being silently
   overridden — headings shipped at 800 while theme.json said 400. Reset to
   the measured values here rather than deleting the v1 block, so the two
   layers stay legible as history. */
h1.wp-block-heading,
h2.wp-block-heading {
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1.11;
}

h2.wp-block-heading { letter-spacing: -0.01em; line-height: 1.16; }

h3.wp-block-heading {
	font-weight: 500;
	letter-spacing: -0.005em;
}

/* The v1 hero rules also centred and re-sized the headline. */
.slg-hero h1.wp-block-heading,
.slg-hero h2.wp-block-heading {
	line-height: 1.11;
	margin-left: 0;
	margin-right: 0;
}

.slg-hero h1.wp-block-heading {
	font-size: var(--wp--preset--font-size--xx-large, clamp(2.5rem, 4.6vw, 4.06rem));
	max-width: 15ch;
}

.slg-header .alignwide,
.slg-footer .alignwide {
	max-width: 1160px;
	color: inherit;
}

.slg-lede {
	font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
	line-height: 1.6;
	color: var(--slg-slate-600);
	max-width: 60ch;
}
.has-text-align-center.slg-lede { margin-inline: auto; }

/* Sentence case, normal tracking, plain muted grey — a quiet label above a
   heading, not a tracked-out all-caps kicker. */
.slg-eyebrow {
	font-size: 0.875rem;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	color: var(--slg-slate-400);
	margin-bottom: 0.75rem;
}

/* The accent-pill variant, for the one or two places that want emphasis. */
.slg-eyebrow--pill {
	display: inline-block;
	background: var(--slg-blue-800);
	color: var(--slg-white);
	border-radius: 999px;
	padding: 0.25rem 1rem;
}

.slg-accent,
.slg-grad-text {
	color: var(--slg-blue-800);
	background: none;
	-webkit-text-fill-color: currentColor;
}

.slg-caption { color: var(--slg-slate-400); font-weight: 400; }

/* --- Buttons: small, light, fully rounded -------------------------------- */

.slg-btn-primary a,
a.slg-btn-primary,
.slg-btn-secondary a,
a.slg-btn-secondary {
	display: inline-block;
	border: 1px solid transparent;
	border-radius: var(--slg-radius-btn);
	box-shadow: none;
	font-size: 0.875rem;
	font-weight: 400;
	padding: 0.7em 1.35em;
	text-decoration: none;
	transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.slg-btn-primary a,
a.slg-btn-primary {
	background: var(--slg-blue-800);
	border-color: var(--slg-blue-800);
	color: var(--slg-white);
}

.slg-btn-secondary a,
a.slg-btn-secondary {
	background: transparent;
	border-color: var(--slg-slate-200);
	color: var(--slg-ink);
}

.slg-btn-primary a:hover,
a.slg-btn-primary:hover,
.slg-btn-secondary a:hover,
a.slg-btn-secondary:hover { transform: none; box-shadow: none; }

.slg-btn-primary a:hover,
a.slg-btn-primary:hover { background: var(--slg-blue-700); border-color: var(--slg-blue-700); }

.slg-btn-secondary a:hover,
a.slg-btn-secondary:hover { border-color: var(--slg-slate-400); background: var(--slg-slate-50); }

.slg-btn-primary a:focus-visible,
a.slg-btn-primary:focus-visible,
.slg-btn-secondary a:focus-visible,
a.slg-btn-secondary:focus-visible { outline: 2px solid var(--slg-ink); outline-offset: 3px; }

/* --- Chips, cards -------------------------------------------------------- */

.slg-chip,
.slg-pill {
	background: var(--slg-slate-50);
	border-color: var(--slg-slate-200);
	color: var(--slg-slate-600);
	font-size: 0.875rem;
	font-weight: 400;
}

.slg-pill:hover { border-color: var(--slg-slate-400); color: var(--slg-ink); }

.slg-card,
.slg-bento-card,
.slg-browser-card {
	box-shadow: none;
	border-color: var(--slg-slate-200);
	border-radius: var(--slg-radius-card);
	background: var(--slg-white);
}

/* On the warm band, cards invert to white so they still read as surfaces. */
.slg-section--alt .slg-card,
.slg-section--alt .slg-bento-card { background: var(--slg-white); }

/* --- Header -------------------------------------------------------------- */

.slg-header {
	background: var(--slg-white);
	border-bottom: 1px solid var(--slg-slate-200);
}

.slg-wordmark img { display: block; }

/* The announcement strip above the header: one quiet line, full width. */
.slg-announce {
	background: var(--slg-slate-50);
	border-bottom: 1px solid var(--slg-slate-200);
	text-align: center;
	font-size: 0.875rem;
	color: var(--slg-slate-600);
	padding: 0.6rem 1rem;
	margin: 0;
}

.slg-announce a { color: var(--slg-ink); text-underline-offset: 3px; }

/* --- Teaser -------------------------------------------------------------- */

.slg-teaser {
	padding-block: clamp(4rem, 11vw, 9rem) clamp(3rem, 7vw, 5rem);
}

/* The column. The outer .slg-teaser group is flow, so nothing here is a
   direct child of a constrained layout and max-widths behave normally —
   see the layout note in patterns/teaser.php. */
.slg-teaser-inner {
	max-width: 1160px;
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.slg-teaser h1.wp-block-heading {
	margin: 0 0 1.75rem;
	max-width: 14ch;
}

.slg-teaser .slg-lede { margin: 0 0 2.5rem; max-width: 58ch; }

/* --- Photographic hero --------------------------------------------------- */

/* Applied only when patterns/teaser.php finds an image file, so the type-only
   hero above stays the fallback and the page is never mid-build waiting on an
   asset.

   The scrim is doing real work, not decoration: it is the only thing
   guaranteeing the headline stays legible over a photograph nobody has vetted
   for contrast. It runs opaque at the left where the words sit and clears to
   nothing on the right, which is why the pattern docblock asks for an image
   with its subject on the right. */
.slg-teaser--photo {
	position: relative;
	isolation: isolate;
	background-color: var(--slg-ink);
	background-image: var(--slg-hero-image);
	background-size: cover;
	background-position: center right;
	min-height: min(78vh, 720px);
	display: flex;
	align-items: center;
}

.slg-teaser--photo::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		100deg,
		rgb(32 30 27 / 0.82) 0%,
		rgb(32 30 27 / 0.62) 34%,
		rgb(32 30 27 / 0.24) 66%,
		rgb(32 30 27 / 0.04) 100%
	);
}

/* On a phone the image sits behind the full column rather than beside it, so
   the horizontal scrim would leave text over open picture. Go vertical. */
@media (max-width: 780px) {
	.slg-teaser--photo { background-position: center; }
	.slg-teaser--photo::before {
		background: linear-gradient(
			180deg,
			rgb(32 30 27 / 0.62) 0%,
			rgb(32 30 27 / 0.86) 55%,
			rgb(32 30 27 / 0.9) 100%
		);
	}
}

.slg-teaser--photo .slg-teaser-inner { width: 100%; }
.slg-teaser--photo h1 { color: var(--slg-white); }
.slg-teaser--photo .slg-lede { color: #e2ddd7; }
.slg-teaser--photo .slg-eyebrow { color: #b8b2ab; }
/* The scrim clears to almost nothing on the right, so anything running the
   full width of the column ends up sitting on open photograph. Cap the lower
   block to the text zone. */
.slg-teaser--photo .slg-teaser-rule,
.slg-teaser--photo .slg-teaser-scope,
.slg-teaser--photo .slg-teaser-price { max-width: 60ch; }

.slg-teaser--photo .slg-teaser-rule { border-top-color: rgb(255 255 255 / 0.22); }
.slg-teaser--photo .slg-teaser-scope { color: #c4bfb8; }
.slg-teaser--photo .slg-teaser-price { color: #d6d0ca; }
.slg-teaser--photo .slg-teaser-price strong { color: var(--slg-white); }

/* Inverted buttons: a white pill reads on any photograph, where the deep
   green would disappear into a dark one. */
.slg-teaser--photo .slg-btn-primary a {
	background: var(--slg-white);
	border-color: var(--slg-white);
	color: var(--slg-ink);
}

.slg-teaser--photo .slg-btn-primary a:hover {
	background: #ece7e0;
	border-color: #ece7e0;
	color: var(--slg-ink);
}

.slg-teaser--photo .slg-btn-secondary a {
	background: transparent;
	border-color: rgb(255 255 255 / 0.45);
	color: var(--slg-white);
}

.slg-teaser--photo .slg-btn-secondary a:hover {
	background: rgb(255 255 255 / 0.1);
	border-color: var(--slg-white);
}

.slg-teaser-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
}

.slg-teaser-rule {
	border: 0;
	border-top: 1px solid var(--slg-slate-200);
	margin: 3.5rem 0 1.75rem;
}

/* The category, stated as plain words rather than a feature list — enough to
   say what this is without publishing the roadmap. */
.slg-teaser-scope {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.9375rem;
	color: var(--slg-slate-400);
}

/* Separated by gap rather than a pseudo-element bullet: on a narrow viewport
   the list wraps, and a leading separator on the second line looks broken. */
.slg-teaser-scope li { margin: 0; }

.slg-teaser-price {
	margin: 1.5rem 0 0;
	font-size: 0.9375rem;
	color: var(--slg-slate-600);
}

.slg-teaser-price strong { color: var(--slg-ink); font-weight: 500; }

/* --- Waitlist band ------------------------------------------------------- */

/* A warm band with a hairline, matching the reference's section treatment,
   rather than the dark navy panel v2 used. */
.slg-wl {
	position: relative;
	border-radius: var(--slg-radius-card);
	padding: clamp(2rem, 4.5vw, 3.5rem);
	background: var(--slg-slate-50);
	border: var(--slg-border);
	color: var(--slg-ink);
}

.slg-wl h2 {
	color: var(--slg-ink);
	font-size: clamp(1.75rem, 3vw, 2.4rem);
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1.16;
	margin: 0 0 0.85rem;
	text-wrap: balance;
}

.slg-wl p { color: var(--slg-slate-600); }
.slg-wl .slg-eyebrow { color: var(--slg-slate-400); }

.slg-wl-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.75rem, 4vw, 3.5rem);
	align-items: center;
}

@media (max-width: 860px) {
	.slg-wl-grid { grid-template-columns: 1fr; }
}

.slg-wl-perks {
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 0;
	display: grid;
	gap: 0.7rem;
}

.slg-wl-perks li {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	color: var(--slg-slate-600);
	font-size: 0.9375rem;
	line-height: 1.55;
}

.slg-wl-perks li::before {
	content: "—";
	color: var(--slg-slate-400);
	flex: none;
}

/* The form: a white card on the warm band. */
.slg-wl .slg-frf {
	margin: 0;
	max-width: none;
	background: var(--slg-white);
	border: var(--slg-border);
	border-radius: var(--slg-radius-card);
	padding: clamp(1.5rem, 2.5vw, 2rem);
}

/* "(optional)" wraps the second label onto two lines, so align the fields at
   their bottom edge rather than their top and the inputs stay on one line. */
.slg-wl .slg-frf-row { align-items: end; }

.slg-frf label { font-size: 0.875rem; font-weight: 400; color: var(--slg-ink); }
.slg-frf label span { color: var(--slg-slate-400); }

.slg-frf input,
.slg-frf select,
.slg-frf textarea {
	border: 1px solid var(--slg-slate-200);
	border-radius: var(--slg-radius-btn);
	padding: 0.65rem 1rem;
	font-size: 0.9375rem;
}

.slg-frf input:focus,
.slg-frf select:focus,
.slg-frf textarea:focus {
	border-color: var(--slg-ink);
	box-shadow: none;
}

.slg-frf-submit {
	background: var(--slg-blue-800);
	color: var(--slg-white);
	border: 0;
	border-radius: var(--slg-radius-btn);
	font-size: 0.875rem;
	font-weight: 400;
	box-shadow: none;
}

.slg-frf-submit:hover { background: var(--slg-blue-700); }
.slg-frf-note { color: var(--slg-slate-400); font-size: 0.8125rem; }

/* --- Footer -------------------------------------------------------------- */

.slg-footer {
	background: var(--slg-slate-50);
	border-top: 1px solid var(--slg-slate-200);
}

/* --- Steps: flow to any count (the policy flow has four) ----------------- */

.slg-steps { grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); }

/* --- Metric strip -------------------------------------------------------- */

.slg-metrics {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 1px;
	background: var(--slg-slate-200);
	border: var(--slg-border);
	border-radius: var(--slg-radius-card);
	overflow: hidden;
}

.slg-metric { background: var(--slg-white); padding: 1.5rem 1.35rem; }

.slg-metric-n {
	font-size: clamp(1.7rem, 2.6vw, 2.2rem);
	font-weight: 400;
	letter-spacing: -0.02em;
	color: var(--slg-ink);
	line-height: 1.1;
}

.slg-metric-l { font-size: 0.875rem; color: var(--slg-slate-600); margin-top: 0.35rem; }

/* --- The "one policy, not many settings" visual (preview pages) ---------- */

.slg-swap {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: clamp(1rem, 2.5vw, 2rem);
	align-items: center;
}

@media (max-width: 900px) {
	.slg-swap { grid-template-columns: 1fr; }
	.slg-swap-arrow { transform: rotate(90deg); justify-self: center; }
}

.slg-swap-col { min-width: 0; }

.slg-swap-h {
	font-size: 0.875rem;
	color: var(--slg-slate-400);
	margin: 0 0 0.85rem;
}

.slg-swap-stack { display: grid; gap: 0.5rem; }

.slg-swap-item {
	background: var(--slg-white);
	border: var(--slg-border);
	border-radius: var(--slg-radius-sm);
	padding: 0.7rem 0.95rem;
	font-size: 0.875rem;
	color: var(--slg-slate-600);
}

.slg-swap-item--muted { opacity: 0.6; }
.slg-swap-arrow { color: var(--slg-slate-400); display: flex; align-items: center; }

.slg-swap-policy {
	background: var(--slg-white);
	border: var(--slg-border);
	border-radius: var(--slg-radius-card);
	padding: 1.25rem;
}

.slg-swap-policy-name {
	font-size: 1rem;
	color: var(--slg-ink);
	margin-bottom: 0.85rem;
}

.slg-swap-rule {
	font-family: var(--slg-mono);
	font-size: 0.8125rem;
	color: var(--slg-slate-600);
	padding: 0.4rem 0;
	border-top: 1px solid var(--slg-slate-200);
}

/* --- Password-protected pages ------------------------------------------- */

/* Everything except the teaser is behind a password while the product is
   being built. WordPress's stock form is unstyled, so it lands as raw
   browser chrome in the middle of the page. */
.post-password-form {
	max-width: 30rem;
	margin: clamp(3rem, 10vw, 7rem) auto;
	padding: 2rem;
	background: var(--slg-white);
	border: var(--slg-border);
	border-radius: var(--slg-radius-card);
}

.post-password-form p { color: var(--slg-slate-600); }

.post-password-form label {
	display: block;
	font-size: 0.875rem;
	color: var(--slg-ink);
}

.post-password-form input[type="password"] {
	width: 100%;
	box-sizing: border-box;
	margin-top: 0.4rem;
	padding: 0.65rem 1rem;
	font: inherit;
	color: var(--slg-ink);
	background: var(--slg-white);
	border: 1px solid var(--slg-slate-200);
	border-radius: var(--slg-radius-btn);
}

.post-password-form input[type="password"]:focus { outline: none; border-color: var(--slg-ink); }

.post-password-form input[type="submit"] {
	margin-top: 0.9rem;
	padding: 0.7rem 1.5rem;
	font: inherit;
	font-size: 0.875rem;
	color: var(--slg-white);
	background: var(--slg-blue-800);
	border: 0;
	border-radius: var(--slg-radius-btn);
	cursor: pointer;
}

.post-password-form input[type="submit"]:hover { background: var(--slg-blue-700); }

@media (prefers-reduced-motion: reduce) {
	.slg-btn-primary a,
	a.slg-btn-primary,
	.slg-btn-secondary a,
	a.slg-btn-secondary { transition: none; }
}