/* ==========================================================================
   Heat Pump Reviews Pro 2.0 — components.css
   Magazine homepage sections, review components, comparison blocks, FAQ,
   newsletter, author box, TOC, legacy tool components.
   ========================================================================== */

/* ============== Homepage: hero ============== */
.hpr-mhero { padding: clamp(24px, 4vw, 44px) 0 clamp(36px, 5vw, 56px); background: #fff; border-bottom: 1px solid var(--hpr-line); }
.hpr-mhero__kicker { text-align: center; margin-bottom: clamp(20px, 3vw, 32px); }
.hpr-mhero__kicker h1 { font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.4rem); margin: 0 0 6px; letter-spacing: -.02em; }
.hpr-mhero__kicker p { margin: 0 auto; color: var(--hpr-text-2); max-width: 720px; font-size: var(--hpr-step-2); }
.hpr-mhero__grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 900px) { .hpr-mhero__grid { grid-template-columns: 1.55fr 1fr; gap: 28px; } }
/* Height is driven by min-height only. Pairing aspect-ratio with min-height makes the
   box resolve its width from its height (380 x 16/10 = 608px), which blew past the grid
   cell and forced horizontal overflow on phones. */
.hpr-feature { position: relative; width: 100%; border-radius: var(--hpr-radius-lg); overflow: hidden; background: var(--hpr-navy); color: #fff; min-height: 340px; display: flex; align-items: flex-end; }
@media (min-width: 640px) { .hpr-feature { min-height: 420px; } }
@media (min-width: 900px) { .hpr-feature { min-height: 460px; } }
.hpr-feature__img { position: absolute; inset: 0; }
.hpr-feature__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.hpr-feature:hover .hpr-feature__img img { transform: scale(1.03); }
.hpr-feature::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,31,58,0) 30%, rgba(11,31,58,.55) 60%, rgba(11,31,58,.92) 100%); }
.hpr-feature__body { position: relative; z-index: 2; padding: clamp(20px, 3vw, 36px); max-width: 640px; }
/* On phones the copy block is tall relative to the card, so the default gradient
   leaves the headline sitting over bright parts of the photo. Darken the whole scrim
   and trim the excerpt so the text stays legible. */
@media (max-width: 639px) {
	.hpr-feature::after { background: linear-gradient(180deg, rgba(11,31,58,.30) 0%, rgba(11,31,58,.62) 40%, rgba(11,31,58,.94) 100%); }
	.hpr-feature__excerpt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: .92rem; }
	.hpr-feature__title { font-size: 1.45rem; }
}
.hpr-feature__title { font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.3rem); color: #fff; margin: 12px 0 10px; line-height: 1.12; }
.hpr-feature__title a { color: #fff; }
.hpr-feature__title a::after { content: ''; position: absolute; inset: 0; z-index: 3; }
.hpr-feature__excerpt { color: rgba(255,255,255,.82); margin: 0 0 12px; font-size: .98rem; max-width: 56ch; }
.hpr-feature .hpr-meta { color: rgba(255,255,255,.7); }
.hpr-feature .hpr-meta strong { color: #fff; }
.hpr-mhero__side { display: flex; flex-direction: column; gap: 6px; }
.hpr-mhero__side .hpr-minicard { grid-template-columns: 128px 1fr; padding: 10px; }
.hpr-mhero__side .hpr-minicard__title { font-size: 1.02rem; }
.hpr-mhero__side .hpr-minicard p { display: none; }
@media (min-width: 900px) { .hpr-mhero__side .hpr-minicard p { display: block; margin: 0; font-size: .84rem; color: var(--hpr-text-2); } }
.hpr-mhero__sidehead { display: flex; justify-content: space-between; align-items: center; padding: 0 10px 8px; border-bottom: 2px solid var(--hpr-navy); margin-bottom: 4px; }
.hpr-mhero__sidehead h2 { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; font-family: var(--hpr-font-body); margin: 0; }

/* ============== Trust strip ============== */
.hpr-trust { background: var(--hpr-bg-soft); border-bottom: 1px solid var(--hpr-line); }
.hpr-trust__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 18px 0; }
@media (min-width: 900px) { .hpr-trust__grid { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
.hpr-trust__item { display: flex; gap: 12px; align-items: flex-start; font-size: .86rem; color: var(--hpr-text-2); }
.hpr-trust__item strong { display: block; color: var(--hpr-navy); font-size: .9rem; margin-bottom: 2px; }
.hpr-trust__icon { width: 36px; height: 36px; border-radius: 10px; background: #fff; border: 1px solid var(--hpr-line); display: grid; place-items: center; color: var(--hpr-teal); flex-shrink: 0; }
.hpr-trust__icon svg { width: 18px; height: 18px; }
.hpr-trust__item a { color: var(--hpr-orange-2); font-weight: 600; }

/* ============== Best picks (product cards) ============== */
.hpr-picks { background: var(--hpr-bg); }
.hpr-picks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 20px; }
.hpr-pick { background: #fff; border: 1px solid var(--hpr-line); border-radius: var(--hpr-radius); overflow: hidden; display: flex; flex-direction: column; position: relative; transition: transform .2s ease, box-shadow .2s ease; }
.hpr-pick:hover { transform: translateY(-3px); box-shadow: var(--hpr-shadow); }
.hpr-pick__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--hpr-bg-soft); }
.hpr-pick__media img { width: 100%; height: 100%; object-fit: cover; }
.hpr-pick__badge { position: absolute; top: 12px; left: 12px; background: var(--hpr-orange); color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 5px 9px; border-radius: 6px; z-index: 2; max-width: calc(100% - 24px); }
.hpr-pick__badge--teal { background: var(--hpr-teal); }
.hpr-pick__badge--navy { background: var(--hpr-navy); }
.hpr-pick__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.hpr-pick__brand { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--hpr-text-3); }
.hpr-pick__title { font-size: 1.08rem; margin: 0; line-height: 1.3; }
.hpr-pick__title a { color: var(--hpr-navy); }
.hpr-pick__title a:hover { color: var(--hpr-orange-2); }
.hpr-pick__rating { display: flex; align-items: center; gap: 8px; }
.hpr-pick__specs { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0; }
.hpr-pick__specs span { font-size: .74rem; font-weight: 600; color: var(--hpr-teal-2); background: rgba(14,159,142,.1); padding: 3px 8px; border-radius: 6px; }
.hpr-pick__for { font-size: .84rem; color: var(--hpr-text-2); margin: 0; }
.hpr-pick__for strong { color: var(--hpr-navy); }
.hpr-pick__verdict { font-size: .88rem; color: var(--hpr-text-2); margin: 0; line-height: 1.5; }
.hpr-pick__cta { margin-top: auto; padding-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.hpr-pick__cta .hpr-btn { flex: 1; }
.hpr-picks__foot { text-align: center; margin-top: 28px; }

/* ============== Stars ============== */
.hpr-stars { display: inline-flex; gap: 2px; align-items: center; }
.hpr-stars svg { width: 16px; height: 16px; }
.hpr-stars--sm svg { width: 13px; height: 13px; }
.hpr-stars--lg svg { width: 22px; height: 22px; }
.hpr-stars .is-on { fill: var(--hpr-amber); }
.hpr-stars .is-off { fill: #d9dee5; }
.hpr-stars .is-half .half-on { fill: var(--hpr-amber); }
.hpr-stars .is-half .half-off { fill: #d9dee5; }
.hpr-stars__num { font-weight: 700; color: var(--hpr-navy); font-size: .9rem; margin-left: 4px; }

/* ============== Comparisons ============== */
.hpr-vs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.hpr-vs { position: relative; border-radius: var(--hpr-radius); overflow: hidden; background: var(--hpr-navy); color: #fff; min-height: 220px; display: flex; flex-direction: column; justify-content: flex-end; transition: transform .2s ease, box-shadow .2s ease; }
.hpr-vs:hover { transform: translateY(-3px); box-shadow: var(--hpr-shadow-lg); }
.hpr-vs__img { position: absolute; inset: 0; opacity: .38; }
.hpr-vs__img img { width: 100%; height: 100%; object-fit: cover; }
.hpr-vs::before { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(11,31,58,.2), rgba(11,31,58,.95)); }
.hpr-vs__body { position: relative; z-index: 2; padding: 22px; }
.hpr-vs__pair { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.hpr-vs__name { font-family: var(--hpr-font-head); font-weight: 800; font-size: 1.15rem; color: #fff; flex: 1; line-height: 1.2; }
.hpr-vs__name:last-child { text-align: right; }
.hpr-vs__badge { width: 40px; height: 40px; border-radius: 50%; background: var(--hpr-orange); display: grid; place-items: center; font-size: .72rem; font-weight: 800; letter-spacing: .06em; flex-shrink: 0; box-shadow: 0 0 0 4px rgba(242,106,27,.25); }
.hpr-vs__title { font-size: .95rem; color: rgba(255,255,255,.85); margin: 0 0 8px; font-weight: 500; font-family: var(--hpr-font-body); }
.hpr-vs__title a { color: inherit; }
.hpr-vs__title a::after { content: ''; position: absolute; inset: 0; z-index: 3; }
.hpr-vs__more { font-size: .82rem; font-weight: 700; color: var(--hpr-amber); }

/* ============== Guides section ============== */
.hpr-guides { background: #fff; }
.hpr-guides__grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 900px) { .hpr-guides__grid { grid-template-columns: 1.1fr 1.4fr; gap: 48px; align-items: start; } }
.hpr-guides__lead { position: sticky; top: 96px; }
.hpr-guides__lead .hpr-card__media { aspect-ratio: 4 / 3; border-radius: var(--hpr-radius-lg); }
.hpr-guides__list { display: grid; grid-template-columns: 1fr; gap: 4px; }
@media (min-width: 640px) { .hpr-guides__list { grid-template-columns: 1fr 1fr; gap: 6px 20px; } }
.hpr-guides__list .hpr-minicard { grid-template-columns: 36px 1fr; padding: 12px 10px; border-bottom: 1px solid var(--hpr-line); border-radius: 0; }
.hpr-guides__list .hpr-minicard:hover { background: var(--hpr-bg); box-shadow: none; }
.hpr-guides__list .hpr-minicard__title { margin: 0 0 4px; }
.hpr-guides__list .hpr-minicard p { margin: 0; font-size: .82rem; color: var(--hpr-text-3); }

/* ============== Learn section ============== */
.hpr-learn { background: var(--hpr-bg-soft); }
.hpr-learn__cols { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 800px) { .hpr-learn__cols { grid-template-columns: 1fr 1fr; gap: 32px; } }
.hpr-learn__col { background: #fff; border: 1px solid var(--hpr-line); border-radius: var(--hpr-radius); padding: 22px 24px 8px; }
.hpr-learn__col h3 { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; font-family: var(--hpr-font-body); color: var(--hpr-teal-2); margin: 0 0 6px; display: flex; align-items: center; gap: 8px; }
.hpr-learn__col h3 svg { width: 16px; height: 16px; }
.hpr-learn__col .hpr-listcard { padding: 14px 0; }

/* ============== News section ============== */
.hpr-news__grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 900px) { .hpr-news__grid { grid-template-columns: 1.2fr 1fr; gap: 40px; } }
.hpr-news__list { display: flex; flex-direction: column; }
.hpr-news__list .hpr-listcard { padding: 14px 0; }
.hpr-news__list .hpr-listcard__title { font-size: 1.05rem; }

/* ============== Tools strip ============== */
.hpr-toolstrip { background: var(--hpr-navy); color: #fff; }
.hpr-toolstrip__grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 720px) { .hpr-toolstrip__grid { grid-template-columns: repeat(3, 1fr); } }
.hpr-toolcard { position: relative; padding: 22px; border-radius: var(--hpr-radius); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); transition: background .2s ease, transform .2s ease; }
.hpr-toolcard:hover { background: rgba(255,255,255,.1); transform: translateY(-2px); }
.hpr-toolcard__icon { width: 40px; height: 40px; border-radius: 10px; background: var(--hpr-orange); display: grid; place-items: center; margin-bottom: 14px; color: #fff; }
.hpr-toolcard__icon svg { width: 20px; height: 20px; }
.hpr-toolcard h3 { color: #fff; font-size: 1.1rem; margin: 0 0 6px; }
.hpr-toolcard h3 a { color: #fff; }
.hpr-toolcard h3 a::after { content: ''; position: absolute; inset: 0; }
.hpr-toolcard p { color: rgba(255,255,255,.7); font-size: .88rem; margin: 0 0 12px; }
.hpr-toolcard span.hpr-link { color: var(--hpr-amber); }

/* ============== Newsletter ============== */
.hpr-newsletter { background: linear-gradient(135deg, #0b1f3a 0%, #143a5c 100%); color: #fff; }
.hpr-newsletter__inner { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; }
@media (min-width: 900px) { .hpr-newsletter__inner { grid-template-columns: 1.2fr 1fr; gap: 48px; } }
.hpr-newsletter h2 { color: #fff; margin: 6px 0 8px; }
.hpr-newsletter p { color: rgba(255,255,255,.75); margin: 0; max-width: 52ch; }
.hpr-newsletter .hpr-newsform input[type=email] { border-color: transparent; }
.hpr-newsletter__fine { font-size: .78rem; color: rgba(255,255,255,.55); margin-top: 8px; }
.hpr-newsletter--inline { background: var(--hpr-navy); border-radius: var(--hpr-radius); padding: 24px; margin: 2em 0; }
.hpr-newsletter--inline h3 { color: #fff; margin: 0 0 4px; }

/* ============== Single article ============== */
.hpr-single__header { padding: clamp(28px, 4vw, 48px) 0 clamp(20px, 3vw, 28px); background: #fff; }
.hpr-single__cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.hpr-single__title { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); max-width: 22ch; margin: 0 0 14px; line-height: 1.1; }
.hpr-single__lede { font-size: var(--hpr-step-3); color: var(--hpr-text-2); max-width: 760px; margin: 0 0 20px; line-height: 1.5; font-weight: 400; }
.hpr-single__byline { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding-top: 18px; border-top: 1px solid var(--hpr-line); }
.hpr-single__author { display: flex; align-items: center; gap: 12px; }
.hpr-single__avatar { border-radius: 50%; width: 44px; height: 44px; }
.hpr-single__author strong { display: block; font-size: .92rem; color: var(--hpr-navy); }
.hpr-single__author small { color: var(--hpr-text-3); font-size: .78rem; }
.hpr-single__dates { font-size: .82rem; color: var(--hpr-text-3); display: flex; flex-wrap: wrap; gap: 6px 14px; }
.hpr-single__dates strong { color: var(--hpr-text-2); font-weight: 600; }
.hpr-single__hero { background: #fff; }
.hpr-single__hero figure { margin: 0; }
.hpr-single__hero img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; border-radius: var(--hpr-radius-lg); }
.hpr-single__hero figcaption { font-size: .78rem; color: var(--hpr-text-3); margin-top: 8px; }
.hpr-single__layout { display: grid; grid-template-columns: 1fr; gap: 40px; padding: clamp(28px, 4vw, 44px) 0 clamp(48px, 6vw, 72px); }
@media (min-width: 1024px) { .hpr-single__layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; } }
.hpr-single__main { min-width: 0; max-width: 780px; }
.hpr-single__side { min-width: 0; }
.hpr-single__footer { max-width: 780px; }
.hpr-single__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0; }
.hpr-single__tags a { font-size: .78rem; font-weight: 600; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--hpr-line-2); color: var(--hpr-text-2); }
.hpr-single__tags a:hover { border-color: var(--hpr-orange); color: var(--hpr-orange-2); }
.hpr-single__disclosure { margin: 0 0 24px; }
.hpr-page .hpr-single__title { max-width: none; }

/* Table of contents */
.hpr-toc { background: #fff; border: 1px solid var(--hpr-line); border-radius: var(--hpr-radius); padding: 18px 20px; }
.hpr-toc:empty { display: none; }
.hpr-toc__title { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--hpr-navy); margin: 0 0 10px; }
.hpr-toc ol { list-style: none; margin: 0; padding: 0; }
.hpr-toc li { margin: 0; }
.hpr-toc a { display: block; padding: 6px 0 6px 12px; font-size: .88rem; color: var(--hpr-text-2); border-left: 2px solid var(--hpr-line); line-height: 1.35; }
.hpr-toc a:hover { color: var(--hpr-orange-2); }
.hpr-toc a.is-active { color: var(--hpr-navy); font-weight: 600; border-left-color: var(--hpr-orange); }
.hpr-toc li.is-sub a { padding-left: 24px; font-size: .82rem; }
.hpr-toc--inline { margin: 0 0 1.8em; }
.hpr-toc--inline ol { columns: 2; column-gap: 24px; }
@media (max-width: 600px) { .hpr-toc--inline ol { columns: 1; } }

/* Review scorecard */
.hpr-score { background: #fff; border: 1px solid var(--hpr-line); border-radius: var(--hpr-radius-lg); overflow: hidden; margin: 0 0 28px; box-shadow: var(--hpr-shadow-sm); }
.hpr-score__head { background: var(--hpr-navy); color: #fff; padding: 12px 22px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.hpr-score__head strong { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; }
.hpr-score__head span { font-size: .8rem; color: rgba(255,255,255,.7); }
.hpr-score__grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 640px) { .hpr-score__grid { grid-template-columns: 200px 1fr; } }
.hpr-score__overall { padding: 22px; border-bottom: 1px solid var(--hpr-line); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: var(--hpr-bg); }
@media (min-width: 640px) { .hpr-score__overall { border-bottom: 0; border-right: 1px solid var(--hpr-line); } }
.hpr-score__num { font-family: var(--hpr-font-head); font-size: 3.2rem; font-weight: 800; color: var(--hpr-navy); line-height: 1; }
.hpr-score__num small { font-size: 1.1rem; color: var(--hpr-text-3); font-weight: 600; }
.hpr-score__word { margin-top: 8px; font-weight: 700; color: var(--hpr-orange-2); font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; }
.hpr-score__breakdown { padding: 18px 22px; display: grid; grid-template-columns: 1fr; gap: 8px 24px; }
@media (min-width: 900px) { .hpr-score__breakdown { grid-template-columns: 1fr 1fr; } }
.hpr-score__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: .9rem; padding: 4px 0; }
.hpr-score__row span:first-child { color: var(--hpr-text-2); font-weight: 500; }
.hpr-score__verdict { padding: 18px 22px; border-top: 1px solid var(--hpr-line); }
.hpr-score__verdict p { margin: 0 0 8px; font-size: 1.02rem; color: var(--hpr-charcoal); }
.hpr-score__verdict p strong { color: var(--hpr-navy); }
.hpr-score__facts { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .86rem; color: var(--hpr-text-2); margin-top: 8px; }
.hpr-score__facts strong { color: var(--hpr-navy); }
.hpr-score__cta { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 22px 20px; }
.hpr-score__cta .hpr-btn { flex: 1 1 160px; }

/* Pros / cons */
.hpr-procons { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 0 0 28px; }
@media (min-width: 640px) { .hpr-procons { grid-template-columns: 1fr 1fr; } }
.hpr-procons__col { background: #fff; border: 1px solid var(--hpr-line); border-radius: var(--hpr-radius); padding: 18px 20px; border-top: 4px solid var(--hpr-green); }
.hpr-procons__col--cons { border-top-color: var(--hpr-red); }
.hpr-procons__col h3 { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; font-family: var(--hpr-font-body); margin: 0 0 12px; color: var(--hpr-navy); }
.hpr-procons__col ul { list-style: none; margin: 0; padding: 0; }
.hpr-procons__col li { position: relative; padding-left: 26px; margin-bottom: 9px; font-size: .94rem; line-height: 1.5; }
.hpr-procons__col li::before { content: ''; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--hpr-green); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M6.5 11.5 3 8l1.4-1.4 2.1 2.1 5.1-5.1L13 5z'/%3E%3C/svg%3E") center/contain no-repeat, linear-gradient(#000,#000); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat; }
.hpr-procons__col li::after { content: ''; position: absolute; left: 4px; top: 8px; width: 8px; height: 8px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M6.5 12.5 2.5 8.5l1.5-1.5 2.5 2.5 5.5-5.5L13.5 5.5z'/%3E%3C/svg%3E") center/contain no-repeat; }
.hpr-procons__col--cons li::before { background: var(--hpr-red); }
.hpr-procons__col--cons li::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M4 7h8v2H4z'/%3E%3C/svg%3E") center/contain no-repeat; }

/* Spec table block */
.hpr-specs { margin: 0 0 28px; }
.hpr-specs__title, .hpr-block__title { font-size: 1.2rem; margin: 0 0 12px; display: flex; align-items: center; gap: 10px; }
.hpr-specs .hpr-table-wrap { margin: 0; }
.hpr-specs .hpr-table { min-width: 0; }
.hpr-specs .hpr-table th { width: 42%; background: var(--hpr-bg); color: var(--hpr-text-2); font-size: .8rem; letter-spacing: .04em; text-transform: none; position: static; }
.hpr-specs .hpr-table td { font-weight: 500; }

/* Alternatives */
.hpr-alts { margin: 36px 0; }
.hpr-alts__grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 640px) { .hpr-alts__grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } }
.hpr-alts .hpr-pick__body { padding: 14px 16px 16px; }
.hpr-alts .hpr-pick__title { font-size: 1rem; }

/* Compare block (head to head) */
.hpr-compare-block { margin: 0 0 28px; }
.hpr-compare-block .hpr-table { min-width: 0; }
.hpr-compare-block .hpr-table thead th { font-size: .9rem; text-transform: none; letter-spacing: 0; }
.hpr-compare-block .hpr-table thead th a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.4); }
.hpr-compare-block .hpr-table tbody td:first-child { color: var(--hpr-text-2); font-weight: 600; font-size: .86rem; }
.hpr-winner { display: flex; gap: 14px; align-items: flex-start; background: rgba(245,166,35,.12); border: 1px solid rgba(245,166,35,.4); border-radius: 12px; padding: 16px 18px; margin: 14px 0 0; }
.hpr-winner__icon { width: 36px; height: 36px; border-radius: 10px; background: var(--hpr-amber); color: #fff; display: grid; place-items: center; flex-shrink: 0; }
.hpr-winner__icon svg { width: 20px; height: 20px; }
.hpr-winner strong { display: block; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: #92500a; margin-bottom: 2px; }
.hpr-winner p { margin: 0; font-size: .95rem; }

/* Picks block (best-of posts) */
.hpr-picks-block { margin: 0 0 28px; }
.hpr-picks-block__list { display: grid; grid-template-columns: 1fr; gap: 10px; }
.hpr-pickrow { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; background: #fff; border: 1px solid var(--hpr-line); border-radius: 12px; padding: 14px 16px; position: relative; }
.hpr-pickrow__num { width: 36px; height: 36px; border-radius: 10px; background: var(--hpr-navy); color: #fff; display: grid; place-items: center; font-family: var(--hpr-font-head); font-weight: 800; }
.hpr-pickrow__label { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--hpr-orange-2); }
.hpr-pickrow__name { font-family: var(--hpr-font-head); font-weight: 700; font-size: 1.02rem; color: var(--hpr-navy); margin: 2px 0 4px; }
.hpr-pickrow__name a { color: inherit; }
.hpr-pickrow__name a:hover { color: var(--hpr-orange-2); }
.hpr-pickrow__spec { font-size: .8rem; color: var(--hpr-teal-2); font-weight: 600; margin: 0 0 4px; }
.hpr-pickrow p { margin: 0; font-size: .9rem; color: var(--hpr-text-2); }
.hpr-pickrow__go { position: absolute; right: 14px; top: 14px; font-size: .78rem; font-weight: 700; }
@media (max-width: 600px) { .hpr-pickrow__go { position: static; margin-top: 6px; display: inline-block; } }

/* Callouts / takeaways / CTA shortcodes */
.hpr-callout { display: flex; gap: 14px; padding: 16px 18px; border-radius: 12px; margin: 1.6em 0; border: 1px solid; font-size: .96rem; }
.hpr-callout__icon { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; color: #fff; }
.hpr-callout__icon svg { width: 16px; height: 16px; }
.hpr-callout p:last-child { margin-bottom: 0; }
.hpr-callout--tip { background: rgba(14,159,142,.08); border-color: rgba(14,159,142,.3); }
.hpr-callout--tip .hpr-callout__icon { background: var(--hpr-teal); }
.hpr-callout--note { background: rgba(11,31,58,.05); border-color: rgba(11,31,58,.18); }
.hpr-callout--note .hpr-callout__icon { background: var(--hpr-navy); }
.hpr-callout--warning { background: rgba(245,166,35,.12); border-color: rgba(245,166,35,.45); }
.hpr-callout--warning .hpr-callout__icon { background: var(--hpr-amber); }
.hpr-takeaways { background: #fff; border: 1px solid var(--hpr-line); border-left: 4px solid var(--hpr-orange); border-radius: 12px; padding: 18px 22px; margin: 1.4em 0 1.8em; }
.hpr-takeaways__title { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--hpr-navy); margin: 0 0 10px; font-family: var(--hpr-font-body); }
.hpr-takeaways ul { margin: 0 0 0 1.2em; }
.hpr-takeaways li { margin-bottom: .4em; font-size: .97rem; }
.hpr-takeaways li:last-child { margin-bottom: 0; }
.hpr-ctabox { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; background: var(--hpr-bg-soft); border: 1px solid var(--hpr-line); border-radius: 12px; padding: 16px 20px; margin: 1.8em 0; }
.hpr-ctabox p { margin: 0; font-size: .95rem; color: var(--hpr-text-2); flex: 1 1 260px; }
.hpr-ctabox p strong { color: var(--hpr-navy); }
.hpr-prose .hpr-ctabox .hpr-btn { text-decoration: none; }
.hpr-prose .hpr-procons { margin: 1.6em 0; }
.hpr-prose .hpr-procons li { margin-bottom: 8px; }

/* FAQ accordion */
.hpr-faq { margin: 36px 0; }
.hpr-accordion { border: 1px solid var(--hpr-line); border-radius: 12px; background: #fff; overflow: hidden; }
.hpr-accordion__item + .hpr-accordion__item { border-top: 1px solid var(--hpr-line); }
.hpr-accordion__trigger { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; text-align: left; padding: 16px 20px; background: transparent; border: 0; font-weight: 600; font-size: 1rem; color: var(--hpr-navy); font-family: var(--hpr-font-head); }
.hpr-accordion__trigger:hover { color: var(--hpr-orange-2); }
.hpr-accordion__icon { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--hpr-line-2); display: grid; place-items: center; flex-shrink: 0; transition: transform .2s ease; font-weight: 400; }
.hpr-accordion__trigger[aria-expanded="true"] .hpr-accordion__icon { transform: rotate(45deg); background: var(--hpr-navy); color: #fff; border-color: transparent; }
.hpr-accordion__panel { padding: 0 20px 18px; color: var(--hpr-text-2); font-size: .96rem; line-height: 1.65; }
.hpr-accordion__panel p:last-child { margin-bottom: 0; }

/* Sources */
.hpr-sources { margin: 32px 0; padding: 18px 22px; background: #fff; border: 1px solid var(--hpr-line); border-radius: 12px; font-size: .86rem; }
.hpr-sources h3 { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; font-family: var(--hpr-font-body); margin: 0 0 8px; }
.hpr-sources ol { margin: 0 0 0 1.2em; padding: 0; color: var(--hpr-text-2); }
.hpr-sources li { margin-bottom: 4px; }

/* Author box */
.hpr-authorbox { display: grid; grid-template-columns: 64px 1fr; gap: 18px; padding: 22px; background: #fff; border: 1px solid var(--hpr-line); border-radius: var(--hpr-radius); margin: 32px 0; }
.hpr-authorbox img { border-radius: 50%; width: 64px; height: 64px; }
.hpr-authorbox__label { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--hpr-orange-2); font-weight: 700; }
.hpr-authorbox h3 { font-size: 1.05rem; margin: 2px 0 6px; }
.hpr-authorbox p { margin: 0; font-size: .9rem; color: var(--hpr-text-2); }
.hpr-authorbox a { font-weight: 600; }

/* Related */
.hpr-related { padding: clamp(36px, 5vw, 64px) 0; background: #fff; border-top: 1px solid var(--hpr-line); }
.hpr-related .hpr-section__head { margin-bottom: 20px; }

/* Next-step CTA at end of article */
.hpr-nextstep { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 36px 0; }
@media (min-width: 640px) { .hpr-nextstep { grid-template-columns: 1fr 1fr; } }
.hpr-nextstep a { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border-radius: 12px; background: var(--hpr-navy); color: #fff; transition: transform .2s ease; }
.hpr-nextstep a:hover { transform: translateY(-2px); color: #fff; }
.hpr-nextstep a.is-alt { background: var(--hpr-orange); }
.hpr-nextstep small { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; opacity: .8; font-weight: 700; }
.hpr-nextstep strong { font-family: var(--hpr-font-head); font-size: 1.05rem; }

/* ============== Best Heat Pumps landing ============== */
.hpr-best-hero { background: var(--hpr-gradient-bg); color: #fff; padding: clamp(40px, 6vw, 72px) 0; }
.hpr-best-hero__grid { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
@media (min-width: 900px) { .hpr-best-hero__grid { grid-template-columns: 1.2fr 1fr; gap: 48px; } }
.hpr-best-hero h1 { color: #fff; font-size: var(--hpr-step-5); margin: 10px 0 14px; max-width: 18ch; }
.hpr-best-hero p { color: rgba(255,255,255,.78); max-width: 58ch; font-size: var(--hpr-step-2); }
.hpr-best-hero .hpr-section__eyebrow { color: var(--hpr-amber); }
.hpr-best-hero__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.hpr-best-hero__img { border-radius: var(--hpr-radius-lg); overflow: hidden; box-shadow: var(--hpr-shadow-lg); aspect-ratio: 4 / 3; }
.hpr-best-hero__img img { width: 100%; height: 100%; object-fit: cover; }
.hpr-best-hero__meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 18px; font-size: .84rem; color: rgba(255,255,255,.7); }
.hpr-best-hero__meta strong { color: #fff; }
.hpr-best-nav { background: #fff; border-bottom: 1px solid var(--hpr-line); position: sticky; top: 72px; z-index: 20; }
.hpr-best-nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 8px 0; overflow-x: auto; }
.hpr-best-nav a { display: block; padding: 8px 14px; border-radius: 8px; font-size: .86rem; font-weight: 600; color: var(--hpr-charcoal); white-space: nowrap; }
.hpr-best-nav a:hover, .hpr-best-nav a.is-active { background: rgba(242,106,27,.08); color: var(--hpr-orange-2); }
.hpr-best-table .hpr-table td:first-child { min-width: 180px; }
.hpr-best-table .hpr-table td .hpr-stars { display: inline-flex; }
.hpr-best-table__filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.hpr-best-table__note { font-size: .82rem; color: var(--hpr-text-3); margin-top: 10px; }
.hpr-need-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 14px; }
.hpr-need { position: relative; display: block; padding: 18px 20px; background: #fff; border: 1px solid var(--hpr-line); border-radius: 12px; transition: all .18s ease; }
.hpr-need:hover { border-color: var(--hpr-orange); transform: translateY(-2px); box-shadow: var(--hpr-shadow-sm); }
.hpr-need strong { display: block; font-family: var(--hpr-font-head); color: var(--hpr-navy); font-size: 1rem; margin-bottom: 4px; }
.hpr-need span { font-size: .84rem; color: var(--hpr-text-2); }

/* ============== Cost calculator ============== */
.hpr-calc__shell { display: grid; grid-template-columns: 1fr; gap: 24px; background: #fff; border: 1px solid var(--hpr-line); border-radius: var(--hpr-radius-lg); padding: clamp(18px, 3vw, 32px); }
@media (min-width: 900px) { .hpr-calc__shell { grid-template-columns: 1.1fr 1fr; gap: 40px; } }
.hpr-calc__form { display: grid; gap: 16px; }
.hpr-calc__result { background: var(--hpr-navy); color: #fff; border-radius: var(--hpr-radius); padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.hpr-calc__result h3 { color: #fff; margin: 0; font-size: 1rem; }
.hpr-calc__big { font-family: var(--hpr-font-head); font-size: clamp(1.8rem, 1.4rem + 1.5vw, 2.6rem); font-weight: 800; color: var(--hpr-amber); line-height: 1.1; }
.hpr-calc__sub { color: rgba(255,255,255,.7); font-size: .88rem; margin: 0; }
.hpr-calc__rows { display: grid; gap: 8px; margin: 6px 0; }
.hpr-calc__row { display: flex; justify-content: space-between; gap: 12px; font-size: .9rem; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.hpr-calc__row strong { color: #fff; }
.hpr-calc__fine { font-size: .76rem; color: rgba(255,255,255,.55); margin: 0; }

/* ============== 404 ============== */
.hpr-404 { padding: clamp(48px, 8vw, 96px) 0; text-align: center; }
.hpr-404 h1 { font-size: var(--hpr-step-5); }
.hpr-404 .hpr-search { margin: 24px auto; }

/* ============== Legacy tool components (kept for /tools pages) ============== */
.hpr-archetypes { background: #fff; }
.hpr-archetype-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.hpr-archetype { text-align: left; background: #fff; border: 1px solid var(--hpr-line); border-radius: var(--hpr-radius); padding: 20px; cursor: pointer; transition: all .2s ease; position: relative; overflow: hidden; }
.hpr-archetype::after { content: ''; position: absolute; inset: 0; background: var(--hpr-navy); opacity: 0; transition: opacity .2s ease; border-radius: inherit; z-index: 0; }
.hpr-archetype > * { position: relative; z-index: 1; }
.hpr-archetype:hover { transform: translateY(-3px); box-shadow: var(--hpr-shadow); border-color: var(--hpr-teal); }
.hpr-archetype[aria-pressed="true"] { color: #fff; border-color: transparent; }
.hpr-archetype[aria-pressed="true"]::after { opacity: 1; }
.hpr-archetype[aria-pressed="true"] .hpr-archetype__specs li, .hpr-archetype[aria-pressed="true"] h3 { color: rgba(255,255,255,.9); }
.hpr-archetype__icon { font-size: 2rem; display: block; margin-bottom: 8px; }
.hpr-archetype__name { font-size: 1.05rem; margin: 0 0 8px; }
.hpr-archetype__desc { font-size: .85rem; opacity: .85; margin: 0 0 12px; line-height: 1.5; }
.hpr-archetype__specs { list-style: none; padding: 0; margin: 0; font-size: .78rem; color: var(--hpr-text-2); }
.hpr-archetype__specs li { margin-bottom: 4px; }
.hpr-archetype__cta { display: inline-block; margin-top: 10px; font-size: .85rem; font-weight: 600; }
.hpr-archetype__continue { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 14px 18px; background: rgba(34,160,107,.08); border-radius: 12px; }
.hpr-kits { background: #fff; }
.hpr-kits-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.hpr-kit { background: #fff; border: 1px solid var(--hpr-line); border-radius: var(--hpr-radius); padding: 24px; }
.hpr-kit__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.hpr-kit__icon { font-size: 1.6rem; }
.hpr-kit__name { font-size: 1.15rem; margin: 0; }
.hpr-kit__desc { color: var(--hpr-text-2); font-size: .9rem; margin: 0 0 16px; }
.hpr-kit__items { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; gap: 8px; }
.hpr-kit__items li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; background: var(--hpr-bg); border-radius: 10px; font-size: .88rem; }
.hpr-kit__item-cta { font-weight: 600; font-size: .8rem; white-space: nowrap; }
.hpr-kit__guidance { font-size: .82rem; color: var(--hpr-text-2); padding: 10px 12px; background: rgba(245,166,35,.08); border-radius: 8px; margin: 0; }
.hpr-productbox { display: grid; grid-template-columns: 1fr; gap: 16px; background: #fff; border: 1px solid var(--hpr-line); border-radius: var(--hpr-radius); padding: 20px; margin: 1.6em 0; }
@media (min-width: 640px) { .hpr-productbox { grid-template-columns: 1fr 2fr; } }
.hpr-productbox__media { background: var(--hpr-bg); border-radius: 10px; display: grid; place-items: center; min-height: 140px; }
.hpr-productbox__title { font-size: 1.15rem; margin: 0 0 6px; }
.hpr-productbox__desc { font-size: .92rem; color: var(--hpr-text-2); margin: 0 0 12px; }
.hpr-productbox__ctas { display: flex; gap: 8px; flex-wrap: wrap; }
.hpr-trustgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.hpr-trustcard { background: #fff; border: 1px solid var(--hpr-line); border-radius: var(--hpr-radius); padding: 20px; }
.hpr-trustcard__icon { font-size: 1.6rem; margin-bottom: 8px; display: block; }
.hpr-trustcard h3 { font-size: 1rem; margin: 0 0 6px; }
.hpr-trustcard p { font-size: .88rem; color: var(--hpr-text-2); margin: 0; }
.hpr-404__product { display: none; }


/* ==========================================================================
   Rich article kit (.gmg-*) — shared styling for long-form editorial articles.
   Articles use these classes directly; they no longer ship their own <style>.
   ========================================================================== */
/* ===== Garage Mini Split Guide — scoped magazine styling ===== */
.gmg{--nv:#0b1f3a;--nv2:#143a5c;--or:#f26a1b;--or2:#d9550d;--tl:#0e9f8e;--am:#f5a623;--gn:#22a06b;--rd:#d64545;--ln:#e5e7eb;--tx:#1f2933;--tx2:#4b5563;--bg:#f7f8fa;
 font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;color:var(--tx);line-height:1.75;font-size:1.05rem}
.gmg *{box-sizing:border-box}
.gmg h2,.gmg h3,.gmg h4{font-family:'Sora','Inter',system-ui,sans-serif;color:var(--nv);line-height:1.2;letter-spacing:-.015em}
.gmg h2{font-size:clamp(1.5rem,1.2rem+1.2vw,2rem);margin:2.2em 0 .6em;padding-top:.4em;position:relative}
.gmg h2::before{content:'';display:block;width:56px;height:4px;border-radius:3px;background:linear-gradient(90deg,var(--or),var(--am));margin-bottom:.5em}
.gmg h3{font-size:clamp(1.15rem,1.05rem+.5vw,1.35rem);margin:1.8em 0 .5em}
.gmg h4{font-size:1.05rem;margin:1.4em 0 .4em;color:var(--nv2)}
.gmg p{margin:0 0 1.1em}
.gmg ul,.gmg ol{margin:0 0 1.3em 1.35em;padding:0}
.gmg li{margin-bottom:.5em}
.gmg li::marker{color:var(--or);font-weight:700}
.gmg a{color:var(--tl);text-decoration:underline;text-underline-offset:3px;font-weight:500}
.gmg a:hover{color:var(--or2)}
.gmg strong{color:var(--nv)}

/* Hero */
.gmg-hero{background:linear-gradient(135deg,#0b1f3a 0%,#143a5c 55%,#0e9f8e 140%);border-radius:20px;padding:clamp(24px,4vw,44px);color:#fff;position:relative;overflow:hidden;margin:0 0 2em}
.gmg-hero::after{content:'';position:absolute;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(242,106,27,.55),transparent 68%);top:-140px;right:-110px;animation:gmgFloat 9s ease-in-out infinite}
@keyframes gmgFloat{0%,100%{transform:translate(0,0)}50%{transform:translate(-24px,22px)}}
.gmg-hero>*{position:relative;z-index:2}
.gmg-hero h2{color:#fff;margin:.2em 0 .5em}
.gmg-hero h2::before{background:linear-gradient(90deg,var(--am),#fff)}
.gmg-hero p{color:rgba(255,255,255,.9);font-size:1.08rem;margin-bottom:0}
.gmg-badge{display:inline-block;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);padding:6px 14px;border-radius:999px;font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.gmg-hero-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-top:1.4em}
.gmg-hero-stat{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:14px 16px}
.gmg-hero-stat b{display:block;font-family:'Sora',sans-serif;font-size:1.5rem;color:var(--am);line-height:1.1}
.gmg-hero-stat span{font-size:.8rem;color:rgba(255,255,255,.78)}

/* Answer box */
.gmg-answer{background:linear-gradient(135deg,#fff7ed,#fffbf5);border:2px solid var(--or);border-radius:16px;padding:22px 26px;margin:0 0 2em;box-shadow:0 10px 30px rgba(242,106,27,.12)}
.gmg-answer p:last-child{margin-bottom:0}
.gmg-answer .gmg-lbl{display:inline-block;background:var(--or);color:#fff;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:4px 12px;border-radius:6px;margin-bottom:12px}

/* TOC */
.gmg-toc{background:linear-gradient(160deg,#f8fafc,#eef2f7);border:1px solid var(--ln);border-left:5px solid var(--tl);border-radius:14px;padding:22px 26px;margin:0 0 2.2em}
.gmg-toc h3{margin:0 0 .7em;font-size:1rem;letter-spacing:.1em;text-transform:uppercase;color:var(--nv)}
.gmg-toc ol{columns:2;column-gap:30px;margin:0 0 0 1.2em}
@media(max-width:640px){.gmg-toc ol{columns:1}}
.gmg-toc li{margin-bottom:.45em}
.gmg-toc a{text-decoration:none;font-weight:500}
.gmg-toc a:hover{text-decoration:underline}

/* Callouts */
.gmg-box{border-radius:14px;padding:18px 22px;margin:1.7em 0;border-left:5px solid;position:relative}
.gmg-box p:last-child{margin-bottom:0}
.gmg-box b.gmg-t{display:block;font-family:'Sora',sans-serif;font-size:1.02rem;margin-bottom:.4em}
.gmg-tip{background:linear-gradient(135deg,#e8f8f5,#f4fdfb);border-color:var(--tl)}
.gmg-tip b.gmg-t{color:#0b7f72}
.gmg-warn{background:linear-gradient(135deg,#fff6e5,#fffaf0);border-color:var(--am)}
.gmg-warn b.gmg-t{color:#92500a}
.gmg-danger{background:linear-gradient(135deg,#fdeaea,#fef5f5);border-color:var(--rd)}
.gmg-danger b.gmg-t{color:#a32020}
.gmg-note{background:linear-gradient(135deg,#eef2f9,#f7f9fc);border-color:var(--nv)}
.gmg-note b.gmg-t{color:var(--nv)}

/* Blockquote */
.gmg blockquote{margin:1.8em 0;padding:22px 26px 22px 30px;background:linear-gradient(135deg,#0b1f3a,#143a5c);color:#fff;border-radius:16px;border:0;position:relative;font-size:1.1rem;line-height:1.6}
.gmg blockquote::before{content:'\201C';position:absolute;left:12px;top:-8px;font-size:4rem;color:rgba(245,166,35,.5);font-family:Georgia,serif}
.gmg blockquote p{margin:0;color:#fff}
.gmg blockquote cite{display:block;margin-top:.7em;font-size:.85rem;color:var(--am);font-style:normal;font-weight:600}

/* Tables */
.gmg-tw{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--ln);border-radius:14px;margin:1.7em 0;background:#fff;box-shadow:0 6px 20px rgba(17,24,39,.05)}
.gmg table{width:100%;border-collapse:collapse;font-size:.94rem;min-width:560px}
.gmg thead th{background:linear-gradient(135deg,var(--nv),var(--nv2));color:#fff;padding:13px 15px;text-align:left;font-size:.74rem;letter-spacing:.07em;text-transform:uppercase;font-weight:700;white-space:nowrap}
.gmg tbody td{padding:12px 15px;border-bottom:1px solid var(--ln);vertical-align:top}
.gmg tbody tr:nth-child(even) td{background:#fafbfc}
.gmg tbody tr:hover td{background:#f0faf8}
.gmg tbody tr:last-child td{border-bottom:0}
.gmg tbody td:first-child{font-weight:600;color:var(--nv)}
.gmg-pick td{background:linear-gradient(90deg,rgba(245,166,35,.14),rgba(245,166,35,.05))!important}

/* Product box */
.gmg-prod{border:2px solid var(--ln);border-radius:20px;overflow:hidden;margin:2em 0;background:#fff;box-shadow:0 14px 40px rgba(17,24,39,.09);transition:transform .25s ease,box-shadow .25s ease}
.gmg-prod:hover{transform:translateY(-3px);box-shadow:0 20px 50px rgba(17,24,39,.14)}
.gmg-prod-head{background:linear-gradient(120deg,var(--nv) 0%,var(--nv2) 60%,#1c5b7d 100%);color:#fff;padding:16px 24px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;position:relative;overflow:hidden}
.gmg-prod-head::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);transform:translateX(-100%);animation:gmgShine 5s ease-in-out infinite}
@keyframes gmgShine{0%,72%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.gmg-prod-head span.gmg-award{font-family:'Sora',sans-serif;font-weight:800;font-size:1.02rem;position:relative;z-index:2}
.gmg-prod-head span.gmg-rate{background:var(--am);color:#20160a;padding:5px 13px;border-radius:999px;font-weight:800;font-size:.85rem;position:relative;z-index:2;white-space:nowrap}
.gmg-prod-body{padding:24px}
.gmg-prod-body h4{margin:0 0 .3em;font-size:1.3rem;color:var(--nv);font-family:'Sora',sans-serif}
.gmg-prod-brand{font-size:.74rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--or2);display:block;margin-bottom:.4em}
.gmg-specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin:16px 0}
.gmg-spec{background:linear-gradient(135deg,#f0f9f8,#f7fcfb);border:1px solid #d7eeeb;border-radius:10px;padding:11px 13px;text-align:center}
.gmg-spec b{display:block;font-family:'Sora',sans-serif;color:var(--tl);font-size:1.02rem;line-height:1.2}
.gmg-spec span{font-size:.7rem;color:var(--tx2);text-transform:uppercase;letter-spacing:.05em}
.gmg-pc{display:grid;grid-template-columns:1fr;gap:14px;margin:16px 0}
@media(min-width:620px){.gmg-pc{grid-template-columns:1fr 1fr}}
.gmg-pc>div{border-radius:12px;padding:14px 16px}
.gmg-pros{background:linear-gradient(135deg,#eaf9f1,#f5fdf9);border:1px solid #bfe8d3}
.gmg-cons{background:linear-gradient(135deg,#fdeeee,#fef7f7);border:1px solid #f3cccc}
.gmg-pc h5{margin:0 0 .5em;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;font-family:'Inter',sans-serif}
.gmg-pros h5{color:#146c47}.gmg-cons h5{color:#a32020}
.gmg-pc ul{margin:0 0 0 1.1em;font-size:.93rem}
.gmg-pc li{margin-bottom:.35em}
.gmg-cta{display:block;text-align:center;background:linear-gradient(135deg,#ff9900,#f26a1b);color:#fff!important;font-weight:800;font-size:1.06rem;padding:16px 22px;border-radius:12px;text-decoration:none!important;box-shadow:0 8px 22px rgba(242,106,27,.35);transition:all .2s ease;margin-top:6px}
.gmg-cta:hover{background:linear-gradient(135deg,#f26a1b,#d9550d);transform:translateY(-2px);box-shadow:0 12px 28px rgba(242,106,27,.45);color:#fff!important}
.gmg-cta small{display:block;font-weight:500;font-size:.76rem;opacity:.92;margin-top:3px}
.gmg-bestfor{background:#f7f8fa;border-radius:10px;padding:12px 15px;font-size:.93rem;margin:14px 0 0;border-left:4px solid var(--tl)}

/* Mini product row */
.gmg-alt{display:grid;grid-template-columns:1fr;gap:16px;margin:1.6em 0}
@media(min-width:700px){.gmg-alt{grid-template-columns:1fr 1fr}}
.gmg-altcard{border:1px solid var(--ln);border-radius:14px;padding:18px;background:#fff;display:flex;flex-direction:column;transition:border-color .2s,transform .2s}
.gmg-altcard:hover{border-color:var(--or);transform:translateY(-2px)}
.gmg-altcard b.gmg-al{font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;color:var(--or2)}
.gmg-altcard h4{margin:.35em 0 .3em;font-size:1.06rem}
.gmg-altcard p{font-size:.92rem;color:var(--tx2);flex:1}
.gmg-altcard a.gmg-mini{display:inline-block;text-align:center;background:var(--nv);color:#fff!important;padding:11px 16px;border-radius:9px;font-weight:700;font-size:.9rem;text-decoration:none!important;transition:background .2s}
.gmg-altcard a.gmg-mini:hover{background:var(--or)}

/* Steps */
.gmg-steps{counter-reset:gmgs;list-style:none;margin:1.6em 0 1.8em;padding:0}
.gmg-steps>li{counter-increment:gmgs;position:relative;padding:0 0 18px 56px;margin:0}
.gmg-steps>li::before{content:counter(gmgs);position:absolute;left:0;top:0;width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--or),var(--am));color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Sora',sans-serif;font-weight:800;box-shadow:0 4px 12px rgba(242,106,27,.3)}
.gmg-steps>li::after{content:'';position:absolute;left:18.5px;top:40px;bottom:2px;width:2px;background:linear-gradient(180deg,var(--am),transparent)}
.gmg-steps>li:last-child::after{display:none}
.gmg-steps h4{margin:.35em 0 .3em}

/* Mistakes */
.gmg-mistake{border:1px solid var(--ln);border-left:5px solid var(--rd);border-radius:12px;padding:16px 20px;margin:1.2em 0;background:linear-gradient(135deg,#fff,#fefafa)}
.gmg-mistake h4{margin:0 0 .4em;color:#a32020}
.gmg-fix{background:linear-gradient(135deg,#eaf9f1,#f6fdfa);border-radius:9px;padding:11px 14px;margin-top:10px;font-size:.94rem;border-left:3px solid var(--gn)}

/* FAQ */
.gmg-faq details{border:1px solid var(--ln);border-radius:12px;margin-bottom:12px;background:#fff;overflow:hidden;transition:box-shadow .2s}
.gmg-faq details[open]{box-shadow:0 8px 24px rgba(17,24,39,.08)}
.gmg-faq summary{cursor:pointer;padding:16px 20px;font-family:'Sora',sans-serif;font-weight:700;color:var(--nv);list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:center;background:linear-gradient(135deg,#fbfcfd,#fff)}
.gmg-faq summary::-webkit-details-marker{display:none}
.gmg-faq summary::after{content:'+';font-size:1.5rem;color:var(--or);line-height:1;transition:transform .2s}
.gmg-faq details[open] summary::after{transform:rotate(45deg)}
.gmg-faq .gmg-fa{padding:0 20px 18px;color:var(--tx2)}
.gmg-faq .gmg-fa p:last-child{margin-bottom:0}

/* Checklist */
.gmg-check{background:linear-gradient(135deg,#0b1f3a,#143a5c);border-radius:18px;padding:26px 28px;color:#fff;margin:2em 0}
.gmg-check h3{color:#fff;margin:0 0 .7em}
.gmg-check ul{list-style:none;margin:0;padding:0}
.gmg-check li{padding-left:34px;position:relative;margin-bottom:.7em;color:rgba(255,255,255,.9)}
.gmg-check li::before{content:'✓';position:absolute;left:0;top:0;width:22px;height:22px;border-radius:6px;background:var(--gn);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:800}
.gmg-check li strong{color:#fff}

/* Image placeholder */
.gmg-img{background:linear-gradient(135deg,#eef2f7,#f8fafc);border:2px dashed #c3ccd8;border-radius:14px;padding:20px;text-align:center;color:var(--tx2);font-size:.88rem;margin:1.6em 0}
.gmg-img b{display:block;color:var(--nv);margin-bottom:.25em}

/* Disclosure */
.gmg-disc{background:#fff8ec;border:1px solid #f3d9a8;border-radius:10px;padding:12px 16px;font-size:.86rem;color:#7c4a03;margin:1.5em 0}