/* =========================================================
   Happy Programming Guide Pro — theme.css
   Premium developer-dashboard look. CSS variables in :root
   are emitted by hpg_pro_inline_css_vars().
   ========================================================= */

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

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: var(--hpg-font-body, Inter, system-ui, sans-serif);
	color: var(--hpg-color-text, #0b1530);
	background: var(--hpg-color-bg, #fff);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

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

a {
	color: var(--hpg-color-electric, #2f6bff);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
	outline: 3px solid var(--hpg-color-electric, #2f6bff);
	outline-offset: 3px;
	border-radius: 6px;
}

h1, h2, h3, h4 {
	font-family: var(--hpg-font-heading, Manrope, Inter, sans-serif);
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--hpg-color-navy, #0b1530);
	margin: 0 0 .5em;
}

h1 { font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.1; }
h2 { font-size: clamp(1.5rem, 2.5vw, 2.25rem); line-height: 1.15; }
h3 { font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.25; }
h4 { font-size: 1rem; line-height: 1.3; }

code, pre, .hpg-mono { font-family: var(--hpg-font-mono, JetBrains Mono, monospace); }

/* --------- Skip link + container --------- */
.hpg-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--hpg-color-navy);
	color: #fff;
	padding: 12px 16px;
	z-index: 100;
}
.hpg-skip-link:focus { left: 8px; top: 8px; }

.hpg-container {
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 20px;
}

/* --------- Header --------- */
.hpg-site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255,255,255,.92);
	backdrop-filter: saturate(150%) blur(10px);
	border-bottom: 1px solid rgba(11,21,48,.08);
}
.hpg-site-header__inner {
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: 64px;
}
.hpg-brand__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	font-weight: 800;
	color: var(--hpg-color-navy);
}
.hpg-brand__mark {
	font-family: var(--hpg-font-mono);
	color: var(--hpg-color-electric);
	background: rgba(47,107,255,.08);
	border-radius: 8px;
	padding: 4px 8px;
}
.hpg-nav { margin-left: auto; }
.hpg-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 22px;
	flex-wrap: wrap;
}
.hpg-nav__list a {
	color: var(--hpg-color-navy);
	text-decoration: none;
	font-weight: 600;
}
.hpg-nav__list a:hover { color: var(--hpg-color-electric); }
.hpg-header-cta { margin-left: 12px; }

/* --------- CTAs --------- */
.hpg-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 18px;
	border-radius: 12px;
	font-weight: 700;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	font-size: 1rem;
	transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.hpg-cta--sm { padding: 8px 12px; font-size: .9rem; border-radius: 10px; }
.hpg-cta--primary {
	background: var(--hpg-color-electric);
	color: #fff;
	box-shadow: 0 6px 18px -8px rgba(47,107,255,.6);
}
.hpg-cta--primary:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -10px rgba(47,107,255,.6); }
.hpg-cta--ghost {
	background: transparent;
	color: var(--hpg-color-navy);
	border-color: rgba(11,21,48,.18);
}
.hpg-cta--ghost:hover { background: rgba(11,21,48,.04); }
.hpg-cta--amazon {
	background: var(--hpg-color-yellow);
	color: #2b2200;
	border-color: rgba(0,0,0,.06);
}
.hpg-cta--amazon:hover { background: #ffc62a; }
.hpg-cta[disabled] { opacity: .5; cursor: not-allowed; }
.hpg-cta__arrow { transition: transform .12s ease; }
.hpg-cta:hover .hpg-cta__arrow { transform: translateX(3px); }

/* --------- Sections --------- */
.hpg-section { padding: 64px 0; }
.hpg-section--hero {
	background:
		radial-gradient(ellipse at top left, rgba(47,107,255,.10), transparent 50%),
		radial-gradient(ellipse at bottom right, rgba(61,220,151,.10), transparent 50%),
		var(--hpg-color-bg-alt, #f5f7fb);
}
.hpg-section--quick-start { background: var(--hpg-color-bg); }
.hpg-section--quiz {
	background: var(--hpg-color-navy);
	color: #fff;
}
.hpg-section--quiz h1, .hpg-section--quiz h2, .hpg-section--quiz h3, .hpg-section--quiz h4 { color: #fff; }
.hpg-section--guides { background: var(--hpg-color-bg-alt); }
.hpg-section--products { background: var(--hpg-color-bg); }
.hpg-section--faq { background: var(--hpg-color-bg-alt); }
.hpg-section--newsletter { background: var(--hpg-color-navy); color: #fff; }
.hpg-section--newsletter h1, .hpg-section--newsletter h2 { color: #fff; }
.hpg-section--trust { background: var(--hpg-color-bg); }

.hpg-section__header { margin-bottom: 32px; max-width: 720px; }
.hpg-section__eyebrow {
	font-family: var(--hpg-font-mono);
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: .8rem;
	color: var(--hpg-color-electric);
	margin: 0 0 8px;
}
.hpg-section--quiz .hpg-section__eyebrow,
.hpg-section--newsletter .hpg-section__eyebrow { color: var(--hpg-color-mint); }
.hpg-section__title { margin: 0 0 12px; }
.hpg-section__lede {
	color: var(--hpg-color-muted);
	font-size: 1.05rem;
	margin: 0;
}
.hpg-section--quiz .hpg-section__lede,
.hpg-section--newsletter .hpg-section__lede { color: rgba(255,255,255,.78); }

/* --------- Hero --------- */
.hpg-hero {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: 56px;
	align-items: center;
}
@media (max-width: 880px) {
	.hpg-hero { grid-template-columns: 1fr; }
}
.hpg-hero__eyebrow {
	font-family: var(--hpg-font-mono);
	text-transform: uppercase;
	letter-spacing: .14em;
	font-size: .8rem;
	color: var(--hpg-color-electric);
	margin: 0 0 12px;
}
.hpg-hero__headline { margin: 0 0 12px; }
.hpg-hero__subheadline {
	font-size: 1.1rem;
	color: var(--hpg-color-muted);
	margin: 0 0 28px;
	max-width: 36em;
}
.hpg-hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }
.hpg-hero__pills {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.hpg-pill {
	display: inline-block;
	padding: 6px 12px;
	border-radius: 999px;
	font-size: .82rem;
	font-weight: 600;
}
.hpg-pill--mint     { background: rgba(61,220,151,.12); color: #0a6b3f; }
.hpg-pill--electric { background: rgba(47,107,255,.10); color: #1e3fb0; }
.hpg-pill--purple   { background: rgba(139,108,255,.10); color: #4a39a3; }

/* hero editor mockup */
.hpg-editor {
	background: var(--hpg-color-graphite, #1c2438);
	color: #e6e9f4;
	border-radius: 18px;
	box-shadow: 0 24px 60px -24px rgba(11,21,48,.45);
	overflow: hidden;
	font-family: var(--hpg-font-mono);
}
.hpg-editor__bar {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 14px;
	background: rgba(255,255,255,.04);
	border-bottom: 1px solid rgba(255,255,255,.06);
}
.hpg-editor__dot {
	width: 10px; height: 10px;
	border-radius: 50%;
	background: rgba(255,255,255,.22);
}
.hpg-editor__dot:nth-child(1) { background: #ff5f57; }
.hpg-editor__dot:nth-child(2) { background: #febc2e; }
.hpg-editor__dot:nth-child(3) { background: #28c840; }
.hpg-editor__file { margin-left: 12px; font-size: .8rem; color: rgba(255,255,255,.6); }
.hpg-editor__code {
	margin: 0;
	padding: 18px 20px;
	font-size: .92rem;
	line-height: 1.6;
	overflow-x: auto;
}
.hpg-editor__code .t-c { color: #7c8aab; }
.hpg-editor__code .t-k { color: var(--hpg-color-purple, #b39bff); }
.hpg-editor__code .t-f { color: var(--hpg-color-mint, #5ee0a8); }
.hpg-editor__code .t-s { color: var(--hpg-color-yellow, #ffd166); }

.hpg-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;
}
.hpg-chip {
	display: inline-block;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(11,21,48,.06);
	color: var(--hpg-color-navy);
	font-family: var(--hpg-font-mono);
	font-size: .82rem;
}

/* --------- Quick Start --------- */
.hpg-quickstart {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 14px;
}
.hpg-quickstart__card {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px;
	border-radius: 14px;
	background: var(--hpg-color-bg);
	border: 1px solid rgba(11,21,48,.08);
	color: var(--hpg-color-navy);
	text-decoration: none;
	font-weight: 600;
	transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.hpg-quickstart__card:hover {
	transform: translateY(-2px);
	border-color: var(--hpg-color-electric);
	box-shadow: 0 14px 28px -18px rgba(47,107,255,.4);
}
.hpg-quickstart__card.is-picked {
	border-color: var(--hpg-color-electric);
	background: rgba(47,107,255,.06);
}
.hpg-quickstart__icon {
	width: 36px; height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background: rgba(47,107,255,.10);
	color: var(--hpg-color-electric);
	font-family: var(--hpg-font-mono);
}

/* --------- Quiz --------- */
.hpg-quiz {
	background: rgba(255,255,255,.04);
	border: 1px solid rgba(255,255,255,.08);
	border-radius: 18px;
	padding: 28px;
	max-width: 760px;
	margin: 0 auto;
}
.hpg-quiz__progress {
	height: 6px;
	background: rgba(255,255,255,.10);
	border-radius: 999px;
	overflow: hidden;
	margin-bottom: 18px;
}
.hpg-quiz__progressbar {
	height: 100%;
	background: linear-gradient(90deg, var(--hpg-color-electric), var(--hpg-color-mint));
	transition: width .25s ease;
}
.hpg-quiz__step {
	font-family: var(--hpg-font-mono);
	font-size: .78rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(255,255,255,.6);
	margin: 0 0 8px;
}
.hpg-quiz__q { margin: 0 0 18px; }
.hpg-quiz__options {
	display: grid;
	gap: 10px;
	margin-bottom: 18px;
}
.hpg-quiz__option {
	text-align: left;
	padding: 14px 16px;
	border-radius: 12px;
	background: rgba(255,255,255,.04);
	border: 1px solid rgba(255,255,255,.12);
	color: #fff;
	font: inherit;
	font-weight: 500;
	cursor: pointer;
	transition: background .12s ease, border-color .12s ease;
}
.hpg-quiz__option:hover { background: rgba(255,255,255,.08); }
.hpg-quiz__option.is-selected {
	background: rgba(47,107,255,.20);
	border-color: var(--hpg-color-electric);
}
.hpg-quiz__nav { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.hpg-quiz__nav .hpg-cta--ghost { color: #fff; border-color: rgba(255,255,255,.20); }
.hpg-quiz__nav .hpg-cta--ghost:hover { background: rgba(255,255,255,.08); }
.hpg-quiz__hint { margin: 12px 0 0; color: rgba(255,255,255,.6); font-size: .9rem; }

.hpg-quiz__result {
	color: #fff;
}
.hpg-quiz__eyebrow {
	font-family: var(--hpg-font-mono);
	letter-spacing: .12em;
	text-transform: uppercase;
	font-size: .78rem;
	color: var(--hpg-color-mint);
	margin: 0 0 6px;
}
.hpg-quiz__title { color: #fff; margin: 0 0 8px; }
.hpg-quiz__summary { color: rgba(255,255,255,.82); margin: 0 0 18px; }
.hpg-quiz__h4 { color: rgba(255,255,255,.9); margin: 14px 0 6px; }
.hpg-quiz__list { margin: 0 0 14px 1.2em; padding: 0; color: rgba(255,255,255,.82); }
.hpg-quiz__ctas { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0; }
.hpg-quiz__disclosure { font-size: .82rem; color: rgba(255,255,255,.6); margin: 4px 0; }
.hpg-quiz__footnote {
	text-align: center;
	color: rgba(255,255,255,.55);
	font-size: .85rem;
	margin: 18px 0 0;
}

/* --------- Cards / grids --------- */
.hpg-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 20px;
}
.hpg-card {
	background: var(--hpg-color-bg);
	border: 1px solid rgba(11,21,48,.08);
	border-radius: 16px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.hpg-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(11,21,48,.25); }
.hpg-card__media img { width: 100%; height: 180px; object-fit: cover; }
.hpg-card__body { padding: 16px 18px 20px; }
.hpg-card__title { margin: 0 0 8px; font-size: 1.1rem; }
.hpg-card__title a { color: var(--hpg-color-navy); text-decoration: none; }
.hpg-card__title a:hover { color: var(--hpg-color-electric); }
.hpg-card__meta { color: var(--hpg-color-muted); font-size: .82rem; margin: 0 0 6px; }
.hpg-card__excerpt { color: var(--hpg-color-muted); margin: 0; }
.hpg-card--action { padding: 18px; text-decoration: none; color: var(--hpg-color-navy); }
.hpg-card--action h2 { font-size: 1.05rem; margin: 0 0 6px; color: var(--hpg-color-navy); }
.hpg-card--action p { margin: 0; color: var(--hpg-color-muted); }

/* --------- Product box --------- */
.hpg-products-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 20px;
	margin-bottom: 20px;
}
.hpg-product {
	background: var(--hpg-color-bg);
	border: 1px solid rgba(11,21,48,.10);
	border-radius: 18px;
	padding: 22px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	position: relative;
}
.hpg-product--hero {
	background: linear-gradient(135deg, rgba(47,107,255,.06), rgba(61,220,151,.06));
	border-color: rgba(47,107,255,.20);
}
.hpg-product__badge {
	position: absolute;
	top: 14px;
	right: 14px;
	background: var(--hpg-color-yellow);
	color: #2b2200;
	font-size: .72rem;
	font-weight: 700;
	padding: 4px 8px;
	border-radius: 999px;
}
.hpg-product__image img { border-radius: 12px; }
.hpg-product__title { margin: 0; font-size: 1.1rem; }
.hpg-product__bestfor { margin: 0; color: var(--hpg-color-muted); font-size: .92rem; }
.hpg-product__why { margin: 0; color: var(--hpg-color-text); }
.hpg-product__proscons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	font-size: .9rem;
}
.hpg-product__pros h4, .hpg-product__cons h4 {
	margin: 0 0 4px;
	font-size: .78rem;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.hpg-product__pros h4 { color: #0a6b3f; }
.hpg-product__cons h4 { color: #8a3b2a; }
.hpg-product__pros ul, .hpg-product__cons ul { margin: 0; padding-left: 1.1em; }
.hpg-product__disclosure { margin: 0; color: var(--hpg-color-muted); font-size: .78rem; }

/* --------- FAQ --------- */
.hpg-faq { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-width: 820px; }
.hpg-faq__item details {
	background: var(--hpg-color-bg);
	border: 1px solid rgba(11,21,48,.10);
	border-radius: 14px;
	padding: 14px 18px;
}
.hpg-faq__q {
	cursor: pointer;
	font-weight: 700;
	color: var(--hpg-color-navy);
	list-style: none;
}
.hpg-faq__q::-webkit-details-marker { display: none; }
.hpg-faq__q::after { content: "+"; float: right; color: var(--hpg-color-electric); font-weight: 800; }
.hpg-faq__item details[open] .hpg-faq__q::after { content: "−"; }
.hpg-faq__a { color: var(--hpg-color-muted); padding-top: 8px; }

/* --------- Newsletter --------- */
.hpg-newsletter {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: 40px;
	align-items: center;
}
@media (max-width: 800px) {
	.hpg-newsletter { grid-template-columns: 1fr; }
}
.hpg-newsletter__form {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 10px;
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.12);
	padding: 12px;
	border-radius: 14px;
}
.hpg-newsletter__label { grid-column: 1 / -1; color: rgba(255,255,255,.7); font-size: .82rem; }
.hpg-newsletter__form input[type="email"] {
	background: transparent;
	border: 0;
	color: #fff;
	font: inherit;
	padding: 10px 12px;
	outline: none;
}
.hpg-newsletter__form input[type="email"]::placeholder { color: rgba(255,255,255,.5); }
.hpg-newsletter__success { grid-column: 1 / -1; margin: 0; color: var(--hpg-color-mint); font-size: .9rem; }

/* --------- Trust grid --------- */
.hpg-trust-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 18px;
	margin-bottom: 24px;
}
.hpg-trust-card {
	background: var(--hpg-color-bg-alt);
	border: 1px solid rgba(11,21,48,.06);
	border-radius: 14px;
	padding: 18px;
}
.hpg-trust-card h3 { font-size: 1.02rem; margin: 0 0 6px; }
.hpg-trust-card p { margin: 0; color: var(--hpg-color-muted); }

/* --------- Disclosure utility --------- */
.hpg-disclosure {
	font-size: .82rem;
	color: var(--hpg-color-muted);
	background: rgba(255,209,102,.10);
	border: 1px dashed rgba(255,209,102,.5);
	padding: 10px 12px;
	border-radius: 10px;
	margin: 12px 0;
}
.hpg-disclosure--education { background: rgba(47,107,255,.06); border-color: rgba(47,107,255,.30); }
.hpg-disclosure--ai        { background: rgba(139,108,255,.06); border-color: rgba(139,108,255,.30); }
.hpg-disclosure--security  { background: rgba(11,21,48,.04); border-color: rgba(11,21,48,.15); }

/* --------- Article --------- */
.hpg-article__header, .hpg-page__header { padding-top: 56px; padding-bottom: 16px; }
.hpg-article__title, .hpg-page__title { margin: 0 0 12px; }
.hpg-article__meta { color: var(--hpg-color-muted); font-size: .9rem; }
.hpg-article__media { margin: 0 auto 24px; }
.hpg-article__media img { border-radius: 14px; }
.hpg-article__body, .hpg-page__body { padding-bottom: 56px; max-width: 760px; }
.hpg-article__body p, .hpg-page__body p { font-size: 1.05rem; }

/* --------- Archive header --------- */
.hpg-archive-header { margin-bottom: 28px; padding-top: 24px; }
.hpg-archive-header__title { margin: 0 0 8px; }

/* --------- Pagination --------- */
.hpg-pagination { margin-top: 32px; }
.hpg-pagination .nav-links { display: flex; gap: 8px; flex-wrap: wrap; }
.hpg-pagination .page-numbers {
	padding: 8px 12px;
	border-radius: 10px;
	background: var(--hpg-color-bg-alt);
	color: var(--hpg-color-navy);
	text-decoration: none;
	font-weight: 600;
}
.hpg-pagination .page-numbers.current { background: var(--hpg-color-electric); color: #fff; }

/* --------- Search form --------- */
.hpg-search-form {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 8px;
	margin: 12px 0 24px;
}
.hpg-search-form__label { grid-column: 1 / -1; font-size: .85rem; color: var(--hpg-color-muted); }
.hpg-search-form input[type="search"] {
	padding: 12px 14px;
	border: 1px solid rgba(11,21,48,.15);
	border-radius: 10px;
	background: var(--hpg-color-bg);
	font: inherit;
}
.hpg-search-form button {
	padding: 0 18px;
	border-radius: 10px;
	border: 0;
	background: var(--hpg-color-navy);
	color: #fff;
	font-weight: 700;
	cursor: pointer;
}

/* --------- 404 --------- */
.hpg-404 { padding-top: 40px; }
.hpg-404__header { margin: 28px 0; }
.hpg-404__title { margin: 0 0 8px; }
.hpg-404__lede { color: var(--hpg-color-muted); margin: 0 0 18px; }
.hpg-404__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 16px;
	margin: 28px 0;
}

/* --------- Footer --------- */
.hpg-site-footer {
	background: var(--hpg-color-navy);
	color: rgba(255,255,255,.78);
	padding: 56px 0 36px;
	margin-top: 56px;
}
.hpg-site-footer a { color: #fff; }
.hpg-site-footer__widgets {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 32px;
	margin-bottom: 32px;
}
.hpg-footer-nav__list, .hpg-legal-nav__list {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
}
.hpg-legal-nav__list a { color: rgba(255,255,255,.65); font-size: .9rem; }
.hpg-site-footer__bottom { color: rgba(255,255,255,.6); font-size: .9rem; margin-top: 12px; }

/* --------- Mobile sticky CTA (used by theme.js on mobile) --------- */
.hpg-mobile-cta {
	display: none;
	position: fixed;
	left: 12px;
	right: 12px;
	bottom: 12px;
	z-index: 60;
	background: var(--hpg-color-electric);
	color: #fff;
	padding: 14px 18px;
	border-radius: 14px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	box-shadow: 0 10px 30px -10px rgba(47,107,255,.6);
}
@media (max-width: 720px) {
	.hpg-mobile-cta.is-on { display: block; }
}

/* --------- Tool card (calc / skill priority / project gen / setup gen) --------- */
.hpg-section--tool { background: var(--hpg-color-bg-alt); }
.hpg-tool-card {
	background: var(--hpg-color-bg);
	border: 1px solid rgba(11,21,48,.08);
	border-radius: 18px;
	padding: 28px;
	max-width: 920px;
	margin: 0 auto;
	box-shadow: 0 30px 60px -40px rgba(11,21,48,.25);
}
.hpg-tool-card--wide { max-width: 1080px; }

/* Form grid */
.hpg-form { display: grid; gap: 14px; }
.hpg-form--grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 20px; }
.hpg-form__field { display: flex; flex-direction: column; gap: 6px; }
.hpg-form__label { font-size: .85rem; font-weight: 700; color: var(--hpg-color-navy); }
.hpg-form__field select,
.hpg-form__field input[type="number"],
.hpg-form__field input[type="text"] {
	padding: 12px 14px;
	border-radius: 10px;
	border: 1px solid rgba(11,21,48,.18);
	background: #fff;
	font: inherit;
	color: var(--hpg-color-text);
}
.hpg-form__field select:focus,
.hpg-form__field input:focus { outline: 3px solid var(--hpg-color-electric); outline-offset: 1px; }
.hpg-form__actions { grid-column: 1 / -1; display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.hpg-form__error {
	grid-column: 1 / -1;
	margin: 0;
	color: #8a3b2a;
	background: rgba(255,80,60,.06);
	border: 1px solid rgba(255,80,60,.25);
	border-radius: 10px;
	padding: 8px 12px;
	font-size: .9rem;
}

/* Time calculator result */
.hpg-time-calc__result { margin-top: 22px; }
.hpg-time-calc__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 14px;
	margin-bottom: 14px;
}
.hpg-time-calc__phase {
	background: var(--hpg-color-bg-alt);
	border: 1px solid rgba(11,21,48,.08);
	border-radius: 14px;
	padding: 16px;
	text-align: center;
}
.hpg-time-calc__phase h4 { margin: 0 0 6px; font-size: .85rem; letter-spacing: .04em; color: var(--hpg-color-muted); }
.hpg-time-calc__duration { margin: 0 0 4px; font-size: 1.4rem; font-weight: 800; color: var(--hpg-color-navy); }
.hpg-time-calc__hint { margin: 0; font-family: var(--hpg-font-mono); color: var(--hpg-color-muted); font-size: .82rem; }

/* Skill priority result */
.hpg-priority__result { margin-top: 22px; }
.hpg-priority__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.hpg-priority__item {
	display: grid;
	grid-template-columns: 44px 1fr;
	gap: 14px;
	align-items: start;
	padding: 16px;
	background: var(--hpg-color-bg-alt);
	border: 1px solid rgba(11,21,48,.08);
	border-radius: 14px;
}
.hpg-priority__rank {
	width: 44px; height: 44px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 12px;
	background: var(--hpg-color-electric);
	color: #fff;
	font-weight: 800;
	font-size: 1.1rem;
}
.hpg-priority__body h4 { margin: 0 0 6px; }
.hpg-priority__body p { margin: 4px 0; color: var(--hpg-color-text); }
.hpg-priority__body p strong { color: var(--hpg-color-navy); }

/* Project Generator result */
.hpg-project__result { margin-top: 22px; display: grid; gap: 14px; }
.hpg-project__result h3 { margin: 0; }
.hpg-project__brief { color: var(--hpg-color-muted); margin: 0; }
.hpg-project__result h4 {
	margin: 8px 0 4px;
	font-size: .8rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--hpg-color-muted);
}
.hpg-project__result ul { margin: 0; padding-left: 1.1em; }
.hpg-project__readme pre {
	background: var(--hpg-color-graphite);
	color: #e6e9f4;
	font-family: var(--hpg-font-mono);
	font-size: .85rem;
	padding: 14px 16px;
	border-radius: 12px;
	overflow-x: auto;
	max-height: 320px;
}
.hpg-project__ctas { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }

/* Setup Generator result */
.hpg-setup__result { margin-top: 22px; }
.hpg-setup__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 14px;
	margin: 14px 0;
}
.hpg-setup__card {
	background: var(--hpg-color-bg-alt);
	border: 1px solid rgba(11,21,48,.08);
	border-radius: 14px;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.hpg-setup__card h4 { margin: 0; font-size: 1rem; }
.hpg-setup__why { margin: 0; color: var(--hpg-color-muted); font-size: .92rem; }

/* Block editor placeholder + frontend block bits */
.hpg-block-editor {
	border: 1px dashed rgba(47,107,255,.4);
	border-radius: 10px;
	padding: 14px;
	background: rgba(47,107,255,.04);
	font-family: var(--hpg-font-mono);
	font-size: .9rem;
}
.hpg-block-editor code { background: rgba(11,21,48,.06); padding: 2px 6px; border-radius: 6px; }

.hpg-block-faq { margin: 16px 0; }
.hpg-block-faq__heading { margin: 0 0 8px; }
.hpg-block-cta { margin: 14px 0; }

.hpg-proscons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	background: var(--hpg-color-bg-alt);
	border: 1px solid rgba(11,21,48,.08);
	border-radius: 14px;
	padding: 16px;
	margin: 14px 0;
}
@media (max-width: 600px) { .hpg-proscons { grid-template-columns: 1fr; } }
.hpg-proscons__col h4 {
	margin: 0 0 6px;
	font-size: .78rem;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.hpg-proscons__pros h4 { color: #0a6b3f; }
.hpg-proscons__cons h4 { color: #8a3b2a; }
.hpg-proscons__col ul { margin: 0; padding-left: 1.1em; }

.hpg-quick-answer {
	background: rgba(255,209,102,.10);
	border: 1px solid rgba(255,209,102,.5);
	border-radius: 12px;
	padding: 14px 16px;
	margin: 14px 0;
}
.hpg-quick-answer__q { margin: 0 0 4px; }
.hpg-quick-answer__a { margin: 0; color: var(--hpg-color-text); }

/* Landing page sections */
.hpg-section--landing-hero {
	background: linear-gradient(180deg, rgba(47,107,255,.06), transparent);
	padding-top: 56px;
}
.hpg-section--landing-hero .hpg-section__title { margin-bottom: 12px; }
.hpg-landing__editorial { margin-top: 18px; max-width: 720px; }
.hpg-landing__editorial p { color: var(--hpg-color-text); }
.hpg-section--tool-cta { padding: 32px 0 56px; text-align: center; background: var(--hpg-color-bg-alt); }

/* Compare table */
.hpg-compare { margin-top: 24px; }
.hpg-compare__title { font-size: 1.1rem; margin: 0 0 10px; }
.hpg-compare__scroll { overflow-x: auto; border: 1px solid rgba(11,21,48,.08); border-radius: 12px; }
.hpg-compare__table {
	width: 100%;
	border-collapse: collapse;
	min-width: 640px;
}
.hpg-compare__table th,
.hpg-compare__table td {
	padding: 12px 14px;
	border-bottom: 1px solid rgba(11,21,48,.06);
	text-align: left;
	font-size: .92rem;
	vertical-align: top;
}
.hpg-compare__table thead th {
	background: var(--hpg-color-bg-alt);
	font-size: .8rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--hpg-color-muted);
}
.hpg-compare__table tbody th { font-weight: 700; color: var(--hpg-color-navy); }

/* --------- Compare drawer + button --------- */
.hpg-compare-btn {
	background: transparent;
	border: 1px dashed rgba(11,21,48,.25);
	color: var(--hpg-color-navy);
	font: inherit;
	font-size: .85rem;
	font-weight: 600;
	padding: 8px 12px;
	border-radius: 999px;
	cursor: pointer;
	align-self: flex-start;
	transition: background .12s ease, border-color .12s ease;
}
.hpg-compare-btn:hover { border-color: var(--hpg-color-electric); background: rgba(47,107,255,.04); }
.hpg-compare-btn.is-saved { border-color: var(--hpg-color-mint); background: rgba(61,220,151,.10); color: #0a6b3f; }

.hpg-compare-drawer {
	position: fixed;
	left: 12px;
	right: 12px;
	bottom: 0;
	z-index: 70;
	background: var(--hpg-color-navy);
	color: #fff;
	border-radius: 16px 16px 0 0;
	box-shadow: 0 -20px 60px -20px rgba(11,21,48,.4);
	max-width: 1160px;
	margin: 0 auto;
}
.hpg-compare-drawer__bar {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
}
.hpg-compare-drawer__toggle {
	background: transparent;
	color: #fff;
	border: 0;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.hpg-compare-drawer__count {
	background: var(--hpg-color-electric);
	color: #fff;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: .8rem;
}
.hpg-compare-drawer__clear {
	margin-left: auto;
	background: transparent;
	color: rgba(255,255,255,.7);
	border: 0;
	font: inherit;
	cursor: pointer;
	text-decoration: underline;
}
.hpg-compare-drawer__body { padding: 0 16px 16px; }
.hpg-compare-drawer__scroll { overflow-x: auto; border: 1px solid rgba(255,255,255,.10); border-radius: 12px; background: rgba(255,255,255,.02); }
.hpg-compare-drawer__scroll table { width: 100%; border-collapse: collapse; min-width: 480px; }
.hpg-compare-drawer__scroll th,
.hpg-compare-drawer__scroll td {
	padding: 12px 14px;
	border-bottom: 1px solid rgba(255,255,255,.08);
	text-align: left;
	color: #fff;
	font-size: .9rem;
	vertical-align: top;
}
.hpg-compare-drawer__scroll thead th { background: rgba(255,255,255,.04); }
.hpg-compare-drawer__remove-btn {
	background: transparent;
	color: rgba(255,255,255,.7);
	border: 1px solid rgba(255,255,255,.15);
	border-radius: 8px;
	padding: 6px 10px;
	cursor: pointer;
}
.hpg-compare-drawer__remove-btn:hover { background: rgba(255,255,255,.08); }

/* --------- Language Database --------- */
.hpg-langdb__bar { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.hpg-langdb__search {
	padding: 12px 14px;
	border: 1px solid rgba(11,21,48,.15);
	border-radius: 10px;
	font: inherit;
}
.hpg-langdb__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.hpg-langdb__tag {
	background: transparent;
	border: 1px solid rgba(11,21,48,.15);
	color: var(--hpg-color-navy);
	padding: 6px 12px;
	border-radius: 999px;
	font-size: .85rem;
	font-weight: 600;
	cursor: pointer;
}
.hpg-langdb__tag:hover { border-color: var(--hpg-color-electric); }
.hpg-langdb__tag.is-active { background: var(--hpg-color-electric); color: #fff; border-color: var(--hpg-color-electric); }
.hpg-langdb__empty { color: var(--hpg-color-muted); text-align: center; padding: 24px; }

.hpg-langdb__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 14px;
}
.hpg-langdb__card {
	background: var(--hpg-color-bg-alt);
	border: 1px solid rgba(11,21,48,.08);
	border-radius: 14px;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.hpg-langdb__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hpg-langdb__name { margin: 0; font-size: 1.1rem; }
.hpg-langdb__curve {
	font-family: var(--hpg-font-mono);
	color: var(--hpg-color-electric);
	letter-spacing: 2px;
	font-size: .8rem;
}
.hpg-langdb__label { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--hpg-color-muted); margin: 4px 0 0; }
.hpg-langdb__uses { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.hpg-langdb__uses li {
	background: rgba(47,107,255,.08);
	color: var(--hpg-color-electric);
	border-radius: 999px;
	padding: 3px 10px;
	font-size: .78rem;
}

/* --------- Concept Explorer --------- */
.hpg-conceptdb__bar { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.hpg-conceptdb__search {
	padding: 12px 14px;
	border: 1px solid rgba(11,21,48,.15);
	border-radius: 10px;
	font: inherit;
}
.hpg-conceptdb__groups { display: flex; flex-wrap: wrap; gap: 8px; }

.hpg-conceptdb__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hpg-conceptdb__item { border: 1px solid rgba(11,21,48,.08); border-radius: 12px; background: var(--hpg-color-bg-alt); overflow: hidden; }
.hpg-conceptdb__head {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 16px;
	background: transparent;
	border: 0;
	cursor: pointer;
	font: inherit;
	text-align: left;
}
.hpg-conceptdb__name { font-weight: 700; color: var(--hpg-color-navy); }
.hpg-conceptdb__group { font-family: var(--hpg-font-mono); font-size: .75rem; color: var(--hpg-color-muted); text-transform: uppercase; letter-spacing: .08em; }
.hpg-conceptdb__item.is-open .hpg-conceptdb__head { background: rgba(47,107,255,.06); }
.hpg-conceptdb__detail { padding: 14px 16px 18px; display: grid; gap: 10px; }
.hpg-conceptdb__detail h4 {
	font-size: .78rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--hpg-color-muted);
	margin: 4px 0 2px;
}
.hpg-conceptdb__detail p { margin: 0; }
.hpg-conceptdb__example {
	background: var(--hpg-color-graphite);
	color: #e6e9f4;
	padding: 12px 14px;
	border-radius: 10px;
	font-family: var(--hpg-font-mono);
	font-size: .85rem;
	overflow-x: auto;
	margin: 0;
}
.hpg-conceptdb__related { display: flex; flex-wrap: wrap; gap: 6px; }
.hpg-conceptdb__related .hpg-chip {
	background: rgba(47,107,255,.08);
	color: var(--hpg-color-electric);
	border: 0;
	cursor: pointer;
}

/* --------- Debug checklist --------- */
.hpg-debug__list { margin: 14px 0; padding-left: 1.4em; display: grid; gap: 8px; }
.hpg-debug__row { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; cursor: pointer; }
.hpg-debug__check { margin-top: 4px; }
.hpg-debug__actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 0; }

/* --------- Study tracker --------- */
.hpg-tracker__summary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 12px;
	margin: 18px 0;
}
.hpg-tracker__stat {
	background: var(--hpg-color-bg-alt);
	border: 1px solid rgba(11,21,48,.08);
	border-radius: 12px;
	padding: 14px;
	text-align: center;
}
.hpg-tracker__stat strong { display: block; font-size: 1.4rem; color: var(--hpg-color-navy); }
.hpg-tracker__stat span { font-size: .82rem; color: var(--hpg-color-muted); }

.hpg-tracker__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hpg-tracker__row {
	position: relative;
	background: var(--hpg-color-bg-alt);
	border: 1px solid rgba(11,21,48,.06);
	border-radius: 12px;
	padding: 12px 40px 12px 14px;
}
.hpg-tracker__meta { margin: 0; color: var(--hpg-color-text); font-size: .92rem; }
.hpg-tracker__concepts,
.hpg-tracker__notes { margin: 4px 0 0; color: var(--hpg-color-muted); font-size: .9rem; }
.hpg-tracker__delete {
	position: absolute;
	top: 10px;
	right: 10px;
	background: transparent;
	border: 0;
	font-size: 1rem;
	cursor: pointer;
	color: var(--hpg-color-muted);
}
.hpg-tracker__delete:hover { color: #8a3b2a; }
.hpg-tracker__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

/* --------- Portfolio tracker --------- */
.hpg-portfolio__checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; margin-top: 4px; }
.hpg-portfolio__check { display: inline-flex; gap: 8px; align-items: center; font-size: .9rem; }

.hpg-portfolio__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 14px;
	margin: 16px 0;
}
.hpg-portfolio__card {
	background: var(--hpg-color-bg-alt);
	border: 1px solid rgba(11,21,48,.08);
	border-radius: 14px;
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.hpg-portfolio__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hpg-portfolio__status {
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	padding: 3px 8px;
	border-radius: 999px;
}
.hpg-portfolio__status--idea     { background: rgba(11,21,48,.06); color: var(--hpg-color-muted); }
.hpg-portfolio__status--building { background: rgba(255,209,102,.20); color: #6b5400; }
.hpg-portfolio__status--shipping { background: rgba(47,107,255,.10); color: var(--hpg-color-electric); }
.hpg-portfolio__status--shipped  { background: rgba(61,220,151,.12); color: #0a6b3f; }
.hpg-portfolio__stack { margin: 0; color: var(--hpg-color-muted); font-size: .88rem; }
.hpg-portfolio__score { display: flex; flex-direction: column; gap: 4px; }
.hpg-portfolio__scorebar { height: 6px; background: rgba(11,21,48,.06); border-radius: 999px; overflow: hidden; }
.hpg-portfolio__scorefill { height: 100%; background: linear-gradient(90deg, var(--hpg-color-electric), var(--hpg-color-mint)); transition: width .25s ease; }
.hpg-portfolio__score span { font-size: .82rem; color: var(--hpg-color-muted); }
.hpg-portfolio__links { display: flex; gap: 8px; flex-wrap: wrap; }
.hpg-portfolio__notes { margin: 0; color: var(--hpg-color-text); font-size: .9rem; }
.hpg-portfolio__actions { display: flex; gap: 8px; }

/* --------- Roadmap --------- */
.hpg-roadmap__head { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; align-items: end; }
@media (max-width: 720px) { .hpg-roadmap__head { grid-template-columns: 1fr; } }
.hpg-roadmap__progress-label { margin: 6px 0 0; color: var(--hpg-color-muted); font-size: .85rem; }

.hpg-roadmap__timeline {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
	display: grid;
	gap: 14px;
}
.hpg-roadmap__timeline::before {
	content: "";
	position: absolute;
	left: 18px;
	top: 12px;
	bottom: 12px;
	width: 2px;
	background: rgba(11,21,48,.08);
	border-radius: 1px;
}
.hpg-roadmap__step {
	position: relative;
	padding-left: 50px;
	padding-right: 8px;
}
.hpg-roadmap__dot {
	position: absolute;
	left: 6px;
	top: 4px;
	width: 26px;
	height: 26px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--hpg-color-bg);
	border: 2px solid rgba(11,21,48,.15);
	color: var(--hpg-color-muted);
	font-weight: 800;
	font-size: .82rem;
	z-index: 1;
}
.hpg-roadmap__step.is-done .hpg-roadmap__dot { background: var(--hpg-color-mint); border-color: var(--hpg-color-mint); color: #fff; }
.hpg-roadmap__step.is-start .hpg-roadmap__dot { border-color: var(--hpg-color-electric); color: var(--hpg-color-electric); }
.hpg-roadmap__step.is-locked .hpg-roadmap__body { opacity: .5; }

.hpg-roadmap__body { display: flex; flex-direction: column; gap: 6px; }
.hpg-roadmap__title { margin: 0; font-size: 1.05rem; }
.hpg-roadmap__what { margin: 0; color: var(--hpg-color-muted); }
.hpg-roadmap__locked { margin: 0; font-size: .85rem; color: var(--hpg-color-muted); }

/* --------- EEAT byline --------- */
.hpg-eeat {
	background: var(--hpg-color-bg-alt);
	border: 1px solid rgba(11,21,48,.08);
	border-radius: 12px;
	padding: 12px 14px;
	margin: 12px 0 18px;
	font-size: .92rem;
}
.hpg-eeat__line { margin: 0; color: var(--hpg-color-text); }
.hpg-eeat__line strong { color: var(--hpg-color-muted); font-weight: 600; }
.hpg-eeat__method { margin: 6px 0 0; color: var(--hpg-color-muted); font-size: .88rem; }

/* --------- Desk Planner --------- */
.hpg-desk__h { margin: 0 0 12px; font-size: 1.05rem; }
.hpg-desk__palette { margin-bottom: 22px; }
.hpg-desk__palette-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.hpg-desk__chip {
	background: var(--hpg-color-bg-alt);
	border: 1px solid rgba(11,21,48,.10);
	border-radius: 12px;
	padding: 10px 12px;
	cursor: pointer;
	font: inherit;
	font-weight: 600;
	color: var(--hpg-color-navy);
	display: flex;
	align-items: center;
	gap: 8px;
	transition: border-color .12s ease, background .12s ease, transform .12s ease;
}
.hpg-desk__chip:hover { border-color: var(--hpg-color-electric); transform: translateY(-1px); }
.hpg-desk__chip.is-on {
	background: rgba(47,107,255,.08);
	border-color: var(--hpg-color-electric);
}
.hpg-desk__chip-icon { font-size: 1.1rem; }

.hpg-desk__schematic { position: relative; margin: 18px 0; }
.hpg-desk__grid {
	display: grid;
	grid-template-columns: 1fr 1.4fr 1fr;
	gap: 12px;
	background: linear-gradient(180deg, rgba(47,107,255,.04), rgba(61,220,151,.04));
	border: 1px dashed rgba(11,21,48,.18);
	border-radius: 16px;
	padding: 16px;
	min-height: 200px;
}
.hpg-desk__grid.is-empty { background: var(--hpg-color-bg-alt); }
.hpg-desk__zone {
	background: var(--hpg-color-bg);
	border: 1px solid rgba(11,21,48,.06);
	border-radius: 12px;
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-height: 160px;
}
.hpg-desk__zone--under {
	grid-column: 1 / -1;
	background: rgba(11,21,48,.04);
}
.hpg-desk__zone-label {
	margin: 0;
	font-size: .72rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--hpg-color-muted);
}
.hpg-desk__zone-empty { margin: 0; color: var(--hpg-color-muted); font-size: .9rem; }
.hpg-desk__empty {
	text-align: center;
	color: var(--hpg-color-muted);
	margin: 0 0 12px;
}
.hpg-desk__placed {
	background: var(--hpg-color-bg-alt);
	border: 1px solid rgba(11,21,48,.08);
	border-radius: 10px;
	padding: 10px;
}
.hpg-desk__placed-head { display: flex; align-items: center; gap: 8px; }
.hpg-desk__placed-icon { font-size: 1.2rem; }
.hpg-desk__placed-name { font-weight: 700; color: var(--hpg-color-navy); }
.hpg-desk__placed-tip { margin: 4px 0 6px; color: var(--hpg-color-muted); font-size: .85rem; }
.hpg-desk__placed-actions { display: flex; align-items: center; gap: 6px; }
.hpg-desk__move {
	flex: 1;
	padding: 6px 8px;
	border-radius: 8px;
	border: 1px solid rgba(11,21,48,.15);
	font: inherit;
	font-size: .82rem;
	background: var(--hpg-color-bg);
}
.hpg-desk__remove {
	background: transparent;
	border: 0;
	color: var(--hpg-color-muted);
	cursor: pointer;
	font-size: .95rem;
	padding: 4px 8px;
}
.hpg-desk__remove:hover { color: #8a3b2a; }

.hpg-desk__ergonomic {
	background: rgba(61,220,151,.06);
	border: 1px solid rgba(61,220,151,.30);
	border-radius: 12px;
	padding: 14px 18px;
	margin: 18px 0;
}
.hpg-desk__ergonomic ul { margin: 8px 0 0; padding-left: 1.1em; color: var(--hpg-color-text); }
.hpg-desk__bundle { margin: 18px 0; }
.hpg-desk__bundle-intro { color: var(--hpg-color-muted); margin: 0 0 10px; font-size: .92rem; }
.hpg-desk__bundle-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hpg-desk__bundle-list li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	background: var(--hpg-color-bg-alt);
	border: 1px solid rgba(11,21,48,.06);
	border-radius: 10px;
	padding: 10px 12px;
}
.hpg-desk__bundle-name { font-weight: 600; color: var(--hpg-color-navy); }

@media (max-width: 700px) {
	.hpg-desk__grid { grid-template-columns: 1fr; }
}

/* --------- Setup Bundle block --------- */
.hpg-bundle {
	background: var(--hpg-color-bg-alt);
	border: 1px solid rgba(11,21,48,.08);
	border-radius: 14px;
	padding: 18px;
	margin: 18px 0;
}
.hpg-bundle__title { margin: 0 0 4px; }
.hpg-bundle__intro { margin: 0 0 12px; color: var(--hpg-color-muted); }
.hpg-bundle__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hpg-bundle__item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	background: var(--hpg-color-bg);
	border: 1px solid rgba(11,21,48,.06);
	border-radius: 10px;
	padding: 10px 12px;
}
.hpg-bundle__name { margin: 0; font-size: 1rem; }
.hpg-bundle__best { margin: 2px 0 0; color: var(--hpg-color-muted); font-size: .88rem; }

/* --------- Code Snippet block --------- */
.hpg-snippet {
	margin: 18px 0;
	background: var(--hpg-color-graphite);
	color: #e6e9f4;
	border-radius: 14px;
	overflow: hidden;
	font-family: var(--hpg-font-mono);
}
.hpg-snippet__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 14px;
	background: rgba(255,255,255,.04);
	border-bottom: 1px solid rgba(255,255,255,.06);
}
.hpg-snippet__lang {
	font-size: .72rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--hpg-color-mint);
	font-weight: 700;
}
.hpg-snippet__copy {
	background: transparent;
	color: rgba(255,255,255,.7);
	border: 1px solid rgba(255,255,255,.15);
	border-radius: 8px;
	padding: 4px 10px;
	cursor: pointer;
	font: inherit;
	font-size: .82rem;
}
.hpg-snippet__copy:hover { background: rgba(255,255,255,.06); color: #fff; }
.hpg-snippet pre {
	margin: 0;
	padding: 16px 18px;
	font-size: .9rem;
	line-height: 1.55;
	overflow-x: auto;
}
.hpg-snippet__caption {
	padding: 8px 14px 12px;
	font-size: .8rem;
	color: rgba(255,255,255,.6);
	font-family: var(--hpg-font-body);
}

/* --------- Newsletter admin hint --------- */
.hpg-newsletter__admin-note {
	grid-column: 1 / -1;
	margin: 6px 0 0;
	font-size: .82rem;
	color: rgba(255,255,255,.65);
}
.hpg-newsletter__admin-note a { color: var(--hpg-color-mint); }

/* --------- Search empty state --------- */
.hpg-empty { padding: 32px 0; }
.hpg-empty__suggestions { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hpg-empty__suggestions a {
	display: inline-block;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--hpg-color-bg-alt);
	color: var(--hpg-color-navy);
	text-decoration: none;
	font-size: .9rem;
	font-weight: 600;
}
.hpg-empty__suggestions a:hover { background: rgba(47,107,255,.08); color: var(--hpg-color-electric); }

/* --------- Print: hide noisy bits when user prints roadmap --------- */
@media print {
	.hpg-site-header,
	.hpg-site-footer,
	.hpg-compare-drawer,
	.hpg-mobile-cta,
	.hpg-cta { display: none !important; }
	.hpg-section { padding: 16px 0; }
	.hpg-roadmap__step .hpg-cta { display: none !important; }
}

/* --------- Visually hidden (for sr-only labels) --------- */
.hpg-visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0,0,0,0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* --------- Breadcrumbs --------- */
.hpg-breadcrumbs {
	font-size: .85rem;
	color: var(--hpg-color-muted);
	margin: 16px 0;
}
.hpg-breadcrumbs__list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
}
.hpg-breadcrumbs__item + .hpg-breadcrumbs__item::before {
	content: "›";
	margin-right: 6px;
	color: var(--hpg-color-muted);
}
.hpg-breadcrumbs a { color: var(--hpg-color-muted); text-decoration: none; }
.hpg-breadcrumbs a:hover { color: var(--hpg-color-electric); text-decoration: underline; }
.hpg-breadcrumbs [aria-current="page"] { color: var(--hpg-color-navy); font-weight: 600; }

/* --------- Compare engine homepage section --------- */
.hpg-section--compare-engine { background: var(--hpg-color-bg-alt); }
.hpg-compare-engine {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 24px;
	background: var(--hpg-color-bg);
	border: 1px solid rgba(11,21,48,.08);
	border-radius: 18px;
	padding: 24px;
}
@media (max-width: 800px) { .hpg-compare-engine { grid-template-columns: 1fr; } }
.hpg-compare-engine__how h3 { margin: 0 0 10px; }
.hpg-compare-engine__how ol { margin: 0 0 14px 1.1em; padding: 0; color: var(--hpg-color-text); }
.hpg-compare-engine__how ol li { margin-bottom: 6px; }
.hpg-compare-engine__count {
	color: var(--hpg-color-muted);
	font-size: .9rem;
	margin: 0 0 14px;
	min-height: 1.5em;
}
.hpg-compare-engine__inline:empty,
.hpg-compare-engine__empty {
	color: var(--hpg-color-muted);
	font-size: .92rem;
	background: var(--hpg-color-bg-alt);
	border: 1px dashed rgba(11,21,48,.10);
	border-radius: 12px;
	padding: 14px;
	margin: 0;
}
.hpg-compare-engine__empty-page {
	background: var(--hpg-color-bg-alt);
	border: 1px dashed rgba(11,21,48,.15);
	border-radius: 14px;
	padding: 24px;
	color: var(--hpg-color-text);
}
.hpg-compare-engine__empty-page p { margin: 0 0 8px; }

/* --------- Quiz progress with role=progressbar still needs visible bar --------- */
.hpg-quiz__progress { position: relative; }

/* --------- Reduced motion --------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation: none !important;
		transition: none !important;
	}
}