/* Hopkins Action: theme.css
 *
 * Colours, type sizes and spacing are theme.json presets (Global Styles), so
 * this file uses their CSS variables. Mobile first: base rules are for phones,
 * min-width queries add the wider layouts.
 *
 * Rules of the house: nothing interactive under 48px, no form text under
 * 16px, visible focus on everything, motion only when the visitor allows it.
 */

:root {
	--ha-forest: var(--wp--preset--color--forest, #1B2A19);
	--ha-raised: var(--wp--preset--color--forest-raised, #22341F);
	--ha-high: var(--wp--preset--color--forest-high, #2A3F27);
	--ha-rule: var(--wp--preset--color--rule, #3A5036);
	--ha-sage: var(--wp--preset--color--sage, #C9D3C5);
	--ha-moss: var(--wp--preset--color--moss, #9DAE97);
	--ha-cream: var(--wp--preset--color--cream, #F2EDE3);
	--ha-cream-deep: var(--wp--preset--color--cream-deep, #E4DCCB);
	--ha-bark: var(--wp--preset--color--bark, #4A5646);
	--ha-alert: var(--wp--preset--color--alert, #FFB4A8);
	--ha-rust: var(--wp--preset--color--rust, #A33A2A);
	--ha-field-line: #8FA089; /* 5.4:1 on forest: input borders pass non-text contrast */
	--ha-radius: 8px;
	--ha-tap: 48px;
	--ha-ease: cubic-bezier(.2, .7, .2, 1);
	/* Woodcut hatching: fine diagonal cuts, used for rules and shading. */
	--ha-hatch: repeating-linear-gradient(135deg, rgba(242, 237, 227, .22) 0 1px, transparent 1px 6px);
	--ha-hatch-dark: repeating-linear-gradient(135deg, rgba(27, 42, 25, .22) 0 1px, transparent 1px 6px);
}

/* ---------- Base ---------- */
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-optical-sizing: auto;
	overflow-x: clip;
}
h1, h2, h3, h4, .wp-block-heading { text-wrap: balance; }
p, li, dd, figcaption, summary { text-wrap: pretty; }
img { height: auto; max-width: 100%; }
::selection { background: var(--ha-cream); color: var(--ha-forest); }

a { text-underline-offset: .18em; text-decoration-thickness: 1px; transition: color .15s var(--ha-ease), text-decoration-color .15s var(--ha-ease); }
a:hover { text-decoration-thickness: 2px; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--ha-cream);
	outline-offset: 3px;
	border-radius: 2px;
}
.has-cream-background-color :where(a, button, input, select, textarea, summary):focus-visible,
.is-style-cream-card :where(a, button, summary):focus-visible,
.ha-plan.is-featured :where(a, button):focus-visible {
	outline-color: var(--ha-forest);
}

code {
	font-family: var(--wp--preset--font-family--mono);
	font-size: .88em;
	background: rgba(242, 237, 227, .1);
	padding: .1em .35em;
	border-radius: 3px;
	overflow-wrap: anywhere;
}

.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; margin: -1px; overflow: hidden; padding: 0;
	position: absolute !important; width: 1px; word-wrap: normal !important;
}

/* ---------- Type helpers ---------- */
.is-style-kicker {
	font-family: var(--wp--preset--font-family--roboto-condensed);
	font-style: italic;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .09em;
	font-size: var(--wp--preset--font-size--caption) !important;
	line-height: 1.4;
	color: var(--ha-moss);
	margin-bottom: .25rem !important;
}
.has-cream-background-color .is-style-kicker,
.is-style-cream-card .is-style-kicker { color: var(--ha-bark); }

.ha-lede {
	font-size: var(--wp--preset--font-size--lede);
	line-height: 1.55;
	color: var(--ha-sage);
}
.has-cream-background-color .ha-lede { color: var(--ha-bark); }
.ha-small { font-size: 15px; color: var(--ha-moss); }
.has-cream-background-color .ha-small { color: var(--ha-bark); }

.ha-pro {
	display: inline-block;
	font-family: var(--wp--preset--font-family--roboto-condensed);
	font-style: italic;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: 12px;
	line-height: 1;
	padding: 5px 7px 4px;
	border: 1px solid currentColor;
	color: var(--ha-cream);
	border-radius: 3px;
	vertical-align: .3em;
	margin-left: .35em;
}

.ha-center { text-align: center; }
.ha-center .ha-lede, .ha-center .is-style-kicker { margin-left: auto !important; margin-right: auto !important; }
.ha-center .wp-block-buttons { justify-content: center; }

/* ---------- Buttons ---------- */
.wp-block-button__link {
	min-height: var(--ha-tap);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4em;
	text-align: center;
	text-decoration: none;
	transition: background-color .15s var(--ha-ease), color .15s var(--ha-ease), border-color .15s var(--ha-ease), transform .15s var(--ha-ease);
	font-variant-numeric: tabular-nums;
}
.wp-block-button__link:active { transform: translateY(1px); }
.wp-block-button.is-style-ghost .wp-block-button__link {
	background: transparent;
	color: var(--ha-cream);
	border-color: rgba(242, 237, 227, .6);
}
.wp-block-button.is-style-ghost .wp-block-button__link:hover,
.wp-block-button.is-style-ghost .wp-block-button__link:focus-visible {
	background: rgba(242, 237, 227, .1);
	border-color: var(--ha-cream);
	color: var(--ha-white, #fff);
}
.wp-block-button.is-style-dark .wp-block-button__link,
.has-cream-background-color .wp-block-button:not(.is-style-ghost) .wp-block-button__link {
	background: var(--ha-forest);
	color: var(--ha-cream);
	border-color: var(--ha-forest);
}
.wp-block-button.is-style-dark .wp-block-button__link:hover,
.has-cream-background-color .wp-block-button:not(.is-style-ghost) .wp-block-button__link:hover {
	background: var(--ha-high);
	border-color: var(--ha-high);
	color: #fff;
}
.has-cream-background-color .wp-block-button.is-style-ghost .wp-block-button__link {
	color: var(--ha-forest);
	border-color: var(--ha-forest);
}
.ha-actions { gap: 12px; margin-top: var(--wp--preset--spacing--30) !important; }
@media (max-width: 559px) {
	.ha-actions { flex-direction: column; align-items: stretch; }
	.ha-actions .wp-block-button, .ha-actions .wp-block-button__link { width: 100%; }
}

/* ---------- Header ---------- */
.ha-site-header { position: relative; z-index: 20; }
.ha-header { padding-top: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--ha-rule); background: var(--ha-forest); }
.ha-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	max-width: var(--wp--style--global--wide-size, 1180px);
	margin-inline: auto !important;
}
.ha-header__inner > * { margin-block: 0 !important; }
.ha-logo { display: inline-flex; align-items: center; min-height: var(--ha-tap); }
.ha-logo img { width: 84px; height: auto; display: block; }
.ha-nav { font-size: 16px; }
.ha-nav .wp-block-navigation__container { gap: 4px; }
.ha-nav .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	min-height: var(--ha-tap);
	padding: 0 14px;
	border-radius: 4px;
	color: var(--ha-white, #fff);
	text-decoration: none;
	font-weight: 500;
}
.ha-nav .wp-block-navigation-item__content:hover { background: rgba(242, 237, 227, .08); text-decoration: none; }
.ha-nav .current-menu-item > .wp-block-navigation-item__content { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .4em; }
.ha-nav .ha-nav__cta > .wp-block-navigation-item__content { border: 2px solid var(--ha-cream); color: var(--ha-cream); margin-left: 6px; }
.ha-nav .ha-nav__cta > .wp-block-navigation-item__content:hover { background: var(--ha-cream); color: var(--ha-forest); }

.ha-menu-toggle { display: none; }
@media (max-width: 719px) {
	.ha-js .ha-menu-toggle {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		min-height: var(--ha-tap);
		min-width: var(--ha-tap);
		padding: 0 14px;
		background: transparent;
		color: var(--ha-cream);
		border: 2px solid rgba(242, 237, 227, .5);
		border-radius: 4px;
		font: 600 16px/1 var(--wp--preset--font-family--roboto);
		cursor: pointer;
	}
	.ha-menu-toggle__bars, .ha-menu-toggle__bars::before, .ha-menu-toggle__bars::after {
		display: block; width: 18px; height: 2px; background: currentColor; border-radius: 1px; position: relative;
		transition: transform .2s var(--ha-ease), background-color .2s;
	}
	.ha-menu-toggle__bars::before, .ha-menu-toggle__bars::after { content: ""; position: absolute; left: 0; }
	.ha-menu-toggle__bars::before { top: -6px; }
	.ha-menu-toggle__bars::after { top: 6px; }
	.ha-menu-toggle[aria-expanded="true"] .ha-menu-toggle__bars { background: transparent; }
	.ha-menu-toggle[aria-expanded="true"] .ha-menu-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
	.ha-menu-toggle[aria-expanded="true"] .ha-menu-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

	.ha-js .ha-nav { display: none; flex-basis: 100%; }
	.ha-js .ha-header.is-open .ha-nav { display: block; }
	.ha-js .ha-nav .wp-block-navigation__container { flex-direction: column; align-items: stretch; gap: 0; padding: 8px 0 12px; }
	.ha-js .ha-nav .wp-block-navigation-item__content { width: 100%; font-size: 18px; padding: 0 4px; border-bottom: 1px solid var(--ha-rule); border-radius: 0; }
	.ha-js .ha-nav .ha-nav__cta > .wp-block-navigation-item__content { margin: 12px 0 0; justify-content: center; border-radius: 4px; border-bottom-width: 2px; }
	/* Without JavaScript the links simply wrap under the logo. */
	html:not(.ha-js) .ha-nav { flex-basis: 100%; }
	html:not(.ha-js) .ha-nav .wp-block-navigation-item__content { padding: 0 10px; }
}
@media (min-width: 720px) {
	.ha-header { padding-top: 16px; padding-bottom: 16px; }
	.ha-logo img { width: 104px; }
}

/* ---------- Sections ---------- */
.ha-main { margin-top: 0 !important; }
.ha-main > .wp-block-post-content { margin-top: 0; }
.ha-section {
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--50);
	position: relative;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
.wp-block-post-content > .ha-section { margin-block: 0; }
/* Two plain green sections in a row get a woodcut hatch line between them. */
.ha-section:not(.has-background) + .ha-section:not(.has-background)::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: min(var(--wp--style--global--wide-size, 1180px), calc(100% - 32px));
	height: 8px;
	background: var(--ha-hatch);
	opacity: .7;
}
.ha-section > .wp-block-heading { margin-top: .2rem; }
/* Section text sits on the left edge of the wide column (lined up with the
   card grids), at a readable measure. Centred sections stay centred. */
.ha-section:not(.ha-center) > :not(.alignwide):not(.alignfull) {
	margin-left: max(0px, calc((100% - var(--wp--style--global--wide-size, 1180px)) / 2)) !important;
	margin-right: auto !important;
}
.ha-section:not(.ha-center) > h2 { max-width: 20ch; }
.ha-section:not(.ha-center) > h1 { max-width: 16ch; }
.ha-center > h2 { max-width: 22ch; }
.ha-hero { padding-top: var(--wp--preset--spacing--40); }

.has-cream-background-color { color: var(--ha-forest); }
.has-cream-background-color a:not(.wp-block-button__link) { color: var(--ha-forest); }
.has-forest-raised-background-color .is-style-panel { background: var(--ha-forest); }

.wp-block-separator.is-style-hatch { border: 0; height: 8px; background: var(--ha-hatch); opacity: .8; }

/* ---------- Grids and cards ---------- */
.ha-grid { gap: 20px !important; margin-top: var(--wp--preset--spacing--40) !important; }
.ha-grid > * { margin: 0 !important; }
.is-style-panel, .is-style-cream-card {
	border-radius: var(--ha-radius);
	padding: 24px;
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: .75rem;
}
.is-style-panel > *, .is-style-cream-card > * { margin: 0 !important; }
.is-style-panel { background: var(--ha-raised); border: 1px solid var(--ha-rule); }
.is-style-cream-card { background: var(--ha-cream); color: var(--ha-forest); border: 1px solid var(--ha-cream); }
.has-cream-background-color .is-style-cream-card { background: #FBF9F4; border-color: var(--ha-cream-deep); }
.is-style-cream-card a { color: var(--ha-forest); }
.ha-card-title { font-size: var(--wp--preset--font-size--subhead) !important; line-height: 1.2; letter-spacing: -0.01em; }
.ha-card-icon img { width: 72px; height: 72px; }
.ha-card-link { margin-top: auto !important; padding-top: .5rem; }
.ha-card-link a {
	display: inline-flex; align-items: center; min-height: var(--ha-tap);
	font-weight: 600; color: var(--ha-cream);
}
.ha-card-link a::after { content: "→"; margin-left: .4em; transition: transform .15s var(--ha-ease); }
.ha-card-link a:hover::after { transform: translateX(3px); }
.is-style-cream-card .ha-card-link a { color: var(--ha-forest); }
.is-style-panel .wp-block-buttons, .is-style-cream-card .wp-block-buttons { margin-top: auto !important; padding-top: .5rem; }
@media (min-width: 720px) {
	.is-style-panel, .is-style-cream-card { padding: 28px; }
}

.is-style-ticks { list-style: none; padding-left: 0; }
.is-style-ticks li { position: relative; padding-left: 1.7em; margin: .45em 0; }
.is-style-ticks li::before {
	content: ""; position: absolute; left: 0; top: .5em; width: .9em; height: .5em;
	border-left: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(-45deg); color: var(--ha-cream); opacity: .9;
}
.is-style-cream-card .is-style-ticks li::before, .has-cream-background-color .is-style-ticks li::before { color: var(--ha-forest); }

.ha-note {
	margin-top: var(--wp--preset--spacing--40) !important;
	padding: 20px 24px;
	border-left: 4px solid var(--ha-cream);
	background: rgba(242, 237, 227, .06);
	border-radius: 0 var(--ha-radius) var(--ha-radius) 0;
	max-width: 64ch;
}
.ha-note p { margin: 0; }

/* Prices: easy to spot on the page, and named "Price: ..." in List View. */
.ha-price {
	margin-top: auto !important;
	padding-top: 14px;
	border-top: 1px solid var(--ha-rule);
	font-weight: 600;
	font-size: 20px;
	color: var(--ha-cream);
	font-variant-numeric: tabular-nums;
}
.ha-price--line { border-top: 0; margin-top: var(--wp--preset--spacing--30) !important; font-size: 18px; }

.ha-jump { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--wp--preset--spacing--30) !important; }
.ha-jump a {
	display: inline-flex; align-items: center; min-height: var(--ha-tap); padding: 0 16px;
	border: 1px solid var(--ha-rule); border-radius: 999px; text-decoration: none; color: var(--ha-cream);
}
.ha-jump a:hover { border-color: var(--ha-cream); }

.is-featured.is-style-cream-card { box-shadow: 0 0 0 2px var(--ha-cream); }

/* ---------- Home hero ---------- */
.ha-home-hero { display: grid; gap: 32px; align-items: center; }
.ha-home-hero__text > * { margin-block: 0 0 1rem; }
.ha-home-hero h1 { font-size: var(--wp--preset--font-size--display); max-width: 14ch; margin: .2rem 0 1.25rem; }
.ha-home-hero__art { position: relative; display: none; place-items: center; }
.ha-home-hero__art::before {
	content: ""; position: absolute; inset: 6% 12%; border-radius: 50%;
	background: var(--ha-hatch);
	-webkit-mask: radial-gradient(closest-side, #000 55%, transparent 100%);
	mask: radial-gradient(closest-side, #000 55%, transparent 100%);
	opacity: .55;
}
.ha-home-hero__logo { position: relative; margin: 0 !important; }
.ha-home-hero__logo img { width: min(240px, 62vw); }
@media (min-width: 900px) {
	.ha-home-hero { grid-template-columns: 7fr 5fr; gap: 48px; }
	.ha-home-hero__art { display: grid; }
	.ha-home-hero__logo img { width: 100%; max-width: 420px; }
}

/* ---------- Who ---------- */
.ha-who { display: grid; gap: 28px; align-items: start; }
.ha-who__text > * { margin-block: 0 1rem; }
.ha-who__text h2 { max-width: 16ch; }
.ha-creds { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.ha-creds li {
	padding: 16px 18px 16px 22px; border: 1px solid var(--ha-rule); border-radius: var(--ha-radius);
	background: var(--ha-raised); position: relative; overflow: hidden; color: var(--ha-sage); line-height: 1.4;
}
.ha-creds li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--ha-hatch); }
.ha-creds strong { display: block; color: #fff; font-size: 20px; letter-spacing: -0.01em; }
@media (min-width: 900px) { .ha-who { grid-template-columns: 7fr 5fr; gap: 56px; } }

/* ---------- Product pages ---------- */
.ha-product-hero__text > * { margin-block: 0 1rem; }
.ha-product-hero h1 { font-size: var(--wp--preset--font-size--display); margin: .25rem auto .5rem; }
.ha-product-icon img { width: 104px; height: 104px; }
.ha-product-icon { margin-top: .75rem !important; margin-bottom: 0 !important; }
.ha-product-icon--small img { width: 80px; height: 80px; }
.ha-center .ha-product-icon { display: flex; justify-content: center; }
.ha-promise {
	font-size: var(--wp--preset--font-size--title);
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -0.01em;
	max-width: 26ch;
	margin-inline: auto !important;
}
.ha-product-hero .ha-lede { margin-inline: auto !important; }
.ha-launch {
	display: inline-block;
	font-size: 15px;
	color: var(--ha-cream);
	border: 1px dashed rgba(242, 237, 227, .45);
	padding: 10px 14px;
	border-radius: 6px;
	max-width: 62ch;
}
.ha-shot img { border: 1px solid var(--ha-rule); border-radius: var(--ha-radius); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .55); background: var(--ha-raised); }
.ha-shot--hero { margin-top: var(--wp--preset--spacing--40) !important; }
.ha-shot--narrow img { max-width: min(100%, 380px); margin-inline: auto; display: block; }
.ha-shot figcaption { text-align: center; color: var(--ha-moss); font-size: 15px; }

/* Centred sections centre their headings, not the content blocks inside. */
.ha-center :is(.ha-feature, .ha-faq, .ha-grid, .ha-pricing, .ha-compare) { text-align: left; }
.ha-feature { display: grid; gap: 28px; align-items: center; margin-top: var(--wp--preset--spacing--50) !important; }
.ha-feature__text > * { margin-block: 0 1rem; }
.ha-feature__text h3 { max-width: 20ch; }
.ha-feature__media > * { margin: 0 !important; }
@media (min-width: 900px) {
	.ha-feature { grid-template-columns: 5fr 7fr; gap: 64px; }
	.ha-feature--flip { grid-template-columns: 7fr 5fr; }
	.ha-feature--flip .ha-feature__text { order: 2; }
	.ha-feature--intro { margin-top: 0 !important; }
}
.ha-extras { margin-top: var(--wp--preset--spacing--50) !important; }

.ha-compare { max-width: 860px; margin-inline: auto !important; margin-top: var(--wp--preset--spacing--40) !important; }
.ha-compare table { border-collapse: collapse; width: 100%; background: var(--ha-raised); border: 1px solid var(--ha-rule); border-radius: var(--ha-radius); overflow: hidden; font-variant-numeric: tabular-nums; }
.ha-compare th, .ha-compare td { border: 0; border-bottom: 1px solid var(--ha-rule); padding: 14px 12px; text-align: center; vertical-align: middle; }
.ha-compare thead th { font-weight: 600; font-size: 16px; }
.ha-compare thead th:last-child { color: var(--ha-cream); }
.ha-compare table, .ha-compare table.has-fixed-layout { table-layout: auto; }
.ha-compare th:first-child, .ha-compare td:first-child { text-align: left; }
.ha-compare th:not(:first-child), .ha-compare td:not(:first-child) { width: 4.75rem; white-space: nowrap; padding-inline: 6px; }
.ha-compare td:not(:first-child) { color: var(--ha-cream); font-weight: 600; font-size: 15px; }
.ha-compare tbody tr:last-child td { border-bottom: 0; }
@media (min-width: 720px) {
	.ha-compare th, .ha-compare td { padding: 15px 20px; }
	.ha-compare th:not(:first-child), .ha-compare td:not(:first-child) { width: 7.5rem; padding-inline: 12px; }
}

/* Pricing */
.ha-pricing { margin-top: var(--wp--preset--spacing--40); text-align: left; }
.ha-pricing__switches { display: none; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 28px; }
.ha-js .ha-pricing__switches { display: flex; }
.ha-switch { display: inline-flex; background: var(--ha-forest); border: 1px solid var(--ha-rule); border-radius: 999px; padding: 4px; }
.ha-switch__btn {
	min-height: var(--ha-tap); min-width: 6.5rem; padding: 0 20px; border: 0; border-radius: 999px;
	background: transparent; color: var(--ha-sage); font: 600 16px/1 var(--wp--preset--font-family--roboto); cursor: pointer;
	transition: background-color .15s var(--ha-ease), color .15s var(--ha-ease);
}
.ha-switch__btn:hover { color: #fff; }
.ha-switch__btn[aria-pressed="true"] { background: var(--ha-cream); color: var(--ha-forest); }
.ha-pricing__cycle + .ha-pricing__cycle { margin-top: 40px; }
.ha-pricing__cycle-title { text-align: center; font-size: var(--wp--preset--font-size--subhead); margin: 0 0 16px; }
.ha-js .ha-pricing__cycle:not(.is-active) { display: none; }
.ha-js .ha-pricing__cycle + .ha-pricing__cycle { margin-top: 0; }
.ha-js .ha-pricing__cycle-title { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.ha-plans { display: grid; gap: 28px 20px; padding-top: 14px; }
@media (min-width: 900px) { .ha-plans { grid-template-columns: repeat(3, 1fr); } }
.ha-plan {
	position: relative; display: flex; flex-direction: column; padding: 30px 24px 24px;
	background: var(--ha-forest); border: 1px solid var(--ha-rule); border-radius: 10px;
}
.ha-plan > * { margin: 0; }
.ha-plan.is-featured { background: var(--ha-cream); color: var(--ha-forest); border-color: var(--ha-cream); }
.ha-plan__badge {
	position: absolute; top: -14px; left: 50%; transform: translateX(-50%); white-space: nowrap;
	background: var(--ha-forest); color: var(--ha-cream); border: 1px solid var(--ha-cream);
	padding: 5px 12px 4px; border-radius: 999px;
	font: italic 500 13px/1.2 var(--wp--preset--font-family--roboto-condensed); text-transform: uppercase; letter-spacing: .08em;
}
.ha-plan__name { font: italic 500 15px/1.2 var(--wp--preset--font-family--roboto-condensed); text-transform: uppercase; letter-spacing: .09em; color: var(--ha-moss); }
.ha-plan.is-featured .ha-plan__name { color: var(--ha-bark); }
.ha-plan__sites { font-size: 22px; font-weight: 600; margin-top: 4px; }
.ha-money { font-variant-numeric: tabular-nums; }
.ha-plan__price { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.ha-plan .ha-money { font-size: clamp(38px, 5vw, 46px); font-weight: 600; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; min-width: 4.2ch; }
.ha-plan__per { font-size: 15px; color: var(--ha-sage); }
.ha-plan.is-featured .ha-plan__per { color: var(--ha-bark); }
.ha-plan__list { list-style: none; padding: 0; margin: 20px 0 24px; display: grid; gap: 8px; font-size: 16px; }
.ha-plan__list li { padding-left: 1.6em; position: relative; }
.ha-plan__list li::before { content: ""; position: absolute; left: .1em; top: .45em; width: .8em; height: .45em; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); opacity: .85; }
.ha-plan__buy {
	margin-top: auto; display: flex; align-items: center; justify-content: center; min-height: var(--ha-tap);
	padding: 12px 20px; border-radius: 4px; border: 2px solid var(--ha-cream);
	background: var(--ha-cream); color: var(--ha-forest); font-weight: 600; text-decoration: none;
	transition: background-color .15s var(--ha-ease), color .15s var(--ha-ease);
}
.ha-plan__buy:hover { background: #fff; border-color: #fff; text-decoration: none; }
.ha-plan.is-featured .ha-plan__buy { background: var(--ha-forest); color: var(--ha-cream); border-color: var(--ha-forest); }
.ha-plan.is-featured .ha-plan__buy:hover { background: var(--ha-high); color: #fff; }
.ha-pricing__notes { list-style: none; padding: 0; margin: 36px 0 0; display: grid; gap: 16px; font-size: 15px; color: var(--ha-sage); }
.ha-pricing__notes li { padding-left: 16px; border-left: 3px solid var(--ha-rule); }
.ha-pricing__notes strong { color: #fff; }
@media (min-width: 900px) { .ha-pricing__notes { grid-template-columns: repeat(3, 1fr); } }
.ha-pricing__small { margin-top: 20px; font-size: 14px; color: var(--ha-moss); text-align: center; max-width: 72ch; margin-inline: auto; }

.ha-design-cards { margin-top: var(--wp--preset--spacing--50) !important; }
.ha-ruled { padding-top: 20px; border-top: 2px solid var(--ha-cream); }
.ha-ruled > * { margin-block: 0 .6rem; }
.ha-ruled p { color: var(--ha-sage); font-size: 16px; }

/* FAQ */
.ha-faq { max-width: 760px; margin-inline: auto !important; margin-top: var(--wp--preset--spacing--40) !important; border-top: 1px solid var(--ha-rule); }
.ha-faq .wp-block-details { margin: 0 !important; padding: 0; border-bottom: 1px solid var(--ha-rule); }
.ha-faq summary {
	list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
	min-height: var(--ha-tap); padding: 18px 2px; font-weight: 600; font-size: 19px; line-height: 1.35;
}
.ha-faq summary::-webkit-details-marker { display: none; }
.ha-faq summary::after {
	content: ""; flex: none; width: 12px; height: 12px; border-right: 2px solid var(--ha-cream); border-bottom: 2px solid var(--ha-cream);
	transform: rotate(45deg) translate(-3px, -3px); transition: transform .2s var(--ha-ease);
}
.ha-faq details[open] > summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.ha-faq details > :not(summary) { margin: 0 2px 20px; color: var(--ha-sage); }
.ha-faq-section > .is-style-kicker { text-align: center; }

.ha-cta h2 { margin-inline: auto !important; max-width: 20ch; }

/* ---------- Contact ---------- */
.ha-contact { display: grid; gap: 40px; }
.ha-contact > * > * { margin-block: 0 1rem; }
@media (min-width: 900px) { .ha-contact { grid-template-columns: 3fr 2fr; gap: 64px; } }
.ha-form { display: grid; gap: 18px; max-width: 640px; }
.ha-form > * { margin: 0; }
.ha-field { display: grid; gap: 6px; }
.ha-field label { font-weight: 600; font-size: 16px; }
.ha-field input, .ha-field select, .ha-field textarea {
	box-sizing: border-box;
	width: 100%; min-height: var(--ha-tap); padding: 12px 14px; font: 400 17px/1.4 var(--wp--preset--font-family--roboto);
	color: #fff; background: var(--ha-raised); border: 1px solid var(--ha-field-line); border-radius: 4px;
	transition: border-color .15s var(--ha-ease), box-shadow .15s var(--ha-ease);
}
.ha-field textarea { min-height: 10rem; resize: vertical; }
.ha-field select {
	appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer;
	background-image: linear-gradient(45deg, transparent 50%, var(--ha-cream) 50%), linear-gradient(135deg, var(--ha-cream) 50%, transparent 50%);
	background-position: right 22px center, right 16px center; background-size: 6px 6px; background-repeat: no-repeat;
}
.ha-field input:hover, .ha-field select:hover, .ha-field textarea:hover { border-color: var(--ha-sage); }
.ha-field :is(input, select, textarea):focus-visible { outline: 3px solid var(--ha-cream); outline-offset: 2px; border-color: var(--ha-cream); }
.ha-field [aria-invalid="true"] { border-color: var(--ha-alert); }
.ha-form__submit {
	min-height: var(--ha-tap); padding: 12px 28px; border-radius: 4px; border: 2px solid var(--ha-cream);
	background: var(--ha-cream); color: var(--ha-forest); font: 600 17px/1.2 var(--wp--preset--font-family--roboto); cursor: pointer;
	transition: background-color .15s var(--ha-ease);
}
.ha-form__submit:hover { background: #fff; border-color: #fff; }
.ha-form__submit[disabled] { opacity: .7; cursor: progress; }
@media (max-width: 559px) { .ha-form__submit { width: 100%; } }
.ha-form__note { font-size: 15px; color: var(--ha-moss); }
.ha-form__error { color: var(--ha-alert); border: 1px solid var(--ha-alert); border-radius: 6px; padding: 12px 14px; }
.ha-form-status:empty { display: none; }
.ha-form-status.is-sent { background: var(--ha-cream); color: var(--ha-forest); border-radius: var(--ha-radius); padding: 20px 22px; }
.ha-form-status.is-error { color: var(--ha-alert); border: 1px solid var(--ha-alert); border-radius: 6px; padding: 12px 14px; margin-bottom: 16px; }
.ha-form-status p { margin: 0; }
.ha-form-status:focus { outline: none; }
.ha-hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.ha-contact__aside h2 { font-size: var(--wp--preset--font-size--title); }
.ha-placeholder { border: 2px dashed var(--ha-cream); border-radius: var(--ha-radius); padding: 18px 20px; background: rgba(242, 237, 227, .06); }
.ha-placeholder > * { margin-block: 0 .5rem; }
.ha-social__heading { font-size: var(--wp--preset--font-size--subhead); margin-top: 1.5rem; }
.ha-social { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ha-social a {
	display: inline-flex; align-items: center; min-height: var(--ha-tap); padding: 0 16px;
	border: 1px solid var(--ha-rule); border-radius: 999px; color: var(--ha-cream); text-decoration: none;
}
.ha-social a:hover { border-color: var(--ha-cream); }

/* ---------- Plain pages (privacy policy, posts) ---------- */
.ha-main--page { padding-top: var(--wp--preset--spacing--50); padding-bottom: var(--wp--preset--spacing--60); }
.ha-prose a { color: var(--ha-cream); }
/* Long-read pages (terms): room above each heading, text tucked under it. */
.ha-prose h2.wp-block-heading { margin-top: var(--wp--preset--spacing--60) !important; margin-bottom: 0 !important; font-size: clamp(30px, 4vw, 40px); }
.ha-prose h2.wp-block-heading:first-child { margin-top: 0 !important; }
.ha-prose h3.wp-block-heading { margin-top: var(--wp--preset--spacing--40) !important; margin-bottom: 0 !important; font-size: 21px; }
.ha-prose h2.wp-block-heading + * , .ha-prose h3.wp-block-heading + * { margin-top: 10px !important; }
.ha-prose p, .ha-prose li { max-width: 40em; }
.ha-list .wp-block-post { padding: 20px 0; border-bottom: 1px solid var(--ha-rule); }
.wp-block-search__input { min-height: var(--ha-tap); font-size: 17px; }

/* ---------- Footer ---------- */
.ha-footer {
	background: #152113;
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: 28px;
	position: relative;
	color: var(--ha-sage);
	margin-top: 0 !important;
}
.ha-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 8px; background: var(--ha-hatch); opacity: .55; }
.ha-footer__inner { display: grid; gap: 28px; max-width: var(--wp--style--global--wide-size, 1180px); margin-inline: auto !important; }
.ha-footer__inner > * { margin: 0 !important; }
.ha-footer__brand > * { margin: 0 0 .5rem !important; }
.ha-footer__logo { display: inline-block; min-height: var(--ha-tap); }
.ha-footer__logo img { width: 120px; }
.ha-footer__tagline {
	font-family: var(--wp--preset--font-family--roboto-condensed); font-style: italic; text-transform: uppercase;
	letter-spacing: .09em; color: #fff; font-size: 16px;
}
.ha-footer__place { font-size: 15px; }
.ha-footer__nav .wp-block-navigation-item__content { display: inline-flex; align-items: center; min-height: var(--ha-tap); min-width: var(--ha-tap); color: #fff; text-decoration: none; }
.ha-footer__nav .wp-block-navigation-item__content:hover { text-decoration: underline; }
.ha-footer__nav .wp-block-navigation__container { gap: 0; }
.ha-footer__legal {
	max-width: var(--wp--style--global--wide-size, 1180px); margin: 32px auto 0 !important; padding-top: 20px;
	border-top: 1px solid var(--ha-rule); font-size: 14px; color: var(--ha-moss);
}
.ha-footer__legal a { color: var(--ha-sage); display: inline-block; padding-block: 12px; }
@media (min-width: 720px) {
	.ha-footer__inner { grid-template-columns: 2fr 1fr 1fr; align-items: start; }
}

/* ---------- Holding page ---------- */
.ha-main--holding { min-height: 100svh; display: grid; align-items: center; position: relative; overflow: hidden; }
.ha-main--holding::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 32%;
	background: var(--ha-hatch);
	-webkit-mask: linear-gradient(to top, #000, transparent);
	mask: linear-gradient(to top, #000, transparent);
	opacity: .35; pointer-events: none;
}
.ha-holding {
	padding-top: clamp(40px, 10vh, 120px);
	padding-bottom: clamp(40px, 10vh, 120px);
	position: relative;
	z-index: 1;
}
.ha-holding > * { position: relative; z-index: 1; }
.ha-holding__logo { margin: 0 auto 1.5rem !important; display: flex; justify-content: center; }
.ha-holding__logo img { width: min(360px, 78vw); }
.ha-holding .ha-holding__line {
	font-family: var(--wp--preset--font-family--roboto-condensed);
	font-style: italic; font-weight: 400; text-transform: uppercase; letter-spacing: .07em;
	font-size: clamp(16px, 2.2vw, 20px); line-height: 1.6; max-width: 40ch; margin-inline: auto !important; color: var(--ha-sage);
}
.ha-holding__line strong { color: #fff; font-weight: 700; }
.ha-holding__tag {
	font-family: var(--wp--preset--font-family--roboto-condensed); font-style: italic; text-transform: uppercase;
	letter-spacing: .07em; font-size: clamp(16px, 2.2vw, 20px); color: #fff; margin-top: 1.25rem !important;
}
.ha-holding__note { color: var(--ha-sage); margin-top: 2rem !important; }
.ha-holding__foot { margin-top: 3rem !important; font-size: 14px; color: var(--ha-moss); }

/* ---------- Editor niceties ---------- */
.editor-styles-wrapper .ha-placeholder::before { content: "Placeholder: shown to logged-in editors only until [placeholder] is removed"; display: block; font-size: 13px; color: var(--ha-moss); margin-bottom: .5rem; }

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

/* ======================================================================
 * 1.0.2: fewer words, bigger type.
 * ==================================================================== */

/* Big home hero */
.ha-hero--big { padding-top: var(--wp--preset--spacing--50); padding-bottom: var(--wp--preset--spacing--60); }
.ha-hero--big h1 {
	font-size: clamp(56px, 10.5vw, 136px) !important;
	line-height: .92;
	letter-spacing: -0.045em;
	max-width: 11ch;
	margin: 0 0 1.5rem;
}
.ha-hero--big .ha-lede { font-size: clamp(20px, 2.2vw, 26px); color: var(--ha-sage); margin: 0; }

/* Service names on the home page: a big row of links */
.ha-service-links {
	list-style: none; padding: 0; margin: var(--wp--preset--spacing--30) 0 0 !important;
	display: flex; flex-wrap: wrap; gap: 0 clamp(20px, 3vw, 40px);
	font-size: clamp(24px, 3.4vw, 40px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15;
}
.ha-service-links li { display: inline-flex; align-items: center; }
.ha-service-links a { display: inline-flex; align-items: center; min-height: var(--ha-tap); text-decoration: none; }
.ha-service-links a { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: rgba(27, 42, 25, .25); text-underline-offset: .2em; }
.ha-service-links a:hover { text-decoration-color: currentColor; text-decoration-thickness: 3px; }

/* Work gallery (hidden by the theme until it has images) */
.ha-work-grid { gap: 16px !important; margin-top: var(--wp--preset--spacing--30) !important; }
.ha-work-grid img { border-radius: var(--ha-radius); }

/* Software tiles on the home page */
.ha-tile { position: relative; display: flex; flex-direction: column; gap: .5rem; padding: 4px 0; }
.ha-tile > * { margin: 0 !important; }
.ha-tile__icon img { width: 72px; height: 72px; }
.ha-tile__name { font-size: var(--wp--preset--font-size--title) !important; }
.ha-tile__name a { color: #fff; text-decoration: none; display: inline-flex; align-items: center; min-height: var(--ha-tap); }
.ha-tile__name a::after { content: ""; position: absolute; inset: 0; }
.ha-tile__name a:hover { text-decoration: underline; }
.ha-tile:focus-within { outline: 3px solid var(--ha-cream); outline-offset: 8px; border-radius: 4px; }
.ha-tile__name a:focus-visible { outline: none; }
.ha-tile__line { color: var(--ha-sage); font-size: 17px; }

/* One line about who */
.ha-who-section { padding-top: var(--wp--preset--spacing--60); padding-bottom: var(--wp--preset--spacing--60); }
.ha-section.ha-who-section > .ha-who-line { font-size: var(--wp--preset--font-size--headline) !important; max-width: 18ch; margin-inline: auto !important; }

.ha-section--tight { padding-top: var(--wp--preset--spacing--30); }

/* Services as rows: name, one line, price */
.ha-rows { margin-top: var(--wp--preset--spacing--30) !important; border-top: 1px solid var(--ha-rule); }
.ha-rows > .ha-row { margin: 0 !important; }
.ha-row {
	display: grid; gap: 4px 32px; padding: 18px 0;
	border-bottom: 1px solid var(--ha-rule); align-items: baseline; scroll-margin-top: 24px;
}
.ha-row > * { margin: 0 !important; }
.ha-row__name { font-size: var(--wp--preset--font-size--subhead) !important; }
.ha-row__line { color: var(--ha-sage); }
.ha-row__line a { color: var(--ha-cream); }
.ha-row .ha-price { border: 0; padding: 0; font-size: 18px; white-space: nowrap; }
@media (min-width: 820px) {
	.ha-row { grid-template-columns: 2fr 3fr minmax(11rem, auto); padding: 22px 0; }
	.ha-row .ha-price { text-align: right; }
}

/* Contact */
.ha-email a {
	font-size: clamp(22px, 3vw, 34px); font-weight: 600; letter-spacing: -0.01em;
	color: var(--ha-cream); display: inline-flex; align-items: center; min-height: var(--ha-tap); overflow-wrap: anywhere;
}

/* Footer: logo, links, email, privacy */
.ha-footer__email a { color: #fff; display: inline-flex; align-items: center; min-height: var(--ha-tap); }
.ha-footer__legal:empty { display: none; }

/* Landing pages: numbered steps (inc/landing.php). */
.ha-steps { display: grid; gap: var(--wp--preset--spacing--30); margin-top: var(--wp--preset--spacing--40) !important; }
.ha-steps > * { margin: 0 !important; }

/* Comparison tables with longer text (prices, how you pay): let cells wrap,
   keep the first column readable, and scroll sideways on phones. */
.ha-compare--text th:not(:first-child), .ha-compare--text td:not(:first-child) { width: auto; white-space: normal; font-size: 15px; }
.ha-compare--text th:first-child, .ha-compare--text td:first-child { min-width: 8.5rem; }
@media (max-width: 700px) {
	.wp-block-table.ha-compare--text { overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.wp-block-table.ha-compare--text table { min-width: 34rem; }
}