/* =========================================================================
 * HDM Blog — mobile-first, CLS-free article design system.
 * Scoped under body.hdm-blog-article. Inherits the site font (Sen).
 * Asset is filemtime-versioned (blog.php) so edits bust cache automatically.
 * ========================================================================= */

body.hdm-blog-article {
	--hdmb-ink: #131a24;
	--hdmb-muted: #4f5867;
	--hdmb-faint: #717b8a;
	--hdmb-line: #e6eaf0;
	--hdmb-soft: #f6f8fc;
	--hdmb-soft-2: #eef2f9;
	--hdmb-bg: #ffffff;
	--hdmb-accent: #1d4ed8;        /* brand blue (--hdm-mm-blue) */
	--hdmb-accent-ink: #1740b3;    /* darker brand blue for hover / strong ink */
	--hdmb-accent-soft: #eaf1fe;   /* soft brand-blue tint (replaces grey fills) */
	--hdmb-pos: #2cba0b;           /* brand green (--hdm-mm-green) */
	--hdmb-neg: #d1495b;
	--hdmb-radius: 10px;
	--hdmb-radius-sm: 8px;
	--hdmb-shadow: 0 1px 2px rgba(20, 27, 38, .05), 0 10px 28px rgba(20, 27, 38, .07);
	--hdmb-shadow-sm: 0 1px 2px rgba(20, 27, 38, .06);
	--hdmb-prose: 100%; /* uniform width — every section matches the site content box, no breakout */
}

/* ---- Shell / layout ---------------------------------------------------- */
body.hdm-blog-article .hdm-blog-shell { background: var(--hdmb-bg); width: 100%; }
/* Let the article use the theme's full content width; we control width inside. */
body.hdm-blog-article #primary.content-area,
body.hdm-blog-article #main.site-main { max-width: 100%; width: 100%; float: none; margin: 0; }
/* Suppress the theme's duplicate breadcrumb + post sidebar (we render our own). */
body.hdm-blog-article .woocommerce-breadcrumb,
body.hdm-blog-article #secondary.widget-area { display: none; }

.hdm-blog {
	max-width: 1197px; /* match the site's .col-full content box for consistency with other pages */
	margin: 0 auto;
	padding: 18px 18px 56px;
	color: var(--hdmb-ink);
	font-size: 1.0625rem;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
.hdm-blog * { box-sizing: border-box; }
.hdm-blog-icon { flex: 0 0 auto; vertical-align: -.15em; }
/* The theme adds padding-left to content <ul>/<ol>; zero it on OUR component lists
   (list-style:none custom layouts) so cards / takeaways / TOC etc. are not pushed
   right (left>right asymmetry). Prose lists in the body keep their bullet indent. */
body.hdm-blog-article ul[class*="hdm-blog-"],
body.hdm-blog-article ol[class*="hdm-blog-"]:not(.hdm-blog-toc__list) { padding-left: 0 !important; padding-right: 0 !important; }
/* the TOC <ol> keeps room for its 1.-9. number markers (excluded above) so they are not cut */
body.hdm-blog-article .hdm-blog-toc__list { padding-left: 1.7em !important; padding-right: 0 !important; }
/* Override the theme's justified body text (.single-post .content-area .site-main p,
   specificity 0-3-1) — justify creates ugly rivers, especially on mobile. */
.hdm-blog, .hdm-blog p, .hdm-blog li, .hdm-blog h1, .hdm-blog h2, .hdm-blog h3,
.hdm-blog h4, .hdm-blog span, .hdm-blog a, .hdm-blog time, .hdm-blog td, .hdm-blog th { text-align: left !important; }

/* Centered readable text column. Rich components (ranking, table, popular)
   intentionally break out to the full 1040px container. */
.hdm-blog-crumbs,
.hdm-blog-title,
.hdm-blog-byline,
.hdm-blog-hero,
.hdm-blog-body > h2, .hdm-blog-body > h3, .hdm-blog-body > h4,
.hdm-blog-body > p, .hdm-blog-body > ul, .hdm-blog-body > ol,
.hdm-blog-body > blockquote, .hdm-blog-body > figure,
.hdm-blog-tldr, .hdm-blog-toc, .hdm-blog-faq, .hdm-blog-sources {
	max-width: var(--hdmb-prose);
	margin-left: auto;
	margin-right: auto;
}

/* ---- Breadcrumb -------------------------------------------------------- */
.hdm-blog-crumbs { margin: 6px 0 14px; }
.hdm-blog-crumbs ol {
	display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
	margin: 0; padding: 0; list-style: none; font-size: .8125rem; color: var(--hdmb-faint);
}
.hdm-blog-crumbs li { display: flex; align-items: center; gap: 6px; }
.hdm-blog-crumbs li:not(:last-child)::after { content: "/"; color: var(--hdmb-line); }
.hdm-blog-crumbs a { color: var(--hdmb-muted); text-decoration: none; }
.hdm-blog-crumbs a:hover { color: var(--hdmb-accent); }
.hdm-blog-crumbs [aria-current="page"] span { color: var(--hdmb-faint); }

/* ---- Header / title / byline ------------------------------------------ */
.hdm-blog-title {
	font-size: clamp(1.8rem, 4vw + 1rem, 2.7rem);
	line-height: 1.16; letter-spacing: -.015em; font-weight: 800;
	margin: 0 0 18px; color: var(--hdmb-ink);
}
.hdm-blog-byline { display: flex; flex-direction: column; gap: 16px; margin-top: 6px; }
.hdm-blog-byline__chip {
	display: inline-flex; align-self: flex-start; align-items: center; gap: 13px;
	background: var(--hdmb-bg); border: 1px solid var(--hdmb-line); border-radius: var(--hdmb-radius);
	padding: 12px 18px 12px 14px; box-shadow: var(--hdmb-shadow-sm); max-width: 100%;
}
.hdm-blog-byline__avatar { flex: 0 0 auto; }
.hdm-blog-byline__photo, .hdm-blog-byline__initials {
	width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; object-fit: cover;
	background: linear-gradient(140deg, var(--hdmb-accent), var(--hdmb-accent-ink)); color: #fff; font-weight: 800; font-size: 1.2rem;
}
.hdm-blog-byline__who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hdm-blog-byline__name { font-weight: 800; font-size: 1rem; color: var(--hdmb-ink); }
.hdm-blog-byline__name a { color: var(--hdmb-ink); text-decoration: none; }
.hdm-blog-byline__name a:hover { color: var(--hdmb-accent); }
.hdm-blog-byline__title { color: var(--hdmb-muted); font-size: .85rem; }
.hdm-blog-byline__meta {
	display: flex; flex-wrap: wrap; gap: 18px 28px;
	padding-top: 16px; border-top: 1px solid var(--hdmb-line);
}
.hdm-blog-byline__metaitem { display: flex; align-items: center; gap: 10px; }
.hdm-blog-byline__metaicon {
	width: 36px; height: 36px; flex: 0 0 auto; border-radius: var(--hdmb-radius-sm); display: grid; place-items: center;
	background: var(--hdmb-accent-soft); color: var(--hdmb-accent);
}
.hdm-blog-byline__metatext { display: flex; flex-direction: column; line-height: 1.25; }
.hdm-blog-byline__metalabel { font-size: .72rem; color: var(--hdmb-faint); font-weight: 600; }
.hdm-blog-byline__metaval { font-size: .9rem; font-weight: 700; color: var(--hdmb-ink); }
.hdm-blog-byline__reviewer { display: inline-flex; align-items: center; gap: 6px; color: var(--hdmb-pos); font-size: .85rem; font-weight: 600; margin: 0; }

/* ---- Hero -------------------------------------------------------------- */
.hdm-blog-hero { margin: 22px 0 8px; }
.hdm-blog-hero__img { width: 100%; height: auto; display: block; border-radius: var(--hdmb-radius); background: var(--hdmb-soft); }

/* ---- Body typography (prose capped to a readable measure) -------------- */
.hdm-blog-body { margin-top: 8px; }
.hdm-blog-body > h2, .hdm-blog-body > h3, .hdm-blog-body > h4,
.hdm-blog-body > p, .hdm-blog-body > ul, .hdm-blog-body > ol,
.hdm-blog-body > blockquote, .hdm-blog-body > figure,
.hdm-blog-tldr, .hdm-blog-toc { max-width: var(--hdmb-prose); }
.hdm-blog-body > h2, .hdm-blog-ranking__title, .hdm-blog-faq__title, .hdm-blog-sources__title, .hdm-blog-tableblock__caption {
	font-size: clamp(1.4rem, 1.6vw + 1rem, 1.75rem); line-height: 1.25; letter-spacing: -.01em; font-weight: 800;
	margin: 2em 0 .5em; scroll-margin-top: 90px;
}
.hdm-blog-body > h3 { font-size: 1.25rem; font-weight: 700; line-height: 1.3; margin: 1.5em 0 .4em; scroll-margin-top: 90px; }
.hdm-blog-body > h4 { font-size: 1.08rem; font-weight: 700; margin: 1.3em 0 .35em; }
.hdm-blog-body p { margin: 0 0 1.1em; }
.hdm-blog-body a:not([class]) { color: var(--hdmb-accent-ink); text-underline-offset: 2px; }
.hdm-blog-body a:not([class]):hover { color: var(--hdmb-accent); }
.hdm-blog-body ul, .hdm-blog-body ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.hdm-blog-body li { margin: .35em 0; }
.hdm-blog-body img { max-width: 100%; height: auto; border-radius: var(--hdmb-radius-sm); }
/* Bound tall/square content images so they don't dominate at full width, and centre them.
   Wide banner images still fill the column; only the over-tall ones are capped. */
.hdm-blog-body figure { margin: 1.6em auto; text-align: center; }
.hdm-blog-body figure img { max-height: 480px; width: auto; }
.hdm-blog-body figure.hdm-blog-video, .hdm-blog-body figure.hdm-blog-embed { text-align: initial; }
.hdm-blog-body figure.hdm-blog-video img, .hdm-blog-body figure.hdm-blog-embed img { max-height: none; }
.hdm-blog-body figcaption { font-size: .8125rem; color: var(--hdmb-faint); text-align: center; margin-top: 6px; }
.hdm-blog-body blockquote { margin: 1.4em 0; padding: 4px 0 4px 18px; border-left: 4px solid var(--hdmb-accent); color: var(--hdmb-muted); font-style: italic; }

/* ---- Responsive video / map embeds (CLS-free via aspect-ratio) -------- */
.hdm-blog-video, .hdm-blog-embed { margin: 1.4em 0; }
.hdm-blog-video { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: var(--hdmb-radius); overflow: hidden; }
.hdm-blog-video iframe, .hdm-blog-video video {
	position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; object-fit: contain;
}
.hdm-blog-embed { aspect-ratio: 16 / 9; border-radius: var(--hdmb-radius); overflow: hidden; border: 1px solid var(--hdmb-line); }
.hdm-blog-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
/* Video/map lead-in line (the "Watch ... in action" pointer) */
.hdm-blog-video-lead { font-weight: 600; margin-bottom: .4em !important; }

/* ---- Key takeaways (TL;DR) -------------------------------------------- */
.hdm-blog-tldr {
	background: linear-gradient(180deg, var(--hdmb-accent-soft), var(--hdmb-soft));
	border: 1px solid var(--hdmb-soft-2); border-radius: var(--hdmb-radius); padding: 18px 20px; margin: 22px 0;
}
.hdm-blog-tldr__title { font-size: 1.05rem; font-weight: 800; margin: 0 0 10px; color: var(--hdmb-accent-ink); }
.hdm-blog-tldr__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.hdm-blog-tldr__list li { display: flex; gap: 9px; align-items: flex-start; }
.hdm-blog-tldr__list .hdm-blog-icon { color: var(--hdmb-pos); margin-top: 3px; }

/* ---- Table of contents ------------------------------------------------- */
.hdm-blog-toc { border: 1px solid var(--hdmb-line); border-radius: var(--hdmb-radius); padding: 14px 18px; margin: 22px 0; background: var(--hdmb-bg); }
.hdm-blog-toc__title { display: flex; align-items: center; gap: 7px; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--hdmb-faint); margin: 0 0 8px; }
.hdm-blog-toc__list { margin: 0; padding-left: 1.1em; display: grid; gap: 5px; }
.hdm-blog-toc__list a { color: var(--hdmb-muted); text-decoration: none; }
.hdm-blog-toc__list a:hover, .hdm-blog-toc__list a.is-active { color: var(--hdmb-accent); }

/* ---- Ranking cards ----------------------------------------------------- */
.hdm-blog-ranking { margin: 30px 0; }
.hdm-blog-ranking__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.hdm-blog-card {
	position: relative; display: flex; flex-direction: column; overflow: hidden; height: 100%;
	border: 1px solid var(--hdmb-line); border-radius: var(--hdmb-radius); background: var(--hdmb-bg);
	box-shadow: var(--hdmb-shadow-sm); transition: box-shadow .18s ease, transform .18s ease;
}
.hdm-blog-card:hover { box-shadow: var(--hdmb-shadow); transform: translateY(-2px); }
.hdm-blog-card--top { border-color: var(--hdmb-accent); box-shadow: 0 0 0 1px var(--hdmb-accent), var(--hdmb-shadow); }

.hdm-blog-card__media {
	position: relative; background: linear-gradient(160deg, #fff, var(--hdmb-soft));
	display: flex; align-items: center; justify-content: center; padding: 16px;
}
.hdm-blog-card__img { width: 100%; max-height: 230px; object-fit: contain; aspect-ratio: 16 / 10; }
.hdm-blog-card__rank {
	position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 4px;
	background: var(--hdmb-ink); color: #fff; font-weight: 800; font-size: .82rem;
	padding: 5px 11px; border-radius: 999px; box-shadow: var(--hdmb-shadow-sm);
}
.hdm-blog-card--top .hdm-blog-card__rank { background: var(--hdmb-accent); }
.hdm-blog-card--top .hdm-blog-card__rank .hdm-blog-icon { color: #ffd64a; }

.hdm-blog-card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.hdm-blog-card__tag {
	align-self: flex-start; display: inline-flex; align-items: center; gap: 5px;
	background: var(--hdmb-accent-soft); color: var(--hdmb-accent-ink);
	font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 4px 10px; border-radius: 999px;
}
.hdm-blog-card__tag .hdm-blog-icon { color: var(--hdmb-accent); }
.hdm-blog-card__name { font-size: 1.22rem; font-weight: 800; line-height: 1.25; margin: 0; }
.hdm-blog-card__name a { color: var(--hdmb-ink); text-decoration: none; }
.hdm-blog-card__name a:hover { color: var(--hdmb-accent); }
.hdm-blog-card__meta { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: baseline; }
.hdm-blog-card__brand { color: var(--hdmb-faint); font-size: .85rem; }
.hdm-blog-card__price { color: var(--hdmb-accent-ink); font-weight: 800; font-size: 1.18rem; margin-left: auto; }
.hdm-blog-card__blurb { color: var(--hdmb-muted); font-size: .95rem; }
.hdm-blog-card__proscons { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 22px; margin-top: 4px; }
.hdm-blog-card__pros, .hdm-blog-card__cons { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .9rem; align-content: start; }
.hdm-blog-card__pclabel { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--hdmb-faint); }
.hdm-blog-card__pros li, .hdm-blog-card__cons li { display: flex; gap: 8px; align-items: flex-start; }
.hdm-blog-card__pros .hdm-blog-icon { color: var(--hdmb-pos); margin-top: 2px; }
.hdm-blog-card__cons .hdm-blog-icon { color: var(--hdmb-neg); margin-top: 2px; }
.hdm-blog-card__cta {
	display: inline-flex; justify-content: center; align-items: center; gap: 7px;
	background: var(--hdmb-accent); color: #fff; text-decoration: none; font-weight: 700; font-size: .95rem;
	padding: 12px 20px; border-radius: var(--hdmb-radius-sm); margin-top: auto; align-self: flex-start; transition: background .15s ease;
}
.hdm-blog-card__cta, .hdm-blog-card__cta:hover, .hdm-blog-card__cta:visited { color: #fff; }
.hdm-blog-card__cta:hover { background: var(--hdmb-accent-ink); }
.hdm-blog-card__cta .hdm-blog-icon { transition: transform .15s ease; }
.hdm-blog-card__cta:hover .hdm-blog-icon { transform: translateX(3px); }

/* ---- Comparison table -------------------------------------------------- */
.hdm-blog-tableblock { margin: 26px 0; }
.hdm-blog-tableblock__caption { margin: 0 0 10px; }
.hdm-blog-tablewrap { overflow-x: auto; border: 1px solid var(--hdmb-line); border-radius: var(--hdmb-radius); -webkit-overflow-scrolling: touch; }
.hdm-blog-table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 540px; }
.hdm-blog-table th, .hdm-blog-table td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--hdmb-line); }
.hdm-blog-table thead th { background: var(--hdmb-soft); font-weight: 700; position: sticky; top: 0; }
.hdm-blog-table th[scope="row"] { font-weight: 700; color: var(--hdmb-ink); }
.hdm-blog-table tbody tr:last-child th, .hdm-blog-table tbody tr:last-child td { border-bottom: 0; }

/* Content tables (raw <table> migrated into post_content) — wrapped by
   hdm_blog_wrap_tables() so on mobile they scroll inside their own box, never
   force the whole page wide. Strong, unambiguous styling so a faint imported
   table reads as a real, contained, branded table. */
.hdm-blog-tablewrap { max-width: 100%; display: block; }
.hdm-blog-tablewrap--content {
	margin: 22px 0;
	background: var(--hdmb-bg);
	border: 1px solid #cdd6e3;                       /* visible box (token --hdmb-line is too faint here) */
	box-shadow: 0 1px 3px rgba(19, 26, 36, .07);
}
.hdm-blog-tablewrap--content .hdm-blog-table { min-width: 460px; font-size: .88rem; }
.hdm-blog-tablewrap--content .hdm-blog-table th,
.hdm-blog-tablewrap--content .hdm-blog-table td { border-bottom: 1px solid #e1e7f0; vertical-align: top; }
/* Shaded brand header for tables that declare a <thead>. */
.hdm-blog-tablewrap--content .hdm-blog-table thead th {
	background: var(--hdmb-accent-soft);
	color: var(--hdmb-accent-ink);
	border-bottom: 2px solid var(--hdmb-accent);
	white-space: nowrap;
	font-weight: 700;
}
/* Zebra rows so the grid reads clearly even on key/value tables with no header. */
.hdm-blog-tablewrap--content .hdm-blog-table tbody tr:nth-child(even) > * { background: var(--hdmb-soft); }
.hdm-blog-tablewrap--content .hdm-blog-table tbody tr:last-child > * { border-bottom: 0; }
.hdm-blog-tablewrap--content .hdm-blog-table a { color: var(--hdmb-accent); font-weight: 600; }
.hdm-blog-tablewrap--content .hdm-blog-table tbody th[scope="row"],
.hdm-blog-tablewrap--content .hdm-blog-table tbody tr > :first-child { font-weight: 700; color: var(--hdmb-ink); }
/* Never let a stray wide media element push the page horizontally on mobile. */
.hdm-blog-body img, .hdm-blog-body pre, .hdm-blog-body iframe, .hdm-blog-body video { max-width: 100%; }
@media (max-width: 560px) {
	.hdm-blog-table th, .hdm-blog-table td { padding: 9px 11px; font-size: .84rem; }
}

/* ---- FAQ (CSS-first accordion, no CLS) -------------------------------- */
.hdm-blog-faq { margin: 30px 0; max-width: var(--hdmb-prose); }
.hdm-blog-faq__list { display: grid; gap: 10px; }
.hdm-blog-faq__item { border: 1px solid var(--hdmb-line); border-radius: var(--hdmb-radius-sm); background: var(--hdmb-bg); overflow: hidden; }
.hdm-blog-faq__q { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 15px 16px; font-weight: 700; cursor: pointer; list-style: none; color: var(--hdmb-ink); }
.hdm-blog-faq__q::-webkit-details-marker { display: none; }
.hdm-blog-faq__q .hdm-blog-icon { color: var(--hdmb-faint); transition: transform .2s ease; }
.hdm-blog-faq__item[open] .hdm-blog-faq__q .hdm-blog-icon { transform: rotate(180deg); }
.hdm-blog-faq__item[open] .hdm-blog-faq__q { color: var(--hdmb-accent-ink); }
.hdm-blog-faq__a { padding: 0 16px 16px; color: var(--hdmb-muted); font-size: .96rem; }
.hdm-blog-faq__a p:last-child { margin-bottom: 0; }

/* ---- Sources ----------------------------------------------------------- */
.hdm-blog-sources { margin: 28px 0; padding: 18px 20px; background: var(--hdmb-soft); border-radius: var(--hdmb-radius); max-width: var(--hdmb-prose); }
.hdm-blog-sources__title { font-size: 1.05rem; font-weight: 800; margin: 0 0 10px; }
.hdm-blog-sources__list { margin: 0; padding-left: 1.3em; display: grid; gap: 7px; font-size: .9rem; }
.hdm-blog-sources__list a { color: var(--hdmb-accent-ink); }
.hdm-blog-sources__badge { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font-size: .72rem; color: var(--hdmb-pos); font-weight: 700; }

/* ---- Popular picks (curated high-sale-intent recommendations) ---------- */
.hdm-blog-popular { margin: 32px 0; padding: 20px; border: 1px solid var(--hdmb-soft-2); border-radius: var(--hdmb-radius); background: linear-gradient(180deg, var(--hdmb-accent-soft), var(--hdmb-bg) 130px); }
.hdm-blog-popular__head { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 16px; }
.hdm-blog-popular__head > .hdm-blog-icon { color: var(--hdmb-accent); margin-top: 3px; }
.hdm-blog-popular__title { font-size: 1.2rem; font-weight: 800; margin: 0; }
.hdm-blog-popular__intro { color: var(--hdmb-muted); font-size: .9rem; margin: 4px 0 0; }
.hdm-blog-popular__grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
.hdm-blog-pcard { display: flex; gap: 14px; align-items: center; text-decoration: none; background: var(--hdmb-bg); border: 1px solid var(--hdmb-line); border-radius: var(--hdmb-radius-sm); padding: 12px; transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease; }
.hdm-blog-pcard:hover { box-shadow: var(--hdmb-shadow-sm); border-color: var(--hdmb-accent); transform: translateY(-1px); }
.hdm-blog-pcard__media { flex: 0 0 108px; align-self: stretch; background: #fff; border: 1px solid var(--hdmb-line); border-radius: var(--hdmb-radius-sm); padding: 6px; display: grid; place-items: center; }
.hdm-blog-pcard__img { width: 100%; height: 86px; object-fit: contain; display: block; }
.hdm-blog-pcard__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.hdm-blog-pcard__name { font-weight: 700; color: var(--hdmb-ink); font-size: .98rem; line-height: 1.3; }
.hdm-blog-pcard__reason { color: var(--hdmb-muted); font-size: .84rem; line-height: 1.35; }
.hdm-blog-pcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; }
.hdm-blog-pcard__price { color: var(--hdmb-accent-ink); font-weight: 800; font-size: 1.02rem; }
.hdm-blog-pcard__cta { display: inline-flex; align-items: center; gap: 4px; color: var(--hdmb-accent); font-weight: 700; font-size: .85rem; }
.hdm-blog-pcard:hover .hdm-blog-pcard__cta { text-decoration: underline; }

/* ---- Author box (multi-card: identity + quote bio + expertise rows) ---- */
.hdm-blog-authorbox { margin: 44px 0 0; padding: 0; }
.hdm-blog-authorbox__eyebrow { margin: 0 0 14px; }
.hdm-blog-authorbox__eyebrow-pill {
	display: inline-flex; align-items: center; gap: 8px;
	background: #eafaf1; border: 1px solid #c3e9d3; color: var(--hdmb-pos);
	text-transform: uppercase; letter-spacing: .05em; font-size: .72rem; font-weight: 800; padding: 9px 14px; border-radius: var(--hdmb-radius-sm);
}
.hdm-blog-authorbox__card { background: var(--hdmb-bg); border: 1px solid var(--hdmb-line); border-radius: var(--hdmb-radius); box-shadow: var(--hdmb-shadow-sm); }
.hdm-blog-authorbox__identity { display: flex; align-items: center; gap: 16px; padding: 18px 20px; margin-bottom: 14px; }
.hdm-blog-authorbox__avatar { position: relative; flex: 0 0 auto; }
.hdm-blog-authorbox__photo, .hdm-blog-authorbox__initials {
	width: 62px; height: 62px; border-radius: 50%; object-fit: cover; display: grid; place-items: center;
	background: linear-gradient(140deg, var(--hdmb-accent), var(--hdmb-accent-ink)); color: #fff; font-weight: 800; font-size: 1.5rem; box-shadow: 0 4px 12px rgba(18,87,184,.28);
}
.hdm-blog-authorbox__badge { position: absolute; right: -2px; bottom: -2px; width: 24px; height: 24px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--hdmb-accent); box-shadow: var(--hdmb-shadow-sm); }
.hdm-blog-authorbox__id { min-width: 0; }
.hdm-blog-authorbox__name { font-size: 1.25rem; font-weight: 800; margin: 0; line-height: 1.2; color: var(--hdmb-ink); }
.hdm-blog-authorbox__name a { color: var(--hdmb-ink); text-decoration: none; }
.hdm-blog-authorbox__role { color: var(--hdmb-accent-ink); font-weight: 600; font-size: .9rem; margin: 4px 0 0; line-height: 1.4; }

.hdm-blog-authorbox__bio {
	position: relative; overflow: hidden; margin-bottom: 14px; padding: 18px 22px 20px;
	background: linear-gradient(160deg, var(--hdmb-accent-soft), var(--hdmb-soft));
	border: 1px solid var(--hdmb-soft-2); border-radius: var(--hdmb-radius);
}
.hdm-blog-authorbox__quote { display: block; color: var(--hdmb-accent); opacity: .55; line-height: 0; margin-bottom: 4px; }
.hdm-blog-authorbox__bio p { color: var(--hdmb-ink); font-size: .96rem; margin: 0; position: relative; z-index: 1; }
.hdm-blog-authorbox__watermark { position: absolute; right: -16px; bottom: -28px; color: var(--hdmb-accent); opacity: .07; pointer-events: none; }

.hdm-blog-authorbox__expertise-label { display: flex; align-items: center; gap: 8px; font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--hdmb-muted); margin: 0 0 10px; }
.hdm-blog-authorbox__expertise-label .hdm-blog-icon { color: var(--hdmb-pos); }
.hdm-blog-authorbox__topics { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hdm-blog-authorbox__topic { display: flex; align-items: center; gap: 12px; background: var(--hdmb-bg); border: 1px solid var(--hdmb-line); border-radius: var(--hdmb-radius-sm); padding: 11px 14px; }
.hdm-blog-authorbox__topicicon { width: 36px; height: 36px; flex: 0 0 auto; border-radius: var(--hdmb-radius-sm); display: grid; place-items: center; background: var(--hdmb-accent-soft); color: var(--hdmb-accent); }
.hdm-blog-authorbox__topiclabel { flex: 1; color: var(--hdmb-accent-ink); font-weight: 700; font-size: .92rem; }
.hdm-blog-authorbox__topiccheck { width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; background: #eafaf1; color: var(--hdmb-pos); }
.hdm-blog-authorbox__links { margin: 16px 0 0; }
.hdm-blog-authorbox__links a { display: inline-flex; align-items: center; gap: 4px; color: var(--hdmb-accent-ink); font-size: .82rem; font-weight: 600; text-decoration: none; margin-right: 12px; }
.hdm-blog-authorbox__links a:hover { text-decoration: underline; }

/* ---- Desktop (≥760px): uniform-width sections, media-object cards ------ */
@media (min-width: 760px) {
	.hdm-blog { padding: 30px 30px 76px; }

	/* ranking: responsive grid of vertical cards (2-3 across, instead of full-width rows) */
	.hdm-blog-ranking__list { grid-template-columns: repeat(auto-fill, minmax(410px, 1fr)); align-items: stretch; }

	/* popular picks: fill the width */
	.hdm-blog-popular__grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

	/* byline: chip + meta side by side */
	.hdm-blog-byline { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
	.hdm-blog-byline__meta { padding-top: 0; border-top: 0; }

	/* author section uses the horizontal space: identity + bio (left), expertise (right) */
	.hdm-blog-authorbox { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; align-items: start; }
	.hdm-blog-authorbox__eyebrow { grid-column: 1 / -1; grid-row: 1; }
	.hdm-blog-authorbox__identity { grid-column: 1; grid-row: 2; }
	.hdm-blog-authorbox__bio { grid-column: 1; grid-row: 3; margin-bottom: 0; }
	.hdm-blog-authorbox__expertise { grid-column: 2; grid-row: 2 / span 2; }
	.hdm-blog-authorbox__links { grid-column: 1 / -1; grid-row: 4; margin-top: 16px; }
}

/* ---- Reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) { .hdm-blog * { transition: none !important; } }

/* ---- Key visual (at-a-glance summary above Key Takeaways) -------------- */
.hdm-blog-keyvisual {
	max-width: var(--hdmb-prose);
	margin: 0 0 22px;
	padding: 18px 18px 20px;
	background: linear-gradient(180deg, var(--hdmb-accent-soft), var(--hdmb-bg));
	border: 1px solid var(--hdmb-line);
	border-radius: var(--hdmb-radius);
	box-shadow: var(--hdmb-shadow-sm);
}
.hdm-blog-keyvisual__title {
	display: flex; align-items: center; gap: 8px; margin: 0 0 14px;
	font-size: .82rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--hdmb-accent-ink);
}
.hdm-blog-keyvisual__title .hdm-blog-icon { color: var(--hdmb-accent); }

/* stat_grid */
.hdm-blog-kv-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.hdm-blog-kv-card { display: flex; flex-direction: column; background: var(--hdmb-bg); border: 1px solid var(--hdmb-line); border-radius: var(--hdmb-radius-sm); overflow: hidden; }
.hdm-blog-kv-card__media { position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; padding: 8px; background: linear-gradient(160deg, #fff, var(--hdmb-soft)); }
.hdm-blog-kv-card__media img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.hdm-blog-kv-card__rank { position: absolute; top: 8px; left: 8px; background: var(--hdmb-accent); color: #fff; font-weight: 800; font-size: .72rem; padding: 3px 8px; border-radius: 999px; }
.hdm-blog-kv-card__body { padding: 10px 12px 13px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.hdm-blog-kv-card__name { font-size: .92rem; font-weight: 700; line-height: 1.25; color: var(--hdmb-ink); }
.hdm-blog-kv-card__name a { color: var(--hdmb-ink); text-decoration: none; }
.hdm-blog-kv-card__name a:hover { color: var(--hdmb-accent); }
.hdm-blog-kv-card__statlabel { margin-top: 6px; font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--hdmb-faint); }
.hdm-blog-kv-card__statval { font-size: 1.02rem; font-weight: 800; color: var(--hdmb-accent-ink); line-height: 1.2; }
.hdm-blog-kv-card__price { margin-top: 6px; font-size: .9rem; font-weight: 800; color: var(--hdmb-ink); }

/* compare_bars */
.hdm-blog-kv-bars__metric { margin: 0 0 10px; font-size: .8rem; font-weight: 700; color: var(--hdmb-muted); }
.hdm-blog-kv-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hdm-blog-kv-bar { display: grid; grid-template-columns: minmax(94px, 34%) 1fr auto; align-items: center; gap: 10px; }
.hdm-blog-kv-bar__label { font-size: .86rem; font-weight: 600; color: var(--hdmb-ink); }
.hdm-blog-kv-bar__label a { color: var(--hdmb-accent-ink); text-decoration: none; }
.hdm-blog-kv-bar__track { height: 14px; background: var(--hdmb-soft-2); border-radius: 999px; overflow: hidden; }
.hdm-blog-kv-bar__fill { display: block; height: 100%; background: linear-gradient(90deg, var(--hdmb-accent), var(--hdmb-accent-ink)); border-radius: 999px; }
.hdm-blog-kv-bar__val { font-size: .86rem; font-weight: 800; color: var(--hdmb-accent-ink); white-space: nowrap; }

/* stat_callouts */
.hdm-blog-kv-callouts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.hdm-blog-kv-callout { background: var(--hdmb-bg); border: 1px solid var(--hdmb-line); border-radius: var(--hdmb-radius-sm); padding: 14px 12px; text-align: center; }
.hdm-blog-kv-callout__val { display: block; font-size: 1.5rem; font-weight: 800; color: var(--hdmb-accent-ink); line-height: 1.1; }
.hdm-blog-kv-callout__label { display: block; margin-top: 4px; font-size: .76rem; font-weight: 600; color: var(--hdmb-muted); }

/* spec_mini */
.hdm-blog-kv-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--hdmb-line); border-radius: var(--hdmb-radius-sm); background: var(--hdmb-bg); }
.hdm-blog-kv-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.hdm-blog-kv-table th, .hdm-blog-kv-table td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--hdmb-line); white-space: nowrap; }
.hdm-blog-kv-table thead th { background: var(--hdmb-soft); font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--hdmb-muted); }
.hdm-blog-kv-table tbody th { font-weight: 700; color: var(--hdmb-ink); }
.hdm-blog-kv-table tbody tr:last-child th, .hdm-blog-kv-table tbody tr:last-child td { border-bottom: 0; }

/* decision_helper */
.hdm-blog-kv-decide { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hdm-blog-kv-decide__row { display: grid; gap: 4px 14px; background: var(--hdmb-bg); border: 1px solid var(--hdmb-line); border-left: 4px solid var(--hdmb-accent); border-radius: var(--hdmb-radius-sm); padding: 12px 14px; }
.hdm-blog-kv-decide__need { font-weight: 800; color: var(--hdmb-ink); font-size: .92rem; }
.hdm-blog-kv-decide__pick { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.hdm-blog-kv-decide__model { font-weight: 700; }
.hdm-blog-kv-decide__model a { color: var(--hdmb-accent-ink); text-decoration: none; }
.hdm-blog-kv-decide__price { font-weight: 800; color: var(--hdmb-ink); }
.hdm-blog-kv-decide__why { flex-basis: 100%; color: var(--hdmb-muted); font-size: .88rem; }

/* process_steps */
.hdm-blog-kv-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hdm-blog-kv-step { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; background: var(--hdmb-bg); border: 1px solid var(--hdmb-line); border-radius: var(--hdmb-radius-sm); padding: 12px 14px; }
.hdm-blog-kv-step__num { width: 28px; height: 28px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; background: var(--hdmb-accent); color: #fff; font-weight: 800; font-size: .85rem; }
.hdm-blog-kv-step__body { display: flex; flex-direction: column; gap: 2px; }
.hdm-blog-kv-step__title { font-weight: 700; color: var(--hdmb-ink); }
.hdm-blog-kv-step__detail { color: var(--hdmb-muted); font-size: .9rem; }

@media (min-width: 760px) {
	.hdm-blog-keyvisual { padding: 22px 22px 24px; }
	.hdm-blog-kv-grid { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); }
	.hdm-blog-kv-decide__row { grid-template-columns: minmax(150px, 30%) 1fr; align-items: center; }
	.hdm-blog-kv-decide__why { flex-basis: auto; }
}

/* =========================================================================
 * product_cards — image-first clickable cards ("americans shop by eye").
 * Vertical cards (image on top), an auto-fit grid that fills the row evenly,
 * fixed-ratio media so every image is the same height, clip-proof spec rows,
 * and a real CTA button with the price pinned to the card bottom.
 * ========================================================================= */
.hdm-blog-pc__intro { margin: 0 0 16px; font-size: .94rem; line-height: 1.5; color: var(--hdmb-muted); }
.hdm-blog-pc {
	list-style: none; margin: 0; padding: 0;
	display: grid;
	grid-template-columns: 1fr;            /* mobile: one card per row */
	gap: 16px;
	align-items: stretch;
}
@media (min-width: 560px) { .hdm-blog-pc:not(.hdm-blog-pc--single) { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 920px) { .hdm-blog-pc:not(.hdm-blog-pc--single) { grid-template-columns: repeat(var(--pc-cols, 4), 1fr); } }
.hdm-blog-pc-card {
	position: relative;
	container-type: inline-size;
	display: flex; flex-direction: column;
	background: #fff; border: 1px solid var(--hdmb-line);
	border-radius: 0; overflow: hidden;          /* square section cards (per feedback) */
	transition: box-shadow .16s ease, border-color .16s ease, transform .16s ease;
}
.hdm-blog-pc-card:hover { border-color: var(--hdmb-accent); box-shadow: 0 8px 22px rgba(29, 78, 216, .12); transform: translateY(-2px); }
/* media — white backdrop (less grey), same aspect-ratio on every card => identical image heights */
.hdm-blog-pc-card__media { position: relative; aspect-ratio: 4 / 3; background: #fff; display: grid; place-items: center; padding: 14px; border-bottom: 1px solid var(--hdmb-soft-2); }
.hdm-blog-pc-card__media img { width: 100%; height: 100%; object-fit: contain; }
.hdm-blog-pc-card__badge { position: absolute; top: 10px; left: 10px; z-index: 2; pointer-events: none; white-space: nowrap; background: var(--hdmb-accent); color: #fff; font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; padding: 4px 9px; border-radius: 999px; box-shadow: 0 2px 6px rgba(2, 18, 43, .2); }
.hdm-blog-pc-card__noimg { display: block; width: 100%; height: 100%; background: var(--hdmb-soft-2); }
.hdm-blog-pc-card__body { display: flex; flex-direction: column; gap: 9px; padding: 14px 16px 16px; flex: 1; min-width: 0; }
.hdm-blog-pc-card__title { font-size: 1rem; font-weight: 800; line-height: 1.25; color: var(--hdmb-ink); overflow-wrap: break-word; }
/* reserve two lines for grid-card titles so a 1-line vs 2-line title doesn't desync the spec rows across a row */
.hdm-blog-pc:not(.hdm-blog-pc--single) .hdm-blog-pc-card__title { min-height: 2.5em; }
.hdm-blog-pc-card__sentence { margin: 0; font-size: .9rem; line-height: 1.45; color: var(--hdmb-muted); }
/* specs — label sizes to its content (one line), value takes the rest and WRAPS, so a
   long descriptive value (a phrase, not just a number) never clips or overlaps the label */
.hdm-blog-pc-card__specs { list-style: none; margin: 0; padding: 0; }
.hdm-blog-pc-card__specs li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 14px; padding: 7px 0; border-bottom: 1px solid var(--hdmb-soft-2); font-size: .85rem; line-height: 1.3; }
.hdm-blog-pc-card__specs li:last-child { border-bottom: 0; }
.hdm-blog-pc-card__sl { color: var(--hdmb-faint); font-weight: 600; white-space: nowrap; }
.hdm-blog-pc-card__sv { color: var(--hdmb-ink); font-weight: 800; text-align: right; white-space: normal; overflow-wrap: break-word; min-width: 0; }
/* on narrow cards (roundup grids) stack value under label so the label never cramps/breaks */
@container (max-width: 300px) {
	.hdm-blog-pc-card__specs li { grid-template-columns: 1fr; row-gap: 1px; padding: 6px 0; }
	.hdm-blog-pc-card__sl { font-size: .75rem; }
	.hdm-blog-pc-card__sv { text-align: left; }
}
/* foot — price then a full-width CTA button, pinned to the card bottom */
.hdm-blog-pc-card__foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding-top: 14px; }
.hdm-blog-pc-card__price { font-size: 1.15rem; font-weight: 800; color: var(--hdmb-accent-ink); }
.hdm-blog-pc-card__cta { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; background: var(--hdmb-accent); color: #fff; font-size: .84rem; font-weight: 800; line-height: 1.25; text-align: center; padding: 10px 14px; border-radius: 0; text-decoration: none; transition: background .15s ease; }
.hdm-blog-pc-card__cta .hdm-blog-icon { flex: 0 0 auto; }
/* keep the button text white on hover/visited/focus — the theme's a:hover would otherwise darken it */
.hdm-blog-pc-card__cta, .hdm-blog-pc-card__cta:hover, .hdm-blog-pc-card__cta:visited, .hdm-blog-pc-card__cta:focus { color: #fff; }
.hdm-blog-pc-card__cta:hover { background: var(--hdmb-accent-ink); }
.hdm-blog-pc-card__cta .hdm-blog-icon { transition: transform .15s ease; }
.hdm-blog-pc-card:hover .hdm-blog-pc-card__cta .hdm-blog-icon { transform: translateX(3px); }
.hdm-blog-pc-card__cta::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* stretched link: whole card clickable */
/* single-product feature card */
.hdm-blog-pc--single { grid-template-columns: 1fr; }
.hdm-blog-pc--single .hdm-blog-pc-card__title { font-size: 1.15rem; }
/* "then the table can follow" */
.hdm-blog-pc-follow { margin-top: 18px; }
.hdm-blog-pc__tablecap { margin: 0 0 6px; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--hdmb-faint); }

@media (min-width: 700px) {
	/* single-product review = horizontal feature card (image left, content right) */
	.hdm-blog-pc--single .hdm-blog-pc-card { flex-direction: row; align-items: stretch; }
	.hdm-blog-pc--single .hdm-blog-pc-card__media { flex: 0 0 42%; aspect-ratio: auto; min-height: 260px; border-bottom: 0; border-right: 1px solid var(--hdmb-line); }
	.hdm-blog-pc--single .hdm-blog-pc-card__body { flex: 1; padding: 22px 24px; justify-content: center; }
	.hdm-blog-pc--single .hdm-blog-pc-card__foot { flex-direction: row; align-items: center; justify-content: space-between; }
	.hdm-blog-pc--single .hdm-blog-pc-card__cta { width: auto; min-width: 190px; }
}
/* =====================================================================
   HDM blog cards + infographics - "Bold Showroom" redesign (Raphael 6/27)
   Clean re-emit (the prior .hdm-bi block lost its opening comment and broke
   parsing). Scoped under body.hdm-blog-article. Appended last so it wins.
   ===================================================================== */
body.hdm-blog-article{
  --bs-navy:#0f172a; --bs-navy-2:#1e293b; --bs-ink:#334155; --bs-ink-2:#475569; --bs-label:#64748b;
  --bs-blue:#1d4ed8; --bs-blue-d:#1e40af; --bs-blue-2:#3b82f6;
  --bs-amber:#b45309; --bs-amber-2:#f59e0b; --bs-green:#15803d; --bs-green-so:#e9f6ee;
  --bs-line:#e2e8f0; --bs-line-2:#cbd5e1; --bs-soft:#f8fafc; --bs-track:#eef2f7; --bs-white:#fff;
  --bs-r:0; --bs-r-sm:0; --bs-r-pill:0;
  --bs-shadow:0 1px 2px rgba(15,23,42,.05),0 14px 34px -18px rgba(15,23,42,.28);
  --bs-shadow-h:0 1px 2px rgba(15,23,42,.06),0 22px 40px -22px rgba(15,23,42,.34);
  --bs-display:"Sen","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* ---- PRODUCT CARDS ---- */
body.hdm-blog-article .hdm-blog-pc{display:grid;grid-template-columns:repeat(var(--pc-cols,2),minmax(0,1fr));gap:1rem;margin:1.5rem 0;padding:0;list-style:none}
body.hdm-blog-article .hdm-blog-pc--single{grid-template-columns:minmax(0,520px)}
body.hdm-blog-article .hdm-blog-pc-card{display:flex;flex-direction:column;background:var(--bs-white);border:1px solid var(--bs-line);border-radius:var(--bs-r);box-shadow:var(--bs-shadow);overflow:hidden;transition:transform .15s ease,box-shadow .15s ease;list-style:none}
body.hdm-blog-article .hdm-blog-pc-card:hover{transform:translateY(-2px);box-shadow:var(--bs-shadow-h)}
body.hdm-blog-article .hdm-blog-pc-card__media{position:relative;background:linear-gradient(180deg,#fff 0%,var(--bs-soft) 100%);padding:1rem;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center}
body.hdm-blog-article .hdm-blog-pc-card__media img{max-width:100%;max-height:100%;width:auto;object-fit:contain}
body.hdm-blog-article .hdm-blog-pc-card__badge{position:absolute;top:.6rem;left:.6rem;font-size:.625rem!important;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--bs-white);background:var(--bs-navy);padding:.28rem .55rem;border-radius:var(--bs-r-pill)}
body.hdm-blog-article .hdm-blog-pc-card__body{display:flex;flex-direction:column;flex:1;padding:.85rem 1.05rem 1rem}
body.hdm-blog-article .hdm-blog-pc-card__title{font-family:var(--bs-display);font-size:1.1rem!important;font-weight:800;line-height:1.2!important;color:var(--bs-navy);margin:0 0 .15rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* specs: ONE per row, small heading over a larger value, hairline bottom border (no chips) */
body.hdm-blog-article .hdm-blog-pc-card__specs{display:block;margin:.15rem 0 0;padding:0;list-style:none}
body.hdm-blog-article .hdm-blog-pc-card__specs li{display:flex;flex-direction:column;gap:.04rem;min-width:0;padding:.3rem 0;background:none;border:0;border-bottom:1px solid var(--bs-line);border-radius:0}
body.hdm-blog-article .hdm-blog-pc-card__specs li:last-child{border-bottom:0}
body.hdm-blog-article .hdm-blog-pc-card__sl{display:flex;align-items:center;gap:.3rem;font-size:.7rem!important;font-weight:600;line-height:1.2!important;letter-spacing:.05em;text-transform:uppercase;color:var(--bs-label);white-space:normal}
body.hdm-blog-article .hdm-blog-pc-card__sv{font-size:1.05rem!important;font-weight:800;line-height:1.2!important;color:var(--bs-navy);font-variant-numeric:tabular-nums lining-nums;white-space:normal;overflow-wrap:normal}
body.hdm-blog-article .hdm-blog-pc-card__sentence{font-size:.92rem!important;color:var(--bs-ink-2);margin:.5rem 0 0}
/* foot: NO box. plain price + a simple full-width button */
body.hdm-blog-article .hdm-blog-pc-card__foot{margin-top:.5rem;display:block;background:none;padding:0;border-radius:0}
body.hdm-blog-article .hdm-blog-pc-card__price{display:block;font-family:var(--bs-display);font-size:1.75rem!important;font-weight:900;line-height:1.05!important;color:var(--bs-blue);margin:0 0 .4rem;font-variant-numeric:tabular-nums lining-nums}
body.hdm-blog-article .hdm-blog-pc-card__cta{display:flex;width:100%;justify-content:center;align-items:center;gap:.4rem;font-size:.95rem!important;font-weight:700;line-height:1.2!important;color:var(--bs-white);background:var(--bs-blue);padding:.7rem 1rem;border-radius:0;text-decoration:none;transition:background .15s ease}
body.hdm-blog-article .hdm-blog-pc-card__cta:hover{background:var(--bs-blue-d)}
body.hdm-blog-article .hdm-blog-pc-card__cta svg{width:.95em;height:.95em}
@media (min-width:1024px){
  body.hdm-blog-article .hdm-blog-pc-card__title{font-size:1.2rem!important}
  body.hdm-blog-article .hdm-blog-pc-card__sv{font-size:1.1rem!important}
  body.hdm-blog-article .hdm-blog-pc-card__price{font-size:1.95rem!important}
}

/* ---- INFOGRAPHICS (.hdm-bi) ---- */
body.hdm-blog-article .hdm-bi{margin:1.85rem 0;border:1px solid var(--bs-line);border-radius:var(--bs-r);background:var(--bs-white);box-shadow:var(--bs-shadow);overflow:hidden;font-family:inherit;color:var(--bs-navy)}
body.hdm-blog-article .hdm-bi :where(ul,ol,li,p,figure,figcaption,div,span,h3,h4){margin:0;padding:0;list-style:none;background:none;box-sizing:border-box}
body.hdm-blog-article .hdm-bi__title{display:flex;align-items:center;gap:.6rem;background:linear-gradient(180deg,var(--bs-navy) 0%,var(--bs-navy-2) 100%);color:var(--bs-white);font-family:var(--bs-display);font-weight:800;font-size:1.0625rem!important;line-height:1.25;padding:.8rem 1.05rem;border-bottom:2px solid var(--bs-amber)}
body.hdm-blog-article .hdm-bi__ico{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:1.85rem;height:1.85rem;border-radius:0;background:rgba(245,158,11,.16);color:var(--bs-amber-2)}
body.hdm-blog-article .hdm-bi__ico svg{width:1.05rem;height:1.05rem}
body.hdm-blog-article .hdm-bi__body{padding:1rem 1.05rem 1.15rem}
body.hdm-blog-article .hdm-bi__note{display:block;font-size:.8125rem!important;line-height:1.4;color:var(--bs-ink-2);margin-top:.25rem;font-weight:500}
body.hdm-blog-article .hdm-bi__cat{flex:0 0 auto;display:inline-flex;width:1rem;height:1rem;color:var(--bs-navy);opacity:.7;margin-right:.4rem}
body.hdm-blog-article .hdm-bi__cat svg{width:1rem;height:1rem}
body.hdm-blog-article .hdm-bi__img{flex:0 0 auto;width:40px;height:40px;object-fit:contain;border:1px solid var(--bs-line);border-radius:8px;background:#fff;margin-right:.5rem}
body.hdm-blog-article .hdm-bi__lnk{color:inherit;text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--bs-line-2)}
@media (min-width:1024px){body.hdm-blog-article .hdm-bi__title{font-size:1.1875rem!important}}
/* stat-strip */
body.hdm-blog-article .hdm-bi__stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.7rem}
body.hdm-blog-article .hdm-bi__stat{border:1px solid var(--bs-line);border-radius:var(--bs-r-sm);padding:.85rem .9rem;background:var(--bs-soft);border-top:3px solid var(--bs-navy)}
body.hdm-blog-article .hdm-bi__stat:first-child{border-top-color:var(--bs-amber)}
body.hdm-blog-article .hdm-bi__val{display:block;font-family:var(--bs-display);font-size:2.25rem!important;font-weight:900;color:var(--bs-navy);line-height:1;font-variant-numeric:tabular-nums lining-nums}
body.hdm-blog-article .hdm-bi__stat:first-child .hdm-bi__val{color:var(--bs-amber)}
body.hdm-blog-article .hdm-bi__unit{font-size:.9rem!important;font-weight:700;color:var(--bs-amber);margin-left:.3rem}
body.hdm-blog-article .hdm-bi__lab{display:flex;align-items:center;font-size:.8125rem!important;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--bs-label);margin-top:.4rem}
@media (min-width:1024px){body.hdm-blog-article .hdm-bi__val{font-size:2.5rem!important}}
/* bars / ladder */
body.hdm-blog-article .hdm-bi__bars{display:flex;flex-direction:column;gap:.8rem}
body.hdm-blog-article .hdm-bi__bar{display:grid;grid-template-columns:1fr;gap:.25rem}
body.hdm-blog-article .hdm-bi__bar-lab{display:flex;align-items:center;font-weight:700;font-size:.9375rem!important;color:var(--bs-navy)}
body.hdm-blog-article .hdm-bi__crown{margin-left:.45rem;font-size:.6875rem!important;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--bs-amber);background:rgba(245,158,11,.14);padding:.1rem .4rem;border-radius:var(--bs-r-pill)}
/* value sits OUTSIDE the bar so it never clips */
body.hdm-blog-article .hdm-bi__bar-row{display:flex;align-items:center;gap:.6rem;min-width:0}
body.hdm-blog-article .hdm-bi__bar-track{position:relative;flex:1 1 auto;min-width:2.25rem;height:22px;background:var(--bs-track);border:1px solid var(--bs-line);border-radius:0;overflow:hidden}
body.hdm-blog-article .hdm-bi__bar-fill{position:absolute;inset:0 auto 0 0;height:100%;background:linear-gradient(90deg,var(--bs-navy) 0%,var(--bs-navy-2) 100%);border-radius:0}
body.hdm-blog-article .hdm-bi__bar--top .hdm-bi__bar-fill{background:linear-gradient(90deg,var(--bs-amber) 0%,var(--bs-amber-2) 100%)}
body.hdm-blog-article .hdm-bi__bar-val{flex:0 0 auto;font-weight:800;font-size:.95rem!important;color:var(--bs-navy);white-space:nowrap;font-variant-numeric:tabular-nums lining-nums}
body.hdm-blog-article .hdm-bi__bar--top .hdm-bi__bar-val{color:var(--bs-amber)}
body.hdm-blog-article .hdm-bi__bar--novalue .hdm-bi__bar-row{padding:.1rem 0}
body.hdm-blog-article .hdm-bi__bar--novalue .hdm-bi__bar-val{color:var(--bs-ink)}
/* tier-table / cost-bands */
body.hdm-blog-article .hdm-bi__rows{display:flex;flex-direction:column;gap:.55rem}
body.hdm-blog-article .hdm-bi__row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.35rem .9rem;align-items:baseline;border:1px solid var(--bs-line);border-radius:var(--bs-r-sm);padding:.7rem .85rem;background:var(--bs-soft)}
body.hdm-blog-article .hdm-bi__row-lab{display:flex;align-items:center;font-weight:700;font-size:.9375rem!important;color:var(--bs-navy);min-width:0}
body.hdm-blog-article .hdm-bi__row-val{font-weight:800;color:var(--bs-amber);font-size:1.0625rem!important;text-align:right;white-space:normal;overflow-wrap:break-word;min-width:0;font-variant-numeric:tabular-nums lining-nums}
body.hdm-blog-article .hdm-bi__row .hdm-bi__note{grid-column:1 / -1;margin-top:.2rem}
body.hdm-blog-article .hdm-bi--cost-bands .hdm-bi__row{border-left:5px solid var(--bs-green)}
body.hdm-blog-article .hdm-bi--cost-bands .hdm-bi__row:nth-child(2){border-left-color:var(--bs-amber)}
body.hdm-blog-article .hdm-bi--cost-bands .hdm-bi__row:nth-child(3){border-left-color:var(--bs-navy)}
/* decision-flow */
body.hdm-blog-article .hdm-bi__flow{display:flex;flex-direction:column;gap:0;counter-reset:bs-step}
body.hdm-blog-article .hdm-bi__step{position:relative;padding:.3rem .3rem 1rem 2.85rem;counter-increment:bs-step}
body.hdm-blog-article .hdm-bi__step::before{content:counter(bs-step);position:absolute;left:0;top:.1rem;width:2rem;height:2rem;border-radius:50%;background:var(--bs-blue);color:var(--bs-white);font-weight:900;font-size:.95rem!important;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 4px rgba(29,78,216,.12)}
body.hdm-blog-article .hdm-bi__step::after{content:"";position:absolute;left:.97rem;top:2.3rem;bottom:0;width:2px;background:var(--bs-line-2)}
body.hdm-blog-article .hdm-bi__step:last-child{padding-bottom:.2rem}
body.hdm-blog-article .hdm-bi__step:last-child::after{display:none}
body.hdm-blog-article .hdm-bi__step-lab{display:block;font-weight:700;font-size:.9375rem!important;color:var(--bs-navy)}
body.hdm-blog-article .hdm-bi__step-val{display:inline-block;font-weight:800;color:var(--bs-amber);font-size:.9375rem!important;margin-top:.2rem}
/* checklist */
body.hdm-blog-article .hdm-bi__check{display:flex;flex-direction:column;gap:.65rem}
body.hdm-blog-article .hdm-bi__item{position:relative;padding-left:2.1rem;line-height:1.4}
body.hdm-blog-article .hdm-bi__item::before{content:"";position:absolute;left:0;top:.05rem;width:1.4rem;height:1.4rem;border-radius:0;background:var(--bs-green);-webkit-mask:no-repeat center/80% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");mask:no-repeat center/80% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E")}
body.hdm-blog-article .hdm-bi__item-lab{font-weight:700;font-size:.9375rem!important;color:var(--bs-navy)}
body.hdm-blog-article .hdm-bi__arrow{margin:0 .4rem;color:var(--bs-label);font-weight:700}
body.hdm-blog-article .hdm-bi__item-val{font-weight:800;color:var(--bs-green);font-size:.9375rem!important}
/* mobile */
@media (max-width:560px){
  body.hdm-blog-article .hdm-bi__body{padding:.85rem .85rem 1rem}
  body.hdm-blog-article .hdm-bi__title{font-size:1rem!important;padding:.7rem .85rem}
  body.hdm-blog-article .hdm-bi__val{font-size:1.9rem!important}
  body.hdm-blog-article .hdm-bi__row{grid-template-columns:1fr}
  body.hdm-blog-article .hdm-bi__row-val{text-align:left;font-size:1.125rem!important;margin-top:.1rem}
  body.hdm-blog-article .hdm-blog-pc{grid-template-columns:1fr}
  body.hdm-blog-article .hdm-blog-pc-card__price{font-size:1.55rem!important}
}

/* SPECIFICITY OVERRIDE - beat the theme's .site-main span{font-size:18px!important} */
body.hdm-blog-article .content-area .site-main .hdm-blog-pc span.hdm-blog-pc-card__title{font-size:1.1rem!important}
body.hdm-blog-article .content-area .site-main .hdm-blog-pc span.hdm-blog-pc-card__sl{font-size:.7rem!important}
body.hdm-blog-article .content-area .site-main .hdm-blog-pc span.hdm-blog-pc-card__sv{font-size:1.05rem!important}
body.hdm-blog-article .content-area .site-main .hdm-blog-pc span.hdm-blog-pc-card__price{font-size:1.75rem!important}
body.hdm-blog-article .content-area .site-main .hdm-blog-pc span.hdm-blog-pc-card__badge{font-size:.625rem!important}
body.hdm-blog-article .content-area .site-main .hdm-bi span.hdm-bi__val{font-size:2.25rem!important}
body.hdm-blog-article .content-area .site-main .hdm-bi span.hdm-bi__unit{font-size:.9rem!important}
body.hdm-blog-article .content-area .site-main .hdm-bi span.hdm-bi__lab{font-size:.8125rem!important}
body.hdm-blog-article .content-area .site-main .hdm-bi span.hdm-bi__row-val{font-size:1.0625rem!important}
body.hdm-blog-article .content-area .site-main .hdm-bi span.hdm-bi__row-lab{font-size:.9375rem!important}
body.hdm-blog-article .content-area .site-main .hdm-bi span.hdm-bi__step-lab{font-size:.9375rem!important}
body.hdm-blog-article .content-area .site-main .hdm-bi span.hdm-bi__step-val{font-size:.9375rem!important}
body.hdm-blog-article .content-area .site-main .hdm-bi span.hdm-bi__bar-val{font-size:.95rem!important}
body.hdm-blog-article .content-area .site-main .hdm-bi span.hdm-bi__bar-lab{font-size:.9375rem!important}
body.hdm-blog-article .content-area .site-main .hdm-bi span.hdm-bi__item-lab{font-size:.9375rem!important}
body.hdm-blog-article .content-area .site-main .hdm-bi span.hdm-bi__item-val{font-size:.9375rem!important}
body.hdm-blog-article .content-area .site-main .hdm-bi span.hdm-bi__note{font-size:.8125rem!important}
body.hdm-blog-article .content-area .site-main .hdm-bi span.hdm-bi__crown{font-size:.6875rem!important}
@media (min-width:1024px){
body.hdm-blog-article .content-area .site-main .hdm-blog-pc span.hdm-blog-pc-card__title{font-size:1.2rem!important}
body.hdm-blog-article .content-area .site-main .hdm-blog-pc span.hdm-blog-pc-card__sv{font-size:1.1rem!important}
body.hdm-blog-article .content-area .site-main .hdm-blog-pc span.hdm-blog-pc-card__price{font-size:1.95rem!important}
body.hdm-blog-article .content-area .site-main .hdm-bi span.hdm-bi__val{font-size:2.5rem!important}
}
@media (max-width:560px){
body.hdm-blog-article .content-area .site-main .hdm-blog-pc span.hdm-blog-pc-card__price{font-size:1.55rem!important}
body.hdm-blog-article .content-area .site-main .hdm-bi span.hdm-bi__val{font-size:1.9rem!important}
body.hdm-blog-article .content-area .site-main .hdm-bi span.hdm-bi__row-val{font-size:1.125rem!important}
}