/*
 * Whitehill Solution — layout, components and utilities.
 *
 * Every measurement here corresponds to the Tailwind output of the equivalent
 * Lovable component, so the rendered result matches the source design.
 * Tailwind's spacing scale is 0.25rem per step; class names in comments show
 * the original utility for traceability.
 *
 * Breakpoints: sm 640px · md 768px · lg 1024px · xl 1280px
 */

/* =========================================================================
   1. Reset and base
   ====================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
	border-color: var(--border);
}

* {
	margin: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-height) + 1rem);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

body {
	margin: 0;
	background-color: var(--background);
	color: var(--foreground);
	font-family: var(--font-sans);
	font-size: 1rem;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
	font-family: var(--font-display);
	letter-spacing: -0.02em;
	font-weight: 700;
	line-height: 1.15;
}

h5,
h6 {
	font-weight: 600;
	line-height: 1.3;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Preserve intrinsic sizing for images that declare width/height. */
img[width][height] {
	height: auto;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

p,
li {
	overflow-wrap: break-word;
}

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

ul,
ol {
	padding: 0;
	list-style: none;
}

table {
	border-collapse: collapse;
	width: 100%;
}

/* Visible, consistent focus for every interactive element. WCAG 2.2 2.4.11. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--ring);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

.wh-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.wh-skip-link {
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 999;
	transform: translate(-50%, -120%);
	padding: 0.75rem 1.25rem;
	background: var(--card);
	color: var(--foreground);
	border: 1px solid var(--border);
	border-radius: 0 0 var(--radius) var(--radius);
	box-shadow: var(--shadow-lift);
	font-weight: 600;
	text-decoration: none;
	transition: transform 0.2s ease;
}

.wh-skip-link:focus {
	transform: translate(-50%, 0);
}

/* =========================================================================
   2. Utilities ported from the design system
   ====================================================================== */

/* @utility container-page */
.wh-container {
	width: 100%;
	margin-inline: auto;
	max-width: var(--container);
	padding-inline: var(--container-pad);
}

/* @utility surface-deep */
.wh-surface-deep {
	background: var(--gradient-hero);
	color: var(--navy-foreground);
}

.wh-surface-deep h1,
.wh-surface-deep h2,
.wh-surface-deep h3 {
	color: var(--navy-foreground);
}

/* @utility text-gradient */
.wh-text-gradient {
	background: var(--gradient-accent);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* @utility grid-lines */
.wh-grid-lines {
	background-image:
		linear-gradient(oklch(0.72 0.14 214 / 0.09) 1px, transparent 1px),
		linear-gradient(90deg, oklch(0.72 0.14 214 / 0.09) 1px, transparent 1px);
	background-size: 56px 56px;
}

/* @utility card-hover */
.wh-card-hover {
	transition:
		transform 0.25s ease,
		box-shadow 0.25s ease,
		border-color 0.25s ease;
}

.wh-card-hover:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lift);
	border-color: color-mix(in oklab, var(--cyan) 45%, transparent);
}

.wh-shadow-card {
	box-shadow: var(--shadow-card);
}

.wh-shadow-lift {
	box-shadow: var(--shadow-lift);
}

.wh-muted {
	color: var(--muted-foreground);
}

/* =========================================================================
   3. Sections and headings
   ====================================================================== */

/* py-20 sm:py-24 */
.wh-section {
	padding-block: 5rem;
}

@media (min-width: 640px) {
	.wh-section {
		padding-block: 6rem;
	}
}

.wh-section--tight {
	padding-block: 3rem;
}

.wh-section--flush-bottom {
	padding-bottom: 0;
}

.wh-section--muted {
	background: color-mix(in oklab, var(--secondary) 40%, transparent);
}

/* Eyebrow: rounded-full border px-3 py-1 text-[11px] uppercase tracking-[0.14em] */
.wh-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	border: 1px solid var(--border);
	background: var(--card);
	color: var(--muted-foreground);
	border-radius: 9999px;
	padding: 0.25rem 0.75rem;
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	line-height: 1.4;
}

.wh-eyebrow--dark {
	border-color: color-mix(in oklab, var(--navy-foreground) 15%, transparent);
	background: color-mix(in oklab, var(--navy-foreground) 5%, transparent);
	color: var(--primary);
}

.wh-eyebrow .wh-icon {
	width: 0.75rem;
	height: 0.75rem;
}

.wh-heading {
	max-width: 42rem;
}

.wh-heading--center {
	margin-inline: auto;
	text-align: center;
}

.wh-heading__title {
	margin-top: 1rem;
	font-size: 1.875rem;
	line-height: 1.15;
}

@media (min-width: 640px) {
	.wh-heading__title {
		font-size: 2.25rem;
	}
}

.wh-heading__desc {
	margin-top: 1rem;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--muted-foreground);
}

.wh-heading--dark .wh-heading__title {
	color: var(--navy-foreground);
}

.wh-heading--dark .wh-heading__desc {
	color: color-mix(in oklab, var(--navy-foreground) 70%, transparent);
}

/* Section header with a trailing action button */
.wh-section__header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
}

/* =========================================================================
   4. Buttons
   ====================================================================== */

.wh-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	height: 2.5rem;
	padding-inline: 1rem;
	border: 1px solid transparent;
	border-radius: var(--radius-md);
	background: var(--primary);
	color: var(--primary-foreground);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition:
		background-color 0.2s ease,
		color 0.2s ease,
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		opacity 0.2s ease;
}

.wh-btn:hover {
	background: color-mix(in oklab, var(--primary) 88%, black);
}

.wh-btn[disabled],
.wh-btn[aria-disabled="true"] {
	opacity: 0.55;
	pointer-events: none;
}

.wh-btn .wh-icon {
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
}

.wh-btn--lg {
	height: 2.75rem;
	padding-inline: 1.5rem;
	font-size: 0.9375rem;
}

.wh-btn--sm {
	height: 2rem;
	padding-inline: 0.75rem;
	font-size: 0.8125rem;
}

.wh-btn--icon {
	width: 2.5rem;
	padding: 0;
}

.wh-btn--secondary {
	background: var(--secondary);
	color: var(--secondary-foreground);
}

.wh-btn--secondary:hover {
	background: color-mix(in oklab, var(--secondary) 85%, var(--foreground));
}

.wh-btn--outline {
	background: transparent;
	border-color: var(--border);
	color: var(--foreground);
}

.wh-btn--outline:hover {
	background: var(--secondary);
}

.wh-btn--ghost {
	background: transparent;
	color: var(--muted-foreground);
}

.wh-btn--ghost:hover {
	background: var(--secondary);
	color: var(--foreground);
}

/* Outline button on the deep navy surface */
.wh-btn--on-dark {
	background: transparent;
	border-color: color-mix(in oklab, var(--navy-foreground) 25%, transparent);
	color: var(--navy-foreground);
}

.wh-btn--on-dark:hover {
	background: color-mix(in oklab, var(--navy-foreground) 10%, transparent);
	color: var(--navy-foreground);
}

.wh-btn--block {
	width: 100%;
}

/* Arrow nudge on hover, matching group-hover:translate-x-1 */
.wh-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--primary);
	text-decoration: none;
}

.wh-link-arrow .wh-icon {
	width: 1rem;
	height: 1rem;
	transition: transform 0.2s ease;
}

.wh-card:hover .wh-link-arrow .wh-icon,
.wh-link-arrow:hover .wh-icon {
	transform: translateX(0.25rem);
}

/* =========================================================================
   5. Badges and chips
   ====================================================================== */

.wh-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	border: 1px solid transparent;
	border-radius: 9999px;
	background: var(--primary);
	color: var(--primary-foreground);
	padding: 0.125rem 0.625rem;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
	text-decoration: none;
}

/* Badges and chips are frequently links to term archives. The pill shape is
   already the affordance; a default underline just looks broken inside it. */
a.wh-badge:hover,
a.wh-chip:hover {
	border-color: color-mix(in oklab, var(--primary) 55%, transparent);
	color: var(--foreground);
}

.wh-badge--secondary {
	background: var(--secondary);
	color: var(--secondary-foreground);
}

.wh-badge--outline {
	background: transparent;
	border-color: var(--border);
	color: var(--muted-foreground);
	font-weight: 400;
}

.wh-badge--success {
	background: color-mix(in oklab, var(--success) 20%, transparent);
	color: var(--success);
}

.wh-chip {
	display: inline-block;
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	background: var(--secondary);
	color: var(--muted-foreground);
	padding: 0.25rem 0.5rem;
	font-size: 0.6875rem;
	line-height: 1.4;
	text-decoration: none;
}

.wh-chip-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
}

/* Audience pills in the hero */
.wh-pill {
	display: inline-block;
	border: 1px solid color-mix(in oklab, var(--navy-foreground) 15%, transparent);
	border-radius: 9999px;
	padding: 0.375rem 0.75rem;
	font-size: 0.75rem;
	font-weight: 500;
	color: color-mix(in oklab, var(--navy-foreground) 70%, transparent);
}

/* =========================================================================
   6. Grids and cards
   ====================================================================== */

.wh-grid {
	display: grid;
	gap: 1.25rem;
	margin-top: 3rem;
}

/*
 * Grid and flex items default to min-width:auto, which refuses to shrink below
 * their min-content width and pushes the page into horizontal overflow on
 * narrow screens. Explicitly allowing them to shrink is the standard fix.
 */
.wh-grid > *,
.wh-split > *,
.wh-detail > *,
.wh-article-layout > * {
	min-width: 0;
}

.wh-grid--flush {
	margin-top: 0;
}

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

@media (min-width: 768px) {
	.wh-grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.wh-grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.wh-grid--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* rounded-2xl border bg-card shadow-card card-hover */
.wh-card {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--border);
	border-radius: var(--radius-2xl);
	background: var(--card);
	color: var(--card-foreground);
	box-shadow: var(--shadow-card);
	transition:
		transform 0.25s ease,
		box-shadow 0.25s ease,
		border-color 0.25s ease;
}

.wh-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lift);
	border-color: color-mix(in oklab, var(--cyan) 45%, transparent);
}

.wh-card--pad {
	padding: 1.5rem;
}

.wh-card--flat {
	box-shadow: none;
}

.wh-card--flat:hover {
	transform: none;
	box-shadow: var(--shadow-card);
}

.wh-card--clip {
	overflow: hidden;
}

.wh-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 1.5rem;
}

.wh-card__body--tight {
	padding: 1.25rem;
}

.wh-card__title {
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.35;
}

.wh-card__title--sm {
	font-size: 1rem;
}

.wh-card__title a {
	text-decoration: none;
}

/* Full-card click target that keeps the link text as the accessible name. */
.wh-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.wh-card__text {
	margin-top: 0.625rem;
	font-size: 0.875rem;
	line-height: 1.65;
	color: var(--muted-foreground);
}

.wh-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: 1.25rem;
	padding-top: 1rem;
	border-top: 1px solid var(--border);
	font-size: 0.75rem;
	color: var(--muted-foreground);
}

/*
 * Real controls inside a card must sit above the full-card link overlay,
 * otherwise the overlay swallows their clicks.
 */
.wh-card__meta a,
.wh-card__meta button,
.wh-card a:not(.wh-card__title a),
.wh-card button {
	position: relative;
	z-index: 1;
}

.wh-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--radius-lg);
	background: var(--accent);
	color: var(--accent-foreground);
}

.wh-card__icon .wh-icon {
	width: 1.25rem;
	height: 1.25rem;
}

.wh-clamp-2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.wh-clamp-3 {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Card media header — the gradient panel used by software and theme cards */
.wh-card__media {
	position: relative;
	display: flex;
	align-items: flex-end;
	height: 10rem;
	padding: 1.25rem;

	/*
	 * Two layers. The brand wash always paints; the artwork underneath only
	 * exists when the card has no featured image, in which case the template
	 * sets --wh-card-media. With no artwork the second layer resolves to
	 * `none` and the card looks exactly as it always did.
	 */
	background-image:
		linear-gradient(
			to bottom right,
			color-mix(in oklab, var(--primary) 20%, transparent),
			color-mix(in oklab, var(--accent) 60%, transparent)
		),
		var(--wh-card-media, none);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	overflow: hidden;
}

/*
 * A grid of placeholders would otherwise read as one flat block, so the tint
 * index the template derives from the post ID rotates the hue card to card.
 * Purely decorative, and it sits under the badges rather than over them.
 */
.wh-card__media[style*="--wh-card-media"]::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--wh-card-hue, transparent);
	mix-blend-mode: soft-light;
	pointer-events: none;
}

.wh-card__media[style*="--wh-card-tint: 1"] { --wh-card-hue: oklch(0.62 0.14 262 / 0.55); }
.wh-card__media[style*="--wh-card-tint: 2"] { --wh-card-hue: oklch(0.7 0.15 158 / 0.5); }
.wh-card__media[style*="--wh-card-tint: 3"] { --wh-card-hue: oklch(0.79 0.15 78 / 0.45); }
.wh-card__media[style*="--wh-card-tint: 4"] { --wh-card-hue: oklch(0.66 0.16 300 / 0.5); }

/*
 * The artwork is dark, so the media-area label can no longer use the muted
 * foreground it used against the old light wash — that combination fails
 * contrast. The skeleton placeholder goes too: it exists to fill an empty
 * frame, and the frame is no longer empty.
 */
.wh-card__media[style*="--wh-card-media"] .wh-card__media-label {
	position: relative;
	color: color-mix(in oklab, var(--navy-foreground) 88%, transparent);
	text-shadow: 0 1px 2px oklch(0.15 0.04 258 / 0.55);
}

.wh-card__media[style*="--wh-card-media"] .wh-card__skeleton {
	display: none;
}

.wh-card__media--tall {
	height: 11rem;
}

.wh-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Product screenshots are documents, not photographs: cropping one to fill the
 * frame cuts off the interface it is meant to show. Here the whole image is
 * fitted inside the frame instead, and whatever the aspect ratio leaves over
 * shows the card's own background rather than a flat letterbox.
 */
.wh-card__media--contain img {
	object-fit: contain;
	padding: 0.625rem;
}

.wh-card__media-label {
	position: relative;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--muted-foreground);
}

.wh-card__media .wh-badge {
	position: absolute;
	top: 1rem;
	z-index: 1;
}

.wh-card__media .wh-badge--start {
	left: 1rem;
}

.wh-card__media .wh-badge--end {
	right: 1rem;
}

/* Accent gradients ported from themeAccents / productGradients */
.wh-accent-cyan {
	background: linear-gradient(to bottom right, color-mix(in oklab, var(--primary) 30%, transparent), color-mix(in oklab, var(--chart-2) 20%, transparent), transparent);
}

.wh-accent-emerald {
	background: linear-gradient(to bottom right, color-mix(in oklab, var(--chart-3) 30%, transparent), color-mix(in oklab, var(--primary) 15%, transparent), transparent);
}

.wh-accent-amber {
	background: linear-gradient(to bottom right, color-mix(in oklab, var(--chart-4) 30%, transparent), color-mix(in oklab, var(--chart-5) 15%, transparent), transparent);
}

.wh-accent-navy {
	background: linear-gradient(to bottom right, color-mix(in oklab, var(--navy) 25%, transparent), color-mix(in oklab, var(--chart-2) 15%, transparent), transparent);
}

.wh-accent-violet {
	background: linear-gradient(to bottom right, color-mix(in oklab, var(--chart-5) 25%, transparent), color-mix(in oklab, var(--chart-2) 15%, transparent), transparent);
}

/* Skeleton bars in the theme card preview */
.wh-card__skeleton {
	position: absolute;
	inset-inline: 1.25rem;
	bottom: 1rem;
	display: grid;
	gap: 0.5rem;
}

.wh-card__skeleton span {
	display: block;
	height: 0.5rem;
	border-radius: 9999px;
	background: color-mix(in oklab, var(--foreground) 10%, transparent);
}

.wh-card__skeleton span:first-child {
	width: 66%;
}

.wh-card__skeleton span:last-child {
	width: 50%;
}

.wh-wishlist {
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border: 0;
	border-radius: 9999px;
	background: color-mix(in oklab, var(--card) 90%, transparent);
	color: var(--muted-foreground);
	cursor: pointer;
	transition: color 0.2s ease;
}

.wh-wishlist:hover,
.wh-wishlist[aria-pressed="true"] {
	color: var(--destructive);
}

.wh-wishlist[aria-pressed="true"] .wh-icon {
	fill: currentColor;
}

/* Price block */
.wh-price {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
}

.wh-price__amount {
	font-size: 1rem;
	font-weight: 700;
	color: var(--foreground);
}

.wh-price__amount--free {
	color: var(--chart-3);
}

.wh-price__was {
	font-size: 0.75rem;
	color: var(--muted-foreground);
	text-decoration: line-through;
}

.wh-rating {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 1rem;
	font-size: 0.75rem;
	color: var(--muted-foreground);
}

.wh-rating__score {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	font-weight: 500;
	color: var(--foreground);
}

.wh-rating .wh-icon {
	width: 0.875rem;
	height: 0.875rem;
}

.wh-rating__score .wh-icon {
	fill: var(--chart-4);
	color: var(--chart-4);
}

/* Feature list with check marks */
.wh-checklist {
	display: grid;
	gap: 0.75rem;
	margin-top: 2rem;
}

.wh-checklist li {
	display: flex;
	gap: 0.75rem;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--muted-foreground);
}

.wh-checklist .wh-icon {
	flex-shrink: 0;
	width: 1.125rem;
	height: 1.125rem;
	margin-top: 0.125rem;
	color: var(--chart-3);
}

.wh-surface-deep .wh-checklist li {
	color: color-mix(in oklab, var(--navy-foreground) 75%, transparent);
}

.wh-surface-deep .wh-checklist .wh-icon {
	color: var(--primary);
}

/* =========================================================================
   7. Header and navigation
   ====================================================================== */

.wh-header {
	position: sticky;
	top: 0;
	z-index: 50;
	border-bottom: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
	background: color-mix(in oklab, var(--background) 85%, transparent);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
}

.wh-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: var(--header-height);
	padding-block: 0.75rem;
}

/*
 * The logo is the flexible half of the header: the actions row has a fixed
 * cost per button, and adding one (the WooCommerce cart) pushed the header past
 * 320px. min-width:0 lets the logo shrink instead of forcing a horizontal
 * scrollbar on the whole page.
 */
.wh-logo {
	display: flex;
	min-width: 0;
	align-items: center;
	gap: 0.625rem;
	text-decoration: none;
	color: inherit;
}

.wh-logo__text {
	min-width: 0;
}

.wh-logo__name,
.wh-logo__tagline {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wh-logo__mark {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: var(--radius-lg);
	background: var(--gradient-hero);
	color: var(--primary);
	flex-shrink: 0;
}

.wh-logo__mark .wh-icon {
	width: 1.125rem;
	height: 1.125rem;
}

.wh-logo img {
	max-height: 2.75rem;
	width: auto;
}

.wh-logo__text {
	display: flex;
	flex-direction: column;
	line-height: 1;
}

.wh-logo__name {
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.wh-logo__tagline {
	margin-top: 0.125rem;
	font-size: 0.625rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--muted-foreground);
}

.wh-nav {
	display: none;
}

@media (min-width: 1280px) {
	.wh-nav {
		display: block;
	}
}

.wh-nav ul {
	display: flex;
	align-items: center;
	gap: 0.125rem;
}

.wh-nav li {
	position: relative;
}

.wh-nav a {
	display: block;
	border-radius: var(--radius-md);
	padding: 0.5rem 0.75rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--muted-foreground);
	text-decoration: none;
	transition:
		background-color 0.2s ease,
		color 0.2s ease;
}

.wh-nav a:hover {
	background: var(--secondary);
	color: var(--foreground);
}

.wh-nav .current-menu-item > a,
.wh-nav .current_page_item > a,
.wh-nav .current-menu-ancestor > a,
.wh-nav .current-menu-parent > a {
	background: var(--secondary);
	color: var(--foreground);
}

/* Dropdown submenus */
.wh-nav .sub-menu {
	position: absolute;
	top: calc(100% + 0.5rem);
	left: 0;
	z-index: 60;
	display: grid;
	gap: 0.125rem;
	min-width: 14rem;
	padding: 0.5rem;
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	background: var(--popover);
	box-shadow: var(--shadow-lift);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-0.25rem);
	transition:
		opacity 0.18s ease,
		transform 0.18s ease,
		visibility 0.18s;
}

.wh-nav li:hover > .sub-menu,
.wh-nav li:focus-within > .sub-menu,
.wh-nav li > .sub-menu:hover {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.wh-nav .sub-menu a {
	white-space: nowrap;
}

.wh-header__actions {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 0.5rem;
}

/* Tighten the controls on the narrowest phones so the logo keeps its room. */
@media (max-width: 400px) {
	.wh-header__actions {
		gap: 0.125rem;
	}

	.wh-header__actions .wh-btn--icon {
		width: 2.25rem;
	}
}

.wh-header__signin {
	display: none;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--muted-foreground);
	text-decoration: none;
}

.wh-header__signin:hover {
	color: var(--foreground);
}

.wh-header__cta {
	display: none;
}

@media (min-width: 640px) {
	.wh-header__signin,
	.wh-header__cta {
		display: inline-flex;
	}
}

.wh-menu-toggle {
	display: inline-flex;
}

@media (min-width: 1280px) {
	.wh-menu-toggle {
		display: none;
	}
}

/* Mobile panel */
.wh-mobile-nav {
	display: none;
	border-top: 1px solid var(--border);
	background: var(--background);
}

.wh-mobile-nav[data-open="true"] {
	display: block;
}

@media (min-width: 1280px) {
	.wh-mobile-nav {
		display: none !important;
	}
}

.wh-mobile-nav ul {
	display: grid;
	gap: 0.25rem;
	padding-block: 1rem;
}

.wh-mobile-nav a {
	display: block;
	border-radius: var(--radius-md);
	padding: 0.625rem 0.75rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--muted-foreground);
	text-decoration: none;
}

.wh-mobile-nav a:hover,
.wh-mobile-nav .current-menu-item > a {
	background: var(--secondary);
	color: var(--foreground);
}

.wh-mobile-nav .sub-menu {
	padding-left: 0.75rem;
	border-left: 1px solid var(--border);
	margin-left: 0.75rem;
}

.wh-mobile-nav__actions {
	display: grid;
	gap: 0.5rem;
	margin-top: 0.5rem;
	padding-bottom: 1rem;
}

/*
 * Icon swapping: only one of each pair is ever visible.
 *
 * These selectors are doubled up (.wh-icon.wh-…) deliberately. The base
 * `.wh-icon { display: inline-block }` rule lives later in this file, so a
 * single-class hide rule would lose to it on source order.
 */
.wh-icon.wh-menu-icon-close,
[data-open="true"] .wh-icon.wh-menu-icon-open,
[aria-expanded="true"] .wh-icon.wh-menu-icon-open {
	display: none;
}

[aria-expanded="true"] .wh-icon.wh-menu-icon-close {
	display: inline-block;
}

.wh-icon.wh-theme-icon-dark {
	display: none;
}

:root[data-theme="dark"] .wh-icon.wh-theme-icon-light {
	display: none;
}

:root[data-theme="dark"] .wh-icon.wh-theme-icon-dark {
	display: inline-block;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .wh-icon.wh-theme-icon-light {
		display: none;
	}

	:root:not([data-theme="light"]) .wh-icon.wh-theme-icon-dark {
		display: inline-block;
	}
}

/* No JS: the toggle cannot work, so hide it rather than show a dead control. */
.no-js [data-wh-theme-toggle],
.no-js [data-wh-search-open] {
	display: none;
}

[data-wh-cart] {
	position: relative;
}

.wh-cart-count {
	position: absolute;
	top: 0.125rem;
	right: 0.125rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.125rem;
	height: 1.125rem;
	padding-inline: 0.25rem;
	border-radius: 9999px;
	background: var(--primary);
	color: var(--primary-foreground);
	font-size: 0.625rem;
	font-weight: 700;
}

/* =========================================================================
   8. Hero and page hero
   ====================================================================== */

.wh-hero {
	position: relative;
	overflow: hidden;
	background: var(--gradient-hero);
	color: var(--navy-foreground);
}

/* -------------------------------------------------------------------------
   Animated hero backdrop

   Four decorative layers, all CSS, all behind the content:
     1. .wh-hero__aurora  — large blurred colour blobs drifting slowly
     2. .wh-hero__beam    — a wide light sweep crossing the hero
     3. .wh-hero__spark   — small rising motes
     4. .wh-hero__lines   — the existing grid, now drifting

   Only transform, opacity and filter animate, so the whole thing composites
   on the GPU and never triggers layout. Everything stops for a visitor who
   asked for reduced motion.
   ---------------------------------------------------------------------- */

.wh-hero__bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	contain: layout paint;
}

.wh-hero__aurora {
	position: absolute;
	width: 42rem;
	height: 42rem;
	border-radius: 50%;
	filter: blur(80px);
	opacity: 0.5;
	will-change: transform;
}

.wh-hero__aurora--1 {
	top: -14rem;
	left: -10rem;
	background: radial-gradient(circle, oklch(0.72 0.14 214 / 55%), transparent 70%);
	animation: wh-drift-1 26s ease-in-out infinite;
}

.wh-hero__aurora--2 {
	top: 30%;
	right: -14rem;
	background: radial-gradient(circle, oklch(0.62 0.16 280 / 45%), transparent 70%);
	animation: wh-drift-2 32s ease-in-out infinite;
}

.wh-hero__aurora--3 {
	bottom: -18rem;
	left: 35%;
	width: 34rem;
	height: 34rem;
	background: radial-gradient(circle, oklch(0.70 0.13 190 / 40%), transparent 70%);
	animation: wh-drift-3 38s ease-in-out infinite;
}

/* A single wide, very soft diagonal sweep. */
.wh-hero__beam {
	position: absolute;
	top: -50%;
	left: -60%;
	width: 60%;
	height: 200%;
	background: linear-gradient(
		90deg,
		transparent,
		oklch(0.82 0.10 200 / 10%),
		transparent
	);
	transform: rotate(18deg);
	animation: wh-sweep 14s ease-in-out infinite;
	will-change: transform, opacity;
}

.wh-hero__spark {
	position: absolute;
	bottom: -1rem;

	/* Each mote is offset and delayed by its index, so no two travel together. */
	left: calc(8% + (var(--i) * 16%));
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: oklch(0.85 0.10 205 / 70%);
	box-shadow: 0 0 8px oklch(0.80 0.12 205 / 60%);
	opacity: 0;
	animation: wh-rise 18s linear infinite;
	animation-delay: calc(var(--i) * -3s);
	will-change: transform, opacity;
}

@keyframes wh-drift-1 {
	0%,
	100% {
		transform: translate3d(0, 0, 0) scale(1);
	}

	50% {
		transform: translate3d(6rem, 4rem, 0) scale(1.15);
	}
}

@keyframes wh-drift-2 {
	0%,
	100% {
		transform: translate3d(0, 0, 0) scale(1.1);
	}

	50% {
		transform: translate3d(-7rem, -3rem, 0) scale(1);
	}
}

@keyframes wh-drift-3 {
	0%,
	100% {
		transform: translate3d(0, 0, 0) scale(1);
	}

	50% {
		transform: translate3d(-4rem, -5rem, 0) scale(1.2);
	}
}

@keyframes wh-sweep {
	0% {
		transform: translateX(0) rotate(18deg);
		opacity: 0;
	}

	35% {
		opacity: 1;
	}

	100% {
		transform: translateX(280%) rotate(18deg);
		opacity: 0;
	}
}

@keyframes wh-rise {
	0% {
		transform: translateY(0) translateX(0);
		opacity: 0;
	}

	12% {
		opacity: 1;
	}

	80% {
		opacity: 1;
	}

	100% {
		transform: translateY(-40rem) translateX(3rem);
		opacity: 0;
	}
}

.wh-hero__lines {
	position: absolute;
	inset: 0;
	opacity: 0.7;
	pointer-events: none;
	animation: wh-grid-drift 40s linear infinite;
}

/* Travels exactly one 56px grid cell, so the loop is seamless. */
@keyframes wh-grid-drift {
	from {
		background-position: 0 0;
	}

	to {
		background-position: 56px 56px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wh-hero__aurora,
	.wh-hero__beam,
	.wh-hero__spark,
	.wh-hero__lines {
		animation: none;
	}

	/* The motes only exist as motion — hide them rather than freeze them mid-air. */
	.wh-hero__spark {
		display: none;
	}

	.wh-hero__beam {
		opacity: 0.5;
	}
}

.wh-hero__inner {
	position: relative;
	display: grid;
	align-items: center;
	gap: 3.5rem;
	padding-block: 5rem;
}

@media (min-width: 1024px) {
	/*
	 * Two columns only when there is actually a hero image. Without one, the
	 * split would leave half the hero empty.
	 */
	.wh-hero__inner:has(.wh-hero__media),
	.wh-hero__inner:has(.wh-hero__stage) {
		grid-template-columns: 1.05fr 1fr;
	}

	.wh-hero__inner {
		padding-block: 7rem;
	}
}

/* Fallback for browsers without :has() — centre the single column instead. */
@supports not selector(:has(*)) {
	@media (min-width: 1024px) {
		.wh-hero__inner {
			grid-template-columns: 1.05fr 1fr;
		}
	}
}

.wh-hero__title {
	margin-top: 1.5rem;
	font-size: 2.25rem;
	line-height: 1.08;
	color: var(--navy-foreground);
}

@media (min-width: 640px) {
	.wh-hero__title {
		font-size: 3rem;
	}
}

@media (min-width: 1024px) {
	.wh-hero__title {
		font-size: 3.5rem;
	}
}

.wh-hero__text {
	margin-top: 1.5rem;
	max-width: 36rem;
	font-size: 1.125rem;
	line-height: 1.65;
	color: color-mix(in oklab, var(--navy-foreground) 72%, transparent);
}

.wh-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 2.25rem;
}

.wh-hero__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 2.5rem;
}

.wh-hero__media {
	position: relative;
}

.wh-hero__media-frame {
	overflow: hidden;
	border: 1px solid color-mix(in oklab, var(--navy-foreground) 10%, transparent);
	border-radius: var(--radius-3xl);
	box-shadow: var(--shadow-lift);
}

.wh-hero__media-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wh-hero__badge {
	display: none;
	position: absolute;
	bottom: -1.5rem;
	left: -1rem;
	border: 1px solid color-mix(in oklab, var(--navy-foreground) 10%, transparent);
	border-radius: var(--radius-2xl);
	background: var(--card);
	color: var(--card-foreground);
	padding: 1rem;
	box-shadow: var(--shadow-lift);
}

@media (min-width: 640px) {
	.wh-hero__badge {
		display: block;
	}
}

.wh-hero__badge-inner {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.wh-hero__badge-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: var(--radius-lg);
	background: var(--accent);
	color: var(--primary);
	flex-shrink: 0;
}

.wh-hero__badge-icon .wh-icon {
	width: 1.125rem;
	height: 1.125rem;
}

.wh-hero__badge-title {
	font-size: 0.875rem;
	font-weight: 600;
}

.wh-hero__badge-text {
	font-size: 0.75rem;
	color: var(--muted-foreground);
}

/* -------------------------------------------------------------------------
   Interactive hero

   Three pointer-driven behaviours, all optional:

     1. .wh-hero__char   — the highlighted word lifts letter by letter as the
                           pointer passes over it
     2. [data-wh-hero-layer] — panels drift at different depths, so the column
                           reads as a stack rather than a flat picture
     3. .wh-hero__swatch — retints the hero accent, this page load only

   The pointer position arrives as --wh-px / --wh-py on the section (-1 to 1)
   and each layer multiplies it by its own --depth. Both default to 0, so with
   JavaScript absent or motion reduced everything sits exactly where the static
   layout puts it. Only transform and opacity animate.
   ---------------------------------------------------------------------- */

.wh-hero {
	--wh-px: 0;
	--wh-py: 0;
	--wh-accent: var(--cyan);
}

[data-wh-hero-layer] {
	--depth: 1;

	transform: translate3d(
		calc(var(--wh-px) * var(--depth) * 0.75rem),
		calc(var(--wh-py) * var(--depth) * 0.6rem),
		0
	);
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}

/* While the pointer is actually moving, track it closely rather than easing. */
.wh-hero.is-tracking [data-wh-hero-layer] {
	transition: transform 0.12s linear;
}

/* Highlighted word */

.wh-hero__word {
	display: inline-block;
}

.wh-hero__char {
	display: inline-block;

	/*
	 * A viewport-fixed gradient means every letter samples the same ramp, so
	 * the colour stays continuous across the word however the letters move.
	 */
	background-image: var(--gradient-accent);
	background-attachment: fixed;
	background-size: 45vw 100vh;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	transform: translateY(calc(var(--lift, 0) * -0.45rem)) rotate(calc(var(--lift, 0) * -2deg));
	transition:
		transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
		filter 0.35s ease;
	filter: drop-shadow(0 0 calc(var(--lift, 0) * 1.25rem) color-mix(in oklab, var(--wh-accent) 55%, transparent));
}

.wh-hero__part {
	display: inline-block;
	white-space: nowrap;
}

/* Action glow */

.wh-hero__actions {
	position: relative;
}

.wh-hero__actions-glow {
	position: absolute;
	top: 50%;
	inset-inline-start: 0;
	width: 16rem;
	height: 5rem;
	transform: translate3d(calc(var(--wh-px) * 0.5rem), -50%, 0);
	border-radius: 9999px;
	background: radial-gradient(
		closest-side,
		color-mix(in oklab, var(--wh-accent) 42%, transparent),
		transparent
	);
	filter: blur(28px);
	opacity: 0.85;
	pointer-events: none;
	transition:
		transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
		background 0.4s ease;
}

/* The panel stack that stands in for artwork */

.wh-hero__stage {
	position: relative;
	display: none;
	min-height: 27rem;
}

@media (min-width: 1024px) {
	.wh-hero__stage {
		display: block;
	}
}

.wh-hero__card {
	position: absolute;
	border: 1px solid color-mix(in oklab, var(--navy-foreground) 16%, transparent);
	border-radius: var(--radius-2xl);
	background: color-mix(in oklab, var(--navy) 62%, transparent);
	box-shadow: var(--shadow-lift);
	backdrop-filter: blur(14px);
}

.wh-hero__card--app {
	inset-block: 0 3rem;
	inset-inline: 0 2rem;
	overflow: hidden;
	background: linear-gradient(
		150deg,
		color-mix(in oklab, var(--navy-foreground) 12%, transparent),
		color-mix(in oklab, var(--navy) 55%, transparent)
	);
}

/* The application mock: window chrome, sidebar, dashboard */

.wh-hero__win-bar {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.7rem 0.9rem;
	border-bottom: 1px solid color-mix(in oklab, var(--navy-foreground) 12%, transparent);
	background: color-mix(in oklab, var(--navy) 45%, transparent);
}

.wh-hero__win-dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: color-mix(in oklab, var(--navy-foreground) 26%, transparent);
}

.wh-hero__win-dot:first-child {
	background: color-mix(in oklab, var(--wh-accent) 85%, transparent);
}

.wh-hero__win-url {
	flex: 1;
	margin-inline-start: 0.5rem;
	padding: 0.2rem 0.7rem;
	border-radius: 9999px;
	background: color-mix(in oklab, var(--navy-foreground) 8%, transparent);
	font-family: var(--font-mono);
	font-size: 0.625rem;
	letter-spacing: 0.02em;
	color: color-mix(in oklab, var(--navy-foreground) 55%, transparent);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wh-hero__app {
	display: grid;
	grid-template-columns: 7.5rem 1fr;
	height: calc(100% - 2.35rem);
}

.wh-hero__app-side {
	padding: 0.9rem 0.75rem;
	border-inline-end: 1px solid color-mix(in oklab, var(--navy-foreground) 10%, transparent);
	background: color-mix(in oklab, var(--navy) 35%, transparent);
}

.wh-hero__app-mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: var(--radius-sm);
	background: color-mix(in oklab, var(--wh-accent) 22%, transparent);
	color: var(--wh-accent);
}

.wh-hero__app-mark .wh-icon {
	width: 1rem;
	height: 1rem;
}

.wh-hero__app-nav {
	display: grid;
	gap: 0.15rem;
	margin-top: 1rem;
}

.wh-hero__app-nav li {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.35rem 0.45rem;
	border-radius: var(--radius-sm);
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	color: color-mix(in oklab, var(--navy-foreground) 58%, transparent);
}

.wh-hero__app-nav .wh-icon {
	width: 0.8rem;
	height: 0.8rem;
	opacity: 0.85;
}

.wh-hero__app-nav .is-active {
	background: color-mix(in oklab, var(--wh-accent) 16%, transparent);
	color: color-mix(in oklab, var(--navy-foreground) 92%, transparent);
	box-shadow: inset 2px 0 0 var(--wh-accent);
}

.wh-hero__app-main {
	display: grid;
	align-content: start;
	gap: 0.7rem;
	padding: 0.9rem;
}

.wh-hero__app-head {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.wh-hero__app-search {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 0.6rem;
	border: 1px solid color-mix(in oklab, var(--navy-foreground) 12%, transparent);
	border-radius: 9999px;
	color: color-mix(in oklab, var(--navy-foreground) 45%, transparent);
}

.wh-hero__app-search .wh-icon {
	width: 0.75rem;
	height: 0.75rem;
}

.wh-hero__app-search i {
	flex: 1;
	height: 0.3rem;
	max-width: 5rem;
	border-radius: 9999px;
	background: color-mix(in oklab, var(--navy-foreground) 14%, transparent);
}

.wh-hero__app-user {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.4rem;
	height: 1.4rem;
	border-radius: 50%;
	background: color-mix(in oklab, var(--navy-foreground) 14%, transparent);
	color: color-mix(in oklab, var(--navy-foreground) 70%, transparent);
}

.wh-hero__app-user .wh-icon {
	width: 0.8rem;
	height: 0.8rem;
}

.wh-hero__tiles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.5rem;
}

.wh-hero__tile {
	padding: 0.55rem 0.6rem;
	border: 1px solid color-mix(in oklab, var(--navy-foreground) 10%, transparent);
	border-radius: var(--radius-md);
	background: color-mix(in oklab, var(--navy-foreground) 5%, transparent);
}

.wh-hero__tile p {
	font-size: 0.5625rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: color-mix(in oklab, var(--navy-foreground) 55%, transparent);
}

.wh-hero__meter {
	display: block;
	position: relative;
	height: 0.3rem;
	margin-top: 0.5rem;
	border-radius: 9999px;
	background: color-mix(in oklab, var(--navy-foreground) 14%, transparent);
	overflow: hidden;
}

.wh-hero__meter::after {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: var(--v, 50%);
	border-radius: inherit;
	background: var(--wh-accent);
	transition: background 0.4s ease;
}

.wh-hero__panel {
	padding: 0.6rem 0.7rem 0.4rem;
	border: 1px solid color-mix(in oklab, var(--navy-foreground) 10%, transparent);
	border-radius: var(--radius-md);
	background: color-mix(in oklab, var(--navy-foreground) 4%, transparent);
	color: var(--wh-accent);
}

.wh-hero__panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.wh-hero__panel-head p {
	font-size: 0.5625rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: color-mix(in oklab, var(--navy-foreground) 55%, transparent);
}

.wh-hero__legend {
	display: flex;
	gap: 0.3rem;
}

.wh-hero__legend i {
	width: 0.35rem;
	height: 0.35rem;
	border-radius: 50%;
	background: var(--wh-accent);
}

.wh-hero__legend i:last-child {
	background: color-mix(in oklab, var(--navy-foreground) 25%, transparent);
}

.wh-hero__chart {
	display: block;
	width: 100%;
	height: 4.5rem;
	margin-top: 0.4rem;
	transition: color 0.4s ease;
}

.wh-hero__rows {
	display: grid;
	gap: 0.4rem;
}

.wh-hero__rows li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.4rem 0.55rem;
	border-radius: var(--radius-sm);
	background: color-mix(in oklab, var(--navy-foreground) 5%, transparent);
}

.wh-hero__dot {
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
	background: var(--wh-accent);
	transition: background 0.4s ease;
}

.wh-hero__rows li:nth-child(2) .wh-hero__dot {
	background: color-mix(in oklab, var(--navy-foreground) 30%, transparent);
}

.wh-hero__rows i {
	height: 0.3rem;
	width: var(--w, 50%);
	border-radius: 9999px;
	background: color-mix(in oklab, var(--navy-foreground) 18%, transparent);
}

.wh-hero__chip {
	width: 1.9rem;
	height: 0.55rem;
	margin-inline-start: auto;
	border-radius: 9999px;
	background: color-mix(in oklab, var(--wh-accent) 28%, transparent);
	transition: background 0.4s ease;
}

.wh-hero__card--accent {
	inset-block-end: 0;
	inset-inline-end: 0;
	padding: 1rem 1.25rem;
}

.wh-hero__card-label {
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: color-mix(in oklab, var(--navy-foreground) 62%, transparent);
}

.wh-hero__swatches {
	display: flex;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

.wh-hero__swatch {
	width: 1.5rem;
	height: 1.5rem;
	padding: 0;
	border: 1px solid color-mix(in oklab, var(--navy-foreground) 25%, transparent);
	border-radius: 50%;
	background: var(--swatch);
	cursor: pointer;
	transition:
		transform 0.25s ease,
		box-shadow 0.25s ease;
}

.wh-hero__swatch:hover,
.wh-hero__swatch:focus-visible {
	transform: scale(1.15);
}

.wh-hero__swatch[aria-pressed="true"] {
	box-shadow:
		0 0 0 2px var(--navy),
		0 0 0 4px var(--swatch);
}

.wh-hero__card--badge {
	display: flex;
	inset-block-end: 0;
	inset-inline-start: -2.5rem;
	gap: 0.75rem;
	align-items: center;
	padding: 0.875rem 1.125rem;
	background: color-mix(in oklab, var(--card) 92%, transparent);
	color: var(--card-foreground);
}

.wh-hero__card--badge .wh-hero__badge-title,
.wh-hero__card--badge .wh-hero__badge-text {
	display: block;
}

/* -------------------------------------------------------------------------
   Idle motion inside the mock

   The panel should look like something running, not a still. Four loops and
   two one-shot entrances, all on transform, opacity or the independent
   translate property — the last of those so a card can float without
   overwriting the transform the pointer parallax is already writing.

   Everything here is decoration on decoration: it stops completely under
   prefers-reduced-motion, and the panel still reads as a dashboard frozen.
   ---------------------------------------------------------------------- */

/* The chart strip is two copies of the same wave, so one viewBox of travel loops. */
.wh-hero__chart-scroll {
	animation: wh-hero-scroll 16s linear infinite;
}

@keyframes wh-hero-scroll {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-240px);
	}
}

/* Meters fill once, left to right, a beat apart. */
.wh-hero__meter::after {
	transform-origin: left center;
	animation: wh-hero-fill 1.1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.wh-hero__tile:nth-child(2) .wh-hero__meter::after {
	animation-delay: 0.12s;
}

.wh-hero__tile:nth-child(3) .wh-hero__meter::after {
	animation-delay: 0.24s;
}

@keyframes wh-hero-fill {
	from {
		transform: scaleX(0);
	}

	to {
		transform: scaleX(1);
	}
}

/* The live indicator in the panel legend, and the first row's status. */
.wh-hero__legend i:first-child,
.wh-hero__rows li:first-child .wh-hero__dot {
	animation: wh-hero-pulse 2.4s ease-in-out infinite;
}

@keyframes wh-hero-pulse {
	0%,
	100% {
		opacity: 1;
		box-shadow: 0 0 0 0 color-mix(in oklab, var(--wh-accent) 45%, transparent);
	}

	50% {
		opacity: 0.55;
		box-shadow: 0 0 0 0.25rem color-mix(in oklab, var(--wh-accent) 0%, transparent);
	}
}

/* Rows and tiles arrive once, staggered, as the page settles. */
.wh-hero__tile,
.wh-hero__rows li {
	animation: wh-hero-enter 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.wh-hero__tile:nth-child(2) {
	animation-delay: 0.08s;
}

.wh-hero__tile:nth-child(3) {
	animation-delay: 0.16s;
}

.wh-hero__rows li:nth-child(1) {
	animation-delay: 0.3s;
}

.wh-hero__rows li:nth-child(2) {
	animation-delay: 0.4s;
}

.wh-hero__rows li:nth-child(3) {
	animation-delay: 0.5s;
}

@keyframes wh-hero-enter {
	from {
		opacity: 0;
		translate: 0 0.5rem;
	}

	to {
		opacity: 1;
		translate: 0 0;
	}
}

/*
 * The stack drifts. `translate` rather than `transform`, so the pointer
 * parallax on the same element keeps working — the two compose instead of
 * one winning.
 */
.wh-hero__card--app {
	animation: wh-hero-float 11s ease-in-out infinite;
}

.wh-hero__card--accent {
	animation: wh-hero-float 7s ease-in-out -2s infinite;
}

.wh-hero__card--badge {
	animation: wh-hero-float 9s ease-in-out -4.5s infinite;
}

@keyframes wh-hero-float {
	0%,
	100% {
		translate: 0 0;
	}

	50% {
		translate: 0 -0.55rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	[data-wh-hero-layer],
	.wh-hero__char,
	.wh-hero__actions-glow {
		transform: none;
		transition: none;
	}

	/* Nothing in the panel loops, drifts or arrives — it simply is. */
	.wh-hero__chart-scroll,
	.wh-hero__meter::after,
	.wh-hero__legend i:first-child,
	.wh-hero__rows li:first-child .wh-hero__dot,
	.wh-hero__tile,
	.wh-hero__rows li,
	.wh-hero__card {
		animation: none;
		translate: none;
	}
}

/* Interior page hero */
.wh-page-hero {
	position: relative;
	overflow: hidden;
	background: var(--gradient-hero);
	color: var(--navy-foreground);
}

.wh-page-hero__lines {
	position: absolute;
	inset: 0;
	opacity: 0.6;
	pointer-events: none;
}

.wh-page-hero__inner {
	position: relative;
	padding-block: 5rem;
}

@media (min-width: 640px) {
	.wh-page-hero__inner {
		padding-block: 6rem;
	}
}

.wh-page-hero__title {
	margin-top: 1.25rem;
	max-width: 48rem;
	font-size: 2.25rem;
	color: var(--navy-foreground);
}

@media (min-width: 640px) {
	.wh-page-hero__title {
		font-size: 3rem;
	}
}

.wh-page-hero__text {
	margin-top: 1.25rem;
	max-width: 42rem;
	font-size: 1.125rem;
	line-height: 1.65;
	color: color-mix(in oklab, var(--navy-foreground) 70%, transparent);
}

.wh-page-hero__extra {
	margin-top: 2rem;
}

/* Closing CTA panel */
.wh-cta-panel {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-3xl);
	background: var(--gradient-hero);
	color: var(--navy-foreground);
	padding: 4rem 2rem;
	text-align: center;
}

@media (min-width: 640px) {
	.wh-cta-panel {
		padding-inline: 4rem;
	}
}

.wh-cta-panel__lines {
	position: absolute;
	inset: 0;
	opacity: 0.6;
	pointer-events: none;
}

.wh-cta-panel__inner {
	position: relative;
	margin-inline: auto;
	max-width: 42rem;
}

.wh-cta-panel__title {
	font-size: 1.875rem;
	color: var(--navy-foreground);
}

@media (min-width: 640px) {
	.wh-cta-panel__title {
		font-size: 2.25rem;
	}
}

.wh-cta-panel__text {
	margin-top: 1rem;
	font-size: 1.125rem;
	color: color-mix(in oklab, var(--navy-foreground) 72%, transparent);
}

.wh-cta-panel__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 2rem;
}

/* =========================================================================
   9. Technology stack panel
   ====================================================================== */

.wh-split {
	display: grid;
	gap: 3rem;
}

@media (min-width: 1024px) {
	.wh-split {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.wh-techstack {
	display: grid;
	gap: 0.75rem;
	border: 1px solid color-mix(in oklab, var(--navy-foreground) 12%, transparent);
	border-radius: var(--radius-3xl);
	background: color-mix(in oklab, var(--navy-foreground) 5%, transparent);
	padding: 1.5rem;
	align-content: start;
}

.wh-techstack__group {
	border: 1px solid color-mix(in oklab, var(--navy-foreground) 10%, transparent);
	border-radius: var(--radius-2xl);
	padding: 1rem;
}

.wh-techstack__label {
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--primary);
}

.wh-techstack__items {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	margin-top: 0.625rem;
}

.wh-techstack__items a,
.wh-techstack__items span {
	display: inline-block;
	border-radius: var(--radius-sm);
	background: color-mix(in oklab, var(--navy-foreground) 8%, transparent);
	padding: 0.25rem 0.5rem;
	font-size: 0.75rem;
	color: color-mix(in oklab, var(--navy-foreground) 80%, transparent);
	text-decoration: none;
}

.wh-techstack__items a:hover {
	background: color-mix(in oklab, var(--primary) 30%, transparent);
	color: var(--navy-foreground);
}

/* =========================================================================
   10. Breadcrumbs, pagination, archive toolbar
   ====================================================================== */

.wh-breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.875rem;
	color: var(--muted-foreground);
}

.wh-breadcrumbs__item {
	display: flex;
	align-items: center;
	gap: 0.375rem;
}

.wh-breadcrumbs__item .wh-icon {
	width: 0.875rem;
	height: 0.875rem;
}

.wh-breadcrumbs a {
	color: inherit;
	text-decoration: none;
}

.wh-breadcrumbs a:hover {
	color: var(--foreground);
}

.wh-breadcrumbs [aria-current="page"] {
	color: var(--foreground);
}

.wh-breadcrumbs__sep {
	opacity: 0.5;
}

.wh-surface-deep .wh-breadcrumbs,
.wh-page-hero .wh-breadcrumbs {
	color: color-mix(in oklab, var(--navy-foreground) 65%, transparent);
}

.wh-page-hero .wh-breadcrumbs a:hover,
.wh-page-hero .wh-breadcrumbs [aria-current="page"] {
	color: var(--navy-foreground);
}

.wh-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	margin-top: 3rem;
}

.wh-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding-inline: 0.75rem;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--card);
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
	transition:
		background-color 0.2s ease,
		border-color 0.2s ease;
}

.wh-pagination .page-numbers:hover {
	background: var(--secondary);
}

.wh-pagination .page-numbers.current {
	background: var(--primary);
	border-color: var(--primary);
	color: var(--primary-foreground);
}

.wh-pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
}

/* Filter toolbar on marketplace archives */
.wh-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 2rem;
}

.wh-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.wh-filter {
	display: inline-flex;
	align-items: center;
	height: 2rem;
	padding-inline: 0.875rem;
	border: 1px solid var(--border);
	border-radius: 9999px;
	background: var(--card);
	color: var(--muted-foreground);
	font-size: 0.8125rem;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color 0.2s ease,
		color 0.2s ease,
		border-color 0.2s ease;
}

.wh-filter:hover {
	color: var(--foreground);
	border-color: color-mix(in oklab, var(--primary) 45%, transparent);
}

.wh-filter[aria-pressed="true"],
.wh-filter.is-active {
	background: var(--primary);
	border-color: var(--primary);
	color: var(--primary-foreground);
}

.wh-result-count {
	font-size: 0.875rem;
	color: var(--muted-foreground);
	margin-left: auto;
}

/* =========================================================================
   11. Article content (prose)
   ====================================================================== */

.wh-prose {
	max-width: 46rem;
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--foreground);
}

.wh-prose > * + * {
	margin-top: 1.25rem;
}

.wh-prose h2 {
	margin-top: 2.5rem;
	font-size: 1.625rem;
}

.wh-prose h3 {
	margin-top: 2rem;
	font-size: 1.25rem;
}

.wh-prose h4 {
	margin-top: 1.75rem;
	font-size: 1.0625rem;
}

.wh-prose ul,
.wh-prose ol {
	padding-left: 1.5rem;
	display: grid;
	gap: 0.5rem;
}

.wh-prose ul {
	list-style: disc;
}

.wh-prose ol {
	list-style: decimal;
}

.wh-prose a {
	color: var(--primary);
	text-decoration: underline;
}

.wh-prose blockquote {
	border-left: 3px solid var(--primary);
	padding-left: 1.25rem;
	font-size: 1.125rem;
	color: var(--muted-foreground);
	font-style: italic;
}

.wh-prose code {
	font-family: var(--font-mono);
	font-size: 0.875em;
	background: var(--secondary);
	border-radius: var(--radius-sm);
	padding: 0.125rem 0.375rem;
}

.wh-prose pre {
	overflow-x: auto;
	background: var(--navy);
	color: var(--navy-foreground);
	border-radius: var(--radius-xl);
	padding: 1.25rem;
	font-size: 0.875rem;
}

.wh-prose pre code {
	background: transparent;
	padding: 0;
	color: inherit;
}

.wh-prose img,
.wh-prose figure {
	border-radius: var(--radius-xl);
	overflow: hidden;
}

.wh-prose figcaption {
	margin-top: 0.5rem;
	font-size: 0.8125rem;
	color: var(--muted-foreground);
	text-align: center;
}

.wh-prose table {
	font-size: 0.9375rem;
	display: block;
	overflow-x: auto;
	white-space: nowrap;
}

.wh-prose th,
.wh-prose td {
	border: 1px solid var(--border);
	padding: 0.625rem 0.875rem;
	text-align: left;
}

.wh-prose th {
	background: var(--secondary);
	font-weight: 600;
}

.wh-prose hr {
	border: 0;
	border-top: 1px solid var(--border);
	margin-block: 2rem;
}

/* Article layout with optional sidebar */
.wh-article-layout {
	display: grid;
	gap: 3rem;
}

@media (min-width: 1024px) {
	body:not(.wh-no-sidebar) .wh-article-layout {
		grid-template-columns: minmax(0, 1fr) 20rem;
	}
}

.wh-article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.875rem;
	color: var(--muted-foreground);
}

.wh-article__meta .wh-icon {
	width: 0.875rem;
	height: 0.875rem;
}

.wh-article__thumb {
	margin-bottom: 2.5rem;
	border-radius: var(--radius-3xl);
	overflow: hidden;
	border: 1px solid var(--border);
}

.wh-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--border);
}

.wh-share__label {
	font-size: 0.875rem;
	font-weight: 600;
	margin-right: 0.25rem;
}

/* =========================================================================
   12. Product / theme detail
   ====================================================================== */

.wh-detail {
	display: grid;
	gap: 2.5rem;
	align-items: start;
}

@media (min-width: 1024px) {
	.wh-detail {
		grid-template-columns: minmax(0, 1fr) 22rem;
	}
}

.wh-buybox {
	position: sticky;
	top: calc(var(--header-height) + 1.5rem);
	border: 1px solid var(--border);
	border-radius: var(--radius-3xl);
	background: var(--card);
	box-shadow: var(--shadow-card);
	padding: 1.5rem;
	display: grid;
	gap: 1rem;
}

.wh-buybox__price {
	display: flex;
	align-items: baseline;
	gap: 0.625rem;
}

.wh-buybox__price .wh-price__amount {
	font-size: 2rem;
}

.wh-buybox__actions {
	display: grid;
	gap: 0.5rem;
}

.wh-specs {
	display: grid;
	gap: 0;
	font-size: 0.875rem;
}

.wh-specs > div {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 0.625rem;
	border-bottom: 1px solid var(--border);
}

.wh-specs > div:last-child {
	border-bottom: 0;
}

.wh-specs dt {
	color: var(--muted-foreground);
}

.wh-specs dd {
	margin: 0;
	font-weight: 500;
	text-align: right;
}

.wh-compat {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
}

.wh-gallery {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
}

.wh-gallery img {
	width: 100%;
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
}

/* Tabs */
.wh-tabs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	border-bottom: 1px solid var(--border);
	margin-bottom: 2rem;
}

.wh-tabs__tab {
	border: 0;
	border-bottom: 2px solid transparent;
	background: transparent;
	padding: 0.75rem 1rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--muted-foreground);
	cursor: pointer;
}

.wh-tabs__tab[aria-selected="true"] {
	color: var(--foreground);
	border-bottom-color: var(--primary);
}

.wh-tabs__panel[hidden] {
	display: none;
}

/* Accordion — used for FAQ and changelog */
.wh-accordion {
	display: grid;
	gap: 0.75rem;
}

/*
 * Two-column FAQ layout for full-width sections.
 *
 * Grid rather than CSS multi-column: an accordion panel opening must grow its
 * own row, not reflow items into the other column. align-items: start keeps
 * each item at its natural height instead of stretching it to match its
 * neighbour, so an open answer never leaves a tall empty box beside it.
 */
@media (min-width: 900px) {
	.wh-accordion--2col {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
		gap: 0.75rem 1.25rem;
	}
}

.wh-accordion__item {
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	background: var(--card);
	overflow: hidden;
}

.wh-accordion__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	border: 0;
	background: transparent;
	padding: 1rem 1.25rem;
	font-size: 0.9375rem;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}

.wh-accordion__trigger .wh-icon {
	flex-shrink: 0;
	width: 1rem;
	height: 1rem;
	color: var(--muted-foreground);
	transition: transform 0.2s ease;
}

.wh-accordion__trigger[aria-expanded="true"] .wh-icon {
	transform: rotate(180deg);
}

.wh-accordion__panel {
	padding: 0 1.25rem 1.25rem;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--muted-foreground);
}

.wh-accordion__panel[hidden] {
	display: none;
}

/* Changelog entries */
.wh-changelog {
	display: grid;
	gap: 1.25rem;
}

.wh-changelog__release {
	border-left: 2px solid var(--border);
	padding-left: 1.25rem;
}

.wh-changelog__version {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.625rem;
	font-weight: 600;
}

.wh-changelog__date {
	font-size: 0.8125rem;
	font-weight: 400;
	color: var(--muted-foreground);
}

.wh-changelog__notes {
	margin-top: 0.5rem;
	display: grid;
	gap: 0.375rem;
	font-size: 0.875rem;
	color: var(--muted-foreground);
}

.wh-changelog__notes li::before {
	content: "— ";
	opacity: 0.6;
}

/* Case study problem/solution blocks */
.wh-case {
	display: grid;
	gap: 1.25rem;
}

@media (min-width: 768px) {
	.wh-case {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.wh-case__block {
	border: 1px solid var(--border);
	border-radius: var(--radius-2xl);
	background: var(--card);
	padding: 1.5rem;
}

.wh-case__label {
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--primary);
}

.wh-case__block p {
	margin-top: 0.75rem;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--muted-foreground);
}

/* Testimonials: see assets/css/sections.css for the quote card. */

/* Team */
.wh-person {
	text-align: center;
}

.wh-person img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--radius-2xl);
}

.wh-person__name {
	margin-top: 1rem;
	font-size: 1rem;
	font-weight: 600;
}

.wh-person__role {
	font-size: 0.875rem;
	color: var(--muted-foreground);
}

/* =========================================================================
   13. Forms
   ====================================================================== */

.wh-form {
	border: 1px solid var(--border);
	border-radius: var(--radius-3xl);
	background: var(--card);
	box-shadow: var(--shadow-card);
	padding: 1.5rem;
}

@media (min-width: 640px) {
	.wh-form {
		padding: 2rem;
	}
}

.wh-form--search {
	margin-bottom: 2.5rem;
}

.wh-form__grid {
	display: grid;
	gap: 1.25rem;
}

@media (min-width: 640px) {
	.wh-form__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.wh-form__field--full {
		grid-column: 1 / -1;
	}
}

.wh-label {
	display: block;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.4;
}

.wh-label .wh-required {
	color: var(--destructive);
}

.wh-input,
.wh-select,
.wh-textarea {
	display: block;
	width: 100%;
	margin-top: 0.5rem;
	min-height: 2.5rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--input);
	border-radius: var(--radius-md);
	background: var(--background);
	color: var(--foreground);
	font-size: 0.875rem;
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease;
}

.wh-textarea {
	min-height: 8rem;
	resize: vertical;
	line-height: 1.6;
}

.wh-input:focus,
.wh-select:focus,
.wh-textarea:focus {
	border-color: var(--ring);
	outline: 2px solid transparent;
	box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 25%, transparent);
}

.wh-input[aria-invalid="true"],
.wh-select[aria-invalid="true"],
.wh-textarea[aria-invalid="true"] {
	border-color: var(--destructive);
}

.wh-field__error {
	margin-top: 0.375rem;
	font-size: 0.75rem;
	color: var(--destructive);
}

.wh-form__notice {
	border-radius: var(--radius-lg);
	padding: 0.875rem 1rem;
	font-size: 0.875rem;
	margin-bottom: 1.25rem;
}

.wh-form__notice--success {
	background: color-mix(in oklab, var(--success) 15%, transparent);
	color: color-mix(in oklab, var(--success) 80%, var(--foreground));
	border: 1px solid color-mix(in oklab, var(--success) 40%, transparent);
}

.wh-form__notice--error {
	background: color-mix(in oklab, var(--destructive) 12%, transparent);
	color: color-mix(in oklab, var(--destructive) 85%, var(--foreground));
	border: 1px solid color-mix(in oklab, var(--destructive) 35%, transparent);
}

/* Honeypot: off-screen, not display:none, so bots still fill it. */
.wh-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.wh-note {
	border: 1px dashed var(--border);
	border-radius: var(--radius-lg);
	background: color-mix(in oklab, var(--secondary) 60%, transparent);
	padding: 0.625rem 0.875rem;
	font-size: 0.75rem;
	color: var(--muted-foreground);
}

/* Search form */
.wh-searchform {
	display: flex;
	gap: 0.5rem;
}

.wh-searchform .wh-input {
	margin-top: 0;
}

/* Search dialog */
.wh-dialog {
	border: 0;
	padding: 0;
	background: transparent;
	max-width: 40rem;
	width: calc(100% - 2rem);
	margin-top: 6vh;
}

.wh-dialog::backdrop {
	background: oklch(0.21 0.045 258 / 0.55);
	backdrop-filter: blur(4px);
}

.wh-dialog__panel {
	border: 1px solid var(--border);
	border-radius: var(--radius-2xl);
	background: var(--popover);
	color: var(--popover-foreground);
	box-shadow: var(--shadow-lift);
	overflow: hidden;
}

.wh-dialog__head {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--border);
}

.wh-dialog__head .wh-input {
	margin-top: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	font-size: 1rem;
}

.wh-dialog__head .wh-input:focus {
	box-shadow: none;
}

.wh-dialog__results {
	max-height: 60vh;
	overflow-y: auto;
	padding: 0.5rem;
}

.wh-dialog__results li a {
	display: block;
	border-radius: var(--radius-md);
	padding: 0.625rem 0.75rem;
	text-decoration: none;
}

.wh-dialog__results li a:hover,
.wh-dialog__results li a:focus {
	background: var(--secondary);
}

.wh-dialog__result-type {
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--muted-foreground);
}

.wh-dialog__empty {
	padding: 2rem 1.25rem;
	text-align: center;
	font-size: 0.875rem;
	color: var(--muted-foreground);
}

/* =========================================================================
   14. Footer
   ====================================================================== */

.wh-footer {
	margin-top: 6rem;
	background: var(--gradient-hero);
	color: var(--navy-foreground);
}

.wh-footer__top {
	display: grid;
	gap: 3rem;
	padding-block: 4rem;
}

@media (min-width: 768px) {
	.wh-footer__top {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.wh-footer__top {
		grid-template-columns: 1.4fr repeat(4, 1fr);
	}
}

.wh-footer__tagline {
	margin-top: 1rem;
	max-width: 20rem;
	font-size: 0.875rem;
	color: color-mix(in oklab, var(--navy-foreground) 70%, transparent);
}

.wh-footer__contact {
	display: grid;
	gap: 0.625rem;
	margin-top: 1.5rem;
	font-size: 0.875rem;
	color: color-mix(in oklab, var(--navy-foreground) 70%, transparent);
}

.wh-footer__contact li {
	display: flex;
	align-items: center;
	gap: 0.625rem;
}

.wh-footer__contact a {
	text-decoration: none;
}

.wh-footer__contact a:hover {
	color: var(--primary);
}

.wh-footer__contact .wh-icon {
	flex-shrink: 0;
	width: 1rem;
	height: 1rem;
	color: var(--primary);
}

.wh-footer__col h2,
.wh-footer__col h3 {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--navy-foreground);
	font-family: var(--font-sans);
	letter-spacing: 0;
}

.wh-footer__col ul {
	display: grid;
	gap: 0.625rem;
	margin-top: 1rem;
}

.wh-footer__col a {
	font-size: 0.875rem;
	color: color-mix(in oklab, var(--navy-foreground) 70%, transparent);
	text-decoration: none;
	transition: color 0.2s ease;
}

.wh-footer__col a:hover {
	color: var(--primary);
}

.wh-social {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 1.5rem;
}

.wh-social--center {
	justify-content: center;
}

.wh-social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border: 1px solid color-mix(in oklab, var(--navy-foreground) 15%, transparent);
	border-radius: var(--radius-md);
	color: color-mix(in oklab, var(--navy-foreground) 75%, transparent);
	transition:
		background-color 0.2s ease,
		color 0.2s ease;
}

.wh-social a:hover {
	background: color-mix(in oklab, var(--navy-foreground) 10%, transparent);
	color: var(--primary);
}

.wh-social .wh-icon {
	width: 1.125rem;
	height: 1.125rem;
}

.wh-footer__bottom {
	border-top: 1px solid color-mix(in oklab, var(--navy-foreground) 10%, transparent);
}

.wh-footer__bottom-inner {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding-block: 1.5rem;
	font-size: 0.75rem;
	color: color-mix(in oklab, var(--navy-foreground) 60%, transparent);
}

@media (min-width: 640px) {
	.wh-footer__bottom-inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

.wh-footer__bottom ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
}

.wh-footer__bottom a {
	text-decoration: none;
}

.wh-footer__bottom a:hover {
	color: var(--primary);
}

/* =========================================================================
   15. Widgets, comments, 404, misc
   ====================================================================== */

.wh-widget {
	border: 1px solid var(--border);
	border-radius: var(--radius-2xl);
	background: var(--card);
	padding: 1.5rem;
}

.wh-widget + .wh-widget {
	margin-top: 1.25rem;
}

.wh-widget__title {
	font-size: 1rem;
	font-weight: 600;
	margin-bottom: 1rem;
}

.wh-widget ul {
	display: grid;
	gap: 0.5rem;
	font-size: 0.875rem;
}

.wh-widget a {
	color: var(--muted-foreground);
	text-decoration: none;
}

.wh-widget a:hover {
	color: var(--primary);
}

/* Comments: see assets/css/sections.css for the thread and form. */

.wh-404 {
	text-align: center;
	max-width: 34rem;
	margin-inline: auto;
}

.wh-404__code {
	font-family: var(--font-display);
	font-size: 5rem;
	line-height: 1;
	background: var(--gradient-accent);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.wh-empty {
	border: 1px dashed var(--border);
	border-radius: var(--radius-2xl);
	padding: 3rem 1.5rem;
	text-align: center;
	color: var(--muted-foreground);
}

.wh-empty__title {
	font-size: 1.125rem;
	color: var(--foreground);
	margin-bottom: 0.5rem;
}

/* -------------------------------------------------------------------------
 * Demo content markers
 *
 * Deliberately conspicuous. Demo material must never be mistaken for real
 * company content, by a visitor or by whoever is about to launch the site.
 * ---------------------------------------------------------------------- */

.wh-demo-banner {
	position: relative;
	z-index: 60;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	padding: 0.625rem 1.25rem;
	background: var(--warning);
	color: oklch(0.22 0.05 60);
	font-size: 0.8125rem;
	font-weight: 500;
	text-align: center;
}

.wh-demo-banner__tag {
	border-radius: 9999px;
	background: oklch(0.22 0.05 60);
	color: var(--warning);
	padding: 0.125rem 0.625rem;
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

.wh-demo-banner a {
	color: inherit;
	font-weight: 700;
}

/* Corner flag on any demo card or article. */
.wh-is-demo {
	position: relative;
}

.wh-is-demo::before {
	content: "DEMO";
	position: absolute;
	top: 0.5rem;
	inset-inline-start: 0.5rem;
	z-index: 3;
	border-radius: 9999px;
	background: var(--warning);
	color: oklch(0.22 0.05 60);
	padding: 0.125rem 0.5rem;
	font-family: var(--font-sans);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	pointer-events: none;
}

/* On a full-width single post the flag sits with the content, not the viewport. */
.wh-article.wh-is-demo::before {
	top: -0.5rem;
}

/* Give the card's own category badge room so the flag never sits on top of it. */
.wh-is-demo .wh-card__media .wh-badge--start {
	top: 2.5rem;
}

/* Admin-only setup hint, shown to editors when a section has no content yet. */
.wh-setup-hint {
	border: 1px dashed color-mix(in oklab, var(--warning) 55%, transparent);
	background: color-mix(in oklab, var(--warning) 12%, transparent);
	border-radius: var(--radius-lg);
	padding: 0.75rem 1rem;
	font-size: 0.8125rem;
	color: var(--foreground);
	margin-top: 1rem;
}

.wh-stack {
	display: grid;
	gap: 1.25rem;
}

.wh-mb-lg {
	margin-bottom: 2.5rem;
}

/* Contact details rendered on a light card rather than the dark footer. */
.wh-contact-list {
	color: var(--muted-foreground);
}

.wh-mt-xs {
	margin-top: 0.25rem;
}

.wh-mt-sm {
	margin-top: 0.625rem;
}

.wh-mt-md {
	margin-top: 1.25rem;
}

.wh-mt-lg {
	margin-top: 2.25rem;
}

.wh-flex-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.wh-flex-actions--center {
	justify-content: center;
}

.wh-icon {
	display: inline-block;
	width: 1.25rem;
	height: 1.25rem;
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	vertical-align: middle;
}

/* Brand marks in the sprite are drawn as filled shapes, not strokes. */
.wh-icon--brand {
	fill: currentColor;
	stroke: none;
}

/* Print: drop chrome, keep content readable. */
@media print {
	.wh-header,
	.wh-footer,
	.wh-share,
	.wh-buybox,
	.wh-pagination,
	.wh-toolbar {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
	}
}

/* -------------------------------------------------------------------------
   WhatsApp click-to-chat

   A plain anchor, styled as a floating action button. It sits clear of the
   viewport edges, never covers content at any width, and collapses to the icon
   alone on small screens. WhatsApp's own brand green is used deliberately —
   this control is recognised by its colour, and recolouring it to the site
   palette would make it harder to spot, not more tasteful.
   ---------------------------------------------------------------------- */

.wh-whatsapp {
	position: fixed;
	z-index: 60;
	inset-block-end: 1.25rem;
	inset-inline-end: 1.25rem;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
	border-radius: 9999px;
	background: #25d366;
	color: #06251a;
	font-family: var(--font-sans);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 8px 24px -8px rgb(0 0 0 / 0.45);
	transition:
		transform 0.25s ease,
		box-shadow 0.25s ease;
}

.wh-whatsapp:hover,
.wh-whatsapp:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px -8px rgb(0 0 0 / 0.5);
	color: #06251a;
}

.wh-whatsapp .wh-icon {
	width: 1.375rem;
	height: 1.375rem;
}

/* Icon only where a label would crowd the screen. */
@media (max-width: 640px) {
	.wh-whatsapp {
		padding: 0.875rem;
	}

	.wh-whatsapp__text {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wh-whatsapp {
		transition: none;
	}

	.wh-whatsapp:hover,
	.wh-whatsapp:focus-visible {
		transform: none;
	}
}