/*
Theme Name: HSA
Theme URI: https://healthcaresoftwarealliance.com
Author: Healthcare Software Alliance
Description: Block theme for Healthcare Software Alliance. Brand tokens live in theme.json; this stylesheet carries the composite treatments the block editor cannot express on its own — the progressive photo blur band, chips and badges, the registry rows, and the responsive grid collapse.
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 7.4
Version: 1.0.0
License: GPL-2.0-or-later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hsa
Tags: full-site-editing, block-patterns, one-column
*/

/* ==========================================================================
   Root
   ========================================================================== */

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

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

/* Measure caps — brand rule: 52ch for lede, 62ch for running copy.
   --------------------------------------------------------------------------
   Constrained layout centres any child narrower than the content size, which
   would centre these headers while the grids below them sit flush left in the
   1360px content box. Pinning them to the gutter instead only matches while the
   viewport is narrow enough for the content box to fill it — past that they
   drift left of everything else.
   So reproduce the content box's own offset: zero while the box is narrower
   than the content size, half the slack once it is wider. That keeps a section
   header, its grid, the header row and the footer on one line at every width.
   Core sets these margins with !important, so this has to as well. */
.is-layout-constrained > [class*="hsa-measure-"],
.is-layout-constrained > .hsa-searchbar {
	margin-inline-start: max(0px, (100% - var(--wp--style--global--content-size)) / 2) !important;
	margin-inline-end: auto !important;
}

.hsa-measure-lede { max-width: 52ch; }

/* Footnote — the asterisk under a stat row, and the note under the registry.
   Narrower than body copy and a shade quieter, so it reads as a qualification
   of the block above rather than as another paragraph. Spacing comes from the
   parent's gap; no margin of its own, or it fights the flex layout. */
.hsa-footnote {
	max-width: 58ch;
	opacity: .9;
}
.hsa-measure-body { max-width: 62ch; }
.hsa-measure-head { max-width: 24ch; }
.hsa-measure-56   { max-width: 56ch; }
.hsa-measure-60   { max-width: 60ch; }
.hsa-measure-44   { max-width: 44ch; }
.hsa-measure-36   { max-width: 36ch; }

/* ==========================================================================
   Section rhythm — hairline rules between light sections
   ========================================================================== */

.hsa-rule-top    { border-block-start: 1px solid var(--wp--custom--line--hairline); }
.hsa-rule-bottom { border-block-end: 1px solid var(--wp--custom--line--hairline); }
.hsa-rule-strong { border-block-end: 1px solid var(--wp--custom--line--control); }

/* ==========================================================================
   Labels — eyebrow and mono
   ========================================================================== */

.hsa-eyebrow {
	font-family: var(--wp--preset--font-family--body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.3;
	color: var(--wp--preset--color--crimson);
	margin: 0;
}

.hsa-eyebrow.has-text-color { color: inherit; }

.hsa-mono {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	line-height: 1.4;
	color: var(--wp--preset--color--ink-faint);
	margin: 0;
}

.hsa-mono--sm { font-size: 10px; }

/* ==========================================================================
   Containers — tile, card, add-on card
   ========================================================================== */

.hsa-tile {
	border-radius: var(--wp--custom--radius--tile);
	background-color: var(--wp--preset--color--tile);
}

.hsa-card {
	border-radius: var(--wp--custom--radius--card);
	background-color: var(--wp--preset--color--card);
}

/* Dashed = attached to another product, not sold separately. */
.hsa-card--addon {
	border: 1px dashed var(--wp--custom--line--dashed);
}

.hsa-card--outline {
	background-color: transparent;
	border: 1px solid var(--wp--custom--line--hairline);
}

.hsa-shadow { box-shadow: var(--wp--preset--shadow--card); }

/* A whole card that is a link: kill the underline, keep ink colour. */
.hsa-card a:where(:not(.wp-element-button)),
.hsa-linkcard {
	color: inherit;
	text-decoration: none;
}

.hsa-linkcard { display: block; }

.hsa-linkcard:hover { text-decoration: none; }

.hsa-linkcard:hover .hsa-linkcard__title { color: var(--wp--preset--color--crimson); }

/* Product card led by its mark: mark, hairline rule, then the words. The mark
   is vertically centred on the text block, not top-aligned — the drawings vary
   in height and a top-aligned mark makes each card look differently spaced. */
.hsa-iconcard.wp-block-group {
	display: flex;
	align-items: center;
	gap: 20px;
}

.hsa-iconcard__mark.wp-block-image {
	flex: none;
	margin: 0;
}

.hsa-iconcard__mark img {
	width: 100px;
	height: auto;
}

/* Four-up card with only a name and a sentence beside the mark. */
.hsa-iconcard--sm .hsa-iconcard__mark img { width: 56px; }

.hsa-iconcard--sm.wp-block-group { gap: 16px; }

.hsa-iconcard--sm .hsa-iconcard__body { padding-inline-start: 16px; }

.hsa-iconcard__body {
	border-inline-start: 1px solid var(--wp--custom--line--hairline);
	padding-inline-start: 20px;
	min-width: 0;
}

/* ==========================================================================
   Chips, badges, pills
   ========================================================================== */

.hsa-chip {
	display: inline-flex;
	align-items: center;
	gap: 8.8px;
	padding: 8px 17.6px;
	border-radius: var(--wp--custom--radius--control);
	border: 1px solid var(--wp--custom--line--control);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--wp--preset--color--ink);
}

.hsa-chip--solid {
	border-color: transparent;
	background-color: var(--wp--preset--color--card);
	color: var(--wp--preset--color--ink-body);
	padding: 6px 13.2px;
	font-size: 12px;
}

.hsa-chip--on-deep {
	border-color: var(--wp--custom--line--on-deep-control);
	color: var(--wp--preset--color--on-deep);
}

.hsa-badge {
	display: inline-flex;
	align-items: center;
	gap: 8.8px;
	padding: 6px 17.6px;
	border-radius: var(--wp--custom--radius--control);
	background-color: var(--wp--preset--color--teal-tint);
	color: var(--wp--preset--color--teal);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.3;
}

.hsa-tag {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: var(--wp--custom--radius--control);
	background-color: var(--wp--preset--color--teal-tint);
	color: var(--wp--preset--color--teal);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.4;
}

/* The registry's status mark: a teal tick in a teal-tint disc. */
.hsa-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26.4px;
	height: 26.4px;
	border-radius: var(--wp--custom--radius--control);
	background-color: var(--wp--preset--color--teal-tint);
	color: var(--wp--preset--color--teal);
}

.hsa-tag--crimson {
	background-color: var(--wp--preset--color--crimson-tint);
	color: var(--wp--preset--color--crimson);
}

/* Row of chips / badges that should wrap. */
.hsa-chiprow {
	display: flex;
	flex-wrap: wrap;
	gap: 8.8px;
	align-items: center;
}

.hsa-chiprow--wide { gap: 13.2px; }

/* ==========================================================================
   Arrow links — "See every certification →"
   ========================================================================== */

.hsa-arrow {
	font-size: 14px;
	font-weight: 700;
	color: var(--wp--preset--color--crimson);
	text-decoration: none;
	white-space: nowrap;
}

.hsa-arrow:hover { text-decoration: underline; }

.hsa-arrow--teal { color: var(--wp--preset--color--teal); }
.hsa-arrow--on-deep { color: var(--wp--preset--color--on-deep-label); }

/* ==========================================================================
   Stat row — one white tile, hairline dividers between cells
   ========================================================================== */

.hsa-statrow {
	border-radius: var(--wp--custom--radius--tile);
	background-color: var(--wp--preset--color--card);
	box-shadow: var(--wp--preset--shadow--card);
	padding: 26.4px 8.8px;
}

.hsa-statrow.is-layout-grid { gap: 0; }

.hsa-statrow > * {
	padding-inline: 17.6px;
	border-inline-end: 1px solid var(--wp--custom--line--hairline);
	margin: 0;
}

.hsa-statrow > *:last-child { border-inline-end: 0; }

.hsa-stat__figure {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: 34px;
	line-height: 1;
	color: var(--wp--preset--color--coral);
	margin: 0;
}

.hsa-stat__label {
	font-size: 13px;
	line-height: 1.35;
	color: var(--wp--preset--color--ink-muted);
	margin: 4.4px 0 0;
}

/* On deep teal the figure switches to rose. */
.hsa-on-deep .hsa-stat__figure { color: var(--wp--preset--color--rose); }
.hsa-on-deep .hsa-stat__label  { color: var(--wp--preset--color--on-deep-body); }

/* ==========================================================================
   Logo tiles — white 88px tiles on tinted surface, greyed to equal weight
   ========================================================================== */

/* Regulator marks — real logos, sitting directly on the section, no tile.
   Widths are set per-image server-side from the intrinsic size, so the marks
   carry matched optical weight without a uniform height flattening them. */
.hsa-marks {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 26.4px 44px;
	margin: 0;
	padding: 26.4px 0;
}

.hsa-marks--centred {
	justify-content: center;
	gap: 26.4px 88px;
}

.hsa-marks img {
	display: block;
	height: auto;
	max-width: 100%;
}

.hsa-marks__wordmark {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: 30px;
	letter-spacing: -0.01em;
	line-height: 1;
	color: var(--wp--preset--color--ink-body);
}

@media (max-width: 781px) {
	/* A wrapping flex row overflows here — the widest marks are wider than a third
	   of a phone screen, so they spill past the edge instead of wrapping. A grid
	   bounds each mark to its column, which cannot overflow. */
	.hsa-marks,
	.hsa-marks--centred {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		justify-items: center;
		align-items: center;
		gap: 26.4px 17.6px;
	}

	.hsa-marks img {
		width: auto;
		height: auto;
		max-width: 100%;
		max-height: 30px;
	}

	.hsa-marks__wordmark {
		font-size: 20px;
	}
}

/* Region picker — the select carries the styling; the noscript button only
   appears when JS is off, so it never needs to fit the layout gracefully. */
.hsa-regionpicker {
	display: flex;
	gap: 8.8px;
	align-items: center;
}

.hsa-regionpicker select {
	flex: 1 1 auto;
}

.hsa-regionpicker__go {
	padding: 9px 17.6px;
	border: 1px solid var(--wp--custom--border--control);
	border-radius: var(--wp--custom--radius--control);
	background: var(--wp--preset--color--card);
	font-family: var(--wp--preset--font-family--display);
	font-size: 14px;
	cursor: pointer;
}

.hsa-logotile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 88px;
	border-radius: var(--wp--custom--radius--card);
	background-color: var(--wp--preset--color--card);
	text-align: center;
	padding: 17.6px 26.4px;
	margin: 0;
}

/* The mark fills the tile, in its own colours. Aspect ratios vary wildly
   across brands, so object-fit does the fitting rather than a fixed height.

   The figure has to take a definite height for that to work: `height: 100%` on
   the image resolves against its parent, and an auto-height figure leaves it
   indeterminate, so the image falls back to its intrinsic size. Wide marks are
   still caught by `width: 100%`, which is why this went unnoticed until a
   square one (HP) burst out of its tile. `flex: 1` plus `min-height: 0` gives
   the figure its height from the tile instead. */
.hsa-logotile .hsa-logomark.wp-block-image {
	margin: 0;
	width: 100%;
	flex: 1 1 auto;
	min-height: 0;
}

.hsa-logotile img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

.hsa-logotile__name,
.hsa-custtile__name {
	font-size: 12px;
	font-weight: 700;
	color: var(--wp--preset--color--ink-body);
	line-height: 1.3;
	margin: 0;
	text-wrap: balance;
}

/* ==========================================================================
   Testimonial rail
   ==========================================================================
   A horizontal scroller rather than a grid. Six quotes divided across the
   content box leaves each about twenty words wide; here they keep a readable
   measure and the row runs past the edge, which is also what tells the reader
   there is more. Core's flex layout centres its children and wraps them, so
   both are overridden — the extra class keeps this ahead of the generated
   container rule without !important.

   No JS: scroll-snap and native scrolling do the whole job, and browsers make
   an overflow container keyboard-scrollable on their own. */

.hsa-scroller.is-layout-flex {
	flex-wrap: nowrap;
	align-items: stretch;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	padding-bottom: 17.6px;
	scrollbar-width: thin;
	scrollbar-color: var(--wp--custom--line--control) transparent;
}

.hsa-scroller > .hsa-quotecard {
	flex: 0 0 min(384px, 82vw);
	scroll-snap-align: start;
}

.hsa-scroller::-webkit-scrollbar { height: 6px; }
.hsa-scroller::-webkit-scrollbar-track { background: transparent; }

.hsa-scroller::-webkit-scrollbar-thumb {
	background: var(--wp--custom--line--control);
	border-radius: var(--wp--custom--radius--control);
}

/* Column so the attribution can be pinned to the bottom — quotes differ in
   length, and a ragged row of name lines reads as a mistake. */
.hsa-quotecard {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--wp--custom--line--hairline);
}

.hsa-quotecard__foot { margin-block-start: auto; }

/* Initials, not an empty grey circle: one less thing that looks unfinished. */
.hsa-quotecard__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: var(--wp--custom--radius--control);
	background-color: var(--wp--preset--color--tile);
	color: var(--wp--preset--color--ink-muted);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

/* Customer logo slots — outlined, taller. */
.hsa-custtile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 104px;
	padding: 13.2px 13.2px;
	border: 1px solid var(--wp--custom--line--hairline);
	border-radius: var(--wp--custom--radius--card);
	text-align: center;
	margin: 0;
}

/* Product lockups render at 44px tall, hugging the reading edge. There is no
   logical keyword for object-position, so this one flips explicitly below. */
/* Product-page hero. The lockup files are cropped to their ink, so this is
   the height of the drawing, not of a canvas with the drawing somewhere in it. */
.hsa-lockup img {
	height: 84px;
	width: auto;
	object-fit: contain;
	object-position: 0% 50%;
}

.hsa-lockup.wp-block-image { margin: 0; }

/* "Powered by" — rule above, stacked label */
.hsa-platform {
	border-block-start: 1px solid rgba(32, 30, 29, 0.14);
	padding: 17.6px 13.2px 0;
	margin: 0;
	height: 88px;
}

.hsa-platform .hsa-platform__logo { height: 100%; }

/* Platform marks stand alone in each ruled column — no name beneath. */
.hsa-platform__logo.wp-block-image { margin: 0; }

.hsa-platform__logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

/* ==========================================================================
   The signature photo treatment
   --------------------------------------------------------------------------
   A photo band pinned to the top of a tile, four stacked backdrop-blur layers
   masked progressively lower, then a gradient darkening the top for white
   text and dissolving into the surface at 94%. Titles sit over the sharp
   part, top-left, in white. No icons.
   ========================================================================== */

.hsa-phototile {
	position: relative;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--tile);
	background-color: var(--wp--preset--color--tile);
	isolation: isolate;
}

.hsa-phototile__band {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 30%;
	margin: 0;
	pointer-events: none;
	z-index: 0;
}

/* Anything after the band stacks above it. */
.hsa-phototile > *:not(.hsa-phototile__band) {
	position: relative;
	z-index: 1;
}

.hsa-phototile__band .wp-block-image,
.hsa-phototile__band figure {
	margin: 0;
	height: 100%;
}

.hsa-phototile__band img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0;
}

/* Empty band (no photo chosen yet) reads as a hatch placeholder. */
.hsa-phototile__band:not(:has(img)) {
	background: var(--wp--preset--gradient--hatch-tile);
}

/* The blur stack. Four layers, each masked to start lower than the last. */
.hsa-blurstack {
	position: absolute;
	inset: 0;
	margin: 0 !important;
	pointer-events: none;
}

.hsa-blurstack > i,
.hsa-blurstack > b {
	position: absolute;
	inset: 0;
	display: block;
	pointer-events: none;
}

.hsa-blurstack > i:nth-of-type(1) {
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	-webkit-mask-image: linear-gradient(to bottom, transparent 26%, #000 40%);
	mask-image: linear-gradient(to bottom, transparent 26%, #000 40%);
}

.hsa-blurstack > i:nth-of-type(2) {
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	-webkit-mask-image: linear-gradient(to bottom, transparent 40%, #000 55%);
	mask-image: linear-gradient(to bottom, transparent 40%, #000 55%);
}

.hsa-blurstack > i:nth-of-type(3) {
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	-webkit-mask-image: linear-gradient(to bottom, transparent 55%, #000 72%);
	mask-image: linear-gradient(to bottom, transparent 55%, #000 72%);
}

.hsa-blurstack > i:nth-of-type(4) {
	backdrop-filter: blur(34px);
	-webkit-backdrop-filter: blur(34px);
	-webkit-mask-image: linear-gradient(to bottom, transparent 70%, #000 86%);
	mask-image: linear-gradient(to bottom, transparent 70%, #000 86%);
}

/* The gradient: darkens the top for white text, dissolves into the tile. */
.hsa-blurstack > b {
	background: var(--wp--preset--gradient--photo-dissolve-tile);
}

/* Title block over the sharp part. Reserves the sharp height. */
.hsa-phototile__title {
	min-height: 120px;
}

.hsa-phototile__title :where(h1, h2, h3, h4, h5, h6) { color: #FFFFFF; }
.hsa-phototile__title p { color: rgba(255, 255, 255, 0.82); }

/* --------------------------------------------------------------------------
   Full-bleed band variant — 360px, title may wrap to two lines, so the dark
   stops hold until ~45%.
   -------------------------------------------------------------------------- */

.hsa-band {
	position: relative;
	background-color: var(--wp--preset--color--tile);
	isolation: isolate;
}

.hsa-band__photo {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 360px;
	margin: 0;
	pointer-events: none;
	z-index: 0;
}

.hsa-band > *:not(.hsa-band__photo) {
	position: relative;
	z-index: 1;
}

.hsa-band__photo .wp-block-image,
.hsa-band__photo figure { margin: 0; height: 100%; }

.hsa-band__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0;
}

.hsa-band__photo:not(:has(img)) {
	background: var(--wp--preset--gradient--hatch-tile);
}

.hsa-band .hsa-blurstack > i:nth-of-type(1) {
	-webkit-mask-image: linear-gradient(to bottom, transparent 38%, #000 50%);
	mask-image: linear-gradient(to bottom, transparent 38%, #000 50%);
}

.hsa-band .hsa-blurstack > i:nth-of-type(2) {
	-webkit-mask-image: linear-gradient(to bottom, transparent 50%, #000 63%);
	mask-image: linear-gradient(to bottom, transparent 50%, #000 63%);
}

.hsa-band .hsa-blurstack > i:nth-of-type(3) {
	-webkit-mask-image: linear-gradient(to bottom, transparent 63%, #000 78%);
	mask-image: linear-gradient(to bottom, transparent 63%, #000 78%);
}

.hsa-band .hsa-blurstack > i:nth-of-type(4) {
	-webkit-mask-image: linear-gradient(to bottom, transparent 76%, #000 89%);
	mask-image: linear-gradient(to bottom, transparent 76%, #000 89%);
}

.hsa-band .hsa-blurstack > b {
	background: var(--wp--preset--gradient--photo-dissolve-band);
}

.hsa-band__title {
	min-height: 170px;

	/* Inset to match the band's own top step rather than the page gutter. The
	   title floats on the photo, where the 44px everything else starts at reads
	   as flush to the edge; the step cards below stay on the page grid, so the
	   band still lines up with the sections either side of it.

	   Padding, not margin: the constrained layout sets margin-left:auto on its
	   children with a higher-specificity selector and silently wins. And the
	   measure is widened to pay for the padding, because max-width is
	   border-box here — at 24ch the indent alone pushed the heading from two
	   lines to four. */
	padding-inline-start: 79.2px;
	max-width: 44ch;
}

.hsa-band__title :where(h1, h2, h3, h4, h5, h6) { color: #FFFFFF; }
.hsa-band__title .hsa-eyebrow { color: rgba(255, 255, 255, 0.75); }

/* --------------------------------------------------------------------------
   Deep-teal image tile — veiled photo with a stat pinned to the bottom.
   -------------------------------------------------------------------------- */

.hsa-veiltile {
	position: relative;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--tile);
	min-height: 172px;
	background: var(--wp--preset--gradient--hatch-deep);
	isolation: isolate;
}

.hsa-veiltile__photo {
	position: absolute;
	inset: 0;
	margin: 0;
	z-index: 0;
	pointer-events: none;
}

.hsa-veiltile__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0;
}

.hsa-veiltile__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--wp--preset--gradient--deep-veil);
}

.hsa-veiltile > *:not(.hsa-veiltile__photo) {
	position: relative;
	z-index: 1;
}

/* The stat sits at the bottom, over the darkest part of the veil. */
.wp-block-group.hsa-veiltile {
	justify-content: flex-end;
}

.hsa-veiltile .hsa-stat__figure {
	color: var(--wp--preset--color--on-deep);
	font-size: 34px;
}

.hsa-veiltile .hsa-stat__label {
	color: var(--wp--preset--color--on-deep-body);
	font-size: 14px;
	line-height: 1.5;
}

/* ==========================================================================
   Hero — the teal halo behind the hero image
   ========================================================================== */

.hsa-hero-figure {
	position: relative;
}

.hsa-hero-figure::before {
	content: "";
	position: absolute;
	top: -24px;
	inset-inline-end: -18px;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--teal-tint);
	z-index: 0;
}

.hsa-hero-figure > * {
	position: relative;
	z-index: 1;
}

.hsa-hero-figure .wp-block-image,
.hsa-hero-figure figure {
	margin: 0;
	border-radius: var(--wp--custom--radius--tile);
	overflow: hidden;
}

.hsa-hero-figure img {
	width: 100%;
	display: block;
	border-radius: var(--wp--custom--radius--tile);
}

/* Photo frame. The height is the design's, not the image's: whatever is dropped
   in gets cropped to fit, so swapping a placeholder for a real photo can't
   change the page's rhythm. */
.hsa-imgframe {
	height: 400px;
	border-radius: var(--wp--custom--radius--tile);
	background: var(--wp--preset--gradient--hatch-tile);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	overflow: hidden;
}

/* The map frame. 46px until it was noticed — the map rendered as a strip. */
.hsa-imgframe--tall { height: 460px; }
.hsa-imgframe--mod  { height: 190px; border-radius: var(--wp--custom--radius--card); }
.hsa-imgframe--head { height: 200px; border-radius: 0; }

.hsa-imgframe .wp-block-image,
.hsa-imgframe figure { margin: 0; width: 100%; height: 100%; }

.hsa-imgframe img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Module icons, standing in for a screenshot: one large mark for the module,
   the two beside it for its chips. Same footprint as .hsa-imgframe--mod so the
   rows keep their height when the screenshots come back. */
.hsa-modicons {
	height: 190px;
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--card);
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	justify-items: center;
	padding: 0 26.4px;
}

.hsa-modicons img { display: block; height: auto; }

.hsa-modicons__main {
	grid-column: 2;
	grid-row: 1;
	width: 72px;
}

.hsa-modicons__aside { width: 36px; opacity: 0.55; grid-row: 1; }
.hsa-modicons__aside:nth-child(2) { grid-column: 1; }
.hsa-modicons__aside:nth-child(3) { grid-column: 3; }

/* ==========================================================================
   On deep teal — colour inversion for a whole section
   ========================================================================== */

.hsa-on-deep :where(h1, h2, h3, h4, h5, h6) { color: var(--wp--preset--color--on-deep); }
.hsa-on-deep :where(p, li) { color: var(--wp--preset--color--on-deep-body); }
.hsa-on-deep .hsa-eyebrow:not(.has-text-color) { color: var(--wp--preset--color--on-deep-label); }
.hsa-on-deep .hsa-mono { color: var(--wp--preset--color--on-deep-label); }

/* Coral is never used on teal — rose is. */
.hsa-on-deep .wp-block-button__link,
.hsa-on-deep .wp-element-button {
	background-color: var(--wp--preset--color--rose);
	color: var(--wp--preset--color--rose-ink);
}

.hsa-on-deep .wp-block-button__link:hover,
.hsa-on-deep .wp-element-button:hover {
	background-color: #FFA3B2;
	color: var(--wp--preset--color--rose-ink);
}

.hsa-on-deep a:where(:not(.wp-element-button):not(.hsa-chip)) {
	color: var(--wp--preset--color--on-deep);
}

/* ==========================================================================
   Registry table — the compliance grid
   ========================================================================== */

.hsa-registry {
	border-radius: var(--wp--custom--radius--tile);
	background-color: var(--wp--preset--color--card);
	padding: 8.8px 35.2px 26.4px;
}

.hsa-registry__row {
	display: grid;
	grid-template-columns: 1.4fr 1.2fr 1fr 0.8fr;
	gap: 26.4px;
	align-items: center;
	padding: 17.6px 0;
	border-block-end: 1px solid var(--wp--custom--line--hairline);
	margin: 0;
}

.hsa-registry__row:last-child { border-block-end: 0; }

.hsa-registry__row--head {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--ink-faint);
}

.hsa-registry__row > * { margin: 0; }

.hsa-registry__name {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: 17px;
	color: var(--wp--preset--color--ink);
}

@media (max-width: 900px) {
	.hsa-registry { padding: 8.8px 17.6px 17.6px; }
	.hsa-registry__row { grid-template-columns: 1fr 1fr; gap: 8.8px 17.6px; }
	.hsa-registry__row--head { display: none; }
}

/* ==========================================================================
   SLA rows — label left, target right
   ========================================================================== */

.hsa-slarow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 26.4px;
	border-radius: var(--wp--custom--radius--card);
	padding: 26.4px;
}

.hsa-slarow__target {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: 26px;
	line-height: 1;
	color: var(--wp--preset--color--rose);
	white-space: nowrap;
	margin: 0;
}

/* ==========================================================================
   Forms — 42px min height, radius 999, tile background
   ========================================================================== */

.hsa-form {
	border-radius: var(--wp--custom--radius--tile);
	background-color: var(--wp--preset--color--card);
	padding: 35.2px;
}

.hsa-form label,
.hsa-fieldlabel {
	display: block;
	font-size: 12px;
	line-height: 1.4;
	margin-bottom: 5px;
	color: var(--wp--preset--color--ink-muted);
}

.hsa-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.hsa-form select,
.hsa-field {
	width: 100%;
	min-height: var(--wp--custom--control--field-height);
	padding: 6px 14px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--tile);
	border: 1px solid var(--wp--custom--line--control);
	border-radius: var(--wp--custom--radius--control);
	box-sizing: border-box;
}

.hsa-form textarea,
.hsa-field--area {
	width: 100%;
	padding: 13.2px 17.6px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--tile);
	border: 1px solid var(--wp--custom--line--control);
	border-radius: var(--wp--custom--radius--card);
	box-sizing: border-box;
	resize: vertical;
}

.hsa-form input:focus-visible,
.hsa-form select:focus-visible,
.hsa-form textarea:focus-visible {
	outline: 2px solid var(--wp--preset--color--coral);
	outline-offset: 1px;
}

.hsa-form ::placeholder { color: var(--wp--preset--color--ink-faint); }

/* Two-up field grid inside a form panel. */
.hsa-fieldgrid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 17.6px;
}

@media (max-width: 640px) {
	.hsa-fieldgrid { grid-template-columns: 1fr; }
	.hsa-form { padding: 26.4px; }
}

/* Working forms. Fields sit in <p>s, as they did in the mockup; these keep the
   mockup's rhythm now that the panel is a real <form>. */
.hsa-form p { margin: 0; }

/* Consent tick boxes, just above the button: a plain checkbox and a sentence,
   in the field-label size so they read as fine print rather than fields. */
.hsa-form .hsa-consent label {
	display: flex;
	align-items: flex-start;
	gap: 8.8px;
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--wp--preset--color--ink-body);
	cursor: pointer;
}

.hsa-consent input {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin: 2px 0 0;
	accent-color: var(--wp--preset--color--coral);
}

.hsa-consent a { color: var(--wp--preset--color--crimson); }
.hsa-form > .hsa-consent + .hsa-consent { margin-top: 8.8px; }
.hsa-form textarea { display: block; } /* no inline baseline gap above its error line */
.hsa-form > p,
.hsa-form > .hsa-fieldgrid,
.hsa-form > .hsa-chipset { margin-top: 17.6px; }
.hsa-form > :first-child { margin-top: 0; }

/* Chip groups: a fieldset, so the group has a name for screen readers. */
.hsa-chipset {
	border: 0;
	margin: 17.6px 0 0;
	padding: 0;
	min-width: 0;
}

.hsa-chipset legend {
	padding: 0;
	margin-bottom: 8.8px;
	font-size: 12px;
	line-height: 1.4;
	color: var(--wp--preset--color--ink-muted);
}

/* Selectable chip. The input is kept for keyboard and form semantics, and
   hidden visually; the label is the chip. No selected state exists in the brand
   kit, so this uses the action accent for the border and the crimson pair —
   already used for tags — for the fill and text. */
.hsa-form label.hsa-chip--pick {
	display: inline-flex;
	margin: 0;
	font-size: 13px;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	user-select: none;
	transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

.hsa-chip--pick input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.hsa-form label.hsa-chip--pick:hover { border-color: var(--wp--custom--line--dashed); }

.hsa-form label.hsa-chip--pick:has(input:checked) {
	border-color: var(--wp--preset--color--coral);
	background-color: var(--wp--preset--color--crimson-tint);
	color: var(--wp--preset--color--crimson);
}

.hsa-form label.hsa-chip--pick:has(input:focus-visible) {
	outline: 2px solid var(--wp--preset--color--coral);
	outline-offset: 1px;
}

.hsa-form__submit {
	display: flex;
	width: 100%;
	justify-content: center;
	margin-top: 26.4px;
	border: 0;
	cursor: pointer;
}

.hsa-form__submit[disabled] { opacity: .6; cursor: progress; }

.hsa-form__note {
	margin-top: 13.2px !important;
	font-size: 13px;
	text-align: center;
	color: var(--wp--preset--color--ink-faint);
}

/* Honeypot: off-screen, not display:none, which some bots know to skip. */
.hsa-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Errors: crimson, the brand's existing warning pair. */
.hsa-form [aria-invalid="true"] { border-color: var(--wp--preset--color--crimson) !important; }

.hsa-field-error {
	display: block;
	margin-top: 5px;
	font-size: 12px;
	line-height: 1.4;
	color: var(--wp--preset--color--crimson);
}

.hsa-form__alert {
	margin-top: 17.6px !important;
	padding: 13.2px 17.6px;
	border-radius: var(--wp--custom--radius--card);
	background-color: var(--wp--preset--color--crimson-tint);
	color: var(--wp--preset--color--crimson);
	font-size: 14px;
	line-height: 1.5;
}

/* Sent: the form's contents give way to this, inside the same white panel. */
.hsa-form__done { padding-block: 26.4px; }
.hsa-form__done:focus { outline: none; }

.hsa-form__done h3 {
	margin: 0 0 8.8px;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: 26px;
	line-height: 1.15;
	color: var(--wp--preset--color--ink);
}

.hsa-form__done p {
	font-size: 15px;
	line-height: 1.6;
	color: var(--wp--preset--color--ink-body);
}

/* Search bar — pill with the button inside it. */
.hsa-searchbar {
	display: flex;
	align-items: center;
	gap: 13.2px;
	max-width: 760px;
	padding: 8.8px 8.8px 8.8px 26.4px;
	border-radius: var(--wp--custom--radius--control);
	background-color: var(--wp--preset--color--card);
	box-shadow: var(--wp--preset--shadow--card);
}

.hsa-searchbar input {
	flex: 1;
	min-height: var(--wp--custom--control--field-height);
	border: 0;
	outline: none;
	background: transparent;
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	color: var(--wp--preset--color--ink);
}

.hsa-searchbar .wp-block-button__link { padding: 13px 26.4px; font-size: 15px; }

/* Status strip. */
.hsa-status__dot {
	width: 10px;
	height: 10px;
	border-radius: 999px;
	background-color: var(--wp--preset--color--teal);
	display: inline-block;
	flex: 0 0 auto;
}

/* ==========================================================================
   Header
   ========================================================================== */

.hsa-header {
	background-color: var(--wp--preset--color--page);
	border-block-end: 1px solid var(--wp--custom--line--control);
}

/* Height drives the lockup, not the site-logo block's width attribute: width is
   auto and max-width is lifted, so the aspect ratio (4.63:1) sets the rest. */
.hsa-header .wp-block-site-logo img,
.hsa-header .custom-logo {
	height: 62px;
	width: auto;
	max-width: none;
	display: block;
}

/* The SVG lockup is cropped to its ink, so its height is the mark's height.
   8px above and below keeps the header row at the 62px the PNG gave it. */
.hsa-header .hsa-logo { display: block; padding-block: 8px; }

.hsa-header .hsa-logo img {
	height: 46px;
	width: auto;
	max-width: none;
	display: block;
}

/* Between the overlay breakpoint and a roomy desktop, the header row is logo +
   six nav items + phone + demo button, and the full-size lockup (313px wide)
   pushes the button onto a second line. 38px tall puts it back at the width
   the row was laid out for. */
@media (min-width: 1081px) and (max-width: 1340px) {
	.hsa-header .hsa-logo img { height: 38px; }
}

/* Phones keep the smaller lockup: the header row is logo + menu toggle + the
   demo button, and anything above 38px pushes the button onto a second line. */
@media (max-width: 640px) {
	.hsa-header .wp-block-site-logo img,
	.hsa-header .custom-logo { height: 38px; }

	.hsa-header .hsa-logo { padding-block: 0; }
	.hsa-header .hsa-logo img { height: 29px; }
}

/* The narrowest phones: the lockup at the width the old one had (about 180px),
   so the menu toggle stays on the logo's row. */
@media (max-width: 400px) {
	.hsa-header .hsa-logo img { height: 24px; }
}

.hsa-header .wp-block-navigation {
	font-size: 15px;
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   Where the nav becomes an overlay
   --------------------------------------------------------------------------
   The header row is logo + nav + demo button, and it is allowed to wrap. Six
   nav items beside a 287px lockup and the button need about 1080px; below that
   the button used to drop onto a second line on its own, which reads as a
   mistake rather than a layout. Core switches the navigation block to its
   overlay at 600px, far too late here, so the switch is moved up. Everything
   between 640px and here therefore gets the toggle, not a squeezed nav.

   Overriding core's `@media (min-width: 600px)` block means repeating its two
   display rules at this breakpoint; the extra class on each keeps them ahead of
   core on specificity without !important.
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
	.hsa-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.hsa-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}

/* Just above the overlay the full nav fits, but only just — take the slack out
   of the gaps rather than let the row wrap. */
@media (min-width: 1081px) and (max-width: 1260px) {
	.hsa-header > .wp-block-group { gap: var(--wp--preset--spacing--50); }
	.hsa-header .wp-block-navigation.is-layout-flex { gap: var(--wp--preset--spacing--50); }
}

.hsa-header .wp-block-navigation .wp-block-navigation-item__content:hover {
	text-decoration: none;
	color: var(--wp--preset--color--crimson);
}

/* Phone link beside the demo button. Reads like a nav item: same size and
   weight, crimson on hover. The digits drop out wherever the row is short of
   room — just above the nav overlay, and on phones — leaving the handset; the
   link's aria-label keeps the number for screen readers either way. */
.hsa-phone {
	display: inline-flex;
	align-items: center;
	gap: 8.8px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	white-space: nowrap;
}

.hsa-phone:hover { color: var(--wp--preset--color--crimson); text-decoration: none; }

.hsa-phone:focus-visible {
	outline: 2px solid var(--wp--preset--color--coral);
	outline-offset: 4px;
	border-radius: 4px;
}

.hsa-phone__icon { flex: 0 0 auto; }

/* The WhatsApp link on the Support page: the phone link's icon-and-text shape,
   in the same type and link colour as the number and email beside it. */
.hsa-walink { font: inherit; color: var(--wp--preset--color--crimson); }

@media (min-width: 1081px) and (max-width: 1260px), (max-width: 640px) {
	.hsa-phone__number { display: none; }

	/* A thumb-sized target once it is only an icon — as wide as it is tall, and
	   no taller than the demo button beside it, so the row keeps its height. */
	.hsa-phone {
		justify-content: center;
		min-width: 38px;
		padding-block: 10px;
	}
}

/* Current page marker — crimson, bold. */
.hsa-header .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.hsa-header .wp-block-navigation-item.current_page_item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--crimson);
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   Products dropdown
   --------------------------------------------------------------------------
   A flat list of headings and links, laid out so each heading starts a new
   column. Adding or moving a product is a menu edit, not a layout change. Core
   already opens the panel on hover and on focus-within.

   A grid rather than CSS columns: multi-column balancing would ignore the
   forced break and pull the third heading up under the second column. Here
   each item's column is the count of headings before it, and dense flow
   stacks every column from the top.
   -------------------------------------------------------------------------- */

.hsa-header .wp-block-navigation .hsa-megamenu > .wp-block-navigation__submenu-container {
	/* Core makes the submenu a flex column. */
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-flow: row dense;
	align-content: start;
	width: min(680px, calc(100vw - 88px)) !important;
	min-width: 0;
	padding: 26.4px 35.2px;
	background-color: var(--wp--preset--color--card);
	border: 1px solid var(--wp--custom--line--hairline);
	border-radius: var(--wp--custom--radius--card);
	box-shadow: var(--wp--preset--shadow--card);
}

/* Column by heading count: up to the first heading's items in column 1, the
   second heading and its items in 2, the third in 3. Half the 35.2px gap
   either side of each rule. Desktop only: below 1201px it is a plain list. */
@media (min-width: 1201px) {
	.hsa-header .wp-block-navigation .hsa-megamenu > .wp-block-navigation__submenu-container > li {
		grid-column: 1;
		padding-inline-end: 17.6px;
	}

	.hsa-header .wp-block-navigation .hsa-megamenu .hsa-mm-heading ~ .hsa-mm-heading,
	.hsa-header .wp-block-navigation .hsa-megamenu .hsa-mm-heading ~ .hsa-mm-heading ~ li {
		grid-column: 2;
		padding-inline: 17.6px;
	}

	.hsa-header .wp-block-navigation .hsa-megamenu .hsa-mm-heading ~ .hsa-mm-heading ~ .hsa-mm-heading,
	.hsa-header .wp-block-navigation .hsa-megamenu .hsa-mm-heading ~ .hsa-mm-heading ~ .hsa-mm-heading ~ li {
		grid-column: 3;
		padding-inline: 17.6px 0;
	}
}

.hsa-header .wp-block-navigation .hsa-megamenu .hsa-mm-heading {
	margin-block-start: 0;
}

/* The hairline rules between columns, full height whatever each column holds.
   Absolutely positioned, so they take the column's area as their box without
   occupying any grid cells the links need. */
.hsa-header .wp-block-navigation .hsa-megamenu > .wp-block-navigation__submenu-container::before,
.hsa-header .wp-block-navigation .hsa-megamenu > .wp-block-navigation__submenu-container::after {
	content: "";
	position: absolute;
	inset-block: 26.4px;
	inset-inline-start: 0;
	border-inline-start: 1px solid var(--wp--custom--line--hairline);
	pointer-events: none;
}

.hsa-header .wp-block-navigation .hsa-megamenu > .wp-block-navigation__submenu-container::before { grid-column: 2; }
.hsa-header .wp-block-navigation .hsa-megamenu > .wp-block-navigation__submenu-container::after { grid-column: 3; }

/* The category row is a heading, not a destination. */
.hsa-header .wp-block-navigation .hsa-megamenu .hsa-mm-heading > .wp-block-navigation-item__content {
	display: block;
	padding: 0 0 8.8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-faint);
	cursor: default;
	pointer-events: none;
}

.hsa-header .wp-block-navigation .hsa-megamenu .hsa-mm-item > .wp-block-navigation-item__content {
	display: block;
	padding: 6px 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: 17px;
	color: var(--wp--preset--color--ink);
	white-space: nowrap;
}

.hsa-header .wp-block-navigation .hsa-megamenu .hsa-mm-item > .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--crimson);
	text-decoration: none;
}

/* Kill the default submenu item padding so the columns line up. */
.hsa-header .wp-block-navigation .hsa-megamenu .wp-block-navigation__submenu-container > li {
	display: block;
}

/* Between the overlay breakpoint and the desktop layout there isn't room for a
   three-column panel to the right of the Products item, so it becomes an
   ordinary vertical dropdown — headings kept, columns and rules dropped — and
   hangs from the item's trailing edge so it can't run off the viewport. */
@media (max-width: 1200px) {
	.hsa-header .wp-block-navigation .hsa-megamenu > .wp-block-navigation__submenu-container {
		display: block !important;
		width: max-content !important;
		min-width: 220px;
	}

	.hsa-header .wp-block-navigation .hsa-megamenu > .wp-block-navigation__submenu-container::before,
	.hsa-header .wp-block-navigation .hsa-megamenu > .wp-block-navigation__submenu-container::after {
		display: none;
	}

	.hsa-header .wp-block-navigation .hsa-megamenu .hsa-mm-heading {
		margin-block-start: 17.6px;
	}

	.hsa-header .wp-block-navigation .hsa-megamenu .hsa-mm-heading:first-child {
		margin-block-start: 0;
	}
}

/* Inside the mobile overlay the panel is just a nested list again. */
.hsa-header .wp-block-navigation__responsive-container.is-menu-open .hsa-megamenu > .wp-block-navigation__submenu-container {
	display: block !important;
	width: auto !important;
	max-width: none;
	padding: 0 0 0 17.6px;
	border: 0;
	box-shadow: none;
	background-color: transparent;
}

.hsa-header .wp-block-navigation__responsive-container.is-menu-open .hsa-megamenu > .wp-block-navigation__submenu-container::before,
.hsa-header .wp-block-navigation__responsive-container.is-menu-open .hsa-megamenu > .wp-block-navigation__submenu-container::after {
	display: none;
}

.hsa-header .wp-block-navigation__responsive-container.is-menu-open .hsa-mm-heading {
	margin-block-start: 13.2px;
}

/* Arabic toggle — the brand kit puts it in the nav as crimson text. Removed
   from the header until it has a real destination; the style is kept so
   re-adding it is a one-line change in parts/header.html. */
.hsa-langlink {
	font-size: 14px;
	font-weight: 600;
	color: var(--wp--preset--color--crimson);
	text-decoration: none;
	white-space: nowrap;
}

/* Nav-size button. */
.hsa-btn-nav .wp-block-button__link {
	padding: 11px 26.4px;
	font-size: 14px;
}

/* Breadcrumb strip. */
.hsa-crumbs {
	display: flex;
	align-items: center;
	gap: 8.8px;
	flex-wrap: wrap;
	font-size: 13px;
	color: var(--wp--preset--color--ink-faint);
}

.hsa-crumbs a { color: var(--wp--preset--color--ink-faint); text-decoration: none; }
.hsa-crumbs a:hover { text-decoration: underline; }
.hsa-crumbs strong { color: var(--wp--preset--color--ink-body); font-weight: 600; }

/* ==========================================================================
   Footer
   ========================================================================== */

.hsa-footer {
	background-color: var(--wp--preset--color--footer);
	color: var(--wp--preset--color--tile);
}

.hsa-footer :where(h1, h2, h3, h4, h5, h6) { color: #FFFFFF; }
.hsa-footer p { color: var(--wp--preset--color--ink-faint); font-size: 14px; }

/* Long-form text on the titled template (Privacy policy, Terms of use).
   Paragraph and heading spacing is set on the blocks; lists carry none. */
.hsa-prose > ul { margin-block: 13.2px 0; padding-inline-start: 22px; }
.hsa-prose li + li { margin-block-start: 4.4px; }

/* The copyright and legal links, under a hairline in the footer's own ink. */
.hsa-footer__legal { border-top: 1px solid rgba(255, 255, 255, 0.12); }

.hsa-footer__label {
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--footer-label);
	margin: 0;
}

.hsa-footer .wp-block-navigation,
.hsa-footer .hsa-footer__links {
	font-size: 14px;
}

.hsa-footer a { color: var(--wp--preset--color--footer-body); text-decoration: none; }
.hsa-footer a:hover { color: #FFFFFF; text-decoration: underline; }

.hsa-footer .wp-block-navigation .wp-block-navigation-item__content { color: var(--wp--preset--color--footer-body); }
.hsa-footer .wp-block-navigation .wp-block-navigation-item__content:hover { color: #FFFFFF; }

/* Vertical link stacks in the footer. */
.hsa-footer .wp-block-navigation__container.is-vertical { gap: 8.8px; }

/* ==========================================================================
   Sticky column (product page "Inside the product")
   ========================================================================== */

@media (min-width: 782px) {
	.hsa-sticky {
		position: sticky;
		top: 44px;
		align-self: start;
	}
}

/* ==========================================================================
   Grid collapse — keeps desktop fidelity, stays usable below it
   ========================================================================== */

@media (max-width: 1100px) {
	.hsa-grid-6.is-layout-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.hsa-grid-4.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	.hsa-grid-3.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hsa-statrow.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 17.6px; }
	.hsa-statrow > *:nth-child(2n) { border-inline-end: 0; }
}

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

	/* Logo tiles are small and there are nine of them: one per row is a long
	   scroll to say something a two-column block says at a glance. */
	.hsa-logogrid.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hsa-grid-6.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hsa-statrow.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hsa-slarow { flex-direction: column; align-items: flex-start; gap: 13.2px; }
	.hsa-phototile__title { min-height: 96px; }
	.hsa-band__title { min-height: 140px; padding-inline-start: 0; }
	.hsa-hero-figure::before { display: none; }
}

/* Split rows (heading left, arrow-link right) collapse cleanly. */
.hsa-split {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 26.4px;
	flex-wrap: wrap;
}

.hsa-split--center { align-items: center; }

/* ==========================================================================
   Editor affordances — make the invisible scaffolding visible in the editor
   ========================================================================== */

.editor-styles-wrapper .hsa-blurstack {
	outline: 1px dashed rgba(196, 33, 58, 0.35);
	outline-offset: -1px;
}

/* ==========================================================================
   Right-to-left
   --------------------------------------------------------------------------
   Everything above uses logical properties, so RTL needs only the handful of
   things CSS cannot express logically. WordPress puts dir="rtl" on <html> when
   the locale is right-to-left, and loads style-rtl.css in place of this file if
   one exists — this block means we do not need to generate one.
   ========================================================================== */

[dir="rtl"] .hsa-lockup img {
	object-position: 100% 50%;
}

/* The photo band's dark corner and its title both move to the trailing edge. */
[dir="rtl"] .hsa-phototile__title,
[dir="rtl"] .hsa-band__title {
	text-align: right;
}

/* ==========================================================================
   Floating buttons — WhatsApp, and the sales chat beneath it
   ==========================================================================
   One fixed stack bottom-right, so the two never overlap. It sits under the
   mobile nav overlay (core puts that at 100000) and under Crisp's open chatbox,
   and stays inside the phone's safe area.

   WhatsApp is green with the white glyph — the one colour on the site from
   outside the brand palette, on purpose: it is WhatsApp's mark, and the green
   is what people look for. Don't bring it into line with the brand. The chat
   button is ours, so it is coral, like every other action on a light page. */

.hsa-fab {
	position: fixed;
	right: calc(17.6px + env(safe-area-inset-right, 0px));
	bottom: calc(17.6px + env(safe-area-inset-bottom, 0px));
	z-index: 90;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 13.2px;
}

.hsa-fab__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radius--control);
	box-shadow: 0 3px 10px rgba(26, 25, 23, .08);
	text-decoration: none;
	cursor: pointer;
	transition: background-color .12s ease;
}

.hsa-fab__btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 3px;
}

.hsa-wa {
	background-color: #25D366; /* WhatsApp green */
	color: #FFFFFF;
}

.hsa-wa:hover,
.hsa-wa:focus-visible {
	background-color: #1EBE5A; /* a step darker, as the brand buttons do on hover */
	color: #FFFFFF;
}

.hsa-chat {
	background-color: var(--wp--preset--color--coral);
	color: var(--wp--preset--color--page);
}

.hsa-chat:hover,
.hsa-chat:focus-visible {
	background-color: #EE3552; /* the button hover already set in theme.json */
	color: var(--wp--preset--color--page);
}

@media (max-width: 640px) {
	.hsa-fab {
		right: calc(16px + env(safe-area-inset-right, 0px));
		bottom: calc(16px + env(safe-area-inset-bottom, 0px));
		gap: 8.8px;
	}

	.hsa-fab__btn {
		width: 52px;
		height: 52px;
	}
}

/* The chat prompt: a white card that slides out to the left of the chat
   button, with a tail pointing at it. Bottom-aligned with the button rather
   than centred on it, so it never runs off the foot of the screen. The card
   radius and the one shadow; no border. */
.hsa-chat-wrap { position: relative; }

.hsa-chat-prompt {
	position: absolute;
	right: calc(100% + 17.6px);
	bottom: 0;
	display: flex;
	align-items: flex-start;
	width: max-content;
	max-width: min(350px, calc(100vw - 110px));
	background-color: var(--wp--preset--color--card);
	border-radius: var(--wp--custom--radius--card);
	box-shadow: 0 3px 10px rgba(26, 25, 23, .08);
	opacity: 0;
	transform: translateX(13.2px) scale(.96);
	transform-origin: right bottom;
	transition: opacity .3s ease, transform .3s cubic-bezier(.2, .9, .3, 1.2);
}

/* The tail: a small rotated square on the edge facing the button, level with
   the button's centre (half its 56px height up from the bottom). */
.hsa-chat-prompt::after {
	content: "";
	position: absolute;
	bottom: 22px;
	right: -6px;
	width: 12px;
	height: 12px;
	background-color: var(--wp--preset--color--card);
	transform: rotate(45deg);
	border-top-right-radius: 2px;
}

.hsa-chat-prompt.is-visible {
	opacity: 1;
	transform: translateX(0) scale(1);
}

.hsa-chat-prompt[hidden] { display: none; }

.hsa-chat-prompt__open {
	display: flex;
	flex-direction: column;
	gap: 4.4px;
	padding: 13.2px 4.4px 13.2px 17.6px;
	border: 0;
	background: none;
	font: inherit;
	text-align: start;
	cursor: pointer;
}

.hsa-chat-prompt__open strong {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.25;
	color: var(--wp--preset--color--ink);
}

.hsa-chat-prompt__open span {
	font-size: 13px;
	font-weight: 700;
	color: var(--wp--preset--color--crimson);
}

.hsa-chat-prompt__open span::after { content: " →"; }
.hsa-chat-prompt__open:hover span { text-decoration: underline; }

.hsa-chat-prompt__close {
	flex: 0 0 auto;
	display: flex;
	padding: 8.8px;
	border: 0;
	background: none;
	color: var(--wp--preset--color--ink-faint);
	cursor: pointer;
}

.hsa-chat-prompt__close:hover { color: var(--wp--preset--color--ink); }

.hsa-chat-prompt button:focus-visible {
	outline: 2px solid var(--wp--preset--color--coral);
	outline-offset: -2px;
	border-radius: var(--wp--custom--radius--card);
}

/* As the prompt appears, the chat button pulses once: a coral ring that
   grows and fades, so the eye goes from the card to the thing to press. */
.hsa-chat.is-nudging { animation: hsa-nudge 1.2s ease-out 2; }

@keyframes hsa-nudge {
	0%   { box-shadow: 0 3px 10px rgba(26, 25, 23, .08), 0 0 0 0 rgba(254, 70, 95, .55); }
	70%  { box-shadow: 0 3px 10px rgba(26, 25, 23, .08), 0 0 0 16px rgba(254, 70, 95, 0); }
	100% { box-shadow: 0 3px 10px rgba(26, 25, 23, .08), 0 0 0 0 rgba(254, 70, 95, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.hsa-chat-prompt { transition: none; }
	.hsa-chat.is-nudging { animation: none; }
}

/* While Crisp's chatbox is open it has the corner, and its own close button. */
.hsa-chat-open .hsa-fab { display: none; }

@media print {
	.hsa-fab { display: none; }
}