/*
 * Health Tip Live — main stylesheet.
 *
 * Contents
 *   1.  Tokens and colour schemes
 *   2.  Reset and base elements
 *   3.  Layout primitives
 *   4.  Buttons, pills and small parts
 *   5.  Header, top bar, drawer, search
 *   6.  Cards and grids
 *   7.  Homepage blocks
 *   8.  Single post, TOC, share, author box
 *   9.  Editorial blocks (callouts, FAQ, steps…)
 *   10. Calculators
 *   11. Guest post service
 *   12. Newsletter and forms
 *   13. Sidebar and widgets
 *   14. Footer, WhatsApp launcher, back-to-top
 *   15. Comments
 *   16. Responsive
 *   17. Print and reduced motion
 */

/* ============================================================ 1. tokens */

:root {
	--htl-brand: #0E8F63;
	--htl-brand-dark: #0A6A4B;
	--htl-brand-light: #17A873;
	--htl-mint: #8FE3B8;

	--htl-bg: #FFFFFF;
	--htl-bg-soft: #F4FAF7;
	--htl-bg-mint: #E9F7EF;
	--htl-surface: #FFFFFF;
	--htl-surface-2: #F7FBF9;

	--htl-ink: #10231C;
	--htl-ink-2: #35564B;
	--htl-muted: #6A8579;
	--htl-line: #DDEAE3;
	--htl-line-strong: #C4DCD0;

	--htl-good: #0E8F63;
	--htl-warn: #C2701A;
	--htl-bad: #C0392B;
	--htl-info: #1D6FB8;

	--htl-shadow-sm: 0 1px 2px rgba(16, 35, 28, .05), 0 2px 8px rgba(16, 35, 28, .04);
	--htl-shadow: 0 2px 6px rgba(16, 35, 28, .06), 0 12px 28px rgba(16, 35, 28, .07);
	--htl-shadow-lg: 0 8px 20px rgba(16, 35, 28, .10), 0 24px 56px rgba(16, 35, 28, .12);

	--htl-r-sm: 8px;
	--htl-r: 14px;
	--htl-r-lg: 20px;

	--htl-wrap: 1240px;
	--htl-gap: 24px;
	--htl-header-h: 68px;

	--htl-font-display: 'Outfit', 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif;
	--htl-font-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--htl-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--tone: #0E8F63;

	color-scheme: light;
}

:root[data-scheme="dark"] {
	--htl-brand: #2DBF8A;
	--htl-brand-dark: #1E9C6F;
	--htl-brand-light: #56D6A5;
	--htl-mint: #6ED3A4;

	--htl-bg: #0B1F1A;
	--htl-bg-soft: #0F2A23;
	--htl-bg-mint: #13332A;
	--htl-surface: #132E26;
	--htl-surface-2: #17362C;

	--htl-ink: #E6F3EC;
	--htl-ink-2: #C0D8CC;
	--htl-muted: #8FACA0;
	--htl-line: #23483B;
	--htl-line-strong: #2E5D4C;

	--htl-good: #3ECF97;
	--htl-warn: #E39B4B;
	--htl-bad: #E56A5A;
	--htl-info: #5BA7E8;

	--htl-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
	--htl-shadow: 0 2px 8px rgba(0, 0, 0, .35), 0 14px 32px rgba(0, 0, 0, .3);
	--htl-shadow-lg: 0 10px 28px rgba(0, 0, 0, .45);

	color-scheme: dark;
}

/* ============================================== 2. reset and base */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--htl-header-h) + 20px);
}

body {
	margin: 0;
	background: var(--htl-bg);
	color: var(--htl-ink);
	font-family: var(--htl-font-body);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--htl-font-display);
	font-weight: 700;
	line-height: 1.18;
	letter-spacing: -0.015em;
	margin: 0 0 .5em;
	color: var(--htl-ink);
	text-wrap: balance;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a {
	color: var(--htl-brand-dark);
	text-decoration-color: color-mix(in srgb, var(--htl-brand) 40%, transparent);
	text-underline-offset: 3px;
}

:root[data-scheme="dark"] a { color: var(--htl-brand-light); }

a:hover { color: var(--htl-brand); }

img, svg, video, iframe { max-width: 100%; }
img, video { height: auto; }

/*
 * [hidden] has to win over any display value a component sets, or an element
 * such as the off-canvas drawer (display: flex, inset: 0) keeps covering the
 * page and swallowing every click while it is supposedly closed.
 */
[hidden] { display: none !important; }

figure { margin: 0; }

hr {
	border: 0;
	border-top: 1px solid var(--htl-line);
	margin: 2.5rem 0;
}

:focus-visible {
	outline: 3px solid var(--htl-brand);
	outline-offset: 2px;
	border-radius: 4px;
}

.htl-screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

.htl-skip {
	position: absolute;
	left: -9999px;
	top: 8px;
	z-index: 200;
	background: var(--htl-brand);
	color: #fff;
	padding: 10px 18px;
	border-radius: var(--htl-r-sm);
	font-weight: 600;
}

.htl-skip:focus {
	left: 12px;
	color: #fff;
}

.htl-i { flex: 0 0 auto; }

/* ================================================= 3. layout */

.htl-wrap {
	width: 100%;
	max-width: var(--htl-wrap);
	margin-inline: auto;
	padding-inline: 20px;
}

.htl-main { display: block; }

.htl-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 330px;
	gap: 48px;
	align-items: start;
	padding-block: 8px 56px;
}

.htl-layout.is-narrow {
	grid-template-columns: minmax(0, 820px);
	justify-content: center;
}

.htl-content { min-width: 0; }

.htl-page-head {
	padding-block: 32px 24px;
}

.htl-page-title {
	font-size: clamp(30px, 4.6vw, 46px);
	margin-bottom: .35em;
}

.htl-page-sub {
	color: var(--htl-muted);
	font-size: 1.06rem;
	max-width: 62ch;
	margin: 0;
}

.htl-archive-head {
	display: flex;
	gap: 18px;
	align-items: flex-start;
}

.htl-archive-icon {
	display: grid;
	place-items: center;
	width: 60px;
	height: 60px;
	flex: 0 0 auto;
	border-radius: 18px;
	background: color-mix(in srgb, var(--tone) 12%, var(--htl-bg));
	color: var(--tone);
	border: 1px solid color-mix(in srgb, var(--tone) 22%, transparent);
}

.htl-archive-count {
	margin: .5em 0 0;
	font-family: var(--htl-font-mono);
	font-size: .82rem;
	color: var(--htl-muted);
	letter-spacing: .04em;
}

.htl-archive-calcs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px dashed var(--htl-line);
}

.htl-archive-calcs-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: .84rem;
	font-weight: 600;
	color: var(--htl-muted);
	margin-right: 4px;
}

/* ================================== 4. buttons, pills, breadcrumbs */

.htl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 11px 20px;
	border-radius: 999px;
	border: 1px solid transparent;
	font-family: var(--htl-font-body);
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	min-width: 0;
	max-width: 100%;
	transition: transform .14s ease, background-color .14s ease, border-color .14s ease, box-shadow .14s ease;
}

.htl-btn:hover { transform: translateY(-1px); }
.htl-btn:active { transform: translateY(0); }

.htl-btn-primary {
	background: var(--htl-brand);
	color: #fff;
	box-shadow: 0 2px 10px color-mix(in srgb, var(--htl-brand) 30%, transparent);
}

.htl-btn-primary:hover {
	background: var(--htl-brand-dark);
	color: #fff;
}

:root[data-scheme="dark"] .htl-btn-primary { color: #06231A; }
:root[data-scheme="dark"] .htl-btn-primary:hover { color: #06231A; }

.htl-btn-outline {
	background: transparent;
	border-color: var(--htl-line-strong);
	color: var(--htl-ink);
}

.htl-btn-outline:hover {
	border-color: var(--htl-brand);
	color: var(--htl-brand);
	background: var(--htl-bg-mint);
}

.htl-btn-quiet {
	background: var(--htl-surface-2);
	color: var(--htl-ink-2);
	border-color: var(--htl-line);
}

.htl-btn-quiet:hover { background: var(--htl-bg-mint); }

.htl-btn-wa {
	background: #25D366;
	color: #06301A;
	font-weight: 700;
}

.htl-btn-wa:hover {
	background: #1FBA58;
	color: #06301A;
}

.htl-icon-btn {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	flex: 0 0 auto;
	border-radius: 12px;
	border: 1px solid var(--htl-line);
	background: var(--htl-surface);
	color: var(--htl-ink-2);
	cursor: pointer;
	transition: background-color .14s ease, color .14s ease, border-color .14s ease;
}

.htl-icon-btn:hover {
	background: var(--htl-bg-mint);
	color: var(--htl-brand);
	border-color: color-mix(in srgb, var(--htl-brand) 35%, transparent);
}

.htl-pill {
	--pill: var(--tone);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--pill) 12%, var(--htl-bg));
	color: color-mix(in srgb, var(--pill) 88%, var(--htl-ink));
	border: 1px solid color-mix(in srgb, var(--pill) 24%, transparent);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .01em;
	text-decoration: none;
	line-height: 1.35;
	transition: background-color .14s ease;
}

.htl-pill:hover {
	background: color-mix(in srgb, var(--pill) 20%, var(--htl-bg));
	color: color-mix(in srgb, var(--pill) 92%, var(--htl-ink));
}

:root[data-scheme="dark"] .htl-pill {
	color: color-mix(in srgb, var(--pill) 55%, #E6F3EC);
}

.htl-chip-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.htl-breadcrumbs {
	margin-bottom: 18px;
	font-size: .82rem;
}

.htl-breadcrumbs ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	color: var(--htl-muted);
}

.htl-breadcrumbs li {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-width: 0;
}

.htl-breadcrumbs a {
	color: var(--htl-muted);
	text-decoration: none;
}

.htl-breadcrumbs a:hover {
	color: var(--htl-brand);
	text-decoration: underline;
}

.htl-breadcrumbs [aria-current] {
	color: var(--htl-ink-2);
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 32ch;
}

.htl-crumb-sep { color: var(--htl-line-strong); display: inline-flex; }

.htl-section-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 6px 18px;
	margin-bottom: 26px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--htl-line);
}

.htl-section-head-main {
	display: flex;
	align-items: center;
	gap: 11px;
	grid-column: 1;
	min-width: 0;
}

.htl-section-icon {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 11px;
	background: color-mix(in srgb, var(--tone) 13%, var(--htl-bg));
	color: var(--tone);
	flex: 0 0 auto;
}

.htl-section-title {
	font-size: clamp(21px, 2.4vw, 27px);
	margin: 0;
}

.htl-section-sub {
	grid-column: 1;
	grid-row: 2;
	margin: 0;
	color: var(--htl-muted);
	font-size: .92rem;
}

.htl-section-link {
	grid-column: 2;
	grid-row: 1 / span 2;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: .88rem;
	font-weight: 600;
	color: var(--tone);
	text-decoration: none;
	white-space: nowrap;
}

.htl-section-link:hover { text-decoration: underline; color: var(--tone); }

.htl-pagination ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 0;
	margin: 40px 0 0;
	justify-content: center;
}

.htl-pagination a,
.htl-pagination span {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	min-width: 42px;
	justify-content: center;
	padding: 9px 14px;
	border-radius: 10px;
	border: 1px solid var(--htl-line);
	background: var(--htl-surface);
	color: var(--htl-ink-2);
	text-decoration: none;
	font-size: .9rem;
	font-weight: 600;
}

.htl-pagination a:hover {
	border-color: var(--htl-brand);
	color: var(--htl-brand);
}

.htl-pagination .current {
	background: var(--htl-brand);
	border-color: var(--htl-brand);
	color: #fff;
}

:root[data-scheme="dark"] .htl-pagination .current { color: #06231A; }

/* ============================================ 5. header and nav */

.htl-topbar {
	background: var(--htl-bg-mint);
	border-bottom: 1px solid var(--htl-line);
	font-size: .82rem;
}

.htl-topbar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 38px;
	padding-block: 6px;
}

.htl-topbar-text {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	color: var(--htl-ink-2);
	min-width: 0;
}

.htl-topbar-text span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.htl-topbar-text .htl-i { color: var(--htl-brand); }

.htl-topbar-right {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: 0 0 auto;
}

.htl-topbar-menu {
	list-style: none;
	display: flex;
	gap: 14px;
	margin: 0;
	padding: 0;
}

.htl-topbar-menu a {
	color: var(--htl-ink-2);
	text-decoration: none;
	font-weight: 500;
}

.htl-topbar-menu a:hover { color: var(--htl-brand); }

.htl-topbar-wa {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--htl-ink-2);
	text-decoration: none;
	font-weight: 600;
	white-space: nowrap;
}

.htl-topbar-wa:hover { color: #128C4A; }
.htl-topbar-wa .htl-i { color: #25D366; }

.htl-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: color-mix(in srgb, var(--htl-bg) 92%, transparent);
	backdrop-filter: saturate(150%) blur(10px);
	border-bottom: 1px solid var(--htl-line);
	transition: box-shadow .18s ease;
}

.htl-header.is-stuck { box-shadow: var(--htl-shadow-sm); }

/*
 * The masthead runs wider than the article column, which is what buys the nav
 * enough room for six items beside the brand and the action group.
 */
.htl-header-inner {
	display: flex;
	align-items: center;
	gap: 18px;
	min-height: var(--htl-header-h);
	max-width: 1440px;
}

.htl-search-drawer .htl-wrap { max-width: 1440px; }

/* The brand never shrinks — an ellipsised site name looks broken. */
.htl-brand { flex: 0 0 auto; min-width: 0; }

.htl-brand-link,
.htl-brand .custom-logo-link {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	text-decoration: none;
	color: inherit;
	min-width: 0;
}

.htl-brand-mark { display: block; flex: 0 0 auto; }
.htl-brand-mark svg { display: block; width: 40px; height: 40px; }

.htl-brand-words {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.htl-brand-name {
	font-family: var(--htl-font-display);
	font-size: 1.22rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: var(--htl-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.htl-brand-tagline {
	font-family: var(--htl-font-mono);
	font-size: .62rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--htl-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/*
 * The nav sits between a shrinkable brand and a fixed-width action group.
 * Its items are nowrap, so without min-width:0 plus overflow:hidden a long
 * menu overlaps the buttons instead of being clipped. Below 1200px the nav is
 * replaced by the drawer, which carries every item.
 */
.htl-nav {
	margin-inline: auto;
	min-width: 0;
	overflow: hidden;
}

.htl-menu {
	list-style: none;
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 2px;
	margin: 0;
	padding: 0;
}

.htl-menu > li { position: relative; }

.htl-menu a {
	display: block;
	padding: 9px 10px;
	border-radius: 10px;
	font-size: .9rem;
	font-weight: 600;
	color: var(--htl-ink-2);
	text-decoration: none;
	white-space: nowrap;
}

.htl-menu a:hover,
.htl-menu .current-menu-item > a,
.htl-menu .current-menu-parent > a {
	background: var(--htl-bg-mint);
	color: var(--htl-brand-dark);
}

:root[data-scheme="dark"] .htl-menu a:hover,
:root[data-scheme="dark"] .htl-menu .current-menu-item > a { color: var(--htl-brand-light); }

.htl-menu .sub-menu {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	min-width: 220px;
	list-style: none;
	margin: 0;
	padding: 8px;
	background: var(--htl-surface);
	border: 1px solid var(--htl-line);
	border-radius: var(--htl-r);
	box-shadow: var(--htl-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity .16s ease, transform .16s ease, visibility .16s;
	z-index: 10;
}

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

.htl-header-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	margin-left: auto;
}

.htl-header-calc {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 15px;
	border-radius: 999px;
	background: var(--htl-brand);
	color: #fff;
	font-size: .88rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.htl-header-calc:hover { background: var(--htl-brand-dark); color: #fff; }
:root[data-scheme="dark"] .htl-header-calc { color: #06231A; }
:root[data-scheme="dark"] .htl-header-calc:hover { color: #06231A; }

.htl-drawer-toggle { display: grid; }

.htl-scheme-toggle .htl-scheme-moon { display: none; }
:root[data-scheme="dark"] .htl-scheme-toggle .htl-scheme-sun { display: none; }
:root[data-scheme="dark"] .htl-scheme-toggle .htl-scheme-moon { display: block; }

.htl-search-drawer {
	border-top: 1px solid var(--htl-line);
	background: var(--htl-bg-soft);
	padding-block: 18px;
}

.htl-search-suggest {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin: 12px 0 0;
	font-size: .85rem;
	color: var(--htl-muted);
}

.htl-search-suggest a {
	color: var(--htl-brand-dark);
	text-decoration: none;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--htl-bg-mint);
	font-weight: 600;
}

.htl-searchform-inner {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 6px 6px 14px;
	border-radius: 999px;
	border: 1px solid var(--htl-line-strong);
	background: var(--htl-surface);
}

.htl-searchform-inner:focus-within {
	border-color: var(--htl-brand);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--htl-brand) 18%, transparent);
}

.htl-searchform-inner > .htl-i { color: var(--htl-muted); }

.htl-search-input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: .96rem;
	color: var(--htl-ink);
	padding: 8px 0;
}

.htl-search-input:focus { outline: none; }

.htl-search-submit {
	flex: 0 0 auto;
	border: 0;
	border-radius: 999px;
	padding: 9px 18px;
	background: var(--htl-brand);
	color: #fff;
	font: inherit;
	font-size: .88rem;
	font-weight: 600;
	cursor: pointer;
}

.htl-search-submit:hover { background: var(--htl-brand-dark); }
:root[data-scheme="dark"] .htl-search-submit { color: #06231A; }

/* drawer */

.htl-drawer {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: rgba(8, 24, 19, .5);
	display: flex;
	justify-content: flex-end;
}

.htl-drawer-panel {
	width: min(400px, 90vw);
	height: 100%;
	background: var(--htl-bg);
	border-left: 1px solid var(--htl-line);
	display: flex;
	flex-direction: column;
	animation: htl-slide-in .22s ease;
	overflow: hidden;
}

@keyframes htl-slide-in {
	from { transform: translateX(24px); opacity: .4; }
	to { transform: translateX(0); opacity: 1; }
}

.htl-drawer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 20px;
	border-bottom: 1px solid var(--htl-line);
	flex: 0 0 auto;
}

.htl-drawer-title {
	font-family: var(--htl-font-display);
	font-weight: 700;
	font-size: 1.05rem;
}

.htl-drawer-body {
	padding: 20px;
	overflow-y: auto;
	flex: 1 1 auto;
	-webkit-overflow-scrolling: touch;
}

.htl-drawer-menu,
.htl-drawer-menu .sub-menu,
.htl-drawer-calcs {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
}

.htl-drawer-menu a,
.htl-drawer-calcs a {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 11px 12px;
	border-radius: 10px;
	color: var(--htl-ink);
	text-decoration: none;
	font-weight: 600;
	font-size: .98rem;
}

.htl-drawer-menu a:hover,
.htl-drawer-calcs a:hover { background: var(--htl-bg-mint); color: var(--htl-brand-dark); }

.htl-drawer-menu .sub-menu {
	margin: 0 0 0 14px;
	border-left: 2px solid var(--htl-line);
}

.htl-drawer-menu .sub-menu a { font-weight: 500; font-size: .92rem; }

.htl-drawer-sub {
	margin: 26px 0 6px;
	font-size: .74rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--htl-muted);
	font-family: var(--htl-font-mono);
	font-weight: 500;
}

.htl-drawer-calcs .htl-i { color: var(--htl-brand); }

.htl-drawer-wa { margin-top: 24px; width: 100%; }

body.htl-locked { overflow: hidden; }

/* progress bar */

.htl-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 100;
	background: transparent;
	pointer-events: none;
}

.htl-progress-bar {
	display: block;
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, var(--htl-brand), var(--htl-mint));
	transition: width .1s linear;
}

/* ============================================ 6. cards and grids */

.htl-grid {
	display: grid;
	gap: var(--htl-gap);
}

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

.htl-card {
	--tone: var(--htl-brand);
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--htl-surface);
	border: 1px solid var(--htl-line);
	border-radius: var(--htl-r);
	overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.htl-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--htl-shadow);
	border-color: color-mix(in srgb, var(--tone) 30%, var(--htl-line));
}

.htl-card-media {
	display: block;
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--htl-bg-mint);
}

.htl-card-media img,
.htl-thumb-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .35s ease;
}

.htl-card:hover .htl-card-media img { transform: scale(1.04); }

.htl-thumb-fallback {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	background:
		radial-gradient(120% 90% at 20% 10%, color-mix(in srgb, var(--tone) 22%, transparent), transparent 60%),
		linear-gradient(140deg, color-mix(in srgb, var(--tone) 14%, var(--htl-bg-soft)), var(--htl-bg-soft));
	color: color-mix(in srgb, var(--tone) 70%, var(--htl-muted));
}

.htl-card-body {
	padding: 16px 18px 18px;
	display: flex;
	flex-direction: column;
	gap: 9px;
	flex: 1 1 auto;
	min-width: 0;
}

.htl-card-body .htl-pill { align-self: flex-start; }

.htl-card-title {
	font-size: 1.08rem;
	line-height: 1.3;
	margin: 0;
}

.htl-card-title a {
	color: var(--htl-ink);
	text-decoration: none;
	background-image: linear-gradient(var(--tone), var(--tone));
	background-size: 0 2px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size .25s ease;
}

.htl-card-title a:hover { background-size: 100% 2px; color: var(--htl-ink); }

.htl-card-excerpt {
	margin: 0;
	color: var(--htl-muted);
	font-size: .92rem;
	line-height: 1.55;
}

.htl-card-index {
	font-family: var(--htl-font-mono);
	font-size: .78rem;
	font-weight: 600;
	color: var(--tone);
	letter-spacing: .05em;
}

.htl-entry-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px;
	font-size: .8rem;
	color: var(--htl-muted);
	margin-top: auto;
	padding-top: 4px;
}

.htl-entry-meta a { color: inherit; text-decoration: none; font-weight: 600; }
.htl-entry-meta a:hover { color: var(--htl-brand); text-decoration: underline; }

.htl-meta-author { display: inline-flex; align-items: center; gap: 7px; }
.htl-dot { color: var(--htl-line-strong); }

/* wide card */

.htl-card-wide {
	flex-direction: row;
	align-items: stretch;
}

.htl-card-wide .htl-card-media {
	flex: 0 0 42%;
	aspect-ratio: auto;
	min-height: 210px;
}

.htl-card-wide .htl-card-body {
	padding: 22px 26px;
	justify-content: center;
	gap: 11px;
}

.htl-card-wide .htl-card-title { font-size: clamp(1.2rem, 2.4vw, 1.6rem); }
.htl-card-wide .htl-card-excerpt { font-size: .97rem; }

/* overlay card */

.htl-card-overlay {
	position: relative;
	border: 0;
	min-height: 420px;
	background: var(--htl-bg-mint);
}

.htl-card-overlay .htl-card-media {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
}

.htl-card-overlay::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(6, 22, 17, .05) 18%, rgba(6, 22, 17, .58) 52%, rgba(6, 22, 17, .93) 100%);
	pointer-events: none;
}

.htl-card-overlay .htl-card-body {
	position: relative;
	z-index: 2;
	margin-top: auto;
	padding: 26px 28px 28px;
	color: #fff;
}

.htl-card-overlay .htl-card-title { font-size: clamp(1.4rem, 3vw, 2rem); }
.htl-card-overlay .htl-card-title a { color: #fff; }
.htl-card-overlay .htl-card-title a:hover { color: #fff; }
.htl-card-overlay .htl-card-excerpt { color: rgba(255, 255, 255, .82); }
.htl-card-overlay .htl-entry-meta { color: rgba(255, 255, 255, .78); }
.htl-card-overlay .htl-pill {
	background: rgba(255, 255, 255, .16);
	color: #fff;
	border-color: rgba(255, 255, 255, .28);
	backdrop-filter: blur(4px);
}
.htl-card-overlay .htl-avatar { border-color: rgba(255, 255, 255, .5); }

/* portrait card */

.htl-card-portrait .htl-card-media { aspect-ratio: 3 / 4; }

/* mini card */

.htl-card-mini {
	flex-direction: row;
	align-items: center;
	gap: 0;
}

.htl-card-mini .htl-card-media {
	flex: 0 0 96px;
	aspect-ratio: 1 / 1;
}

.htl-card-mini .htl-card-body { padding: 12px 14px; gap: 6px; }
.htl-card-mini .htl-card-title { font-size: .95rem; }
.htl-card-mini .htl-pill { font-size: .7rem; padding: 3px 9px; }

/* list card */

.htl-card-list { border: 0; border-bottom: 1px solid var(--htl-line); border-radius: 0; }
.htl-card-list:hover { transform: none; box-shadow: none; }

/* ============================================ 7. homepage blocks */

.htl-hero { padding-block: 34px 10px; }

.htl-hero-inner {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}

.htl-hero-lead { display: grid; gap: 18px; min-width: 0; }

.htl-hero-strip {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}

.htl-hero-strip .htl-card-mini { flex-direction: column; align-items: stretch; }
.htl-hero-strip .htl-card-mini .htl-card-media { flex: none; width: 100%; aspect-ratio: 16 / 10; }

.htl-hero-aside { display: grid; gap: 16px; min-width: 0; }

.htl-quickcheck {
	background: linear-gradient(165deg, var(--htl-bg-mint), var(--htl-surface) 65%);
	border: 1px solid color-mix(in srgb, var(--htl-brand) 22%, var(--htl-line));
	border-radius: var(--htl-r-lg);
	padding: 22px;
}

.htl-quickcheck-kicker {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 8px;
	font-family: var(--htl-font-mono);
	font-size: .72rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--htl-brand-dark);
	font-weight: 600;
}

:root[data-scheme="dark"] .htl-quickcheck-kicker { color: var(--htl-brand-light); }

.htl-quickcheck-title { font-size: 1.32rem; margin-bottom: .4em; }

.htl-quickcheck-text {
	font-size: .9rem;
	color: var(--htl-muted);
	margin-bottom: 1.1em;
}

.htl-hero-links { display: grid; gap: 8px; }

.htl-hero-link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 15px;
	border-radius: 12px;
	border: 1px solid var(--htl-line);
	background: var(--htl-surface);
	color: var(--htl-ink);
	text-decoration: none;
	font-weight: 600;
	font-size: .92rem;
	transition: border-color .15s ease, background-color .15s ease;
}

.htl-hero-link span { flex: 1 1 auto; min-width: 0; }
.htl-hero-link > .htl-i:first-child { color: var(--tone); }
.htl-hero-link > .htl-i:last-child { color: var(--htl-muted); }

.htl-hero-link:hover {
	border-color: color-mix(in srgb, var(--tone) 45%, transparent);
	background: color-mix(in srgb, var(--tone) 8%, var(--htl-surface));
	color: var(--htl-ink);
}

/* calculator band */

.htl-calcband {
	padding-block: 50px;
	background: var(--htl-bg-soft);
	border-block: 1px solid var(--htl-line);
	margin-top: 40px;
}

.htl-calcband-groups {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}

.htl-calcband-group {
	background: var(--htl-surface);
	border: 1px solid var(--htl-line);
	border-top: 3px solid var(--tone);
	border-radius: var(--htl-r);
	padding: 20px;
	min-width: 0;
}

.htl-calcband-title {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 1.02rem;
	margin-bottom: .45em;
}

.htl-calcband-icon {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 10px;
	background: color-mix(in srgb, var(--tone) 13%, var(--htl-surface));
	color: var(--tone);
	flex: 0 0 auto;
}

.htl-calcband-desc {
	font-size: .85rem;
	color: var(--htl-muted);
	margin-bottom: 14px;
}

.htl-calcband-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 2px;
}

.htl-calcband-list a {
	display: block;
	padding: 6px 9px;
	margin-left: -9px;
	border-radius: 8px;
	font-size: .89rem;
	font-weight: 500;
	color: var(--htl-ink-2);
	text-decoration: none;
}

.htl-calcband-list a:hover {
	background: color-mix(in srgb, var(--tone) 10%, transparent);
	color: var(--tone);
}

/* trending */

.htl-trending { padding-block: 54px; }

.htl-trending-inner {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: 42px;
	align-items: start;
}

.htl-trending-main { min-width: 0; }

.htl-trending-plate {
	background: var(--htl-bg-mint);
	border: 1px solid var(--htl-line);
	border-radius: var(--htl-r-lg);
	padding: 22px;
	min-width: 0;
}

.htl-plate-title {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 1.05rem;
	margin-bottom: 1em;
	padding-bottom: .7em;
	border-bottom: 1px solid var(--htl-line-strong);
}

.htl-plate-title .htl-i { color: var(--htl-brand); }

.htl-plate-list,
.htl-mini-list,
.htl-leadlist-rest {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 14px;
}

.htl-plate-list li,
.htl-mini-list li,
.htl-leadlist-rest li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	min-width: 0;
}

.htl-plate-num,
.htl-mini-num,
.htl-leadlist-num {
	font-family: var(--htl-font-mono);
	font-size: .86rem;
	font-weight: 600;
	color: var(--tone, var(--htl-brand));
	flex: 0 0 auto;
	line-height: 1.5;
	opacity: .85;
}

.htl-plate-list a,
.htl-mini-list a,
.htl-leadlist-rest a {
	display: block;
	color: var(--htl-ink);
	text-decoration: none;
	font-weight: 600;
	font-size: .96rem;
	line-height: 1.38;
}

.htl-plate-list a:hover,
.htl-mini-list a:hover,
.htl-leadlist-rest a:hover { color: var(--htl-brand); }

.htl-plate-meta,
.htl-leadlist-meta {
	display: block;
	font-size: .76rem;
	color: var(--htl-muted);
	margin-top: 3px;
}

/* section blocks */

.htl-sectionblock { padding-block: 46px; }
.htl-sectionblock:nth-of-type(even) { background: var(--htl-bg-soft); }

.htl-leadlist {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	gap: 36px;
	align-items: start;
}

.htl-leadlist-rest { gap: 18px; }

/* numbers band */

.htl-numbers {
	background: linear-gradient(160deg, #0B3B2B, #07211A);
	color: #DCEDE4;
	padding-block: 56px;
}

.htl-numbers-head { max-width: 62ch; margin-bottom: 30px; }
.htl-numbers-title { color: #fff; font-size: clamp(22px, 3vw, 30px); }
.htl-numbers-sub { color: rgba(220, 237, 228, .72); margin: 0; }

.htl-numbers-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.htl-number a {
	display: grid;
	gap: 5px;
	height: 100%;
	padding: 20px;
	border-radius: var(--htl-r);
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(143, 227, 184, .18);
	text-decoration: none;
	color: inherit;
	transition: background-color .16s ease, border-color .16s ease, transform .16s ease;
}

.htl-number a:hover {
	background: rgba(255, 255, 255, .09);
	border-color: rgba(143, 227, 184, .42);
	transform: translateY(-2px);
	color: inherit;
}

.htl-number-value {
	font-family: var(--htl-font-mono);
	font-size: 1.55rem;
	font-weight: 600;
	color: #8FE3B8;
	letter-spacing: -0.01em;
}

.htl-number-label { font-weight: 600; color: #fff; font-size: .98rem; }
.htl-number-note { font-size: .82rem; color: rgba(220, 237, 228, .62); }

.htl-number-go {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	font-size: .78rem;
	font-weight: 600;
	color: #8FE3B8;
	letter-spacing: .02em;
}

.htl-numbers-foot {
	display: flex;
	gap: 9px;
	align-items: flex-start;
	margin: 26px 0 0;
	font-size: .85rem;
	color: rgba(220, 237, 228, .62);
	max-width: 80ch;
}

.htl-numbers-foot .htl-i { margin-top: 3px; flex: 0 0 auto; }

/* guest post band */

.htl-gpband {
	padding-block: 54px;
	background: var(--htl-bg-mint);
	border-block: 1px solid var(--htl-line);
}

.htl-gpband-inner {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
	gap: 44px;
	align-items: center;
}

.htl-gpband-kicker,
.htl-gp-kicker {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 10px;
	font-family: var(--htl-font-mono);
	font-size: .72rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--htl-brand-dark);
}

:root[data-scheme="dark"] .htl-gpband-kicker,
:root[data-scheme="dark"] .htl-gp-kicker { color: var(--htl-brand-light); }

.htl-gpband-title { font-size: clamp(24px, 3.4vw, 34px); }
.htl-gpband-text { color: var(--htl-ink-2); max-width: 60ch; }

.htl-gpband-points {
	list-style: none;
	margin: 18px 0 24px;
	padding: 0;
	display: grid;
	gap: 8px;
}

.htl-gpband-points li {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: .94rem;
	color: var(--htl-ink-2);
}

.htl-gpband-points .htl-i { color: var(--htl-brand); margin-top: 4px; }

.htl-gpband-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.htl-gpband-stats,
.htl-gp-stats {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.htl-gpband-stats li,
.htl-gp-stats li {
	background: var(--htl-surface);
	border: 1px solid var(--htl-line);
	border-radius: var(--htl-r);
	padding: 18px;
	text-align: center;
	display: grid;
	gap: 4px;
}

.htl-gpstat-value {
	font-family: var(--htl-font-mono);
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--htl-brand-dark);
	line-height: 1.2;
}

:root[data-scheme="dark"] .htl-gpstat-value { color: var(--htl-brand-light); }

.htl-gpstat-label {
	font-size: .78rem;
	color: var(--htl-muted);
	letter-spacing: .02em;
}

/* latest */

.htl-latest { padding-top: 10px; }
.htl-latest-more { margin-top: 30px; }

/* ================================ 8. single post and article body */

.htl-single-head { padding-block: 30px 20px; max-width: 880px; }
.htl-single-head .htl-pill { margin-bottom: 14px; }

.htl-single-title {
	font-size: clamp(30px, 5vw, 50px);
	line-height: 1.12;
	margin-bottom: .35em;
}

.htl-single-standfirst {
	font-size: 1.16rem;
	color: var(--htl-ink-2);
	line-height: 1.55;
	max-width: 65ch;
	margin-bottom: 1.2em;
}

.htl-single-byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 18px;
	padding-top: 14px;
	border-top: 1px solid var(--htl-line);
}

.htl-single-byline .htl-entry-meta { margin: 0; padding: 0; font-size: .86rem; }

.htl-reviewed {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	font-size: .82rem;
	font-weight: 600;
	color: var(--htl-brand-dark);
	background: var(--htl-bg-mint);
	padding: 5px 12px;
	border-radius: 999px;
}

:root[data-scheme="dark"] .htl-reviewed { color: var(--htl-brand-light); }

.htl-single-media { margin-block: 8px 34px; }

.htl-single-media img {
	width: 100%;
	border-radius: var(--htl-r-lg);
	display: block;
}

.htl-single-media figcaption {
	margin-top: 10px;
	font-size: .84rem;
	color: var(--htl-muted);
	text-align: center;
}

.htl-avatar {
	--size: 40px;
	--hue: 160;
	display: inline-grid;
	place-items: center;
	width: var(--size);
	height: var(--size);
	flex: 0 0 auto;
	border-radius: 50%;
	background: linear-gradient(140deg, hsl(var(--hue) 55% 42%), hsl(calc(var(--hue) + 24) 48% 30%));
	color: #fff;
	font-family: var(--htl-font-display);
	font-weight: 700;
	font-size: calc(var(--size) * .38);
	letter-spacing: .01em;
	border: 2px solid var(--htl-surface);
}

.htl-avatar-img { border-radius: 50%; }

/* entry typography */

.htl-entry {
	font-size: 1.07rem;
	line-height: 1.75;
	color: var(--htl-ink-2);
}

.htl-entry > *:first-child { margin-top: 0; }

.htl-entry h2 {
	font-size: clamp(22px, 3vw, 29px);
	margin-top: 2.1em;
	margin-bottom: .55em;
	scroll-margin-top: calc(var(--htl-header-h) + 24px);
}

.htl-entry h3 {
	font-size: clamp(19px, 2.2vw, 23px);
	margin-top: 1.7em;
	margin-bottom: .5em;
	scroll-margin-top: calc(var(--htl-header-h) + 24px);
}

.htl-entry h4 {
	font-size: 1.08rem;
	margin-top: 1.5em;
	scroll-margin-top: calc(var(--htl-header-h) + 24px);
}

.htl-entry p { margin-bottom: 1.25em; }

.htl-entry ul,
.htl-entry ol { margin: 0 0 1.35em; padding-left: 1.4em; }
.htl-entry li { margin-bottom: .5em; }

.htl-entry blockquote {
	margin: 2em 0;
	padding: 4px 0 4px 22px;
	border-left: 3px solid var(--tone, var(--htl-brand));
	font-size: 1.14rem;
	font-style: italic;
	color: var(--htl-ink);
}

.htl-entry blockquote cite {
	display: block;
	margin-top: .6em;
	font-size: .85rem;
	font-style: normal;
	color: var(--htl-muted);
}

.htl-entry img { border-radius: var(--htl-r); }

.htl-entry figure { margin: 2em 0; }

.htl-entry figcaption {
	margin-top: 9px;
	font-size: .84rem;
	color: var(--htl-muted);
}

.htl-entry code {
	font-family: var(--htl-font-mono);
	font-size: .88em;
	background: var(--htl-bg-mint);
	padding: 2px 6px;
	border-radius: 5px;
}

.htl-entry pre {
	background: var(--htl-surface-2);
	border: 1px solid var(--htl-line);
	border-radius: var(--htl-r);
	padding: 18px;
	overflow-x: auto;
	font-size: .9rem;
}

.htl-entry pre code { background: none; padding: 0; }

.htl-table-wrap {
	overflow-x: auto;
	margin: 1.8em 0;
	border: 1px solid var(--htl-line);
	border-radius: var(--htl-r);
}

.htl-table-wrap table {
	width: 100%;
	border-collapse: collapse;
	font-size: .94rem;
	margin: 0;
}

.htl-table-wrap th,
.htl-table-wrap td {
	padding: 11px 15px;
	text-align: left;
	border-bottom: 1px solid var(--htl-line);
}

.htl-table-wrap thead th {
	background: var(--htl-bg-mint);
	font-family: var(--htl-font-display);
	font-weight: 600;
	color: var(--htl-ink);
}

.htl-table-wrap tbody tr:last-child td,
.htl-table-wrap tbody tr:last-child th { border-bottom: 0; }

.htl-h-anchor { position: relative; }

.htl-h-link {
	margin-left: .35em;
	font-size: .7em;
	color: var(--htl-line-strong);
	text-decoration: none;
	opacity: 0;
	transition: opacity .15s ease;
}

.htl-h-anchor:hover .htl-h-link { opacity: 1; }
.htl-h-link:focus { opacity: 1; }
.htl-h-link:hover { color: var(--htl-brand); }

/* table of contents */

.htl-toc {
	margin: 0 0 2em;
	padding: 20px 22px;
	background: var(--htl-bg-soft);
	border: 1px solid var(--htl-line);
	border-left: 3px solid var(--tone, var(--htl-brand));
	border-radius: var(--htl-r);
}

.htl-toc-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.htl-toc-title {
	font-size: 1rem;
	margin: 0;
	letter-spacing: 0;
}

.htl-toc-toggle {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	border: 0;
	background: none;
	font: inherit;
	font-size: .82rem;
	font-weight: 600;
	color: var(--htl-muted);
	cursor: pointer;
	padding: 4px 6px;
	border-radius: 6px;
}

.htl-toc-toggle:hover { color: var(--htl-brand); }
.htl-toc-toggle .htl-i { transition: transform .2s ease; }
.htl-toc-toggle[aria-expanded="false"] .htl-i { transform: rotate(-90deg); }

.htl-toc-list {
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
	counter-reset: none;
	display: grid;
	gap: 9px;
}

.htl-toc-list[hidden] { display: none; }

.htl-toc-list > li > a {
	display: flex;
	gap: 10px;
	align-items: baseline;
	color: var(--htl-ink-2);
	text-decoration: none;
	font-size: .95rem;
	font-weight: 500;
}

.htl-toc-list > li > a:hover { color: var(--htl-brand); }

.htl-toc-num {
	font-family: var(--htl-font-mono);
	font-size: .76rem;
	color: var(--tone, var(--htl-brand));
	flex: 0 0 auto;
	font-weight: 600;
}

.htl-toc-subs {
	list-style: none;
	margin: 7px 0 0 26px;
	padding: 0;
	display: grid;
	gap: 5px;
}

.htl-toc-subs a {
	color: var(--htl-muted);
	text-decoration: none;
	font-size: .88rem;
}

.htl-toc-subs a:hover { color: var(--htl-brand); }

/* takeaways */

.htl-takeaways {
	margin: 0 0 2em;
	padding: 20px 22px;
	background: var(--htl-bg-mint);
	border-radius: var(--htl-r);
	border: 1px solid color-mix(in srgb, var(--htl-brand) 18%, var(--htl-line));
}

.htl-takeaways-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: .95rem;
	margin-bottom: .8em;
	color: var(--htl-brand-dark);
}

:root[data-scheme="dark"] .htl-takeaways-title { color: var(--htl-brand-light); }

.htl-takeaways ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 9px;
}

.htl-takeaways li {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: .96rem;
	color: var(--htl-ink-2);
	line-height: 1.55;
}

.htl-takeaways .htl-i { color: var(--htl-brand); margin-top: 4px; flex: 0 0 auto; }

/* disclaimers and notes */

.htl-disclaimer,
.htl-sponsored-note {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin: 2em 0;
	padding: 16px 18px;
	border-radius: var(--htl-r);
	background: var(--htl-surface-2);
	border: 1px solid var(--htl-line);
	font-size: .88rem;
	line-height: 1.6;
	color: var(--htl-muted);
}

.htl-disclaimer p,
.htl-sponsored-note div { margin: 0; }

.htl-disclaimer strong,
.htl-sponsored-note strong { color: var(--htl-ink-2); }

.htl-disclaimer-icon,
.htl-sponsored-note > .htl-i {
	flex: 0 0 auto;
	margin-top: 2px;
	color: var(--htl-info);
	display: inline-flex;
}

.htl-sponsored-note {
	background: color-mix(in srgb, var(--htl-warn) 8%, var(--htl-bg));
	border-color: color-mix(in srgb, var(--htl-warn) 26%, transparent);
}

.htl-sponsored-note > .htl-i { color: var(--htl-warn); }

.htl-footer-disclaimer .htl-disclaimer { margin: 0; }

/* share */

.htl-share-rail {
	position: sticky;
	top: calc(var(--htl-header-h) + 24px);
	float: left;
	margin-left: -84px;
	width: 56px;
	display: none;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	z-index: 5;
}

.htl-share-rail-label {
	font-family: var(--htl-font-mono);
	font-size: .62rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--htl-muted);
	margin-bottom: 3px;
}

.htl-share-btn {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 11px;
	border: 1px solid var(--htl-line);
	background: var(--htl-surface);
	color: var(--htl-muted);
	cursor: pointer;
	text-decoration: none;
	transition: color .15s ease, border-color .15s ease, transform .15s ease;
}

.htl-share-btn:hover {
	color: var(--htl-brand);
	border-color: var(--htl-brand);
	transform: translateY(-2px);
}

.htl-share-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin: 2.4em 0;
	padding: 18px 20px;
	background: var(--htl-bg-soft);
	border: 1px solid var(--htl-line);
	border-radius: var(--htl-r);
}

.htl-share-row-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	font-size: .94rem;
	color: var(--htl-ink-2);
}

.htl-share-row-label .htl-i { color: var(--htl-brand); }

.htl-share-row-buttons { display: flex; flex-wrap: wrap; gap: 8px; }

.htl-share-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 14px;
	border-radius: 999px;
	border: 1px solid var(--htl-line);
	background: var(--htl-surface);
	color: var(--htl-ink-2);
	font: inherit;
	font-size: .84rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.htl-share-chip:hover { border-color: var(--htl-brand); color: var(--htl-brand); }
.htl-share-chip.is-wa .htl-i { color: #25D366; }

.htl-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 2em 0;
}

.htl-tags-label {
	font-size: .78rem;
	font-weight: 600;
	color: var(--htl-muted);
	text-transform: uppercase;
	letter-spacing: .08em;
	font-family: var(--htl-font-mono);
}

.htl-tags a {
	display: inline-block;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--htl-bg-mint);
	color: var(--htl-brand-dark);
	font-size: .82rem;
	font-weight: 600;
	text-decoration: none;
}

.htl-tags a:hover { background: color-mix(in srgb, var(--htl-brand) 20%, var(--htl-bg)); }
:root[data-scheme="dark"] .htl-tags a { color: var(--htl-brand-light); }

/* author box */

.htl-author-box {
	display: flex;
	gap: 20px;
	margin: 2.6em 0;
	padding: 24px;
	background: var(--htl-bg-soft);
	border: 1px solid var(--htl-line);
	border-radius: var(--htl-r-lg);
}

.htl-author-media { flex: 0 0 auto; }
.htl-author-body { min-width: 0; }

.htl-author-kicker {
	margin: 0 0 4px;
	font-family: var(--htl-font-mono);
	font-size: .68rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--htl-muted);
}

.htl-author-name {
	font-size: 1.15rem;
	margin-bottom: .2em;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
}

.htl-author-name a { color: var(--htl-ink); text-decoration: none; }
.htl-author-name a:hover { color: var(--htl-brand); }

.htl-author-creds {
	font-family: var(--htl-font-mono);
	font-size: .72rem;
	font-weight: 500;
	color: var(--htl-brand-dark);
	background: var(--htl-bg-mint);
	padding: 2px 8px;
	border-radius: 5px;
	letter-spacing: .02em;
}

.htl-author-role {
	margin: 0 0 .6em;
	font-size: .88rem;
	color: var(--htl-brand-dark);
	font-weight: 600;
}

:root[data-scheme="dark"] .htl-author-role,
:root[data-scheme="dark"] .htl-author-creds { color: var(--htl-brand-light); }

.htl-author-bio {
	font-size: .94rem;
	color: var(--htl-muted);
	margin-bottom: .8em;
}

.htl-author-covers {
	font-size: .84rem;
	color: var(--htl-muted);
	margin-bottom: .8em;
}

.htl-author-socials { display: flex; gap: 8px; flex-wrap: wrap; }

.htl-social-link {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	border: 1px solid var(--htl-line);
	background: var(--htl-surface);
	color: var(--htl-muted);
	text-decoration: none;
	transition: color .15s ease, border-color .15s ease;
}

.htl-social-link:hover { color: var(--htl-brand); border-color: var(--htl-brand); }

.htl-author-header {
	background: var(--htl-bg-mint);
	border-bottom: 1px solid var(--htl-line);
	padding-block: 34px;
	margin-bottom: 8px;
}

.htl-author-header-inner {
	display: flex;
	gap: 24px;
	align-items: flex-start;
}

.htl-author-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 20px;
	margin-top: 24px;
}

.htl-author-card {
	background: var(--htl-surface);
	border: 1px solid var(--htl-line);
	border-radius: var(--htl-r);
	padding: 22px;
	display: grid;
	gap: 8px;
	justify-items: stretch;
	min-width: 0;
}

.htl-author-card > * { min-width: 0; }

.htl-author-card h3 { font-size: 1.05rem; margin: 6px 0 0; }
.htl-author-card h3 a { color: var(--htl-ink); text-decoration: none; }

.htl-author-count {
	font-family: var(--htl-font-mono);
	font-size: .76rem;
	color: var(--htl-muted);
	margin: 0;
}

/* prev / next and related */

.htl-prevnext {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin: 2.6em 0;
}

.htl-prevnext-item {
	display: grid;
	gap: 6px;
	padding: 18px 20px;
	border: 1px solid var(--htl-line);
	border-radius: var(--htl-r);
	background: var(--htl-surface);
	text-decoration: none;
	transition: border-color .15s ease, transform .15s ease;
}

.htl-prevnext-item:hover { border-color: var(--htl-brand); transform: translateY(-2px); }

.htl-prevnext-item.is-next { text-align: right; }

.htl-prevnext-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: .74rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--htl-muted);
	font-family: var(--htl-font-mono);
}

.htl-prevnext-item.is-next .htl-prevnext-label { justify-content: flex-end; }
.htl-prevnext-item.is-prev .htl-i { transform: rotate(180deg); }

.htl-prevnext-title {
	font-family: var(--htl-font-display);
	font-weight: 600;
	font-size: 1rem;
	color: var(--htl-ink);
	line-height: 1.35;
}

.htl-related {
	background: var(--htl-bg-soft);
	border-top: 1px solid var(--htl-line);
	padding-block: 48px;
	margin-top: 20px;
}

/* ============================================ 9. editorial blocks */

.htl-callout {
	display: flex;
	gap: 13px;
	align-items: flex-start;
	margin: 1.9em 0;
	padding: 17px 19px;
	border-radius: var(--htl-r);
	background: var(--htl-bg-mint);
	border: 1px solid color-mix(in srgb, var(--htl-brand) 20%, transparent);
	font-size: .97rem;
}

.htl-callout p { margin-bottom: .6em; }
.htl-callout p:last-child { margin-bottom: 0; }

.htl-callout-icon { flex: 0 0 auto; margin-top: 3px; color: var(--htl-brand); display: inline-flex; }

.htl-callout-title {
	display: block;
	font-family: var(--htl-font-display);
	font-size: .88rem;
	letter-spacing: .02em;
	margin-bottom: 4px;
	color: var(--htl-brand-dark);
}

:root[data-scheme="dark"] .htl-callout-title { color: var(--htl-brand-light); }

.htl-callout-warn {
	background: color-mix(in srgb, var(--htl-warn) 9%, var(--htl-bg));
	border-color: color-mix(in srgb, var(--htl-warn) 28%, transparent);
}
.htl-callout-warn .htl-callout-icon,
.htl-callout-warn .htl-callout-title { color: var(--htl-warn); }

.htl-callout-danger {
	background: color-mix(in srgb, var(--htl-bad) 9%, var(--htl-bg));
	border-color: color-mix(in srgb, var(--htl-bad) 30%, transparent);
}
.htl-callout-danger .htl-callout-icon,
.htl-callout-danger .htl-callout-title { color: var(--htl-bad); }

.htl-callout-note {
	background: color-mix(in srgb, var(--htl-info) 8%, var(--htl-bg));
	border-color: color-mix(in srgb, var(--htl-info) 26%, transparent);
}
.htl-callout-note .htl-callout-icon,
.htl-callout-note .htl-callout-title { color: var(--htl-info); }

.htl-myth {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin: 2em 0;
}

.htl-myth-side {
	padding: 18px 20px;
	border-radius: var(--htl-r);
	border: 1px solid var(--htl-line);
	background: var(--htl-surface);
}

.htl-myth-side.is-myth { border-color: color-mix(in srgb, var(--htl-bad) 30%, transparent); }
.htl-myth-side.is-fact { border-color: color-mix(in srgb, var(--htl-good) 32%, transparent); }

.htl-myth-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--htl-font-display);
	font-size: .78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	margin-bottom: 9px;
}

.is-myth .htl-myth-tag { color: var(--htl-bad); }
.is-fact .htl-myth-tag { color: var(--htl-good); }

.htl-myth-side p { margin: 0; font-size: .96rem; }

.htl-stat {
	display: grid;
	gap: 4px;
	margin: 2em 0;
	padding: 22px 24px;
	background: var(--htl-bg-mint);
	border-left: 3px solid var(--htl-brand);
	border-radius: var(--htl-r);
}

.htl-stat-value {
	font-family: var(--htl-font-mono);
	font-size: clamp(1.8rem, 4vw, 2.5rem);
	font-weight: 600;
	color: var(--htl-brand-dark);
	line-height: 1.1;
}

:root[data-scheme="dark"] .htl-stat-value { color: var(--htl-brand-light); }

.htl-stat-label { font-weight: 600; color: var(--htl-ink); }
.htl-stat cite { font-size: .8rem; color: var(--htl-muted); font-style: normal; }

.htl-checklist {
	margin: 2em 0;
	padding: 20px 22px;
	border-radius: var(--htl-r);
	background: var(--htl-surface-2);
	border: 1px solid var(--htl-line);
}

.htl-checklist-title { font-size: 1rem; margin-bottom: .7em; }

.htl-checklist ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

.htl-checklist li {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: .95rem;
}

.htl-checklist .htl-i { margin-top: 4px; flex: 0 0 auto; color: var(--htl-good); }
.htl-checklist.tone-warn .htl-i { color: var(--htl-warn); }

.htl-doctor {
	margin: 2.2em 0;
	padding: 20px 22px;
	border-radius: var(--htl-r);
	background: color-mix(in srgb, var(--htl-bad) 7%, var(--htl-bg));
	border: 1px solid color-mix(in srgb, var(--htl-bad) 26%, transparent);
}

.htl-doctor-title {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 1.02rem;
	color: var(--htl-bad);
	margin-bottom: .7em;
}

.htl-doctor ul { margin: 0 0 1em; padding-left: 1.3em; }
.htl-doctor li { margin-bottom: .4em; font-size: .95rem; }

.htl-doctor-note {
	margin: 0;
	font-size: .86rem;
	font-weight: 600;
	color: var(--htl-bad);
}

.htl-steps { margin: 2.2em 0; }

.htl-steps-title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	font-size: 1.1rem;
	margin-bottom: .9em;
}

.htl-steps-time {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-family: var(--htl-font-mono);
	font-size: .76rem;
	font-weight: 500;
	color: var(--htl-muted);
	background: var(--htl-bg-mint);
	padding: 3px 9px;
	border-radius: 999px;
}

.htl-steps-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }

.htl-steps-list li { display: flex; gap: 14px; align-items: flex-start; }

.htl-step-num {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--htl-brand);
	color: #fff;
	font-family: var(--htl-font-mono);
	font-size: .85rem;
	font-weight: 600;
}

:root[data-scheme="dark"] .htl-step-num { color: #06231A; }

.htl-steps-list strong { display: block; color: var(--htl-ink); font-size: 1rem; }
.htl-steps-list p { margin: 4px 0 0; font-size: .93rem; color: var(--htl-muted); }

.htl-nutrition { margin: 2em 0; }

.htl-nutrition figcaption {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 9px;
	margin-bottom: 10px;
}

.htl-nutrition figcaption strong { font-family: var(--htl-font-display); font-size: 1.05rem; color: var(--htl-ink); }
.htl-nutrition figcaption span { font-size: .84rem; color: var(--htl-muted); }
.htl-nutrition th { width: 55%; font-weight: 600; color: var(--htl-ink-2); }
.htl-nutrition td { font-family: var(--htl-font-mono); font-size: .9rem; }

.htl-nutrition-source { margin-top: 9px; font-size: .8rem; color: var(--htl-muted); }

/* FAQ */

.htl-faq { margin: 2.4em 0; }
.htl-faq-title { font-size: clamp(21px, 2.6vw, 26px); margin-bottom: .8em; }

.htl-faq-item {
	border: 1px solid var(--htl-line);
	border-radius: var(--htl-r);
	background: var(--htl-surface);
	margin-bottom: 10px;
	overflow: hidden;
}

.htl-faq-item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 15px 18px;
	cursor: pointer;
	font-family: var(--htl-font-display);
	font-weight: 600;
	font-size: 1rem;
	color: var(--htl-ink);
	list-style: none;
}

.htl-faq-item summary::-webkit-details-marker { display: none; }
.htl-faq-item summary:hover { color: var(--htl-brand); }
.htl-faq-item summary .htl-i { color: var(--htl-muted); transition: transform .2s ease; flex: 0 0 auto; }
.htl-faq-item[open] summary .htl-i { transform: rotate(180deg); }
.htl-faq-item[open] summary { border-bottom: 1px solid var(--htl-line); }

.htl-faq-answer { padding: 15px 18px; color: var(--htl-ink-2); font-size: .97rem; }
.htl-faq-answer p { margin: 0; }

/* ============================================= 10. calculators */

.htl-calc {
	--tone: var(--htl-brand);
	margin: 2.2em 0;
	background: var(--htl-surface);
	border: 1px solid var(--htl-line);
	border-top: 3px solid var(--tone);
	border-radius: var(--htl-r-lg);
	padding: 24px;
	box-shadow: var(--htl-shadow-sm);
}

.htl-calc.is-compact { padding: 18px; margin: 0; box-shadow: none; }

.htl-calc-head {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--htl-line);
}

.htl-calc-icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	flex: 0 0 auto;
	border-radius: 13px;
	background: color-mix(in srgb, var(--tone) 13%, var(--htl-surface));
	color: var(--tone);
}

.htl-calc-title { font-size: 1.25rem; margin-bottom: .25em; }
.htl-calc-title a { color: inherit; text-decoration: none; }
.htl-calc-title a:hover { color: var(--tone); }
.htl-calc-summary { margin: 0; font-size: .9rem; color: var(--htl-muted); }

.htl-calc-intro {
	font-size: 1.05rem;
	line-height: 1.7;
	color: var(--htl-ink-2);
	margin-bottom: 1.6em;
	max-width: 68ch;
}

.htl-unit-switch {
	display: inline-flex;
	padding: 3px;
	border-radius: 999px;
	background: var(--htl-bg-mint);
	border: 1px solid var(--htl-line);
	margin-bottom: 18px;
}

.htl-unit-switch button {
	border: 0;
	background: none;
	font: inherit;
	font-size: .82rem;
	font-weight: 600;
	padding: 6px 16px;
	border-radius: 999px;
	color: var(--htl-muted);
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.htl-unit-switch button.is-active {
	background: var(--htl-surface);
	color: var(--tone);
	box-shadow: var(--htl-shadow-sm);
}

.htl-calc-fields {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 16px;
}

.htl-field { min-width: 0; grid-column: span 6; }
.htl-w-half { grid-column: span 3; }
.htl-w-third { grid-column: span 2; }
.htl-w-full { grid-column: span 6; }

.htl-label,
.htl-fieldset legend {
	display: block;
	font-size: .85rem;
	font-weight: 600;
	color: var(--htl-ink-2);
	margin-bottom: 6px;
	padding: 0;
}

.htl-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }

.htl-help {
	margin: 6px 0 0;
	font-size: .78rem;
	line-height: 1.5;
	color: var(--htl-muted);
}

.htl-input-wrap {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 12px;
	border: 1px solid var(--htl-line-strong);
	border-radius: 11px;
	background: var(--htl-bg);
	transition: border-color .15s ease, box-shadow .15s ease;
}

.htl-input-wrap:focus-within {
	border-color: var(--tone);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone) 16%, transparent);
}

.htl-input-wrap input {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	border: 0;
	background: transparent;
	font-family: var(--htl-font-mono);
	font-size: 1rem;
	color: var(--htl-ink);
	padding: 11px 0;
}

.htl-input-wrap input:focus { outline: none; }

.htl-unit {
	flex: 0 0 auto;
	font-family: var(--htl-font-mono);
	font-size: .82rem;
	color: var(--htl-muted);
	white-space: nowrap;
}

.htl-unit-pair { display: grid; gap: 8px; }
.htl-unit-pair .htl-imperial { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.htl-unit-pair [hidden] { display: none !important; }

.htl-select-wrap {
	position: relative;
	display: flex;
	align-items: center;
}

.htl-select-wrap select {
	width: 100%;
	appearance: none;
	border: 1px solid var(--htl-line-strong);
	border-radius: 11px;
	background: var(--htl-bg);
	color: var(--htl-ink);
	font: inherit;
	font-size: .93rem;
	padding: 12px 38px 12px 12px;
	cursor: pointer;
}

.htl-select-wrap select:focus {
	outline: none;
	border-color: var(--tone);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone) 16%, transparent);
}

.htl-select-wrap > .htl-i {
	position: absolute;
	right: 12px;
	pointer-events: none;
	color: var(--htl-muted);
}

.htl-choice-row { display: flex; flex-wrap: wrap; gap: 8px; }

.htl-choice { position: relative; cursor: pointer; }

.htl-choice input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.htl-choice span {
	display: inline-block;
	padding: 9px 17px;
	border-radius: 999px;
	border: 1px solid var(--htl-line-strong);
	background: var(--htl-bg);
	font-size: .88rem;
	font-weight: 600;
	color: var(--htl-ink-2);
	transition: all .15s ease;
}

.htl-choice input:checked + span {
	background: color-mix(in srgb, var(--tone) 12%, var(--htl-bg));
	border-color: var(--tone);
	color: var(--tone);
}

.htl-choice input:focus-visible + span {
	outline: 3px solid var(--tone);
	outline-offset: 2px;
}

.htl-toggle {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	cursor: pointer;
	user-select: none;
}

.htl-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }

.htl-toggle-track {
	position: relative;
	width: 42px;
	height: 24px;
	border-radius: 999px;
	background: var(--htl-line-strong);
	flex: 0 0 auto;
	transition: background-color .18s ease;
}

.htl-toggle-knob {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	transition: transform .18s ease;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}

.htl-toggle input:checked + .htl-toggle-track { background: var(--tone); }
.htl-toggle input:checked + .htl-toggle-track .htl-toggle-knob { transform: translateX(18px); }
.htl-toggle input:focus-visible + .htl-toggle-track { outline: 3px solid var(--tone); outline-offset: 2px; }

.htl-toggle-label { font-size: .88rem; font-weight: 600; color: var(--htl-ink-2); }

.htl-calc-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 20px;
}

.htl-calc-error {
	margin: 16px 0 0;
	padding: 11px 15px;
	border-radius: 10px;
	background: color-mix(in srgb, var(--htl-bad) 10%, var(--htl-bg));
	border: 1px solid color-mix(in srgb, var(--htl-bad) 32%, transparent);
	color: var(--htl-bad);
	font-size: .88rem;
	font-weight: 600;
}

.htl-calc-noscript {
	margin-top: 14px;
	font-size: .88rem;
	color: var(--htl-warn);
}

.htl-calc-more { margin: 14px 0 0; font-size: .86rem; }

.htl-calc-more a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-weight: 600;
	color: var(--tone);
	text-decoration: none;
}

.htl-calc-more a:hover { text-decoration: underline; }

/* results */

.htl-calc-result {
	margin-top: 22px;
	padding-top: 22px;
	border-top: 2px dashed var(--htl-line);
	animation: htl-fade .25s ease;
}

@keyframes htl-fade {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: none; }
}

.htl-res-error {
	margin: 0;
	padding: 14px 16px;
	border-radius: 10px;
	background: color-mix(in srgb, var(--htl-bad) 10%, var(--htl-bg));
	color: var(--htl-bad);
	font-weight: 600;
	font-size: .92rem;
}

.htl-res-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 18px;
}

.htl-res-primary { display: grid; gap: 2px; min-width: 0; }

.htl-res-value {
	font-family: var(--htl-font-mono);
	font-size: clamp(2rem, 6vw, 2.9rem);
	font-weight: 600;
	line-height: 1.05;
	color: var(--tone);
	letter-spacing: -0.02em;
}

.htl-res-sub {
	font-family: var(--htl-font-mono);
	font-size: .82rem;
	color: var(--htl-muted);
}

.htl-res-label {
	font-size: .94rem;
	font-weight: 600;
	color: var(--htl-ink-2);
	margin-top: 4px;
}

.htl-res-badge {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	border-radius: 999px;
	font-size: .88rem;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
}

.tone-good.htl-res-badge { background: color-mix(in srgb, var(--htl-good) 15%, var(--htl-bg)); color: var(--htl-good); }
.tone-warn.htl-res-badge { background: color-mix(in srgb, var(--htl-warn) 15%, var(--htl-bg)); color: var(--htl-warn); }
.tone-bad.htl-res-badge { background: color-mix(in srgb, var(--htl-bad) 15%, var(--htl-bg)); color: var(--htl-bad); }
.tone-info.htl-res-badge { background: color-mix(in srgb, var(--htl-info) 13%, var(--htl-bg)); color: var(--htl-info); }

.htl-res-scale { margin: 22px 0 30px; }

.htl-scale-track {
	position: relative;
	display: flex;
	height: 12px;
	border-radius: 999px;
	overflow: visible;
	background: var(--htl-line);
}

.htl-scale-seg { display: block; height: 100%; }
.htl-scale-seg:first-child { border-radius: 999px 0 0 999px; }
.htl-scale-seg:last-child { border-radius: 0 999px 999px 0; }

.htl-scale-seg.tone-good { background: color-mix(in srgb, var(--htl-good) 62%, transparent); }
.htl-scale-seg.tone-warn { background: color-mix(in srgb, var(--htl-warn) 62%, transparent); }
.htl-scale-seg.tone-bad { background: color-mix(in srgb, var(--htl-bad) 62%, transparent); }
.htl-scale-seg.tone-info { background: color-mix(in srgb, var(--htl-info) 55%, transparent); }

.htl-scale-marker {
	position: absolute;
	top: 50%;
	width: 18px;
	height: 18px;
	margin-left: -9px;
	border-radius: 50%;
	background: var(--htl-surface);
	border: 4px solid var(--htl-ink);
	transform: translateY(-50%);
	box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}

.htl-scale-labels {
	position: relative;
	height: 18px;
	margin-top: 7px;
	font-family: var(--htl-font-mono);
	font-size: .7rem;
	color: var(--htl-muted);
}

.htl-scale-labels span { position: absolute; transform: translateX(-50%); }
.htl-scale-labels span:first-child { position: static; float: left; transform: none; }

.htl-res-rows { margin: 0; display: grid; gap: 1px; background: var(--htl-line); border-radius: var(--htl-r); overflow: hidden; border: 1px solid var(--htl-line); }

.htl-res-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 16px;
	padding: 12px 16px;
	background: var(--htl-surface);
}

.htl-res-row dt {
	font-size: .92rem;
	color: var(--htl-ink-2);
	min-width: 0;
	flex: 1 1 55%;
}

.htl-res-row dd {
	margin: 0;
	font-family: var(--htl-font-mono);
	font-size: .96rem;
	font-weight: 600;
	color: var(--htl-ink);
	text-align: right;
	flex: 0 1 auto;
}

.htl-res-row.is-key { background: var(--htl-bg-mint); }
.htl-res-row.is-key dd { color: var(--tone); }

.htl-res-row.tone-good dd { color: var(--htl-good); }
.htl-res-row.tone-warn dd { color: var(--htl-warn); }
.htl-res-row.tone-bad dd { color: var(--htl-bad); }

.htl-res-note {
	display: block;
	font-size: .78rem;
	color: var(--htl-muted);
	margin-top: 2px;
	font-family: var(--htl-font-body);
}

.htl-res-group { margin-top: 20px; }

.htl-res-group-title {
	font-size: .8rem;
	font-family: var(--htl-font-mono);
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--htl-muted);
	margin-bottom: 9px;
}

.htl-res-list {
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.htl-res-item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 6px 16px;
	padding: 13px 16px;
	border-radius: 11px;
	background: var(--htl-surface-2);
	border-left: 3px solid var(--htl-line-strong);
}

.htl-res-item.tone-good { border-left-color: var(--htl-good); }
.htl-res-item.tone-warn { border-left-color: var(--htl-warn); }
.htl-res-item.tone-bad { border-left-color: var(--htl-bad); }
.htl-res-item.tone-info { border-left-color: var(--htl-info); }
.htl-res-item.tone-muted { opacity: .62; }

.htl-res-item-main { display: grid; gap: 2px; min-width: 0; flex: 1 1 50%; }
.htl-res-item-main strong { font-size: .97rem; color: var(--htl-ink); }
.htl-res-item-sub { font-size: .8rem; color: var(--htl-muted); }

.htl-res-item-value {
	font-family: var(--htl-font-mono);
	font-size: .93rem;
	font-weight: 600;
	color: var(--tone);
	text-align: right;
	flex: 0 0 auto;
}

.htl-res-bars { margin: 20px 0; }

.htl-bars-track {
	display: flex;
	height: 16px;
	border-radius: 999px;
	overflow: hidden;
	background: var(--htl-line);
}

.htl-bar-seg { display: block; height: 100%; }
.bar-p, .htl-bar-seg.bar-p { background: #B3357A; }
.bar-c, .htl-bar-seg.bar-c { background: #C2701A; }
.bar-f, .htl-bar-seg.bar-f { background: #1D6FB8; }

.htl-bars-key {
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.htl-bars-key li { display: grid; gap: 2px; }

.htl-bar-dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 3px;
	margin-bottom: 4px;
}

.htl-bars-key .bar-p .htl-bar-dot { background: #B3357A; }
.htl-bars-key .bar-c .htl-bar-dot { background: #C2701A; }
.htl-bars-key .bar-f .htl-bar-dot { background: #1D6FB8; }

.htl-bars-key strong { font-family: var(--htl-font-mono); font-size: 1.1rem; color: var(--htl-ink); }
.htl-bar-label { font-size: .8rem; color: var(--htl-muted); }

.htl-res-footnote {
	margin: 20px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--htl-line);
	font-size: .84rem;
	line-height: 1.6;
	color: var(--htl-muted);
}

/* calculator hub and tiles */

.htl-calc-jump {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px dashed var(--htl-line);
}

.htl-calc-hub { padding-bottom: 50px; }

.htl-calc-group { margin-bottom: 44px; scroll-margin-top: calc(var(--htl-header-h) + 24px); }

.htl-calc-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	gap: 14px;
}

.htl-calc-tile { min-width: 0; }

.htl-calc-tile a {
	display: flex;
	align-items: center;
	gap: 14px;
	height: 100%;
	padding: 16px 18px;
	border-radius: var(--htl-r);
	border: 1px solid var(--htl-line);
	background: var(--htl-surface);
	text-decoration: none;
	transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.htl-calc-tile a:hover {
	border-color: color-mix(in srgb, var(--tone) 48%, transparent);
	transform: translateY(-2px);
	box-shadow: var(--htl-shadow-sm);
}

.htl-calc-tile-icon {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	flex: 0 0 auto;
	border-radius: 12px;
	background: color-mix(in srgb, var(--tone) 12%, var(--htl-surface));
	color: var(--tone);
}

.htl-calc-tile-body { display: grid; gap: 3px; min-width: 0; flex: 1 1 auto; }

.htl-calc-tile-title {
	font-family: var(--htl-font-display);
	font-weight: 600;
	font-size: .98rem;
	color: var(--htl-ink);
	line-height: 1.3;
}

.htl-calc-tile-sum {
	font-size: .82rem;
	color: var(--htl-muted);
	line-height: 1.45;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.htl-calc-tile-go { color: var(--htl-muted); flex: 0 0 auto; display: inline-flex; }
.htl-calc-tile a:hover .htl-calc-tile-go { color: var(--tone); }

.htl-calc-about { margin-top: 2.5em; }

.htl-calc-privacy {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin-top: 1.6em;
	padding: 14px 16px;
	border-radius: var(--htl-r);
	background: var(--htl-bg-mint);
	font-size: .88rem;
	color: var(--htl-ink-2);
}

.htl-calc-privacy .htl-i { color: var(--htl-brand); margin-top: 3px; flex: 0 0 auto; }

.htl-calc-related,
.htl-calc-reading,
.htl-calc-try { margin-top: 2.8em; }

/* ============================================== 11. guest post */

.htl-gp-hero {
	background: linear-gradient(170deg, var(--htl-bg-mint), var(--htl-bg) 78%);
	border-bottom: 1px solid var(--htl-line);
	padding-block: 36px 46px;
}

.htl-gp-hero-inner {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: 44px;
	align-items: center;
}

.htl-gp-lead {
	font-size: 1.08rem;
	color: var(--htl-ink-2);
	max-width: 62ch;
	margin-bottom: 1.5em;
}

.htl-gp-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.htl-gp-body { padding-block: 44px 60px; }
.htl-gp-section { margin-bottom: 56px; scroll-margin-top: calc(var(--htl-header-h) + 24px); }
.htl-gp-intro { margin-bottom: 44px; max-width: 70ch; }

.htl-gp-topics {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}

.htl-gp-topics li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 4px 14px;
	padding: 16px 18px;
	border-radius: var(--htl-r);
	border: 1px solid var(--htl-line);
	background: var(--htl-surface);
	border-left: 3px solid var(--tone);
}

.htl-gp-topic-icon {
	grid-row: 1 / span 2;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 11px;
	background: color-mix(in srgb, var(--tone) 12%, var(--htl-surface));
	color: var(--tone);
}

.htl-gp-topics strong { font-family: var(--htl-font-display); font-size: .98rem; align-self: end; }
.htl-gp-topics span { font-size: .85rem; color: var(--htl-muted); }

.htl-gp-tiers {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	align-items: start;
}

.htl-gp-tier {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 26px 24px;
	border-radius: var(--htl-r-lg);
	border: 1px solid var(--htl-line);
	background: var(--htl-surface);
}

.htl-gp-tier.is-featured {
	border-color: var(--htl-brand);
	box-shadow: var(--htl-shadow);
	background: linear-gradient(180deg, var(--htl-bg-mint), var(--htl-surface) 32%);
}

.htl-gp-tier-flag {
	position: absolute;
	top: -12px;
	left: 24px;
	padding: 4px 13px;
	border-radius: 999px;
	background: var(--htl-brand);
	color: #fff;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

:root[data-scheme="dark"] .htl-gp-tier-flag { color: #06231A; }

.htl-gp-tier-name { font-size: 1.15rem; margin: 0; }

.htl-gp-tier-price {
	font-family: var(--htl-font-mono);
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--htl-brand-dark);
	margin: 0;
}

:root[data-scheme="dark"] .htl-gp-tier-price { color: var(--htl-brand-light); }

.htl-gp-tier-blurb { font-size: .9rem; color: var(--htl-muted); margin: 0; }

.htl-gp-tier-features {
	list-style: none;
	margin: 8px 0 18px;
	padding: 14px 0 0;
	border-top: 1px solid var(--htl-line);
	display: grid;
	gap: 9px;
	flex: 1 1 auto;
}

.htl-gp-tier-features li {
	display: flex;
	gap: 9px;
	align-items: flex-start;
	font-size: .9rem;
	color: var(--htl-ink-2);
}

.htl-gp-tier-features .htl-i { color: var(--htl-brand); margin-top: 3px; flex: 0 0 auto; }

.htl-gp-rules {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.htl-gp-rules-col {
	padding: 22px 24px;
	border-radius: var(--htl-r-lg);
	border: 1px solid var(--htl-line);
	background: var(--htl-surface);
}

.htl-gp-rules-col.is-do { border-color: color-mix(in srgb, var(--htl-good) 30%, transparent); }
.htl-gp-rules-col.is-dont { border-color: color-mix(in srgb, var(--htl-bad) 30%, transparent); }

.htl-gp-rules-col h3 {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 1.05rem;
	margin-bottom: .8em;
}

.is-do h3 { color: var(--htl-good); }
.is-dont h3 { color: var(--htl-bad); }

.htl-gp-rules-col ul { margin: 0; padding-left: 1.2em; display: grid; gap: 9px; }
.htl-gp-rules-col li { font-size: .93rem; color: var(--htl-ink-2); }

.htl-gp-process {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
	counter-reset: none;
}

.htl-gp-process li {
	padding: 22px 20px;
	border-radius: var(--htl-r);
	background: var(--htl-bg-soft);
	border: 1px solid var(--htl-line);
}

.htl-gp-step {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--htl-brand);
	color: #fff;
	font-family: var(--htl-font-mono);
	font-weight: 600;
	margin-bottom: 12px;
}

:root[data-scheme="dark"] .htl-gp-step { color: #06231A; }

.htl-gp-process h3 { font-size: 1.05rem; margin-bottom: .35em; }
.htl-gp-process p { margin: 0; font-size: .9rem; color: var(--htl-muted); }

/* pitch form */

.htl-pitch {
	padding: 30px;
	border-radius: var(--htl-r-lg);
	border: 1px solid var(--htl-line);
	background: var(--htl-bg-soft);
	scroll-margin-top: calc(var(--htl-header-h) + 24px);
}

.htl-pitch-title { font-size: clamp(22px, 3vw, 28px); margin-bottom: .3em; }
.htl-pitch-intro { color: var(--htl-muted); margin-bottom: 1.6em; max-width: 62ch; }

.htl-form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.htl-form-field { margin: 0; display: grid; gap: 6px; min-width: 0; }
.htl-form-wide { grid-column: 1 / -1; }

.htl-form-field label {
	font-size: .85rem;
	font-weight: 600;
	color: var(--htl-ink-2);
}

.htl-req { color: var(--htl-bad); }

.htl-form-field input,
.htl-form-field textarea,
.htl-form-field select {
	width: 100%;
	border: 1px solid var(--htl-line-strong);
	border-radius: 11px;
	background: var(--htl-bg);
	color: var(--htl-ink);
	font: inherit;
	font-size: .95rem;
	padding: 12px 14px;
}

.htl-form-field textarea { resize: vertical; min-height: 120px; }

.htl-form-field input:focus,
.htl-form-field textarea:focus,
.htl-form-field select:focus {
	outline: none;
	border-color: var(--htl-brand);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--htl-brand) 16%, transparent);
}

.htl-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.htl-pitch-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.htl-pitch-small { margin: 14px 0 0; font-size: .82rem; color: var(--htl-muted); }

.htl-form-msg {
	margin: 0 0 18px;
	padding: 12px 16px;
	border-radius: 10px;
	font-size: .92rem;
	font-weight: 600;
}

.htl-form-msg.tone-good { background: color-mix(in srgb, var(--htl-good) 13%, var(--htl-bg)); color: var(--htl-good); }
.htl-form-msg.tone-bad { background: color-mix(in srgb, var(--htl-bad) 12%, var(--htl-bg)); color: var(--htl-bad); }
.htl-form-msg.tone-info { background: color-mix(in srgb, var(--htl-info) 12%, var(--htl-bg)); color: var(--htl-info); }

/* ================================== 12. newsletter */

.htl-newsletter {
	background: linear-gradient(160deg, var(--htl-bg-mint), var(--htl-bg-soft));
	border-block: 1px solid var(--htl-line);
	padding-block: 48px;
	margin-block: 20px 0;
}

.htl-newsletter-inner {
	max-width: 760px;
	margin-inline: auto;
	padding-inline: 20px;
	text-align: center;
}

.htl-newsletter-icon {
	display: inline-grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 15px;
	background: var(--htl-brand);
	color: #fff;
	margin-bottom: 14px;
}

:root[data-scheme="dark"] .htl-newsletter-icon { color: #06231A; }

.htl-newsletter-title { font-size: clamp(22px, 3.2vw, 30px); margin-bottom: .35em; }
.htl-newsletter-text { color: var(--htl-muted); margin-bottom: 1.4em; }

.htl-newsletter-form {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	position: relative;
}

.htl-newsletter-form input[type="email"] {
	flex: 1 1 280px;
	max-width: 360px;
	min-width: 0;
	border: 1px solid var(--htl-line-strong);
	border-radius: 999px;
	background: var(--htl-surface);
	color: var(--htl-ink);
	font: inherit;
	font-size: .96rem;
	padding: 12px 20px;
}

.htl-newsletter-form input[type="email"]:focus {
	outline: none;
	border-color: var(--htl-brand);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--htl-brand) 18%, transparent);
}

.htl-newsletter-small { margin: 14px 0 0; font-size: .78rem; color: var(--htl-muted); }

/* inline (sidebar) variant */

.htl-newsletter-inline {
	background: var(--htl-bg-mint);
	border: 1px solid var(--htl-line);
	border-radius: var(--htl-r);
	padding: 20px;
	margin: 0;
}

.htl-newsletter-inline .htl-newsletter-inner { padding: 0; text-align: left; max-width: none; }
.htl-newsletter-inline .htl-newsletter-icon { width: 38px; height: 38px; border-radius: 11px; margin-bottom: 10px; }
.htl-newsletter-inline .htl-newsletter-title { font-size: 1.08rem; }
.htl-newsletter-inline .htl-newsletter-text { font-size: .88rem; }
.htl-newsletter-inline .htl-newsletter-form { flex-direction: column; }
.htl-newsletter-inline .htl-newsletter-form input[type="email"] { max-width: none; flex: 1 1 auto; }
.htl-newsletter-inline .htl-btn { width: 100%; }

/* ============================================ 13. sidebar */

.htl-sidebar { display: grid; gap: 26px; align-content: start; min-width: 0; }

.htl-sidebar .widget {
	background: var(--htl-surface);
	border: 1px solid var(--htl-line);
	border-radius: var(--htl-r);
	padding: 20px;
	min-width: 0;
}

.htl-sidebar .widget-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 1rem;
	margin-bottom: 1em;
	padding-bottom: .7em;
	border-bottom: 1px solid var(--htl-line);
}

.htl-sidebar .widget-title .htl-i { color: var(--htl-brand); }

.htl-sidebar .widget ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.htl-sidebar .widget li a { color: var(--htl-ink-2); text-decoration: none; font-size: .94rem; font-weight: 500; }
.htl-sidebar .widget li a:hover { color: var(--htl-brand); }

.htl-widget-newsletter,
.htl-widget-calc { padding: 0; border: 0; background: none; }

.htl-widget-calc { border: 1px solid var(--htl-line); background: var(--htl-surface); border-radius: var(--htl-r); padding: 20px; }
.htl-widget-calc .htl-calc { border: 0; border-top: 0; padding: 0; margin: 0; box-shadow: none; background: none; }

.htl-widget-guest p { font-size: .9rem; color: var(--htl-muted); margin-bottom: 1.1em; }
.htl-widget-guest .htl-btn { width: 100%; }

.htl-wa-card {
	background: linear-gradient(160deg, #E8FBEF, #F4FBF7);
	border: 1px solid #BFE9CE;
	border-radius: var(--htl-r);
	padding: 20px;
	display: grid;
	gap: 9px;
	justify-items: stretch;
	min-width: 0;
}

.htl-wa-card > * { min-width: 0; }
.htl-wa-card .htl-btn { justify-self: start; max-width: 100%; }

:root[data-scheme="dark"] .htl-wa-card {
	background: linear-gradient(160deg, #11342A, #132E26);
	border-color: #235C42;
}

.htl-wa-card-icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: #25D366;
	color: #06301A;
}

.htl-wa-card-title { font-size: 1.05rem; margin: 0; }
.htl-wa-card-text { font-size: .88rem; color: var(--htl-muted); margin: 0 0 6px; }
.htl-wa-card.is-compact { margin-top: 18px; padding: 16px; }
.htl-wa-card.is-compact .htl-wa-card-text { font-size: .82rem; }

/* ============================================ 14. footer */

.htl-footer {
	background: var(--htl-bg-soft);
	border-top: 1px solid var(--htl-line);
	padding-block: 48px 26px;
	margin-top: 40px;
}

.htl-footer-top {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
	gap: 36px;
	padding-bottom: 34px;
	border-bottom: 1px solid var(--htl-line);
}

.htl-footer-about,
.htl-footer-col { min-width: 0; }

.htl-footer-text {
	margin: 16px 0;
	font-size: .92rem;
	color: var(--htl-muted);
	max-width: 46ch;
}

.htl-footer-socials { display: flex; flex-wrap: wrap; gap: 8px; }

.htl-footer-title {
	font-size: .78rem;
	font-family: var(--htl-font-mono);
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--htl-muted);
	margin-bottom: 1.1em;
}

.htl-footer-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 9px;
}

.htl-footer-list a {
	color: var(--htl-ink-2);
	text-decoration: none;
	font-size: .92rem;
}

.htl-footer-list a:hover { color: var(--htl-brand); }

.htl-footer-disclaimer { padding-block: 26px; border-bottom: 1px solid var(--htl-line); }

.htl-footer-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding-top: 22px;
}

.htl-copyright { margin: 0; font-size: .84rem; color: var(--htl-muted); }

.htl-legal-menu {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin: 0;
	padding: 0;
}

.htl-legal-menu a { font-size: .84rem; color: var(--htl-muted); text-decoration: none; }
.htl-legal-menu a:hover { color: var(--htl-brand); text-decoration: underline; }

/* WhatsApp launcher — right-hand side, label only, never the number */

.htl-wa-float {
	position: fixed;
	right: max(18px, env(safe-area-inset-right, 0px));
	bottom: max(18px, env(safe-area-inset-bottom, 0px));
	z-index: 80;
}

.htl-wa-fab {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 0;
	height: 56px;
	padding: 0 15px;
	border-radius: 999px;
	background: #25D366;
	color: #06301A;
	text-decoration: none;
	font-weight: 700;
	font-size: .92rem;
	box-shadow: 0 6px 20px rgba(18, 140, 74, .38);
	transition: gap .2s ease, padding .2s ease, background-color .2s ease;
	white-space: nowrap;
}

.htl-wa-fab:hover { background: #1FBA58; color: #06301A; gap: 9px; padding-right: 22px; }

.htl-wa-fab-icon { display: inline-flex; flex: 0 0 auto; }

.htl-wa-fab-text {
	max-width: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-width .24s ease, opacity .18s ease;
}

.htl-wa-fab:hover .htl-wa-fab-text,
.htl-wa-fab:focus-visible .htl-wa-fab-text {
	max-width: 180px;
	opacity: 1;
}

.htl-wa-pulse {
	position: absolute;
	inset: 0;
	border-radius: 999px;
	background: #25D366;
	opacity: .5;
	animation: htl-pulse 2.6s ease-out infinite;
	z-index: 1;
	pointer-events: none;
}

@keyframes htl-pulse {
	0% { transform: scale(1); opacity: .45; }
	70% { transform: scale(1.5); opacity: 0; }
	100% { transform: scale(1.5); opacity: 0; }
}

.htl-wa-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	max-width: 100%;
	min-width: 0;
}

/*
 * The label wraps by default. Only the top bar and the floating button are
 * sized for a single line; inside a narrow sidebar or footer column an
 * unwrappable label pushes the whole page sideways.
 */
.htl-wa-text { white-space: normal; overflow-wrap: anywhere; }
.htl-topbar-wa .htl-wa-text,
.htl-wa-fab .htl-wa-fab-text { white-space: nowrap; }

.htl-to-top {
	position: fixed;
	right: max(18px, env(safe-area-inset-right, 0px));
	bottom: calc(max(18px, env(safe-area-inset-bottom, 0px)) + 68px);
	z-index: 79;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 13px;
	border: 1px solid var(--htl-line);
	background: var(--htl-surface);
	color: var(--htl-ink-2);
	cursor: pointer;
	box-shadow: var(--htl-shadow-sm);
	transition: opacity .2s ease, transform .2s ease;
}

.htl-to-top:hover { color: var(--htl-brand); border-color: var(--htl-brand); }

/* ============================================ 15. comments */

.htl-comments { margin-top: 3em; padding-top: 2em; border-top: 1px solid var(--htl-line); }
.htl-comments-title { font-size: 1.3rem; margin-bottom: 1em; }

.htl-comment-list,
.htl-comment-list .children {
	list-style: none;
	margin: 0;
	padding: 0;
}

.htl-comment-list .children { margin-left: 26px; padding-left: 18px; border-left: 2px solid var(--htl-line); }

.htl-comment-list .comment-body {
	padding: 18px 0;
	border-bottom: 1px solid var(--htl-line);
}

.htl-comment-list .comment-author {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 600;
	margin-bottom: 6px;
}

.htl-comment-list .comment-author img { border-radius: 50%; }
.htl-comment-list .comment-metadata { font-size: .78rem; color: var(--htl-muted); margin-bottom: 10px; }
.htl-comment-list .comment-metadata a { color: inherit; text-decoration: none; }
.htl-comment-list .reply { margin-top: 8px; font-size: .84rem; font-weight: 600; }

.htl-comment-notes { font-size: .86rem; color: var(--htl-muted); }

.comment-form { display: grid; gap: 14px; margin-top: 2em; }
.comment-form p { margin: 0; display: grid; gap: 6px; }
.comment-form label { font-size: .85rem; font-weight: 600; color: var(--htl-ink-2); }

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	border: 1px solid var(--htl-line-strong);
	border-radius: 11px;
	background: var(--htl-bg);
	color: var(--htl-ink);
	font: inherit;
	font-size: .95rem;
	padding: 11px 14px;
}

.comment-form textarea { resize: vertical; min-height: 140px; }
.comment-form .form-submit { margin-top: 4px; }
.comment-form .submit { width: auto; }

.comment-reply-title { font-size: 1.2rem; }
.htl-comments-closed { color: var(--htl-muted); font-size: .9rem; }

/* 404 and empty states */

.htl-404 { padding-block: 50px 60px; text-align: center; }

.htl-404-code {
	display: block;
	font-family: var(--htl-font-mono);
	font-size: clamp(64px, 14vw, 130px);
	font-weight: 600;
	line-height: 1;
	color: var(--htl-bg-mint);
	margin-bottom: -.2em;
}

.htl-404 .htl-searchform { max-width: 520px; margin: 26px auto 40px; }

.htl-404-cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 36px;
	text-align: left;
	margin-bottom: 44px;
}

.htl-404-heading { font-size: 1.1rem; margin-bottom: .9em; text-align: left; }
.htl-404 .htl-grid { text-align: left; }

.htl-none {
	text-align: center;
	padding: 48px 24px;
	border: 1px dashed var(--htl-line-strong);
	border-radius: var(--htl-r-lg);
	background: var(--htl-bg-soft);
}

.htl-none-icon { color: var(--htl-line-strong); display: inline-flex; margin-bottom: 10px; }
.htl-none-title { font-size: 1.3rem; }
.htl-none p { color: var(--htl-muted); max-width: 52ch; margin-inline: auto; }
.htl-none .htl-searchform { max-width: 460px; margin: 22px auto 0; }
.htl-none-chips { justify-content: center; margin-top: 24px; }

.htl-page-links { margin: 2em 0; font-size: .9rem; display: flex; gap: 8px; flex-wrap: wrap; }

/* ============================================ 16. responsive */

@media (min-width: 1240px) {
	.htl-share-rail { display: flex; }
}

@media (max-width: 1180px) {
	.htl-numbers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.htl-calcband-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.htl-gp-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.htl-gp-process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1080px) {
	:root { --htl-gap: 20px; }

	.htl-layout { grid-template-columns: minmax(0, 1fr); gap: 44px; }
	.htl-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); display: grid; }
	.htl-hero-inner { grid-template-columns: minmax(0, 1fr); }
	.htl-trending-inner { grid-template-columns: minmax(0, 1fr); gap: 36px; }
	.htl-leadlist { grid-template-columns: minmax(0, 1fr); gap: 26px; }
	.htl-gpband-inner { grid-template-columns: minmax(0, 1fr); gap: 30px; }
	.htl-gp-hero-inner { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.htl-grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/*
 * Six items with labels this long need about 810px beside a 210px brand and a
 * 287px action group — which is 1400px of masthead. Below that the bar gives
 * way to the drawer rather than clipping an item, and the drawer button is on
 * screen at every width, so the full menu is always one tap away.
 */
@media (max-width: 1400px) {
	.htl-nav { display: none; }
}

@media (max-width: 900px) {
	.htl-header-calc span { display: none; }
	.htl-header-calc { padding: 9px 12px; }
	.htl-gp-tiers { grid-template-columns: minmax(0, 1fr); }
	.htl-gp-rules { grid-template-columns: minmax(0, 1fr); }
	.htl-404-cols { grid-template-columns: minmax(0, 1fr); gap: 30px; }
	.htl-footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
}

@media (max-width: 780px) {
	body { font-size: 16px; }

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

	.htl-card-wide { flex-direction: column; }
	.htl-card-wide .htl-card-media { flex: none; width: 100%; aspect-ratio: 16 / 9; min-height: 0; }
	.htl-card-wide .htl-card-body { padding: 18px 20px; }

	.htl-card-overlay { min-height: 340px; }

	.htl-hero-strip { grid-template-columns: minmax(0, 1fr); }
	.htl-hero-strip .htl-card-mini { flex-direction: row; }
	.htl-hero-strip .htl-card-mini .htl-card-media { width: 96px; flex: 0 0 96px; aspect-ratio: 1 / 1; }

	.htl-myth { grid-template-columns: minmax(0, 1fr); }
	.htl-prevnext { grid-template-columns: minmax(0, 1fr); }
	.htl-prevnext-item.is-next { text-align: left; }
	.htl-prevnext-item.is-next .htl-prevnext-label { justify-content: flex-start; }

	.htl-author-box { flex-direction: column; gap: 14px; }
	.htl-author-header-inner { flex-direction: column; gap: 16px; }
	.htl-form-grid { grid-template-columns: minmax(0, 1fr); }
	.htl-bars-key { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
	.htl-calc { padding: 20px; }
	.htl-pitch { padding: 22px; }
	.htl-topbar-text { display: none; }
	.htl-topbar-inner { justify-content: flex-end; }
}

@media (max-width: 620px) {
	.htl-wrap { padding-inline: 16px; }

	.htl-grid-2,
	.htl-grid-3,
	.htl-grid-4 { grid-template-columns: minmax(0, 1fr); }

	.htl-sidebar { grid-template-columns: minmax(0, 1fr); }
	.htl-numbers-grid { grid-template-columns: minmax(0, 1fr); }
	.htl-calcband-groups { grid-template-columns: minmax(0, 1fr); }
	.htl-gp-topics { grid-template-columns: minmax(0, 1fr); }
	.htl-gp-process { grid-template-columns: minmax(0, 1fr); }
	.htl-gpband-stats,
	.htl-gp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.htl-footer-top { grid-template-columns: minmax(0, 1fr); gap: 26px; }

	.htl-field,
	.htl-w-half,
	.htl-w-third { grid-column: span 6; }

	.htl-w-third { grid-column: span 3; }

	.htl-calc-fields { gap: 14px; }
	.htl-calc-actions .htl-btn { flex: 1 1 auto; }

	.htl-res-head { flex-direction: column; align-items: flex-start; }
	.htl-res-row { flex-direction: column; align-items: flex-start; gap: 4px; }
	.htl-res-row dd { text-align: left; }
	.htl-res-item { flex-direction: column; align-items: flex-start; }
	.htl-res-item-value { text-align: left; }

	.htl-share-row { flex-direction: column; align-items: flex-start; }
	.htl-brand-tagline { display: none; }
	.htl-brand-mark svg { width: 34px; height: 34px; }
	.htl-brand-name { font-size: 1.08rem; }
	.htl-icon-btn { width: 38px; height: 38px; }
	.htl-header-actions { gap: 6px; }

	.htl-newsletter-form input[type="email"] { flex: 1 1 100%; max-width: none; }
	.htl-newsletter-form .htl-btn { width: 100%; }

	.htl-wa-fab { height: 52px; }
}

@media (max-width: 440px) {
	/*
	 * Four action buttons plus the brand do not fit a 360px screen. The search
	 * toggle goes first, because the drawer it sits beside opens with a search
	 * field at the top.
	 */
	.htl-search-toggle { display: none; }
	.htl-header-inner { gap: 10px; }
	.htl-header-actions { gap: 5px; }
	.htl-brand-mark svg { width: 32px; height: 32px; }
	.htl-brand-name { font-size: 1rem; }
	.htl-icon-btn { width: 36px; height: 36px; }
	.htl-header-calc { padding: 8px 10px; }
}

@media (max-width: 420px) {
	.htl-w-third { grid-column: span 6; }
	.htl-unit-pair .htl-imperial { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.htl-bars-key { grid-template-columns: minmax(0, 1fr); }
	.htl-gpband-stats,
	.htl-gp-stats { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================ 17. print, motion */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
	html { scroll-behavior: auto; }
}

@media print {
	.htl-topbar,
	.htl-header,
	.htl-footer,
	.htl-sidebar,
	.htl-wa-float,
	.htl-to-top,
	.htl-share-rail,
	.htl-share-row,
	.htl-newsletter,
	.htl-related,
	.htl-progress,
	.htl-drawer { display: none !important; }

	body { background: #fff; color: #000; font-size: 12pt; }
	.htl-layout { display: block; }
	.htl-calc-result { break-inside: avoid; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
}