/* ==========================================================================
 * Handicap Toilet Guide Pro — Magazine layer
 *
 * Loaded after theme.css. Adds the photographic, editorial treatment:
 * display serif, cover-story grid, photo category tiles, review cards with
 * scores and award ribbons, and the affiliate conversion furniture.
 * ========================================================================== */

:root {
	/* Editorial surface — warmer than the clinical slate of the base theme. */
	--htg-paper-warm: #fbf9f6;
	--htg-paper-deep: #f4efe8;
	--htg-rule: #e7ded2;
	--htg-ink-warm: #171310;

	/* Action colour. Warm amber reads as "buy" and separates commercial CTAs
	   from the blue used for navigation and editorial links. */
	--htg-action: #ff9900;
	--htg-action-deep: #e17c00;
	--htg-action-ink: #24170a;

	--htg-award: #b8860b;
	--htg-verify: #0f766e;

	--htg-font-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, 'Times New Roman', serif;

	--htg-shadow-photo: 0 18px 40px -18px rgba(23, 19, 16, .45);
	--htg-shadow-lift: 0 2px 4px rgba(23,19,16,.04), 0 12px 28px -10px rgba(23,19,16,.18);
}

/* --------------------------------------------------------------------------
 * Editorial typography
 * -------------------------------------------------------------------------- */

body.htg-theme { background: var(--htg-paper-warm); }

.htg-hero__title,
.htg-section__title,
.htg-single__title,
.htg-feature__title,
.htg-review__title,
.htg-h2 {
	font-family: var(--htg-font-display);
	font-weight: 600;
	letter-spacing: -.018em;
	font-variation-settings: 'SOFT' 0, 'WONK' 0;
}

/* Kicker — the small all-caps label above a headline. */
.htg-kicker {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--htg-font-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--htg-blue);
	margin: 0 0 12px;
}
.htg-kicker::before {
	content: "";
	width: 22px;
	height: 2px;
	background: currentColor;
	flex: none;
}
.htg-kicker--light { color: rgba(255,255,255,.86); }
.htg-kicker--award { color: var(--htg-award); }

/* Section headers get a hairline rule for magazine rhythm. */
.htg-section__header {
	position: relative;
	max-width: 760px;
}
.htg-section--has-rule > .htg-container > .htg-section__header {
	border-top: 2px solid var(--htg-ink);
	padding-top: 18px;
	max-width: none;
}

.htg-section__title { font-size: clamp(1.9rem, 4vw, 3rem); }
.htg-section__lead { font-size: 1.05rem; color: var(--htg-ink-3); }

/* --------------------------------------------------------------------------
 * Photographic frames
 * -------------------------------------------------------------------------- */

.htg-figure {
	position: relative;
	overflow: hidden;
	background: var(--htg-paper-deep);
	border-radius: var(--htg-radius);
}
.htg-figure img,
img.htg-photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.htg-figure--wide  { aspect-ratio: 16 / 9; }
.htg-figure--photo { aspect-ratio: 3 / 2; }
.htg-figure--card  { aspect-ratio: 4 / 3; }
.htg-figure--tall  { aspect-ratio: 4 / 5; }

.htg-figure img { transition: transform .6s cubic-bezier(.2,.7,.3,1); }
a:hover > .htg-figure img,
.htg-feature:hover .htg-figure img,
.htg-cat:hover .htg-figure img,
.htg-review:hover .htg-figure img { transform: scale(1.045); }

/* Scrim so white text stays legible over any photograph. */
.htg-scrim::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(10,8,6,.88) 0%, rgba(10,8,6,.55) 38%, rgba(10,8,6,.12) 70%, rgba(10,8,6,0) 100%);
	pointer-events: none;
}

/* --------------------------------------------------------------------------
 * Hero — full-bleed photograph
 * -------------------------------------------------------------------------- */

.htg-hero {
	position: relative;
	isolation: isolate;
	padding: clamp(72px, 11vw, 132px) 0 clamp(56px, 8vw, 96px);
	background: #0b1220;
	overflow: hidden;
}
.htg-hero__photo {
	position: absolute;
	inset: 0;
	z-index: -2;
}
.htg-hero__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 42%;
	/* The source photo is 1024px wide; a light blur under the scrim keeps it
	   from looking soft on very large displays. */
	filter: saturate(.92) contrast(1.03);
}
.htg-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(105deg, rgba(8,12,22,.95) 0%, rgba(8,12,22,.86) 42%, rgba(8,12,22,.45) 72%, rgba(8,12,22,.30) 100%),
		linear-gradient(to top, rgba(8,12,22,.75), transparent 45%);
}
.htg-hero__glow, .htg-hero__grid { display: none; }

.htg-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	gap: clamp(32px, 5vw, 64px);
	align-items: center;
	position: relative;
}
.htg-hero__copy { max-width: 640px; }
.htg-hero__title {
	color: #fff;
	font-size: clamp(2.4rem, 5.4vw, 4.1rem);
	line-height: 1.04;
	margin: 0 0 20px;
	text-wrap: balance;
}
.htg-hero__title em {
	font-style: italic;
	color: var(--htg-aqua);
}
.htg-hero__lead {
	color: rgba(255,255,255,.82);
	font-size: clamp(1.05rem, 1.6vw, 1.24rem);
	line-height: 1.55;
	max-width: 52ch;
	margin: 0 0 28px;
}
.htg-hero__eyebrow.htg-eyebrow {
	background: rgba(255,255,255,.12);
	border: 1px solid rgba(255,255,255,.22);
	color: #fff;
	backdrop-filter: blur(6px);
}
.htg-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 28px; }
.htg-hero__trust {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
}
.htg-hero__trust li {
	display: flex;
	align-items: center;
	gap: 8px;
	color: rgba(255,255,255,.78);
	font-size: 13.5px;
	font-weight: 500;
}
.htg-hero__trust .htg-icon { width: 16px; height: 16px; color: var(--htg-aqua); flex: none; }

.htg-hero__quickstart { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.htg-hero__quickstart-label {
	color: rgba(255,255,255,.55);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .1em;
	font-weight: 700;
	margin-right: 4px;
}
.htg-hero .htg-chip--ghost {
	background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.2);
	color: rgba(255,255,255,.9);
}
.htg-hero .htg-chip--ghost:hover {
	background: rgba(255,255,255,.16);
	border-color: rgba(255,255,255,.4);
	color: #fff;
}

/* Hero side panel — "today's picks" as a magazine sidebar.
 *
 * The base theme styles this panel as dark translucent glass. Flipping it to a
 * solid light card means explicitly resetting every inherited dark-surface
 * property, not just the card background. */
.htg-hero__panel { position: relative; }
.htg-hero__illustration { display: none; }
.htg-hero__panel-card {
	background: rgba(255,255,255,.97);
	border-radius: var(--htg-radius-lg);
	padding: 26px;
	box-shadow: var(--htg-shadow-photo);
	border: 1px solid rgba(255,255,255,.5);
	backdrop-filter: none;
	color: var(--htg-ink-2);
}
.htg-hero__panel-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--htg-action);
	color: var(--htg-action-ink);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 6px 12px;
	border-radius: 999px;
	margin-bottom: 14px;
}
.htg-hero__panel-badge .htg-icon { width: 14px; height: 14px; }
.htg-hero__panel-title {
	font-family: var(--htg-font-display);
	font-size: 1.35rem;
	margin: 0 0 14px;
	color: var(--htg-navy);
}
.htg-hero__panel-list { list-style: none; margin: 14px 0 16px; padding: 0; display: block; }
.htg-hero__panel-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 0;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--htg-rule);
	border-radius: 0;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--htg-ink-2);
}
.htg-hero__panel-list li:last-child { border-bottom: 0; }
.htg-hero__panel-list li > span { flex: 1; min-width: 0; }
.htg-hero__panel-list .htg-icon { width: 16px; height: 16px; color: var(--htg-verify); flex: none; }
.htg-hero__panel-list .htg-link {
	font-size: 13px;
	font-weight: 700;
	color: var(--htg-action-deep);
	white-space: nowrap;
}
.htg-hero__panel-note {
	font-size: 11.5px;
	color: var(--htg-slate);
	margin: 0;
	line-height: 1.5;
}

/* --------------------------------------------------------------------------
 * Amazon / commercial CTA system
 * -------------------------------------------------------------------------- */

.htg-btn--primary.htg-amazon-cta,
.htg-btn--action {
	background: linear-gradient(180deg, #ffb020, var(--htg-action));
	color: var(--htg-action-ink);
	border: 1px solid var(--htg-action-deep);
	box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 8px 20px -8px rgba(225,124,0,.7);
	font-weight: 800;
	letter-spacing: -.005em;
}
.htg-btn--primary.htg-amazon-cta:hover,
.htg-btn--primary.htg-amazon-cta:focus,
.htg-btn--action:hover,
.htg-btn--action:focus {
	background: linear-gradient(180deg, #ffbb3d, #ffa31a);
	color: var(--htg-action-ink);
	transform: translateY(-1px);
	box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 12px 26px -8px rgba(225,124,0,.85);
}
.htg-amazon-cta .htg-btn__arrow { transition: transform .2s ease; }
.htg-amazon-cta:hover .htg-btn__arrow { transform: translateX(3px); }

/* Price-check microcopy under a CTA — sets the expectation that price is live
   on Amazon, which is also what the Associates terms require. */
.htg-price-note {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11.5px;
	color: var(--htg-slate);
	margin: 8px 0 0;
	line-height: 1.4;
}
.htg-price-note .htg-icon { width: 12px; height: 12px; flex: none; }

/* Award ribbon on a review card. */
.htg-award-ribbon {
	position: absolute;
	top: 14px;
	left: 0;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--htg-ink);
	color: #fff;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 7px 14px 7px 12px;
	border-radius: 0 999px 999px 0;
	box-shadow: 0 6px 16px -6px rgba(0,0,0,.5);
}
.htg-award-ribbon .htg-icon { width: 13px; height: 13px; color: var(--htg-action); }
.htg-award-ribbon--top { background: var(--htg-award); }
.htg-award-ribbon--value { background: var(--htg-verify); }

/* --------------------------------------------------------------------------
 * Cover story grid
 * -------------------------------------------------------------------------- */

.htg-covers {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: 26px;
}
.htg-covers__side { display: grid; gap: 26px; align-content: start; }

.htg-feature {
	position: relative;
	display: block;
	border-radius: var(--htg-radius-lg);
	overflow: hidden;
	background: var(--htg-ink);
	color: #fff;
	box-shadow: var(--htg-shadow-lift);
	transition: transform .25s ease, box-shadow .3s ease;
}
.htg-feature:hover { transform: translateY(-3px); box-shadow: var(--htg-shadow-photo); color: #fff; }
.htg-feature .htg-figure { border-radius: 0; height: 100%; }
.htg-feature--lead .htg-figure { aspect-ratio: 4 / 3; }
.htg-feature--side .htg-figure { aspect-ratio: 16 / 9; }

.htg-feature__body {
	position: absolute;
	inset: auto 0 0 0;
	padding: clamp(20px, 3vw, 34px);
	z-index: 1;
}
.htg-feature__title {
	color: #fff;
	margin: 0 0 8px;
	text-wrap: balance;
	line-height: 1.12;
}
.htg-feature--lead .htg-feature__title { font-size: clamp(1.6rem, 3vw, 2.5rem); }
.htg-feature--side .htg-feature__title { font-size: clamp(1.15rem, 1.7vw, 1.4rem); }
.htg-feature__excerpt {
	color: rgba(255,255,255,.8);
	font-size: 14.5px;
	line-height: 1.5;
	margin: 0 0 12px;
	max-width: 54ch;
}
.htg-feature--side .htg-feature__excerpt { display: none; }
.htg-feature__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	font-size: 12px;
	color: rgba(255,255,255,.65);
	margin: 0;
}
.htg-feature__meta strong { color: rgba(255,255,255,.9); font-weight: 600; }

/* --------------------------------------------------------------------------
 * Photo category tiles
 * -------------------------------------------------------------------------- */

.htg-cats {
	display: grid;
	/* Three across at desktop width: small tiles reduce the photograph to a
	   texture, which defeats the point of a photo-led navigation block. */
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
}
.htg-cat {
	position: relative;
	display: block;
	border-radius: var(--htg-radius-lg);
	overflow: hidden;
	background: var(--htg-ink);
	box-shadow: var(--htg-shadow-lift);
	transition: transform .25s ease, box-shadow .3s ease;
}
.htg-cat:hover { transform: translateY(-3px); box-shadow: var(--htg-shadow-photo); }
.htg-cat .htg-figure { border-radius: 0; aspect-ratio: 3 / 2; }
/* Lighter, lower scrim than the cover stories — these tiles carry two short
   lines of text, so the gradient only needs to cover the bottom third. */
.htg-cat .htg-scrim::after {
	background: linear-gradient(to top, rgba(10,8,6,.9) 0%, rgba(10,8,6,.6) 22%, rgba(10,8,6,.15) 48%, rgba(10,8,6,0) 68%);
}
.htg-cat__body {
	position: absolute;
	inset: auto 0 0 0;
	padding: 20px;
	z-index: 1;
}
.htg-cat__title {
	font-family: var(--htg-font-display);
	font-size: 1.2rem;
	color: #fff;
	margin: 0 0 4px;
	line-height: 1.2;
}
.htg-cat__count {
	font-size: 12px;
	color: rgba(255,255,255,.72);
	margin: 0;
	display: flex;
	align-items: center;
	gap: 6px;
}
.htg-cat__count .htg-icon { width: 13px; height: 13px; }

/* --------------------------------------------------------------------------
 * Review cards — the main affiliate surface
 * -------------------------------------------------------------------------- */

.htg-reviews {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	gap: 24px;
}
.htg-review {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--htg-paper);
	border: 1px solid var(--htg-rule);
	border-radius: var(--htg-radius-lg);
	overflow: hidden;
	transition: transform .25s ease, box-shadow .3s ease, border-color .25s ease;
}
.htg-review:hover {
	transform: translateY(-3px);
	box-shadow: var(--htg-shadow-lift);
	border-color: var(--htg-line-strong);
}
.htg-review--featured {
	border-color: var(--htg-action);
	box-shadow: 0 0 0 3px rgba(255,153,0,.14);
}

.htg-review__media { position: relative; }
.htg-review__media .htg-figure { border-radius: 0; aspect-ratio: 16 / 10; }
/* A soft vignette keeps very bright photographs from reading as blown-out
   white blocks, and gives the dark award ribbon something to sit against. */
.htg-review__media .htg-figure::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(to bottom, rgba(10,8,6,.20) 0%, rgba(10,8,6,0) 32%),
		linear-gradient(to top, rgba(10,8,6,.14) 0%, rgba(10,8,6,0) 26%);
}

/* Score dial sits on the photo edge. */
.htg-review__score {
	position: absolute;
	right: 16px;
	bottom: -22px;
	z-index: 2;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--htg-paper);
	border: 3px solid var(--htg-action);
	box-shadow: 0 6px 16px -6px rgba(23,19,16,.4);
	font-family: var(--htg-font-display);
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--htg-navy);
	line-height: 1;
}
.htg-review__score small {
	display: block;
	font-family: var(--htg-font-body);
	font-size: 8px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--htg-slate);
	font-weight: 700;
	margin-top: 1px;
}

.htg-review__body {
	padding: 26px 22px 22px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1;
}
.htg-review__title {
	font-size: 1.22rem;
	margin: 0;
	color: var(--htg-navy);
	line-height: 1.22;
}
.htg-review__verdict {
	font-size: 14.5px;
	color: var(--htg-ink-3);
	line-height: 1.55;
	margin: 0;
}
.htg-review__verdict strong { color: var(--htg-ink); font-weight: 650; }

.htg-review__specs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: var(--htg-rule);
	border: 1px solid var(--htg-rule);
	border-radius: var(--htg-radius-sm);
	overflow: hidden;
	margin: 2px 0;
}
.htg-review__specs > div { background: var(--htg-paper-warm); padding: 9px 11px; }
.htg-review__specs dt {
	font-size: 10px;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--htg-slate);
	font-weight: 700;
	margin: 0 0 2px;
}
.htg-review__specs dd { font-size: 13px; margin: 0; color: var(--htg-ink-2); font-weight: 600; }

.htg-review__pros { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.htg-review__pros li {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	font-size: 13.5px;
	color: var(--htg-ink-2);
	line-height: 1.45;
}
.htg-review__pros .htg-icon { width: 15px; height: 15px; color: var(--htg-verify); flex: none; margin-top: 2px; }

.htg-review__cta { margin-top: auto; padding-top: 6px; display: grid; gap: 8px; }
.htg-review__cta .htg-btn { width: 100%; justify-content: center; }
.htg-review__cta .htg-btn--ghost { font-size: 13.5px; padding: 10px 16px; }

/* --------------------------------------------------------------------------
 * Persona cards with photography
 * -------------------------------------------------------------------------- */

/* The card carries 24px of padding; the photo has to cancel it to bleed to the
   card edge, and the head loses the 48px icon column now the icon sits on the
   photograph instead. */
.htg-archetype {
	--htg-arch-pad: 24px;
	overflow: hidden;
	padding-top: 0;
}
.htg-archetype__head {
	display: block;
	grid-template-columns: none;
}
.htg-archetype__title,
.htg-archetype__tag { grid-column: auto; }

.htg-archetype__photo {
	position: relative;
	/* Bottom margin clears the icon's 18px overhang with room to spare. */
	margin: 0 calc(-1 * var(--htg-arch-pad)) 30px;
}
.htg-archetype__photo .htg-figure { border-radius: 0; aspect-ratio: 16 / 9; }
.htg-archetype__photo .htg-archetype__icon {
	position: absolute;
	left: var(--htg-arch-pad);
	bottom: -18px;
	z-index: 2;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: var(--htg-paper);
	display: grid;
	place-items: center;
	box-shadow: 0 6px 14px -6px rgba(23,19,16,.5);
	color: var(--htg-blue);
}
.htg-archetype__photo .htg-archetype__icon .htg-icon { width: 20px; height: 20px; }

/* --------------------------------------------------------------------------
 * Sticky conversion bar
 * -------------------------------------------------------------------------- */

.htg-sticky-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 90;
	background: rgba(255,255,255,.97);
	backdrop-filter: blur(10px);
	border-top: 1px solid var(--htg-rule);
	box-shadow: 0 -8px 30px -12px rgba(23,19,16,.3);
	transform: translateY(110%);
	transition: transform .32s cubic-bezier(.2,.7,.3,1);
	padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
}
.htg-sticky-bar.is-visible { transform: translateY(0); }
.htg-sticky-bar__inner {
	display: flex;
	align-items: center;
	gap: 16px;
}
.htg-sticky-bar__copy { flex: 1; min-width: 0; }
.htg-sticky-bar__title {
	font-family: var(--htg-font-display);
	font-size: 15px;
	font-weight: 600;
	color: var(--htg-navy);
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.htg-sticky-bar__note {
	font-size: 11.5px;
	color: var(--htg-slate);
	margin: 2px 0 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.htg-sticky-bar__actions { display: flex; gap: 8px; flex: none; }
.htg-sticky-bar__close {
	background: none;
	border: 0;
	color: var(--htg-slate);
	font-size: 20px;
	line-height: 1;
	padding: 6px 8px;
	border-radius: 8px;
	flex: none;
}
.htg-sticky-bar__close:hover { background: var(--htg-paper-deep); color: var(--htg-ink); }

/* The base theme's own mobile CTA is superseded by the sticky bar. */
.htg-mobile-sticky-cta { display: none !important; }

/* --------------------------------------------------------------------------
 * Inline mid-article CTA block
 * -------------------------------------------------------------------------- */

.htg-inline-cta {
	display: grid;
	grid-template-columns: minmax(0, 150px) minmax(0, 1fr);
	gap: 20px;
	align-items: center;
	background: var(--htg-paper);
	border: 1px solid var(--htg-rule);
	border-left: 4px solid var(--htg-action);
	border-radius: var(--htg-radius);
	padding: 18px;
	margin: 32px 0;
	box-shadow: var(--htg-shadow-sm);
}
.htg-inline-cta .htg-figure { aspect-ratio: 1; border-radius: var(--htg-radius-sm); }
.htg-inline-cta__title { font-family: var(--htg-font-display); font-size: 1.15rem; margin: 0 0 6px; color: var(--htg-navy); }
.htg-inline-cta__text { font-size: 14px; color: var(--htg-ink-3); margin: 0 0 12px; line-height: 1.5; }

/* --------------------------------------------------------------------------
 * Comparison table
 * -------------------------------------------------------------------------- */

.htg-compare__table thead th {
	background: var(--htg-ink);
	color: #fff;
	font-family: var(--htg-font-body);
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	font-weight: 700;
	white-space: nowrap;
}
.htg-compare__table tbody th[scope="row"] {
	font-family: var(--htg-font-display);
	font-size: 15px;
	font-weight: 600;
	color: var(--htg-navy);
	min-width: 210px;
}
.htg-compare__best { background: linear-gradient(90deg, rgba(255,153,0,.09), transparent 60%); }
.htg-compare__best th[scope="row"] { box-shadow: inset 3px 0 0 var(--htg-action); }
.htg-compare__table .htg-pill {
	background: var(--htg-action);
	color: var(--htg-action-ink);
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 3px 8px;
	border-radius: 999px;
	display: inline-block;
	margin-bottom: 4px;
}
.htg-compare__table .htg-btn { padding: 9px 14px; font-size: 13px; white-space: nowrap; }
.htg-score-pill {
	display: inline-grid;
	place-items: center;
	min-width: 40px;
	padding: 5px 8px;
	border-radius: 8px;
	background: var(--htg-navy);
	color: #fff;
	font-family: var(--htg-font-display);
	font-weight: 700;
	font-size: 14px;
}

/* --------------------------------------------------------------------------
 * Trust section
 * -------------------------------------------------------------------------- */

.htg-trust__lead {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(24px, 4vw, 48px);
	align-items: center;
	margin-bottom: 40px;
}
.htg-trust__lead .htg-figure { aspect-ratio: 3 / 2; border-radius: var(--htg-radius-lg); box-shadow: var(--htg-shadow-lift); }
.htg-trust__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 22px; }
.htg-trust__stat { border-top: 2px solid var(--htg-ink); padding-top: 10px; }
.htg-trust__stat b {
	display: block;
	font-family: var(--htg-font-display);
	font-size: clamp(1.5rem, 3vw, 2rem);
	color: var(--htg-navy);
	line-height: 1;
}
.htg-trust__stat span { font-size: 12px; color: var(--htg-slate); }

.htg-editor__avatar { background: var(--htg-navy); color: #fff; font-family: var(--htg-font-display); }

/* --------------------------------------------------------------------------
 * Article cards + single-article editorial typography
 * -------------------------------------------------------------------------- */

.htg-post-card { border-color: var(--htg-rule); }
.htg-post-card__media { aspect-ratio: 3 / 2; }
.htg-post-card__title { font-family: var(--htg-font-display); font-size: 1.15rem; line-height: 1.25; }
.htg-post-card__meta { text-transform: uppercase; letter-spacing: .08em; font-weight: 600; font-size: 11px; }

.htg-single__title,
.htg-page__title {
	font-family: var(--htg-font-display);
	font-weight: 600;
	letter-spacing: -.018em;
	font-size: clamp(2.1rem, 4.6vw, 3.3rem);
	line-height: 1.08;
	text-wrap: balance;
}
.htg-single__media,
.htg-page__media { border-radius: var(--htg-radius-lg); overflow: hidden; box-shadow: var(--htg-shadow-lift); margin-top: 24px; }
.htg-page__content { font-size: 1.09rem; line-height: 1.75; color: var(--htg-ink-2); }
.htg-page__content h2, .htg-page__content h3 { font-family: var(--htg-font-display); }
.htg-single__content { font-size: 1.09rem; line-height: 1.75; color: var(--htg-ink-2); }
.htg-single__content > p:first-of-type { font-size: 1.2rem; color: var(--htg-ink); line-height: 1.6; }
.htg-single__content h2 {
	font-family: var(--htg-font-display);
	font-size: clamp(1.5rem, 3vw, 2rem);
	margin-top: 1.8em;
	padding-top: .5em;
	border-top: 1px solid var(--htg-rule);
}
.htg-single__content h3 { font-family: var(--htg-font-display); margin-top: 1.6em; }
.htg-single__content blockquote {
	margin: 32px 0;
	padding: 4px 0 4px 24px;
	border-left: 3px solid var(--htg-action);
	font-family: var(--htg-font-display);
	font-size: 1.3rem;
	line-height: 1.4;
	color: var(--htg-navy);
	font-style: italic;
}
.htg-single__content img { border-radius: var(--htg-radius); }
.htg-single__content a { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
/* Buttons injected into article content are still <a> elements — the prose
   underline must not follow them. */
.htg-single__content .htg-btn,
.htg-page__content .htg-btn { text-decoration: none; }

/* End-of-article picks */
.htg-article-picks {
	margin: 44px 0 0;
	padding: 26px;
	background: var(--htg-paper);
	border: 1px solid var(--htg-rule);
	border-radius: var(--htg-radius-lg);
}
.htg-article-picks__title {
	font-family: var(--htg-font-display);
	font-size: 1.3rem;
	margin: 0 0 18px;
	color: var(--htg-navy);
}
.htg-article-picks__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 18px;
}
.htg-article-picks__item { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.htg-article-picks__item .htg-figure { aspect-ratio: 3 / 2; border-radius: var(--htg-radius-sm); }
.htg-article-picks__item .htg-kicker { margin: 0; font-size: 10px; }
.htg-article-picks__name {
	font-family: var(--htg-font-display);
	font-size: 1rem;
	line-height: 1.25;
	margin: 0 0 4px;
	color: var(--htg-navy);
}
.htg-article-picks__body { display: flex; flex-direction: column; flex: 1; }
.htg-article-picks__body .htg-btn {
	margin-top: auto;
	width: 100%;
	justify-content: center;
	font-size: 13.5px;
	padding: 10px 14px;
}

/* --------------------------------------------------------------------------
 * Newsletter
 * -------------------------------------------------------------------------- */

.htg-section--newsletter .htg-newsletter-panel {
	background:
		linear-gradient(105deg, rgba(11,18,32,.94), rgba(11,18,32,.78)),
		var(--htg-newsletter-bg, none) center/cover;
	border-radius: var(--htg-radius-lg);
	padding: clamp(28px, 5vw, 56px);
	color: #fff;
}

/* --------------------------------------------------------------------------
 * Responsive
 * -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.htg-hero__inner { grid-template-columns: 1fr; }
	.htg-hero__panel { max-width: 520px; }
	.htg-covers { grid-template-columns: 1fr; }
	.htg-trust__lead { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
	.htg-hero { padding-top: 56px; }
	.htg-hero__title { font-size: clamp(2rem, 8vw, 2.6rem); }
	.htg-hero__cta .htg-btn { width: 100%; justify-content: center; }
	.htg-feature--lead .htg-figure { aspect-ratio: 3 / 2; }
	.htg-inline-cta { grid-template-columns: 1fr; }
	.htg-inline-cta .htg-figure { max-width: 160px; }
	.htg-trust__stats { grid-template-columns: 1fr; }
	.htg-sticky-bar__note { display: none; }
	.htg-sticky-bar__title { white-space: normal; font-size: 13.5px; line-height: 1.25; }
	.htg-review__specs { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.htg-figure img,
	.htg-feature,
	.htg-cat,
	.htg-review,
	.htg-sticky-bar { transition: none !important; }
	.htg-feature:hover,
	.htg-cat:hover,
	.htg-review:hover { transform: none; }
	a:hover > .htg-figure img,
	.htg-feature:hover .htg-figure img,
	.htg-cat:hover .htg-figure img,
	.htg-review:hover .htg-figure img { transform: none; }
}

/* High-contrast / forced-colors safety: keep scrim text readable. */
@media (forced-colors: active) {
	.htg-scrim::after { display: none; }
	.htg-feature__body, .htg-cat__body { position: static; background: Canvas; }
	.htg-feature__title, .htg-cat__title, .htg-feature__excerpt, .htg-cat__count { color: CanvasText; }
}