/*
 * HealThyRam free tools — every colour, radius, shadow and motion value comes from ht-tokens.css (design system
 * v2.x); tints and tinted shadows are mixed from tokens with color-mix(). px type only (the theme root is 10 px).
 * Phone first (390 px reference); no fixed width above 390 px. Motion ≤ --duration-entrance, off under
 * prefers-reduced-motion. Mockups of record: copy sheet §9b / §11 (v29).
 */

/* ------------------------------------------------------------ local scale */
.htrt,
.htrt-body {
	--htrt-text-2: color-mix(in srgb, var(--ht-ink) 82%, var(--ht-white));
	--htrt-hover: color-mix(in srgb, var(--ht-green-soft) 45%, var(--ht-white));
	--htrt-shadow-deep: 0 4px 14px color-mix(in srgb, var(--ht-green-dark) 22%, transparent);
	--htrt-shadow-lift: 0 6px 18px color-mix(in srgb, var(--ht-green-dark) 14%, transparent);
	--htrt-shadow-soft: 0 1px 4px color-mix(in srgb, var(--ht-green-dark) 10%, transparent);
	--htrt-scrim: color-mix(in srgb, var(--ht-ink) 50%, transparent);
	--htrt-on-deep: var(--ht-green-soft);
	--htrt-d-xl: 36px;
	--htrt-d-l: 34px;
	--htrt-d-m: 30px;
	--htrt-d-s: 22px;
	--htrt-d-xs: 20px;
	--htrt-card-title: 18px;
	--htrt-num: 56px;
	--htrt-ease: var(--ease-default);
	--htrt-col: 560px;
}

/* Our own documents only (Breathe page, embed, admin preview). A theme-wrapped page (htrt-body--site, 0.2.0) keeps
 * the theme's body untouched: header, fonts and background stay the site's. */
body.htrt-body--doc {
	margin: 0;
	background: var(--surface-page);
	color: var(--text-body);
	font-family: var(--font-body);
	-webkit-text-size-adjust: 100%;
}
body.htrt-body--doc.htrt-sherbet {
	background: linear-gradient(180deg, var(--ht-orange-soft) 0%, var(--surface-page) 55%, var(--ht-green-soft) 100%) fixed;
	transition: background-color .8s ease;
}
.htrt-lock,
.htrt-lock body { overflow: hidden; }

.htrt,
.htrt *,
.htrt *::before,
.htrt *::after { box-sizing: border-box; }
.htrt {
	font-family: var(--font-body);
	font-size: var(--type-body);
	line-height: 1.5;
	color: var(--text-body);
	text-align: left;
}
.htrt a { color: var(--ht-green-dark); }
.htrt a:hover { color: var(--ht-ink); }
.htrt :focus-visible {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: var(--focus-ring-offset);
}
.htrt button { font: inherit; letter-spacing: normal; text-transform: none; }
.htrt [hidden] { display: none !important; }
.htrt-sr,
.htrt-hp,
.htrt-offscreen {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
.htrt-ico { flex-shrink: 0; }

/* ------------------------------------------------------------ page frame */
.htrt-page,
.htrt-hub {
	display: block;
	width: 100%;
	max-width: var(--htrt-col);
	margin: 0 auto;
}
.htrt--page,
.htrt--preview {
	display: flex;
	flex-direction: column;
}
/* our own document (Breathe, preview): the box fills the window as in 0.1.x */
.htrt-page--doc > .htrt--page,
.htrt-page--doc > .htrt--preview {
	min-height: 100vh;
	min-height: 100svh;
}
.htrt--hub { display: block; }

/* the theme-wrapped page (0.2.0): our column inside the theme's content area, one box, no bar of our own */
.htrt-site { float: none; width: 100%; }
main.htrt-page--site { padding: 0 0 var(--space-6); }
.htrt--site { background: var(--surface-page); border-radius: var(--radius-card); }

/* The top row inside the box (0.2.0): site page = back · progress · count while answering; Breathe page, embed and
 * preview = our logo + the timer/progress slot. Never sticky (the site header is the only pinned bar). */
.htrt-top {
	min-height: 52px;
	padding: var(--space-1) var(--space-5);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-1);
}
.htrt-top--nav { padding: var(--space-1) var(--space-3) 0 var(--space-1); }
.htrt-top--brand { border-bottom: 1px solid var(--border-default); }
.htrt-top__logo { display: inline-flex; align-items: center; min-height: var(--target-min); }
/* Every img rule here is >= 0,2,1: the Martfury theme's later `img:not(.lazy){height:auto}` (0,1,1) won at 0,1,1. */
.htrt-top .htrt-top__logo img { height: 30px; width: auto; max-height: 30px; max-width: none; display: block; }
.htrt-top__end {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--type-tooltip);
	color: var(--text-muted);
	font-variant-numeric: tabular-nums;
}
.htrt-top__count {
	font-size: var(--type-tooltip);
	color: var(--text-muted);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.htrt-top--nav .htrt-top__count { width: var(--target-min); text-align: right; }
.htrt-progress--mini { flex: 0 0 64px; }
.htrt-cardbar {
	display: block;
	height: 3px;
	margin: calc(var(--space-2) * -1) var(--space-5) 0;
	background: var(--border-default);
	border-radius: var(--radius-track);
	overflow: hidden;
}
.htrt-cardbar[hidden] { display: none; }
.htrt-cardbar .htrt-progress__fill { height: 3px; width: 0; }
.htrt-progress {
	flex: 1;
	height: 4px;
	background: var(--border-default);
	border-radius: var(--radius-track);
	overflow: hidden;
}
.htrt-progress__fill {
	display: block;
	height: 4px;
	background: var(--accent-primary);
	border-radius: var(--radius-track);
	transition: width var(--duration-entrance) var(--htrt-ease);
}
.htrt-iconbtn {
	width: var(--target-min);
	height: var(--target-min);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: var(--radius-control);
	background: transparent;
	color: var(--text-body);
	cursor: pointer;
}
.htrt-iconbtn:hover { background: var(--ht-green-soft); }

.htrt-intro,
.htrt-stage { padding: 0 var(--space-5); }
.htrt--page .htrt-intro,
.htrt--preview .htrt-intro { padding-top: var(--space-8); }
.htrt--page .htrt-stage,
.htrt--preview .htrt-stage {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	padding-top: var(--space-6);
	padding-bottom: var(--space-6);
}
.htrt-intro {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	animation: htrt-rise var(--duration-entrance) var(--htrt-ease) both;
}
.htrt-intro--done {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	padding: 0;
}
.htrt-eyebrow,
.htrt-kicker,
.htrt-pract__eyebrow {
	margin: 0;
	font-size: var(--type-micro);
	font-weight: 600;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--ht-green-dark);
}
.htrt-h1 {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--htrt-d-m);
	line-height: 1.15;
	letter-spacing: -0.4px;
	color: var(--text-body);
}
.htrt-lede {
	margin: 0;
	font-size: var(--type-body);
	line-height: 1.5;
	color: var(--text-muted);
}

/* ------------------------------------------------------------ inline (shortcode / block) and embed card */
.htrt--inline,
.htrt--embed {
	margin: var(--space-2) 0;
	padding: var(--space-5) 0 var(--space-4);
	background: var(--surface-page);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	max-width: var(--htrt-col);
}
.htrt--embed { margin: 0; max-width: none; box-shadow: none; padding-top: 0; overflow: hidden; }
body.htrt-body--embed { background: transparent; padding: 1px; }
.htrt--inline .htrt-stage,
.htrt--embed .htrt-stage { display: flex; flex-direction: column; gap: var(--space-4); }
.htrt-cardhead {
	padding: 0 var(--space-5);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-3);
}
.htrt-count { font-size: var(--type-micro); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.htrt--inline .htrt-q,
.htrt--embed .htrt-q { font-size: var(--htrt-d-xs); }
.htrt--compact { padding: var(--space-4) 0 var(--space-3); gap: var(--space-3); }
.htrt--compact .htrt-opt { min-height: 48px; font-size: 15px; }
.htrt-by {
	margin: 0;
	padding: 0 var(--space-5);
	font-size: 11px;
	color: var(--text-muted);
}

/* ------------------------------------------------------------ questions */
.htrt-q {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--type-h1);
	line-height: 1.25;
	letter-spacing: -0.3px;
	color: var(--text-body);
}
.htrt-q:focus { outline: none; }
.htrt-opts { display: flex; flex-direction: column; gap: 10px; }
.htrt-opt {
	position: relative;
	min-height: 52px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	padding: var(--space-3) 18px;
	font-size: var(--type-body);
	line-height: 1.35;
	background: var(--surface-card);
	color: var(--text-body);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-card);
	cursor: pointer;
	transition: transform var(--duration-fast) ease, border-color var(--duration-fast) ease, background-color var(--duration-fast) ease;
	-webkit-tap-highlight-color: transparent;
}
.htrt-opt:hover { border-color: var(--ht-green-bright); background: var(--htrt-hover); }
.htrt-opt:active { transform: scale(.98); }
.htrt-opt__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.htrt-opt:focus-within { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); }
.htrt-opt .htrt-opt__check { color: var(--ht-green-dark); opacity: 0; transform: scale(.6); transition: opacity var(--duration-fast) ease, transform var(--duration-fast) ease; }
.htrt-opt.is-on {
	font-weight: 500;
	background: var(--ht-green-soft);
	border: 1.5px solid var(--accent-primary);
}
.htrt-opt.is-on .htrt-opt__check { opacity: 1; transform: none; }
/* answer icons (0.2.0): who, concern, woman/man, activity, family history only */
.htrt-opt__text { flex: 1; min-width: 0; }
.htrt-opt .htrt-opt__icon { flex-shrink: 0; color: var(--ht-green-dark); }
/* "Who is this for?": four short tiles, two across (D1); the tick sits in the corner */
.htrt-opts--tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.htrt-opts--tiles .htrt-opt {
	min-height: 88px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-2);
	text-align: center;
}
.htrt-opts--tiles .htrt-opt__text { flex: 0 0 auto; }
.htrt-opts--tiles .htrt-opt .htrt-opt__check { position: absolute; top: var(--space-2); right: var(--space-2); }

.htrt-help { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); }
.htrt-tip { font-size: var(--type-small); line-height: 1.5; }
.htrt-tip summary {
	min-height: var(--target-min);
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--ht-green-dark);
	font-weight: 500;
	cursor: pointer;
	list-style: none;
}
.htrt-tip summary::-webkit-details-marker { display: none; }
.htrt-tip p { margin: var(--space-1) 0 0 26px; color: var(--htrt-text-2); }
.htrt-tip--center { align-self: center; text-align: center; }
.htrt-tip--center p { margin-left: 0; }

.htrt-qfoot {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-1);
}
.htrt-lockline {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--type-micro);
	color: var(--text-muted);
}
.htrt-banner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-3);
	padding: var(--space-4);
	background: var(--ht-orange-soft);
	border-radius: var(--radius-card);
	font-size: var(--type-small);
}
.htrt-banner p { margin: 0; }
.htrt-backlink { align-self: flex-start; display: inline-flex; align-items: center; gap: var(--space-1); }

/* numbers: stepper + slider + tap-to-type */
.htrt-numq { display: flex; flex-direction: column; gap: var(--space-4); }
.htrt-num {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-5);
	padding: 28px var(--space-4);
	background: var(--surface-card);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-card);
}
.htrt-units { display: flex; padding: 3px; background: var(--ht-green-soft); border-radius: var(--radius-card); }
.htrt-unit {
	min-width: 64px;
	min-height: var(--target-min);
	padding: 0 var(--space-3);
	border: 0;
	border-radius: var(--radius-sm);
	font-size: var(--type-small);
	font-weight: 600;
	background: transparent;
	color: var(--ht-green-dark);
	cursor: pointer;
	transition: background-color var(--duration-medium) ease;
}
.htrt-unit[aria-pressed="true"] { background: var(--ht-green-dark); color: var(--text-on-brand); }
.htrt-num__row { display: flex; align-items: center; justify-content: center; gap: var(--space-4); width: 100%; }
.htrt-step {
	flex-shrink: 0;
	width: 52px;
	height: 52px;
	padding: 0;
	border-radius: var(--radius-card);
	border: 1px solid var(--accent-primary);
	background: var(--surface-card);
	color: var(--ht-green-dark);
	font-size: var(--type-article-h2);
	line-height: 1;
	cursor: pointer;
	transition: transform .12s ease, background-color var(--duration-fast) ease;
}
.htrt-step:hover { background: var(--ht-green-soft); }
.htrt-step:active { transform: scale(.94); }
.htrt-num__value { display: flex; align-items: baseline; justify-content: center; gap: 6px; min-width: 0; flex: 1; }
.htrt-num__input {
	width: 3.6ch;
	field-sizing: content;
	min-width: 0;
	padding: 0;
	border: 0;
	border-bottom: 2px dashed transparent;
	background: transparent;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--htrt-num);
	line-height: 1.1;
	letter-spacing: -1px;
	text-align: center;
	color: var(--text-body);
	-moz-appearance: textfield;
}
.htrt-num__input--sm { width: 1.6ch; }
@supports (field-sizing: content) {
	.htrt-num__input { width: auto; min-width: 1.2ch; }
}
.htrt-num__input:focus { outline: none; border-bottom-color: var(--ht-green-bright); }
.htrt-num__unit { font-size: var(--type-body); color: var(--text-muted); }
.htrt-range { width: 100%; min-height: var(--target-min); margin: 0; accent-color: var(--accent-primary); cursor: pointer; }
.htrt-num__hint { font-size: var(--type-micro); color: var(--text-muted); }
.htrt-err { margin: 0; min-height: 0; font-size: var(--type-small); color: var(--ht-error-dark); }
.htrt-err:empty { display: none; }

/* ------------------------------------------------------------ buttons */
.htrt-btn {
	min-height: var(--target-min);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 0 var(--space-5);
	font-size: var(--type-small);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	border: 0;
	border-radius: var(--radius-control);
	cursor: pointer;
	transition: background-color var(--duration-medium) ease, box-shadow var(--duration-medium) ease, transform var(--duration-fast) ease;
}
.htrt-btn:active { transform: scale(.98); }
.htrt a.htrt-btn--primary,
.htrt-btn--primary {
	min-height: 52px;
	font-size: var(--type-body);
	background: var(--accent-primary);
	color: var(--text-on-brand);
	box-shadow: var(--shadow-btn);
}
.htrt a.htrt-btn--primary:hover,
.htrt-btn--primary:hover { background: var(--accent-primary-hover); color: var(--text-on-brand); box-shadow: var(--shadow-btn-hover); }
.htrt-btn--primary[disabled] {
	background: var(--border-default);
	color: var(--text-muted);
	box-shadow: none;
	cursor: not-allowed;
	transform: none;
}
.htrt a.htrt-btn--outline,
.htrt-btn--outline {
	min-height: 52px;
	font-size: 15px;
	background: transparent;
	color: var(--ht-green-dark);
	border: 1.5px solid var(--accent-primary);
}
.htrt a.htrt-btn--outline:hover,
.htrt-btn--outline:hover { background: var(--ht-green-soft); color: var(--ht-green-dark); }
.htrt-btn--sm { min-height: var(--target-min); font-size: var(--type-small); }
.htrt-btn--block { width: 100%; }
.htrt a.htrt-btn--onbrand,
.htrt-btn--onbrand { flex: 1; background: var(--ht-white); color: var(--ht-green-dark); }
.htrt a.htrt-btn--onbrand:hover,
.htrt-btn--onbrand:hover { background: var(--ht-green-soft); color: var(--ht-green-dark); }
.htrt a.htrt-btn--onbrand-outline,
.htrt-btn--onbrand-outline { flex: 1; background: transparent; color: var(--text-on-brand); border: 1px solid var(--htrt-on-deep); }
.htrt a.htrt-btn--onbrand-outline:hover,
.htrt-btn--onbrand-outline:hover { background: color-mix(in srgb, var(--ht-white) 12%, transparent); color: var(--text-on-brand); }
.htrt-link {
	min-height: var(--target-min);
	padding: 0 var(--space-2);
	border: 0;
	background: transparent;
	color: var(--ht-green-dark);
	font-size: var(--type-small);
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
}
.htrt a.htrt-link { display: inline-flex; align-items: center; }
.htrt-link:hover { color: var(--text-body); text-decoration: underline; }
.htrt-center { align-self: center; text-align: center; justify-content: center; }
p.htrt-center { margin: 0; display: flex; justify-content: center; }
.htrt-ghost {
	min-height: var(--target-min);
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: 0 10px;
	border: 0;
	border-radius: var(--radius-control);
	background: transparent;
	color: var(--ht-green-dark);
	font-size: var(--type-small);
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--duration-medium) ease;
}
.htrt-ghost:hover { background: var(--ht-green-soft); }

/* ------------------------------------------------------------ results */
.htrt-result__top { display: flex; flex-direction: column; gap: 10px; }
.htrt-result__top--center { align-items: center; text-align: center; gap: var(--space-1); }
.htrt-result__h {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--htrt-d-m);
	line-height: 1.15;
	letter-spacing: -0.4px;
	color: var(--text-body);
}
.htrt-result__h:focus { outline: none; }
.htrt-result__h--xl { font-size: var(--htrt-d-xl); line-height: 1.1; letter-spacing: -0.6px; }
.htrt-result__h--band { margin-top: var(--space-1); transition: opacity .3s ease, transform .3s ease; }
.htrt-result__h--band.is-waiting { opacity: 0; transform: translateY(6px); }
.htrt-result__why { margin: 0; font-size: var(--type-body); line-height: 1.5; color: var(--htrt-text-2); max-width: 34em; }
.htrt-result__top--center .htrt-result__why { margin-top: 6px; max-width: 310px; }
.htrt--inline .htrt-result__h--xl,
.htrt--embed .htrt-result__h--xl { font-size: var(--htrt-d-m); }

.htrt-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.htrt-chip {
	font-size: var(--type-tooltip);
	padding: 6px var(--space-3);
	border-radius: var(--radius-sm);
	background: var(--surface-card);
	border: 1px solid var(--border-default);
}
.htrt-chip--more { color: var(--text-muted); }

.htrt-book {
	background: var(--surface-card);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	padding: var(--space-5);
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.htrt-book__lead { margin: 0; font-size: 15px; line-height: 1.5; }
.htrt-book__top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.htrt-book__id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.htrt-book__name { font-family: var(--font-display); font-weight: 600; font-size: var(--htrt-d-xs); }
.htrt-book__sub { margin: 0; font-size: var(--type-tooltip); color: var(--text-muted); }
.htrt-book__price { font-family: var(--font-display); font-size: var(--htrt-d-s); white-space: nowrap; }
.htrt-book__alt { align-self: center; }
/* Add to Wish List (FMP-5): the quiet secondary next to Book — outline, heart, a little shorter than the primary. */
.htrt a.htrt-book__wish { min-height: var(--target-min); font-size: var(--type-small); }
.htrt a.htrt-book__wish .htrt-ico { color: var(--accent-primary); }

.htrt-pract {
	padding: 22px var(--space-5);
	background: var(--ht-green-dark);
	color: var(--text-on-brand);
	border-radius: var(--radius-card);
	box-shadow: var(--htrt-shadow-deep);
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.htrt-pract .htrt-pract__eyebrow { color: var(--htrt-on-deep); }
.htrt-pract__big { font-family: var(--font-display); font-weight: 600; font-size: var(--htrt-d-xs); line-height: 1.3; }
.htrt-pract__line { margin: 0; font-size: var(--type-small); line-height: 1.5; color: var(--htrt-on-deep); }
.htrt-pract__btns { display: flex; gap: 10px; margin-top: 6px; }
.htrt-pract--row { padding: var(--space-5); }
.htrt-pract__row { display: flex; align-items: center; gap: 14px; }
/* the call-fee credit line (approved wording, editable in Wording) */
.htrt-pract__credit { margin: 0; font-size: var(--type-micro); line-height: 1.5; color: var(--htrt-on-deep); }
/* compact result (inline, 0.2.0): the practitioner is a quiet line, Book stays the one primary button */
.htrt-pract-quiet { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); text-align: center; font-size: var(--type-small); }
.htrt-pract-quiet .htrt-pract__credit { color: var(--text-muted); }
.htrt-pract-quiet a.htrt-link { min-height: var(--target-min); padding: 0 var(--space-1); }
.htrt-pract__text { flex: 1; display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.htrt-pract__title { font-family: var(--font-display); font-weight: 600; font-size: 17px; }
.htrt-pract--row .htrt-pract__line { font-size: var(--type-tooltip); }
.htrt .htrt-pract--row a.htrt-btn--onbrand { flex: 0 0 auto; padding: 0 18px; }

.htrt-actions { display: flex; justify-content: center; gap: 28px; }
/* "Change an answer · Start again" under every result (0.2.0) */
.htrt-again { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0 var(--space-1); }
.htrt-again__dot { color: var(--text-muted); }
.htrt a.htrt-workplace { font-weight: 500; }
.htrt a.htrt-book__wishlink { align-self: center; gap: var(--space-1); font-size: var(--type-small); }
.htrt a.htrt-book__wishlink .htrt-ico { color: var(--accent-primary); }
.htrt-micro {
	margin: 0;
	font-size: var(--type-micro);
	line-height: 1.5;
	color: var(--text-muted);
	text-align: center;
}
.htrt--page .htrt-stage > .htrt-micro:last-child,
.htrt--page .htrt-res__tail > .htrt-micro:last-child { margin-top: auto; }
/* Result column wrappers (0.1.1): layout-neutral below the desktop fit breakpoint, so the phone result is unchanged. */
.htrt .htrt-res,
.htrt .htrt-res__main,
.htrt .htrt-res__side,
.htrt .htrt-res__tail { display: contents; }
.htrt-micro--left { text-align: left; }

/* T2 gauge */
.htrt-gauge { display: block; max-width: 100%; height: auto; }
.htrt-gauge__track { stroke: var(--border-default); }
.htrt-gauge__arc--low { stroke: var(--accent-primary); }
.htrt-gauge__arc--moderate { stroke: var(--accent-secondary); }
.htrt-gauge__arc--high { stroke: var(--ht-error); }
.htrt-gauge__knob { fill: var(--ht-white); }
.htrt-gauge__knob--low { stroke: var(--accent-primary); }
.htrt-gauge__knob--moderate { stroke: var(--accent-secondary); }
.htrt-gauge__knob--high { stroke: var(--ht-error); }
.htrt-gauge__num { font-family: var(--font-display); font-weight: 600; font-size: 40px; fill: var(--text-body); }
.htrt-gauge__of { font-family: var(--font-body); font-size: 11px; fill: var(--text-muted); }

/* T3 rows */
.htrt-rows { display: flex; flex-direction: column; gap: 10px; }
.htrt-row {
	padding: var(--space-4) 18px;
	background: var(--surface-card);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-card);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}
.htrt-row__top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.htrt-row__label { font-size: var(--type-small); color: var(--text-muted); }
.htrt-row__val { display: flex; align-items: baseline; gap: 10px; }
.htrt-row__val strong { font-family: var(--font-display); font-size: var(--type-article-h2); }
.htrt-row__unit { font-family: var(--font-body); font-size: var(--type-small); font-weight: 400; color: var(--text-muted); }
.htrt-row__pub { font-size: var(--type-micro); color: var(--text-muted); }
.htrt-tag {
	font-size: var(--type-micro);
	font-weight: 600;
	padding: 3px 10px;
	border-radius: var(--radius-sm);
	white-space: nowrap;
}
.htrt-tag--in { background: var(--ht-green-soft); color: var(--ht-green-dark); }
.htrt-tag--above,
.htrt-tag--below { background: var(--ht-orange-soft); color: var(--ht-orange-text); }
.htrt-scale {
	position: relative;
	height: 6px;
	display: grid;
	grid-template-columns: 18.5fr 4.5fr 2fr 10fr;
	gap: 2px;
}
.htrt-scale__seg { border-radius: var(--radius-track); }
.htrt-scale__seg--under { background: var(--border-default); }
.htrt-scale__seg--in { background: var(--ht-green-bright); }
.htrt-scale__seg--over { background: color-mix(in srgb, var(--ht-orange) 55%, var(--ht-white)); }
.htrt-scale__seg--obese { background: var(--ht-orange); }
.htrt-scale__dot {
	position: absolute;
	top: -4px;
	width: 14px;
	height: 14px;
	margin-left: -7px;
	border-radius: 50%;
	background: var(--ht-white);
	border: 3px solid var(--ht-ink);
	animation: htrt-slide var(--duration-entrance) var(--htrt-ease) .2s both;
}
.htrt a.htrt-nextrow {
	min-height: 48px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 var(--space-4);
	font-size: 15px;
	font-weight: 500;
	color: var(--text-body);
	text-decoration: none;
	background: var(--surface-card);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-card);
	transition: background-color var(--duration-medium) ease;
}
.htrt a.htrt-nextrow:hover { background: var(--ht-green-soft); }
.htrt-nextrow .htrt-ico { color: var(--ht-green-dark); }

/* ------------------------------------------------------------ send sheet */
.htrt-overlay { position: fixed; inset: 0; z-index: 99990; }
.htrt-scrim {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	background: var(--htrt-scrim);
	animation: htrt-fade .3s ease both;
}
.htrt-sheet {
	width: 100%;
	max-width: var(--htrt-col);
	max-height: 92vh;
	overflow-y: auto;
	background: var(--surface-card);
	border-radius: 16px 16px 0 0;
	padding: var(--space-3) var(--space-5) 28px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	animation: htrt-sheet var(--duration-entrance) var(--htrt-ease) .05s both;
}
.htrt-lock .iti--container { z-index: 99999; }
.htrt-sheet__grip { align-self: center; width: 40px; height: 4px; border-radius: 2px; background: var(--border-default); }
.htrt-sheet__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.htrt-sheet__title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--htrt-d-s); }
.htrt-sheet__form { display: flex; flex-direction: column; gap: var(--space-4); }
.htrt-sheet__band { margin: 0; font-size: var(--type-small); color: var(--text-muted); }
.htrt-field { display: flex; flex-direction: column; gap: 6px; }
.htrt-field__label { font-size: var(--type-tooltip); font-weight: 500; color: var(--text-muted); }
.htrt-field__row {
	display: flex;
	height: 52px;
	border: 1px solid var(--border-default);
	border-radius: var(--radius-control);
	overflow: hidden;
}
.htrt-field__row--iti { height: auto; border: 0; overflow: visible; }
.htrt-field__row--iti .iti { width: 100%; }
.htrt-field__code {
	flex: 0 0 auto;
	padding: 0 var(--space-2) 0 14px;
	font: inherit;
	font-size: var(--type-body);
	color: var(--text-body);
	background: var(--surface-page);
	border: 0;
	border-right: 1px solid var(--border-default);
}
.htrt-field__input {
	flex: 1;
	width: 100%;
	min-width: 0;
	min-height: 52px;
	padding: 0 14px;
	font: inherit;
	font-size: 17px;
	color: var(--text-body);
	background: var(--surface-card);
	border: 0;
}
.htrt-field__row--iti .htrt-field__input { border: 1px solid var(--border-default); border-radius: var(--radius-control); }
.htrt-field__input:focus { outline: var(--focus-ring-width) solid var(--ht-green-bright); outline-offset: -2px; }
.htrt-check { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--type-small); line-height: 1.45; cursor: pointer; }
.htrt-check__input { width: 22px; height: 22px; margin: 0; flex-shrink: 0; accent-color: var(--accent-primary); }
.htrt-sheet__foot { margin: 0; font-size: 11px; color: var(--text-muted); text-align: center; }
.htrt-sent {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px;
	background: var(--ht-green-soft);
	border-radius: var(--radius-card);
}
.htrt-sent .htrt-ico { color: var(--ht-green-dark); }
.htrt-sent > span { display: flex; flex-direction: column; gap: 2px; font-size: var(--type-small); color: var(--htrt-text-2); }
.htrt-sent strong { font-size: var(--type-body); color: var(--text-body); }

/* ------------------------------------------------------------ hub */
.htrt-hub { padding: 40px var(--space-5) var(--space-8); display: flex; flex-direction: column; gap: 28px; }
.htrt-hub__head { display: flex; flex-direction: column; gap: var(--space-3); }
.htrt-hub__h1 {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--htrt-d-l);
	line-height: 1.15;
	letter-spacing: -0.5px;
	color: var(--text-body);
}
.htrt-hub__nav { display: flex; flex-direction: column; gap: var(--space-3); }
.htrt a.htrt-card {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-5);
	background: var(--surface-card);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-card);
	text-decoration: none;
	color: var(--text-body);
	transition: transform var(--duration-medium) ease, box-shadow var(--duration-medium) ease, border-color var(--duration-medium) ease;
}
.htrt a.htrt-card:hover { transform: translateY(-2px); box-shadow: var(--htrt-shadow-lift); border-color: var(--ht-green-bright); color: var(--text-body); }
.htrt a.htrt-card:active { transform: scale(.99); }
.htrt-card__icon {
	width: var(--target-min);
	height: var(--target-min);
	flex-shrink: 0;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.htrt-card__icon--green { background: var(--ht-green-soft); color: var(--ht-green-dark); }
.htrt-card__icon--orange { background: var(--ht-orange-soft); color: var(--ht-orange-text); }
.htrt-card__text { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.htrt-card__title { font-family: var(--font-display); font-weight: 600; font-size: var(--htrt-card-title); }
.htrt-card__line { font-size: var(--type-small); color: var(--text-muted); }
.htrt-card__chev { color: var(--ht-green-dark); flex-shrink: 0; }
.htrt-know {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: var(--space-6) var(--space-5);
	background: var(--ht-green-soft);
	border-radius: var(--radius-card);
}
.htrt-know__title { font-family: var(--font-display); font-weight: 600; font-size: var(--htrt-card-title); }
.htrt-know__row { display: flex; gap: 10px; }
.htrt-know__row .htrt-btn { flex: 1; min-height: 46px; font-size: var(--type-small); }
.htrt-know__row .htrt-btn--outline { background: var(--surface-card); border-width: 1px; }

/* ------------------------------------------------------------ about (explainer + FAQ, collapsed) */
.htrt-about {
	padding: var(--space-2) var(--space-5) var(--space-12);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	font-family: var(--font-body);
	color: var(--text-body);
}
.htrt-acc { border-top: 1px solid var(--border-default); }
.htrt-acc summary {
	min-height: 52px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: var(--type-body);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}
.htrt-acc summary::-webkit-details-marker { display: none; }
.htrt-acc summary::after { content: "+"; font-size: var(--htrt-d-xs); color: var(--ht-green-dark); }
.htrt-acc[open] summary::after { content: "−"; }
.htrt-acc__body { padding-bottom: var(--space-4); font-size: 15px; line-height: 1.6; color: var(--htrt-text-2); }
.htrt-acc__h { margin: var(--space-4) 0 var(--space-1); font-family: var(--font-display); font-size: var(--type-h3); font-weight: 600; color: var(--text-body); }
.htrt-acc__body p { margin: 0 0 var(--space-2); }
.htrt-credit { font-size: var(--type-tooltip); color: var(--text-muted); }
.htrt-crumbs ol { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1); font-size: var(--type-micro); color: var(--text-muted); }
.htrt-crumbs li + li::before { content: "›"; margin-right: var(--space-1); }
.htrt-crumbs a { color: var(--text-muted); }
.htrt-fine { margin: var(--space-2) 0 0; font-size: var(--type-micro); line-height: 1.6; color: var(--text-muted); }
.htrt-noscript { padding: 0 var(--space-5); font-size: var(--type-small); }
.htrt-preview-flag {
	margin: 0;
	padding: var(--space-2) var(--space-4);
	font: 600 var(--type-micro) var(--font-body);
	text-align: center;
	background: var(--ht-orange-soft);
	color: var(--ht-orange-text);
}

/* ------------------------------------------------------------ Breathe */
.htrt--breathe.htrt--page .htrt-top,
.htrt--breathe.htrt--preview .htrt-top { border-bottom: 0; }
/* Breathe page (D4): a small way home, under the box */
.htrt-home { margin: 0; padding: var(--space-2) var(--space-5) 0; text-align: center; font-size: var(--type-micro); }
.htrt-home a { color: var(--text-muted); text-decoration: none; }
.htrt-home a:hover { color: var(--ht-green-dark); text-decoration: underline; }
.htrt-breathe {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	text-align: center;
	flex-grow: 1;
	width: 100%;
}
.htrt-face-wrap { width: 100%; max-width: 300px; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; }
.htrt-face { width: 100%; height: auto; overflow: visible; }
.htrt-face__glow { fill: var(--ht-orange); opacity: .1; }
.htrt-face__skin { fill: var(--ht-white); stroke: var(--border-default); }
.htrt-face__line { stroke: var(--ht-ink); }
.htrt-face__ring { stroke: var(--ht-green-bright); }
.htrt-face__ring--draw { animation: htrt-draw 1.1s cubic-bezier(.4, 0, .2, 1) .2s both; }
.htrt-breathe__run { width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); flex-grow: 1; }
.htrt-cue {
	margin: 0;
	min-height: 40px;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 32px;
	letter-spacing: -0.3px;
	color: var(--text-body);
}
.htrt-cue-sub { margin: 0; font-size: var(--type-small); color: var(--text-muted); }
.htrt-breathe__go { margin-top: auto; }
.htrt-breathe__done { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.htrt-breathe__head { display: flex; flex-direction: column; gap: 6px; }
.htrt-breathe__title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--htrt-d-s); line-height: 1.2; }
.htrt--page .htrt-breathe__title { font-size: 28px; }
.htrt-breathe__title:focus { outline: none; }
.htrt-breathe__count { font-size: var(--type-micro); font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ht-green-dark); }
.htrt-tiles { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.htrt-tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.htrt-tile {
	min-height: 64px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-1);
	padding: var(--space-2) var(--space-1);
	font-size: var(--type-micro);
	font-weight: 500;
	color: var(--text-body);
	background: var(--surface-card);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-card);
	cursor: pointer;
	transition: background-color var(--duration-medium) ease;
}
.htrt-tile:hover { background: var(--ht-green-soft); }
.htrt-tile svg { color: var(--ht-green-dark); }
.htrt-qori {
	width: 100%;
	padding: var(--space-4);
	background: var(--surface-card);
	border-radius: var(--radius-card);
	box-shadow: var(--htrt-shadow-soft);
	display: flex;
	align-items: center;
	gap: 14px;
	text-align: left;
}
.htrt-qori img.htrt-qori__img { width: 64px; height: 64px; max-height: 64px; max-width: none; border-radius: var(--radius-card); flex-shrink: 0; object-fit: cover; }
.htrt-qori__text { flex: 1; display: flex; flex-direction: column; gap: var(--space-1); }
.htrt-qori__title { font-family: var(--font-display); font-weight: 600; font-size: var(--type-body); line-height: 1.3; }
.htrt a.htrt-qori__link { font-size: var(--type-small); font-weight: 600; text-decoration: none; }
.htrt--inline.htrt-sherbet-on,
.htrt--embed.htrt-sherbet-on,
body:not(.htrt-body--doc) .htrt--page.htrt-sherbet-on { background: linear-gradient(180deg, var(--ht-orange-soft) 0%, var(--surface-page) 55%, var(--ht-green-soft) 100%); }

/* ------------------------------------------------------------ desktop fit (0.1.1)
 * Only on a full page (.htrt--page, the hub's .htrt--hub) at least 900 px wide AND 640 px tall: the working screen
 * (bar, intro, the question or result stage, Breathe's session and end screen) fits in one viewport. Spacing shrinks
 * with the height (token floor, vh middle, token ceiling); type, tap targets, the gauge and the face never shrink.
 * Below either limit nothing here applies and the page scrolls exactly as 0.1.0. Embeds and [htr_tool] cards
 * (.htrt--embed, .htrt--inline) are never matched. */
.htrt .htrt-abouthint { display: none; }
@media (min-width: 900px) and (min-height: 640px) {
	.htrt-page,
	.htrt--hub {
		--htrt-col-desk: 960px;
		--htrt-col-q: 640px;
		--htrt-fit-gap: clamp(var(--space-3), 2.2vh, var(--space-6));
		--htrt-fit-pad: clamp(var(--space-4), 3vh, var(--space-8));
	}

	/* tool pages: a wider frame; the bar spans it, questions keep one column in the middle */
	main.htrt-page { max-width: var(--htrt-col-desk); }
	.htrt-page > .htrt-about { max-width: var(--htrt-col); margin: 0 auto; }
	.htrt-page--doc .htrt--page { min-height: 100dvh; }
	/* D5 (0.2.0): on a theme-wrapped page, once started, the box fills the window below the pinned site header
	 * (--htrt-head is measured at run time by the start-focus scroll); the landing view may scroll. */
	main.htrt-page--site { padding-top: var(--space-4); }
	main.htrt-page--site .htrt--site:not([data-htr-tool-state="landing"]) {
		min-height: calc(100vh - var(--htrt-head, 0px) - var(--space-4));
		min-height: calc(100dvh - var(--htrt-head, 0px) - var(--space-4));
	}
	main.htrt-page--site .htrt--site .htrt-top--nav { width: 100%; max-width: var(--htrt-col-q); margin: 0 auto; }
	.htrt-page .htrt--page .htrt-intro,
	.htrt-page .htrt--page .htrt-stage {
		width: 100%;
		max-width: var(--htrt-col-q);
		margin-left: auto;
		margin-right: auto;
	}
	.htrt-page .htrt--page .htrt-intro { padding-top: var(--htrt-fit-pad); gap: var(--space-1); }
	.htrt-page .htrt--page .htrt-stage {
		gap: var(--htrt-fit-gap);
		padding-top: var(--htrt-fit-gap);
		padding-bottom: var(--htrt-fit-gap);
	}
	/* the question sits in the middle of the spare height (the footer keeps its margin-top: auto) */
	.htrt-page .htrt--page .htrt-stage > :first-child { margin-top: auto; }
	/* landing (intro shown): the intro and the first question stay together near the top third */
	.htrt-page .htrt--page .htrt-intro:not(.htrt-intro--done) { padding-top: clamp(var(--space-4), 8vh, calc(var(--space-12) * 2)); }
	.htrt-page .htrt--page .htrt-intro:not(.htrt-intro--done) + .htrt-stage > :first-child { margin-top: 0; }
	.htrt-page .htrt--page .htrt-opts { gap: var(--space-2); }
	.htrt-page .htrt--page .htrt-opts:has(> .htrt-opt:nth-child(5)) {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.htrt-page .htrt--page .htrt-qfoot { flex-direction: row; justify-content: center; gap: var(--space-4); }

	/* results: two columns, Book in the first screen */
	.htrt-page .htrt--page[data-htr-tool-state="result"] .htrt-stage,
	.htrt-page .htrt--page[data-htr-tool-state="shared-result"] .htrt-stage { max-width: var(--htrt-col-desk); }
	.htrt-page .htrt--page .htrt-res__tail > .htrt-actions { justify-content: flex-start; }
	.htrt-page .htrt--page .htrt-res {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		column-gap: var(--space-12);
		row-gap: var(--htrt-fit-gap);
		align-items: start;
		margin-bottom: auto;
	}
	.htrt-page .htrt--page .htrt-res__main,
	.htrt-page .htrt--page .htrt-res__side,
	.htrt-page .htrt--page .htrt-res__tail {
		display: flex;
		flex-direction: column;
		gap: var(--htrt-fit-gap);
		min-width: 0;
	}
	/* 0.2.0: the tail (links, share row, Change an answer) is a list of 44 px targets; a tighter rhythm keeps the box
	 * within the window under the site header (D5) */
	.htrt-page .htrt--page .htrt-res__tail { gap: var(--space-2); }
	.htrt-page .htrt--page .htrt-res__main { grid-column: 1; grid-row: 1; }
	.htrt-page .htrt--page .htrt-res__side { grid-column: 2; grid-row: 1 / span 2; }
	.htrt-page .htrt--page .htrt-res__tail { grid-column: 1; grid-row: 2; }
	.htrt-page .htrt--page .htrt-res__tail > .htrt-micro:last-child { margin-top: 0; text-align: left; }
	.htrt-page .htrt--page .htrt-book,
	.htrt-page .htrt--page .htrt-pract { gap: var(--space-3); }

	/* Breathe: the face and the cue keep their phone sizes; only the spacing breathes with the height */
	.htrt-page .htrt--breathe .htrt-breathe,
	.htrt-page .htrt--breathe .htrt-breathe__done { gap: var(--htrt-fit-gap); }
	/* the end screen: the face on the left, what to do next on the right */
	.htrt-page .htrt--breathe[data-htr-tool-state="result"] .htrt-stage { max-width: var(--htrt-col-desk); }
	.htrt-page .htrt--breathe[data-htr-tool-state="result"] .htrt-breathe {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: var(--space-12);
		align-items: center;
		align-content: center;
	}
	.htrt-page .htrt--breathe[data-htr-tool-state="result"] .htrt-face-wrap { grid-column: 1; grid-row: 1; justify-self: center; }
	.htrt-page .htrt--breathe[data-htr-tool-state="result"] .htrt-breathe__done { grid-column: 2; grid-row: 1; }
	.htrt-page .htrt--breathe[data-htr-tool-state="result"] .htrt-breathe > .htrt-micro { grid-column: 1 / -1; }

	/* the quiet pointer to the explainer under the fold */
	.htrt-page .htrt--page .htrt-abouthint {
		display: inline-flex;
		align-items: center;
		gap: var(--space-1);
		align-self: center;
		min-height: var(--target-min);
		padding: 0 var(--space-3);
		font: 500 var(--type-micro) var(--font-body);
		color: var(--text-muted);
		background: transparent;
		border: 0;
		border-radius: var(--radius-control);
		cursor: pointer;
	}
	.htrt-page .htrt--page .htrt-abouthint:hover { color: var(--ht-green-dark); }

	/* hub: a wider column, the four tools side by side, the know-box under them */
	.htrt--hub .htrt-hub {
		max-width: var(--htrt-col-desk);
		padding: var(--htrt-fit-pad) var(--space-5);
		gap: var(--htrt-fit-gap);
	}
	.htrt--hub .htrt-hub__nav {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-3);
	}
	.htrt--hub .htrt-know {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-6);
		padding: var(--space-5) var(--space-6);
	}
	.htrt--hub .htrt-know__row { flex: 0 0 auto; }
	.htrt--hub .htrt-know__row .htrt-btn { flex: 0 0 auto; padding-left: var(--space-6); padding-right: var(--space-6); }
}
@media (min-width: 1280px) and (min-height: 640px) {
	.htrt--hub .htrt-hub__nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.htrt--hub a.htrt-card { flex-direction: column; align-items: flex-start; }
	.htrt--hub .htrt-card__chev { align-self: flex-end; margin-top: auto; }
}

/* ------------------------------------------------------------ motion */
@keyframes htrt-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes htrt-pop { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes htrt-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes htrt-sheet { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes htrt-slide { from { left: 0; } }
@keyframes htrt-draw { from { stroke-dashoffset: 597; } to { stroke-dashoffset: 0; } }
.htrt-rise { animation: htrt-rise var(--duration-entrance) var(--htrt-ease) both; }
.htrt-pop { animation: htrt-pop .3s var(--htrt-ease) both; }
.htrt-fadein { animation: htrt-fade .6s ease both; }
.htrt-d1 { animation-delay: .04s; }
.htrt-d2 { animation-delay: .08s; }
.htrt-d3 { animation-delay: .12s; }
.htrt-d4 { animation-delay: .16s; }
.htrt-d5 { animation-delay: .2s; }
.htrt-d6 { animation-delay: .24s; }
.htrt-d7 { animation-delay: .28s; }
.htrt-d8 { animation-delay: .32s; }
.htrt-m1 { animation-delay: .2s; }
.htrt-m2 { animation-delay: .25s; }
.htrt-m3 { animation-delay: .3s; }
.htrt-m4 { animation-delay: .35s; }
.htrt-m5 { animation-delay: .4s; }
.htrt-m6 { animation-delay: .45s; }
.htrt-m7 { animation-delay: .5s; }
.htrt-m8 { animation-delay: .55s; }
.htrt-db1 { animation-delay: 1.1s; }
.htrt-db2 { animation-delay: 1.3s; }
.htrt-db3 { animation-delay: 1.5s; }

@media (min-width: 600px) {
	.htrt--page .htrt-intro { padding-top: 48px; }
	.htrt--site { border: 1px solid var(--border-default); box-shadow: var(--htrt-shadow-soft); }
	main.htrt-page--site { padding-top: var(--space-6); }
}

@media (prefers-reduced-motion: reduce) {
	.htrt *,
	.htrt *::before,
	.htrt *::after,
	.htrt,
	body.htrt-body--doc {
		animation: none !important;
		transition: none !important;
	}
}