.hbn-state-map {
	/* Base site tokens (kept from the original build for the map/sidebar) */
	--hbn-accent: #2AB090;
	--hbn-accent-dark: #1C7A63;
	--hbn-ink: #1a3b34;
	--hbn-muted: #5a6b67;
	--hbn-border: #dfe6e4;
	--hbn-panel: rgba(41, 169, 225, 0.11);

	/*
	 * Modal redesign tokens — mapped to the Elementor kit's Site Settings >
	 * Global Colors/Typography (kit "elementor-kit-5") instead of hardcoded
	 * hex, per the design handoff. Every var() has a hex fallback matching
	 * the mock in case this markup ever renders outside the kit's scope.
	 *
	 * --hbn-status-farmbill and --hbn-status-partial have no equivalent
	 * Elementor global yet (the kit only defines primary/secondary/text/
	 * accent) — they're proposed here as local tokens. Recommend promoting
	 * them to real Global Colors ("Status / Neutral", "Status / Warning")
	 * in Elementor Site Settings so they're reusable outside this plugin.
	 */
	--hbn-font-heading: var(--e-global-typography-secondary-font-family, inherit);
	--hbn-font-heading-weight: var(--e-global-typography-secondary-font-weight, 700);
	--hbn-font-label: var(--e-global-typography-primary-font-family, inherit);
	--hbn-font-label-weight: var(--e-global-typography-primary-font-weight, 600);
	--hbn-font-body: var(--e-global-typography-text-font-family, inherit);
	--hbn-font-body-weight: var(--e-global-typography-text-font-weight, 400);

	--hbn-brand: var(--e-global-color-primary, #2AB08F);
	--hbn-brand-deep: color-mix(in srgb, var(--e-global-color-primary, #2AB08F) 70%, black);
	--hbn-modal-ink: var(--e-global-color-text, #14211E);
	--hbn-modal-muted: color-mix(in srgb, var(--e-global-color-text, #14211E) 55%, transparent);
	--hbn-modal-border: color-mix(in srgb, var(--e-global-color-text, #14211E) 12%, transparent);
	--hbn-modal-overlay: color-mix(in srgb, var(--e-global-color-text, #14211E) 35%, transparent);
	--hbn-modal-surface: #fff;
	--hbn-modal-surface-alt: color-mix(in srgb, var(--e-global-color-text, #14211E) 4%, white);

	--hbn-status-farmbill: #A0A6A5;
	--hbn-status-partial: #E8A23D;
	--hbn-status-none: #C7D6D3;

	max-width: 1200px;
	margin: 0 auto;
	font-family: inherit;
}

@media (prefers-reduced-motion: reduce) {
	.hbn-state-map * {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}

/* ---------- Layout: green sidebar + map ---------- */

.hbn-map-layout {
	display: grid;
	grid-template-columns: 260px 1fr;
	border: 1px solid var(--hbn-border);
}

.hbn-map-sidebar {
	background: var(--hbn-accent);
	color: #fff;
	padding: 32px 24px;
	display: flex;
	flex-direction: column;
}

.hbn-map-sidebar__heading {
	margin: 0 0 14px;
	font-size: 22px;
	line-height: 1.25;
	font-weight: 800;
	/* Desktop: wraps normally if the sidebar is too narrow for it to fit.
	   Forced to a single line only on mobile (see the ≤800px breakpoint),
	   where the sidebar goes full-width and there's room for it. */
}

.hbn-map-sidebar__arrow {
	display: block;
	width: 100%;
	height: 12px;
	margin-bottom: 20px;
	color: #fff;
	overflow: visible;
}

.hbn-map-sidebar__text {
	font-size: 14px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.92);
	margin: 0 0 auto;
}

.hbn-state-dropdown-label {
	display: none;
	margin-top: 20px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
}

.hbn-state-dropdown {
	display: none;
	position: relative;
	margin-top: 8px;
}

/*
 * Same theme-collision fix as the modal close/CTA buttons: the theme applies
 * a generic pink/fuchsia `button:active`/`:focus` fill that otherwise beats
 * this rule once the button is pressed or focused.
 */
.hbn-state-map button.hbn-state-dropdown__toggle,
.hbn-state-map button.hbn-state-dropdown__toggle:hover,
.hbn-state-map button.hbn-state-dropdown__toggle:focus,
.hbn-state-map button.hbn-state-dropdown__toggle:active {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 12px 14px;
	min-height: 44px;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.35) !important;
	background: rgba(255, 255, 255, 0.12) !important;
	color: #fff !important;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
	box-shadow: none !important;
	text-shadow: none !important;
}

.hbn-state-map button.hbn-state-dropdown__toggle::before,
.hbn-state-map button.hbn-state-dropdown__toggle::after {
	content: none !important;
	display: none !important;
}

.hbn-state-map button.hbn-state-dropdown__toggle:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.hbn-state-dropdown__value {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hbn-state-dropdown__chevron {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	color: #fff;
	transition: transform 150ms ease;
}

.hbn-state-dropdown.is-open .hbn-state-dropdown__chevron {
	transform: rotate(180deg);
}

.hbn-state-dropdown__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex-shrink: 0;
	background: var(--hbn-status-none, #C7D6D3);
}

.hbn-state-dropdown__list {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 20;
	margin: 0;
	padding: 6px;
	list-style: none;
	max-height: 320px;
	overflow-y: auto;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 16px 40px -12px rgba(20, 33, 30, 0.45);
}

.hbn-state-dropdown__list[hidden] {
	display: none;
}

.hbn-state-dropdown__option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 10px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 500;
	color: var(--hbn-modal-ink, #14211E);
	cursor: pointer;
}

.hbn-state-dropdown__option:hover,
.hbn-state-dropdown__option:focus {
	background: var(--hbn-panel);
	outline: none;
}

.hbn-state-dropdown__option[aria-selected="true"] {
	font-weight: 700;
	color: var(--hbn-accent-dark);
}

.hbn-map-main {
	padding: 24px;
	background: var(--hbn-panel);
}

/* ---------- Legend chips ---------- */

.hbn-map-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 14px;
	margin-bottom: 18px;
}

.hbn-map-legend__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--hbn-accent-dark);
	background: #fff;
	border: 1px solid var(--hbn-border);
	border-radius: 999px;
	padding: 6px 14px 6px 10px;
}

.hbn-map-legend__swatch {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	display: inline-block;
	flex-shrink: 0;
}

.hbn-map-svg-wrap {
	width: 100%;
}

.hbn-us-map {
	width: 100%;
	height: auto;
	display: block;
}

.hbn-state-shape {
	fill: var(--state-fill, #C7D6D3);
	stroke: #fff;
	stroke-width: 1px;
	transition: fill 0.15s ease, filter 0.15s ease;
}

.hbn-state {
	cursor: pointer;
}

.hbn-state:hover .hbn-state-shape,
.hbn-state:focus-visible .hbn-state-shape {
	filter: brightness(0.9);
}

.hbn-state:focus-visible {
	outline: 2px solid var(--hbn-ink);
	outline-offset: 2px;
}

.hbn-state--no-data {
	cursor: default;
	pointer-events: none;
}

.hbn-state-label {
	fill: #fff;
	font-size: 13px;
	font-weight: 600;
	font-family: inherit;
	paint-order: stroke;
	stroke: rgba(0, 0, 0, 0.35);
	stroke-width: 2px;
	pointer-events: none;
	user-select: none;
}

/* ---------- Barnes legal credit ---------- */

.hbn-legal-credit {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 24px;
}

.hbn-legal-credit__logo {
	width: 169px;
	height: 97px;
	flex-shrink: 0;
}

/* ---------- Modal (opened on state click) — design handoff "1b" ---------- */

.hbn-modal-backdrop {
	position: fixed;
	inset: 0;
	background: var(--hbn-modal-overlay);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	z-index: 100000;
	opacity: 0;
	transition: opacity 160ms ease-out;
}

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

.hbn-modal-backdrop.is-open {
	opacity: 1;
}

.hbn-modal {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--hbn-modal-surface);
	border-radius: 12px;
	width: 944px;
	max-width: calc(100vw - 48px);
	max-height: calc(100vh - 64px);
	overflow: hidden;
	box-shadow: 0 30px 70px -30px rgba(20, 33, 30, 0.6);
	transform: translateY(8px);
	opacity: 0;
	transition: transform 180ms cubic-bezier(.2, .8, .2, 1), opacity 160ms ease-out;
}

.hbn-modal-backdrop.is-open .hbn-modal {
	transform: translateY(0);
	opacity: 1;
}

/* 1. Header — deep green band */

.hbn-modal-header {
	background: var(--hbn-brand-deep);
	color: #fff;
	padding: 26px 36px;
	display: flex;
	align-items: center;
	gap: 16px;
	flex: 0 0 auto;
}

.hbn-modal-header__overline {
	display: none;
}

.hbn-modal-header__identity {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: 1 1 auto;
	min-width: 0;
}

.hbn-modal-header__icon {
	position: relative;
	width: 48px;
	height: 48px;
	flex-shrink: 0;
	border-radius: 9px;
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.28);
	overflow: hidden;
}

.hbn-modal-header__icon .hbn-detail-svg,
.hbn-modal-header__icon .hbn-detail-image__custom {
	position: absolute;
	inset: 8px;
	width: calc(100% - 16px);
	height: calc(100% - 16px);
}

.hbn-modal-header__icon .hbn-detail-svg .hbn-state-shape {
	fill: #fff;
}

.hbn-modal-header__icon .hbn-detail-svg .hbn-state-label {
	display: none;
}

.hbn-modal-header__icon-code {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--hbn-font-heading);
	font-weight: var(--hbn-font-heading-weight);
	font-size: 16px;
	letter-spacing: 0.04em;
	color: #fff;
}

.hbn-modal-header__icon-code[hidden] {
	display: none;
}

.hbn-modal-header__text {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.hbn-modal-header__title {
	margin: 0;
	font-family: var(--hbn-font-heading);
	font-weight: var(--hbn-font-heading-weight);
	font-size: 30px;
	line-height: 1;
	letter-spacing: -0.02em;
	color: #fff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hbn-modal-header__subtitle {
	font-family: var(--hbn-font-label);
	font-weight: var(--hbn-font-label-weight);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
}

.hbn-detail-status-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--hbn-brand);
	color: #fff;
	padding: 8px 14px;
	border-radius: 6px;
	font-family: var(--hbn-font-label);
	font-weight: var(--hbn-font-label-weight);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	flex-shrink: 0;
	border: 1px solid rgba(255, 255, 255, 0.35);
}

.hbn-detail-status-badge::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 2px;
	background: #fff;
	flex-shrink: 0;
}

.hbn-state-map button.hbn-modal-close,
.hbn-state-map button.hbn-modal-close:hover,
.hbn-state-map button.hbn-modal-close:focus,
.hbn-state-map button.hbn-modal-close:active {
	position: static;
	width: 38px;
	height: 38px;
	padding: 0 !important;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 9px;
	border: 1px solid rgba(255, 255, 255, 0.3) !important;
	background: transparent !important;
	color: #fff !important;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	box-shadow: none !important;
	text-shadow: none !important;
	flex-shrink: 0;
}

.hbn-state-map button.hbn-modal-close:hover {
	background: rgba(255, 255, 255, 0.16) !important;
}

.hbn-state-map button.hbn-modal-close:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.hbn-state-map button.hbn-modal-close span {
	display: block;
}

.hbn-state-map button.hbn-modal-close::before,
.hbn-state-map button.hbn-modal-close::after {
	content: none !important;
	display: none !important;
}

/* 2. Metrics row — the hard data, always 3 cells in the same order (DTC
   dropped from here — it's already shown in full in the body below, and
   the short-lead preview here was just duplicating it) */

.hbn-modal-metrics {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--hbn-modal-border);
	border-bottom: 1px solid var(--hbn-modal-border);
	flex: 0 0 auto;
}

.hbn-modal-metric {
	background: var(--hbn-modal-surface);
	padding: 20px 24px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 0 0 auto;
	min-width: 0;
}

.hbn-modal-metric__label {
	font-family: var(--hbn-font-label);
	font-weight: var(--hbn-font-label-weight);
	font-size: 10px;
	line-height: 1.3;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--hbn-modal-muted);
	/* Reserve 2 lines so a wrapping label ("Retail Outside Dispensary?")
	   doesn't push its value lower than the value in a 1-line-label cell. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	min-height: calc(1.3em * 2);
	overflow: hidden;
}

.hbn-modal-metric__value {
	font-family: var(--hbn-font-heading);
	font-weight: var(--hbn-font-heading-weight);
	font-size: 26px;
	line-height: 1.15;
	color: var(--hbn-modal-ink);
	overflow-wrap: anywhere;
	/*
	 * Reserve exactly 2 lines regardless of actual value length, so every
	 * cell in the row stays the same height whether its value is "No." or
	 * a full short-lead sentence — clamp+ellipsis is a safety net for the
	 * rare value that would still overflow 2 lines at narrow widths.
	 */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	min-height: calc(1.15em * 2);
	overflow: hidden;
}

.hbn-modal-metric__value--empty {
	color: var(--hbn-modal-muted);
	font-weight: var(--hbn-font-body-weight);
}

/* 3. Body — two columns of full-length prose */

.hbn-modal-body {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	flex: 1 1 auto;
	overflow-y: auto;
}

.hbn-modal-body__col {
	padding: 28px 32px;
	display: flex;
	flex-direction: column;
	gap: 22px;
	border-right: 1px solid var(--hbn-modal-border);
	/* Grid items default to min-width:auto — without this, a long
	   unbroken token in the body text (a bare URL, a legal citation with
	   no spaces) forces this column wider than its track instead of
	   wrapping, causing the whole modal to scroll horizontally. */
	min-width: 0;
}

.hbn-modal-body__col--alt {
	border-right: none;
	background: var(--hbn-modal-surface-alt);
}

.hbn-modal-body__block {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.hbn-modal-body__block + .hbn-modal-body__block {
	padding-top: 22px;
	border-top: 1px solid var(--hbn-modal-border);
}

.hbn-modal-body__label {
	font-family: var(--hbn-font-label);
	font-weight: var(--hbn-font-label-weight);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--hbn-brand-deep);
}

.hbn-modal-body__text {
	margin: 0;
	font-family: var(--hbn-font-body);
	font-weight: var(--hbn-font-body-weight);
	font-size: 15px;
	line-height: 1.65;
	color: var(--hbn-modal-ink);
	white-space: pre-line;
	text-wrap: pretty;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.hbn-state-map .hbn-modal-body__text a,
.hbn-state-map .hbn-modal-body__text a:visited {
	color: var(--hbn-brand-deep) !important;
	text-decoration: none !important;
}

.hbn-state-map .hbn-modal-body__text a:hover {
	text-decoration: underline !important;
}

.hbn-state-map .hbn-modal-body__text a:focus-visible {
	outline: 2px solid var(--hbn-brand);
	outline-offset: 2px;
}

.hbn-modal-body__empty {
	margin: 0;
	font-family: var(--hbn-font-body);
	font-size: 15px;
	font-style: italic;
	color: var(--hbn-modal-muted);
}

/* 4. Footer */

.hbn-modal-footer {
	padding: 20px 36px;
	border-top: 1px solid var(--hbn-modal-border);
	background: var(--hbn-modal-surface);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex: 0 0 auto;
}

.hbn-modal-footer__disclaimer {
	font-family: var(--hbn-font-label);
	font-size: 11px;
	letter-spacing: 0.06em;
	color: var(--hbn-modal-muted);
}

/*
 * Specificity note: the theme's global styles include a plain `a` selector
 * scoped to `.elementor-kit-5` (color + underline) which otherwise beats our
 * single-class selector and was bleeding a green underlined link style onto
 * this CTA. `.hbn-state-map a.hbn-detail-learn-more` outranks it.
 */
.hbn-state-map a.hbn-detail-learn-more,
.hbn-state-map a.hbn-detail-learn-more:visited {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--hbn-font-heading);
	font-weight: var(--hbn-font-heading-weight);
	font-size: 14px;
	color: #fff !important;
	background: var(--hbn-brand-deep);
	padding: 12px 18px;
	border-radius: 8px;
	text-decoration: none !important;
	flex-shrink: 0;
	transition: background-color 150ms ease;
}

.hbn-state-map a.hbn-detail-learn-more:hover {
	background: color-mix(in srgb, var(--hbn-brand-deep) 82%, black);
	color: #fff !important;
}

.hbn-detail-learn-more:focus-visible {
	outline: 2px solid var(--hbn-brand);
	outline-offset: 2px;
}

.hbn-detail-learn-more[hidden] {
	display: none;
}

/* ---------- Market Updates — lead card + list redesign ----------
 * Replaces the old equal-3-column strip: first post is a large lead card
 * (figure, "Most Recent" badge, full excerpt), the other two are a compact
 * list with a thumbnail. Whole card is the link (no underlines anywhere —
 * link state reads via hover color, per the design handoff), and a missing
 * featured image always falls back to a placeholder block, never a gap or
 * a stretched image. Tokens reused from the modal's root block above.
 */

.hbn-market-updates {
	margin-top: 40px;
	padding-top: 32px;
	padding-bottom: 48px;
	border-top: 1px solid var(--hbn-modal-border);
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.hbn-market-updates__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	border-bottom: 1px solid var(--hbn-modal-border);
	padding-bottom: 18px;
}

.hbn-market-updates__kicker {
	display: block;
	font-family: var(--hbn-font-label);
	font-weight: var(--hbn-font-label-weight);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--hbn-brand-deep);
}

.hbn-market-updates__heading {
	margin: 7px 0 0;
	font-family: var(--hbn-font-heading);
	font-weight: var(--hbn-font-heading-weight);
	font-size: 32px;
	line-height: 1;
	letter-spacing: -0.025em;
	color: var(--hbn-modal-ink);
}

.hbn-state-map a.hbn-market-updates__all,
.hbn-state-map a.hbn-market-updates__all:visited {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--hbn-font-heading);
	font-weight: 600;
	font-size: 14px;
	color: var(--hbn-brand-deep) !important;
	border: 1px solid color-mix(in srgb, var(--hbn-brand-deep) 28%, transparent);
	padding: 10px 15px;
	border-radius: 8px;
	text-decoration: none !important;
	flex-shrink: 0;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.hbn-state-map a.hbn-market-updates__all:hover {
	background: var(--hbn-brand-deep);
	color: #fff !important;
}

.hbn-market-updates__grid {
	display: grid;
	grid-template-columns: 1.25fr 1fr;
	gap: 40px;
	align-items: start;
}

/* Lead card */

.hbn-state-map a.hbn-market-updates__lead,
.hbn-state-map a.hbn-market-updates__lead:visited {
	display: flex;
	flex-direction: column;
	gap: 16px;
	color: inherit;
	text-decoration: none !important;
}

.hbn-market-updates__fig {
	height: 230px;
	border-radius: 10px;
	background: var(--hbn-modal-surface-alt);
	border: 1px solid var(--hbn-modal-border);
	overflow: hidden;
}

.hbn-market-updates__fig img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hbn-market-updates__fig-placeholder,
.hbn-market-updates__thumb-placeholder {
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
	font-family: var(--hbn-font-label);
	font-size: 10.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hbn-modal-muted);
	text-align: center;
	padding: 0 8px;
}

.hbn-market-updates__meta {
	display: flex;
	align-items: center;
	gap: 12px;
}

.hbn-market-updates__badge {
	font-family: var(--hbn-font-label);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	background: color-mix(in srgb, var(--hbn-brand-deep) 10%, white);
	color: var(--hbn-brand-deep);
	border: 1px solid color-mix(in srgb, var(--hbn-brand-deep) 18%, transparent);
	padding: 4px 9px;
	border-radius: 5px;
}

.hbn-market-updates__date {
	font-family: var(--hbn-font-label);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hbn-modal-muted);
}

.hbn-market-updates__lead-title {
	margin: 0;
	font-family: var(--hbn-font-heading);
	font-weight: var(--hbn-font-heading-weight);
	font-size: 27px;
	line-height: 1.18;
	letter-spacing: -0.02em;
	color: var(--hbn-modal-ink);
	transition: color 0.18s ease;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

.hbn-market-updates__lead:hover .hbn-market-updates__lead-title,
.hbn-market-updates__item:hover .hbn-market-updates__item-title {
	color: var(--hbn-brand);
}

.hbn-market-updates__dek {
	margin: 0;
	font-family: var(--hbn-font-body);
	font-size: 15px;
	line-height: 1.65;
	color: var(--hbn-modal-muted);
	max-width: 60ch;
}

.hbn-market-updates__more {
	font-family: var(--hbn-font-heading);
	font-weight: 600;
	font-size: 13.5px;
	color: var(--hbn-brand-deep);
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

/* List */

.hbn-market-updates__list {
	display: flex;
	flex-direction: column;
}

.hbn-state-map a.hbn-market-updates__item,
.hbn-state-map a.hbn-market-updates__item:visited {
	display: flex;
	gap: 18px;
	align-items: flex-start;
	padding: 20px 0;
	color: inherit;
	text-decoration: none !important;
	border-top: 1px solid var(--hbn-modal-border);
}

.hbn-market-updates__list a.hbn-market-updates__item:first-child {
	padding-top: 0;
	border-top: 0;
}

.hbn-market-updates__thumb {
	width: 96px;
	height: 72px;
	flex: 0 0 auto;
	border-radius: 8px;
	background: var(--hbn-modal-surface-alt);
	border: 1px solid var(--hbn-modal-border);
	overflow: hidden;
}

.hbn-market-updates__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hbn-market-updates__thumb-placeholder {
	font-size: 9px;
}

.hbn-market-updates__item-body {
	display: flex;
	flex-direction: column;
	gap: 7px;
	min-width: 0;
}

.hbn-market-updates__item-title {
	margin: 0;
	font-family: var(--hbn-font-heading);
	font-weight: 600;
	font-size: 18px;
	line-height: 1.28;
	letter-spacing: -0.015em;
	transition: color 0.18s ease;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

.hbn-market-updates__item-dek {
	margin: 0;
	font-family: var(--hbn-font-body);
	font-size: 14px;
	line-height: 1.55;
	color: var(--hbn-modal-muted);
}

.hbn-market-updates__all-mobile {
	display: none;
}

.hbn-state-map a.hbn-market-updates__lead:focus-visible,
.hbn-state-map a.hbn-market-updates__item:focus-visible,
.hbn-state-map a.hbn-market-updates__all:focus-visible,
.hbn-state-map a.hbn-market-updates__all-mobile:focus-visible {
	outline: 2px solid var(--hbn-brand);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ---------- Single state_regulation view (SEO fallback page) ----------
 * "Página del estado" design handoff: green header + 4-metric grid (same
 * fields as the map modal) + index nav / long-form content in two columns.
 * Tokens are duplicated from .hbn-state-map's root block (same Elementor
 * global mappings) since this page renders standalone, without the map
 * wrapper.
 */

/* The theme renders its own default post title above the_content
   (.page-header > .entry-title) — redundant with our own <h1> inside the
   green header below it, so it's hidden on this template only. */
.single-state_regulation .page-header {
	display: none;
}

.hbn-state-page {
	--hbn-font-heading: var(--e-global-typography-secondary-font-family, inherit);
	--hbn-font-heading-weight: var(--e-global-typography-secondary-font-weight, 700);
	--hbn-font-label: var(--e-global-typography-primary-font-family, inherit);
	--hbn-font-label-weight: var(--e-global-typography-primary-font-weight, 600);
	--hbn-font-body: var(--e-global-typography-text-font-family, inherit);
	--hbn-font-body-weight: var(--e-global-typography-text-font-weight, 400);

	--hbn-brand: var(--e-global-color-primary, #2AB08F);
	--hbn-brand-deep: color-mix(in srgb, var(--e-global-color-primary, #2AB08F) 70%, black);
	--hbn-page-ink: var(--e-global-color-text, #14211E);
	--hbn-page-muted: color-mix(in srgb, var(--e-global-color-text, #14211E) 55%, transparent);
	--hbn-page-border: color-mix(in srgb, var(--e-global-color-text, #14211E) 12%, transparent);
	--hbn-page-surface: #fff;
	--hbn-page-surface-alt: color-mix(in srgb, var(--e-global-color-text, #14211E) 4%, white);
	--hbn-page-chip-bg: color-mix(in srgb, var(--hbn-brand-deep) 10%, white);
	--hbn-page-chip-border: color-mix(in srgb, var(--hbn-brand-deep) 18%, transparent);

	font-family: inherit;
	color: var(--hbn-page-ink);
}

@media (prefers-reduced-motion: reduce) {
	.hbn-state-page * {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}

/* 1. Header */

.hbn-state-page__header {
	background: var(--hbn-brand-deep);
	color: #fff;
	padding: 34px 40px 26px;
}

.hbn-state-page__header-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.hbn-state-page__identity {
	display: flex;
	align-items: center;
	gap: 18px;
}

.hbn-state-page__icon {
	position: relative;
	flex-shrink: 0;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.28);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.hbn-state-page__icon--lg {
	width: 56px;
	height: 56px;
}

.hbn-state-page__icon--sm {
	width: 32px;
	height: 32px;
	border-radius: 7px;
}

.hbn-state-page__icon-svg,
.hbn-state-page .hbn-state-icon-svg {
	width: calc(100% - 16px);
	height: calc(100% - 16px);
}

.hbn-state-page__icon-svg .hbn-state-shape,
.hbn-state-page .hbn-state-icon-svg .hbn-state-shape {
	fill: #fff;
}

.hbn-state-page__icon-svg .hbn-state-label,
.hbn-state-page .hbn-state-icon-svg .hbn-state-label {
	display: none;
}

.hbn-state-page__icon-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hbn-state-page__icon-code {
	font-family: var(--hbn-font-heading);
	font-weight: var(--hbn-font-heading-weight);
	font-size: 16px;
	letter-spacing: 0.04em;
	color: #fff;
}

.hbn-state-page__identity-text {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.hbn-state-page__overline {
	font-family: var(--hbn-font-label);
	font-weight: var(--hbn-font-label-weight);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.68);
}

.hbn-state-page__title {
	margin: 0;
	font-family: var(--hbn-font-heading);
	font-weight: var(--hbn-font-heading-weight);
	font-size: 44px;
	line-height: 1;
	letter-spacing: -0.025em;
	color: #fff;
}

.hbn-state-page__header-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.hbn-state-page__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--hbn-brand);
	color: #fff;
	padding: 9px 15px;
	border-radius: 6px;
	font-family: var(--hbn-font-label);
	font-weight: var(--hbn-font-label-weight);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border: 1px solid rgba(255, 255, 255, 0.35);
	flex-shrink: 0;
}

.hbn-state-page__badge-dot {
	width: 8px;
	height: 8px;
	border-radius: 2px;
	background: #fff;
	flex-shrink: 0;
}

.hbn-state-page__badge--sm {
	padding: 5px 9px;
	font-size: 9.5px;
	gap: 6px;
}

.hbn-state-page__badge--sm .hbn-state-page__badge-dot {
	width: 6px;
	height: 6px;
}

/* 2. Metrics grid */

.hbn-state-page__metrics {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--hbn-page-border);
}

.hbn-state-page__metric {
	background: var(--hbn-page-surface);
	padding: 22px 28px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.hbn-state-page__metric-label {
	font-family: var(--hbn-font-label);
	font-weight: var(--hbn-font-label-weight);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--hbn-page-muted);
}

.hbn-state-page__metric-value {
	font-family: var(--hbn-font-heading);
	font-weight: var(--hbn-font-heading-weight);
	font-size: 28px;
	line-height: 1;
	color: var(--hbn-page-ink);
	overflow-wrap: anywhere;
}

.hbn-state-page__metric-value--empty {
	color: var(--hbn-page-muted);
	font-weight: var(--hbn-font-body-weight);
}

/* Mobile-only bar that opens the section index — hidden on desktop, where
   the sticky sidebar nav covers the same job. */
.hbn-state-page__mobile-nav {
	display: none;
	position: relative;
	background: #fff;
}

.hbn-state-page__mobile-nav-label {
	display: none;
}

.hbn-state-page button.hbn-state-page__mobile-nav-toggle,
.hbn-state-page button.hbn-state-page__mobile-nav-toggle:hover,
.hbn-state-page button.hbn-state-page__mobile-nav-toggle:focus,
.hbn-state-page button.hbn-state-page__mobile-nav-toggle:active {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	min-height: 48px;
	padding: 14px 20px;
	background: transparent !important;
	border: none !important;
	color: var(--hbn-brand-deep) !important;
	font-family: var(--hbn-font-heading);
	font-weight: 500;
	font-size: 13.5px;
	cursor: pointer;
	box-shadow: none !important;
}

.hbn-state-page button.hbn-state-page__mobile-nav-toggle::before,
.hbn-state-page button.hbn-state-page__mobile-nav-toggle::after {
	content: none !important;
	display: none !important;
}

.hbn-state-page__mobile-nav-chevron {
	font-size: 11px;
	transition: transform 150ms ease;
}

.hbn-state-page__mobile-nav-toggle[aria-expanded="true"] .hbn-state-page__mobile-nav-chevron {
	transform: rotate(180deg);
}

.hbn-state-page__mobile-nav-panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 30;
	background: #fff;
	box-shadow: 0 16px 40px -12px rgba(20, 33, 30, 0.35);
	padding: 8px 0;
	display: flex;
	flex-direction: column;
}

.hbn-state-page__mobile-nav-panel[hidden] {
	display: none;
}

.hbn-state-page__mobile-nav-section-link,
.hbn-state-page__mobile-nav-sub-link {
	padding: 11px 20px;
	font-size: 14px;
	color: var(--hbn-page-ink);
	text-decoration: none;
}

.hbn-state-page__mobile-nav-section-link {
	font-weight: 600;
}

.hbn-state-page__mobile-nav-sub-link {
	padding-left: 32px;
	font-size: 13px;
	color: var(--hbn-page-muted);
	white-space: pre-line;
}

.hbn-state-page__mobile-nav-section-link.is-active-section,
.hbn-state-page__mobile-nav-sub-link.is-active {
	color: var(--hbn-brand-deep);
	background: var(--hbn-page-chip-bg);
}

/* 4. Body: sticky index nav + content */

.hbn-state-page__body {
	display: grid;
	grid-template-columns: 268px 1fr;
	align-items: start;
}

.hbn-state-page__nav {
	position: sticky;
	/* Pinned directly below the theme's own sticky header — --hbn-header-h
	   is the same measured value (142px) the anchor scroll offset already
	   uses, so this and the "jump to section" offset stay in sync. */
	top: calc(var(--hbn-header-h, 142px) + 16px);
	align-self: start;
	padding: 36px 28px 48px 40px;
	display: flex;
	flex-direction: column;
	gap: 22px;
	max-height: calc(100vh - var(--hbn-header-h, 142px) - 32px);
	overflow-y: auto;
}

/* Anchor scroll offset: every field/section a nav link can jump to needs to
   land below the theme's sticky header — height measured live in JS, with
   the header's actual measured height (142px) as a same-origin fallback
   for the moment before that JS runs. */
.hbn-state-page__section,
.hbn-state-page__field {
	scroll-margin-top: calc(var(--hbn-header-h, 142px) + 26px);
}

.hbn-state-page__nav-title {
	font-family: var(--hbn-font-label);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--hbn-page-muted);
}

.hbn-state-page__nav-group {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.hbn-state-page__nav-section-link {
	font-family: var(--hbn-font-heading);
	font-weight: 600;
	font-size: 14px;
	color: var(--hbn-page-ink);
	text-decoration: none;
	padding: 8px 12px;
	border-radius: 7px;
	border-left: 3px solid transparent;
}

.hbn-state-page__nav-section-link:hover {
	background: var(--hbn-page-surface-alt);
}

.hbn-state-page__nav-section-link.is-active-section {
	color: var(--hbn-brand-deep);
	background: var(--hbn-page-chip-bg);
	border-left-color: var(--hbn-brand);
}

.hbn-state-page__nav-sub-list {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-left: 15px;
}

.hbn-state-page__nav-sub-link {
	font-size: 13px;
	color: #3D4B47;
	text-decoration: none;
	padding: 5px 0;
}

.hbn-state-page__nav-sub-link:hover,
.hbn-state-page__nav-sub-link.is-active {
	color: var(--hbn-brand-deep);
}

.hbn-state-page__nav-divider {
	height: 1px;
}

.hbn-state-page__nav-map-link {
	font-size: 13.5px;
	font-weight: 500;
	color: var(--hbn-brand-deep);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.hbn-state-page__nav-map-link:hover {
	color: var(--hbn-brand);
}

.hbn-state-page__content {
	padding: 36px 56px 48px 44px;
	max-width: 820px;
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.hbn-state-page__section {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.hbn-state-page__section-heading {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.hbn-state-page__section-overline {
	font-family: var(--hbn-font-label);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--hbn-page-muted);
}

.hbn-state-page__section-title {
	margin: 0;
	font-family: var(--hbn-font-heading);
	font-weight: var(--hbn-font-heading-weight);
	font-size: 26px;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--hbn-page-ink);
}

/* "Field" pattern — the repeatable unit of every long-form value */

.hbn-state-page__fields {
	display: flex;
	flex-direction: column;
}

.hbn-state-page__field {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 16px 0;
}

.hbn-state-page__field-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	padding: 16px 0;
}

.hbn-state-page__field-row .hbn-state-page__field {
	padding: 10px 0 0;
	scroll-margin-top: calc(var(--hbn-header-h, 142px) + 36px);
}

.hbn-state-page__field-label {
	font-family: var(--hbn-font-label);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--hbn-brand-deep);
}

.hbn-state-page__para {
	margin: 0;
	font-family: var(--hbn-font-body);
	font-size: 15px;
	line-height: 1.65;
	color: var(--hbn-page-ink);
}

.hbn-state-page__para a,
.hbn-state-page__para a:visited,
.hbn-state-page__dash-line a,
.hbn-state-page__dash-line a:visited {
	color: var(--hbn-brand-deep) !important;
	text-decoration: none !important;
}

.hbn-state-page__para a:hover,
.hbn-state-page__dash-line a:hover {
	text-decoration: underline !important;
}

.hbn-state-page__para a:focus-visible,
.hbn-state-page__dash-line a:focus-visible {
	outline: 2px solid var(--hbn-brand);
	outline-offset: 2px;
}

.hbn-state-page__para + .hbn-state-page__para,
.hbn-state-page__dash-block + .hbn-state-page__para,
.hbn-state-page__para + .hbn-state-page__dash-block {
	margin-top: 10px;
}

.hbn-state-page__dash-block {
	display: flex;
	flex-direction: column;
	gap: 8px;
	border-left: 2px solid color-mix(in srgb, var(--hbn-brand) 45%, transparent);
	padding-left: 18px;
	margin-top: 10px;
}

.hbn-state-page__dash-line {
	margin: 0;
	font-family: var(--hbn-font-body);
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--hbn-page-ink);
	text-indent: -12px;
	padding-left: 12px;
}

.hbn-state-page__chip,
.hbn-state-page__value-empty {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	font-size: 13.5px;
	font-weight: 500;
	padding: 4px 10px;
	border-radius: 5px;
}

.hbn-state-page__chip {
	background: var(--hbn-page-chip-bg);
	border: 1px solid var(--hbn-page-chip-border);
	color: var(--hbn-brand-deep);
}

.hbn-state-page__chip--muted {
	background: var(--hbn-page-surface-alt);
	border-color: var(--hbn-page-border);
	color: var(--hbn-page-muted);
}

.hbn-state-page__value-empty {
	color: #A9B3AF;
}

.hbn-state-page a.hbn-state-page__inline-link,
.hbn-state-page a.hbn-state-page__inline-link:visited {
	color: var(--hbn-brand-deep) !important;
	text-decoration: none !important;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.hbn-state-page a.hbn-state-page__inline-link:hover {
	color: var(--hbn-brand) !important;
	text-decoration: underline !important;
}

.hbn-state-page a.hbn-state-page__inline-link:focus-visible {
	outline: 2px solid var(--hbn-brand);
	outline-offset: 2px;
}

/* 5. Footer */

.hbn-state-page__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-top: 8px;
}

.hbn-state-page__disclaimer {
	font-family: var(--hbn-font-label);
	font-size: 11px;
	letter-spacing: 0.06em;
	color: var(--hbn-page-muted);
	max-width: 340px;
	line-height: 1.6;
}

.hbn-state-page a.hbn-state-page__cta,
.hbn-state-page a.hbn-state-page__cta:visited {
	font-family: var(--hbn-font-heading);
	font-weight: 600;
	font-size: 14px;
	text-decoration: none !important;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--hbn-brand-deep);
	color: #fff !important;
	padding: 12px 18px;
	border-radius: 8px;
	flex-shrink: 0;
	transition: background-color 150ms ease;
}

.hbn-state-page a.hbn-state-page__cta:hover {
	background: color-mix(in srgb, var(--hbn-brand-deep) 82%, black);
	color: #fff !important;
}

.hbn-state-page a.hbn-state-page__cta:focus-visible {
	outline: 2px solid var(--hbn-brand);
	outline-offset: 2px;
}

/* ---------- Print ---------- */

@media print {
	.hbn-state-page__mobile-nav,
	.hbn-state-page__nav,
	.hbn-state-page__footer {
		display: none !important;
	}

	.hbn-state-page__body {
		grid-template-columns: 1fr;
	}

	.hbn-state-page__content {
		max-width: 100%;
		padding: 24px 0;
	}
}

/* ---------- Tablet / mobile ---------- */

@media (max-width: 1023px) {
	.hbn-state-page__body {
		grid-template-columns: 1fr;
	}

	.hbn-state-page__nav {
		display: none;
	}

	.hbn-state-page__mobile-nav {
		display: block;
	}

	.hbn-state-page__content {
		max-width: 720px;
		padding: 28px 24px 40px;
	}
}

@media (max-width: 767px) {
	.hbn-state-page__header {
		padding: 20px;
	}

	.hbn-state-page__header-top {
		flex-direction: column;
		gap: 14px;
	}

	.hbn-state-page__identity {
		gap: 13px;
	}

	.hbn-state-page__icon--lg {
		width: 42px;
		height: 42px;
	}

	.hbn-state-page__title {
		font-size: 30px;
	}

	.hbn-state-page__metrics {
		grid-template-columns: 1fr 1fr;
	}

	.hbn-state-page__metric {
		padding: 14px 16px;
	}

	.hbn-state-page__metric-label {
		font-size: 9.5px;
	}

	.hbn-state-page__metric-value {
		font-size: 20px;
	}

	.hbn-state-page__content {
		padding: 22px 20px 28px;
		gap: 26px;
	}

	.hbn-state-page__section-title {
		font-size: 21px;
	}

	.hbn-state-page__field-row {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.hbn-state-page__footer {
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
	}

	.hbn-state-page a.hbn-state-page__cta {
		justify-content: center;
		padding: 14px;
		min-height: 48px;
	}
}

@media (max-width: 800px) {
	.hbn-map-layout {
		grid-template-columns: 1fr;
	}

	/* The map is precise pointing-device UX — on touch it's easy to miss a
	   state or hit the wrong one, so surface the dropdown as the primary
	   way in on touch-sized viewports. */
	.hbn-state-dropdown-label {
		display: block;
	}

	.hbn-state-dropdown {
		display: block;
	}

	.hbn-map-sidebar__heading {
		font-size: 19px;
		white-space: nowrap;
	}

	.hbn-map-legend {
		gap: 6px 8px;
	}

	.hbn-map-legend__item {
		font-size: 11px;
		padding: 4px 10px 4px 8px;
		gap: 5px;
	}

	.hbn-map-legend__swatch {
		width: 8px;
		height: 8px;
	}
}

@media (max-width: 420px) {
	.hbn-map-sidebar__heading {
		font-size: 16px;
	}
}

@media (max-width: 1023px) {
	.hbn-market-updates__grid {
		grid-template-columns: 1fr;
		gap: 28px;
	}
}

@media (max-width: 767px) {
	.hbn-market-updates__head {
		border-bottom: 0;
		padding-bottom: 0;
	}

	.hbn-state-map a.hbn-market-updates__all {
		display: none;
	}

	.hbn-market-updates__heading {
		font-size: 26px;
	}

	.hbn-market-updates__fig {
		height: 200px;
	}

	.hbn-market-updates__lead-title {
		font-size: 22px;
	}

	.hbn-market-updates__dek {
		font-size: 14.5px;
	}

	.hbn-market-updates__item {
		padding: 16px 0;
	}

	.hbn-market-updates__thumb {
		width: 76px;
		height: 60px;
	}

	.hbn-market-updates__item-title {
		font-size: 16px;
	}

	.hbn-market-updates__item-dek {
		display: none;
	}

	.hbn-state-map a.hbn-market-updates__all-mobile,
	.hbn-state-map a.hbn-market-updates__all-mobile:visited {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		min-height: 44px;
		font-family: var(--hbn-font-heading);
		font-weight: 600;
		font-size: 15px;
		background: var(--hbn-brand-deep);
		color: #fff !important;
		text-decoration: none !important;
		border-radius: 9px;
	}
}

/* ---------- Modal — mobile (< 768px), bottom sheet ---------- */

@media (max-width: 767px) {
	.hbn-modal-backdrop {
		padding: 0;
		align-items: flex-end;
	}

	.hbn-modal {
		width: 100%;
		max-width: 100%;
		max-height: 92vh;
		border-radius: 20px 20px 0 0;
		transform: translateY(100%);
		transition: transform 220ms cubic-bezier(.2, .8, .2, 1), opacity 160ms ease-out;
	}

	.hbn-modal-backdrop.is-open .hbn-modal {
		transform: translateY(0);
	}

	/* Header becomes a 3-row grid: [overline .... close] / [icon+name] / [badge] */
	.hbn-modal-header {
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"overline close"
			"identity identity"
			"badge badge";
		align-items: center;
		gap: 12px;
		padding: 18px 20px;
	}

	.hbn-modal-header__overline {
		display: block;
		grid-area: overline;
		font-family: var(--hbn-font-label);
		font-weight: var(--hbn-font-label-weight);
		font-size: 10.5px;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: rgba(255, 255, 255, 0.7);
	}

	.hbn-modal-header__identity {
		grid-area: identity;
	}

	.hbn-modal-header__icon {
		width: 38px;
		height: 38px;
		border-radius: 8px;
	}

	.hbn-modal-header__title {
		font-size: 25px;
	}

	.hbn-modal-header__subtitle {
		display: none;
	}

	.hbn-detail-status-badge {
		grid-area: badge;
		justify-self: start;
		padding: 6px 11px;
		font-size: 10.5px;
	}

	.hbn-state-map button.hbn-modal-close,
	.hbn-state-map button.hbn-modal-close:hover,
	.hbn-state-map button.hbn-modal-close:focus,
	.hbn-state-map button.hbn-modal-close:active {
		grid-area: close;
		width: 44px;
		height: 44px;
		font-size: 20px;
	}

	.hbn-modal-metrics {
		grid-template-columns: 1fr 1fr;
	}

	.hbn-modal-metric {
		padding: 14px 16px;
	}

	.hbn-modal-metric__label {
		font-size: 9.5px;
	}

	.hbn-modal-metric__value {
		font-size: 20px;
	}

	.hbn-modal-body {
		grid-template-columns: 1fr;
	}

	.hbn-modal-body__col {
		padding: 18px 20px;
		gap: 18px;
		border-right: none;
	}

	.hbn-modal-body__block + .hbn-modal-body__block {
		padding-top: 18px;
	}

	.hbn-modal-body__text {
		font-size: 14px;
		line-height: 1.55;
	}

	.hbn-modal-footer {
		position: sticky;
		bottom: 0;
		padding: 14px 20px;
		justify-content: stretch;
	}

	.hbn-modal-footer__disclaimer {
		display: none;
	}

	.hbn-detail-learn-more {
		flex: 1 1 auto;
		justify-content: center;
		padding: 14px;
		font-size: 15px;
		min-height: 48px;
	}
}