/* ==========================================================================
   Hack Halt — the theme's only stylesheet.

   Everything here reads from theme.json tokens. If a colour, size or radius
   appears as a literal below, that is a bug: it means the value has no token
   and cannot be changed from one place.
   ========================================================================== */

/* ----- base ----- */
html { -webkit-text-size-adjust: 100%; }

/* The UA hides [hidden] with display:none, which ANY author display rule
   silently beats — that is how the contact form's status overlay ended up
   sitting over the form permanently. Reassert it once, for everything. */
[hidden] { display: none !important; }

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

:where(h1, h2, h3, h4) { text-wrap: balance; }
:where(p, li) { text-wrap: pretty; }

/* Wide content must scroll inside its own box, never the document. */
:where(.wp-block-table, .wp-block-code, pre) { overflow-x: auto; }

/* ----- focus: visible, and using the brand rather than the UA default ----- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 2px;
	border-radius: var(--wp--custom--radius--s);
}

/* ----- header: utility bar + sticky main bar ----- */

.hh-topbar {
	font-size: 0.8125rem;
	color: var(--wp--preset--color--muted);
	border-block-end: 1px solid var(--wp--custom--border--subtle);
	background: var(--wp--preset--color--depth);
}
.hh-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-block-size: 40px;
	flex-wrap: wrap;
}
.hh-topbar__mail {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: inherit;
	text-decoration: none;
}
.hh-topbar__mail:hover { color: var(--wp--preset--color--primary); }
.hh-topbar__mail svg { inline-size: 15px; block-size: 15px; fill: var(--wp--preset--color--brand); }

.hh-topbar__social { display: flex; align-items: center; gap: 0.15rem; }
.hh-topbar__social a {
	display: grid;
	place-items: center;
	inline-size: 28px;
	block-size: 28px;
	border-radius: var(--wp--custom--radius--m);
	color: var(--wp--preset--color--muted);
	transition: color 140ms ease, background-color 140ms ease;
}
.hh-topbar__social svg { inline-size: 15px; block-size: 15px; fill: currentColor; }
.hh-topbar__social a:hover {
	color: var(--wp--preset--color--brand);
	background: var(--wp--custom--dim--brand);
}

/* The main bar is what stays locked to the top. The utility bar scrolls away
   with the page, which is why the two are separate elements. */
.hh-header {
	position: sticky;
	inset-block-start: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--wp--preset--color--base) 86%, transparent);
	border-block-end: 1px solid var(--wp--custom--border--subtle);
	transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
	padding-top: 0;
	padding-bottom: 0;
}

/*
 * The frosted blur sits on a pseudo-element, not on .hh-header itself.
 *
 * backdrop-filter creates a containing block for position:fixed descendants.
 * The mobile menu overlay is one — core positions it fixed with inset 0 — so
 * with the filter on the header the overlay was confined to the header's own
 * 82px box instead of the viewport: it opened, showed a sliver, and clipped
 * 611px of menu inside 128px. It looked like the menu "wouldn't pull up".
 *
 * A pseudo-element has no descendants, so it can carry the effect without
 * trapping anything.
 */
.hh-header::before {
	content: '';
	position: absolute;
	inset: 0;
	backdrop-filter: blur(12px) saturate(140%);
	pointer-events: none;
	z-index: -1;
}

/* The shrink is applied to the inner row, not to the block wrapper. WP's
   layout system owns the wrapper's padding and would not yield it — an inline
   style set on the wrapper was still reported as the wrapper's own value. */
.hh-header > .wp-block-group {
	padding-block: 1.05rem;
	transition: padding-block 200ms ease;
}
.hh-header.is-stuck > .wp-block-group { padding-block: 0.55rem; }

/* Once scrolled, the bar tightens and commits to a solid ground so text
   passing underneath never shows through. */
.hh-header.is-stuck {
	background: color-mix(in srgb, var(--wp--preset--color--base) 97%, transparent);
	border-block-end-color: var(--wp--custom--border--base);
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
}
/* Vector logo, shipped as a theme asset rather than a media-library upload.
   WordPress blocks SVG uploads by default and that default is worth keeping on
   a security product: an author-level account could otherwise upload a scripted
   SVG. Loaded through <img>, which cannot execute script regardless. */
.hh-logo { display: flex; flex: 0 0 auto; }
.hh-logo img {
	inline-size: 158px;
	block-size: auto;
	display: block;
	transition: inline-size 180ms ease;
}
.hh-header.is-stuck .hh-logo img { inline-size: 130px; }
.hh-logo--footer img { inline-size: 148px; opacity: .92; }

.hh-header .wp-block-navigation__container { gap: var(--wp--preset--spacing--30); }

/* Nav items get an underline that grows from the centre rather than a
   border that pops in. */
.hh-header .wp-block-navigation-item__content {
	position: relative;
	padding-block: 0.4rem;
	font-weight: 500;
	color: var(--wp--preset--color--secondary);
	transition: color 140ms ease;
}
.hh-header .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 50%;
	inline-size: 0;
	block-size: 2px;
	border-radius: 2px;
	background: var(--wp--preset--color--brand);
	transform: translateX(-50%);
	transition: inline-size 180ms ease;
}
.hh-header .wp-block-navigation-item__content:hover,
.hh-header .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--primary);
}
.hh-header .wp-block-navigation-item__content:hover::after,
.hh-header .current-menu-item > .wp-block-navigation-item__content::after { inline-size: 100%; }

/* Submenu keeps the :not(.has-background) scope — core defaults it to white
   and out-specifies a plain rule. */
.hh-header .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container,
.hh-header .wp-block-navigation__submenu-container {
	min-inline-size: 224px;
	padding: 0.4rem;
	background: var(--wp--preset--color--elevated);
	border: 1px solid var(--wp--custom--border--base);
	border-radius: var(--wp--custom--radius--l);
	box-shadow: var(--wp--custom--shadow--elevated);
	color: var(--wp--preset--color--primary);
	transform: translateY(6px);
	transition: opacity 160ms ease, transform 160ms ease;
}
.hh-header .has-child:hover > .wp-block-navigation__submenu-container,
.hh-header .has-child:focus-within > .wp-block-navigation__submenu-container { transform: translateY(0); }
.hh-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block;
	padding: 0.5rem 0.7rem;
	border-radius: var(--wp--custom--radius--m);
	color: var(--wp--preset--color--secondary);
}
.hh-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after { content: none; }
.hh-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--wp--custom--dim--brand);
	color: var(--wp--preset--color--primary);
}

.hh-header__cta .wp-block-button__link { padding: 0.6rem 1.15rem; white-space: nowrap; }

/*
 * The header row's measure, stated explicitly.
 *
 * WordPress normally gives this element its width through a GENERATED layout
 * class (wp-container-core-group-is-layout-…), whose CSS it emits while
 * rendering a block template. Routes that render their own document — the
 * licence server's threat pages call block_header_area() directly — never get
 * that emitted, so the row collapsed to the theme's 760px contentSize and the
 * header was visibly narrower than on every other page.
 *
 * Depending on a generated class name for something this structural was the
 * mistake. Stated here, it is the same on every route whatever renders it.
 */
.hh-header > .wp-block-group {
	max-width: min(1440px, 100%);
	margin-inline: auto;
}

/* Mobile overlay — same :not(.has-background) trap as the submenu. */
.hh-header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open,
.hh-header .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--depth);
	color: var(--wp--preset--color--primary);
	padding-block: var(--wp--preset--spacing--50);
}
.hh-header .wp-block-navigation__responsive-container.is-menu-open a { color: var(--wp--preset--color--primary); }
.hh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: var(--wp--preset--font-size--large); }
.hh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after { content: none; }
.hh-header .wp-block-navigation__responsive-container-open,
.hh-header .wp-block-navigation__responsive-container-close { color: var(--wp--preset--color--primary); }

@media (max-width: 700px) {
	.hh-topbar__mail span { display: none; }
	.hh-header__cta .wp-block-button__link { padding-inline: 0.85rem; font-size: 0.8125rem; }
}

/* ----- footer ----- */
.hh-footer {
	border-top: 1px solid var(--wp--custom--border--base);
	background: var(--wp--preset--color--depth);
	font-size: var(--wp--preset--font-size--small);
}

.hh-footer a {
	color: var(--wp--preset--color--secondary);
	text-decoration: none;
}
.hh-footer a:hover {
	color: var(--wp--preset--color--brand-bright);
	text-decoration: underline;
}

.hh-footer-heading {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

/* ----- buttons ----- */
.wp-block-button__link {
	border-radius: var(--wp--custom--radius--m);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	transition: background-color 120ms ease, color 120ms ease;
}
.wp-block-button.is-style-outline .wp-block-button__link {
	border-color: var(--wp--custom--border--strong);
}

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

/* ----- footer link lists -----
   Core has no "none" list style, so the block's className did nothing on its
   own; the markers have to come off here. */
.hh-footer ul {
	list-style: none;
	margin: 0;
	padding-left: 0;
}

/* Header must stay one row: the site title on the left, nav and CTA right.
   Below the nav's mobile breakpoint the overlay button replaces the links,
   so this never squeezes. */
.hh-header > .wp-block-group { gap: var(--wp--preset--spacing--30); }

/* Give the main region room even when a page is empty, so the footer never
   rides up under the header. */
main.wp-block-group { min-height: 40vh; padding-block: var(--wp--preset--spacing--40); }

/* ==========================================================================
   Pricing
   Markup comes from hackhalt-core; every value below is a token.
   ========================================================================== */

.hh-pricing__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
	margin-bottom: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}
.hh-pricing__cycle.is-active { color: var(--wp--preset--color--primary); font-weight: 600; }

.hh-pricing__switch {
	position: relative;
	inline-size: 46px;
	block-size: 26px;
	padding: 0;
	border: 1px solid var(--wp--custom--border--strong);
	border-radius: 999px;
	background: var(--wp--preset--color--raised);
	cursor: pointer;
	transition: background-color 140ms ease, border-color 140ms ease;
}
.hh-pricing__switch[aria-checked="true"] {
	background: var(--wp--preset--color--brand);
	border-color: var(--wp--preset--color--brand);
}
/* Centred with auto margins rather than a percentage offset: percentage
   positioning is what broke the toggle thumb in the ProSecure admin. */
.hh-pricing__thumb {
	position: absolute;
	inset-block: 0;
	margin-block: auto;
	inset-inline-start: 3px;
	inline-size: 18px;
	block-size: 18px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	transition: inset-inline-start 140ms ease;
}
.hh-pricing__switch[aria-checked="true"] .hh-pricing__thumb { inset-inline-start: 23px; }

.hh-pricing__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--wp--preset--spacing--20);
	align-items: stretch;
}

.hh-plan {
	display: flex;
	flex-direction: column;
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--custom--border--base);
	border-radius: var(--wp--custom--radius--xl);
	box-shadow: var(--wp--custom--shadow--card);
}
/* Brand crimson is taken straight from the logo (#fa285f) and is the accent
   everywhere. Severity critical was deepened to #c81e1e because the two sit
   only 16 degrees apart on the hue wheel; they now separate by lightness and
   by treatment (severity always appears as a small mono chip) rather than
   by hue alone. */
.hh-plan.is-recommended {
	border-color: var(--wp--preset--color--brand);
	box-shadow: var(--wp--custom--shadow--card), 0 0 26px var(--wp--custom--dim--brand);
}

.hh-plan__badge {
	align-self: flex-start;
	margin: 0 0 var(--wp--preset--spacing--10);
	padding: 3px 9px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand);
	background: var(--wp--custom--dim--brand);
	border: 1px solid var(--wp--preset--color--brand);
	border-radius: var(--wp--custom--radius--s);
}

.hh-plan__name { margin: 0; font-size: var(--wp--preset--font-size--large); }
.hh-plan__blurb {
	margin: 0.35rem 0 var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--small);
	min-block-size: 3.2em;
}

.hh-plan__price { display: flex; align-items: baseline; gap: 0.25rem; margin: 0; }
.hh-plan__amount {
	font-size: 2.125rem;
	font-weight: 700;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
}
.hh-plan__unit { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); }
.hh-plan__was {
	margin: 0.15rem 0 var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
}

/* The three states render as different elements — <a> for a live link, <p>
   for "coming soon", which is not a link and must not be one. A <p> inherits a
   top margin from global styles, so the coming-soon button sat 12px below its
   neighbours; the variants also measured 45/42/47px tall because one has a
   border and one uses a smaller mono face.
   Zeroing the margin and giving them all one min-height makes the row align
   regardless of which element a tier happens to use. */
.hh-plan__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	/* Tall enough that the min always governs, whatever face a variant uses —
	   otherwise the smaller mono "coming soon" label computes 1px shorter and
	   drags every row beneath it out of line. */
	min-block-size: 2.95rem;
	line-height: 1.2;
	margin: 0 0 0.4rem;
	padding: 0.65rem 1rem;
	text-align: center;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	border-radius: var(--wp--custom--radius--m);
	text-decoration: none;
	transition: background-color 140ms ease, border-color 140ms ease, transform 90ms ease;
}
/* Every variant carries a border, transparent where it is not wanted, so the
   bordered and unbordered buttons come out the same height. */
.hh-plan__cta--available {
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--base);
	border: 1px solid transparent;
}
.hh-plan__cta--available:hover { background: var(--wp--preset--color--brand-bright); }
.hh-plan__cta--contact {
	background: transparent;
	color: var(--wp--preset--color--primary);
	border: 1px solid var(--wp--custom--border--strong);
}
.hh-plan__cta--contact:hover { border-color: var(--wp--preset--color--brand); }
.hh-plan__cta--soon {
	background: var(--wp--custom--dim--medium);
	color: var(--wp--preset--color--medium);
	border: 1px solid var(--wp--preset--color--medium);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.hh-plan__note {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: 0.6875rem;
	color: var(--wp--preset--color--muted);
	text-align: center;
}

.hh-plan__heading {
	margin: var(--wp--preset--spacing--10) 0 0.4rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.hh-plan__features {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--secondary);
}
.hh-plan__features li {
	position: relative;
	padding-inline-start: 1.35rem;
	margin-bottom: 0.3rem;
}
.hh-plan__features li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.5em;
	inline-size: 6px;
	block-size: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--low);
}
/* Green = included in the tier, blue = the extras on top. Crimson stays out
   of it: it means action or emphasis, never decoration. */
.hh-plan__features--also li::before { background: var(--wp--preset--color--info); }
.hh-plan__features--also { margin-bottom: 0; }

/* Reserved badge row on unflagged cards: occupies the space, shows nothing. */
.hh-plan__badge--empty {
	visibility: hidden;
	border-color: transparent;
	background: transparent;
}

/* ==========================================================================
   Comparison table
   ========================================================================== */

.hh-cmp {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--wp--custom--border--base);
	border-radius: var(--wp--custom--radius--xl);
	background: var(--wp--preset--color--surface);
}

.hh-cmp table {
	inline-size: 100%;
	min-inline-size: 680px;   /* below this it scrolls rather than crushing */
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small);
}

.hh-cmp th,
.hh-cmp td {
	padding: 0.7rem 1.05rem;
	text-align: start;
	border-block-end: 1px solid var(--wp--custom--border--subtle);
	vertical-align: middle;
}

.hh-cmp thead th {
	position: sticky;
	inset-block-start: 0;
	z-index: 2;
	background: var(--wp--preset--color--depth);
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}
.hh-cmp thead th a { text-decoration: none; color: inherit; }
.hh-cmp thead th a:hover { color: var(--wp--preset--color--brand-bright); }

.hh-cmp tbody th {
	font-weight: 400;
	color: var(--wp--preset--color--primary);
}

.hh-cmp td { text-align: center; inline-size: 15%; }

.hh-cmp__group th {
	background: var(--wp--preset--color--depth);
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* The emphasised column is the one crimson moment in the table. */
.hh-cmp thead th.is-highlight { color: var(--wp--preset--color--brand); }
.hh-cmp td.is-highlight { background: var(--wp--custom--dim--brand); }

.hh-cmp__yes { color: var(--wp--preset--color--low); font-weight: 700; font-size: 1.05rem; }
.hh-cmp__no { color: var(--wp--preset--color--muted); }
.hh-cmp__text { color: var(--wp--preset--color--secondary); font-size: 0.8125rem; }

.hh-cmp tbody tr:last-child th,
.hh-cmp tbody tr:last-child td { border-block-end: 0; }
.hh-cmp tbody tr:hover td:not(.is-highlight),
.hh-cmp tbody tr:hover th { background: rgba(255, 255, 255, 0.02); }

/* ==========================================================================
   Product pages
   ========================================================================== */

/* Product screenshots are UI, so they get a frame rather than sitting loose
   on the page background. */
.hh-shot img {
	inline-size: 100%;
	block-size: auto;
	border: 1px solid var(--wp--custom--border--base);
	border-radius: var(--wp--custom--radius--l);
	box-shadow: var(--wp--custom--shadow--card);
}
.hh-shot { margin-block: var(--wp--preset--spacing--40); }

/* FAQ accordion
   Spans the wide measure like every other component. Constrained to the prose
   width it sat 760px wide beside 1440px grids, leaving 680px of dead space to
   its right. The answer text keeps a readable measure inside the full-width
   row, so nothing runs long. */
main .wp-block-post-content.is-layout-constrained > .hh-faq {
	max-inline-size: var(--wp--style--global--wide-size);
}

.hh-faq {
	border: 1px solid var(--wp--custom--border--base);
	border-radius: var(--wp--custom--radius--xl);
	background: var(--wp--preset--color--surface);
	overflow: hidden;
	margin-block-start: var(--wp--preset--spacing--30);
}
.hh-faq .wp-block-details {
	border-block-end: 1px solid var(--wp--custom--border--subtle);
	padding: 0;
}
.hh-faq .wp-block-details:last-child { border-block-end: 0; }

.hh-faq summary {
	cursor: pointer;
	list-style: none;
	padding: 1rem 1.3rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
}
.hh-faq summary::-webkit-details-marker { display: none; }
.hh-faq summary::after {
	content: "+";
	color: var(--wp--preset--color--brand);
	font-size: 1.35rem;
	line-height: 1;
	flex: 0 0 auto;
}
.hh-faq details[open] summary::after { content: "\2013"; }
.hh-faq summary:hover { background: rgba(255, 255, 255, 0.03); }
.hh-faq .wp-block-details > :not(summary) {
	padding: 0 1.3rem 1.15rem;
	margin: 0;
	max-inline-size: 78ch;
	color: var(--wp--preset--color--secondary);
}
.hh-faq summary { font-size: var(--wp--preset--font-size--medium); }

/* ==========================================================================
   Home
   ========================================================================== */

.hh-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand);
	margin-block-end: 0.9rem;
}

/* Card grid. Two column counts, both auto-fitting, so a card never ends up
   alone on a row at an awkward width. */
/* Explicit column counts, not auto-fit.
   auto-fit packs as many columns as will fit, so six cards became a row of
   four and a row of two with two empty slots — the rows never matched. Fixed
   counts that step down at breakpoints keep every row full. */
.hh-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--20);
}
.hh-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hh-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1080px) {
	.hh-grid, .hh-grid--3, .hh-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.hh-grid, .hh-grid--2, .hh-grid--3, .hh-grid--4 { grid-template-columns: 1fr; }
}

/* The query loop renders its own wrapper inside the grid, so the post
   template has to become the grid rather than nesting one inside it. */
.hh-grid .wp-block-query,
.hh-grid .wp-block-post-template { display: contents; }

.hh-card {
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--custom--border--base);
	border-radius: var(--wp--custom--radius--xl);
	transition: border-color 140ms ease, transform 140ms ease;
}
.hh-card:hover {
	border-color: var(--wp--custom--border--accent);
	transform: translateY(-2px);
}
.hh-card h3 {
	margin-block: 0 0.5rem;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 650;
}
.hh-card h3 a { text-decoration: none; color: inherit; }
.hh-card h3 a:hover { color: var(--wp--preset--color--brand-bright); }
.hh-card p {
	margin: 0;
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--small);
}

.hh-cta {
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	background: linear-gradient(180deg, var(--wp--preset--color--raised), var(--wp--preset--color--surface));
	border: 1px solid var(--wp--custom--border--base);
	border-radius: var(--wp--custom--radius--xl);
	text-align: center;
}
.hh-cta .wp-block-buttons { justify-content: center; }

@media (prefers-reduced-motion: reduce) { .hh-card:hover { transform: none; } }

/* Core's flow layout gives every child except the first a top margin. Inside
   a grid that applies per item, so cards 2..n sit lower than card 1 and the
   row reads as staggered. The grid's own gap does this spacing instead. */
.hh-grid > *,
.hh-grid .wp-block-post-template > * { margin-block-start: 0; }

/* Where-to-go-next cards */
.hh-next { margin-block-start: var(--wp--preset--spacing--30); }
.hh-next__eyebrow {
	margin: 0 0 0.35rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand);
}
.hh-next h3 { margin: 0 0 0.4rem; font-size: var(--wp--preset--font-size--medium); }

/* ==========================================================================
   Contact page
   ========================================================================== */

/* ---- hero ---- */
.hh-chero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
	gap: var(--wp--preset--spacing--40);
	align-items: center;
	padding-block: var(--wp--preset--spacing--30) var(--wp--preset--spacing--20);
}
.hh-chero__title {
	margin-block: 0.7rem 0.9rem;
	font-size: clamp(2.3rem, 4.6vw, 3.6rem);
	line-height: 1.02;
	letter-spacing: -0.035em;
	text-wrap: balance;
}
.hh-chero__lead {
	margin: 0;
	max-inline-size: 46ch;
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--large);
}
.hh-chero__art svg { inline-size: 100%; block-size: auto; display: block; }
@media (max-width: 860px) {
	.hh-chero { grid-template-columns: 1fr; }
	.hh-chero__art { order: -1; max-inline-size: 380px; }
}

.hh-pill {
	display: inline-block;
	margin: 0;
	padding: 0.35rem 0.85rem;
	border: 1px solid var(--wp--preset--color--brand);
	border-radius: 999px;
	background: var(--wp--custom--dim--brand);
	color: var(--wp--preset--color--brand);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}
.hh-dot {
	display: inline-block;
	inline-size: 0.42em;
	block-size: 0.42em;
	margin-inline-start: 0.12em;
	border-radius: 50%;
	background: var(--wp--preset--color--brand);
	vertical-align: baseline;
}

/* ---- two-column body ---- */
.hh-contact {
	display: grid;
	grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--30);
	align-items: start;
}
@media (max-width: 900px) { .hh-contact { grid-template-columns: 1fr; } }

.hh-contact__form {
	padding: var(--wp--preset--spacing--40);
	background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 40%), var(--wp--preset--color--surface);
	border: 1px solid var(--wp--custom--border--base);
	border-radius: var(--wp--custom--radius--xl);
}
.hh-underline {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--x-large);
	letter-spacing: -0.02em;
}
.hh-underline::after {
	content: "";
	display: block;
	inline-size: 46px;
	block-size: 3px;
	margin-block-start: 0.7rem;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--wp--preset--color--brand), transparent);
}

/* ---- fields ---- */
.hh-form { position: relative; max-inline-size: none; }
.hh-form__pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--wp--preset--spacing--20); }
@media (max-width: 620px) { .hh-form__pair { grid-template-columns: 1fr; } }

.hh-field { position: relative; margin-block-end: var(--wp--preset--spacing--20); }
.hh-field__icon {
	position: absolute;
	inset-inline-start: 0.95rem;
	inset-block-start: 0.92rem;
	inline-size: 17px;
	block-size: 17px;
	pointer-events: none;
	color: var(--wp--preset--color--brand);
}
.hh-field--area .hh-field__icon { inset-block-start: 0.95rem; }
.hh-field__icon svg { inline-size: 100%; block-size: 100%; fill: currentColor; display: block; }

.hh-form input[type="text"],
.hh-form input[type="email"],
.hh-form textarea {
	/* Form controls compute as content-box here despite the global reset, so
	   width:100% plus 62px of padding overflowed the card by 23px. */
	box-sizing: border-box;
	inline-size: 100%;
	padding: 0.85rem 1rem 0.85rem 2.9rem;
	color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--depth);
	border: 1px solid var(--wp--custom--border--base);
	border-radius: var(--wp--custom--radius--l);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	transition: border-color 140ms ease, box-shadow 140ms ease;
}
.hh-form textarea { resize: vertical; min-block-size: 9rem; }
.hh-form ::placeholder { color: var(--wp--preset--color--muted); opacity: 1; }
.hh-form input:focus, .hh-form textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--brand);
	box-shadow: 0 0 0 3px var(--wp--custom--dim--brand);
}

.hh-form__trap {
	position: absolute;
	inline-size: 1px; block-size: 1px;
	overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ---- submit row ---- */
.hh-form__foot {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	flex-wrap: wrap;
	margin-block-start: var(--wp--preset--spacing--10);
}
.hh-form__submit {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.85rem 1.5rem;
	font: inherit;
	font-weight: 650;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--base);
	background: linear-gradient(100deg, var(--wp--preset--color--brand), #ff6f95);
	border: 0;
	border-radius: var(--wp--custom--radius--l);
	cursor: pointer;
	box-shadow: 0 6px 22px rgba(250, 40, 95, 0.28);
	transition: transform 90ms ease, box-shadow 140ms ease, filter 140ms ease;
}
.hh-form__submit:hover { filter: brightness(1.06); box-shadow: 0 8px 26px rgba(250, 40, 95, 0.36); }
.hh-form__submit:active { transform: translateY(1px); }
.hh-form__submit-icon { inline-size: 16px; block-size: 16px; }
.hh-form__submit-icon svg { inline-size: 100%; block-size: 100%; fill: currentColor; display: block; }

.hh-form__assure {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin: 0;
	max-inline-size: 24ch;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
}
.hh-form__assure svg { inline-size: 15px; block-size: 15px; fill: var(--wp--preset--color--brand); display: block; margin-block-start: 1px; }

/* ---- overlay: only while sending ---- */
.hh-form__overlay[hidden] { display: none; }
.hh-form__overlay:not([hidden]) {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding: var(--wp--preset--spacing--30);
	background: color-mix(in srgb, var(--wp--preset--color--surface) 84%, transparent);
	backdrop-filter: blur(3px);
	border-radius: var(--wp--custom--radius--l);
	text-align: center;
}
.hh-form__status { margin: 0; font-weight: 600; }
.hh-form[data-state="success"] .hh-form__status { color: var(--wp--preset--color--low); }
.hh-form[data-state="error"] .hh-form__status { color: var(--wp--preset--color--critical); }
.hh-form[data-state="sending"] .hh-form__status { color: var(--wp--preset--color--secondary); }

/* ---- assurance cards ---- */
.hh-contact__aside { display: grid; gap: var(--wp--preset--spacing--20); }
.hh-assure {
	display: flex;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--custom--border--base);
	border-radius: var(--wp--custom--radius--xl);
	transition: border-color 160ms ease;
}
.hh-assure:hover { border-color: var(--wp--custom--border--accent); }
.hh-assure__icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	inline-size: 46px;
	block-size: 46px;
	border-radius: var(--wp--custom--radius--l);
	background: var(--wp--custom--dim--brand);
	border: 1px solid var(--wp--custom--border--accent);
	color: var(--wp--preset--color--brand);
}
.hh-assure__icon svg { inline-size: 22px; block-size: 22px; fill: currentColor; display: block; }
.hh-assure h3 { margin: 0 0 0.3rem; font-size: var(--wp--preset--font-size--medium); }
.hh-assure p { margin: 0; color: var(--wp--preset--color--secondary); font-size: var(--wp--preset--font-size--small); }

/* ---- urgent band ---- */
.hh-urgent {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: var(--wp--preset--spacing--30);
	align-items: center;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--custom--border--accent);
	border-radius: var(--wp--custom--radius--xl);
	background:
		radial-gradient(60% 140% at 8% 50%, rgba(250,40,95,.16), transparent 70%),
		var(--wp--preset--color--surface);
}
.hh-urgent__icon { inline-size: 58px; block-size: 58px; color: var(--wp--preset--color--brand); opacity: .85; }
.hh-urgent__icon svg { inline-size: 100%; block-size: 100%; display: block; }
.hh-urgent__text h2 { margin: 0 0 0.3rem; font-size: var(--wp--preset--font-size--large); }
.hh-urgent__text p { margin: 0; color: var(--wp--preset--color--secondary); font-size: var(--wp--preset--font-size--small); }
.hh-urgent__flag { color: var(--wp--preset--color--brand); font-weight: 700; }
.hh-urgent__list {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--secondary);
}
.hh-urgent__list li { display: flex; align-items: center; gap: 0.5rem; white-space: nowrap; }
.hh-urgent__list li + li { padding-inline-start: var(--wp--preset--spacing--30); border-inline-start: 1px solid var(--wp--custom--border--base); }
.hh-urgent__list svg { inline-size: 17px; block-size: 17px; color: var(--wp--preset--color--brand); display: block; }
@media (max-width: 1080px) {
	.hh-urgent { grid-template-columns: auto minmax(0,1fr); }
	.hh-urgent__list { grid-column: 1 / -1; flex-wrap: wrap; }
	.hh-urgent__list li + li { padding-inline-start: 0; border-inline-start: 0; }
}
@media (max-width: 620px) {
	.hh-urgent { grid-template-columns: 1fr; text-align: start; }
	.hh-urgent__icon { inline-size: 44px; block-size: 44px; }
}

/* ==========================================================================
   Depth and rhythm

   The first pass rendered every section on the same flat ground at the same
   width, so nothing had more weight than anything else and the page read as a
   list. These give the page a spine: an atmospheric glow behind the hero,
   alternating full-bleed bands, and cards that are lit rather than outlined.
   ========================================================================== */

/* Ambient glow behind the top of the page, tinted to the brand. Painted on a
   pseudo-element so it never intercepts a click. */
body::before {
	content: "";
	position: fixed;
	inset-block-start: -18vh;
	inset-inline: 0;
	block-size: 70vh;
	pointer-events: none;
	z-index: 0;
	background:
		radial-gradient(60% 55% at 22% 0%, rgba(250, 40, 95, 0.16), transparent 70%),
		radial-gradient(45% 45% at 78% 8%, rgba(59, 130, 246, 0.12), transparent 70%);
}
#pxl-main, .wp-site-blocks { position: relative; z-index: 1; }

/* Full-bleed alternating band. */
.hh-band {
	position: relative;
	padding-block: var(--wp--preset--spacing--60);
	background: var(--wp--preset--color--depth);
	border-block: 1px solid var(--wp--custom--border--subtle);
}
.hh-band--flush { margin-block-start: var(--wp--preset--spacing--60); }

/* Hero: text and product shot side by side instead of a lone text column. */
.hh-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--50);
	align-items: center;
}
.hh-hero__figure {
	position: relative;
	border: 1px solid var(--wp--custom--border--base);
	border-radius: var(--wp--custom--radius--xl);
	overflow: hidden;
	box-shadow: var(--wp--custom--shadow--elevated), 0 0 60px rgba(250, 40, 95, 0.10);
}
.hh-hero__figure img { display: block; inline-size: 100%; block-size: auto; }
.hh-hero__figure::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(160deg, transparent 55%, rgba(7, 12, 24, 0.55));
	pointer-events: none;
}
@media (max-width: 860px) {
	.hh-hero { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--40); }
}

/* Headline weight: the hero should not be the same size as a section title. */
.hh-hero h1 {
	font-size: clamp(2.4rem, 5.2vw, 3.9rem);
	line-height: 1.03;
	letter-spacing: -0.033em;
}

/* Cards, lit rather than outlined. */
.hh-card {
	position: relative;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 42%),
		var(--wp--preset--color--surface);
	overflow: hidden;
}
.hh-card::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	block-size: 1px;
	background: linear-gradient(90deg, transparent, rgba(250, 40, 95, 0.55), transparent);
	opacity: 0;
	transition: opacity 160ms ease;
}
.hh-card:hover::before { opacity: 1; }
.hh-card:hover { border-color: var(--wp--custom--border--strong); }

/* Section headings get an accent rule so a new section is visible at a glance. */
.hh-band h2::before,
.hh-lede h2::before {
	content: "";
	display: block;
	inline-size: 34px;
	block-size: 3px;
	margin-block-end: 0.85rem;
	border-radius: 2px;
	background: var(--wp--preset--color--brand);
}

/* ==========================================================================
   Icon cards and alternating split sections
   ========================================================================== */

.hh-card--icon { padding-block-start: var(--wp--preset--spacing--30); }
.hh-card__icon {
	display: grid;
	place-items: center;
	inline-size: 46px;
	block-size: 46px;
	margin-block-end: var(--wp--preset--spacing--20);
	border-radius: var(--wp--custom--radius--l);
	background: var(--wp--custom--dim--brand);
	border: 1px solid var(--wp--custom--border--accent);
}
.hh-card__icon img { inline-size: 26px; block-size: 26px; display: block; }

@media (max-width: 860px) {
	.hh-split { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--30); }
}

/* ==========================================================================
   Blog: archive cards, article layout
   ========================================================================== */

.hh-card--post { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.hh-card__media { margin: 0; }
.hh-card__media img { display: block; inline-size: 100%; block-size: 190px; object-fit: cover; }
.hh-card--post > :not(.hh-card__media) { padding-inline: var(--wp--preset--spacing--30); }
.hh-card--post > .hh-eyebrow { padding-block-start: var(--wp--preset--spacing--30); margin-block-end: 0.3rem; }
.hh-card--post h2 { margin-block: 0 0.5rem; font-size: var(--wp--preset--font-size--medium); font-weight: 650; }
.hh-card--post h2 a { text-decoration: none; color: inherit; }
.hh-card--post h2 a:hover { color: var(--wp--preset--color--brand-bright); }
.hh-card--post .wp-block-post-excerpt { margin: 0; color: var(--wp--preset--color--secondary); font-size: var(--wp--preset--font-size--small); }
.hh-card__date {
	margin-block: auto 0;
	padding-block: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--muted);
}

.hh-article-head .wp-block-post-title { margin-block: 0.5rem 0.75rem; }
.hh-article-meta {
	gap: 0.85rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--muted);
}
.hh-article-meta a { color: inherit; text-decoration: none; }
.hh-article-meta a:hover { color: var(--wp--preset--color--brand-bright); }

/* Long-form reading: give the body copy real air. */
.wp-block-post-content > p { line-height: 1.72; }
.wp-block-post-content > h2 { margin-block-start: var(--wp--preset--spacing--50); }
.wp-block-post-content > h3 { margin-block-start: var(--wp--preset--spacing--40); }
.wp-block-post-content blockquote {
	margin-inline: 0;
	padding-inline-start: var(--wp--preset--spacing--30);
	border-inline-start: 3px solid var(--wp--preset--color--brand);
	color: var(--wp--preset--color--secondary);
}

.hh-postnav {
	padding-block-start: var(--wp--preset--spacing--30);
	border-block-start: 1px solid var(--wp--custom--border--base);
	font-size: var(--wp--preset--font-size--small);
}
.hh-postnav a { text-decoration: none; }

/* Search + pagination */
.wp-block-search__input {
	padding: 0.6rem 0.8rem;
	color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--depth);
	border: 1px solid var(--wp--custom--border--strong);
	border-radius: var(--wp--custom--radius--m);
}
.wp-block-search__button {
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--base);
	border: 0;
	border-radius: var(--wp--custom--radius--m);
	font-weight: 600;
	padding-inline: 1.1rem;
}
.wp-block-query-pagination { gap: 0.4rem; font-size: var(--wp--preset--font-size--small); }
.wp-block-query-pagination a, .wp-block-query-pagination .current {
	padding: 0.35rem 0.7rem;
	border-radius: var(--wp--custom--radius--m);
	text-decoration: none;
	border: 1px solid var(--wp--custom--border--base);
}
.wp-block-query-pagination .current { background: var(--wp--custom--dim--brand); border-color: var(--wp--preset--color--brand); }

/* Grid items fill their row via align-items: stretch, which is the default.
   An explicit block-size:100% on top of that made every card ~24px taller
   than its own grid row, so each row overlapped the next by that much. */
.hh-grid { align-items: stretch; }
.hh-card--post { justify-content: flex-start; }

/* A sticky element can only travel inside its containing block. The header
   template part renders as <header class="wp-block-template-part"> wrapping
   only the header itself, so the sticky bar had a box its own height to move
   in and scrolled away immediately — it computed as `sticky` while never
   sticking. display:contents promotes the bars to children of .wp-site-blocks,
   whose box is the whole page. */
header.wp-block-template-part { display: contents; }

/* ==========================================================================
   Motion

   Elements are hidden by [data-reveal], an attribute only motion.js sets, and
   only on elements it is actively observing. If the script never runs, or the
   observer never fires, nothing is ever hidden — the page just renders without
   the entrance. A missed animation is acceptable; invisible content is not.
   ========================================================================== */

[data-reveal]:not(.is-in) {
	opacity: 0;
	transform: translateY(14px);
}
[data-reveal] {
	transition: opacity 520ms cubic-bezier(.22,.61,.36,1) var(--hh-delay, 0ms),
	            transform 520ms cubic-bezier(.22,.61,.36,1) var(--hh-delay, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	[data-reveal]:not(.is-in) { opacity: 1; transform: none; }
	[data-reveal] { transition: none; }
}

/* ==========================================================================
   Metrics band
   ========================================================================== */

.hh-metrics {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--20);
}
.hh-metric {
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--custom--border--base);
	border-radius: var(--wp--custom--radius--xl);
	background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 45%), var(--wp--preset--color--surface);
}
.hh-metric__figure {
	margin: 0;
	font-size: clamp(1.9rem, 3.4vw, 2.6rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--primary);
}
.hh-metric__label {
	margin: 0.55rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--secondary);
}
.hh-metric__note {
	margin: 0.3rem 0 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.625rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

/* Buttons get a little physicality on press. */
.wp-block-button__link, .hh-plan__cta, .hh-form__submit {
	transition: background-color 140ms ease, transform 90ms ease, box-shadow 140ms ease;
}
.wp-block-button__link:active, .hh-plan__cta:active, .hh-form__submit:active { transform: translateY(1px); }
.hh-plan { transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease; }
.hh-plan:hover { transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) {
	.hh-plan:hover, .hh-card:hover { transform: none; }
}

/* Logo and nav read as one left-hand unit, with the CTA pushed right. The
   gap is what separates the wordmark from the first link. */
/* WP writes its own blockGap onto the container, so the separation between
   the wordmark and the first link has to be set with matching specificity. */
.hh-header .hh-header__left.wp-block-group {
	flex: 1 1 auto;
	min-inline-size: 0;
	gap: clamp(1.5rem, 3vw, 3rem);
}
.hh-header__left .wp-block-navigation { flex: 0 1 auto; }
.hh-header .wp-block-buttons { flex: 0 0 auto; margin-inline-start: var(--wp--preset--spacing--30); }

.hh-plan__note--empty { visibility: hidden; }

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */

.hh-crumbs { margin-block-end: var(--wp--preset--spacing--30); }
.hh-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.45rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
.hh-crumbs li + li::before {
	content: "/";
	margin-inline-end: 0.45rem;
	color: var(--wp--custom--border--strong);
}
.hh-crumbs a { color: inherit; text-decoration: none; }
.hh-crumbs a:hover { color: var(--wp--preset--color--brand); }
.hh-crumbs [aria-current="page"] { color: var(--wp--preset--color--secondary); }

/* ==========================================================================
   Tier summary cards
   ========================================================================== */

.hh-tiers {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--20);
	align-items: stretch;
}
@media (max-width: 1000px) { .hh-tiers { grid-template-columns: 1fr; } }
.hh-tier {
	display: flex;
	flex-direction: column;
	padding: var(--wp--preset--spacing--30);
	background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 40%), var(--wp--preset--color--surface);
	border: 1px solid var(--wp--custom--border--base);
	border-radius: var(--wp--custom--radius--xl);
	transition: border-color 160ms ease, transform 160ms ease;
}
.hh-tier:hover { border-color: var(--wp--custom--border--accent); transform: translateY(-2px); }
.hh-tier--prosecure { border-color: var(--wp--custom--border--accent); }

.hh-tier__eyebrow {
	margin: 0 0 0.5rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand);
}
.hh-tier h3 { margin: 0 0 0.35rem; font-size: var(--wp--preset--font-size--large); }
.hh-tier h3 a { text-decoration: none; color: inherit; }
.hh-tier h3 a:hover { color: var(--wp--preset--color--brand-bright); }
.hh-tier__for {
	margin: 0 0 var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}
.hh-tier__body {
	margin: 0 0 var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--small);
}
.hh-tier__proof {
	margin: 0 0 var(--wp--preset--spacing--20);
	padding-inline-start: 0.85rem;
	border-inline-start: 2px solid var(--wp--preset--color--brand);
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
}
.hh-tier__link {
	margin-block-start: auto;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--brand-bright);
	text-decoration: none;
}
.hh-tier__link:hover { color: var(--wp--preset--color--brand); }

/* ---- how it works: the request pipeline ---- */
.hh-flow {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--20);
	counter-reset: hh-step;
}
.hh-flow__step {
	position: relative;
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--custom--border--base);
	border-radius: var(--wp--custom--radius--xl);
}
.hh-flow__step::before {
	counter-increment: hh-step;
	content: counter(hh-step);
	display: grid;
	place-items: center;
	inline-size: 28px;
	block-size: 28px;
	margin-block-end: var(--wp--preset--spacing--20);
	border-radius: 50%;
	background: var(--wp--custom--dim--brand);
	border: 1px solid var(--wp--preset--color--brand);
	color: var(--wp--preset--color--brand);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	font-weight: 700;
}
.hh-flow__step h3 { margin: 0 0 0.35rem; font-size: var(--wp--preset--font-size--medium); }
.hh-flow__step p { margin: 0; color: var(--wp--preset--color--secondary); font-size: var(--wp--preset--font-size--small); }
@media (prefers-reduced-motion: reduce) { .hh-tier:hover { transform: none; } }

/* ==========================================================================
   Reading column alignment

   Wide blocks cap at the wide size and centre themselves, while narrow
   children were centring inside the full-width content box — two different
   left edges on the same page, with headings against the gutter and their own
   body copy floating in the middle.

   Making the content box itself the wide measure, then anchoring its children
   to its left edge, gives the whole page one spine: heading, paragraph, card
   grid and table all start at the same x.
   ========================================================================== */

main .wp-block-post-content.is-layout-constrained {
	max-inline-size: var(--wp--style--global--wide-size);
	margin-inline: auto;
}
main .wp-block-post-content.is-layout-constrained
	> :where(:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright)):not(.hh-scanner-wrap):not([class*='hh-scanner']) {
	/*
	 * WP writes margin-left/right:auto with !important on constrained
	 * children, so anchoring them takes the same weight.
	 *
	 * Plugin-rendered blocks are excluded. The licence server's scanner sets
	 * its own "margin: 32px auto" to centre a 780px panel, and this rule was
	 * overriding it — the scanner sat hard against the left edge of a
	 * 1568px column, which is what "left justified and locked width" was.
	 * A theme should anchor its own content, not seize the layout of a block
	 * it did not render.
	 */
	margin-inline: 0 !important;
}

/* A long read is more comfortable as a centred column, so posts keep the
   traditional behaviour. */
.single main .wp-block-post-content.is-layout-constrained
	> :where(:not(.alignwide):not(.alignfull)) {
	margin-inline: auto !important;
}

/* ==========================================================================
   Atmosphere

   A single fixed layer behind everything: a fine grid that fades out, plus two
   drifting light sources. Painted with gradients on one pseudo-element — no
   images, no canvas, no per-frame JavaScript.
   ========================================================================== */

body::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background:
		/* light sources */
		radial-gradient(48% 38% at 18% -6%, rgba(250, 40, 95, 0.20), transparent 72%),
		radial-gradient(42% 36% at 82% 2%, rgba(59, 130, 246, 0.16), transparent 72%),
		radial-gradient(60% 40% at 50% 104%, rgba(34, 211, 238, 0.07), transparent 70%);
}

/* The grid is its own layer so it can be masked independently of the glow. */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.028) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
	background-size: 64px 64px;
	-webkit-mask-image: radial-gradient(78% 58% at 50% 0%, #000 0%, transparent 78%);
	mask-image: radial-gradient(78% 58% at 50% 0%, #000 0%, transparent 78%);
}

/* ==========================================================================
   Device chrome for product screenshots

   A bare screenshot on a dark page reads as a placeholder. A title bar and a
   real border read as software.
   ========================================================================== */

.hh-frame {
	position: relative;
	border: 1px solid var(--wp--custom--border--strong);
	border-radius: var(--wp--custom--radius--xl);
	background: var(--wp--preset--color--depth);
	overflow: hidden;
	box-shadow: var(--wp--custom--shadow--elevated), 0 0 70px rgba(250, 40, 95, 0.09);
}
.hh-frame__bar {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.6rem 0.85rem;
	background: var(--wp--preset--color--base);
	border-block-end: 1px solid var(--wp--custom--border--base);
}
.hh-frame__dot {
	inline-size: 9px;
	block-size: 9px;
	border-radius: 50%;
	background: var(--wp--custom--border--strong);
	flex: 0 0 auto;
}
.hh-frame__dot:first-child { background: rgba(250, 40, 95, 0.55); }
.hh-frame__label {
	margin-inline-start: 0.5rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.hh-frame img { display: block; inline-size: 100%; block-size: auto; }

/* ==========================================================================
   Typography with some drama
   ========================================================================== */

.hh-hero h1 {
	font-size: clamp(2.6rem, 5.6vw, 4.4rem);
	line-height: 0.99;
	letter-spacing: -0.038em;
}

/* One accented span per headline, never more. */
.hh-accent {
	background: linear-gradient(100deg, var(--wp--preset--color--brand) 0%, #ff7aa2 55%, var(--wp--preset--color--brand-bright) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
@supports not (background-clip: text) {
	.hh-accent { color: var(--wp--preset--color--brand); }
}

/* ==========================================================================
   Live traffic strip
   ========================================================================== */

.hh-feed {
	border: 1px solid var(--wp--custom--border--base);
	border-radius: var(--wp--custom--radius--xl);
	background: var(--wp--preset--color--depth);
	overflow: hidden;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
}
.hh-feed__head {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.7rem 1rem;
	border-block-end: 1px solid var(--wp--custom--border--base);
	background: var(--wp--preset--color--base);
}
.hh-feed__live {
	inline-size: 7px;
	block-size: 7px;
	border-radius: 50%;
	background: var(--wp--preset--color--low);
	box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55);
	animation: hh-pulse 2.4s ease-out infinite;
}
@keyframes hh-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
	70%  { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); }
	100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
.hh-feed__title { font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.6875rem; color: var(--wp--preset--color--primary); }
.hh-feed__note { margin-inline-start: auto; font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--muted); }

.hh-feed__rows { list-style: none; margin: 0; padding: 0; }
.hh-feed__row {
	display: grid;
	grid-template-columns: 2.2rem 3.2rem minmax(0, 1fr) minmax(0, 1fr) 5.5rem;
	gap: 0.75rem;
	align-items: center;
	padding: 0.55rem 1rem;
	border-block-end: 1px solid var(--wp--custom--border--subtle);
	color: var(--wp--preset--color--secondary);
}
.hh-feed__row:last-child { border-block-end: 0; }
.hh-feed__cc { color: var(--wp--preset--color--muted); }
.hh-feed__method { color: var(--wp--preset--color--cyan); }
.hh-feed__path { color: var(--wp--preset--color--primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hh-feed__rule { color: var(--wp--preset--color--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hh-feed__decision {
	justify-self: end;
	padding: 2px 8px;
	border-radius: var(--wp--custom--radius--s);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.hh-feed__row--blocked   .hh-feed__decision { color: var(--wp--preset--color--critical); background: var(--wp--custom--dim--critical); }
.hh-feed__row--allowed   .hh-feed__decision { color: var(--wp--preset--color--low);      background: var(--wp--custom--dim--low); }
.hh-feed__row--throttled .hh-feed__decision { color: var(--wp--preset--color--medium);   background: var(--wp--custom--dim--medium); }

@media (max-width: 720px) {
	.hh-feed__row { grid-template-columns: 2rem 2.8rem minmax(0,1fr) 5rem; }
	.hh-feed__rule { display: none; }
}
@media (prefers-reduced-motion: reduce) { .hh-feed__live { animation: none; } }

/* ==========================================================================
   Section headings

   The accent rule under a section title is what ties the pages together —
   applied once here rather than per page.
   ========================================================================== */

main .wp-block-post-content > h2,
.hh-band > h2,
.hh-underline {
	position: relative;
	padding-block-end: 0.85rem;
}
main .wp-block-post-content > h2::after,
.hh-band > h2::after,
.hh-underline::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	inline-size: 46px;
	block-size: 3px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--wp--preset--color--brand), transparent);
}
/* The older ::before rule is superseded by the underline above. */
.hh-band h2::before, .hh-lede h2::before { content: none; }
.hh-underline::after { inset-block-end: 0; }
.hh-cta h2::after { display: none; }

@media (max-width: 1080px) {
	.hh-metrics, .hh-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
	.hh-metrics, .hh-flow { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Capability tiles
   ========================================================================== */

.hh-cap { display: flex; flex-direction: column; }
.hh-cap__icon {
	display: grid;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	margin-block-end: var(--wp--preset--spacing--20);
	border-radius: var(--wp--custom--radius--l);
	background: var(--wp--custom--dim--brand);
	border: 1px solid var(--wp--custom--border--accent);
	color: var(--wp--preset--color--brand);
	flex: 0 0 auto;
}
.hh-cap__icon svg { inline-size: 21px; block-size: 21px; display: block; }
.hh-cap h3 { margin: 0 0 0.4rem; font-size: var(--wp--preset--font-size--medium); font-weight: 650; }
.hh-cap p { margin: 0; color: var(--wp--preset--color--secondary); font-size: var(--wp--preset--font-size--small); }
.hh-cap__tier {
	margin-block-start: auto !important;
	padding-block-start: var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.625rem !important;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand) !important;
}

/* ==========================================================================
   ProSecure module map — dense on purpose
   ========================================================================== */

.hh-map {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--20);
	align-items: stretch;
}
.hh-map__group {
	display: flex;
	flex-direction: column;
	padding: var(--wp--preset--spacing--30);
	background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 38%), var(--wp--preset--color--surface);
	border: 1px solid var(--wp--custom--border--base);
	border-radius: var(--wp--custom--radius--xl);
	transition: border-color 160ms ease;
}
.hh-map__group:hover { border-color: var(--wp--custom--border--accent); }
.hh-map__label {
	margin: 0 0 0.35rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand);
}
.hh-map__blurb {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: 0.8125rem;
	color: var(--wp--preset--color--secondary);
}
.hh-map__items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.3rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--primary);
}
.hh-map__items li {
	position: relative;
	padding-inline-start: 1.1rem;
	line-height: 1.45;
}
.hh-map__items li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.55em;
	inline-size: 5px;
	block-size: 5px;
	border-radius: 1px;
	background: var(--wp--preset--color--brand);
	opacity: .75;
}
.hh-map__count {
	margin: var(--wp--preset--spacing--20) 0 0;
	padding-block-start: 0.6rem;
	border-block-start: 1px solid var(--wp--custom--border--subtle);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.625rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

/* Feature rows, compacted: image-topped cards in a row rather than three
   full-width alternating bands with one paragraph each. */
.hh-feature {
	display: flex;
	flex-direction: column;
	padding: 0;
	overflow: hidden;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--custom--border--base);
	border-radius: var(--wp--custom--radius--xl);
	transition: border-color 160ms ease, transform 160ms ease;
}
.hh-feature:hover { border-color: var(--wp--custom--border--accent); transform: translateY(-2px); }
.hh-feature img { display: block; inline-size: 100%; block-size: 168px; object-fit: cover; }
.hh-feature__body { padding: var(--wp--preset--spacing--30); }
.hh-feature h3 { margin: 0 0 0.4rem; font-size: var(--wp--preset--font-size--medium); }
.hh-feature p { margin: 0; color: var(--wp--preset--color--secondary); font-size: var(--wp--preset--font-size--small); }
@media (max-width: 1080px) { .hh-map { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .hh-map { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .hh-feature:hover { transform: none; } }

/* Full-width product showcase — the Command Center shot given its own section
   rather than sharing the hero row. */
.hh-showcase { margin: 0; }
.hh-showcase img { inline-size: 100%; block-size: auto; display: block; }

/* The hero art no longer competes with a screenshot beside it, so it can hold
   a little less vertical space. */
.hh-chero { padding-block: var(--wp--preset--spacing--20) var(--wp--preset--spacing--20); }
/* justify-self:end made the art shrink-wrap to its content, so it rendered
   ~300px wide in a 620px column and left the right half of the hero empty.
   An explicit inline-size gives the SVG something to scale against. */
.hh-chero__art {
	inline-size: 100%;
	max-inline-size: 560px;
	justify-self: end;
}

/* Hero actions and stat, inside the text column so nothing is pushed below
   the taller art column. */
.hh-chero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
	margin-block-start: var(--wp--preset--spacing--30);
}
.hh-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.8rem 1.35rem;
	border-radius: var(--wp--custom--radius--l);
	font-weight: 650;
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
	border: 1px solid transparent;
	transition: transform 90ms ease, filter 140ms ease, border-color 140ms ease;
}
.hh-btn:active { transform: translateY(1px); }
.hh-btn--primary {
	color: var(--wp--preset--color--base);
	background: linear-gradient(100deg, var(--wp--preset--color--brand), #ff6f95);
	box-shadow: 0 6px 22px rgba(250, 40, 95, 0.26);
}
.hh-btn--primary:hover { filter: brightness(1.06); }
.hh-btn--ghost {
	color: var(--wp--preset--color--primary);
	border-color: var(--wp--custom--border--strong);
}
.hh-btn--ghost:hover { border-color: var(--wp--preset--color--brand); }

.hh-chero__stat {
	display: flex;
	align-items: baseline;
	gap: 0.7rem;
	flex-wrap: wrap;
	margin-block-start: var(--wp--preset--spacing--30);
	padding-block-start: var(--wp--preset--spacing--20);
	border-block-start: 1px solid var(--wp--custom--border--base);
}
.hh-chero__figure {
	font-size: 2.3rem;
	font-weight: 700;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--primary);
}
.hh-chero__statlabel { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); }

/* The first section after a hero does not need a full section gap on top of
   the hero's own padding. */
.hh-chero + * , main .wp-block-post-content > .wp-block-group:first-child + h2 {
	margin-block-start: var(--wp--preset--spacing--40) !important;
}

/* Documentation section map — links, so they read as navigation not content. */
.hh-doc {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	text-decoration: none;
	color: inherit;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
}
.hh-doc h3 { margin: 0; font-size: var(--wp--preset--font-size--small); font-weight: 600; }
.hh-doc__go { color: var(--wp--preset--color--brand); flex: 0 0 auto; transition: transform 140ms ease; }
.hh-doc:hover { border-color: var(--wp--custom--border--accent); }
.hh-doc:hover .hh-doc__go { transform: translateX(3px); }
/* Anchored headings must clear the sticky header when jumped to. */
.wp-block-post-content h3[id] { scroll-margin-block-start: 6rem; }
@media (prefers-reduced-motion: reduce) { .hh-doc:hover .hh-doc__go { transform: none; } }

/* ==========================================================================
   Print

   Documentation and the legal pages do get printed. Drop the chrome, drop the
   backgrounds, and let links show where they go.
   ========================================================================== */
@media print {
	.hh-topbar, .hh-header, .hh-footer, .hh-cta, .hh-feed,
	.wp-block-search, .hh-crumbs, .hh-chero__art { display: none !important; }

	body { background: #fff !important; color: #111 !important; }
	body::before, body::after { display: none !important; }

	main, .wp-block-post-content, .hh-card, .hh-map__group, .hh-tier {
		background: none !important;
		border-color: #bbb !important;
		box-shadow: none !important;
		color: #111 !important;
	}
	h1, h2, h3, h4, .hh-chero__title { color: #000 !important; }
	p, li, td, th { color: #222 !important; }

	.hh-grid, .hh-map, .hh-metrics { grid-template-columns: repeat(2, 1fr) !important; }
	.hh-faq details { break-inside: avoid; }
	.hh-faq details > :not(summary) { display: block !important; }

	/* Show where a link actually goes on paper. */
	.wp-block-post-content a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555; }
}


/*
 * Post tiles: the cell is uniform, the card must fill it.
 *
 * The grid gave every <li> the same height, but .hh-card inside it did not
 * stretch — so cards measured 440, 484, 484, 465, 484, 440 and the borders
 * ended at different heights across a row. Underneath that, a one-line title
 * and a two-line title pushed everything below them to different positions,
 * so even matched cards did not line up internally.
 *
 * The card now fills its cell, and the date is pushed to the bottom so the
 * footer sits on the same line across the row whatever the title does.
 */
.hh-grid .wp-block-post {
	display: flex;
}
.hh-grid .wp-block-post > .hh-card {
	flex: 1 1 auto;
	min-width: 0;
}
.hh-grid .hh-card > .wp-block-post-date {
	margin-block-start: auto;
}
.hh-grid .hh-card > .wp-block-post-title {
	/* Two lines always, so the excerpt starts at the same height. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-block-size: 2lh;
}
.hh-grid .hh-card > .wp-block-post-excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}