/*
 * NOFX dark theme. Colors come from theme.json presets; only values
 * theme.json cannot express (layered backgrounds, component states,
 * WooCommerce overrides) live here.
 */

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

/* Light text on dark renders heavy with subpixel smoothing; force grayscale. */
body {
	background: var(--wp--preset--color--paper);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

::selection {
	background: var(--wp--preset--color--commerce-blue);
	color: var(--wp--preset--color--deep);
}

a,
button,
.wp-block-button__link,
.wp-block-navigation-item__content {
	transition: background-color 0.15s ease, border-color 0.15s ease,
		color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

:focus-visible {
	outline: 2px solid var(--wp--preset--color--commerce-blue);
	outline-offset: 2px;
}

.site-header,
.site-footer {
	padding-bottom: 1rem;
	padding-top: 1rem;
}

.site-header {
	backdrop-filter: blur(8px);
	background: rgba(2, 3, 4, 0.85);
	border-bottom: 1px solid var(--wp--preset--color--line);
	position: sticky;
	top: 0;
	z-index: 10;
}

.site-header .wp-block-navigation-item__content {
	color: var(--wp--preset--color--muted);
	font-size: 0.9375rem;
}

.site-header .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--ink);
}

.header-cta .wp-block-button__link {
	font-size: 0.875rem;
	padding: 0.5rem 1.1rem;
}

.site-footer {
	background: var(--wp--preset--color--deep);
	border-top: 1px solid var(--wp--preset--color--line);
	margin-top: 5rem;
	padding-bottom: 2.5rem;
	padding-top: 3rem;
}

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

.site-footer a:hover {
	color: var(--wp--preset--color--commerce-blue);
}

/* --- Landing page components ------------------------------------------ */

/* Two radial washes and nothing else. A 32px grid used to sit on top of these,
   but on a full-height hero it was a third texture competing with the matrix
   rain and the glow, and at ~7% alpha it read as screen dirt rather than as
   structure. The second wash is centred on the copy: a viewport-tall hero with
   a single top-anchored glow leaves its middle flat black, which is most of
   what made the page feel unfinished. */
.hero-section {
	background-image:
		radial-gradient(70% 65% at 50% 0%, rgba(var(--wp--custom--accent-rgb), 0.14), transparent 70%),
		radial-gradient(55% 45% at 50% 46%, rgba(var(--wp--custom--accent-rgb), 0.07), transparent 72%);
	border-bottom: 1px solid var(--wp--preset--color--line);
	-webkit-mask-image: linear-gradient(to bottom, #000 75%, rgba(0, 0, 0, 0.92));
	mask-image: linear-gradient(to bottom, #000 75%, rgba(0, 0, 0, 0.92));
}

/* First layer is a sheen band parked off-view; the shimmer animation sweeps it.
 *
 * The second layer's stops are deliberately high and its tail deliberately
 * close to white. The headline wraps to two lines, so the bottom of the fade
 * lands on the whole of the last line rather than on descenders — with the
 * fade starting at 30% and ending at 0.65 alpha, "Zess" came out visibly grey
 * next to line one and read as a rendering fault rather than as a gradient. */
.hero-title {
	background:
		linear-gradient(105deg, transparent 42%, rgba(var(--wp--custom--accent-rgb), 0.45) 50%, transparent 58%) 100% 0 / 250% 100% no-repeat,
		linear-gradient(180deg, #ffffff 55%, rgba(234, 236, 239, 0.88));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	max-width: 20ch;
	margin-left: auto;
	margin-right: auto;
	/* Split the two lines evenly instead of orphaning the brand name. */
	text-wrap: balance;
}

/* Badge, title and lede are one unit, so they sit tighter than the 1.5rem
   block gap. The CTA keeps its larger inline margin, which leaves a single
   deliberate break between "what this is" and "what to do about it" instead of
   five evenly spaced items floating in a viewport-tall box. */
.hero-section > .hero-title {
	margin-top: var(--wp--preset--spacing--30);
}

/* The hero lede sits directly under a very large title, so it takes a size and
   leading of its own — the `large` preset (fluid, up to 36px) reads far too big
   and too airy in that slot. The measure is well under the 760px content width:
   at 52ch it filled the column edge to edge and broke mid-phrase ("...pay
   securely, and / redeem your code...").
 *
 * The `!important` is not optional. WordPress emits its font-size preset
 * classes as `.has-large-font-size { font-size: … !important }`, so without it
 * this declaration loses regardless of specificity — which is exactly what was
 * happening: the lede has been rendering at the full 36px preset all along, and
 * `ch` was being measured against that, making any max-width here far wider
 * than intended. Same reason as the `!important`s in the WooCommerce overrides
 * further down this file. */
.hero-section .has-muted-color.has-large-font-size {
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem) !important;
	line-height: 1.45;
	margin-left: auto;
	margin-right: auto;
	margin-top: var(--wp--preset--spacing--30);
	max-width: 44ch;
	text-wrap: pretty;
}

.hero-section .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	box-shadow: 0 0 24px rgba(var(--wp--custom--accent-rgb), 0.35);
}

.hero-section .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	box-shadow: 0 0 32px rgba(var(--wp--custom--accent-rgb), 0.5);
	transform: translateY(-1px);
}

p.eyebrow-badge {
	background: rgba(var(--wp--custom--accent-rgb), 0.08);
	border: 1px solid rgba(var(--wp--custom--accent-rgb), 0.25);
	border-radius: 999px;
	color: var(--wp--preset--color--commerce-blue);
	display: table;
	font-family: var(--wp--preset--font-family--dm-mono);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	margin-left: auto;
	margin-right: auto;
	padding: 0.35rem 0.9rem;
	text-transform: uppercase;
}

.pricing-card {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 40%),
		var(--wp--custom--panel--bg);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
	box-shadow: var(--wp--custom--shadow--card);
	display: flex;
	flex-direction: column;
	height: 100%;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

/* The badge is absolutely positioned, but block-gap still treats it as the
   first child; without this the featured card's content sits one gap lower. */
.pricing-card--featured > p.pricing-badge + * {
	margin-block-start: 0;
}

.pricing-card:hover {
	border-color: var(--wp--custom--panel--border-hover);
	transform: translateY(-2px);
}

.pricing-card--featured {
	background: linear-gradient(180deg, rgba(var(--wp--custom--accent-rgb), 0.07), transparent 45%),
		var(--wp--custom--panel--bg);
	border-color: rgba(var(--wp--custom--accent-rgb), 0.5);
	box-shadow: var(--wp--custom--shadow--card), var(--wp--custom--shadow--glow);
	position: relative;
}

.pricing-card--featured:hover {
	border-color: var(--wp--preset--color--commerce-blue);
}

.pricing-card .wp-block-buttons,
.pricing-card .wp-block-button,
.pricing-card .wp-block-button__link {
	width: 100%;
}

.pricing-card > .wp-block-buttons {
	margin-block-start: auto;
	padding-top: var(--wp--preset--spacing--40);
}

/* Transparent border on the filled button so both CTA styles share one height. */
.pricing-card .wp-block-button__link {
	border: 1px solid transparent;
	padding-bottom: 0.75rem;
	padding-top: 0.75rem;
}

.pricing-card .is-style-outline > .wp-block-button__link {
	border-color: var(--wp--preset--color--commerce-blue);
}

p.pricing-badge {
	background: var(--wp--preset--color--commerce-blue);
	border-radius: 999px;
	color: var(--wp--preset--color--deep);
	font-family: var(--wp--preset--font-family--dm-mono);
	font-size: 0.75rem;
	font-weight: 600;
	left: 50%;
	letter-spacing: 0.05em;
	margin: 0;
	padding: 0.25rem 0.9rem;
	position: absolute;
	text-transform: uppercase;
	top: -0.85rem;
	transform: translateX(-50%);
}

/* !important matches the specificity of core's preset font-size class. */
p.price-display {
	font-family: var(--wp--preset--font-family--dm-mono);
	font-size: 2.75rem !important;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1;
}

.price-display sub {
	bottom: 0;
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--figtree);
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: 0;
}

ul.check-list {
	list-style: none;
	padding-left: 0;
}

ul.check-list li {
	padding-left: 1.6em;
	position: relative;
}

ul.check-list li::before {
	color: var(--wp--preset--color--success-green);
	content: "\2713";
	font-weight: 700;
	left: 0;
	position: absolute;
}

.step-card {
	background: var(--wp--custom--panel--bg);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
	height: 100%;
	transition: border-color 0.15s ease;
}

.step-card:hover {
	border-color: rgba(var(--wp--custom--accent-rgb), 0.4);
}

p.step-number {
	align-items: center;
	background: rgba(var(--wp--custom--accent-rgb), 0.1);
	border-radius: 999px;
	color: var(--wp--preset--color--commerce-blue);
	display: inline-flex;
	font-family: var(--wp--preset--font-family--dm-mono);
	font-weight: 600;
	height: 2.25rem;
	justify-content: center;
	width: 2.25rem;
}

.reassurance-strip {
	border-bottom: 1px solid var(--wp--preset--color--line);
	border-top: 1px solid var(--wp--preset--color--line);
}

.reassurance-strip > .wp-block-group {
	gap: 1rem 3rem;
}

p.reassurance-item {
	padding-left: 1.5em;
	position: relative;
}

p.reassurance-item::before {
	color: var(--wp--preset--color--success-green);
	content: "\2713";
	font-weight: 700;
	left: 0;
	position: absolute;
}

details.faq-item {
	background: var(--wp--custom--panel--bg);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--control);
	padding: 1rem 1.25rem;
	transition: border-color 0.15s ease;
}

details.faq-item:hover,
details.faq-item[open] {
	border-color: var(--wp--custom--panel--border-hover);
}

details.faq-item summary {
	cursor: pointer;
	font-weight: 600;
	list-style: none;
	padding-right: 2rem;
	position: relative;
}

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

details.faq-item summary::after {
	color: var(--wp--preset--color--commerce-blue);
	content: "+";
	font-family: var(--wp--preset--font-family--dm-mono);
	font-size: 1.25rem;
	line-height: 1;
	position: absolute;
	right: 0;
	top: 0.1em;
}

details.faq-item[open] summary::after {
	content: "\2212";
}

details.faq-item[open] summary {
	margin-bottom: 0.75rem;
}

details.faq-item p {
	color: var(--wp--preset--color--muted);
}

.cta-band {
	background: linear-gradient(180deg, rgba(var(--wp--custom--accent-rgb), 0.1), rgba(var(--wp--custom--accent-rgb), 0.03)),
		var(--wp--preset--color--surface);
	border: 1px solid rgba(var(--wp--custom--accent-rgb), 0.25);
	border-radius: var(--wp--custom--radius--card);
}

/* Outline button style on dark. */
.is-style-outline > .wp-block-button__link {
	background: transparent;
	border: 1px solid var(--wp--preset--color--commerce-blue);
	color: var(--wp--preset--color--commerce-blue);
}

.is-style-outline > .wp-block-button__link:hover {
	background: rgba(var(--wp--custom--accent-rgb), 0.1);
	color: var(--wp--preset--color--commerce-blue);
}

/* --- Generic form controls (search, comments) -------------------------- */

.wp-block-search__input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="search"],
input[type="url"],
textarea,
select {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--control);
	color: var(--wp--preset--color--ink);
}

.wp-block-search__input:focus,
input:focus,
textarea:focus,
select:focus {
	border-color: var(--wp--preset--color--commerce-blue);
	outline: none;
}

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

/* --- WooCommerce classic ------------------------------------------------ */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
}

.woocommerce-message {
	border-top-color: var(--wp--preset--color--success-green);
}

.woocommerce-info {
	border-top-color: var(--wp--preset--color--commerce-blue);
}

.woocommerce-error {
	border-top-color: var(--wp--preset--color--danger);
}

.woocommerce-message::before {
	color: var(--wp--preset--color--success-green);
}

.woocommerce-info::before {
	color: var(--wp--preset--color--commerce-blue);
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	background-color: var(--wp--preset--color--commerce-blue);
	border-radius: var(--wp--custom--radius--control);
	color: var(--wp--preset--color--deep);
	font-weight: 600;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background-color: var(--wp--preset--color--accent-dark);
	color: var(--wp--preset--color--deep);
}

.woocommerce a.button.disabled,
.woocommerce button.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled] {
	background-color: var(--wp--preset--color--line);
	color: var(--wp--preset--color--muted);
}

.woocommerce form .form-row .input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea,
.woocommerce .quantity .qty {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--control);
	color: var(--wp--preset--color--ink);
}

.select2-container--default .select2-selection--single,
.select2-dropdown {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--ink);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--wp--preset--color--ink);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background: var(--wp--preset--color--commerce-blue);
	color: var(--wp--preset--color--deep);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
	background: var(--wp--preset--color--paper);
	border-color: var(--wp--preset--color--line);
	color: var(--wp--preset--color--ink);
}

.woocommerce table.shop_table {
	border-color: var(--wp--preset--color--line);
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	border-color: var(--wp--preset--color--line) !important;
}

.woocommerce table.shop_table thead th {
	color: var(--wp--preset--color--muted);
}

.cart_totals,
.woocommerce-checkout-review-order {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
}

.woocommerce .price ins,
.woocommerce ins {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.woocommerce .price del,
.woocommerce del {
	color: var(--wp--preset--color--muted);
}

.woocommerce span.onsale {
	background: var(--wp--preset--color--commerce-blue);
	color: var(--wp--preset--color--deep);
}

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	padding-left: 0;
}

.woocommerce-MyAccount-navigation li a {
	color: var(--wp--preset--color--muted);
}

.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li a:hover {
	color: var(--wp--preset--color--commerce-blue);
}

/* --- WooCommerce blocks (cart, checkout, notices) ----------------------- */

/* WooCommerce paints each variant its own light background; force dark. */
.wc-block-components-notice-banner,
.wc-block-components-notice-banner.is-success,
.wc-block-components-notice-banner.is-error,
.wc-block-components-notice-banner.is-info,
.wc-block-components-notice-banner.is-warning {
	background: var(--wp--preset--color--surface) !important;
	color: var(--wp--preset--color--ink) !important;
}

.wc-block-components-notice-banner a {
	color: var(--wp--preset--color--commerce-blue) !important;
}

.wc-block-components-notice-banner.is-success {
	border-color: var(--wp--preset--color--success-green);
}

.wc-block-components-notice-banner.is-error {
	border-color: var(--wp--preset--color--danger);
}

.wc-block-components-notice-banner.is-info {
	border-color: var(--wp--preset--color--commerce-blue);
}

.wc-block-components-text-input input,
.wc-block-components-textarea textarea,
.wc-block-components-combobox input,
.wc-block-components-combobox .components-combobox-control__input,
.wc-block-components-country-input input,
.wc-block-components-state-input input,
.wc-block-components-form .wc-block-components-select select,
.wc-block-components-select .components-custom-select-control__button,
.wc-block-components-totals-coupon__input input {
	background: var(--wp--preset--color--surface) !important;
	border-color: var(--wp--preset--color--line) !important;
	color: var(--wp--preset--color--ink) !important;
}

.wc-block-components-text-input label,
.wc-block-components-combobox label,
.wc-block-components-select label,
.wc-block-components-totals-coupon__input label {
	color: var(--wp--preset--color--muted) !important;
}

.wc-block-components-text-input.is-active input:focus,
.wc-block-components-text-input input:focus {
	border-color: var(--wp--preset--color--commerce-blue) !important;
	box-shadow: 0 0 0 1px var(--wp--preset--color--commerce-blue) !important;
}

/* Country/state selects use the wc-blocks-* (plural) class family. */
.wc-blocks-components-select .wc-blocks-components-select__container {
	background: var(--wp--preset--color--surface) !important;
	border-color: var(--wp--preset--color--line) !important;
}

.wc-blocks-components-select__select {
	background: transparent !important;
	color: var(--wp--preset--color--ink) !important;
}

.wc-blocks-components-select__label {
	color: var(--wp--preset--color--muted) !important;
}

.components-form-token-field__suggestions-list,
.wc-block-components-combobox .components-combobox-control__suggestions-container {
	background: var(--wp--preset--color--surface);
	border-color: var(--wp--preset--color--line);
	color: var(--wp--preset--color--ink);
}

.components-form-token-field__suggestion.is-selected,
.components-form-token-field__suggestion:hover {
	background: var(--wp--preset--color--commerce-blue);
	color: var(--wp--preset--color--deep);
}

.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"],
.wc-block-components-radio-control__input {
	background: var(--wp--preset--color--surface);
	border-color: var(--wp--preset--color--line);
}

.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked,
.wc-block-components-radio-control__input:checked {
	background: var(--wp--preset--color--commerce-blue);
	border-color: var(--wp--preset--color--commerce-blue);
}

.wc-block-components-quantity-selector {
	border-color: var(--wp--preset--color--line);
}

.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input,
.wc-block-components-quantity-selector button {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
}

.wc-block-components-totals-wrapper,
.wc-block-components-totals-item,
.wc-block-components-panel__button {
	border-color: var(--wp--preset--color--line);
	color: var(--wp--preset--color--ink);
}

.wc-block-components-sidebar .wc-block-components-order-summary,
.is-large.wc-block-cart .wc-block-cart__totals-block,
.wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
}

.wc-block-cart-items th {
	color: var(--wp--preset--color--muted);
}

.wc-block-cart-items th,
.wc-block-cart-items td {
	border-color: var(--wp--preset--color--line) !important;
}

.wc-block-cart-item__remove-link {
	color: var(--wp--preset--color--muted);
}

.wc-block-cart-item__remove-link:hover {
	color: var(--wp--preset--color--danger);
}

.wc-block-components-button:not(.is-link) {
	background-color: var(--wp--preset--color--commerce-blue);
	border-radius: var(--wp--custom--radius--control);
	color: var(--wp--preset--color--deep);
	font-weight: 600;
}

.wc-block-components-button:not(.is-link):hover,
.wc-block-components-button:not(.is-link):focus {
	background-color: var(--wp--preset--color--accent-dark);
	color: var(--wp--preset--color--deep);
}

.wc-block-components-button.outlined {
	background: transparent;
	border: 1px solid var(--wp--preset--color--commerce-blue);
	color: var(--wp--preset--color--commerce-blue);
}

.wc-block-components-product-badge,
.wc-block-components-chip {
	background: var(--wp--preset--color--surface);
	border-color: var(--wp--preset--color--line);
	color: var(--wp--preset--color--muted);
}

.wc-block-components-express-payment-continue-rule {
	color: var(--wp--preset--color--muted);
}

.wc-block-components-express-payment-continue-rule::before,
.wc-block-components-express-payment-continue-rule::after {
	border-color: var(--wp--preset--color--line);
}

/* --- Plan picker modal -------------------------------------------------- */

body.nofx-modal-open {
	overflow: hidden;
}

.nofx-modal {
	inset: 0;
	position: fixed;
	z-index: 100;
}

.nofx-modal[hidden] {
	display: none;
}

.nofx-modal__backdrop {
	backdrop-filter: blur(6px);
	background: rgba(2, 3, 4, 0.8);
	inset: 0;
	position: absolute;
}

.nofx-modal__panel {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 40%),
		var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
	box-shadow: var(--wp--custom--shadow--card), var(--wp--custom--shadow--glow);
	left: 50%;
	max-height: min(85vh, 640px);
	max-width: 520px;
	overflow-y: auto;
	padding: 2rem;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: calc(100% - 2rem);
	animation: nofx-modal-in 0.18s ease-out;
}

@keyframes nofx-modal-in {
	from {
		opacity: 0;
		transform: translate(-50%, -48%);
	}

	to {
		opacity: 1;
		transform: translate(-50%, -50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.nofx-modal__panel {
		animation: none;
	}
}

.nofx-modal__close {
	background: transparent;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	color: var(--wp--preset--color--muted);
	cursor: pointer;
	font-size: 1.25rem;
	height: 2.25rem;
	line-height: 1;
	position: absolute;
	right: 1rem;
	top: 1rem;
	width: 2.25rem;
}

.nofx-modal__close:hover {
	border-color: var(--wp--preset--color--commerce-blue);
	color: var(--wp--preset--color--ink);
}

.nofx-modal__title {
	font-size: 1.5rem;
	letter-spacing: -0.02em;
	margin: 0 0 0.5rem;
}

.nofx-modal__subtitle {
	color: var(--wp--preset--color--muted);
	font-size: 0.9375rem;
	margin: 0 0 1.5rem;
}

.nofx-modal__status {
	color: var(--wp--preset--color--muted);
	padding: 2.5rem 1rem;
	text-align: center;
}

.nofx-modal__status--error {
	color: var(--wp--preset--color--danger);
}

.nofx-modal__status--empty {
	color: var(--wp--preset--color--ink);
}

.nofx-modal__plans {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
}

.nofx-plan-card {
	align-items: center;
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--control);
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	display: grid;
	font-family: var(--wp--preset--font-family--figtree);
	gap: 0.15rem 1rem;
	grid-template-columns: 1fr auto;
	padding: 1rem 1.25rem;
	text-align: left;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	width: 100%;
}

.nofx-plan-card:hover {
	border-color: rgba(var(--wp--custom--accent-rgb), 0.5);
}

.nofx-plan-card.is-selected {
	border-color: var(--wp--preset--color--commerce-blue);
	box-shadow: 0 0 0 1px var(--wp--preset--color--commerce-blue),
		0 0 20px rgba(var(--wp--custom--accent-rgb), 0.15);
}

.nofx-plan-card__name {
	font-size: 1.0625rem;
	font-weight: 600;
	grid-column: 1;
}

.nofx-plan-card__duration {
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
	grid-column: 1;
}

.nofx-plan-card__price {
	color: var(--wp--preset--color--commerce-blue);
	font-family: var(--wp--preset--font-family--dm-mono);
	font-size: 1.25rem;
	font-weight: 600;
	grid-column: 2;
	grid-row: 1 / span 2;
}

.nofx-plan-card__stock {
	color: var(--wp--preset--color--danger);
	font-family: var(--wp--preset--font-family--dm-mono);
	font-size: 0.75rem;
	grid-column: 1 / -1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.nofx-modal__buy {
	background: var(--wp--preset--color--commerce-blue);
	border-radius: var(--wp--custom--radius--control);
	box-shadow: 0 0 24px rgba(var(--wp--custom--accent-rgb), 0.25);
	color: var(--wp--preset--color--deep);
	display: block;
	font-weight: 600;
	padding: 0.9rem 1.5rem;
	text-align: center;
	text-decoration: none;
	width: 100%;
}

.nofx-modal__buy:hover {
	background: var(--wp--preset--color--accent-dark);
	color: var(--wp--preset--color--deep);
}

.nofx-modal__buy.is-disabled {
	background: var(--wp--preset--color--line);
	box-shadow: none;
	color: var(--wp--preset--color--muted);
	cursor: not-allowed;
	pointer-events: auto;
}

.nofx-modal__panel,
.nofx-modal__panel * {
	box-sizing: border-box;
}

/* Homepage is a single full-viewport hero with no header or footer. */
.hero-section--full {
	border-bottom: none;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 100vh;
	min-height: 100svh;
	/* Containing block and clip for the absolutely positioned motion overlays.
	   Unconditional: the matrix canvas must be clipped whether or not the
	   reduced-motion block below applies. */
	overflow: hidden;
	padding: var(--wp--preset--spacing--50);
	position: relative;
}

/* With no site header/footer, give interior page content its own breathing
   room — including the side gutter that theme.json's root padding would
   normally provide, which the full-bleed homepage hero must not inherit. */
main.wp-block-group:not(.hero-section) {
	padding-bottom: var(--wp--preset--spacing--60);
	padding-inline: var(--wp--preset--spacing--30);
	padding-top: var(--wp--preset--spacing--60);
}

/* --- Brand bar ---------------------------------------------------------- */

/* The homepage is deliberately chrome-free; this bar only appears on the
   checkout, confirmation, and affiliate templates to anchor them to the brand. */
.brand-bar {
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding-bottom: 1rem;
	padding-top: 1rem;
}

.brand-bar .wp-block-site-title a {
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--figtree);
	font-weight: 700;
	letter-spacing: -0.01em;
	text-decoration: none;
}

.brand-bar .wp-block-site-title a:hover {
	color: var(--wp--preset--color--commerce-blue);
}

/* The bar is the page's own chrome, so the main below it does not need the
   full interior-page top padding as well. */
.brand-bar ~ main.wp-block-group:not(.hero-section) {
	padding-top: var(--wp--preset--spacing--50);
}

/* Checkout and the affiliate panel supply their own section headings, so the
   page title is a quiet label rather than a display heading. It exists mainly
   so these pages have an h1 at all. */
h1.page-heading {
	font-size: 1.75rem;
	margin-bottom: var(--wp--preset--spacing--40);
	text-align: center;
}

/* --- Checkout ----------------------------------------------------------- */

/* The classic checkout stacks billing, summary, and payment in DOM order and
   floats an empty second column. This rebuilds it as one focused column:
   express pay, summary, details, payment. `display: contents` on #order_review
   promotes the summary table and payment box to grid items so they can be
   ordered independently — safe because checkout.js only binds #order_review on
   the order-pay page, and the AJAX fragments target the table and .payment box
   by class. */
form.checkout {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	margin-inline: auto;
	max-width: 36rem;
}

form.checkout #order_review {
	background: none;
	border: 0;
	display: contents;
}

form.checkout > * {
	order: 40;
}

form.checkout #wc-stripe-express-checkout-element {
	order: 10;
}

form.checkout #wc-stripe-express-checkout-button-separator {
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
	margin: 0 !important;
	order: 20;
}

form.checkout #order_review_heading {
	order: 30;
}

form.checkout .woocommerce-checkout-review-order-table {
	order: 32;
}

form.checkout #customer_details {
	order: 40;
}

form.checkout .nofx-checkout__payment-heading {
	order: 45;
}

form.checkout .woocommerce-checkout-payment {
	order: 50;
}

/* Order-attribution custom elements hold hidden inputs only; as grid items
   they would each open an empty row. Hidden inputs still submit. */
form.checkout wc-order-attribution-inputs {
	display: none;
}

/* Section labels above each card. */
form.checkout #order_review_heading,
form.checkout .nofx-checkout__payment-heading {
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--dm-mono);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	margin: 0;
	text-transform: uppercase;
}

/* The floated two-column customer block collapses to a plain wrapper; the
   billing fieldset itself becomes the card. */
form.checkout #customer_details.col2-set,
form.checkout #customer_details .col-1,
form.checkout #customer_details .col-2 {
	display: block;
	float: none;
	margin: 0;
	padding: 0;
	width: auto;
}

/* Plan-only carts strip shipping and order notes, leaving the second column
   with nothing to show. */
form.checkout #customer_details .col-2:not(:has(.form-row)) {
	display: none;
}

.nofx-checkout-card,
form.checkout .woocommerce-billing-fields,
form.checkout .woocommerce-checkout-review-order-table,
form.checkout .woocommerce-checkout-payment {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 40%),
		var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
	box-shadow: var(--wp--custom--shadow--card);
}

form.checkout .woocommerce-billing-fields,
form.checkout .woocommerce-checkout-payment {
	padding: var(--wp--preset--spacing--40);
}

/* The billing heading is replaced with our own copy through gettext; hide it
   because the card is already introduced by its fields. */
form.checkout .woocommerce-billing-fields > h3 {
	font-size: 1.0625rem;
	margin: 0 0 1.25rem;
}

form.checkout .form-row {
	margin: 0 0 1rem;
	padding: 0;
}

form.checkout .form-row:last-child {
	margin-bottom: 0;
}

form.checkout .form-row label {
	color: var(--wp--preset--color--muted);
	display: block;
	font-size: 0.8125rem;
	font-weight: 600;
	margin-bottom: 0.35rem;
}

form.checkout .form-row .required {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

form.checkout .form-row .input-text {
	font: inherit;
	padding: 0.7rem 0.85rem;
	width: 100%;
}

form.checkout .form-row .input-text:focus {
	border-color: var(--wp--preset--color--commerce-blue);
	box-shadow: 0 0 0 1px var(--wp--preset--color--commerce-blue);
	outline: none;
}

form.checkout .form-row .description {
	color: var(--wp--preset--color--muted);
	display: block;
	font-size: 0.8125rem;
	margin-top: 0.4rem;
}

form.checkout .woocommerce-invalid .input-text {
	border-color: var(--wp--preset--color--danger);
}

form.checkout .woocommerce-validated .input-text {
	border-color: rgba(var(--wp--custom--success-rgb), 0.6);
}

/* Order summary table ---------------------------------------------------- */

form.checkout table.shop_table.woocommerce-checkout-review-order-table {
	border-collapse: collapse;
	margin: 0;
	overflow: hidden;
	width: 100%;
}

/* The column headers are noise above a one-line summary, but screen readers
   still need them, so clip rather than remove. */
form.checkout .woocommerce-checkout-review-order-table thead {
	clip-path: inset(50%);
	position: absolute;
	white-space: nowrap;
}

form.checkout .woocommerce-checkout-review-order-table th,
form.checkout .woocommerce-checkout-review-order-table td {
	border: 0 !important;
	padding: 1rem var(--wp--preset--spacing--40);
	vertical-align: middle;
}

form.checkout .woocommerce-checkout-review-order-table tfoot tr:first-child th,
form.checkout .woocommerce-checkout-review-order-table tfoot tr:first-child td {
	border-top: 1px solid var(--wp--preset--color--line) !important;
}

form.checkout .woocommerce-checkout-review-order-table tfoot th {
	color: var(--wp--preset--color--muted);
	font-weight: 400;
}

form.checkout .woocommerce-checkout-review-order-table td.product-total,
form.checkout .woocommerce-checkout-review-order-table tfoot td {
	font-family: var(--wp--preset--font-family--dm-mono);
	text-align: right;
	white-space: nowrap;
}

form.checkout .woocommerce-checkout-review-order-table .order-total th {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

form.checkout .woocommerce-checkout-review-order-table .order-total td {
	color: var(--wp--preset--color--commerce-blue);
	font-size: 1.375rem;
	font-weight: 600;
	letter-spacing: -0.02em;
}

/* With no coupon, tax, or shipping line the subtotal only repeats the total. */
form.checkout .woocommerce-checkout-review-order-table:not(:has(.cart-discount, .tax-rate, .shipping)) .cart-subtotal {
	display: none;
}

.nofx-summary-item {
	align-items: center;
	display: flex;
	gap: 0.9rem;
}

.nofx-summary-item__thumb {
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--control);
	flex: 0 0 auto;
	height: 44px;
	object-fit: contain;
	padding: 4px;
	width: 44px;
}

.nofx-summary-item__name {
	display: block;
	font-weight: 600;
}

.nofx-summary-item__meta {
	color: var(--wp--preset--color--muted);
	display: block;
	font-size: 0.8125rem;
}

/* Payment ---------------------------------------------------------------- */

form.checkout .wc_payment_methods {
	display: grid;
	gap: 0.6rem;
	list-style: none;
	margin: 0 0 var(--wp--preset--spacing--40);
	padding: 0;
}

form.checkout li.wc_payment_method {
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--control);
	list-style: none;
	padding: 0.9rem 1.1rem;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

form.checkout li.wc_payment_method:hover {
	border-color: rgba(var(--wp--custom--accent-rgb), 0.5);
}

form.checkout li.wc_payment_method:has(input[type="radio"]:checked) {
	border-color: var(--wp--preset--color--commerce-blue);
	box-shadow: 0 0 0 1px var(--wp--preset--color--commerce-blue),
		0 0 20px rgba(var(--wp--custom--accent-rgb), 0.15);
}

form.checkout li.wc_payment_method > input[type="radio"] {
	accent-color: var(--wp--preset--color--commerce-blue);
	margin: 0 0.65rem 0 0;
	vertical-align: -0.1em;
}

form.checkout li.wc_payment_method > label {
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	display: inline;
	font-size: 0.9375rem;
	font-weight: 600;
	margin: 0;
}

form.checkout li.wc_payment_method > label img {
	max-height: 24px;
	vertical-align: middle;
	width: auto;
}

/* The gateway description sits inside the selected card, so it needs no
   callout background or pointer of its own. WooCommerce styles this through
   an id selector, so the override has to carry #payment to win. */
form.checkout #payment div.payment_box {
	background: transparent;
	border-top: 1px solid var(--wp--preset--color--line);
	border-radius: 0;
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
	margin: 0.9rem 0 0;
	padding: 0.9rem 0 0;
}

form.checkout #payment div.payment_box::before {
	display: none;
}

form.checkout #payment div.payment_box p:last-child {
	margin-bottom: 0;
}

/* A flex container so WooCommerce's floated place-order button cannot pull the
   trust row up alongside it. */
form.checkout .place-order {
	display: flex;
	flex-direction: column;
	margin: 0;
}

form.checkout #place_order {
	box-shadow: 0 0 24px rgba(var(--wp--custom--accent-rgb), 0.3);
	float: none;
	font-size: 1rem;
	padding: 0.9rem 1.5rem;
	width: 100%;
}

form.checkout #place_order:hover {
	box-shadow: 0 0 32px rgba(var(--wp--custom--accent-rgb), 0.45);
}

form.checkout .woocommerce-terms-and-conditions-wrapper {
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
	margin-bottom: 1rem;
}

form.checkout .woocommerce-privacy-policy-text p {
	margin: 0;
}

p.nofx-checkout__trust {
	color: var(--wp--preset--color--muted);
	display: flex;
	flex-wrap: wrap;
	font-size: 0.8125rem;
	gap: 0.35rem 1.1rem;
	justify-content: center;
	margin: 1rem 0 0;
}

.nofx-checkout__trust span {
	padding-left: 1.35em;
	position: relative;
}

.nofx-checkout__trust span::before {
	color: var(--wp--preset--color--success-green);
	content: "\2713";
	font-weight: 700;
	left: 0;
	position: absolute;
}

/* WooCommerce blocks its AJAX targets with a hardcoded white overlay, which
   flashes on every total refresh against this dark theme. */
.blockUI.blockOverlay {
	background: var(--wp--preset--color--paper) !important;
}

/* --- Order confirmation ------------------------------------------------- */

/* Every confirmation block renders itself alignwide regardless of the template.
   Nothing on this page is wide, so pull them back onto the text column. The
   selector has to out-specify the generated layout rule for .alignwide. */
.woocommerce-order-received main.wp-block-group > .alignwide {
	max-width: var(--wp--style--global--content-size);
}

.wc-block-order-confirmation-status h1 {
	font-size: 2rem;
	letter-spacing: -0.02em;
	margin-bottom: 0.5rem;
}

.wc-block-order-confirmation-status p {
	color: var(--wp--preset--color--muted);
	margin: 0;
}

.wc-block-order-confirmation-status-description {
	margin-top: var(--wp--preset--spacing--40);
}

ul.wc-block-order-confirmation-summary-list {
	background: var(--wp--custom--panel--bg);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	list-style: none;
	margin: 0;
	padding: var(--wp--preset--spacing--40);
}

.wc-block-order-confirmation-summary-list-item {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
}

.wc-block-order-confirmation-summary-list-item::after {
	content: none;
}

.wc-block-order-confirmation-summary-list-item__key {
	color: var(--wp--preset--color--muted);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.wc-block-order-confirmation-summary-list-item__value {
	font-family: var(--wp--preset--font-family--dm-mono);
	font-size: 0.9375rem;
	overflow-wrap: anywhere;
}

.wc-block-order-confirmation-totals__table {
	background: var(--wp--custom--panel--bg);
	border: 1px solid var(--wp--preset--color--line);
	border-collapse: collapse;
	border-radius: var(--wp--custom--radius--card);
	overflow: hidden;
	width: 100%;
}

.wc-block-order-confirmation-totals__table th,
.wc-block-order-confirmation-totals__table td {
	border: 0;
	padding: 1rem var(--wp--preset--spacing--40);
	text-align: left;
}

.wc-block-order-confirmation-totals__table thead th {
	color: var(--wp--preset--color--muted);
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.wc-block-order-confirmation-totals__table tfoot th,
.wc-block-order-confirmation-totals__table tfoot td {
	border-top: 1px solid var(--wp--preset--color--line);
}

.wc-block-order-confirmation-totals__total {
	font-family: var(--wp--preset--font-family--dm-mono);
	text-align: right !important;
	white-space: nowrap;
}

/* Subscription code card ------------------------------------------------- */

/* The card is appended to the status block's output, so it carries its own top
   margin rather than relying on block gap. */
.nofx-codes {
	background: linear-gradient(180deg, rgba(var(--wp--custom--accent-rgb), 0.09), transparent 45%),
		var(--wp--preset--color--surface);
	border: 1px solid rgba(var(--wp--custom--accent-rgb), 0.45);
	border-radius: var(--wp--custom--radius--card);
	box-sizing: border-box;
	box-shadow: var(--wp--custom--shadow--card), var(--wp--custom--shadow--glow);
	margin-top: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--50);
}

.nofx-codes--pending {
	background: var(--wp--custom--panel--bg);
	border-color: var(--wp--preset--color--line);
	box-shadow: var(--wp--custom--shadow--card);
}

.nofx-codes__badge {
	align-items: center;
	background: rgba(var(--wp--custom--accent-rgb), 0.12);
	border-radius: 999px;
	color: var(--wp--preset--color--commerce-blue);
	display: inline-flex;
	font-size: 1.25rem;
	height: 2.5rem;
	justify-content: center;
	width: 2.5rem;
}

h2.nofx-codes__title {
	font-size: 1.375rem;
	margin: 0.75rem 0 0.35rem;
}

.nofx-codes__lede {
	color: var(--wp--preset--color--muted);
	margin: 0 0 var(--wp--preset--spacing--40);
}

.nofx-codes__actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

a.nofx-codes__cta {
	background: var(--wp--preset--color--commerce-blue);
	border-radius: var(--wp--custom--radius--control);
	box-shadow: 0 0 24px rgba(var(--wp--custom--accent-rgb), 0.25);
	color: var(--wp--preset--color--deep);
	font-weight: 600;
	padding: 0.8rem 1.5rem;
	text-decoration: none;
}

a.nofx-codes__cta:hover {
	background: var(--wp--preset--color--accent-dark);
	color: var(--wp--preset--color--deep);
}

.nofx-codes__note {
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
	margin: 0;
}

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

/* Matrix rain canvas, injected by assets/js/hero-matrix.js. Background texture
   only: it sits behind the hero content, which the stagger rule below lifts to
   z-index 1. The script never creates it under prefers-reduced-motion.
 *
 * Two overrides are load-bearing, and both are why this is a descendant
 * selector rather than a bare `.hero-matrix`:
 *
 *   - `.hero-section--full > *` below matches this canvas too, at the same
 *     (0,1,0) specificity but later in the file. It would win and drop the
 *     canvas back into normal flow, on top of the content.
 *   - WordPress clamps every direct child of an `is-layout-constrained` group
 *     to `max-width: content-size` with auto side margins. That clamps an
 *     absolutely positioned box as well, so `position` alone is not enough. */
.hero-section--full > .hero-matrix {
	animation: none;
	inset: 0;
	margin: 0;
	max-width: none;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	transition: opacity 1.2s ease-in;
	z-index: 0;
	/* Fade the rain out at the top and bottom so it reads as depth rather than
	   as a band with hard edges. */
	-webkit-mask-image: linear-gradient(to bottom, transparent, #000 15%, #000 85%, transparent);
	mask-image: linear-gradient(to bottom, transparent, #000 15%, #000 85%, transparent);
}

/* Revealed only once the canvas has painted a frame, so the hero never flashes
   a static block of glyphs. Raised from 0.28 when the grid came out: the rain
   is now the hero's only texture, so it has to read as rain rather than as
   haze. The ::after scrim below is what keeps it off the copy. */
.hero-section--full > .hero-matrix.is-ready {
	opacity: 0.4;
}

/* Status dot inside the eyebrow badge; pulses only when motion is allowed. */
p.eyebrow-badge::before {
	background: currentColor;
	border-radius: 50%;
	box-shadow: 0 0 8px currentColor;
	content: "";
	display: inline-block;
	height: 0.5em;
	margin-right: 0.65em;
	vertical-align: 0.08em;
	width: 0.5em;
}

@media (prefers-reduced-motion: no-preference) {
	/* Content rises in with a stagger; z-index keeps it above the overlays. */
	.hero-section--full > * {
		animation: hero-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
		position: relative;
		z-index: 1;
	}

	.hero-section--full > :nth-child(1) {
		animation-delay: 0.1s;
	}

	.hero-section--full > :nth-child(2) {
		animation-delay: 0.25s;
	}

	.hero-section--full > :nth-child(3) {
		animation-delay: 0.4s;
	}

	.hero-section--full > :nth-child(4) {
		animation-delay: 0.55s;
	}

	.hero-section--full > :nth-child(5) {
		animation-delay: 0.7s;
	}

	@keyframes hero-rise {
		from {
			opacity: 0;
			transform: translateY(18px);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	/* Accent glow slowly breathes over the fixed radial base. Sits behind the
	   matrix canvas, so it lights the rain from behind. */
	.hero-section--full::before {
		animation: hero-glow 7s ease-in-out infinite;
		background: radial-gradient(60% 55% at 50% 0%, rgba(var(--wp--custom--accent-rgb), 0.12), transparent 70%);
		content: "";
		inset: 0;
		pointer-events: none;
		position: absolute;
	}

	/* Scrim that clears the rain out from behind the copy, so glyphs never
	 * crawl across the headline. Paired with a faint accent wash on top of it,
	 * because the scrim would otherwise flatten the centre glow that
	 * `.hero-section` paints far below this layer.
	 *
	 * Two things here are load-bearing:
	 *
	 *   - It lives inside this media block, alongside ::before. The canvas is
	 *     never created under prefers-reduced-motion (hero-matrix.js bails
	 *     early), and the `> *` rule above that lifts the content to z-index 1
	 *     is scoped here too — so a scrim defined outside would be a positioned
	 *     box painting over unpositioned hero text and would dim the copy.
	 *   - No z-index. The canvas sets z-index 0 explicitly and this stays auto,
	 *     which puts it above the canvas on tree order while the content's
	 *     z-index 1 still clears both. Giving it a z-index breaks that order. */
	.hero-section--full::after {
		background:
			radial-gradient(42% 34% at 50% 46%, rgba(var(--wp--custom--accent-rgb), 0.08), transparent 70%),
			radial-gradient(46% 40% at 50% 46%, rgba(5, 7, 10, 0.88) 35%, rgba(5, 7, 10, 0) 75%);
		content: "";
		inset: 0;
		pointer-events: none;
		position: absolute;
	}

	@keyframes hero-glow {
		0%,
		100% {
			opacity: 0.35;
		}

		50% {
			opacity: 1;
		}
	}

	p.eyebrow-badge::before {
		animation: badge-pulse 2.2s ease-in-out infinite;
	}

	@keyframes badge-pulse {
		0%,
		100% {
			box-shadow: 0 0 4px currentColor;
			opacity: 0.6;
		}

		50% {
			box-shadow: 0 0 10px currentColor;
			opacity: 1;
		}
	}

	/* CTA glow gently pulses; hover keeps its stronger static glow. */
	.hero-section--full .wp-block-button:not(.is-style-outline) .wp-block-button__link {
		animation: cta-glow 3.2s ease-in-out infinite;
	}

	.hero-section--full .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
		animation: none;
	}

	@keyframes cta-glow {
		0%,
		100% {
			box-shadow: 0 0 24px rgba(var(--wp--custom--accent-rgb), 0.35);
		}

		50% {
			box-shadow: 0 0 40px rgba(var(--wp--custom--accent-rgb), 0.55);
		}
	}

	/* Sheen band sweeps across the headline text, then rests. */
	.hero-title {
		animation: title-shimmer 8s ease-in-out infinite;
	}

	@keyframes title-shimmer {
		0%,
		45% {
			background-position: 100% 0, 0 0;
		}

		80%,
		100% {
			background-position: 0% 0, 0 0;
		}
	}

	/* Glossy streak periodically crosses the CTA. */
	.hero-section--full .wp-block-button:not(.is-style-outline) .wp-block-button__link {
		overflow: hidden;
		position: relative;
	}

	.hero-section--full .wp-block-button:not(.is-style-outline) .wp-block-button__link::before {
		animation: cta-sheen 4.6s ease-in-out infinite;
		background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.35), transparent);
		bottom: 0;
		content: "";
		left: 0;
		position: absolute;
		top: 0;
		transform: translateX(-130%) skewX(-18deg);
		width: 60%;
	}

	@keyframes cta-sheen {
		0%,
		55% {
			transform: translateX(-130%) skewX(-18deg);
		}

		100% {
			transform: translateX(320%) skewX(-18deg);
		}
	}
}