/*
Theme Name: Subtle Theme
Theme URI: https://subtleforms.com
Author: SubtleForms
Author URI: https://subtleforms.com
Description: The block theme for subtleforms.com. Built with core blocks and theme.json so every page stays editable in the Site Editor.
Version: 1.7.23
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: subtle-theme
*/

/*
 * Visual layer: flat and clean. Giant Manrope type, full width blocks of
 * indigo, lime, black and white, and the real SubtleForms builder as the
 * main image. No outlines, no offset shadows, no tilts, no gradients.
 * Only transform and opacity are animated.
 *
 * Theme classes use the `st-` prefix so they never collide with the
 * SubtleForms plugin, which uses `sf-`.
 */

:root {
	--st-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--st-header-h: 88px;
}

/* Hero pieces stay hidden until the motion runtime takes over. */
.motion-ready [data-motion="hero-piece"] {
	opacity: 0;
}

/* ------------------------------------------------------------------ */
/* Base                                                                */
/* ------------------------------------------------------------------ */

h1, h2, h3, h4, h5, h6 {
	text-wrap: balance;
}

p, li, dd {
	text-wrap: pretty;
}

::selection {
	background: var(--wp--preset--color--lime);
	color: var(--wp--preset--color--ink);
}

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--indigo);
	outline-offset: 3px;
}

:where(.has-indigo-background-color, .has-black-background-color) :where(a, button, input, select, textarea, summary):focus-visible {
	outline-color: var(--wp--preset--color--lime);
}

/* ------------------------------------------------------------------ */
/* Buttons: flat lime pills                                            */
/* ------------------------------------------------------------------ */

.wp-element-button,
.wp-block-button__link {
	transition: transform 0.3s var(--st-ease), background-color 0.3s var(--st-ease);
}

.wp-element-button:hover,
.wp-block-button__link:hover {
	transform: translateY(-2px);
}

.wp-element-button:active,
.wp-block-button__link:active {
	transform: scale(0.98);
}

/* Small header button: Button-sm (14 / 20 semibold). */
.st-btn-sm .wp-block-button__link {
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.25rem;
	padding: 8px 16px;
	white-space: nowrap;
}

/* Text link with an arrow that nudges on hover. */
.st-arrow-link a {
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.st-arrow-link a::after {
	content: "\2192";
	display: inline-block;
	margin-left: 8px;
	transition: transform 0.3s var(--st-ease);
}

.st-arrow-link a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.st-arrow-link a:hover::after {
	transform: translateX(4px);
}

/* ------------------------------------------------------------------ */
/* Header: a floating translucent pill                                 */
/* ------------------------------------------------------------------ */

.st-header {
	position: sticky;
	top: 0;
	z-index: 50;
	padding: 12px 16px;
	margin-bottom: calc(-1 * var(--st-header-h));
}

.st-header > header {
	position: relative;
	isolation: isolate;
	max-width: var(--wp--style--global--wide-size, 1280px);
	margin-inline: auto;
	padding: 8px 8px 8px 24px;
	border-radius: 9999px;
}

/* The translucent surface lives on a pseudo element. A backdrop-filter on
   the header itself would trap the full screen mobile menu inside it. */
.st-header > header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: rgba(255, 255, 255, 0.86);
	-webkit-backdrop-filter: blur(16px) saturate(1.4);
	backdrop-filter: blur(16px) saturate(1.4);
	box-shadow: var(--wp--preset--shadow--soft);
}

body:not(.home) .site-shell > main {
	padding-top: var(--st-header-h);
}

.st-header .wp-block-navigation-item__content {
	padding: 8px 12px;
	border-radius: 9999px;
	transition: background-color 0.3s var(--st-ease);
}

.st-header .wp-block-navigation-item__content:hover {
	background: rgba(14, 14, 44, 0.06);
	text-decoration: none;
}

.st-header .wp-block-navigation [aria-current="page"] {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

.st-header .wp-block-navigation__submenu-container {
	border: 0 !important;
	border-radius: 16px;
	padding: 8px;
	box-shadow: var(--wp--preset--shadow--soft);
}

/* Mobile menu: a full height white panel, links arrive one by one. */
.st-header .wp-block-navigation__responsive-container.is-menu-open {
	background: rgba(255, 255, 255, 0.98) !important;
	-webkit-backdrop-filter: blur(24px);
	backdrop-filter: blur(24px);
	color: var(--wp--preset--color--ink) !important;
	padding: 24px;
}

.st-header .is-menu-open .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--3-xl);
	line-height: 2.25rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	padding: 8px 0;
}

.st-header .is-menu-open .wp-block-navigation-item__content:hover {
	background: transparent;
	color: var(--wp--preset--color--indigo);
}

.st-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	animation: st-link-in 0.5s var(--st-ease) both;
}

.st-header .is-menu-open .wp-block-navigation__container > :nth-child(1) { animation-delay: 60ms; }
.st-header .is-menu-open .wp-block-navigation__container > :nth-child(2) { animation-delay: 120ms; }
.st-header .is-menu-open .wp-block-navigation__container > :nth-child(3) { animation-delay: 180ms; }
.st-header .is-menu-open .wp-block-navigation__container > :nth-child(4) { animation-delay: 240ms; }
.st-header .is-menu-open .wp-block-navigation__container > :nth-child(5) { animation-delay: 300ms; }
.st-header .is-menu-open .wp-block-navigation__container > :nth-child(n+6) { animation-delay: 360ms; }

@keyframes st-link-in {
	from {
		opacity: 0;
		transform: translateY(24px);
	}
}

.st-header .wp-block-navigation__responsive-container-open,
.st-header .wp-block-navigation__responsive-container-close {
	transition: transform 0.5s var(--st-ease);
}

.st-header .wp-block-navigation__responsive-container-close:hover {
	transform: rotate(90deg);
}

/* ------------------------------------------------------------------ */
/* Hero: giant type, the real builder below                            */
/* ------------------------------------------------------------------ */

.st-hero {
	position: relative;
	isolation: isolate;
	padding-top: calc(var(--st-header-h) + 64px) !important;
	overflow: clip;
}

/* The indigo floor the product sits on: a flat block, not a gradient. */
.st-hero::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 45%;
	background: var(--wp--preset--color--indigo);
	z-index: -1;
}

@media (max-width: 639px) {
	.st-hero::after {
		height: 28%;
	}
}

.st-hero h1 {
	font-size: var(--wp--preset--font-size--4-xl);
	line-height: 2.5rem;
	font-weight: 600;
	letter-spacing: -0.03em;
	max-width: 1080px;
	margin-inline: auto;
}

.st-hero h1 .st-accent {
	color: var(--wp--preset--color--indigo);
}

.st-hero .st-lead {
	max-width: 680px;
	margin-inline: auto;
}

@media (min-width: 640px) {
	.st-hero h1 {
		font-size: var(--wp--preset--font-size--6-xl);
		line-height: 3.75rem;
	}
}

@media (min-width: 1024px) {
	.st-hero {
		padding-top: calc(var(--st-header-h) + 96px) !important;
	}

	.st-hero h1 {
		font-size: var(--wp--preset--font-size--7-xl);
	}
}

/* The product frame: black bezel, nested radius 28 - 12 = 16. */
.st-product {
	background: var(--wp--preset--color--black);
	padding: 12px;
	border-radius: 28px;
	box-shadow: var(--wp--preset--shadow--product);
}

.st-product img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 16px;
}

@media (max-width: 639px) {
	.st-product {
		padding: 6px;
		border-radius: 16px;
	}

	.st-product img {
		border-radius: 10px;
	}
}

/* Facts under the product, on the indigo floor. */
.st-facts p {
	color: var(--wp--preset--color--on-indigo);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.25rem;
	font-weight: 600;
}

.st-facts p::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 8px;
	border-radius: 9999px;
	background: var(--wp--preset--color--lime);
	vertical-align: 1px;
}

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

.st-footer a {
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

.st-footer a:hover {
	color: var(--wp--preset--color--lime);
	text-decoration: underline;
}

.st-footer h2 {
	color: var(--wp--preset--color--lime);
}

.st-footer .wp-block-separator {
	background: var(--wp--preset--color--on-black);
	color: var(--wp--preset--color--on-black);
	opacity: 0.4;
}

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

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition-property: opacity, background-color, color !important;
	}

	.wp-element-button:hover,
	.wp-block-button__link:hover,
	.wp-element-button:active,
	.wp-block-button__link:active {
		transform: none;
	}
}

/* ------------------------------------------------------------------ */
/* Sections                                                            */
/* ------------------------------------------------------------------ */

.st-section h2 {
	font-size: var(--wp--preset--font-size--4-xl);
	line-height: 2.5rem;
	font-weight: 600;
	letter-spacing: -0.035em;
}

@media (min-width: 1024px) {
	.st-section h2 {
		font-size: var(--wp--preset--font-size--5-xl);
		line-height: 3rem;
	}
}

.st-intro .st-lead {
	max-width: 680px;
}

.st-intro:not(:has(.has-text-align-center)) .st-lead {
	margin-inline: 0;
}

/* Form type tiles: flat color blocks. */
.st-tile {
	border-radius: 24px;
	padding: 32px;
	min-height: 224px;
	justify-content: flex-end;
	transition: transform 0.5s var(--st-ease);
}

.st-tile:hover {
	transform: translateY(-4px);
}

.st-tile h3 {
	color: inherit;
	font-size: var(--wp--preset--font-size--2-xl);
	line-height: 2rem;
	font-weight: 600;
}

.st-tile .st-tile-tag {
	margin-bottom: auto !important;
	align-self: flex-start;
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1rem;
	font-weight: 600;
	padding: 4px 12px;
	border-radius: 9999px;
	background: rgba(255, 255, 255, 0.22);
}

.st-tile.has-lime-background-color .st-tile-tag,
.st-tile.has-flame-background-color .st-tile-tag {
	background: rgba(14, 14, 44, 0.1);
}

/* Free feature grid: numbered, text only. */
.st-num {
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.25rem;
	font-weight: 700;
	color: var(--wp--preset--color--indigo);
}

.st-feat h3 {
	font-weight: 600;
}

/* Tagline reveal. */
.st-section .st-tagline {
	max-width: 1080px;
	margin-inline: auto;
	font-size: var(--wp--preset--font-size--4-xl);
	line-height: 2.5rem;
	font-weight: 600;
	letter-spacing: -0.035em;
}

@media (min-width: 1024px) {
	.st-section .st-tagline {
		font-size: var(--wp--preset--font-size--6-xl);
		line-height: 3.75rem;
	}
}

.st-word {
	display: inline;
}

/* Deep dives: text beside a colored panel holding the product. */
.st-dive {
	align-items: center;
}

.st-panel {
	border-radius: 32px;
	padding: 40px;
}

.st-panel .st-product {
	box-shadow: var(--wp--preset--shadow--product);
}

/* Reversed rows put the panel first on desktop; on phones text comes first. */
@media (max-width: 899px) {
	.st-dive--reverse > :first-child {
		order: 2;
	}
}

@media (max-width: 639px) {
	.st-panel {
		padding: 16px;
		border-radius: 24px;
	}
}

/* Sample payment form inside the flame panel. */
.st-mock {
	max-width: 360px;
	margin-inline: auto;
	padding: 32px;
	border-radius: 24px;
	box-shadow: var(--wp--preset--shadow--product);
}

.st-mock-label {
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1rem;
	font-weight: 600;
	color: var(--wp--preset--color--muted);
}

.st-mock-price {
	font-size: var(--wp--preset--font-size--4-xl);
	line-height: 2.5rem;
	font-weight: 700;
}

.st-mock-chip {
	padding: 8px 12px;
	border-radius: 12px;
	background: var(--wp--preset--color--surface);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.25rem;
	font-weight: 600;
}

.st-mock-btn {
	padding: 12px;
	border-radius: 9999px;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
	text-align: center;
	font-weight: 600;
}

/* Live demo. */
.st-demo {
	align-items: center;
}

.has-black-background-color .st-arrow-link a,
.st-aud.has-indigo-background-color .st-arrow-link a,
.st-aud.has-black-background-color .st-arrow-link a {
	color: var(--wp--preset--color--white);
}

.st-demo-form {
	border-radius: 24px;
	padding: 32px;
	box-shadow: var(--wp--preset--shadow--product);
}

@media (max-width: 639px) {
	.st-demo-form {
		padding: 16px;
	}
}

/* How it works: giant lime numbers. */
.st-bignum {
	font-size: var(--wp--preset--font-size--8-xl);
	line-height: 6rem;
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--lime);
}

/* Integrations: names as flat pills. */
.st-pill {
	padding: 12px 24px;
	border-radius: 9999px;
	background: var(--wp--preset--color--surface);
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.75rem;
	font-weight: 600;
	transition: transform 0.3s var(--st-ease), background-color 0.3s var(--st-ease);
}

.st-pill:hover {
	background: var(--wp--preset--color--lime);
	transform: translateY(-2px);
}

/* Switching: a two step flow. */
.st-flow-step {
	padding: 24px;
	border-radius: 24px;
	background: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.75rem;
	font-weight: 600;
}

.st-flow-step--done {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

.st-flow-arrow {
	align-self: center;
	font-size: var(--wp--preset--font-size--3-xl);
	line-height: 2.25rem;
	font-weight: 600;
}

/* Audiences. */
.st-aud {
	border-radius: 24px;
	padding: 32px;
	min-height: 320px;
}

.st-aud h3 {
	color: inherit;
	font-weight: 600;
}

.st-aud .st-arrow-link {
	margin-top: auto !important;
}

/* Built properly, on flame. */
.st-trust h3 {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

.has-flame-background-color .st-lead {
	color: var(--wp--preset--color--ink);
}

/* Free or paid split. */
.st-split {
	border-radius: 32px;
	padding: 40px;
}

.st-split h3 {
	color: inherit;
}

.st-price-line {
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1.75rem;
	font-weight: 700;
}

.st-checks {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 8px;
}

.st-checks li {
	padding-left: 28px;
	position: relative;
}

.st-checks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	width: 16px;
	height: 16px;
	border-radius: 9999px;
	background: var(--wp--preset--color--lime);
	box-shadow: inset 0 0 0 4px var(--wp--preset--color--ink);
}

.has-indigo-background-color .st-checks li::before {
	box-shadow: inset 0 0 0 4px var(--wp--preset--color--indigo);
}

.st-split .wp-block-buttons {
	margin-top: auto;
}

.st-split--free .is-style-outline .wp-block-button__link {
	border-color: var(--wp--preset--color--ink);
}

@media (max-width: 639px) {
	.st-split {
		padding: 24px;
		border-radius: 24px;
	}
}

/* Pricing rows. */
.st-plan {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	border-radius: 24px;
	padding: 32px;
	align-items: center;
}

@media (min-width: 900px) {
	.st-plan {
		grid-template-columns: 1.1fr 1.4fr 1fr;
		gap: 40px;
		padding: 40px;
	}
}

.st-plan h3 {
	color: inherit;
	font-weight: 600;
}

.st-plan-price {
	font-size: var(--wp--preset--font-size--5-xl);
	line-height: 3rem;
	font-weight: 700;
	letter-spacing: -0.03em;
}

.st-badge {
	align-self: flex-start;
	padding: 4px 12px;
	border-radius: 9999px;
	background: var(--wp--preset--color--lime);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1rem;
	font-weight: 600;
}

.st-plan--rec .st-checks li::before {
	box-shadow: inset 0 0 0 4px var(--wp--preset--color--indigo);
}

/* FAQ. */
.st-faqs {
	max-width: 840px;
	margin-inline: auto !important;
	width: 100%;
}

.st-faq {
	background: var(--wp--preset--color--surface);
	border-radius: 16px;
	padding: 24px !important;
}

.st-faq summary {
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.75rem;
	font-weight: 600;
	cursor: pointer;
}

.st-faq[open] summary {
	margin-bottom: 12px;
}

/* Final call to action. */
.st-cta-title {
	max-width: 900px;
}

.st-cta .wp-block-buttons .wp-block-button__link {
	font-size: var(--wp--preset--font-size--lg);
}

/* Vertical flex groups shrink children by default; these rows fill the width. */
.st-plans > .st-plan,
.st-faqs > .st-faq,
.st-flow > .st-flow-step {
	align-self: stretch;
}

/* SubtleForms forms anywhere on the site: flat lime buttons, rounded fields. */
.subtleforms :is(.subtleforms-button, button[type="submit"], input[type="submit"]):not(.sf-step-button) {
	background-color: var(--wp--preset--color--lime) !important;
	color: var(--wp--preset--color--ink) !important;
	border: 0 !important;
	border-radius: 9999px !important;
	font-family: inherit;
	font-weight: 600;
	box-shadow: none !important;
	transition: transform 0.3s var(--st-ease), background-color 0.3s var(--st-ease);
}

.subtleforms :is(.subtleforms-button, button[type="submit"], input[type="submit"]):not(.sf-step-button):hover {
	background-color: var(--wp--preset--color--lime-hover) !important;
	transform: translateY(-2px);
}

.subtleforms :is(.subtleforms-button, button[type="submit"], input[type="submit"]):not(.sf-step-button):active {
	transform: scale(0.98);
}

.subtleforms :where(input[type="text"], input[type="email"], input[type="number"], input[type="tel"], input[type="url"], select, textarea) {
	font-family: inherit;
	border-radius: 12px;
}

/* Links inside colored blocks take the block's text color, underlined. */
:where(.has-indigo-background-color, .has-black-background-color, .has-flame-background-color, .has-lime-background-color) a:where(:not(.wp-element-button)) {
	color: inherit;
}

/* Footer menus sit on black: white links, lime on hover. */
.st-footer .wp-block-navigation,
.st-footer .wp-block-navigation a {
	color: var(--wp--preset--color--white) !important;
}

.st-footer .wp-block-navigation a:hover {
	color: var(--wp--preset--color--lime) !important;
}

/* FAQ: a plus that turns into a cross when open. */
.st-faq summary {
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}

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

.st-faq summary::after {
	content: "+";
	flex: none;
	font-size: var(--wp--preset--font-size--2-xl);
	line-height: 2rem;
	font-weight: 600;
	color: var(--wp--preset--color--indigo);
	transition: transform 0.3s var(--st-ease);
}

.st-faq[open] summary::after {
	transform: rotate(45deg);
}

/* Open mobile menu: left aligned, sub pages indented, no floating box. */
.st-header .is-menu-open .wp-block-navigation__responsive-container-content,
.st-header .is-menu-open .wp-block-navigation__container {
	align-items: flex-start !important;
	justify-content: flex-start !important;
	gap: 8px !important;
}

.st-header .is-menu-open .wp-block-navigation__submenu-container {
	box-shadow: none !important;
	background: transparent !important;
	padding: 0 0 0 16px !important;
}

.st-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1.75rem;
	font-weight: 600;
	color: var(--wp--preset--color--muted);
}

/* ------------------------------------------------------------------ */
/* Minimal pass: neutral tiles with one small color marker             */
/* ------------------------------------------------------------------ */

.st-tile .st-tile-tag {
	background: transparent;
	padding: 0;
	color: var(--wp--preset--color--muted);
}

.st-tile h3 {
	color: var(--wp--preset--color--ink);
}

.st-dot::before {
	content: "";
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-right: 8px;
	border-radius: 3px;
	vertical-align: 0;
	background: var(--wp--preset--color--indigo);
}

.st-dot--lime::before { background: var(--wp--preset--color--lime); }
.st-dot--flame::before { background: var(--wp--preset--color--flame); }
.st-dot--black::before { background: var(--wp--preset--color--black); }

.st-dot--solo::before {
	width: 32px;
	height: 32px;
	margin: 0;
	border-radius: 10px;
}

.st-aud {
	min-height: 0;
}

.st-aud .st-arrow-link a {
	color: var(--wp--preset--color--ink);
}

/* Tagline on white: words go from muted ink to full ink. */
.st-tagline-section .st-tagline {
	color: var(--wp--preset--color--ink);
}

/* ------------------------------------------------------------------ */
/* Inner page hero                                                     */
/* ------------------------------------------------------------------ */

.st-page-hero {
	padding-top: 64px !important;
}

.st-section .st-page-title,
.st-page-hero .st-page-title {
	max-width: 960px;
	margin-inline: auto;
	font-size: var(--wp--preset--font-size--4-xl);
	line-height: 2.5rem;
	font-weight: 600;
	letter-spacing: -0.03em;
}

@media (min-width: 1024px) {
	.st-page-hero {
		padding-top: 96px !important;
	}

	.st-page-hero .st-page-title {
		font-size: var(--wp--preset--font-size--6-xl);
		line-height: 3.75rem;
	}
}

.st-page-hero .st-lead {
	max-width: 680px;
	margin-inline: auto;
}

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

.st-card {
	border-radius: 24px;
	padding: 32px;
}

.st-card h3 {
	color: inherit;
	font-weight: 600;
}

.st-card .st-plan-price {
	font-size: var(--wp--preset--font-size--5-xl);
	line-height: 3rem;
	font-weight: 700;
	letter-spacing: -0.03em;
}

.st-card .st-plan-per {
	opacity: 0.8;
}

.st-card .wp-block-buttons,
.st-card .wp-block-button,
.st-card .wp-block-button__link {
	width: 100%;
	text-align: center;
}

.st-card .is-style-outline .wp-block-button__link {
	border-color: var(--wp--preset--color--ink);
}

.st-card .st-checks {
	margin-top: 8px;
	padding-top: 16px;
	box-shadow: inset 0 1px 0 rgba(14, 14, 44, 0.1);
}

.st-card--rec .st-checks {
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.st-card--rec .st-checks li::before {
	box-shadow: inset 0 0 0 4px var(--wp--preset--color--indigo);
}

@media (min-width: 900px) {
	.st-card--rec {
		transform: translateY(-12px);
	}
}

/* ------------------------------------------------------------------ */
/* Tables                                                              */
/* ------------------------------------------------------------------ */

.st-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.st-table {
	margin: 0;
}

.st-table table {
	width: 100%;
	min-width: 720px;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--wp--preset--color--white);
	border-radius: 24px;
	overflow: hidden;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.25rem;
}

.st-table :is(th, td) {
	border: 0;
	padding: 16px;
	text-align: left;
	vertical-align: top;
	box-shadow: inset 0 -1px 0 rgba(14, 14, 44, 0.08);
}

.st-table thead th {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
	font-weight: 600;
}

.st-table tbody th {
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	width: 28%;
}

.st-table td {
	color: var(--wp--preset--color--muted);
}

.st-table tbody tr:last-child :is(th, td) {
	box-shadow: none;
}

/* The SubtleForms column stands out in the comparison. */
.st-table--compare thead th:nth-child(2) {
	background: var(--wp--preset--color--indigo);
}

.st-table--compare td:nth-child(2) {
	background: rgba(80, 70, 230, 0.06);
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

/* Plan table: centred marks, Pro column tinted. */
.st-table--plans :is(td) {
	text-align: center;
	color: var(--wp--preset--color--ink);
}

.st-table--plans thead th:not(:first-child) {
	text-align: center;
}

.st-table--plans thead th:nth-child(4) {
	background: var(--wp--preset--color--indigo);
}

.st-table--plans td:nth-child(4) {
	background: rgba(80, 70, 230, 0.06);
}

.st-table figcaption {
	margin-top: 12px;
	text-align: center;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1rem;
}

/* "Compare every feature" toggle. */
.st-more > summary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-inline: auto;
	padding: 12px 24px;
	border-radius: 9999px;
	background: var(--wp--preset--color--white);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.st-more > summary::-webkit-details-marker {
	display: none;
}

.st-more > summary::after {
	content: "+";
	color: var(--wp--preset--color--indigo);
	font-weight: 600;
	transition: transform 0.3s var(--st-ease);
}

.st-more[open] > summary::after {
	transform: rotate(45deg);
}

.st-more {
	text-align: center;
}

.st-more[open] > summary {
	margin-bottom: 24px;
}

.st-more .st-table {
	text-align: left;
}

.st-demo-form--center {
	max-width: 560px;
	margin-inline: auto !important;
	width: 100%;
}

/* Integration pills hover in surface instead of color. */
.st-pill:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

/* ------------------------------------------------------------------ */
/* Hero video                                                          */
/* ------------------------------------------------------------------ */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.st-product--video {
	position: relative;
}

.st-product .wp-block-video {
	margin: 0;
}

.st-product video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 2560 / 1614;
	border-radius: 16px;
	background: var(--wp--preset--color--white);
}

@media (max-width: 639px) {
	.st-product video {
		border-radius: 10px;
	}
}

/* Pause and play control, added by the theme script. */
.st-video-toggle {
	position: absolute;
	right: 24px;
	bottom: 24px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border: 0;
	border-radius: 9999px;
	background: rgba(14, 14, 44, 0.8);
	color: var(--wp--preset--color--white);
	font: inherit;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.25rem;
	font-weight: 600;
	cursor: pointer;
	transition: transform 0.3s var(--st-ease), background-color 0.3s var(--st-ease);
}

.st-video-toggle:hover {
	background: var(--wp--preset--color--ink);
	transform: translateY(-2px);
}

.st-video-toggle:focus-visible {
	outline: 2px solid var(--wp--preset--color--lime);
	outline-offset: 3px;
}

.st-video-toggle svg {
	width: 12px;
	height: 12px;
	fill: currentColor;
}

.st-product--video .wp-block-video,
.st-product--video video {
	width: 100%;
	max-width: none;
}

@media (max-width: 639px) {
	.st-video-toggle {
		right: 12px;
		bottom: 12px;
		padding: 8px;
	}

	.st-video-toggle span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}
}

/* ------------------------------------------------------------------ */
/* /pro page                                                           */
/* ------------------------------------------------------------------ */

.st-pro-title {
	max-width: 1100px;
	margin-inline: auto;
}

/* Hand-drawn underline behind a phrase. */
.st-scribble {
	position: relative;
	display: inline-block;
	white-space: nowrap;
}

.st-scribble::after {
	content: "";
	position: absolute;
	left: -2%;
	right: -2%;
	bottom: -0.12em;
	height: 0.28em;
	background: url("assets/vectors/underline-scribble.svg") center / 100% 100% no-repeat;
	z-index: -1;
}

.st-hero--pro .st-hero-media {
	position: relative;
}

.st-hero-arrow {
	position: absolute;
	top: -104px;
	right: 6%;
	left: auto;
	width: 72px;
	margin: 0;
	z-index: 2;
}

.st-hero-note {
	position: absolute;
	top: -96px;
	right: calc(6% + 84px);
	left: auto;
	text-align: right;
	max-width: 280px;
	margin: 0 !important;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.25rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	transform: rotate(-2deg);
}

@media (max-width: 899px) {
	.st-hero-arrow,
	.st-hero-note {
		display: none;
	}
}

/* Jump strip. */
.st-jump a {
	display: inline-block;
	padding: 8px 16px;
	border-radius: 9999px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	font-weight: 600;
	text-decoration: none;
	transition: transform 0.3s var(--st-ease), background-color 0.3s var(--st-ease);
}

.st-jump a:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
	transform: translateY(-2px);
}

html {
	scroll-padding-top: 96px;
}

/* Feature rows. */
.st-feature {
	align-items: center;
}

.st-section .st-feature-title {
	font-size: var(--wp--preset--font-size--4-xl);
	line-height: 2.5rem;
}

@media (min-width: 1024px) {
	.st-feature {
		grid-template-columns: 5fr 7fr !important;
	}

	.st-feature--reverse {
		grid-template-columns: 7fr 5fr !important;
	}
}

.st-checks--lg li {
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.75rem;
	font-weight: 600;
}

.st-checks--lg li::before {
	top: 6px;
}

/* Screenshots in a soft frame, with room for annotations. */
.st-shot {
	position: relative;
	padding: 8px;
	border-radius: 20px;
	background: var(--wp--preset--color--white);
	box-shadow: 0 1px 2px rgba(14, 14, 44, 0.06), 0 24px 64px -16px rgba(14, 14, 44, 0.28);
}

.st-shot .wp-block-image {
	margin: 0;
}

.st-shot img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
}

.has-surface-background-color .st-shot {
	background: var(--wp--preset--color--white);
}

.st-annotated .st-vec {
	position: absolute;
	margin: 0;
	z-index: 2;
	pointer-events: none;
}

.st-anno-arrow {
	width: 96px;
}

.st-anno-arrow--tl { top: -70px; left: -56px; }
.st-anno-arrow--tr { top: -72px; right: -24px; }
.st-anno-arrow--br { bottom: -60px; right: -36px; width: 120px; }

.st-anno-note {
	position: absolute;
	z-index: 2;
	margin: 0 !important;
	padding: 6px 12px;
	border-radius: 9999px;
	background: var(--wp--preset--color--lime);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.25rem;
	font-weight: 600;
	white-space: nowrap;
	transform: rotate(-3deg);
	box-shadow: 0 8px 20px -8px rgba(14, 14, 44, 0.35);
}

.st-anno-note--tl { top: -76px; left: 48px; }
.st-anno-note--tr { top: -84px; right: 72px; }
.st-anno-note--br { bottom: -72px; right: 96px; transform: rotate(2deg); }

@media (max-width: 899px) {
	.st-annotated .st-vec {
		display: none;
	}

	.st-anno-note {
		position: static;
		display: inline-block;
		margin-top: 12px !important;
		transform: none;
	}
}

.st-shot-pair {
	align-items: start;
}

/* Payment flow path. */
.st-flow-block {
	margin-top: 32px !important;
}

.st-section .st-flow-title {
	font-size: var(--wp--preset--font-size--2-xl);
	line-height: 2rem;
}

.st-flow-wrap {
	position: relative;
}

.st-flow-path {
	position: absolute;
	top: 6px;
	left: 4%;
	right: 4%;
	margin: 0;
	opacity: 0.6;
	z-index: 0;
}

.st-flow-path img {
	width: 100%;
	height: 56px;
}

.st-flow-steps {
	position: relative;
	z-index: 1;
}

.st-flow-num {
	display: inline-grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 9999px;
	background: var(--wp--preset--color--indigo);
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1.75rem;
	font-weight: 700;
}

.st-flow-item:last-child .st-flow-num {
	background: var(--wp--preset--color--lime);
	color: var(--wp--preset--color--ink);
}

@media (max-width: 899px) {
	.st-flow-path {
		display: none;
	}
}

/* Integrations with connector lines behind. */
.st-int-wrap {
	position: relative;
}

.st-connector {
	position: absolute;
	inset: 10% 0 auto;
	margin: 0;
	opacity: 0.35;
	z-index: 0;
}

.st-connector img {
	width: 100%;
	height: auto;
}

.st-ints {
	position: relative;
	z-index: 1;
}

.st-shot--sm {
	padding: 6px;
}

/* Risk reversal. */
.st-risk-icon {
	width: 40px;
	margin: 0;
}

.st-risk h3 {
	font-weight: 600;
}

.st-nowrap {
	white-space: nowrap;
}

/* Wide blocks inside vertical stacks keep their full width. */
.is-layout-flex.is-vertical > .alignwide,
.st-flow-block > .st-flow-wrap {
	align-self: stretch;
	width: 100%;
}

.st-flow-steps {
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

@media (max-width: 899px) {
	.st-flow-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 479px) {
	.st-flow-steps {
		grid-template-columns: 1fr !important;
	}
}

/* ------------------------------------------------------------------ */
/* /pro annotations, v2: note and hook arrow travel together           */
/* ------------------------------------------------------------------ */

.st-annotated {
	margin-top: 64px !important;
}

.st-anno {
	position: absolute;
	top: -62px;
	z-index: 3;
	align-items: flex-end !important;
	pointer-events: none;
}

.st-anno--l { left: 24px; }
.st-anno--r { right: 24px; }

.st-anno .st-anno-note {
	position: static;
	margin: 0 !important;
	transform: rotate(-2deg);
}

.st-anno .st-anno-arrow {
	position: static;
	width: 44px;
	margin: 0 0 -22px !important;
	flex: none;
}

.st-anno--r .st-anno-arrow {
	transform: scaleX(-1);
}

.st-anno--hero {
	top: -70px;
	right: 6%;
}

.st-hero--pro .st-hero-media {
	margin-top: 72px !important;
}

@media (max-width: 899px) {
	.st-annotated {
		margin-top: 0 !important;
	}

	.st-anno {
		position: static;
		display: inline-flex !important;
		margin-bottom: 12px !important;
	}

	.st-anno .st-anno-arrow {
		display: none;
	}

	.st-anno--hero {
		display: none !important;
	}
}

/* ------------------------------------------------------------------ */
/* Integrations hub                                                    */
/* ------------------------------------------------------------------ */

.st-hub {
	position: relative;
}

.st-hub-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr minmax(260px, 0.9fr) 1fr;
	grid-template-areas: "a h c" "b h d";
	gap: 48px 112px;
	align-items: center;
}

.st-dest--a { grid-area: a; }
.st-dest--b { grid-area: b; }
.st-dest--c { grid-area: c; }
.st-dest--d { grid-area: d; }
.st-hub-card { grid-area: h; }

.st-hub-lines-svg {
	position: absolute;
	inset: 0;
	margin: 0;
	z-index: 0;
}

.st-hub-lines-svg img {
	width: 100%;
	height: 100%;
}

.st-dest {
	border-radius: 20px;
	padding: 24px;
	box-shadow: 0 1px 2px rgba(14, 14, 44, 0.06), 0 16px 40px -16px rgba(14, 14, 44, 0.25);
	transition: transform 0.5s var(--st-ease);
}

.st-dest:hover {
	transform: translateY(-4px);
}

.st-dest-title {
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.75rem;
	font-weight: 600;
}

.st-chip {
	padding: 4px 12px;
	border-radius: 9999px;
	background: var(--wp--preset--color--surface);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.25rem;
	font-weight: 600;
}

.st-hub-card {
	align-self: center;
	border-radius: 24px;
	padding: 32px;
	box-shadow: var(--wp--preset--shadow--product);
}

.st-hub-badge {
	align-self: flex-start;
	padding: 4px 12px;
	border-radius: 9999px;
	background: var(--wp--preset--color--lime);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1rem;
	font-weight: 600;
}

.st-hub-lines {
	line-height: 1.5rem;
}

.st-thumb-cap {
	font-weight: 600;
	text-align: center;
}

@media (max-width: 899px) {
	.st-hub-grid {
		grid-template-columns: 1fr;
		grid-template-areas: "h" "a" "b" "c" "d";
		gap: 16px;
	}

	.st-hub-lines-svg {
		display: none;
	}
}

/* "The real settings screens": a readable 2 x 2 grid. */
.st-thumbs-wrap > * {
	align-self: stretch !important;
	width: 100%;
}

.st-thumbs {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 40px 32px !important;
	container-type: normal !important;
}

.st-thumbs > * {
	min-width: 0;
}

.st-thumbs .st-thumb-cap {
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.5rem;
	font-weight: 600;
	text-align: left;
}

@media (max-width: 639px) {
	.st-thumbs {
		grid-template-columns: 1fr !important;
	}
}

/* WooCommerce account and order pages: use the wide layout so the account
   navigation and the license cards are not squeezed into the reading width. */
.woocommerce-account .wp-block-post-content > .woocommerce,
.woocommerce-account .entry-content > .woocommerce,
.woocommerce-order-received main > *,
.woocommerce-account .wp-block-post-title {
	max-width: var(--wp--style--global--wide-size, 1280px) !important;
}

@media (min-width: 900px) {
	.woocommerce-account .woocommerce {
		display: grid;
		grid-template-columns: 220px minmax(0, 1fr);
		gap: 48px;
		align-items: start;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation,
	.woocommerce-account .woocommerce-MyAccount-content {
		float: none;
		width: auto;
	}
}

/* WooCommerce and license server screens: consistent form controls. */
:where(.woocommerce, .sfls) :where(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], input[type="search"], select, textarea) {
	font: inherit;
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.5rem;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--white);
	border: 1px solid #C9C9D6;
	border-radius: 12px;
	padding: 8px 12px;
	min-height: 44px;
}

:where(.woocommerce, .sfls) :where(input, select, textarea):focus-visible {
	outline: 2px solid var(--wp--preset--color--indigo);
	outline-offset: 2px;
	border-color: var(--wp--preset--color--indigo);
}

:where(.woocommerce, .sfls) :where(button:not(.wp-element-button):not([class*="wc-block"]), input[type="submit"], .button:not(.wp-element-button)) {
	font: inherit;
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.5rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--surface);
	border: 0;
	border-radius: 9999px;
	padding: 10px 20px;
	min-height: 44px;
	cursor: pointer;
	transition: transform 0.3s var(--st-ease), background-color 0.3s var(--st-ease);
}

:where(.woocommerce, .sfls) :where(button[type="submit"]:not(.wp-element-button):not([class*="wc-block"]), input[type="submit"], .button.alt, .button-primary) {
	background: var(--wp--preset--color--lime);
}

:where(.woocommerce, .sfls) :where(button:not(.wp-element-button):not([class*="wc-block"]), input[type="submit"], .button:not(.wp-element-button)):hover {
	transform: translateY(-1px);
}

/* ------------------------------------------------------------------ */
/* Annotations on every page (note plus hook arrow above any block)    */
/* ------------------------------------------------------------------ */

.st-annotated {
	position: relative;
}

.st-annotated > .st-product,
.st-annotated > .st-demo-form,
.st-annotated > .st-table-wrap,
.st-annotated > .st-cards {
	margin-top: 0 !important;
}

.st-demo-form--center {
	max-width: 680px;
	margin-inline: auto !important;
	width: 100%;
}

/* Plan and comparison tables: tick and cross marks. */
.st-yes {
	color: var(--wp--preset--color--success);
	font-weight: 600;
}

.st-no {
	color: var(--wp--preset--color--muted);
	opacity: 0.55;
}

/* ------------------------------------------------------------------ */
/* Reading pages: legal, changelog                                     */
/* ------------------------------------------------------------------ */

.st-page-hero--left .st-page-title,
.st-page-hero--left .st-lead {
	margin-inline: 0;
	text-align: left;
}

.st-prose {
	max-width: 680px;
	margin-inline: auto;
}

.st-prose h2 {
	margin-top: 48px;
	font-size: var(--wp--preset--font-size--2-xl);
	line-height: 2rem;
	font-weight: 600;
}

.st-prose h3 {
	margin-top: 32px;
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1.75rem;
	font-weight: 600;
}

.st-prose p,
.st-prose li {
	color: var(--wp--preset--color--muted);
}

.st-prose a,
.st-docs-body a,
.st-docs-help a {
	color: var(--wp--preset--color--indigo);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.st-list {
	padding-left: 1.25em;
}

.st-list li + li {
	margin-top: 8px;
}

.st-note {
	padding: 16px 24px;
	border-radius: 16px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink) !important;
	border: 1px solid rgba(14, 14, 44, 0.08);
}

/* ------------------------------------------------------------------ */
/* Docs                                                                */
/* ------------------------------------------------------------------ */

.st-doc-link {
	padding: 24px;
	border-radius: 16px;
	background: var(--wp--preset--color--surface);
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.st-doc-link:hover {
	transform: translateY(-2px);
}

.st-doc-link h3 a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.st-doc-link h3 a::after {
	content: " \2192";
	color: var(--wp--preset--color--indigo);
}

.st-docs {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr) 200px;
	gap: 48px;
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: 24px;
	align-items: start;
}

.st-docs > * {
	margin: 0 !important;
}

.st-docs-nav,
.st-docs-toc {
	position: sticky;
	top: calc(var(--st-header-h) + 24px);
	max-height: calc(100vh - var(--st-header-h) - 48px);
	overflow-y: auto;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.25rem;
}

.st-docs-nav summary {
	display: none;
}

.st-docs-nav ul,
.st-docs-toc ul,
.st-docs-crumbs ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

.st-docs-group {
	margin: 24px 0 8px !important;
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.st-docs-home {
	margin: 0 !important;
	font-weight: 600;
}

.st-docs-nav a,
.st-docs-toc a,
.st-docs-home a {
	display: block;
	padding: 6px 12px;
	border-radius: 8px;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	transition: background-color 0.2s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.st-docs-nav a:hover,
.st-docs-toc a:hover {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
}

.st-docs-nav a[aria-current="page"] {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
	font-weight: 600;
}

.st-docs-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.25rem;
	color: var(--wp--preset--color--muted);
}

.st-docs-crumbs li + li::before {
	content: "\203A";
	margin-right: 8px;
}

.st-docs-crumbs a {
	color: var(--wp--preset--color--muted);
}

.st-docs-article {
	max-width: 720px;
}

.st-docs-article > * + * {
	margin-top: 24px;
}

.st-docs-title {
	font-size: var(--wp--preset--font-size--5-xl);
	line-height: 3rem;
	font-weight: 600;
	letter-spacing: -0.03em;
}

.st-docs-body > * + * {
	margin-top: 16px;
}

.st-docs-body h2 {
	margin-top: 48px;
	font-size: var(--wp--preset--font-size--2-xl);
	line-height: 2rem;
	font-weight: 600;
	scroll-margin-top: calc(var(--st-header-h) + 24px);
}

.st-docs-body h3 {
	margin-top: 32px;
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1.75rem;
	scroll-margin-top: calc(var(--st-header-h) + 24px);
}

.st-docs-body p,
.st-docs-body li {
	color: var(--wp--preset--color--muted);
}

.st-docs-body ol,
.st-docs-body ul {
	padding-left: 1.25em;
}

.st-docs-body li + li {
	margin-top: 8px;
}

.st-docs-body code,
.st-table code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.875em;
	overflow-wrap: anywhere;
}

.st-docs-body :not(pre) > code {
	padding: 2px 6px;
	border-radius: 6px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
}

.st-docs-body pre.wp-block-code {
	position: relative;
	padding: 24px;
	border-radius: 16px;
	background: var(--wp--preset--color--black);
	color: #E4E4EC;
	border: 0;
	overflow-x: auto;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.5rem;
}

.st-docs-body pre.wp-block-code code {
	font-size: inherit;
	white-space: pre;
}

.st-copy {
	position: absolute;
	top: 12px;
	right: 12px;
	padding: 4px 12px;
	border: 0;
	border-radius: 9999px;
	background: rgba(255, 255, 255, 0.12);
	color: var(--wp--preset--color--white);
	font: inherit;
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.st-copy:hover,
.st-copy:focus-visible {
	background: var(--wp--preset--color--lime);
	color: var(--wp--preset--color--ink);
}

.st-docs-body .wp-block-table {
	overflow-x: auto;
}

.st-docs-body .wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--sm);
}

.st-docs-body .wp-block-table :is(th, td) {
	padding: 12px;
	border: 1px solid rgba(14, 14, 44, 0.1);
	text-align: left;
	vertical-align: top;
}

.st-docs-body .wp-block-table thead th {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
}

.st-docs-pager {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: 64px !important;
}

.st-docs-pager a {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px 24px;
	border-radius: 16px;
	border: 1px solid rgba(14, 14, 44, 0.12);
	color: var(--wp--preset--color--ink);
	font-weight: 600;
	text-decoration: none;
	transition: border-color 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.st-docs-pager a:hover {
	border-color: var(--wp--preset--color--indigo);
}

.st-docs-pager span {
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1rem;
	font-weight: 600;
	color: var(--wp--preset--color--muted);
}

.st-docs-next {
	grid-column: 2;
	text-align: right;
}

@media (max-width: 1199px) {
	.st-docs {
		grid-template-columns: 220px minmax(0, 1fr);
	}

	.st-docs-toc {
		display: none;
	}
}

@media (max-width: 999px) {
	.st-docs {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
		padding-inline: 16px;
	}

	.st-docs-nav {
		position: static;
		max-height: none;
	}

	.st-docs-nav summary {
		display: block;
		padding: 12px 16px;
		border-radius: 12px;
		background: var(--wp--preset--color--surface);
		font-weight: 600;
		cursor: pointer;
	}

	.st-docs-title {
		font-size: var(--wp--preset--font-size--4-xl);
		line-height: 2.5rem;
	}
}

/* ------------------------------------------------------------------ */
/* 404                                                                 */
/* ------------------------------------------------------------------ */

.st-404-code {
	font-size: var(--wp--preset--font-size--8-xl);
	line-height: 6rem;
	font-weight: 700;
	letter-spacing: -0.03em;
}

.st-404 h1 {
	font-size: var(--wp--preset--font-size--5-xl);
	line-height: 3rem;
	font-weight: 600;
	letter-spacing: -0.03em;
}

.st-404-search {
	max-width: 480px;
	margin-inline: auto !important;
}

/* ------------------------------------------------------------------ */
/* License server customer screens in the site brand                   */
/* (tokens documented in the plugin README, "Theming tokens")          */
/* ------------------------------------------------------------------ */

body .sfls {
	--sfls-font: var(--wp--preset--font-family--sans);
	--sfls-text: var(--wp--preset--color--ink);
	--sfls-muted: var(--wp--preset--color--muted);
	--sfls-border: rgba(14, 14, 44, 0.12);
	--sfls-border-strong: rgba(14, 14, 44, 0.24);
	--sfls-surface: var(--wp--preset--color--white);
	--sfls-bg: var(--wp--preset--color--surface);
	--sfls-accent: var(--wp--preset--color--indigo);
	--sfls-accent-hover: var(--wp--preset--color--indigo-hover);
	--sfls-accent-soft: #EEEDFD;
	--sfls-accent-contrast: var(--wp--preset--color--white);
	--sfls-success: var(--wp--preset--color--success);
	--sfls-danger: var(--wp--preset--color--error);
	--sfls-info-border: #D3D0FA;
	--sfls-radius: 24px;
	--sfls-radius-lg: 24px;
	--sfls-radius-md: 16px;
	--sfls-radius-sm: 12px;
	--sfls-button-radius: 9999px;
	--sfls-button-bg: var(--wp--preset--color--lime);
	--sfls-button-text: var(--wp--preset--color--ink);
	--sfls-button-bg-hover: var(--wp--preset--color--lime-hover);
	--sfls-shadow-lg: 0 24px 64px -16px rgba(14, 14, 44, 0.28);
}

.site-shell > main.st-docs-main {
	padding-top: calc(var(--st-header-h) + 32px) !important;
}

/* Keep the hand-drawn underline above any section background. */
.st-scribble {
	isolation: isolate;
}

/* Logo: the SubtleForms mark beside the name. */
.st-header .wp-block-site-logo img {
	width: 32px;
	height: 32px;
}

.st-footer-logo {
	margin: 0 !important;
}

.st-footer-logo img {
	display: block;
}

/* ------------------------------------------------------------------ */
/* Shop screens: cart, checkout, pay for order, order received, account */
/* ------------------------------------------------------------------ */

/* The footer always sits at the bottom, even on short pages. */
.site-shell {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.site-shell > main {
	flex: 1 0 auto;
}

.site-shell > main.st-shop-main {
	padding-top: calc(var(--st-header-h) + 48px) !important;
	padding-bottom: 96px !important;
}

.st-shop-main > * + * {
	margin-top: 24px;
}

.st-shop-title {
	font-size: var(--wp--preset--font-size--5-xl);
	line-height: 3rem;
	font-weight: 600;
	letter-spacing: -0.03em;
}

.st-shop-trust {
	margin-top: 12px !important;
}

/* Checkout and cart blocks in the brand. */
.wc-block-checkout,
.wc-block-cart {
	font-size: var(--wp--preset--font-size--base);
}

.wc-block-components-title.wc-block-components-title,
.wc-block-checkout .wc-block-components-checkout-step__title {
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1.75rem;
	font-weight: 600;
}

.wc-block-components-text-input input,
.wc-block-components-combobox .wc-block-components-combobox-control input,
.wc-blocks-components-select__select {
	border-radius: 12px !important;
	border-color: #C9C9D6 !important;
}

.wc-block-components-radio-control-accordion-option,
.wc-block-checkout__payment-method .wc-block-components-radio-control__option {
	border-radius: 16px;
}

.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button {
	border-radius: 9999px !important;
	background: var(--wp--preset--color--lime) !important;
	color: var(--wp--preset--color--ink) !important;
	font-weight: 600 !important;
	min-height: 56px;
}

.wc-block-components-sidebar .wc-block-components-panel,
.wc-block-checkout__sidebar .wc-block-components-order-summary,
.wp-block-woocommerce-checkout-order-summary-block {
	border-radius: 24px;
}

.wp-block-woocommerce-checkout-order-summary-block {
	padding: 8px 16px;
	border: 1px solid rgba(14, 14, 44, 0.12) !important;
}

.wc-block-components-notice-banner {
	border-radius: 16px;
}

/* Empty cart. */
.st-empty {
	padding: 64px 24px;
	border-radius: 24px;
	background: var(--wp--preset--color--surface);
	gap: 16px;
}

.st-empty .wc-block-cart__empty-cart__title {
	font-size: var(--wp--preset--font-size--3-xl);
	line-height: 2.25rem;
	font-weight: 600;
}

.st-empty .wc-block-cart__empty-cart__title::before {
	display: none;
}

/* Order received. */
.st-order-main .wc-block-order-confirmation-status h1 {
	font-size: var(--wp--preset--font-size--5-xl);
	line-height: 3rem;
	font-weight: 600;
	letter-spacing: -0.03em;
}

.st-order-main .wc-block-order-confirmation-status p {
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.75rem;
	color: var(--wp--preset--color--muted);
}

.st-order-main .wc-block-order-confirmation-summary {
	padding: 24px;
	border-radius: 24px;
	background: var(--wp--preset--color--surface);
}

.st-order-main :is(.wc-block-order-confirmation-totals, .wc-block-order-confirmation-downloads) table {
	border-radius: 16px;
	overflow: hidden;
}

/* My account: navigation beside the content. */
.st-account > .woocommerce {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: 48px;
	align-items: start;
}

.st-account > .woocommerce::before,
.st-account > .woocommerce::after {
	display: none !important;
}

.st-account .woocommerce-MyAccount-navigation,
.st-account .woocommerce-MyAccount-content {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
}

.st-account .woocommerce-MyAccount-navigation {
	position: sticky;
	top: calc(var(--st-header-h) + 24px);
	padding: 12px;
	border-radius: 24px;
	background: var(--wp--preset--color--surface);
}

.st-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 4px;
}

.st-account .woocommerce-MyAccount-navigation a {
	display: block;
	padding: 10px 16px;
	border-radius: 12px;
	color: var(--wp--preset--color--muted);
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.2s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.st-account .woocommerce-MyAccount-navigation a:hover {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
}

.st-account .woocommerce-MyAccount-navigation .is-active a {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

.st-account .woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid rgba(14, 14, 44, 0.1);
}

.st-account .woocommerce-MyAccount-content > p:first-child {
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.75rem;
	color: var(--wp--preset--color--ink);
}

.st-account .woocommerce-MyAccount-content p {
	color: var(--wp--preset--color--muted);
}

.st-account .woocommerce-MyAccount-content a:not(.button):not(.sfls-btn):not(.wp-element-button) {
	color: var(--wp--preset--color--indigo);
}

.st-account table.shop_table,
.st-account table.woocommerce-orders-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid rgba(14, 14, 44, 0.12);
	border-radius: 16px;
	overflow: hidden;
}

.st-account table :is(th, td) {
	padding: 12px 16px;
	text-align: left;
	border-bottom: 1px solid rgba(14, 14, 44, 0.08);
}

.st-account table thead th {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--sm);
}

.st-account .woocommerce-Addresses,
.st-account .u-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 24px;
}

.st-account .u-columns > * {
	float: none !important;
	width: auto !important;
}

/* Logged out: login and register side by side, in cards. */
.st-account > .woocommerce:has(#customer_login),
.st-account > .woocommerce:not(:has(.woocommerce-MyAccount-navigation)) {
	display: block;
}

.st-account #customer_login > * {
	padding: 32px;
	border-radius: 24px;
	background: var(--wp--preset--color--surface);
}

@media (max-width: 899px) {
	.st-account > .woocommerce {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.st-account .woocommerce-MyAccount-navigation {
		position: static;
	}

	.st-account .woocommerce-MyAccount-navigation ul {
		grid-auto-flow: column;
		grid-auto-columns: max-content;
		overflow-x: auto;
	}

	.st-shop-title {
		font-size: var(--wp--preset--font-size--4-xl);
		line-height: 2.5rem;
	}
}

.st-account .woocommerce-MyAccount-navigation li {
	margin: 0;
}

/* ------------------------------------------------------------------ */
/* Header: product bar                                                 */
/* Full width at the top of the page, a floating pill once scrolled.   */
/* Icons: Phosphor (assets/icons/SOURCE.md).                           */
/* ------------------------------------------------------------------ */

.st-header {
	padding: 12px 16px;
	transition: padding 0.5s var(--st-ease);
}

.st-header > header.st-bar {
	gap: 16px;
	padding: 8px 8px 8px 16px;
}

/* The pill surface fades and settles in after the first scroll. */
.st-header > header::before {
	opacity: 0;
	transform: scale(1.015);
	transition: opacity 0.5s var(--st-ease), transform 0.5s var(--st-ease);
}

.st-header.is-scrolled > header::before {
	opacity: 1;
	transform: none;
}

body:not(.home) .st-header:not(.is-scrolled) > header::before {
	opacity: 1;
	transform: none;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: none;
}

.st-brand {
	flex: none;
}

.st-brand .wp-block-site-title a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	font-weight: 600;
	letter-spacing: -0.02em;
}

.st-mainnav {
	flex: 1 1 auto;
	justify-content: center;
}

.st-actions {
	flex: none;
}

/* Top level links: Title 4 (14 / 20, medium). */
.st-header .wp-block-navigation .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.25rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.st-header .wp-block-navigation-submenu__toggle {
	padding: 8px 4px 8px 0 !important;
}

.st-header .wp-block-navigation .has-child > .wp-block-navigation-item__content {
	padding-right: 4px;
}

/* Icons, drawn with a mask so they take the text color. */
.st-mega-item > a::before,
.st-signin > a::before,
.st-myaccount > a::before {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	background: currentColor;
	-webkit-mask: var(--st-icon) center / contain no-repeat;
	mask: var(--st-icon) center / contain no-repeat;
}

.st-ico-grid { --st-icon: url("assets/icons/squares-four.svg"); }
.st-ico-pro { --st-icon: url("assets/icons/sparkle.svg"); }
.st-ico-play { --st-icon: url("assets/icons/play-circle.svg"); }
.st-ico-compare { --st-icon: url("assets/icons/scales.svg"); }
.st-ico-owner { --st-icon: url("assets/icons/storefront.svg"); }
.st-ico-agency { --st-icon: url("assets/icons/briefcase.svg"); }
.st-ico-code { --st-icon: url("assets/icons/code-block.svg"); }
.st-signin { --st-icon: url("assets/icons/sign-in.svg"); }
.st-myaccount { --st-icon: url("assets/icons/user-circle.svg"); }

.st-signin > a,
.st-myaccount > a {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
}

.st-header .wp-block-navigation-item__description {
	display: none;
}

@media (min-width: 1024px) {
	/* Dropdown panels. */
	.st-header .st-mega > .wp-block-navigation__submenu-container {
		padding: 12px !important;
		border-radius: 24px;
		background: var(--wp--preset--color--white) !important;
		box-shadow: 0 1px 2px rgba(14, 14, 44, 0.06), 0 24px 64px -16px rgba(14, 14, 44, 0.28) !important;
		left: 50% !important;
		transform: translate(-50%, 8px);
		opacity: 0;
		transition: opacity 0.3s var(--st-ease), transform 0.3s var(--st-ease) !important;
	}

	.st-header .st-mega:is(:hover, :focus-within) > .wp-block-navigation__submenu-container,
	.st-header .st-mega > .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
		opacity: 1;
		transform: translate(-50%, 0);
	}

	.st-header .st-mega--product > .wp-block-navigation__submenu-container {
		display: grid !important;
		grid-template-columns: 320px 220px;
		grid-auto-rows: auto;
		gap: 4px 12px;
		width: max-content !important;
		min-width: 0 !important;
	}

	.st-header .st-mega--solutions > .wp-block-navigation__submenu-container {
		width: 340px !important;
		min-width: 0 !important;
	}

	.st-header .st-mega-item > a {
		display: grid !important;
		grid-template-columns: 40px 1fr;
		grid-template-rows: auto auto;
		column-gap: 12px;
		align-items: center;
		padding: 10px 12px !important;
		border-radius: 16px !important;
		white-space: normal;
	}

	.st-header .st-mega-item > a::before {
		grid-row: 1 / span 2;
		width: 40px;
		height: 40px;
		border-radius: 12px;
		background: var(--wp--preset--color--surface);
		-webkit-mask: none;
		mask: none;
		box-shadow: inset 0 0 0 1px rgba(14, 14, 44, 0.06);
	}

	/* The icon sits on the tile: a second layer drawn with the mask. */
	.st-header .st-mega-item > a::after {
		content: "";
		grid-row: 1 / span 2;
		grid-column: 1;
		justify-self: center;
		width: 20px;
		height: 20px;
		background: var(--wp--preset--color--indigo);
		-webkit-mask: var(--st-icon) center / contain no-repeat;
		mask: var(--st-icon) center / contain no-repeat;
	}

	.st-header .st-mega-item .wp-block-navigation-item__label {
		grid-column: 2;
		font-weight: 600;
		color: var(--wp--preset--color--ink);
	}

	.st-header .st-mega-item .wp-block-navigation-item__description {
		display: block;
		grid-column: 2;
		font-size: var(--wp--preset--font-size--xs);
		line-height: 1rem;
		font-weight: 500;
		color: var(--wp--preset--color--muted);
	}

	.st-header .st-mega-item > a:hover {
		background: var(--wp--preset--color--surface) !important;
	}

	.st-header .st-mega-item > a:hover::before {
		background: var(--wp--preset--color--white);
	}

	/* The promo card fills the right column of the Product menu. */
	.st-header .st-mega-promo {
		grid-column: 2;
		grid-row: 1 / span 4;
	}

	.st-header .st-mega-promo > a {
		display: flex !important;
		flex-direction: column;
		justify-content: flex-end;
		gap: 8px;
		height: 100%;
		padding: 20px !important;
		border-radius: 16px !important;
		background: var(--wp--preset--color--indigo) url("assets/vectors/sparkle.svg") right 16px top 16px / 40px no-repeat !important;
		color: var(--wp--preset--color--white) !important;
		white-space: normal;
		transition: transform 0.3s var(--st-ease) !important;
	}

	.st-header .st-mega-promo > a:hover {
		transform: translateY(-2px);
	}

	.st-header .st-mega-promo .wp-block-navigation-item__label {
		font-size: var(--wp--preset--font-size--lg);
		line-height: 1.5rem;
		font-weight: 600;
	}

	.st-header .st-mega-promo .wp-block-navigation-item__label::after {
		content: " \2192";
		color: var(--wp--preset--color--lime);
	}

	.st-header .st-mega-promo .wp-block-navigation-item__description {
		display: block;
		font-size: var(--wp--preset--font-size--sm);
		line-height: 1.25rem;
		color: var(--wp--preset--color--on-indigo);
	}

	/* Account menu opens to the right edge. */
	.st-header .st-account-menu > .wp-block-navigation__submenu-container {
		left: auto !important;
		right: 0 !important;
		min-width: 220px !important;
		padding: 8px !important;
		border-radius: 20px;
		box-shadow: 0 24px 64px -16px rgba(14, 14, 44, 0.28) !important;
	}

	.st-header .st-account-menu .wp-block-navigation__submenu-container a {
		border-radius: 12px !important;
		padding: 8px 12px !important;
	}

	.st-header .st-logout {
		margin-top: 4px;
		padding-top: 4px;
		border-top: 1px solid rgba(14, 14, 44, 0.1);
	}

	.st-mobile-only {
		display: none !important;
	}
}

/* Below 1024px: the main links move into the full screen menu. */
@media (max-width: 1023px) {
	.st-header .st-mainnav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
	}

	.st-header .st-mainnav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none !important;
	}

	.st-mainnav {
		order: 3;
		flex: none;
	}

	.st-actions {
		margin-left: auto;
	}

	.st-accountnav {
		display: none !important;
	}

	.st-header .is-menu-open .wp-block-navigation-item__description {
		display: block;
		font-size: var(--wp--preset--font-size--sm);
		line-height: 1.25rem;
		font-weight: 500;
		color: var(--wp--preset--color--muted);
	}

	.st-header .is-menu-open .st-mega-item > a,
	.st-header .is-menu-open .st-mega-promo > a {
		display: flex !important;
		flex-direction: column;
		align-items: flex-start;
		font-size: var(--wp--preset--font-size--xl) !important;
		line-height: 1.75rem !important;
		font-weight: 600 !important;
	}

	.st-header .is-menu-open .st-mega-item > a::before {
		display: none;
	}

	.st-header .is-menu-open .wp-block-navigation__submenu-container {
		padding: 0 0 16px 0 !important;
	}

	.st-header .is-menu-open .st-signin > a,
	.st-header .is-menu-open .st-myaccount > a {
		margin-top: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.st-header,
	.st-header > header::before,
	.st-header .st-mega > .wp-block-navigation__submenu-container {
		transition: opacity 0.2s var(--st-ease) !important;
		transform: none !important;
	}
}

@media (min-width: 1024px) {
	.st-header .st-mega-item > a::before { grid-column: 1; grid-row: 1 / span 2; }
	.st-header .st-mega-item > a::after { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
	.st-header .st-mega-item .wp-block-navigation-item__label { grid-row: 1; align-self: end; }
	.st-header .st-mega-item .wp-block-navigation-item__description { grid-row: 2; align-self: start; }
}

.st-header .st-mainnav [aria-current="page"],
.st-header .st-mainnav [aria-current="page"] .wp-block-navigation-item__label {
	color: var(--wp--preset--color--white);
}

.st-header .st-mega [aria-current="page"] {
	background: var(--wp--preset--color--surface) !important;
}

.st-header .st-mega [aria-current="page"] .wp-block-navigation-item__label {
	color: var(--wp--preset--color--ink);
}

@media (min-width: 1024px) {
	.st-header .st-mega-promo {
		display: flex !important;
		align-self: stretch;
		margin: 0 !important;
	}

	.st-header .st-mega-promo > a {
		height: auto !important;
		flex: 1 1 auto;
		box-sizing: border-box;
	}

	.st-header .st-mega--product > .wp-block-navigation__submenu-container {
		height: auto !important;
		align-items: stretch;
	}
}

@media (min-width: 1024px) {
	.st-header .st-mega-promo {
		align-items: stretch !important;
	}

	.st-header .st-mega-promo > a {
		padding-top: 72px !important;
	}
}

/* Mobile menu, v2: a left aligned list. Group names (Product, Solutions)
   are small labels; every destination is a large link with its line. */
@media (max-width: 1023px) {
	.st-header .wp-block-navigation__responsive-container.is-menu-open {
		position: fixed;
		inset: 0;
		background: var(--wp--preset--color--white) !important;
		padding: 24px 24px 48px !important;
		overflow-y: auto;
	}

	.st-header .is-menu-open .wp-block-navigation__responsive-container-content {
		align-items: stretch !important;
		padding-top: 48px !important;
	}

	.st-header .is-menu-open .wp-block-navigation__container,
	.st-header .is-menu-open .wp-block-navigation__submenu-container {
		align-items: stretch !important;
		justify-content: flex-start !important;
		width: 100%;
		gap: 4px !important;
	}

	.st-header .is-menu-open .wp-block-navigation-item {
		align-items: stretch !important;
		width: 100%;
	}

	.st-header .is-menu-open .wp-block-navigation-item__content,
	.st-header .is-menu-open .st-mega-item > a,
	.st-header .is-menu-open .st-mega-promo > a {
		display: flex !important;
		flex-direction: column;
		align-items: flex-start !important;
		text-align: left;
		white-space: normal;
		padding: 8px 0 !important;
		font-size: var(--wp--preset--font-size--xl) !important;
		line-height: 1.75rem !important;
		font-weight: 600 !important;
		color: var(--wp--preset--color--ink) !important;
		background: transparent !important;
	}

	/* Group names. */
	.st-header .is-menu-open .st-mega > .wp-block-navigation-item__content {
		margin-top: 16px;
		padding: 0 !important;
		font-size: var(--wp--preset--font-size--sm) !important;
		line-height: 1.25rem !important;
		font-weight: 600 !important;
		color: var(--wp--preset--color--muted) !important;
		pointer-events: none;
	}

	.st-header .is-menu-open .wp-block-navigation-submenu__toggle {
		display: none !important;
	}

	.st-header .is-menu-open .wp-block-navigation__submenu-container {
		padding: 0 !important;
	}

	.st-header .is-menu-open .st-mega-promo > a {
		margin-top: 8px;
		padding: 16px !important;
		border-radius: 16px;
		background: var(--wp--preset--color--indigo) !important;
		color: var(--wp--preset--color--white) !important;
	}

	.st-header .is-menu-open .st-mega-promo .wp-block-navigation-item__description {
		color: var(--wp--preset--color--on-indigo);
	}

	.st-header .is-menu-open [aria-current="page"] {
		color: var(--wp--preset--color--indigo) !important;
	}

	.st-header .is-menu-open [aria-current="page"] .wp-block-navigation-item__label {
		color: var(--wp--preset--color--indigo);
	}

	.st-header .is-menu-open .st-signin,
	.st-header .is-menu-open .st-myaccount {
		margin-top: 16px;
		padding-top: 16px;
		border-top: 1px solid rgba(14, 14, 44, 0.1);
	}

	.st-header .is-menu-open .st-signin > a,
	.st-header .is-menu-open .st-myaccount > a {
		flex-direction: row !important;
		align-items: center !important;
		margin-top: 0;
	}

	.st-header .wp-block-navigation__responsive-container-close {
		top: 24px !important;
		right: 24px !important;
		width: 40px;
		height: 40px;
		display: grid;
		place-items: center;
		border-radius: 9999px;
		background: var(--wp--preset--color--surface) !important;
	}

	.st-header .wp-block-navigation__responsive-container-open {
		width: 40px;
		height: 40px;
		display: grid !important;
		place-items: center;
		border-radius: 9999px;
		background: var(--wp--preset--color--surface);
	}
}

@media (max-width: 1023px) {
	.st-header .is-menu-open,
	.st-header .is-menu-open * {
		box-sizing: border-box;
	}

	.st-header .is-menu-open .wp-block-navigation__responsive-close,
	.st-header .is-menu-open .wp-block-navigation__responsive-dialog,
	.st-header .is-menu-open .wp-block-navigation__responsive-container-content {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
	}

	.st-header .is-menu-open .wp-block-navigation-item {
		width: auto !important;
		max-width: 100%;
		min-width: 0;
	}

	.st-header .is-menu-open .wp-block-navigation-item__label,
	.st-header .is-menu-open .wp-block-navigation-item__description {
		white-space: normal;
		overflow-wrap: anywhere;
	}
}

/* Wide tables scroll inside their own box on phones, never the page. */
.st-table-wrap,
.st-table-wrap > .wp-block-details {
	min-width: 0;
	max-width: 100%;
}

.st-annotated:has(.st-table-wrap) {
	min-width: 0;
}

.st-table-wrap .wp-block-table,
.st-docs-body .wp-block-table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

@media (max-width: 639px) {
	.st-header {
		padding: 8px 12px;
	}

	.st-header > header.st-bar {
		gap: 8px;
		padding: 6px 6px 6px 12px;
	}

	.st-actions .wp-block-button__link {
		padding: 8px 12px !important;
	}
}

/* Screen reader text inside tables is absolutely positioned: keep it
   inside the table's scroll box so it never widens the page. */
.wp-block-table {
	position: relative;
}

/* WooCommerce show password eye: a 24px minimum target (WCAG 2.5.8). */
.woocommerce .show-password-input {
	min-width: 32px;
	min-height: 32px;
	display: inline-grid;
	place-items: center;
}

/* Header below the WordPress toolbar for logged in users. */
.admin-bar .st-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

@media (max-width: 600px) {
	.admin-bar .st-header {
		top: 0;
	}
}

/* Dropdown caret: centred on the text line. */
.st-header .wp-block-navigation-submenu {
	align-items: center;
}

.st-header .wp-block-navigation .wp-block-navigation-submenu__toggle {
	display: inline-grid;
	place-items: center;
	align-self: center;
	width: 16px;
	height: 20px;
	margin: 0 0 0 -2px;
	padding: 0 !important;
}

.st-header .wp-block-navigation-submenu__toggle svg {
	width: 10px;
	height: 10px;
	margin: 0;
	stroke-width: 2px;
	transition: transform 0.3s var(--st-ease);
}

.st-header .wp-block-navigation-submenu__toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

.st-header .wp-block-navigation .has-child > .wp-block-navigation-item__content {
	padding-right: 6px;
}

/* Picture choice in demo forms: even tiles, icons at one size. */
.st-demo-form .subtleforms-picture-choice__media {
	display: grid;
	place-items: center;
	width: 100%;
	height: 104px;
	background: var(--wp--preset--color--surface);
}

.st-demo-form .subtleforms-picture-choice__media img {
	width: 44px !important;
	height: 44px !important;
	object-fit: contain;
}

/* My account navigation: even rhythm. */
.st-account .woocommerce-MyAccount-navigation ul {
	gap: 2px !important;
}

.st-account .woocommerce-MyAccount-navigation li {
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.25rem;
}

.st-account .woocommerce-MyAccount-navigation li a {
	padding: 10px 14px;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.25rem;
}

.st-account .woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: 8px !important;
	padding-top: 8px !important;
}

/* ------------------------------------------------------------------ */
/* Footer, v2                                                          */
/* ------------------------------------------------------------------ */

.st-footer-grid {
	display: grid;
	grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr));
	gap: 48px 32px;
}

.st-footer-grid > * {
	margin: 0 !important;
}

.st-footer-brand .wp-block-site-title a {
	color: var(--wp--preset--color--white);
	font-weight: 600;
	letter-spacing: -0.02em;
}

.st-footer-pitch {
	max-width: 320px;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.25rem;
}

.st-footer .st-footer-ghost .wp-block-button__link {
	border: 1px solid rgba(255, 255, 255, 0.32) !important;
	background: transparent !important;
	color: var(--wp--preset--color--white) !important;
}

.st-footer .st-footer-ghost .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--white) !important;
}

.st-footer-col {
	gap: 16px !important;
}

.st-footer .st-footer-head {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.25rem;
	font-weight: 600;
	color: var(--wp--preset--color--white);
}

.st-footer-col .wp-block-navigation {
	gap: 12px !important;
}

.st-footer-col .wp-block-navigation-item__content,
.st-footer-legal .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.25rem;
	font-weight: 500;
	color: var(--wp--preset--color--on-black) !important;
	text-decoration: none !important;
	transition: color 0.2s var(--st-ease);
}

.st-footer-col .wp-block-navigation-item__content:hover,
.st-footer-legal .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--white) !important;
}

.st-footer [aria-current="page"] {
	color: var(--wp--preset--color--lime) !important;
}

.st-footer-bottom {
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.st-footer-bottom p {
	margin: 0;
}

@media (max-width: 899px) {
	.st-footer-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.st-footer-brand {
		grid-column: 1 / -1;
	}
}

.st-footer .wp-block-button:not(.st-footer-ghost) .wp-block-button__link {
	color: var(--wp--preset--color--ink) !important;
}

.st-demo-form .subtleforms-picture-choice {
	align-items: stretch;
}

.st-demo-form .subtleforms-picture-choice__option {
	height: 100%;
}

/* ------------------------------------------------------------------ */
/* Typography, v2: crisp rendering, rem line heights, calm weights     */
/* Regular 400 for reading, medium 500 for UI, semibold 600 for        */
/* headings and buttons, bold 700 only for big display numbers.        */
/* ------------------------------------------------------------------ */

html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-optical-sizing: auto;
	font-kerning: normal;
	font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

/* Each size carries its own line height (Tailwind pairs, in rem). */
.has-xs-font-size { line-height: 1rem; }
.has-sm-font-size { line-height: 1.25rem; }
.has-base-font-size { line-height: 1.5rem; }
.has-lg-font-size { line-height: 1.75rem; }
.has-xl-font-size { line-height: 1.75rem; }
.has-2-xl-font-size { line-height: 2rem; }
.has-3-xl-font-size { line-height: 2.25rem; }
.has-4-xl-font-size { line-height: 2.5rem; }
.has-5-xl-font-size { line-height: 3rem; }
.has-6-xl-font-size { line-height: 3.75rem; }
.has-7-xl-font-size { line-height: 4.5rem; }
.has-8-xl-font-size { line-height: 6rem; }

/* Rhythm: space follows the size of what comes next. */
:where(.entry-content, .st-prose, .st-docs-body) > p + p,
:where(.entry-content, .st-prose, .st-docs-body) > p + :is(ul, ol),
:where(.entry-content, .st-prose, .st-docs-body) > :is(ul, ol) + p {
	margin-top: 1rem;
}

:where(.st-prose, .st-docs-body) > :is(h2, h3) + p,
:where(.st-prose, .st-docs-body) > :is(h2, h3) + :is(ul, ol, figure, pre) {
	margin-top: 0.75rem;
}

:where(.st-prose, .st-docs-body) p,
:where(.st-prose, .st-docs-body) li {
	font-size: 1.0625rem;
	line-height: 1.75rem;
	max-width: 42rem;
}

.st-lead {
	font-weight: 400;
}

li::marker {
	color: var(--wp--preset--color--muted);
}

strong,
b {
	font-weight: 600;
}

/* Numbers line up in tables and prices. */
table,
.st-plan-price,
.st-bignum,
.st-flow-num,
.wc-block-components-totals-item__value,
.wc-block-components-product-price {
	font-variant-numeric: tabular-nums;
}

/* UI text: medium. */
.st-header .wp-block-navigation .wp-block-navigation-item__content,
.st-footer-col .wp-block-navigation-item__content,
.st-docs-nav a,
.st-docs-toc a,
.st-account .woocommerce-MyAccount-navigation a,
label,
.st-badge,
.st-anno-note {
	font-weight: 500;
}

.st-header .st-mega-item .wp-block-navigation-item__label,
.st-docs-nav a[aria-current="page"],
.st-account .woocommerce-MyAccount-navigation .is-active a {
	font-weight: 600;
}

/* Text selection: lime on light, indigo on dark. */
::selection {
	background: var(--wp--preset--color--lime);
	color: var(--wp--preset--color--ink);
	text-shadow: none;
}

:is(.has-black-background-color, .has-indigo-background-color, .st-footer) ::selection {
	background: var(--wp--preset--color--lime);
	color: var(--wp--preset--color--black);
}

img::selection,
video::selection {
	background: transparent;
}

/* Focus: one visible ring everywhere. */
:focus-visible {
	outline: 2px solid var(--wp--preset--color--indigo);
	outline-offset: 3px;
}

/* ------------------------------------------------------------------ */
/* Form fields across the site (search, account, checkout, docs)       */
/* ------------------------------------------------------------------ */

:root {
	--st-field-border: #C9C9D6;
	--st-field-border-hover: #9C9CB0;
	--st-field-placeholder: #6B6B84;
	--st-field-ring: rgba(80, 70, 230, 0.22);
}

:where(input:is([type="text"], [type="email"], [type="url"], [type="tel"], [type="number"], [type="password"], [type="search"], [type="date"]), select, textarea) {
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.5rem;
	font-weight: 400;
	color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--st-field-border);
	border-radius: 0.75rem;
	padding: 0.625rem 0.875rem;
	min-height: 2.75rem;
	box-shadow: 0 1px 2px rgba(14, 14, 44, 0.04);
	transition: border-color 0.2s var(--st-ease), box-shadow 0.2s var(--st-ease);
	-webkit-appearance: none;
	appearance: none;
}

:where(textarea) {
	min-height: 7.5rem;
	resize: vertical;
}

:where(select) {
	padding-right: 2.5rem;
	background: var(--wp--preset--color--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%234A4A68' d='M213.66 101.66l-80 80a8 8 0 0 1-11.32 0l-80-80a8 8 0 0 1 11.32-11.32L128 164.69l74.34-74.35a8 8 0 0 1 11.32 11.32z'/%3E%3C/svg%3E") right 0.875rem center / 1rem no-repeat;
}

::placeholder {
	color: var(--st-field-placeholder);
	opacity: 1;
	font-weight: 400;
}

:where(input, select, textarea):hover:not(:focus):not(:disabled) {
	border-color: var(--st-field-border-hover);
}

:where(input, select, textarea):focus {
	outline: none;
	border-color: var(--wp--preset--color--indigo);
	box-shadow: 0 0 0 4px var(--st-field-ring);
}

:where(input, select, textarea):focus-visible {
	outline: none;
}

:where(input, select, textarea)[aria-invalid="true"],
:where(input, select, textarea):user-invalid {
	border-color: var(--wp--preset--color--error);
}

:where(input, select, textarea):disabled {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--muted);
	cursor: not-allowed;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--wp--preset--color--ink);
	-webkit-box-shadow: 0 0 0 62.5rem #F1F0FE inset;
	caret-color: var(--wp--preset--color--ink);
}

:where(input[type="checkbox"], input[type="radio"]) {
	accent-color: var(--wp--preset--color--indigo);
	width: 1.125rem;
	height: 1.125rem;
}

label {
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--wp--preset--color--ink);
}

/* Search block on the 404 page and docs. */
.wp-block-search__inside-wrapper {
	gap: 0.5rem;
}

.wp-block-search__input {
	border-radius: 9999px !important;
	padding-inline: 1.25rem !important;
}

.wp-block-search__button {
	border-radius: 9999px !important;
	padding: 0.625rem 1.25rem !important;
	font-size: 1rem !important;
	line-height: 1.5rem !important;
	font-weight: 600 !important;
	background: var(--wp--preset--color--ink) !important;
	color: var(--wp--preset--color--white) !important;
	border: 0 !important;
}

/* A page title inside a two column section (Contact) aligns with its text. */
.st-section .st-page-title {
	margin-inline: 0;
	text-align: left;
}

@media (min-width: 1024px) {
	.st-section .st-page-title {
		font-size: var(--wp--preset--font-size--5-xl);
		line-height: 3rem;
	}
}

/* Caret button: 24px target (WCAG 2.5.8), the icon stays small. */
.st-header .wp-block-navigation .wp-block-navigation-submenu__toggle {
	width: 1.5rem;
	height: 1.5rem;
	margin-left: -0.375rem;
}

.st-header .wp-block-navigation .wp-block-navigation-submenu__toggle {
	margin-left: 0;
}

.st-header .wp-block-navigation .has-child > .wp-block-navigation-item__content {
	padding-right: 0.125rem !important;
}

/* ------------------------------------------------------------------ */
/* Media frames, v2: no thick bezels. A hairline edge, a soft radius   */
/* and a quiet shadow, so screenshots and videos read as the product.  */
/* ------------------------------------------------------------------ */

.st-product,
.st-product.st-product--video,
.st-shot,
.st-shot.st-shot--sm {
	padding: 0 !important;
	background: transparent !important;
	border-radius: 1rem;
	box-shadow:
		0 0 0 1px rgba(14, 14, 44, 0.08),
		0 1px 2px rgba(14, 14, 44, 0.04),
		0 24px 48px -24px rgba(14, 14, 44, 0.22);
	overflow: hidden;
}

.st-product img,
.st-product video,
.st-shot img,
.st-shot video,
.st-product .wp-block-video,
.st-product .wp-block-image {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 !important;
	border-radius: 0 !important;
}

/* On indigo and black backgrounds the edge turns light. */
:is(.has-indigo-background-color, .has-black-background-color) :is(.st-product, .st-shot),
.st-hero .st-product {
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.14),
		0 32px 64px -24px rgba(14, 14, 44, 0.45);
}

.st-hero .st-product {
	border-radius: 1.25rem;
}

@media (max-width: 639px) {
	.st-product,
	.st-shot {
		border-radius: 0.75rem;
	}
}

/* Screenshot frames hold the hand-drawn notes, so they must not clip:
   round the image instead. */
.st-shot,
.st-shot.st-shot--sm {
	overflow: visible;
}

.st-shot img,
.st-shot video {
	border-radius: 1rem !important;
}

@media (max-width: 639px) {
	.st-shot img,
	.st-shot video {
		border-radius: 0.75rem !important;
	}
}

/* ------------------------------------------------------------------ */
/* Lists, v2                                                           */
/* Bullets: small indigo dots. Numbers: soft circles. Checks: a tinted */
/* circle with a check (Phosphor). All spacing in rem.                 */
/* ------------------------------------------------------------------ */

ul.wp-block-list:not(.st-checks),
ol.wp-block-list {
	list-style: none;
	padding-left: 0;
	margin-block: 0;
	display: grid;
	gap: 0.625rem;
}

ul.wp-block-list:not(.st-checks) > li,
ol.wp-block-list > li {
	position: relative;
	padding-left: 1.5rem;
	margin: 0 !important;
}

/* Bullets. */
ul.wp-block-list:not(.st-checks) > li::before {
	content: "";
	position: absolute;
	left: 0.25rem;
	top: calc(0.875em - 0.1875rem);
	width: 0.375rem;
	height: 0.375rem;
	border-radius: 9999px;
	background: var(--wp--preset--color--indigo);
}

/* Second level: hollow bullets, tighter. */
.wp-block-list .wp-block-list {
	margin-top: 0.5rem;
	gap: 0.375rem;
}

ul.wp-block-list ul.wp-block-list > li::before {
	background: transparent;
	box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--indigo);
}

/* Numbers. */
ol.wp-block-list {
	counter-reset: st-ol;
}

ol.wp-block-list > li {
	counter-increment: st-ol;
	padding-left: 2.25rem;
	min-height: 1.5rem;
}

ol.wp-block-list > li::before {
	content: counter(st-ol);
	position: absolute;
	left: 0;
	top: calc(0.875em - 0.75rem);
	width: 1.5rem;
	height: 1.5rem;
	display: grid;
	place-items: center;
	border-radius: 9999px;
	background: #EEEDFD;
	color: var(--wp--preset--color--indigo);
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* Checklists. */
.st-checks {
	gap: 0.75rem !important;
}

.st-checks li {
	padding-left: 2rem !important;
}

.st-checks li::before {
	top: calc(0.75em - 0.625rem) !important;
	left: 0 !important;
	width: 1.25rem !important;
	height: 1.25rem !important;
	background: #EEEDFD !important;
	box-shadow: none !important;
}

.st-checks li::after {
	content: "";
	position: absolute;
	left: 0.3125rem;
	top: calc(0.75em - 0.3125rem);
	width: 0.625rem;
	height: 0.625rem;
	background: var(--wp--preset--color--indigo);
	-webkit-mask: url("assets/icons/check-bold.svg") center / contain no-repeat;
	mask: url("assets/icons/check-bold.svg") center / contain no-repeat;
}

.st-checks--lg li {
	font-size: 1.0625rem;
	line-height: 1.75rem;
}

.st-checks--lg li::before {
	top: 0.25rem !important;
}

.st-checks--lg li::after {
	top: 0.5625rem;
}

:is(.has-indigo-background-color, .has-black-background-color) .st-checks li::before,
.st-card--rec .st-checks li::before {
	background: rgba(255, 255, 255, 0.14) !important;
}

:is(.has-indigo-background-color, .has-black-background-color) .st-checks li::after,
.st-card--rec .st-checks li::after {
	background: var(--wp--preset--color--lime);
}

/* Lists in reading pages keep the reading size. */
:where(.st-prose, .st-docs-body) :is(ul, ol).wp-block-list > li {
	font-size: 1.0625rem;
	line-height: 1.75rem;
}

.st-docs-body :is(ul, ol).wp-block-list,
.st-prose :is(ul, ol).wp-block-list,
.st-list {
	padding-left: 0 !important;
}

.st-docs-body .wp-block-list li + li,
.st-list li + li {
	margin-top: 0 !important;
}

/* Markers sit on the first line, whatever its line height. */
ul.wp-block-list:not(.st-checks) > li::before { top: calc((1lh - 0.375rem) / 2); }
ol.wp-block-list > li::before { top: calc((1lh - 1.5rem) / 2); }
.st-checks li::before { top: calc((1lh - 1.25rem) / 2) !important; }
.st-checks li::after { top: calc((1lh - 0.625rem) / 2) !important; }

/* Lists keep the space above them that the flow gives. */
ul.wp-block-list:not(.st-checks),
ol.wp-block-list {
	margin-block-start: revert-layer;
	margin-bottom: 0;
}

:where(.st-prose, .st-docs-body, .entry-content) > p + :is(ul, ol).wp-block-list {
	margin-top: 1rem !important;
}

ol.wp-block-list > li::before { top: 0; }
:where(.st-prose, .st-docs-body) ol.wp-block-list > li::before { top: 0.125rem; }

/* ------------------------------------------------------------------ */
/* Migration visual: sources > Migrate screen > report                 */
/* ------------------------------------------------------------------ */

.st-ico-switch { --st-icon: url("assets/icons/arrows-left-right.svg"); }

.st-mig {
	display: grid;
	grid-template-columns: minmax(0, 13rem) 4rem minmax(0, 1.35fr) 4rem minmax(0, 1fr);
	align-items: center;
	gap: 0;
}

.st-mig > * {
	margin: 0 !important;
}

.st-mig p {
	margin: 0;
}

.st-mig-kicker {
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 500;
	color: var(--wp--preset--color--muted);
}

.st-mig-src {
	align-items: center;
	padding: 0.75rem 1rem;
	border-radius: 0.875rem;
	background: var(--wp--preset--color--white);
	box-shadow: 0 0 0 1px rgba(14, 14, 44, 0.08), 0 8px 24px -16px rgba(14, 14, 44, 0.3);
}

.st-mig-src-dot {
	flex: none;
	width: 0.625rem;
	height: 0.625rem;
	border-radius: 9999px;
}

.st-mig-src-dot--cf7 { background: #2271B1; }
.st-mig-src-dot--gf { background: #F15A29; }
.st-mig-src-dot--ff { background: #1A7EFB; }

.st-mig-src-name {
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 500;
	color: var(--wp--preset--color--ink);
}

.st-mig-arrow-wrap {
	display: grid;
	place-items: center;
}

.st-mig-arrow {
	margin: 0;
	width: 3.25rem;
}

.st-mig-arrow img {
	width: 100%;
	height: auto;
}

/* The two cards. */
.st-mig-screen,
.st-mig-report,
.st-mig-offer {
	padding: 1.25rem;
	border-radius: 1.25rem;
	background: var(--wp--preset--color--white);
	box-shadow: 0 0 0 1px rgba(14, 14, 44, 0.08), 0 24px 48px -24px rgba(14, 14, 44, 0.28);
	display: grid;
	gap: 0.75rem;
}

.st-mig-top {
	align-items: center;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid rgba(14, 14, 44, 0.08);
}

.st-mig-crumb {
	font-size: 0.75rem;
	line-height: 1rem;
	color: var(--wp--preset--color--muted);
}

.st-mig-crumb::after {
	content: " \203A";
	margin-left: 0.25rem;
}

.st-mig-tab {
	padding: 0.25rem 0.625rem;
	border-radius: 9999px;
	background: #EEEDFD;
	color: var(--wp--preset--color--indigo);
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 600;
}

.st-mig-desc,
.st-mig-note,
.st-mig-row-meta {
	font-size: 0.8125rem;
	line-height: 1.25rem;
	color: var(--wp--preset--color--muted);
}

.st-mig-h {
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.st-mig-h--lg {
	font-size: 1.125rem;
	line-height: 1.75rem;
}

.st-mig-chips {
	flex-wrap: wrap;
}

.st-mig-chip {
	padding: 0.375rem 0.75rem;
	border-radius: 9999px;
	box-shadow: inset 0 0 0 1px var(--st-field-border);
	font-size: 0.8125rem;
	line-height: 1.25rem;
	font-weight: 500;
	color: var(--wp--preset--color--ink);
}

.st-mig-chip span {
	margin-left: 0.25rem;
	font-size: 0.6875rem;
	color: var(--wp--preset--color--muted);
}

.st-mig-chip--on {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
	box-shadow: none;
}

.st-mig-row {
	align-items: center;
	padding: 0.5rem 0.75rem;
	border-radius: 0.75rem;
	background: var(--wp--preset--color--surface);
}

.st-mig-row--all {
	background: transparent;
	padding-inline: 0.75rem;
}

.st-mig-row-name {
	flex: 1;
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 500;
	color: var(--wp--preset--color--ink);
}

.st-mig-box {
	flex: none;
	width: 1rem;
	height: 1rem;
	border-radius: 0.3125rem;
	box-shadow: inset 0 0 0 1.5px var(--st-field-border);
}

.st-mig-box--on {
	background: var(--wp--preset--color--indigo) url("assets/icons/check-bold.svg") center / 0.625rem no-repeat;
	box-shadow: none;
	-webkit-mask: none;
}

.st-mig-box--on {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='white' d='M232.49 80.49l-128 128a12 12 0 0 1-17 0l-56-56a12 12 0 1 1 17-17L96 183 215.51 63.51a12 12 0 0 1 17 17z'/%3E%3C/svg%3E");
}

.st-mig-actions {
	align-items: center;
	padding-top: 0.25rem;
}

.st-mig-btn {
	padding: 0.5rem 1rem;
	border-radius: 9999px;
	background: var(--wp--preset--color--lime);
	color: var(--wp--preset--color--ink);
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 600;
	white-space: nowrap;
}

.st-mig-ghost {
	padding: 0.5rem 1rem;
	border-radius: 9999px;
	box-shadow: inset 0 0 0 1px var(--st-field-border);
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 500;
}

.st-mig-progress {
	position: relative;
	flex: 1;
	padding-bottom: 0.625rem;
	font-size: 0.75rem;
	line-height: 1rem;
	color: var(--wp--preset--color--muted);
}

.st-mig-progress::before,
.st-mig-progress::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 0.25rem;
	border-radius: 9999px;
}

.st-mig-progress::before {
	right: 0;
	background: var(--wp--preset--color--surface);
}

.st-mig-progress::after {
	width: 66%;
	background: var(--wp--preset--color--indigo);
}

/* Report. */
.st-mig-result-head {
	align-items: center;
}

.st-mig-draft {
	padding: 0.125rem 0.5rem;
	border-radius: 9999px;
	background: var(--wp--preset--color--surface);
	font-size: 0.6875rem;
	line-height: 1rem;
	font-weight: 600;
	color: var(--wp--preset--color--muted);
}

.st-mig-item {
	padding: 0.625rem 0.75rem;
	border-radius: 0.75rem;
	background: var(--wp--preset--color--surface);
}

.st-mig-tag {
	align-self: flex-start;
	padding: 0.125rem 0.5rem;
	border-radius: 9999px;
	font-size: 0.6875rem;
	line-height: 1rem;
	font-weight: 600;
}

.st-mig-tag--changed { background: #EEEDFD; color: var(--wp--preset--color--indigo); }
.st-mig-tag--skip { background: #FDECE4; color: #B23C00; }
.st-mig-tag--info { background: #E6F4EE; color: var(--wp--preset--color--success); }

.st-mig-caption {
	margin-top: 1.5rem !important;
}

.st-mig-col ul {
	margin-top: 0 !important;
}

/* Things you set up again: a short dash, not a bullet. */
ul.st-minus > li::before {
	width: 0.5rem !important;
	height: 2px !important;
	border-radius: 2px !important;
	background: var(--wp--preset--color--muted) !important;
	left: 0.125rem !important;
	top: calc((1lh - 2px) / 2) !important;
}

.st-step-card {
	padding: 1.5rem;
	border-radius: 1.25rem;
	background: var(--wp--preset--color--white);
	box-shadow: 0 0 0 1px rgba(14, 14, 44, 0.08);
}

.st-step-num {
	width: 2.5rem;
	height: 2.5rem;
	display: grid;
	place-items: center;
	border-radius: 9999px;
	background: var(--wp--preset--color--indigo);
	color: var(--wp--preset--color--white);
	font-size: 1rem;
	line-height: 1.5rem;
	font-weight: 700;
}

@media (max-width: 1023px) {
	.st-mig {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.75rem;
		max-width: 36rem;
		margin-inline: auto;
	}

	.st-mig-sources {
		display: grid !important;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.st-mig-kicker {
		grid-column: 1 / -1;
	}

	.st-mig-arrow {
		transform: rotate(90deg);
		width: 2.5rem;
	}
}

@media (max-width: 479px) {
	.st-mig-sources {
		grid-template-columns: minmax(0, 1fr);
	}
}

.st-mig-arrow {
	width: 3.75rem;
	opacity: 0.85;
}

/* ------------------------------------------------------------------ */
/* Heading line heights, v3: a little more air for display sizes.      */
/* ------------------------------------------------------------------ */

h1, h2, h3, h4,
.has-5-xl-font-size,
.has-6-xl-font-size,
.has-7-xl-font-size,
.has-8-xl-font-size {
	text-wrap: balance;
}

:is(h1, h2, h3, h4, h5, h6).has-8-xl-font-size, .has-8-xl-font-size { line-height: 6.5rem; }
:is(h1, h2, h3, h4, h5, h6).has-7-xl-font-size, .has-7-xl-font-size { line-height: 5rem; }
:is(h1, h2, h3, h4, h5, h6).has-6-xl-font-size, .has-6-xl-font-size { line-height: 4.25rem; }
:is(h1, h2, h3, h4, h5, h6).has-5-xl-font-size, .has-5-xl-font-size { line-height: 3.5rem; }
:is(h1, h2, h3, h4, h5, h6).has-4-xl-font-size, .has-4-xl-font-size { line-height: 2.75rem; }
:is(h1, h2, h3, h4, h5, h6).has-3-xl-font-size, .has-3-xl-font-size { line-height: 2.375rem; }

h1 { line-height: 4.25rem; }
h2 { line-height: 3.5rem; }
h3 { line-height: 2.375rem; }

.st-hero h1 { line-height: 2.75rem; }
.st-page-hero .st-page-title,
.st-section .st-page-title { line-height: 2.75rem; }
.st-shop-title,
.st-docs-title,
.st-404 h1 { line-height: 3.5rem; }

@media (min-width: 640px) {
	.st-hero h1 { line-height: 4.25rem; }
}

@media (min-width: 1024px) {
	.st-hero h1 { line-height: 5rem; }
	.st-page-hero .st-page-title { line-height: 4.25rem; }
	.st-section .st-page-title { line-height: 3.5rem; }
}

@media (max-width: 999px) {
	.st-docs-title,
	.st-shop-title { line-height: 2.75rem; }
}

/* Section headings set in CSS (5xl on desktop). */
.st-section h2.wp-block-heading:not([class*="font-size"]) {
	line-height: 3.5rem;
}

@media (max-width: 767px) {
	h1 { line-height: 2.75rem; }
	h2, .st-section h2.wp-block-heading:not([class*="font-size"]) { line-height: 2.5rem; }
}

/* ------------------------------------------------------------------ */
/* Header: the hover and focus highlight covers label and caret.       */
/* ------------------------------------------------------------------ */

@media (min-width: 1024px) {
	.st-header .st-mainnav .wp-block-navigation__container > .has-child {
		border-radius: 9999px;
		padding-right: 0.375rem;
		transition: background-color 0.2s var(--st-ease);
	}

	.st-header .st-mainnav .wp-block-navigation__container > .has-child:is(:hover, :focus-within) {
		background: rgba(14, 14, 44, 0.06);
	}

	.st-header .st-mainnav .wp-block-navigation__container > .has-child > .wp-block-navigation-item__content,
	.st-header .st-mainnav .wp-block-navigation__container > .has-child > .wp-block-navigation-item__content:hover {
		background: transparent !important;
	}

	.st-header .st-mainnav .wp-block-navigation__container > .has-child > .wp-block-navigation-item__content:focus-visible {
		outline: none;
	}

	.st-header .st-mainnav .wp-block-navigation__container > .has-child:has(> .wp-block-navigation-item__content:focus-visible) {
		outline: 2px solid var(--wp--preset--color--indigo);
		outline-offset: 2px;
	}

	.st-header .st-accountnav .has-child {
		border-radius: 9999px;
		padding-right: 0.375rem;
		transition: background-color 0.2s var(--st-ease);
	}

	.st-header .st-accountnav .has-child:is(:hover, :focus-within) {
		background: rgba(14, 14, 44, 0.06);
	}

	.st-header .st-accountnav .has-child > .wp-block-navigation-item__content {
		background: transparent !important;
	}
}

/* Integrations section. */
.st-int-card {
	padding: 1.5rem;
	border-radius: 1.25rem;
	background: var(--wp--preset--color--white);
	box-shadow: 0 0 0 1px rgba(14, 14, 44, 0.08), 0 16px 32px -24px rgba(14, 14, 44, 0.3);
	height: 100%;
}

.has-white-background-color .st-int-card {
	background: var(--wp--preset--color--surface);
	box-shadow: none;
}

.st-int-head {
	align-items: center;
	justify-content: space-between;
}

.st-int-head h3 {
	margin: 0;
}

.st-int-count {
	min-width: 2rem;
	height: 2rem;
	display: grid;
	place-items: center;
	padding: 0 0.5rem;
	border-radius: 9999px;
	background: var(--wp--preset--color--indigo);
	color: var(--wp--preset--color--white);
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.st-int-pills {
	flex-wrap: wrap;
}

.st-int-pill {
	margin: 0;
	padding: 0.25rem 0.75rem;
	border-radius: 9999px;
	background: var(--wp--preset--color--white);
	box-shadow: inset 0 0 0 1px rgba(14, 14, 44, 0.1);
	font-size: 0.8125rem;
	line-height: 1.25rem;
	font-weight: 500;
	color: var(--wp--preset--color--ink);
}

.st-int-plan {
	margin-top: auto !important;
	padding-top: 0.75rem;
	border-top: 1px solid rgba(14, 14, 44, 0.08);
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 500;
	color: var(--wp--preset--color--muted);
}

/* Migration visual with the real screenshots. */
.st-mig {
	grid-template-columns: minmax(0, 12rem) 3.5rem minmax(0, 1.45fr) 3.5rem minmax(0, 1.25fr);
}

.st-mig-shot {
	align-self: center;
}

/* Migration visual, v3: sources in a row on top, then the two real
   screens large enough to read. */
@media (min-width: 1024px) {
	.st-mig {
		grid-template-columns: minmax(0, 1fr) 3.5rem minmax(0, 1fr);
		row-gap: 0.5rem;
	}

	.st-mig-sources {
		grid-column: 1 / -1;
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		gap: 0.75rem !important;
	}

	.st-mig-sources .st-mig-kicker {
		width: 100%;
		text-align: center;
	}

	.st-mig > :nth-child(1),
	.st-mig > :nth-child(2) {
		grid-column: 1 / -1;
	}

	.st-mig > :nth-child(3) { grid-column: 1; grid-row: 3; }
	.st-mig > :nth-child(4) { grid-column: 2; grid-row: 3; }
	.st-mig > :nth-child(5) { grid-column: 3; grid-row: 3; }

	.st-mig > :nth-child(2) .st-mig-arrow {
		transform: rotate(90deg);
		width: 3rem;
	}
}

.st-mig-src-dot--wpf { background: #E27730; }
.st-mig-src-dot--nf { background: #EF4748; }

/* Field types as child rows of the plan table. */
.st-more--fields {
	margin-top: 0.75rem !important;
}

.st-table--fields-plan thead {
	display: none;
}

.st-table--fields-plan tbody th {
	padding-left: 2rem !important;
	font-weight: 400 !important;
}

.st-table--fields-plan tbody th a {
	color: var(--wp--preset--color--ink);
	text-decoration: underline;
	text-decoration-color: rgba(14, 14, 44, 0.25);
	text-underline-offset: 0.1875rem;
}

.st-table--fields-plan tbody th a:hover {
	color: var(--wp--preset--color--indigo);
	text-decoration-color: currentColor;
}

.st-table--fields-plan tbody tr:has(.st-field-cat) th {
	padding-left: 1rem !important;
	background: var(--wp--preset--color--surface);
}

.st-field-cat {
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 600;
	color: var(--wp--preset--color--muted);
}

.st-table--fields-plan tbody tr:has(.st-field-cat) td {
	background: var(--wp--preset--color--surface);
}

.st-table--fields-plan tbody th,
.st-table--plans tbody th {
	width: 40%;
}

.st-field-shot {
	margin-block: 1.5rem !important;
}

.st-table--mini td,
.st-table--mini th {
	text-align: center;
}

/* Plan table and its field rows share exact column widths. */
.st-table--plans table {
	table-layout: fixed;
	width: 100%;
}

.st-table--plans :is(thead th, tbody th):first-child {
	width: 40%;
}

.st-more--fields,
.st-more--fields[open] {
	padding: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

.st-more--fields > summary {
	margin-inline: auto;
}

.st-more--fields .wp-block-table {
	margin: 0.75rem 0 0 !important;
	width: 100%;
}

/* Plan table: the two rows people decide on, Sites and Price per year. */
.st-table--plans:not(.st-table--fields-plan) tbody tr:first-child :is(th, td),
.st-table--plans:not(.st-table--fields-plan) tbody tr:last-child :is(th, td) {
	vertical-align: middle;
}

/* Sites. */
.st-table--plans:not(.st-table--fields-plan) tbody tr:first-child td {
	font-size: 1.25rem;
	line-height: 1.75rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	font-variant-numeric: tabular-nums;
}

.st-table--plans:not(.st-table--fields-plan) tbody tr:first-child th {
	font-size: 1rem;
	line-height: 1.5rem;
	font-weight: 600;
}

/* Price per year. */
.st-table--plans:not(.st-table--fields-plan) tbody tr:last-child :is(th, td) {
	padding-block: 1.5rem !important;
	background: var(--wp--preset--color--surface);
	border-top: 2px solid var(--wp--preset--color--ink);
}

.st-table--plans:not(.st-table--fields-plan) tbody tr:last-child th {
	font-size: 1.125rem;
	line-height: 1.75rem;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}

.st-table--plans:not(.st-table--fields-plan) tbody tr:last-child td {
	font-size: 2.25rem;
	line-height: 2.5rem;
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--ink);
	font-variant-numeric: tabular-nums;
}

/* The recommended column keeps its tint, a shade stronger on the price. */
.st-table--plans:not(.st-table--fields-plan) tbody tr:last-child td:nth-child(4) {
	background: var(--wp--preset--color--indigo);
	color: var(--wp--preset--color--white);
}

@media (max-width: 639px) {
	.st-table--plans:not(.st-table--fields-plan) tbody tr:last-child td {
		font-size: 1.5rem;
		line-height: 2rem;
	}
}

/* ------------------------------------------------------------------ */
/* Account tables (orders, downloads): calm rows, status pills, small  */
/* outline buttons.                                                    */
/* ------------------------------------------------------------------ */

.st-account table.shop_table {
	border: 1px solid rgba(14, 14, 44, 0.1) !important;
	border-radius: 1rem !important;
	border-collapse: separate !important;
	border-spacing: 0;
	overflow: hidden;
	background: var(--wp--preset--color--white);
	margin: 0 !important;
}

.st-account table.shop_table thead th {
	padding: 0.75rem 1rem !important;
	background: var(--wp--preset--color--surface) !important;
	border-bottom: 1px solid rgba(14, 14, 44, 0.08) !important;
	font-size: 0.75rem !important;
	line-height: 1rem !important;
	font-weight: 600 !important;
	color: var(--wp--preset--color--muted) !important;
	text-align: left;
	white-space: nowrap;
}

.st-account table.shop_table tbody :is(th, td) {
	padding: 1rem !important;
	border-top: 0 !important;
	border-bottom: 1px solid rgba(14, 14, 44, 0.06) !important;
	font-size: 0.875rem !important;
	line-height: 1.25rem !important;
	font-weight: 400;
	color: var(--wp--preset--color--muted);
	vertical-align: middle !important;
	background: transparent;
}

.st-account table.shop_table tbody tr:last-child :is(th, td) {
	border-bottom: 0 !important;
}

.st-account table.shop_table tbody tr {
	transition: background-color 0.2s var(--st-ease);
}

.st-account table.shop_table tbody tr:hover {
	background: #FAFAFC;
}

/* Order number: the row's name. */
.st-account .woocommerce-orders-table__cell-order-number a {
	color: var(--wp--preset--color--ink) !important;
	font-weight: 600;
	text-decoration: none;
	font-variant-numeric: tabular-nums;
}

.st-account .woocommerce-orders-table__cell-order-number a:hover {
	color: var(--wp--preset--color--indigo) !important;
	text-decoration: underline;
}

.st-account .woocommerce-orders-table__cell-order-total {
	font-variant-numeric: tabular-nums;
}

.st-account .woocommerce-orders-table__cell-order-total .amount {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

/* Status as a pill with a dot. */
.st-account .woocommerce-orders-table__cell-order-status {
	white-space: nowrap;
}

.st-account .woocommerce-orders-table__cell-order-status::before {
	content: "";
	display: inline-block;
	width: 0.5rem;
	height: 0.5rem;
	margin-right: 0.5rem;
	border-radius: 9999px;
	background: var(--st-status, var(--wp--preset--color--muted));
	vertical-align: 0.0625rem;
}

.st-account .woocommerce-orders-table__row--status-completed { --st-status: var(--wp--preset--color--success); }
.st-account .woocommerce-orders-table__row--status-processing { --st-status: var(--wp--preset--color--indigo); }
.st-account .woocommerce-orders-table__row--status-on-hold,
.st-account .woocommerce-orders-table__row--status-pending { --st-status: #B45309; }
.st-account .woocommerce-orders-table__row--status-failed { --st-status: var(--wp--preset--color--error); }
.st-account .woocommerce-orders-table__row--status-cancelled,
.st-account .woocommerce-orders-table__row--status-refunded { --st-status: #9A9AB0; }

.st-account .woocommerce-orders-table__cell-order-status {
	color: var(--wp--preset--color--ink) !important;
	font-weight: 500 !important;
}

/* Actions: small outline pills, aligned right. */
.st-account .woocommerce-orders-table__header-order-actions,
.st-account .woocommerce-orders-table__cell-order-actions {
	text-align: right !important;
}

.st-account .woocommerce-orders-table__header-order-actions span {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
}

.st-account table.shop_table :is(.button, a.button, .woocommerce-button) {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: auto !important;
	min-height: 2.25rem !important;
	margin: 0 0 0 0.375rem !important;
	padding: 0.375rem 1rem !important;
	border-radius: 9999px !important;
	background: transparent !important;
	box-shadow: inset 0 0 0 1px var(--st-field-border) !important;
	color: var(--wp--preset--color--ink) !important;
	font-size: 0.8125rem !important;
	line-height: 1.25rem !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	transition: box-shadow 0.2s var(--st-ease), background-color 0.2s var(--st-ease) !important;
}

.st-account table.shop_table :is(.button, a.button, .woocommerce-button):hover {
	background: var(--wp--preset--color--surface) !important;
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--ink) !important;
	transform: none !important;
}

.st-account table.shop_table :is(.pay, .button.pay) {
	background: var(--wp--preset--color--lime) !important;
	box-shadow: none !important;
}

/* Pagination under the table. */
.st-account .woocommerce-pagination {
	display: flex;
	justify-content: space-between;
	margin-top: 1rem;
}

/* Phones: each order becomes a card. */
@media (max-width: 767px) {
	.st-account table.shop_table_responsive thead {
		display: none;
	}

	.st-account table.shop_table_responsive,
	.st-account table.shop_table_responsive tbody,
	.st-account table.shop_table_responsive tr {
		display: block;
		width: 100%;
	}

	.st-account table.shop_table_responsive tr {
		padding: 0.75rem 0;
		border-bottom: 1px solid rgba(14, 14, 44, 0.08);
	}

	.st-account table.shop_table_responsive tbody :is(th, td) {
		display: flex !important;
		justify-content: space-between;
		align-items: center;
		padding: 0.375rem 1rem !important;
		border: 0 !important;
		text-align: right !important;
	}

	.st-account table.shop_table_responsive tbody :is(th, td)::before {
		content: attr(data-title);
		float: none !important;
		margin-right: 1rem;
		font-size: 0.75rem;
		line-height: 1rem;
		font-weight: 600;
		color: var(--wp--preset--color--muted);
		background: none;
		width: auto;
		height: auto;
		border-radius: 0;
	}

	.st-account .woocommerce-orders-table__cell-order-status::before {
		content: attr(data-title);
	}
}

/* ------------------------------------------------------------------ */
/* WooCommerce notices (block and classic): one calm, tinted style     */
/* ------------------------------------------------------------------ */

:root {
	--st-info-bg: #F1F0FE;   --st-info-line: #D9D6FB;   --st-info-ink: var(--wp--preset--color--indigo);
	--st-ok-bg: #ECF7F1;     --st-ok-line: #C6E6D4;     --st-ok-ink: var(--wp--preset--color--success);
	--st-warn-bg: #FFF6E8;   --st-warn-line: #F6DDB0;   --st-warn-ink: #B45309;
	--st-err-bg: #FDF0F0;    --st-err-line: #F4CACA;    --st-err-ink: var(--wp--preset--color--error);
}

.wc-block-components-notice-banner,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice {
	--n-bg: var(--st-info-bg);
	--n-line: var(--st-info-line);
	--n-ink: var(--st-info-ink);
	display: flex !important;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1.5rem !important;
	padding: 0.875rem 1rem 0.875rem 1rem !important;
	border: 1px solid var(--n-line) !important;
	border-radius: 1rem !important;
	background: var(--n-bg) !important;
	color: var(--wp--preset--color--ink) !important;
	font-size: 0.9375rem !important;
	line-height: 1.5rem !important;
	box-shadow: none !important;
	list-style: none;
}

.wc-block-components-notice-banner.is-success,
.woocommerce-message {
	--n-bg: var(--st-ok-bg); --n-line: var(--st-ok-line); --n-ink: var(--st-ok-ink);
}

.wc-block-components-notice-banner.is-warning {
	--n-bg: var(--st-warn-bg); --n-line: var(--st-warn-line); --n-ink: var(--st-warn-ink);
}

.wc-block-components-notice-banner.is-error,
.woocommerce-error {
	--n-bg: var(--st-err-bg); --n-line: var(--st-err-line); --n-ink: var(--st-err-ink);
}

/* Icon: the block's own SVG on a small tinted disc. */
.wc-block-components-notice-banner > svg {
	flex: none;
	width: 1.75rem !important;
	height: 1.75rem !important;
	padding: 0.25rem;
	border-radius: 9999px;
	background: var(--wp--preset--color--white) !important;
	fill: var(--n-ink) !important;
	align-self: center;
}

/* Classic notices get the same disc, drawn in CSS. */
:is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before {
	content: "" !important;
	position: static !important;
	flex: none;
	width: 0.625rem;
	height: 0.625rem;
	margin: 0 0.25rem;
	border-radius: 9999px;
	background: var(--n-ink);
	box-shadow: 0 0 0 0.375rem var(--wp--preset--color--white);
}

.wc-block-components-notice-banner__content {
	flex: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	color: var(--wp--preset--color--ink);
}

.wc-block-components-notice-banner a,
:is(.woocommerce-message, .woocommerce-info, .woocommerce-error) a:not(.button) {
	color: var(--n-ink) !important;
	font-weight: 600;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.1875rem;
}

/* Action links inside a notice become small pills on the right. */
.wc-block-components-notice-banner .wc-forward,
.wc-block-components-notice-banner__content > a:last-child,
:is(.woocommerce-message, .woocommerce-info, .woocommerce-error) .button {
	order: 2;
	margin-left: auto !important;
	padding: 0.375rem 0.875rem !important;
	border-radius: 9999px !important;
	background: var(--wp--preset--color--white) !important;
	box-shadow: inset 0 0 0 1px var(--n-line) !important;
	color: var(--n-ink) !important;
	font-size: 0.8125rem !important;
	line-height: 1.25rem !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	white-space: nowrap;
	float: none !important;
}

.wc-block-components-notice-banner .wc-forward:hover,
.wc-block-components-notice-banner__content > a:last-child:hover {
	box-shadow: inset 0 0 0 1px var(--n-ink) !important;
}

.wc-block-components-notice-banner__dismiss {
	flex: none;
	opacity: 0.6;
}

.woocommerce-error li {
	margin: 0;
}

.wc-block-components-notice-banner .wc-block-components-notice-banner__content a.button.wc-forward,
.woocommerce-notices-wrapper :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) a.button {
	display: inline-flex !important;
	align-items: center;
	min-height: 2rem !important;
	height: auto !important;
	margin: 0 0 0 auto !important;
	padding: 0.3125rem 0.875rem !important;
	border: 0 !important;
	border-radius: 9999px !important;
	background: var(--wp--preset--color--white) !important;
	box-shadow: inset 0 0 0 1px var(--n-line) !important;
	color: var(--n-ink) !important;
	font-size: 0.8125rem !important;
	line-height: 1.25rem !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	opacity: 1 !important;
}

.wc-block-components-notice-banner .wc-block-components-notice-banner__content a.button.wc-forward:hover {
	box-shadow: inset 0 0 0 1px var(--n-ink) !important;
}

.st-account table.shop_table :is(.button, a.button, .woocommerce-button) {
	min-width: 4.5rem;
}

/* Notice buttons use the theme's button: lime pill, ink text, semibold. */
.wc-block-components-notice-banner .wc-block-components-notice-banner__content a.button.wc-forward,
.wc-block-components-notice-banner .wc-block-components-notice-banner__content a.wc-forward,
.wc-block-components-notice-banner .wc-block-components-notice-banner__content .button,
:is(.woocommerce-message, .woocommerce-info, .woocommerce-error) a.button,
:is(.woocommerce-message, .woocommerce-info, .woocommerce-error) .button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	min-height: 2.25rem !important;
	margin: 0 0 0 auto !important;
	padding: 0.5rem 1rem !important;
	border: 0 !important;
	border-radius: 9999px !important;
	background: var(--wp--preset--color--lime) !important;
	box-shadow: none !important;
	color: var(--wp--preset--color--ink) !important;
	font-family: inherit !important;
	font-size: 0.875rem !important;
	line-height: 1.25rem !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	text-decoration: none !important;
	text-transform: none !important;
	white-space: nowrap;
	float: none !important;
	order: 2;
	transition: background-color 0.2s var(--st-ease), transform 0.2s var(--st-ease) !important;
}

.wc-block-components-notice-banner .wc-block-components-notice-banner__content :is(a.wc-forward, .button)::after,
:is(.woocommerce-message, .woocommerce-info, .woocommerce-error) .button::after {
	content: "\2192";
	font-weight: 600;
	transition: transform 0.2s var(--st-ease);
}

.wc-block-components-notice-banner .wc-block-components-notice-banner__content :is(a.wc-forward, .button):hover,
:is(.woocommerce-message, .woocommerce-info, .woocommerce-error) .button:hover {
	background: var(--wp--preset--color--lime-hover) !important;
	box-shadow: none !important;
	color: var(--wp--preset--color--ink) !important;
}

.wc-block-components-notice-banner .wc-block-components-notice-banner__content :is(a.wc-forward, .button):hover::after,
:is(.woocommerce-message, .woocommerce-info, .woocommerce-error) .button:hover::after {
	transform: translateX(0.125rem);
}

.wc-block-components-notice-banner .wc-block-components-notice-banner__content :is(a.wc-forward, .button):active,
:is(.woocommerce-message, .woocommerce-info, .woocommerce-error) .button:active {
	transform: scale(0.98);
}

.wc-block-components-notice-banner .wc-block-components-notice-banner__content :is(a.wc-forward, .button):focus-visible,
:is(.woocommerce-message, .woocommerce-info, .woocommerce-error) .button:focus-visible {
	outline: 2px solid var(--wp--preset--color--indigo) !important;
	outline-offset: 2px !important;
}

/* Dismiss button: a quiet round icon button. */
.wc-block-components-notice-banner__dismiss {
	width: 2rem !important;
	height: 2rem !important;
	display: inline-grid !important;
	place-items: center;
	padding: 0 !important;
	border-radius: 9999px !important;
	background: transparent !important;
	box-shadow: none !important;
	min-height: 0 !important;
	opacity: 1 !important;
	color: var(--wp--preset--color--muted) !important;
}

.wc-block-components-notice-banner__dismiss:hover {
	background: rgba(14, 14, 44, 0.06) !important;
	color: var(--wp--preset--color--ink) !important;
}

.wc-block-components-notice-banner__dismiss svg {
	width: 1rem !important;
	height: 1rem !important;
	fill: currentColor !important;
}

@media (max-width: 639px) {
	.wc-block-components-notice-banner__content {
		flex-direction: column;
		align-items: flex-start !important;
	}

	.wc-block-components-notice-banner .wc-block-components-notice-banner__content :is(a.wc-forward, .button),
	:is(.woocommerce-message, .woocommerce-info, .woocommerce-error) .button {
		margin: 0.25rem 0 0 !important;
	}
}

/* WooCommerce moves focus to a new notice for screen readers. A notice is
   not a control, so it shows no focus ring; its button still does. */
.wc-block-components-notice-banner:focus,
.wc-block-components-notice-banner:focus-visible,
:is(.woocommerce-message, .woocommerce-info, .woocommerce-error):focus,
:is(.woocommerce-message, .woocommerce-info, .woocommerce-error):focus-visible {
	outline: none !important;
	box-shadow: none !important;
}

/* The caret never has its own background: the item's pill covers both. */
.st-header .wp-block-navigation .wp-block-navigation-submenu__toggle,
.st-header .wp-block-navigation .wp-block-navigation-submenu__toggle:hover,
.st-header .wp-block-navigation .wp-block-navigation-submenu__toggle:focus,
.st-header .wp-block-navigation .wp-block-navigation-submenu__toggle[aria-expanded="true"] {
	background: transparent !important;
	box-shadow: none !important;
	border-radius: 9999px;
}

/* A parent item whose child page is open: an ink pill, like the current
   page, but outlined so it reads as "you are in this section". */
@media (min-width: 1024px) {
	.st-header .st-mainnav .wp-block-navigation__container > .has-child.st-current-section {
		background: transparent;
		box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--ink);
	}

	.st-header .st-mainnav .wp-block-navigation__container > .has-child.st-current-section > .wp-block-navigation-item__content {
		font-weight: 600;
	}

	.st-header .st-mainnav .wp-block-navigation__container > .has-child.st-current-section:is(:hover, :focus-within) {
		background: rgba(14, 14, 44, 0.06);
	}
}

/* Inside the dropdown, the open page is marked too. */
.st-header .st-mega .st-mega-item > a[aria-current="page"] {
	background: var(--wp--preset--color--surface) !important;
}

.st-header .st-mega .st-mega-item > a[aria-current="page"] .wp-block-navigation-item__label::after {
	content: "";
	display: inline-block;
	width: 0.375rem;
	height: 0.375rem;
	margin-left: 0.5rem;
	border-radius: 9999px;
	background: var(--wp--preset--color--indigo);
	vertical-align: 0.125rem;
}

/* Mobile menu: the section label of the open page turns indigo. */
.st-header .is-menu-open .has-child.st-current-section > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--indigo) !important;
}

/* ------------------------------------------------------------------ */
/* Header: account link on its own page stays readable.                */
/* ------------------------------------------------------------------ */

.st-header .st-accountnav [aria-current="page"] {
	background: transparent !important;
	color: var(--wp--preset--color--ink) !important;
	box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--ink);
}

/* ------------------------------------------------------------------ */
/* Sign in, lost password, reset password (signed out My account)      */
/* ------------------------------------------------------------------ */

.st-auth-page .st-account-main > .st-shop-title,
.st-auth-page .st-account > .woocommerce > h2,
.st-auth-page .woocommerce-ResetPassword > p:first-of-type:not(.form-row) {
	display: none !important;
}

.st-auth-page .site-shell > main.st-shop-main {
	padding-top: calc(var(--st-header-h) + 32px) !important;
	padding-bottom: 64px !important;
}

.st-auth-page .st-account > .woocommerce {
	display: block !important;
	max-width: 1080px;
	margin-inline: auto;
}

.st-auth {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 0;
	border-radius: 2rem;
	background: var(--wp--preset--color--white);
	box-shadow: 0 0 0 1px rgba(14, 14, 44, 0.08), 0 32px 64px -32px rgba(14, 14, 44, 0.3);
	overflow: hidden;
}

.st-auth-card {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 3rem;
}

.st-auth-logo {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	align-self: flex-start;
	margin-bottom: 1rem;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	font-size: 1.125rem;
	line-height: 1.75rem;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.st-auth-logo img {
	width: 2rem;
	height: 2rem;
}

.st-auth-title {
	margin: 0 !important;
	font-size: var(--wp--preset--font-size--4-xl);
	line-height: 2.75rem !important;
	font-weight: 600;
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--ink);
}

.st-auth-lead {
	margin: 0 0 0.5rem !important;
	font-size: 1rem;
	line-height: 1.5rem;
	color: var(--wp--preset--color--muted);
}

/* The WooCommerce form inside the card. */
.st-auth-card form {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	display: grid;
	gap: 1rem;
}

.st-auth-card form .form-row {
	margin: 0 !important;
	padding: 0 !important;
	width: 100% !important;
	float: none !important;
	display: grid;
	gap: 0.375rem;
}

.st-auth-card form label {
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 500;
	color: var(--wp--preset--color--ink);
}

.st-auth-card form .required {
	color: var(--wp--preset--color--error);
	text-decoration: none;
}

.st-auth-card form input.input-text {
	width: 100%;
	min-height: 3rem;
}

.st-auth-card .password-input {
	display: block;
	position: relative;
}

.st-auth-card .show-password-input {
	position: absolute;
	right: 0.5rem;
	top: 50%;
	transform: translateY(-50%);
	background-color: transparent !important;
	border-radius: 9999px !important;
}

/* Remember me and the button on one row, the button full width below on phones. */
.st-auth-card .woocommerce-form-login .form-row:has(.woocommerce-form-login__submit) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 0.25rem !important;
}

.st-auth-card .woocommerce-form-login__rememberme {
	display: inline-flex !important;
	align-items: center;
	gap: 0.5rem;
	margin: 0 !important;
	font-weight: 400 !important;
	color: var(--wp--preset--color--muted) !important;
}

.st-auth-card :is(.woocommerce-form-login__submit, .woocommerce-Button, button[type="submit"]) {
	order: 2;
	width: 100%;
	min-height: 3rem !important;
	padding: 0.75rem 1.25rem !important;
	border: 0 !important;
	border-radius: 9999px !important;
	background: var(--wp--preset--color--lime) !important;
	color: var(--wp--preset--color--ink) !important;
	font-size: 1rem !important;
	line-height: 1.5rem !important;
	font-weight: 600 !important;
	cursor: pointer;
	transition: background-color 0.2s var(--st-ease), transform 0.2s var(--st-ease) !important;
}

.st-auth-card :is(.woocommerce-form-login__submit, .woocommerce-Button, button[type="submit"]):hover {
	background: var(--wp--preset--color--lime-hover) !important;
	transform: none !important;
}

.st-auth-card :is(.woocommerce-form-login__submit, .woocommerce-Button, button[type="submit"]):active {
	transform: scale(0.98) !important;
}

.st-auth-card .woocommerce-LostPassword,
.st-auth-card .lost_password {
	margin: 0 !important;
	font-size: 0.875rem;
	line-height: 1.25rem;
}

.st-auth-card a {
	color: var(--wp--preset--color--indigo);
	font-weight: 500;
	text-underline-offset: 0.1875rem;
	text-decoration-thickness: 1px;
}

.st-auth-foot {
	margin: 0.5rem 0 0 !important;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(14, 14, 44, 0.08);
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--wp--preset--color--muted);
}

/* The panel. */
.st-auth-aside {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	padding: 3rem;
	background: var(--wp--preset--color--indigo);
	color: var(--wp--preset--color--white);
	isolation: isolate;
}

.st-auth-aside::after {
	content: "";
	position: absolute;
	right: 2rem;
	top: 2rem;
	width: 3rem;
	height: 3rem;
	background: url("assets/vectors/sparkle.svg") center / contain no-repeat;
	opacity: 0.9;
	z-index: -1;
}

.st-auth-aside-title {
	margin: 0;
	max-width: 22rem;
	font-size: var(--wp--preset--font-size--2-xl);
	line-height: 2rem;
	font-weight: 600;
	letter-spacing: -0.02em;
}

.st-auth-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.75rem;
}

.st-auth-list li {
	position: relative;
	padding-left: 2rem;
	font-size: 0.9375rem;
	line-height: 1.5rem;
	color: var(--wp--preset--color--on-indigo);
}

.st-auth-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.125rem;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 9999px;
	background: rgba(255, 255, 255, 0.14);
}

.st-auth-list li::after {
	content: "";
	position: absolute;
	left: 0.3125rem;
	top: 0.4375rem;
	width: 0.625rem;
	height: 0.625rem;
	background: var(--wp--preset--color--lime);
	-webkit-mask: url("assets/icons/check-bold.svg") center / contain no-repeat;
	mask: url("assets/icons/check-bold.svg") center / contain no-repeat;
}

/* License preview card. */
.st-auth-license {
	margin-top: auto;
	padding: 1.25rem;
	border-radius: 1.25rem;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	box-shadow: 0 24px 48px -16px rgba(14, 14, 44, 0.45);
	display: grid;
	gap: 0.875rem;
	transform: rotate(-1.5deg);
}

.st-auth-license-top {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.st-auth-plan {
	font-size: 1rem;
	line-height: 1.5rem;
	font-weight: 600;
}

.st-auth-pill {
	padding: 0.125rem 0.5rem;
	border-radius: 9999px;
	background: #ECF7F1;
	color: var(--wp--preset--color--success);
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 600;
}

.st-auth-key {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.625rem 0.75rem;
	border-radius: 0.75rem;
	background: var(--wp--preset--color--surface);
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.8125rem;
	line-height: 1.25rem;
}

.st-auth-copy {
	padding: 0.125rem 0.625rem;
	border-radius: 9999px;
	background: var(--wp--preset--color--white);
	box-shadow: inset 0 0 0 1px rgba(14, 14, 44, 0.12);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.75rem;
	font-weight: 600;
}

.st-auth-meta {
	display: grid;
	gap: 0.375rem;
	font-size: 0.75rem;
	line-height: 1rem;
	color: var(--wp--preset--color--muted);
}

.st-auth-bar {
	height: 0.375rem;
	border-radius: 9999px;
	background: var(--wp--preset--color--surface);
	overflow: hidden;
}

.st-auth-bar span {
	display: block;
	width: 60%;
	height: 100%;
	border-radius: inherit;
	background: var(--wp--preset--color--indigo);
}

.st-auth-note {
	position: absolute;
	right: 2.5rem;
	bottom: 13.5rem;
	margin: 0;
	padding: 0.25rem 0.75rem;
	border-radius: 9999px;
	background: var(--wp--preset--color--lime);
	color: var(--wp--preset--color--ink);
	font-size: 0.8125rem;
	line-height: 1.25rem;
	font-weight: 600;
	transform: rotate(3deg);
	box-shadow: 0 8px 20px -8px rgba(14, 14, 44, 0.45);
}

@media (max-width: 899px) {
	.st-auth {
		grid-template-columns: minmax(0, 1fr);
		border-radius: 1.5rem;
	}

	.st-auth-card,
	.st-auth-aside {
		padding: 1.75rem 1.25rem;
	}

	.st-auth-license,
	.st-auth-note,
	.st-auth-aside::after {
		display: none;
	}

	.st-auth-title {
		font-size: var(--wp--preset--font-size--3-xl);
		line-height: 2.25rem !important;
	}
}

/* ------------------------------------------------------------------ */
/* 404, v2: the page as a form that failed validation                  */
/* ------------------------------------------------------------------ */

.site-shell > main.st-404 {
	padding: calc(var(--st-header-h) + 64px) 1.5rem 96px !important;
}

.st-404-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: 4rem;
	align-items: center;
	max-width: 1180px;
	margin: 0 auto;
}

.st-404-grid > *,
.st-404-text > *,
.st-404-form > * {
	margin: 0 !important;
}

.st-404-text {
	display: grid;
	gap: 1.25rem;
}

.st-404 .st-404-code {
	display: inline-flex;
	align-self: start;
	justify-self: start;
	align-items: center;
	gap: 0.5rem;
	padding: 0.25rem 0.75rem;
	border-radius: 9999px;
	background: #FDF0F0;
	color: var(--wp--preset--color--error);
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 600;
	letter-spacing: 0;
}

.st-404 .st-404-code::before {
	content: "";
	width: 1rem;
	height: 1rem;
	background: currentColor;
	-webkit-mask: url("assets/icons/warning-circle.svg") center / contain no-repeat;
	mask: url("assets/icons/warning-circle.svg") center / contain no-repeat;
}

.st-404 .st-404-title {
	font-size: var(--wp--preset--font-size--6-xl);
	line-height: 4.25rem;
	font-weight: 600;
	letter-spacing: -0.03em;
	text-align: left;
}

.st-404-lead {
	max-width: 32rem;
	font-size: 1.125rem;
	line-height: 1.75rem;
	color: var(--wp--preset--color--muted);
}

.st-404 .st-404-search {
	max-width: 28rem;
	margin: 0.5rem 0 0 !important;
}

/* The form card. */
.st-404-form {
	position: relative;
	display: grid;
	gap: 0.5rem;
	padding: 2rem;
	border-radius: 1.5rem;
	background: var(--wp--preset--color--white);
	box-shadow: 0 0 0 1px rgba(14, 14, 44, 0.08), 0 32px 64px -32px rgba(14, 14, 44, 0.35);
	transform: rotate(1.5deg);
}

.st-404-form-title {
	margin-bottom: 0.75rem !important;
	font-size: 1.125rem;
	line-height: 1.75rem;
	font-weight: 600;
}

.st-404-label {
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 500;
}

.st-404-label span {
	color: var(--wp--preset--color--error);
}

.st-404-input {
	display: flex;
	align-items: center;
	min-height: 3rem;
	padding: 0.625rem 0.875rem;
	border: 1.5px solid var(--wp--preset--color--error);
	border-radius: 0.75rem;
	box-shadow: 0 0 0 4px rgba(200, 30, 30, 0.12);
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--wp--preset--color--ink);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.st-404-host {
	color: var(--wp--preset--color--muted);
}

.st-404-error {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--wp--preset--color--error);
}

.st-404-error::before {
	content: "";
	flex: none;
	width: 1rem;
	height: 1rem;
	background: currentColor;
	-webkit-mask: url("assets/icons/warning-circle.svg") center / contain no-repeat;
	mask: url("assets/icons/warning-circle.svg") center / contain no-repeat;
}

.st-404-actions {
	margin-top: 1rem !important;
}

.st-404-actions .wp-block-button,
.st-404-actions .wp-block-button__link {
	width: 100%;
	text-align: center;
}

.st-404-anno {
	position: absolute;
	top: -1.25rem;
	right: -1rem;
	padding: 0.25rem 0.75rem;
	border-radius: 9999px;
	background: var(--wp--preset--color--lime);
	font-size: 0.8125rem;
	line-height: 1.25rem;
	font-weight: 600;
	transform: rotate(-4deg);
	box-shadow: 0 8px 20px -8px rgba(14, 14, 44, 0.4);
}

/* Quick links. */
.st-404-links {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
	max-width: 1180px;
	margin: 4rem auto 0 !important;
}

.st-404-link {
	margin: 0 !important;
}

.st-404-link a {
	position: relative;
	display: grid;
	gap: 0.25rem;
	height: 100%;
	padding: 1.25rem 1.25rem 1.25rem 4rem;
	border-radius: 1.25rem;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	transition: transform 0.3s var(--st-ease), background-color 0.3s var(--st-ease);
}

.st-404-link a:hover {
	transform: translateY(-2px);
	background: #EBEBF2;
}

.st-404-link a::before {
	content: "";
	position: absolute;
	left: 1.25rem;
	top: 1.25rem;
	width: 2rem;
	height: 2rem;
	border-radius: 0.625rem;
	background: var(--wp--preset--color--white);
}

.st-404-link a::after {
	content: "";
	position: absolute;
	left: 1.75rem;
	top: 1.75rem;
	width: 1rem;
	height: 1rem;
	background: var(--wp--preset--color--indigo);
	-webkit-mask: var(--st-icon) center / contain no-repeat;
	mask: var(--st-icon) center / contain no-repeat;
}

.st-404-link strong {
	font-size: 1rem;
	line-height: 1.5rem;
	font-weight: 600;
}

.st-404-link span {
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--wp--preset--color--muted);
}

.st-ico-tag { --st-icon: url("assets/icons/tag.svg"); }
.st-ico-book { --st-icon: url("assets/icons/book-open.svg"); }
.st-ico-help { --st-icon: url("assets/icons/lifebuoy.svg"); }

@media (max-width: 999px) {
	.st-404-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 2.5rem;
	}

	.st-404 .st-404-title {
		font-size: var(--wp--preset--font-size--4-xl);
		line-height: 2.75rem;
	}

	.st-404-links {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin-top: 2.5rem !important;
	}

	.st-404-form {
		transform: none;
	}

	.st-404-anno {
		right: 1rem;
	}
}

@media (max-width: 479px) {
	.st-404-links {
		grid-template-columns: minmax(0, 1fr);
	}

	.site-shell > main.st-404 {
		padding-inline: 1rem !important;
	}
}

.st-auth-card > h2 {
	display: none !important;
}

.st-auth-card .woocommerce-form-login .form-row:has(.woocommerce-form-login__submit) {
	justify-content: flex-start;
}

.st-auth-card .woocommerce-form-login__rememberme {
	order: 1;
}

/* ------------------------------------------------------------------ */
/* Pay for your order: steps, one card, summary panel                  */
/* ------------------------------------------------------------------ */

.st-pay-page .st-shop-main .st-shop-title,
.st-pay-page .st-shop-main .st-shop-trust {
	max-width: 1080px;
	margin-inline: auto !important;
}

.st-pay-page .woocommerce:has(.st-pay) {
	max-width: 1080px;
	margin-inline: auto;
}

.st-pay {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: 1.5rem;
	align-items: start;
}

.st-pay-main {
	display: grid;
	gap: 1.25rem;
	padding: 2rem;
	border-radius: 1.5rem;
	background: var(--wp--preset--color--white);
	box-shadow: 0 0 0 1px rgba(14, 14, 44, 0.08), 0 32px 64px -32px rgba(14, 14, 44, 0.3);
}

.st-pay-main > * {
	margin: 0 !important;
}

/* The summary shows the product, so the duplicate table and order row go. */
.st-pay-main #order_review > table.shop_table,
.st-pay-main > ul.order_details,
.st-pay-main > .clear {
	display: none !important;
}

/* Steps. */
.st-steps {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	padding: 0 0 1.25rem !important;
	border-bottom: 1px solid rgba(14, 14, 44, 0.08);
}

.st-step {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 500;
	color: var(--wp--preset--color--muted);
}

.st-step + .st-step::before {
	content: "";
	width: 1.5rem;
	height: 1px;
	margin-right: 0.25rem;
	background: rgba(14, 14, 44, 0.2);
}

.st-step-dot {
	width: 1.5rem;
	height: 1.5rem;
	display: grid;
	place-items: center;
	border-radius: 9999px;
	background: var(--wp--preset--color--surface);
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 600;
}

/* Step 1 is always done. */
.st-step--1 .st-step-dot {
	background: var(--wp--preset--color--success);
	color: transparent;
	position: relative;
}

.st-step--1 .st-step-dot::after {
	content: "";
	position: absolute;
	inset: 0.4375rem;
	background: var(--wp--preset--color--white);
	-webkit-mask: url("assets/icons/check-bold.svg") center / contain no-repeat;
	mask: url("assets/icons/check-bold.svg") center / contain no-repeat;
}

/* The current step: the code step while the code box shows, else the last. */
.st-pay:has(.sfls-trial-code) .st-step--2,
.st-pay:not(:has(.sfls-trial-code)) .st-step:last-child {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

.st-pay:has(.sfls-trial-code) .st-step--2 .st-step-dot,
.st-pay:not(:has(.sfls-trial-code)) .st-step:last-child .st-step-dot {
	background: var(--wp--preset--color--indigo);
	color: var(--wp--preset--color--white);
}

.st-pay--trial:not(:has(.sfls-trial-code)) .st-step--2 .st-step-dot {
	background: var(--wp--preset--color--success);
	color: transparent;
	position: relative;
}

.st-pay--trial:not(:has(.sfls-trial-code)) .st-step--2 .st-step-dot::after {
	content: "";
	position: absolute;
	inset: 0.4375rem;
	background: var(--wp--preset--color--white);
	-webkit-mask: url("assets/icons/check-bold.svg") center / contain no-repeat;
	mask: url("assets/icons/check-bold.svg") center / contain no-repeat;
}

/* Email code step (license server markup). */
.st-pay-main .sfls-trial-code,
.st-pay-main .sfls-paddle-pay {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	display: grid;
	gap: 0.75rem;
}

.st-pay-main .sfls-paddle-pay-title {
	margin: 0 !important;
	font-size: var(--wp--preset--font-size--3-xl);
	line-height: 2.25rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--ink);
}

.st-pay-main .sfls-trial-code > p {
	margin: 0 !important;
	font-size: 1rem;
	line-height: 1.5rem;
	color: var(--wp--preset--color--muted);
}

.st-pay-main .sfls-trial-code form {
	display: grid;
	gap: 1rem;
	margin: 0.5rem 0 0 !important;
}

.st-pay-main .sfls-trial-code form p {
	margin: 0 !important;
}

.st-pay-main .sfls-trial-code label {
	display: block;
	margin-bottom: 0.375rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 500;
	color: var(--wp--preset--color--ink);
}

.st-pay-main .sfls-trial-code label + br {
	display: none;
}

.st-pay-main #sfls-trial-code {
	width: 100%;
	max-width: 16rem;
	min-height: 3.5rem;
	padding: 0.5rem 1rem !important;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 1.5rem !important;
	line-height: 2rem !important;
	font-weight: 600;
	letter-spacing: 0.5em;
	text-align: left;
}

.st-pay-main .sfls-trial-code form p:has(button) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}

.st-pay-main .sfls-trial-code button {
	min-height: 3rem !important;
	padding: 0.75rem 1.5rem !important;
	border: 0 !important;
	border-radius: 9999px !important;
	font-size: 1rem !important;
	line-height: 1.5rem !important;
	font-weight: 600 !important;
	cursor: pointer;
	transition: background-color 0.2s var(--st-ease), box-shadow 0.2s var(--st-ease) !important;
}

.st-pay-main .sfls-trial-code button.alt {
	background: var(--wp--preset--color--lime) !important;
	color: var(--wp--preset--color--ink) !important;
}

.st-pay-main .sfls-trial-code button.alt:hover {
	background: var(--wp--preset--color--lime-hover) !important;
}

.st-pay-main .sfls-trial-code button:not(.alt) {
	background: transparent !important;
	box-shadow: inset 0 0 0 1px var(--st-field-border) !important;
	color: var(--wp--preset--color--ink) !important;
}

.st-pay-main .sfls-trial-code button:not(.alt):hover {
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--ink) !important;
}

.st-pay-main .sfls-muted {
	font-size: 0.875rem !important;
	line-height: 1.25rem !important;
	color: var(--wp--preset--color--muted) !important;
}

/* Pay step: Paddle box, terms and the button. */
.st-pay-main #order_review {
	display: grid;
	gap: 1rem;
	margin: 0 !important;
}

.st-pay-main #payment {
	background: transparent !important;
	border-radius: 0 !important;
}

.st-pay-main #payment ul.payment_methods {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	list-style: none;
}

.st-pay-main #payment ul.payment_methods li {
	margin: 0;
	padding: 1rem 1.25rem;
	border: 1.5px solid var(--wp--preset--color--indigo);
	border-radius: 1rem;
	background: #FAFAFF;
	list-style: none;
}

.st-pay-main #payment ul.payment_methods li > input[type="radio"] {
	accent-color: var(--wp--preset--color--indigo);
	margin-right: 0.5rem;
	vertical-align: -0.125rem;
}

.st-pay-main #payment ul.payment_methods li > label {
	font-size: 1rem;
	line-height: 1.5rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.st-pay-main #payment .payment_box {
	margin: 0.75rem 0 0 !important;
	padding: 0 !important;
	background: transparent !important;
	color: var(--wp--preset--color--muted) !important;
	font-size: 0.875rem;
	line-height: 1.25rem;
}

.st-pay-main #payment .payment_box::before {
	display: none !important;
}

.st-pay-main #payment .payment_box p {
	margin: 0 0 0.375rem !important;
}

.st-pay-main .sfls-paddle-label-methods {
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.st-pay-main #payment .form-row.place-order,
.st-pay-main #payment > .form-row {
	margin: 1.25rem 0 0 !important;
	padding: 0 !important;
	display: grid;
	gap: 1rem;
}

.st-pay-main .woocommerce-privacy-policy-text p,
.st-pay-main .woocommerce-terms-and-conditions-checkbox-text {
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--wp--preset--color--muted);
}

.st-pay-main .woocommerce-form__label-for-checkbox {
	display: inline-flex !important;
	align-items: center;
	gap: 0.5rem;
}

.st-pay-main .woocommerce-terms-and-conditions-wrapper a {
	color: var(--wp--preset--color--indigo);
}

/* The inline terms preview WooCommerce can open: keep it a tidy box. */
.st-pay-main .woocommerce-terms-and-conditions {
	max-height: 16rem;
	overflow: auto;
	padding: 1rem;
	border-radius: 0.75rem;
	background: var(--wp--preset--color--surface);
	font-size: 0.875rem;
}

.st-pay-main .woocommerce-terms-and-conditions .st-section,
.st-pay-main .woocommerce-terms-and-conditions .st-page-hero {
	padding: 0 !important;
	background: transparent !important;
}

.st-pay-main #place_order {
	float: none !important;
	width: 100%;
	min-height: 3.25rem !important;
	padding: 0.875rem 1.5rem !important;
	border: 0 !important;
	border-radius: 9999px !important;
	background: var(--wp--preset--color--lime) !important;
	color: var(--wp--preset--color--ink) !important;
	font-size: 1rem !important;
	line-height: 1.5rem !important;
	font-weight: 600 !important;
	transition: background-color 0.2s var(--st-ease), transform 0.2s var(--st-ease) !important;
}

.st-pay-main #place_order:hover {
	background: var(--wp--preset--color--lime-hover) !important;
}

.st-pay-main #place_order:active {
	transform: scale(0.98);
}

/* Summary panel. */
.st-pay-summary {
	position: sticky;
	top: calc(var(--st-header-h) + 24px);
	display: grid;
	gap: 1rem;
	padding: 1.75rem;
	border-radius: 1.5rem;
	background: var(--wp--preset--color--surface);
}

.st-pay-summary > * {
	margin: 0 !important;
}

.st-pay-summary-title {
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 600;
	color: var(--wp--preset--color--muted);
}

.st-pay-item {
	display: grid;
	gap: 0.375rem;
	padding: 1rem;
	border-radius: 1rem;
	background: var(--wp--preset--color--white);
}

.st-pay-item > * {
	margin: 0 !important;
}

.st-pay-item-head {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	align-items: baseline;
}

.st-pay-item-name {
	font-size: 1rem;
	line-height: 1.5rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.st-pay-item-price {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.st-pay-item-meta {
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--wp--preset--color--muted);
}

.st-pay-trial {
	display: inline-flex;
	justify-self: start;
	padding: 0.25rem 0.625rem;
	border-radius: 9999px;
	background: #ECF7F1;
	color: var(--wp--preset--color--success);
	font-size: 0.8125rem;
	line-height: 1.25rem;
	font-weight: 600;
}

.st-pay-total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding-top: 1rem;
	border-top: 1px solid rgba(14, 14, 44, 0.1);
	font-size: 1rem;
	line-height: 1.5rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.st-pay-total strong {
	font-size: var(--wp--preset--font-size--3-xl);
	line-height: 2.25rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

.st-pay-tax,
.st-pay-order {
	font-size: 0.8125rem;
	line-height: 1.25rem;
	color: var(--wp--preset--color--muted);
}

.st-pay-trust {
	list-style: none;
	padding: 0 !important;
	display: grid;
	gap: 0.625rem;
}

.st-pay-trust li {
	position: relative;
	padding-left: 1.75rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--wp--preset--color--ink);
}

.st-pay-trust li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 9999px;
	background: #EEEDFD;
}

.st-pay-trust li::after {
	content: "";
	position: absolute;
	left: 0.3125rem;
	top: 0.3125rem;
	width: 0.625rem;
	height: 0.625rem;
	background: var(--wp--preset--color--indigo);
	-webkit-mask: url("assets/icons/check-bold.svg") center / contain no-repeat;
	mask: url("assets/icons/check-bold.svg") center / contain no-repeat;
}

@media (max-width: 899px) {
	.st-pay {
		grid-template-columns: minmax(0, 1fr);
	}

	.st-pay-summary {
		position: static;
		order: -1;
	}

	.st-pay-main {
		padding: 1.25rem;
	}

	.st-steps .st-step + .st-step::before {
		width: 0.75rem;
	}
}

/* Paddle's tax note (checkout and pay page): readable contrast. */
.sfls-paddle-tax-note {
	color: var(--wp--preset--color--muted) !important;
	opacity: 1 !important;
}

/* Trial code step: the address stands out, help lines stay quiet. */
.st-pay-main .sfls-trial-code > .sfls-trial-code-email {
	padding: 0.375rem 0.875rem !important;
	border-radius: 9999px;
	background: #EEEDFD;
	color: var(--wp--preset--color--ink) !important;
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.5rem;
}

.st-pay-main .sfls-trial-code > .sfls-trial-code-lead {
	margin-bottom: -0.25rem !important;
}

.st-pay-main .sfls-trial-code > .sfls-trial-code-help {
	font-size: 0.875rem;
	line-height: 1.25rem;
}

.st-pay-main .sfls-trial-code-tips {
	margin-top: 0.25rem;
	padding-top: 1rem;
	border-top: 1px solid rgba(14, 14, 44, 0.08);
	display: grid;
	gap: 0.375rem;
}

.st-pay-main .sfls-trial-code-tips a {
	color: var(--wp--preset--color--indigo);
	font-weight: 500;
}

.st-pay-main .sfls-trial-code > :is(.sfls-paddle-ok, .sfls-paddle-error) {
	padding: 0.625rem 0.875rem !important;
	border-radius: 0.75rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
}

.st-pay-main .sfls-trial-code > .sfls-paddle-ok {
	background: #ECF7F1;
	color: var(--wp--preset--color--success) !important;
}

.st-pay-main .sfls-trial-code > .sfls-paddle-error {
	background: #FDF0F0;
	color: var(--wp--preset--color--error) !important;
}

/* ------------------------------------------------------------------ */
/* Order received: hero, license panel, summary                        */
/* ------------------------------------------------------------------ */

.site-shell > main.st-thanks-main {
	padding-inline: 1.5rem !important;
}

.st-thanks {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: 1.5rem;
	align-items: start;
	max-width: 1080px;
	margin: 0 auto !important;
}

.st-thanks > * {
	margin: 0 !important;
}

.st-thanks-body {
	display: grid;
	gap: 1.25rem;
	padding: 2rem;
	border-radius: 1.5rem;
	background: var(--wp--preset--color--white);
	box-shadow: 0 0 0 1px rgba(14, 14, 44, 0.08), 0 32px 64px -32px rgba(14, 14, 44, 0.3);
}

.st-thanks-body > * {
	margin: 0 !important;
}

.st-thanks-body .wc-block-order-confirmation-status {
	margin: 0 !important;
}

/* Hero. */
.st-thanks-hero {
	display: grid;
	gap: 0.75rem;
}

.st-thanks-hero > * {
	margin: 0 !important;
}

.st-steps--done {
	margin-bottom: 0.75rem !important;
}

.st-steps--done .st-step.is-done .st-step-dot {
	position: relative;
	background: var(--wp--preset--color--success);
	color: transparent;
}

.st-steps--done .st-step.is-done .st-step-dot::after {
	content: "";
	position: absolute;
	inset: 0.4375rem;
	background: var(--wp--preset--color--white);
	-webkit-mask: url("assets/icons/check-bold.svg") center / contain no-repeat;
	mask: url("assets/icons/check-bold.svg") center / contain no-repeat;
}

.st-steps--done .st-step.is-current {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

.st-steps--done .st-step.is-current .st-step-dot {
	background: var(--wp--preset--color--indigo);
	color: var(--wp--preset--color--white);
}

/* Step 1 rule from the pay page does not apply here. */
.st-thanks-hero .st-step--1 .st-step-dot {
	background: initial;
}

.st-thanks-mark {
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 9999px;
	background: #ECF7F1;
	position: relative;
	animation: st-pop 0.6s var(--st-ease) both;
}

.st-thanks-mark::after {
	content: "";
	position: absolute;
	inset: 1rem;
	background: var(--wp--preset--color--success);
	-webkit-mask: url("assets/icons/check-bold.svg") center / contain no-repeat;
	mask: url("assets/icons/check-bold.svg") center / contain no-repeat;
}

.st-thanks-hero--wait .st-thanks-mark {
	background: #EEEDFD;
}

.st-thanks-hero--wait .st-thanks-mark::after {
	inset: 0.875rem;
	border-radius: 9999px;
	background: transparent;
	-webkit-mask: none;
	mask: none;
	border: 3px solid var(--wp--preset--color--indigo);
	border-right-color: transparent;
	animation: st-spin 0.9s linear infinite;
}

@keyframes st-pop {
	from { transform: scale(0.6); opacity: 0; }
}

@keyframes st-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.st-thanks-mark,
	.st-thanks-hero--wait .st-thanks-mark::after {
		animation: none;
	}
}

.st-thanks-title {
	font-size: var(--wp--preset--font-size--4-xl);
	line-height: 2.75rem !important;
	font-weight: 600;
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--ink);
}

.st-thanks-lead {
	max-width: 36rem;
	font-size: 1.0625rem;
	line-height: 1.75rem;
	color: var(--wp--preset--color--muted);
}

.st-thanks-guest p {
	margin: 0;
}

/* License panel (license server markup, site look). */
.st-thanks-body .sfls-delivery {
	margin: 0 !important;
	padding: 1.5rem !important;
	border: 0 !important;
	border-radius: 1.25rem !important;
	background: var(--wp--preset--color--surface) !important;
	box-shadow: none !important;
	display: grid;
	gap: 1rem;
}

.st-thanks-body .sfls-delivery > * {
	margin: 0 !important;
}

.st-thanks-body .sfls-delivery-title {
	font-size: 1.125rem !important;
	line-height: 1.75rem !important;
	font-weight: 600 !important;
	margin: 0 !important;
}

.st-thanks-body .sfls-keyrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 0.75rem 0.75rem 1rem;
	border-radius: 0.875rem;
	background: var(--wp--preset--color--white);
	box-shadow: inset 0 0 0 1px rgba(14, 14, 44, 0.1);
}

.st-thanks-body .sfls-key {
	flex: 1;
	min-width: 0;
	background: transparent !important;
	padding: 0 !important;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 1rem;
	line-height: 1.5rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--ink);
	overflow-wrap: anywhere;
}

.st-thanks-body .sfls-copy {
	flex: none;
	min-height: 2.25rem;
	padding: 0.375rem 1rem !important;
	border-radius: 9999px !important;
	background: var(--wp--preset--color--ink) !important;
	color: var(--wp--preset--color--white) !important;
	border: 0 !important;
	font-size: 0.875rem !important;
	font-weight: 600 !important;
}

.st-thanks-body .sfls-delivery-meta {
	margin-top: -0.25rem !important;
	font-size: 0.875rem;
	line-height: 1.25rem;
}

.st-thanks-body .sfls-delivery-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.st-thanks-body .sfls-delivery-actions .sfls-btn {
	min-height: 3rem;
	padding: 0.75rem 1.5rem !important;
	font-size: 1rem !important;
	font-weight: 600 !important;
}

.st-thanks-body .sfls-delivery-actions .sfls-btn--secondary {
	background: transparent !important;
	box-shadow: inset 0 0 0 1px var(--st-field-border) !important;
	color: var(--wp--preset--color--ink) !important;
	border: 0 !important;
}

.st-thanks-body .sfls-install {
	display: grid;
	gap: 0.75rem;
	padding-top: 1rem;
	border-top: 1px solid rgba(14, 14, 44, 0.08);
	margin: 0 !important;
}

.st-thanks-body .sfls-install-title {
	margin: 0 !important;
	font-size: 1rem !important;
	line-height: 1.5rem !important;
	font-weight: 600 !important;
}

.st-thanks-body .sfls-steps {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.5rem;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

.st-thanks-body .sfls-step {
	display: flex;
	gap: 0.75rem;
	padding: 0.875rem 1rem;
	border-radius: 0.875rem;
	background: var(--wp--preset--color--white);
	border: 0 !important;
}

.st-thanks-body .sfls-step-num {
	flex: none;
	width: 1.75rem;
	height: 1.75rem;
	display: grid;
	place-items: center;
	border-radius: 9999px;
	background: #EEEDFD;
	color: var(--wp--preset--color--indigo);
	font-size: 0.8125rem;
	font-weight: 600;
}

.st-thanks-body .sfls-step-body {
	display: grid;
	gap: 0.125rem;
}

.st-thanks-body .sfls-step-body strong {
	font-size: 0.9375rem;
	line-height: 1.5rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.st-thanks-body .sfls-step-body span {
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--wp--preset--color--muted);
}

/* Summary. */
.st-thanks-aside {
	position: sticky;
	top: calc(var(--st-header-h) + 24px);
	display: grid;
	gap: 1rem;
	padding: 1.75rem;
	border-radius: 1.5rem;
	background: var(--wp--preset--color--surface);
}

.st-thanks-aside > * {
	margin: 0 !important;
}

.st-thanks-aside-title,
.st-thanks-help-title {
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 600;
	color: var(--wp--preset--color--muted);
}

.st-thanks-dl {
	display: grid;
	gap: 0;
	padding: 0.25rem 1rem;
	border-radius: 1rem;
	background: var(--wp--preset--color--white);
}

.st-thanks-dl > div {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.625rem 0;
	border-bottom: 1px solid rgba(14, 14, 44, 0.06);
}

.st-thanks-dl > div:last-child {
	border-bottom: 0;
}

.st-thanks-dl dt {
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--wp--preset--color--muted);
}

.st-thanks-dl dd {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.st-thanks-mail {
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--wp--preset--color--muted);
	overflow-wrap: anywhere;
}

.st-thanks-mail strong {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

.st-thanks-help {
	display: grid;
	gap: 0.5rem;
	padding-top: 1rem;
	border-top: 1px solid rgba(14, 14, 44, 0.1);
}

.st-thanks-help p {
	margin: 0;
}

.st-thanks-help a {
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 500;
	color: var(--wp--preset--color--indigo);
	text-decoration: none;
}

.st-thanks-help a::after {
	content: " \2192";
}

.st-thanks-help a:hover {
	text-decoration: underline;
	text-underline-offset: 0.1875rem;
}

.st-thanks-guarantee {
	font-size: 0.8125rem;
	line-height: 1.25rem;
	color: var(--wp--preset--color--muted);
}

/* Full order details, folded under the two columns. */
.st-thanks-details {
	max-width: 1080px;
	margin: 1.5rem auto 0 !important;
	padding: 1rem 1.5rem !important;
	border-radius: 1.25rem;
	background: var(--wp--preset--color--white);
	box-shadow: 0 0 0 1px rgba(14, 14, 44, 0.08);
}

.st-thanks-details > summary {
	cursor: pointer;
	font-weight: 600;
}

.st-thanks-details[open] > summary {
	margin-bottom: 1rem;
}

.st-thanks-details .wc-block-order-confirmation-summary {
	padding: 1rem !important;
	border-radius: 1rem;
	background: var(--wp--preset--color--surface);
}

@media (max-width: 899px) {
	.st-thanks {
		grid-template-columns: minmax(0, 1fr);
	}

	.st-thanks-aside {
		position: static;
	}

	.st-thanks-body {
		padding: 1.25rem;
	}

	.st-thanks-title {
		font-size: var(--wp--preset--font-size--3-xl);
		line-height: 2.25rem !important;
	}

	.st-thanks-body .sfls-keyrow {
		flex-wrap: wrap;
	}
}

/* ------------------------------------------------------------------ */
/* Sign in / Create account: one card, two tabs                        */
/* ------------------------------------------------------------------ */

.st-auth-card #customer_login {
	display: grid !important;
	gap: 1.25rem;
	margin: 0 !important;
	width: 100%;
}

.st-auth-card #customer_login::before,
.st-auth-card #customer_login::after {
	display: none !important;
}

.st-auth-card #customer_login > .u-column1,
.st-auth-card #customer_login > .u-column2 {
	float: none !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

.st-auth-card #customer_login > .u-column1[hidden],
.st-auth-card #customer_login > .u-column2[hidden] {
	display: none !important;
}

/* Without JavaScript both forms show: separate them. */
.st-auth-card #customer_login:not(.st-auth-has-tabs) > .u-column2 {
	padding-top: 1.5rem !important;
	border-top: 1px solid rgba(14, 14, 44, 0.08);
}

.st-auth-card #customer_login h2 {
	display: none !important;
}

.st-auth-card #customer_login:not(.st-auth-has-tabs) h2 {
	display: block !important;
	margin: 0 0 1rem !important;
	font-size: 1.125rem;
	line-height: 1.75rem;
	font-weight: 600;
}

/* Segmented switch. */
.st-auth-tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.25rem;
	padding: 0.25rem;
	border-radius: 9999px;
	background: var(--wp--preset--color--surface);
}

.st-auth-tab {
	min-height: 2.5rem;
	padding: 0.5rem 1rem !important;
	border: 0 !important;
	border-radius: 9999px !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--wp--preset--color--muted) !important;
	font: inherit;
	font-size: 0.9375rem !important;
	line-height: 1.5rem !important;
	font-weight: 600 !important;
	cursor: pointer;
	transition: background-color 0.2s var(--st-ease), color 0.2s var(--st-ease), box-shadow 0.2s var(--st-ease) !important;
}

.st-auth-tab:hover {
	color: var(--wp--preset--color--ink) !important;
	transform: none !important;
}

.st-auth-tab[aria-selected="true"] {
	background: var(--wp--preset--color--white) !important;
	color: var(--wp--preset--color--ink) !important;
	box-shadow: 0 1px 2px rgba(14, 14, 44, 0.08), 0 4px 12px -4px rgba(14, 14, 44, 0.12) !important;
}

.st-auth-tab:focus-visible {
	outline: 2px solid var(--wp--preset--color--indigo);
	outline-offset: 2px;
}

/* Remember me on its own line, aligned with the fields; button below. */
.st-auth-card .woocommerce-form-login .form-row:has(.woocommerce-form-login__submit) {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr);
	justify-items: stretch;
	gap: 1rem;
}

.st-auth-card .woocommerce-form-login__rememberme {
	order: 0;
	justify-self: start;
	display: inline-flex !important;
	align-items: center;
	gap: 0.5rem;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.25rem !important;
}

.st-auth-card .woocommerce-form-login__rememberme input {
	margin: 0 !important;
}

.st-auth-card .woocommerce-form-login__submit {
	order: 1;
	margin: 0 !important;
}

/* Register form: the helper line and privacy text stay quiet. */
.st-auth-card .woocommerce-form-register > p:not(.form-row) {
	margin: 0 !important;
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--wp--preset--color--muted);
}

.st-auth-card .woocommerce-privacy-policy-text p {
	margin: 0 !important;
	font-size: 0.8125rem;
	line-height: 1.25rem;
	color: var(--wp--preset--color--muted);
}

.st-auth-card .woocommerce-form-register .form-row:has(.woocommerce-form-register__submit) {
	margin-top: 0.25rem !important;
}

.st-auth-card .woocommerce-form-register__submit {
	width: 100%;
}

.st-auth-card #customer_login.u-columns,
.st-account .st-auth-card #customer_login.u-columns {
	grid-template-columns: minmax(0, 1fr) !important;
	align-items: start;
}

.st-auth-tabs {
	align-self: start;
}

.st-account .st-auth-card #customer_login > .st-auth-tabs {
	padding: 0.25rem !important;
	border-radius: 9999px !important;
	background: var(--wp--preset--color--surface) !important;
}

/* ------------------------------------------------------------------ */
/* QA 2026-11-07 (pre-launch): long code headings wrap on phones,      */
/* footer and menu links reach the 24px target size.                   */
/* ------------------------------------------------------------------ */
:is(h1, h2, h3, h4, h5, h6) { overflow-wrap: break-word; }
.st-docs-body :is(h2, h3, h4) { overflow-wrap: anywhere; }
.wp-block-navigation .wp-block-navigation-item__content { min-block-size: 1.5rem; }
/* Docs tables fit the article column on desktop instead of scrolling by a few pixels. */
@media (min-width: 64rem) {
	.st-docs-body .wp-block-table table { min-width: 0; width: 100%; }
}

/* ── My Account › View order (inc/account-order.php) ─────────────────── */
.st-account .woocommerce-MyAccount-content > p:has(> mark.order-number) {
	display: none;
}

.st-order-summary {
	margin: 0 0 40px;
	padding: 24px;
	border: 1px solid rgba(14, 14, 44, 0.12);
	border-radius: 24px;
	background: var(--wp--preset--color--white);
}

.st-order-summary-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}

.st-account .st-order-summary-title {
	margin: 0;
	font-size: 1.25rem;
	line-height: 1.75rem;
}

.st-order-summary .st-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.25rem;
	font-weight: 600;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
}

.st-order-summary .st-chip::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.6;
}

.st-order-summary .st-chip--ok { background: #e3f6ec; color: #0b6b3a; }
.st-order-summary .st-chip--warn { background: #fff2d6; color: #7a4b00; }
.st-order-summary .st-chip--bad { background: #fde4e4; color: #9b1c1c; }

.st-order-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	gap: 16px 24px;
	margin: 0;
	padding: 16px;
	border-radius: 16px;
	background: var(--wp--preset--color--surface);
}

.st-order-facts div { min-width: 0; }

.st-order-facts dt {
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.25rem;
	color: var(--wp--preset--color--muted);
}

.st-order-facts dd {
	margin: 4px 0 0;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	overflow-wrap: anywhere;
}

.st-order-manage {
	margin-top: 16px;
}

.st-order-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 8px;
}

.st-order-form { margin: 0; }

.st-order-confirm > summary {
	list-style: none;
	cursor: pointer;
}

.st-order-confirm > summary::-webkit-details-marker { display: none; }

.st-order-confirm[open] {
	flex-basis: 100%;
	order: 10;
}

.st-order-confirm[open] > summary {
	display: none;
}

.st-order-confirm-body {
	padding: 16px;
	border: 1px solid rgba(14, 14, 44, 0.12);
	border-radius: 16px;
	background: var(--wp--preset--color--surface);
}

.st-account .st-order-confirm-body p {
	margin: 0 0 12px;
	color: var(--wp--preset--color--ink);
}

.st-account .st-order-note {
	margin: 12px 0 0;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.25rem;
}

.st-account :is(.woocommerce-order-details__title, .woocommerce-column__title) {
	margin: 0 0 16px;
	font-size: 1.25rem;
	line-height: 1.75rem;
}

.st-account .woocommerce-order-details {
	margin-bottom: 40px;
}

.st-account .woocommerce-customer-details address {
	padding: 16px 20px;
	border: 0;
	border-radius: 16px;
	background: var(--wp--preset--color--surface);
	font-style: normal;
	line-height: 1.5rem;
	color: var(--wp--preset--color--ink);
}

.st-account .woocommerce-customer-details .woocommerce-customer-details--email {
	margin: 8px 0 0;
	padding: 0;
	color: var(--wp--preset--color--muted);
}

@media (prefers-reduced-motion: no-preference) {
	.st-order-confirm-body { animation: st-order-reveal 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
}

@keyframes st-order-reveal {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}

.st-order-actions { align-items: center; }
.st-order-confirm { order: 2; }
.st-order-actions > a { order: 3; }
.st-order-confirm-body .st-order-form { display: flex; flex-wrap: wrap; gap: 8px; }
.st-account .woocommerce-customer-details h2 { margin: 0 0 16px; font-size: 1.25rem; line-height: 1.75rem; }
.st-account .woocommerce-customer-details address p.woocommerce-customer-details--email { position: relative; padding-left: 24px; }
.st-account :is(.woocommerce-order-details__title, .woocommerce-customer-details h2, .st-order-summary-title) { font-weight: 600; }

/* Cookie choice (inc/consent.php). Both buttons look the same on purpose:
   declining must be as easy as accepting. */
.st-consent {
	position: fixed;
	z-index: 1000;
	left: 16px;
	bottom: 16px;
	max-width: 400px;
	padding: 24px;
	border: 1px solid #CFCFD8;
	border-radius: 16px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	box-shadow: 0 8px 32px rgba(14, 14, 44, 0.12);
}
.st-consent[hidden] { display: none; }
.st-consent-title {
	margin: 0 0 8px;
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.5;
	font-weight: 600;
}
.st-consent-text {
	margin: 0 0 16px;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.43;
	color: var(--wp--preset--color--ink);
	text-wrap: pretty;
}
.st-consent-text a { color: var(--wp--preset--color--indigo); text-decoration: underline; }
.st-consent-actions { display: flex; gap: 8px; }
.st-consent-btn {
	flex: 1;
	min-height: 44px;
	padding: 8px 12px;
	border: 1px solid var(--wp--preset--color--ink);
	border-radius: 999px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	font: inherit;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	cursor: pointer;
	transition: background-color 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.st-consent-btn:hover { background: var(--wp--preset--color--surface); }
.st-consent-btn:active { transform: translateY(1px); }
.st-consent-btn:focus-visible { outline: 2px solid var(--wp--preset--color--indigo); outline-offset: 2px; }
@media (max-width: 480px) {
	.st-consent { left: 16px; right: 16px; bottom: 16px; max-width: none; }
}