/*!
 * Hostnado child theme styles — v1.1.0
 * Brand tokens, components, block styles and page sections.
 * Breakpoints: 1100px (tablet) and 640px (phone).
 */

/* =========================================================
   1. Tokens
   ========================================================= */
:root {
	--storm: #4F46E5; --storm-deep: #4338CA; --storm-soft: #EEF2FF; --storm-400: #818CF8;
	--vortex: #06B6D4; --vortex-ink: #0E7490;
	--ink: #0B1220; --ink-raised: #162036;
	--slate-800: #1E293B; --slate-600: #475569; --slate-500: #5B6B81; --slate-400: #94A3B8;
	--line: #E2E8F0; --line-dark: #24324D; --mist: #F5F7FB; --white: #FFFFFF;
	--bolt: #FACC15; --bolt-hover: #EAB308; --bolt-soft: #FEF9C3;
	--pass: #15803D; --pass-soft: #DCFCE7; --fail: #B91C1C; --fail-soft: #FEE2E2;
	--terminal: #0F172A; --focus-ring: var(--storm);

	--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px;
	--space-12: 48px; --space-16: 64px; --space-24: 96px;
	--radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-pill: 999px;
	--shadow-sm: 0 1px 2px rgba(11, 18, 32, .06), 0 1px 3px rgba(11, 18, 32, .08);
	--shadow-md: 0 8px 24px rgba(11, 18, 32, .10);
	--shadow-frame: 0 20px 48px rgba(11, 18, 32, .22);

	--font-display: "Space Grotesk", system-ui, sans-serif;
	--font-sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

	/* Kadence reads these for body and heading text. */
	--global-body-font-family: var(--font-sans);
	--global-heading-font-family: var(--font-display);
}

/* Classic-theme Group blocks add an inner container; let its children join the parent layout. */
.wp-block-group:is([class*="hn-"], [class*="is-style-hn-"]) > .wp-block-group__inner-container { display: contents; }

/* =========================================================
   2. Base
   ========================================================= */
body.hostnado { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
.hostnado h1, .hostnado h2, .hostnado h3, .hostnado h4, .hostnado h5, .hostnado h6 { font-family: var(--font-display); }
.hostnado :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.hn-i { width: 20px; height: 20px; flex: none; vertical-align: middle; }
.hn-i--flip { transform: scaleX(-1); }
.hn-wrap { width: 100%; max-width: 1304px; margin-left: auto; margin-right: auto; padding-left: 32px; padding-right: 32px; box-sizing: border-box; }
.hn-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.hn-section { padding-top: var(--space-24); padding-bottom: var(--space-24); }
.hn-section--mist { background: var(--mist); }
.hn-section--dark { background: var(--ink); color: var(--slate-400); }
.hn-section--dark :is(h2, h3, h4) { color: var(--white); }
.hn-eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); font: 600 13px/20px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--vortex-ink); margin: 0; }
.hn-section--dark .hn-eyebrow, .hn-hero .hn-eyebrow, .hn-pagehero .hn-eyebrow, .is-style-hn-dark .hn-eyebrow { color: var(--vortex); }
.hn-h2 { font: 700 32px/40px var(--font-display); letter-spacing: -.01em; color: var(--ink); margin: 0; }
.hn-lead { font-size: 19px; line-height: 31px; color: var(--slate-600); max-width: 680px; margin: 0; }
.hn-sec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-6); margin-bottom: var(--space-12); }
:is(.hn-sec-head, .hn-sec-head > .wp-block-group__inner-container) > * { margin: 0; }
.hn-link { display: inline-flex; align-items: center; gap: 6px; font: 600 15px/20px var(--font-sans); color: var(--storm); text-decoration: none; }
.hn-link .hn-i { width: 18px; height: 18px; }
.hn-figcap { margin-top: var(--space-3); font: 400 14px/20px var(--font-sans); color: var(--slate-600); }
.hn-footnote { margin-top: var(--space-4); font: 400 13px/20px var(--font-sans); color: var(--slate-600); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* =========================================================
   3. Buttons (component + core Button block styles)
   ========================================================= */
.hn-btn,
.wp-block-button.is-style-hn-cta .wp-block-button__link,
.wp-block-button.is-style-hn-secondary .wp-block-button__link,
.wp-block-button.is-style-hn-ghost-dark .wp-block-button__link {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
	font: 600 15px/20px var(--font-sans); padding: var(--space-3) 20px; min-height: 44px; box-sizing: border-box;
	border-radius: var(--radius-md); border: 1px solid transparent; cursor: pointer; text-decoration: none;
	transition: background-color .15s, border-color .15s, color .15s;
}
.hn-btn .hn-i { width: 18px; height: 18px; }
.hn-btn--primary { background: var(--storm); color: var(--white); }
.hn-btn--primary:hover, .hn-btn--primary:focus { background: var(--storm-deep); color: var(--white); }
.hn-btn--secondary, .wp-block-button.is-style-hn-secondary .wp-block-button__link { background: var(--white); color: var(--storm); border-color: var(--storm); }
.hn-btn--secondary:hover, .wp-block-button.is-style-hn-secondary .wp-block-button__link:hover { background: var(--storm-soft); color: var(--storm-deep); }
.hn-btn--cta, .wp-block-button.is-style-hn-cta .wp-block-button__link { background: var(--bolt); color: var(--ink); box-shadow: var(--shadow-sm); }
.hn-btn--cta:hover, .hn-btn--cta:focus, .wp-block-button.is-style-hn-cta .wp-block-button__link:hover { background: var(--bolt-hover); color: var(--ink); }
.hn-btn--ghost-dark, .wp-block-button.is-style-hn-ghost-dark .wp-block-button__link { background: transparent; color: var(--white); border-color: var(--line-dark); }
.hn-btn--ghost-dark:hover, .wp-block-button.is-style-hn-ghost-dark .wp-block-button__link:hover { background: var(--ink-raised); border-color: var(--slate-400); color: var(--white); }
.hn-btn--sm { padding: var(--space-2) var(--space-3); font-size: 14px; min-height: 40px; }
.wp-block-button.is-style-hn-cta .wp-block-button__link::after {
	content: ""; width: 16px; height: 16px; background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.is-style-hn-dark .wp-block-button.is-style-hn-ghost-dark .wp-block-button__link:focus-visible { outline-color: var(--vortex); }

/* =========================================================
   4. Badges, score, avatar, meters
   ========================================================= */
.hn-badge { display: inline-flex; align-items: center; gap: var(--space-1); font: 600 13px/18px var(--font-sans); padding: var(--space-1) 10px; border-radius: var(--radius-pill); white-space: nowrap; text-decoration: none; }
.hn-badge .hn-i { width: 14px; height: 14px; }
.hn-badge--cat { background: var(--storm-soft); color: var(--storm); }
a.hn-badge--cat:hover { background: var(--storm); color: var(--white); }
.hn-badge--tested { background: var(--white); color: var(--vortex-ink); border: 1px solid var(--line); }
.hn-badge--deal { background: var(--bolt-soft); color: var(--ink); }
.hn-score { display: inline-flex; align-items: baseline; gap: 2px; font: 700 15px/1 var(--font-mono); padding: 6px 10px; border-radius: var(--radius-pill); background: var(--ink); color: var(--white); }
.hn-score small { font: 400 11px/1 var(--font-mono); color: var(--slate-400); }
.hn-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--storm); color: var(--white); display: inline-grid; place-items: center; font: 600 11px/1 var(--font-sans); flex: none; }
.hn-meter { display: block; width: 100%; height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.hn-meter i { display: block; height: 100%; background: var(--vortex); border-radius: 4px; }
.hn-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--space-3); font: 400 13px/20px var(--font-sans); color: var(--slate-500); }
.hn-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--slate-400); }

/* =========================================================
   5. Forms
   ========================================================= */
.hn-field { display: grid; gap: 6px; }
.hn-field label { font: 600 14px/20px var(--font-sans); color: var(--ink); }
.hn-hint { font: 400 13px/20px var(--font-sans); color: var(--slate-600); }
.hn-input { width: 100%; box-sizing: border-box; font: 400 16px/24px var(--font-sans); color: var(--ink); padding: 11px 14px; background: var(--white); border: 1px solid var(--slate-500); border-radius: var(--radius-md); }
.hn-input::placeholder { color: var(--slate-500); }
.hn-inline { display: flex; gap: var(--space-2); }
.hn-inline .hn-input { flex: 1; min-width: 0; }

/* =========================================================
   6. Callouts (component + Group block styles)
   ========================================================= */
.hn-callout,
.wp-block-group.is-style-hn-tip, .wp-block-group.is-style-hn-warning, .wp-block-group.is-style-hn-note {
	position: relative; padding: var(--space-4) 20px var(--space-4) 56px; border-radius: var(--radius-md);
	font-size: 16px; line-height: 26px; color: var(--slate-800); border: 1px solid var(--line); background: var(--mist);
}
:is(.wp-block-group:is(.is-style-hn-tip, .is-style-hn-warning, .is-style-hn-note), .wp-block-group:is(.is-style-hn-tip, .is-style-hn-warning, .is-style-hn-note) > .wp-block-group__inner-container) > * { margin: 0; }
:is(.wp-block-group:is(.is-style-hn-tip, .is-style-hn-warning, .is-style-hn-note), .wp-block-group:is(.is-style-hn-tip, .is-style-hn-warning, .is-style-hn-note) > .wp-block-group__inner-container) > * + * { margin-top: var(--space-2); }
.wp-block-group:is(.is-style-hn-tip, .is-style-hn-warning, .is-style-hn-note) strong:first-child { color: var(--ink); }
.wp-block-group:is(.is-style-hn-tip, .is-style-hn-warning, .is-style-hn-note)::before {
	content: ""; position: absolute; left: 20px; top: 18px; width: 22px; height: 22px; background: currentColor;
	-webkit-mask: var(--hn-callout-icon) center / contain no-repeat; mask: var(--hn-callout-icon) center / contain no-repeat;
}
.wp-block-group.is-style-hn-tip { background: var(--white); }
.wp-block-group.is-style-hn-tip::before { color: var(--pass); --hn-callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3C/svg%3E"); }
.wp-block-group.is-style-hn-warning { background: var(--fail-soft); border-color: transparent; }
.wp-block-group.is-style-hn-warning::before { color: var(--fail); --hn-callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); }
.wp-block-group.is-style-hn-note { background: var(--storm-soft); border-color: transparent; }
.wp-block-group.is-style-hn-note::before { color: var(--storm); --hn-callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E"); }
.wp-block-group.is-style-hn-card { padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-sm); }
.wp-block-group.is-style-hn-dark { background: var(--ink); color: var(--slate-400); }
.wp-block-group.is-style-hn-dark :is(h1, h2, h3, h4) { color: var(--white); }
.wp-block-group.is-style-hn-dark a:not(.wp-block-button__link):not(.hn-btn) { color: var(--storm-400); }

/* =========================================================
   7. Terminal (Code block style + component)
   ========================================================= */
.hn-term, .wp-block-code.is-style-hn-terminal { position: relative; border-radius: var(--radius-md); background: var(--terminal); color: var(--line); border: 0; box-shadow: var(--shadow-sm); overflow: hidden; padding: 0; }
.wp-block-code.is-style-hn-terminal { padding: 48px var(--space-4) var(--space-4); font: 400 15px/24px var(--font-mono); overflow-x: auto; white-space: pre; }
.wp-block-code.is-style-hn-terminal code { font: inherit; color: inherit; background: none; padding: 0; white-space: pre; }
.wp-block-code.is-style-hn-terminal::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 36px; border-bottom: 1px solid var(--line-dark); background: radial-gradient(circle at 18px 18px, var(--line-dark) 5px, transparent 5.5px), radial-gradient(circle at 34px 18px, var(--line-dark) 5px, transparent 5.5px), radial-gradient(circle at 50px 18px, var(--line-dark) 5px, transparent 5.5px); }
.hn-term__bar { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line-dark); font: 400 13px/20px var(--font-mono); color: var(--slate-400); }
.hn-term__dots { display: flex; gap: 6px; }
.hn-term__dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-dark); display: block; }
.hn-term__title { flex: 1; }
.hn-term pre { margin: 0; padding: var(--space-4); overflow-x: auto; font: 400 15px/24px var(--font-mono); color: var(--line); background: none; }
.hn-term .p, .is-style-hn-terminal .p { color: var(--vortex); user-select: none; }
.hn-term .c, .is-style-hn-terminal .c { color: var(--slate-400); }
.hn-term .ok, .is-style-hn-terminal .ok { color: var(--bolt); }
.hn-copy { position: absolute; top: 6px; right: 8px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font: 600 12px/16px var(--font-sans); color: var(--line); background: var(--ink-raised); border: 1px solid var(--line-dark); border-radius: var(--radius-sm); padding: 4px 8px; }
.hn-copy:focus-visible { outline-color: var(--vortex); }
.hn-term .hn-copy { position: static; }

/* =========================================================
   8. Benchmark bars & score box
   ========================================================= */
.hn-bench { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-6); background: var(--white); margin: var(--space-6) 0; }
.hn-bench__title { margin: 0; font: 600 17px/24px var(--font-display); color: var(--ink); }
.hn-bench__meta { margin: 2px 0 var(--space-4); font: 400 13px/20px var(--font-sans); color: var(--slate-600); }
.hn-bench__row { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: var(--space-3); align-items: center; margin-top: var(--space-3); }
.hn-bench__name { font: 600 14px/20px var(--font-sans); color: var(--slate-800); }
.hn-bench__track { height: 28px; background: var(--mist); border-radius: var(--radius-sm); }
.hn-bench__bar { height: 100%; min-width: 72px; border-radius: var(--radius-sm); background: var(--slate-400); display: flex; align-items: center; justify-content: flex-end; }
.hn-bench__row--hero .hn-bench__bar { background: var(--vortex); }
.hn-bench__row--hero .hn-bench__name { color: var(--ink); }
.hn-bench__val { font: 600 13px/1 var(--font-mono); color: var(--ink); padding: 0 var(--space-2); white-space: nowrap; }
.hn-scorebox { display: grid; justify-items: start; gap: var(--space-2); }
.hn-scorebox__big { font: 700 64px/1 var(--font-display); color: var(--ink); }
.hn-scorebox__big small { font: 600 20px/1 var(--font-mono); color: var(--slate-500); }
.hn-scorebox p { margin: 0; font: 400 14px/20px var(--font-sans); color: var(--slate-600); }
.hn-scorelist { display: grid; gap: var(--space-2); width: 100%; margin-top: var(--space-2); }
.hn-scorelist div { display: grid; grid-template-columns: 1fr auto; gap: 4px var(--space-3); font: 400 13px/18px var(--font-sans); color: var(--slate-600); }
.hn-scorelist b { font: 600 13px/18px var(--font-mono); color: var(--ink); }
.hn-scorelist .hn-meter { grid-column: 1 / -1; height: 6px; }

/* =========================================================
   9. Lists (pros / cons / checks)
   ========================================================= */
ul.is-style-hn-pros, ul.is-style-hn-cons, ul.is-style-hn-checks { list-style: none; padding-left: 0; display: grid; gap: var(--space-3); }
ul.is-style-hn-pros li, ul.is-style-hn-cons li, ul.is-style-hn-checks li { position: relative; padding-left: 28px; }
ul.is-style-hn-pros li::before, ul.is-style-hn-cons li::before, ul.is-style-hn-checks li::before { content: ""; position: absolute; left: 0; top: .3em; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--hn-li-icon) center / contain no-repeat; mask: var(--hn-li-icon) center / contain no-repeat; }
ul.is-style-hn-pros li::before, ul.is-style-hn-checks li::before { color: var(--pass); --hn-li-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
ul.is-style-hn-checks li::before { color: var(--storm); }
ul.is-style-hn-cons li::before { color: var(--fail); --hn-li-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E"); }

/* Pros / cons box */
.hn-pcbox.wp-block-columns { gap: 0 !important; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; margin: var(--space-8) 0; }
.hn-pcbox > .wp-block-column { padding: 0 var(--space-6) var(--space-6); margin: 0 !important; }
.hn-pcbox > .wp-block-column + .wp-block-column { border-left: 1px solid var(--line); }
.hn-pcbox .hn-pc-head { margin: 0 calc(-1 * var(--space-6)) var(--space-4); padding: var(--space-3) var(--space-6); font: 600 15px/22px var(--font-sans); }
.hn-pcbox .hn-pc-head--pro { background: var(--pass-soft); color: var(--pass); }
.hn-pcbox .hn-pc-head--con { background: var(--fail-soft); color: var(--fail); }

/* =========================================================
   10. Tables (spec + comparison)
   ========================================================= */
.wp-block-table.is-style-hn-spec, .wp-block-table.is-style-hn-compare { margin: var(--space-6) 0; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.wp-block-table.is-style-hn-spec table, .wp-block-table.is-style-hn-compare table { width: 100%; border-collapse: collapse; border: 0; margin: 0; font-size: 15px; line-height: 22px; }
.wp-block-table.is-style-hn-spec :is(td, th), .wp-block-table.is-style-hn-compare :is(td, th) { border: 0; border-top: 1px solid var(--line); padding: 14px 20px; vertical-align: top; text-align: left; }
.wp-block-table.is-style-hn-spec tr:first-child td, .wp-block-table.is-style-hn-compare thead th { border-top: 0; }
.wp-block-table.is-style-hn-spec td:first-child { width: 38%; background: var(--mist); font: 600 14px/22px var(--font-sans); color: var(--slate-600); }
.wp-block-table.is-style-hn-spec td + td { font: 600 15px/22px var(--font-mono); color: var(--ink); }
.wp-block-table.is-style-hn-compare table { min-width: 640px; }
.wp-block-table.is-style-hn-compare thead { border: 0; }
.wp-block-table.is-style-hn-compare thead th { background: var(--white); font: 600 17px/22px var(--font-display); color: var(--ink); text-align: center; padding-top: var(--space-6); }
.wp-block-table.is-style-hn-compare thead th:nth-child(2) { background: var(--storm-soft); }
.wp-block-table.is-style-hn-compare tbody td { text-align: center; font: 600 14px/20px var(--font-mono); color: var(--ink); }
.wp-block-table.is-style-hn-compare tbody td:first-child { text-align: left; background: var(--mist); font: 600 14px/20px var(--font-sans); color: var(--slate-600); width: 26%; }
.wp-block-table.is-style-hn-compare tbody td:nth-child(2) { background: #F7F8FF; }
.wp-block-table.is-style-hn-compare figcaption, .wp-block-table.is-style-hn-spec figcaption { padding: var(--space-3) 20px; font-size: 13px; color: var(--slate-600); text-align: left; border-top: 1px solid var(--line); margin: 0; }

/* =========================================================
   11. FAQ (Details blocks inside .hn-faq)
   ========================================================= */
.hn-faq { display: grid; gap: var(--space-3); }
:is(.hn-faq, .hn-faq > .wp-block-group__inner-container) > * { margin: 0 !important; }
.hn-faq .wp-block-details { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--white); padding: 0; }
.hn-faq .wp-block-details[open] { border-color: var(--storm-soft); box-shadow: var(--shadow-sm); }
.hn-faq .wp-block-details summary { min-height: 60px; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-3) 20px; cursor: pointer; list-style: none; font: 600 17px/24px var(--font-display); color: var(--ink); }
.hn-faq .wp-block-details summary::-webkit-details-marker { display: none; }
.hn-faq .wp-block-details summary::after { content: "+"; font: 400 26px/1 var(--font-sans); color: var(--storm); transition: transform .15s; }
.hn-faq .wp-block-details[open] summary::after { transform: rotate(45deg); }
.hn-faq .wp-block-details > :not(summary) { margin: 0; padding: 0 20px 20px; font-size: 16px; line-height: 26px; color: var(--slate-600); }

/* Quote */
.wp-block-quote.is-style-hn-quote { margin: var(--space-8) 0; padding: var(--space-6) var(--space-8); border: 0; border-radius: var(--radius-lg); background: var(--mist); font: 500 21px/32px var(--font-display); color: var(--ink); }
.wp-block-quote.is-style-hn-quote cite { display: block; margin-top: var(--space-3); font: 400 14px/20px var(--font-sans); font-style: normal; color: var(--slate-600); }

/* =========================================================
   12. Single post: disclosure, meta, TOC, article
   ========================================================= */
.hn-disclosure { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); border-radius: var(--radius-md); background: var(--mist); border: 1px solid var(--line); font: 400 14px/22px var(--font-sans); color: var(--slate-600); }
.hn-disclosure p { margin: 0; }
.hn-disclosure .hn-i { width: 18px; height: 18px; color: var(--slate-500); margin-top: 2px; }
.hn-disclosure a { font-weight: 600; }
.hn-review-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-8); font: 400 14px/20px var(--font-sans); color: var(--slate-600); }
.hn-meta-item { display: inline-flex; align-items: center; gap: 6px; }
.hn-meta-item .hn-i { width: 16px; height: 16px; color: var(--slate-500); }

.hn-article-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--space-12); align-items: start; }
.hn-toc { position: sticky; top: 96px; display: grid; gap: var(--space-4); }
.admin-bar .hn-toc { top: 128px; }
.hn-toc__box { border-left: 2px solid var(--line); padding-left: var(--space-4); }
.hn-toc__title { margin: 0 0 var(--space-3); font: 600 13px/20px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--slate-600); }
.hn-toc ol, .hn-toc-m ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.hn-toc a { position: relative; display: block; padding: 6px 0; font: 500 14px/20px var(--font-sans); color: var(--slate-600); text-decoration: none; }
.hn-toc a:hover, .hn-toc a.is-active { color: var(--storm); }
.hn-toc a.is-active { font-weight: 600; }
.hn-toc a.is-active::before { content: ""; position: absolute; left: -18px; top: 6px; bottom: 6px; width: 2px; background: var(--storm); }
.hn-toc__extra .hn-widget { padding: var(--space-4); border-radius: var(--radius-lg); background: var(--ink); color: var(--slate-400); font-size: 13px; line-height: 20px; }
.hn-toc__extra .hn-widget__title { margin: 0 0 var(--space-2); color: var(--white); font: 600 16px/22px var(--font-display); }
.hn-toc-m { display: none; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--mist); margin-bottom: var(--space-8); }
.hn-toc-m summary { min-height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-4); cursor: pointer; list-style: none; font: 600 15px/20px var(--font-sans); color: var(--ink); }
.hn-toc-m summary::-webkit-details-marker { display: none; }
.hn-toc-m[open] summary .hn-i { transform: rotate(180deg); }
.hn-toc-m ol { padding: 0 var(--space-4) var(--space-4); gap: var(--space-2); }
.hn-toc-m a { font-size: 15px; }
.hn-prose h2 { scroll-margin-top: 96px; }
.hn-prose code:not(.wp-block-code code) { font: 400 .88em/1 var(--font-mono); background: var(--mist); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 2px 6px; color: var(--ink); }

/* Verdict box */
.hn-verdict { margin: var(--space-6) 0 var(--space-12); border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--white); box-shadow: var(--shadow-md); overflow: hidden; }
:is(.hn-verdict, .hn-verdict > .wp-block-group__inner-container) > .hn-verdict__head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin: 0; padding: var(--space-4) var(--space-6); background: var(--ink); color: var(--white); }
.hn-verdict__head > * { margin: 0 !important; }
.hn-verdict__head h2, .hn-verdict__head p.hn-verdict__label { font: 600 14px/20px var(--font-display) !important; letter-spacing: .08em; text-transform: uppercase; color: var(--white) !important; }
:is(.hn-verdict, .hn-verdict > .wp-block-group__inner-container) > .wp-block-columns { margin: 0; padding: var(--space-8) var(--space-6); gap: var(--space-8); }
.hn-buy { display: grid; gap: var(--space-2); padding: var(--space-6) !important; border-radius: var(--radius-md); background: var(--mist); }
:is(.hn-buy, .hn-buy > .wp-block-group__inner-container) > * { margin: 0 !important; }
.hn-buy .hn-buy__label { font: 600 12px/16px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--slate-600); }
.hn-buy .hn-buy__price { font: 600 30px/1.1 var(--font-mono); color: var(--ink); }
.hn-buy .hn-buy__note { font-size: 13px; line-height: 20px; color: var(--slate-600); }
.hn-buy .wp-block-buttons, .hn-buy .wp-block-button, .hn-buy .wp-block-button__link { width: 100%; }

/* Inline product CTA */
.hn-cta-card { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: var(--space-6); align-items: center; padding: var(--space-6); margin: var(--space-8) 0; border-radius: var(--radius-lg); border: 2px solid var(--ink); background: var(--white); }
.hn-plogo { width: 48px; height: 48px; flex: none; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--white); display: grid; place-items: center; font: 600 13px/1 var(--font-mono); color: var(--slate-600); overflow: hidden; }
.hn-plogo img { width: 100%; height: 100%; object-fit: contain; }
.hn-cta-card .hn-plogo { width: 64px; height: 64px; }
.hn-cta-card b { display: block; font: 600 20px/26px var(--font-display); color: var(--ink); }
.hn-cta-card p { font-size: 15px; line-height: 23px; color: var(--slate-600); margin: 4px 0 0; }
.hn-cta-card .side { display: grid; gap: 6px; justify-items: end; text-align: right; }
.hn-cta-card .price { font: 600 22px/1 var(--font-mono); color: var(--ink); }
.hn-cta-card small { font: 400 12px/16px var(--font-sans); color: var(--slate-600); }

/* Screenshot frame (Image block with class hn-shot) */
.wp-block-image.hn-shot { margin: var(--space-8) 0; }
.wp-block-image.hn-shot img { display: block; width: 100%; border: 1px solid var(--line); border-top-width: 40px; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); box-sizing: border-box; background: var(--white); }
.wp-block-image.hn-shot { position: relative; }
.wp-block-image.hn-shot::before { content: ""; position: absolute; left: 14px; top: 15px; width: 46px; height: 10px; z-index: 1; background: radial-gradient(circle at 5px 5px, #CBD5E1 5px, transparent 5.5px), radial-gradient(circle at 23px 5px, #CBD5E1 5px, transparent 5.5px), radial-gradient(circle at 41px 5px, #CBD5E1 5px, transparent 5.5px); }
.wp-block-image.hn-shot figcaption { margin-top: var(--space-3); font-size: 14px; color: var(--slate-600); text-align: center; }

/* Final verdict */
.hn-final { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-8); align-items: center; margin: var(--space-16) 0 var(--space-8); padding: var(--space-8) !important; border-radius: var(--radius-lg); background: var(--ink); color: var(--slate-400); }
:is(.hn-final, .hn-final > .wp-block-group__inner-container) > * { margin: 0 !important; }
.hn-final .hn-final__score { width: 120px; height: 120px; border-radius: 50%; border: 6px solid var(--vortex); display: grid; place-items: center; align-content: center; text-align: center; font: 700 40px/1 var(--font-display); color: var(--white); box-sizing: border-box; }
.hn-final .hn-final__score small { display: block; font: 400 13px/16px var(--font-mono); color: var(--slate-400); margin-top: 4px; }
.hn-final h2, .hn-final h3 { color: var(--white); font: 700 26px/34px var(--font-display); margin: 0 0 var(--space-3); }
.hn-final p { margin: 0 0 var(--space-3); }
.hn-final .wp-block-buttons { margin-top: var(--space-4); }

/* =========================================================
   13. Archive (blog + categories) and post cards
   ========================================================= */
.hn-pagehead { background: var(--mist); border-bottom: 1px solid var(--line); padding: var(--space-12) 0; }
.hn-pagehead .rank-math-breadcrumb { margin-bottom: var(--space-4); font-size: 14px; color: var(--slate-600); }
.hn-pagehead .rank-math-breadcrumb a { color: var(--slate-600); }
.hn-pagehead__in { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--space-12); align-items: end; }
.hn-pagehead h1 { font: 700 44px/50px var(--font-display); letter-spacing: -.02em; color: var(--ink); margin: 0 0 var(--space-3); }
.hn-filter { display: flex; gap: var(--space-2); overflow-x: auto; padding: var(--space-6) 0; scrollbar-width: thin; }
.hn-tab { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--space-4); border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--white); color: var(--slate-800); font: 600 14px/20px var(--font-sans); cursor: pointer; text-decoration: none; }
.hn-tab:hover { border-color: var(--storm); color: var(--storm); }
.hn-tab[aria-selected="true"], .hn-tab[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--white); }
.hn-tab .count { font: 400 12px/1 var(--font-mono); margin-left: 6px; color: inherit; }
.hn-feat { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--white); box-shadow: var(--shadow-sm); margin-bottom: var(--space-12); }
.hn-feat .hn-thumb { aspect-ratio: auto; min-height: 340px; }
.hn-feat__body { display: grid; gap: var(--space-4); align-content: center; padding: var(--space-12); }
.hn-feat__body p { margin: 0; color: var(--slate-600); }
.hn-feat__title { font: 700 32px/40px var(--font-display); margin: 0; }
.hn-feat__title a { color: var(--ink); text-decoration: none; }
.hn-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.hn-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-12); align-items: start; padding-bottom: var(--space-16); }
.hn-layout--side { grid-template-columns: minmax(0, 1fr) 300px; }
.hn-layout--side .hn-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hn-side { display: grid; gap: var(--space-6); }
.hn-box { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-6); background: var(--white); }
.hn-box__title { font: 600 17px/24px var(--font-display); margin: 0 0 var(--space-4); color: var(--ink); }
.hn-post { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--white); transition: box-shadow .15s; }
.hn-post:hover { box-shadow: var(--shadow-md); }
.hn-thumb { position: relative; display: block; aspect-ratio: 16 / 9; background-color: var(--ink-raised); background-image: radial-gradient(var(--line-dark) 1px, transparent 1.2px); background-size: 16px 16px; overflow: hidden; }
.hn-thumb--light { background-color: var(--mist); background-image: radial-gradient(var(--line) 1px, transparent 1.2px); }
.hn-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hn-thumb__ph { position: absolute; inset: 0; display: grid; place-items: center; }
.hn-thumb__ui { width: 60%; border-radius: var(--radius-sm); background: var(--terminal); border: 1px solid var(--line-dark); padding: 10px; display: grid; gap: 6px; }
.hn-thumb__ph--light .hn-thumb__ui { background: var(--white); border-color: var(--line); }
.hn-thumb__ui i { display: block; height: 6px; border-radius: 3px; background: var(--line-dark); }
.hn-thumb__ph--light .hn-thumb__ui i { background: var(--line); }
.hn-thumb__ui i.a { background: var(--vortex); width: 70%; }
.hn-thumb__ui i.b { background: var(--storm-400); width: 45%; }
.hn-thumb .hn-score { position: absolute; top: var(--space-3); right: var(--space-3); }
.hn-post__body { display: grid; gap: var(--space-3); align-content: start; padding: 20px var(--space-6) var(--space-6); flex: 1; }
.hn-post__title { font: 600 20px/28px var(--font-display); margin: 0; }
.hn-post__title a { color: var(--ink); text-decoration: none; }
.hn-post__title a:hover { color: var(--storm); }
.hn-post__excerpt { margin: 0; font-size: 15px; line-height: 24px; color: var(--slate-600); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hn-post__foot { display: flex; align-items: center; gap: var(--space-2); margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--line); font: 500 13px/20px var(--font-sans); color: var(--slate-600); }
.hn-post__time { margin-left: auto; color: var(--slate-500); }
.hn-pager { margin-top: var(--space-12); }
.hn-pager .nav-links { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.hn-pager .page-numbers { min-width: 44px; height: 44px; padding: 0 var(--space-3); box-sizing: border-box; display: inline-grid; place-items: center; border-radius: var(--radius-md); border: 1px solid var(--line); color: var(--slate-800); font: 600 15px/1 var(--font-mono); text-decoration: none; }
.hn-pager a.page-numbers:hover { border-color: var(--storm); color: var(--storm); }
.hn-pager .page-numbers.current { background: var(--ink); border-color: var(--ink); color: var(--white); }
.hn-pager .page-numbers.dots { border: 0; min-width: 20px; }
.hn-empty { padding: var(--space-12) 0; }

/* =========================================================
   14. Menu: dropdown icons and descriptions
   ========================================================= */
.hn-menu-item { display: flex; align-items: center; gap: var(--space-3); }
.hn-menu-ic { width: 36px; height: 36px; flex: none; border-radius: var(--radius-md); background: var(--storm-soft); color: var(--storm); display: grid; place-items: center; }
.hn-menu-ic .hn-i { width: 18px; height: 18px; }
.hn-menu-text { display: grid; gap: 2px; }
.hn-menu-title { font-weight: 600; }
.hn-menu-desc { font: 400 13px/18px var(--font-sans); color: var(--slate-600); white-space: normal; }

/* =========================================================
   15. Page sections (home + templates)
   ========================================================= */
/* Hero */
.hn-hero { position: relative; overflow: hidden; background-color: var(--ink) !important; background-image: radial-gradient(var(--line-dark) 1px, transparent 1.2px); background-size: 24px 24px; color: var(--slate-400); }
.hn-hero::after { content: ""; position: absolute; right: -80px; top: -60px; width: 760px; height: 420px; pointer-events: none; opacity: .22; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 760 420' fill='none' stroke='%23818CF8' stroke-width='1.5'%3E%3Cpath d='M40 120 C 220 40, 420 40, 740 110'/%3E%3Cpath d='M120 190 C 300 120, 480 130, 720 190'/%3E%3Cpath d='M220 260 C 380 210, 520 220, 700 262'/%3E%3C/svg%3E") no-repeat; }
:is(.hn-hero, .hn-hero > .wp-block-group__inner-container) > * { position: relative; z-index: 1; }
.hn-hero h1 { font: 700 56px/60px var(--font-display); letter-spacing: -.02em; color: var(--white); margin: var(--space-4) 0 var(--space-6); }
.hn-hero h1 em, .hn-pagehero h1 em { font-style: normal; color: var(--storm-400); }
.hn-hero .hn-hero__sub { font-size: 19px; line-height: 31px; color: var(--slate-400); max-width: 560px; }
.hn-hero .wp-block-columns { align-items: center; gap: var(--space-16); padding: 88px 0 var(--space-24); margin: 0; }
.hn-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-8); }
.hn-chips > span { font: 500 14px/20px var(--font-sans); color: var(--slate-400); margin-right: var(--space-1); }
.hn-chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: var(--radius-pill); border: 1px solid var(--line-dark); color: var(--white) !important; font: 500 14px/20px var(--font-sans); background: var(--ink-raised); text-decoration: none; }
.hn-chip:hover { border-color: var(--storm-400); }
.hn-hero .hn-term { box-shadow: var(--shadow-frame); border: 1px solid var(--line-dark); }
.hn-hero .hn-term pre { font-size: 14px; line-height: 23px; }

/* Trust strip */
.hn-trust { border-bottom: 1px solid var(--line); background: var(--white); }
.hn-trust__in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hn-trust__item { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-8) var(--space-6); border-left: 1px solid var(--line); }
.hn-trust__item:first-child { border-left: 0; padding-left: 0; }
.hn-trust__item .ic { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: var(--radius-md); background: var(--storm-soft); color: var(--storm); }
.hn-trust__item b { display: block; font: 700 20px/26px var(--font-display); color: var(--ink); }
.hn-trust__item span:not(.ic) { font: 400 14px/20px var(--font-sans); color: var(--slate-600); }

/* Tabs + picks */
.hn-tabs { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-6); }
.hn-picks { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--white); box-shadow: var(--shadow-sm); }
.hn-picks[hidden] { display: none; }
.hn-pick { display: grid; grid-template-columns: 44px minmax(0, 1.7fr) minmax(0, 1.1fr) minmax(0, 1.1fr) 92px minmax(0, 1.3fr); gap: var(--space-4); align-items: center; padding: 20px var(--space-6); border-top: 1px solid var(--line); }
.hn-pick--head { border-top: 0; background: var(--mist); padding-top: var(--space-3); padding-bottom: var(--space-3); font: 600 12px/16px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--slate-600); }
.hn-rank { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--mist); color: var(--ink); font: 600 14px/1 var(--font-mono); }
.hn-pick--head + .hn-pick .hn-rank { background: var(--ink); color: var(--white); }
.hn-prov { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.hn-prov b { display: block; font: 600 17px/22px var(--font-display); color: var(--ink); }
.hn-prov small { display: block; font: 400 13px/18px var(--font-sans); color: var(--slate-600); }
.hn-pick__lbl { display: none; font: 600 12px/16px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--slate-500); }
.hn-pick__val { font: 600 15px/22px var(--font-mono); color: var(--ink); }
.hn-pick__val small { display: block; font: 400 13px/18px var(--font-sans); color: var(--slate-600); }
.hn-pick__cta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.hn-pick__cta .hn-btn { width: 100%; max-width: 200px; }

/* Cards grid (type cards, guide, tools…) */
.hn-tcard { display: grid; gap: var(--space-3); align-content: start; padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); color: var(--slate-800); text-decoration: none; transition: box-shadow .15s; }
.hn-tcard:hover { box-shadow: var(--shadow-md); color: var(--slate-800); }
.hn-tcard .ic { width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--storm-soft); color: var(--storm); display: grid; place-items: center; }
.hn-tcard .ic .hn-i, .hn-tcard .ic svg { width: 24px; height: 24px; }
.hn-tcard h3 { font: 600 20px/28px var(--font-display); margin: 0; color: var(--ink); }
.hn-tcard p { margin: 0; font-size: 15px; line-height: 24px; color: var(--slate-600); }
.hn-tcard .meta { display: flex; justify-content: space-between; align-items: center; padding-top: var(--space-3); border-top: 1px solid var(--line); margin-top: var(--space-2); font: 600 14px/20px var(--font-sans); color: var(--storm); }

/* VS card + comparison list */
.hn-vs { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); overflow: hidden; box-shadow: var(--shadow-sm); }
.hn-vs__top { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--space-4); padding: var(--space-8) var(--space-6); background: var(--ink); color: var(--white); text-align: center; }
.hn-vs__top .hn-plogo { margin: 0 auto var(--space-3); width: 56px; height: 56px; background: var(--ink-raised); border-color: var(--line-dark); color: var(--slate-400); }
.hn-vs__top b { font: 700 22px/28px var(--font-display); }
.hn-vs__badge, .hn-vsdot { width: 52px; height: 52px; border-radius: 50%; background: var(--bolt); color: var(--ink); display: grid; place-items: center; font: 700 16px/1 var(--font-display); }
.hn-vs table { width: 100%; border-collapse: collapse; margin: 0; border: 0; }
.hn-vs th, .hn-vs td { padding: 14px var(--space-6); border: 0; border-top: 1px solid var(--line); font-size: 15px; line-height: 22px; text-align: center; }
.hn-vs th { font: 600 13px/18px var(--font-sans); color: var(--slate-600); background: var(--mist); width: 34%; }
.hn-vs td { font-family: var(--font-mono); font-weight: 600; color: var(--ink); }
.hn-vs__foot { display: flex; justify-content: center; padding: var(--space-6); border-top: 1px solid var(--line); }
.hn-vslist { display: grid; gap: var(--space-3); }
.hn-vslist a { display: flex; justify-content: space-between; align-items: center; min-height: 60px; padding: 0 20px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--white); color: var(--ink); font: 600 16px/22px var(--font-display); text-decoration: none; }
.hn-vslist a:hover { border-color: var(--storm); color: var(--storm); }
.hn-vslist a small { font: 400 13px/18px var(--font-sans); color: var(--slate-600); }

/* How-we-test steps (dark) */
.hn-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
.hn-step { padding: var(--space-6); border-radius: var(--radius-lg); background: var(--ink-raised); border: 1px solid var(--line-dark); display: grid; gap: var(--space-3); align-content: start; }
.hn-step .n { font: 600 14px/20px var(--font-mono); color: var(--vortex); }
.hn-step h3 { font: 600 20px/28px var(--font-display); color: var(--white); margin: 0; }
.hn-step p { font-size: 15px; line-height: 24px; color: var(--slate-400); margin: 0; }

/* Newsletter */
.hn-news { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-12); align-items: center; padding: var(--space-12); border-radius: var(--radius-lg); background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.hn-news h2 { font: 700 28px/36px var(--font-display); margin: var(--space-2) 0 0; color: var(--ink); }
.hn-news p { color: var(--slate-600); margin: var(--space-3) 0 0; }

/* Sister site box (footer) */
.hn-sister { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 20px var(--space-6); border-radius: var(--radius-lg); background: var(--ink-raised); border: 1px solid var(--line-dark); }
.hn-sister p { margin: 0; color: var(--white); font: 500 16px/24px var(--font-sans); }
.hn-sister p span { color: var(--slate-400); font-weight: 400; }
.hn-sister a { display: inline-flex; align-items: center; gap: 6px; color: var(--storm-400); font: 600 15px/20px var(--font-sans); text-decoration: none; }
.hn-sister a:hover { color: var(--white); }

/* Comparison template */
.hn-pagehero { position: relative; overflow: hidden; background-color: var(--ink) !important; background-image: radial-gradient(var(--line-dark) 1px, transparent 1.2px); background-size: 24px 24px; color: var(--slate-400); padding: var(--space-16) 0; }
.hn-pagehero h1 { font: 700 48px/54px var(--font-display); letter-spacing: -.02em; color: var(--white); margin: var(--space-4) 0; max-width: 900px; }
.hn-pagehero .hn-lead { color: var(--slate-400); }
.hn-cmphero { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--space-6); align-items: stretch; margin-top: var(--space-8); }
.hn-cside { position: relative; display: grid; gap: var(--space-3); justify-items: center; text-align: center; padding: var(--space-8) var(--space-6) var(--space-6); border-radius: var(--radius-lg); background: var(--ink-raised); border: 1px solid var(--line-dark); }
.hn-cside--win { border: 2px solid var(--vortex); }
.hn-cside .hn-plogo { width: 64px; height: 64px; background: var(--ink); border-color: var(--line-dark); color: var(--slate-400); }
.hn-cside h2 { font: 700 26px/32px var(--font-display); color: var(--white); margin: 0; }
.hn-cside p { font-size: 15px; line-height: 23px; color: var(--slate-400); margin: 0; }
.hn-cside .sc { font: 700 44px/1 var(--font-display); color: var(--white); }
.hn-cside .sc small { font: 600 16px/1 var(--font-mono); color: var(--slate-400); }
.hn-cside .hn-btn { width: 100%; }
.hn-cside .hn-link { color: var(--storm-400); }
.hn-ribbon { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--radius-pill); background: var(--vortex); color: var(--ink); font: 600 13px/18px var(--font-sans); white-space: nowrap; }
.hn-vsdot { align-self: center; width: 64px; height: 64px; font-size: 20px; }
.hn-quick { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; margin: var(--space-8) 0; }
.hn-quick__head { padding: var(--space-4) var(--space-6); background: var(--storm-soft); font: 600 18px/24px var(--font-display); color: var(--ink); }
.hn-quick__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; padding: 14px var(--space-6); border-top: 1px solid var(--line); font-size: 16px; line-height: 24px; }
.hn-quick__row b { color: var(--ink); }
.hn-win { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: var(--radius-pill); background: var(--ink); color: var(--white); font: 600 13px/18px var(--font-sans); white-space: nowrap; }
.hn-win--tie { background: var(--mist); color: var(--slate-800); border: 1px solid var(--line); }
.hn-round { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; margin: var(--space-6) 0; }
.hn-round__head, .hn-round__row { display: grid; grid-template-columns: minmax(0, 1fr) 160px minmax(0, 1fr); gap: var(--space-4); align-items: center; padding: var(--space-4) var(--space-6); }
.hn-round__head { background: var(--mist); font: 600 15px/20px var(--font-display); color: var(--ink); }
.hn-round__head span:nth-child(2) { text-align: center; font: 600 12px/16px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--slate-600); }
.hn-round__head span:last-child { text-align: right; }
.hn-round__row { border-top: 1px solid var(--line); }
.hn-round__row .lbl { text-align: center; font: 600 14px/20px var(--font-sans); color: var(--ink); }
.hn-round__row .lbl small { display: block; font: 400 12px/16px var(--font-sans); color: var(--slate-600); }
.hn-half { display: flex; align-items: center; gap: var(--space-2); font: 600 14px/1 var(--font-mono); color: var(--ink); }
.hn-half .t { flex: 1; height: 10px; border-radius: 5px; background: var(--mist); overflow: hidden; display: flex; }
.hn-half .t i { display: block; height: 100%; background: var(--slate-400); border-radius: 5px; }
.hn-half.w .t i { background: var(--vortex); }
.hn-half--l { flex-direction: row-reverse; }
.hn-half--l .t { justify-content: flex-end; }
.hn-choose.wp-block-columns { gap: var(--space-6); margin: var(--space-6) 0; }
.hn-choose > .wp-block-column { padding: var(--space-6); border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--white); }
.hn-choose h3 { font: 600 20px/26px var(--font-display); margin-top: 0; }

/* Best-of roundup */
.hn-awards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin: var(--space-8) 0; }
.hn-award { position: relative; display: grid; gap: var(--space-3); align-content: start; padding: var(--space-8) var(--space-6) var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-sm); }
.hn-award--top { border: 2px solid var(--ink); }
.hn-award .hn-ribbon { left: var(--space-6); transform: none; background: var(--ink); color: var(--white); }
.hn-award .hn-ribbon.v { background: var(--vortex); color: var(--ink); }
.hn-award .hn-ribbon.s { background: var(--storm); color: var(--white); }
.hn-award .row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.hn-award p { margin: 0; font-size: 15px; line-height: 23px; color: var(--slate-600); }
.hn-award .price { font: 600 15px/22px var(--font-mono); color: var(--ink); }
.hn-prod { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--space-6); padding: var(--space-8) !important; margin: var(--space-8) 0 !important; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-sm); }
.hn-prod__rank { width: 64px; height: 64px; border-radius: var(--radius-lg); background: var(--ink); color: var(--white); display: grid; place-items: center; font: 700 26px/1 var(--font-display); margin: 0 !important; }
:is(.hn-prod, .hn-prod > .wp-block-group__inner-container) > .wp-block-group { margin: 0 !important; }
.hn-prod h2 { font: 700 28px/34px var(--font-display); margin: 0; }
.hn-prod .hn-prod__best { font: 600 14px/20px var(--font-sans); color: var(--vortex-ink); margin: 0; }
.hn-keyspecs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; margin-top: var(--space-6); }
.hn-keyspecs div { background: var(--white); padding: var(--space-3) var(--space-4); }
.hn-keyspecs span { display: block; font: 600 12px/16px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--slate-600); }
.hn-keyspecs b { font: 600 15px/22px var(--font-mono); color: var(--ink); }
.hn-jump { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-6) 0; }
.hn-jump a { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: 0 14px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--white); color: var(--ink); font: 600 14px/20px var(--font-sans); text-decoration: none; }
.hn-jump a:hover { border-color: var(--storm); color: var(--storm); }
.hn-guide { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-6); }
.hn-guide > div { padding: var(--space-6); border-radius: var(--radius-lg); background: var(--white); border: 1px solid var(--line); display: grid; gap: var(--space-2); align-content: start; }
.hn-guide .n { font: 600 13px/20px var(--font-mono); color: var(--vortex-ink); }
.hn-guide h3 { font: 600 19px/26px var(--font-display); margin: 0; color: var(--ink); }
.hn-guide p { margin: 0; font-size: 15px; line-height: 24px; color: var(--slate-600); }

/* Deals */
.hn-checked { display: inline-flex; align-items: center; gap: var(--space-2); padding: 6px 12px; border-radius: var(--radius-pill); background: var(--pass-soft); color: var(--pass); font: 600 14px/20px var(--font-sans); }
.hn-deals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.hn-deal { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); overflow: hidden; box-shadow: var(--shadow-sm); }
.hn-deal--hot { border: 2px solid var(--ink); }
.hn-deal__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 20px var(--space-6); border-bottom: 1px dashed var(--line); }
.hn-deal__off { font: 700 30px/1 var(--font-display); color: var(--ink); text-align: right; }
.hn-deal__off small { display: block; margin-top: 4px; font: 600 12px/16px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--slate-600); }
.hn-deal__body { display: grid; gap: var(--space-3); padding: 20px var(--space-6) var(--space-6); flex: 1; align-content: start; }
.hn-deal__body h3 { font: 600 19px/26px var(--font-display); margin: 0; color: var(--ink); }
.hn-deal__body p { margin: 0; font-size: 15px; line-height: 23px; color: var(--slate-600); }
.hn-deal__price { display: flex; align-items: baseline; gap: var(--space-2); font: 600 22px/1 var(--font-mono); color: var(--ink); }
.hn-deal__price s { font: 400 15px/1 var(--font-mono); color: var(--slate-500); }
.hn-code { display: flex; align-items: stretch; border: 1px dashed var(--slate-500); border-radius: var(--radius-md); overflow: hidden; }
.hn-code code { flex: 1; display: flex; align-items: center; padding: 0 var(--space-3); min-height: 44px; font: 600 15px/1 var(--font-mono); color: var(--ink); background: var(--mist); letter-spacing: .04em; }
.hn-code button { display: inline-flex; align-items: center; gap: 6px; padding: 0 var(--space-4); border: 0; border-left: 1px dashed var(--slate-500); background: var(--white); color: var(--storm); font: 600 14px/1 var(--font-sans); cursor: pointer; }
.hn-deal__foot { display: grid; gap: var(--space-2); padding: 0 var(--space-6) var(--space-6); }
.hn-deal__foot small { font: 400 13px/18px var(--font-sans); color: var(--slate-600); }

/* How we test / About */
.hn-weights { display: grid; gap: var(--space-4); }
.hn-weight { display: grid; grid-template-columns: 160px minmax(0, 1fr) 64px; gap: var(--space-4); align-items: center; }
.hn-weight b { font: 600 16px/22px var(--font-display); color: var(--ink); }
.hn-weight b small { display: block; font: 400 13px/18px var(--font-sans); color: var(--slate-600); }
.hn-weight .t { height: 14px; border-radius: 7px; background: var(--mist); overflow: hidden; }
.hn-weight .t i { display: block; height: 100%; background: var(--storm); border-radius: 7px; }
.hn-weight > span:last-child { font: 600 15px/1 var(--font-mono); color: var(--ink); text-align: right; }
.hn-never { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.hn-never > div { padding: 20px; border-radius: var(--radius-lg); background: var(--ink-raised); border: 1px solid var(--line-dark); color: var(--slate-400); font-size: 15px; line-height: 24px; }
.hn-never b { display: block; color: var(--white); font: 600 16px/22px var(--font-display); margin-bottom: 2px; }
.hn-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.hn-stat { padding: var(--space-6); border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--white); }
.hn-stat b { display: block; font: 700 32px/40px var(--font-display); color: var(--ink); }
.hn-stat span { font-size: 14px; line-height: 20px; color: var(--slate-600); }

/* Default (primary) Button block = storm, so it never depends on Customizer button colours. */
.hostnado .wp-block-button:not([class*="is-style-hn-"]):not(.is-style-outline) .wp-block-button__link { background: var(--storm); color: var(--white); border-radius: var(--radius-md); font: 600 15px/20px var(--font-sans); padding: var(--space-3) 20px; }
.hostnado .wp-block-button:not([class*="is-style-hn-"]):not(.is-style-outline) .wp-block-button__link:hover { background: var(--storm-deep); color: var(--white); }

/* Block-built section helpers */
.hn-pc-label { margin: var(--space-4) 0 var(--space-2) !important; font-size: 15px; }
.hn-pc-label:first-child { margin-top: 0 !important; }
p.hn-link { margin: 0; }
p.hn-link a { color: var(--storm); text-decoration: none; }
.hn-section--dark p.hn-link a, .hn-pagehero p.hn-link a { color: var(--storm-400); }
.hn-sec-head .wp-block-group > *, .hn-sec-head .wp-block-group > .wp-block-group__inner-container > * { margin-top: 0; margin-bottom: var(--space-3); }
.hn-sec-head .wp-block-group > *:last-child, .hn-sec-head .wp-block-group > .wp-block-group__inner-container > *:last-child { margin-bottom: 0; }
.hn-section .wp-block-columns { margin-bottom: 0; }
:is(.hn-pagehead .hn-wrap, .hn-pagehead .hn-wrap > .wp-block-group__inner-container) > *, :is(.hn-pagehero .hn-wrap, .hn-pagehero .hn-wrap > .wp-block-group__inner-container) > * { margin-top: 0; }
.hn-pagehero .hn-wrap > .hn-eyebrow { margin-bottom: 0; }
.hn-hero .hn-eyebrow + h1 { margin-top: var(--space-4); }
.hn-hero .wp-block-buttons { margin-top: var(--space-8); }
.hn-section--dark .hn-lead, .hn-section--dark p { color: var(--slate-400); }
.hn-verdict .wp-block-column > *:first-child { margin-top: 0; }
.entry-content > .alignfull:first-child { margin-top: 0; }
.hn-trust .hn-wrap, .hn-hero .hn-wrap { position: relative; }
/* Let wide content (terminals, tables) scroll inside its column instead of widening the page. */
:is(.hn-hero, .hn-section, .hn-verdict, .hn-prod, .hn-pcbox, .hn-choose, .hn-article) .wp-block-column,
.hn-article, .hn-layout__main, .hn-term, .hn-vs { min-width: 0; max-width: 100%; }
.hn-vs table { table-layout: fixed; }
.hn-vs th, .hn-vs td { overflow-wrap: anywhere; }

/* =========================================================
   16. Responsive
   ========================================================= */
@media (max-width: 1100px) {
	.hn-hero .wp-block-columns { gap: var(--space-12); }
	.hn-trust__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hn-trust__item:nth-child(3) { border-left: 0; padding-left: 0; }
	.hn-trust__item:nth-child(n+3) { border-top: 1px solid var(--line); }
	.hn-pick { grid-template-columns: 44px minmax(0, 1.6fr) minmax(0, 1fr) 92px minmax(0, 1.2fr); }
	.hn-pick > :nth-child(4) { display: none; }
	.hn-grid3, .hn-deals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hn-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hn-news { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
	.hn-pagehead__in { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
	.hn-feat { grid-template-columns: minmax(0, 1fr); }
	.hn-feat .hn-thumb { min-height: 0; aspect-ratio: 16 / 9; }
	.hn-layout--side { grid-template-columns: minmax(0, 1fr); }
	.hn-article-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.hn-toc { display: none; }
	.hn-toc-m { display: block; }
	.hn-awards { grid-template-columns: minmax(0, 1fr); }
	.hn-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Stack block columns on small screens (matches core behaviour, in case block CSS is deferred). */
@media (max-width: 781px) {
	:is(.hn-hero, .hn-section, .hn-verdict, .hn-prod, .hn-pcbox, .hn-choose, .hn-pagehero) .wp-block-columns:not(.is-not-stacked-on-mobile) { flex-wrap: wrap !important; }
	:is(.hn-hero, .hn-section, .hn-verdict, .hn-prod, .hn-pcbox, .hn-choose, .hn-pagehero) .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column { flex-basis: 100% !important; }
}
@media (max-width: 640px) {
	.hn-wrap { padding-left: var(--space-4); padding-right: var(--space-4); }
	.hn-section { padding-top: var(--space-16); padding-bottom: var(--space-16); }
	.hn-h2 { font-size: 26px; line-height: 32px; }
	.hn-lead { font-size: 17px; line-height: 27px; }
	.hn-sec-head { margin-bottom: var(--space-8); }
	.hn-hero h1 { font-size: 36px; line-height: 40px; }
	.hn-hero .hn-hero__sub { font-size: 17px; line-height: 27px; }
	.hn-hero .wp-block-columns { padding: var(--space-12) 0 var(--space-16); }
	.hn-trust__in { grid-template-columns: minmax(0, 1fr); }
	.hn-trust__item, .hn-trust__item:nth-child(3) { border-left: 0; padding: 20px 0; border-top: 1px solid var(--line); }
	.hn-trust__item:first-child { border-top: 0; }
	.hn-pick--head { display: none; }
	.hn-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 20px; position: relative; }
	.hn-pick > :nth-child(1) { position: absolute; top: 20px; right: 20px; }
	.hn-pick > :nth-child(2) { grid-column: 1 / -1; padding-right: 44px; }
	.hn-pick > :nth-child(4) { display: block; }
	.hn-pick > :nth-child(5) { display: none; }
	.hn-pick__cta { grid-column: 1 / -1; align-items: stretch; }
	.hn-pick__cta .hn-btn { max-width: none; }
	.hn-pick__cta .hn-link { justify-content: center; }
	.hn-pick__lbl { display: block; margin-bottom: 2px; }
	.hn-grid3, .hn-layout--side .hn-grid3, .hn-deals, .hn-steps { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
	.hn-inline { flex-direction: column; }
	.hn-news { padding: var(--space-6); }
	.hn-news h2 { font-size: 24px; line-height: 30px; }
	.hn-pagehead { padding: var(--space-8) 0; }
	.hn-pagehead h1, .hn-pagehero h1 { font-size: 32px; line-height: 38px; }
	.hn-feat__body { padding: var(--space-6); }
	.hn-feat__title { font-size: 24px; line-height: 30px; }
	.hn-pcbox > .wp-block-column + .wp-block-column { border-left: 0; border-top: 1px solid var(--line); }
	.hn-cta-card { grid-template-columns: 48px minmax(0, 1fr); gap: var(--space-4); padding: 20px; }
	.hn-cta-card .hn-plogo { width: 48px; height: 48px; }
	.hn-cta-card .side { grid-column: 1 / -1; justify-items: stretch; text-align: left; }
	.hn-final { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); padding: var(--space-6) !important; }
	.hn-final .hn-final__score { width: 96px; height: 96px; font-size: 32px; }
	.hn-bench__row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
	.hn-cmphero { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
	.hn-vsdot { justify-self: center; width: 48px; height: 48px; font-size: 16px; }
	.hn-quick__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); padding: 14px var(--space-4); }
	.hn-round__head, .hn-round__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: var(--space-3) var(--space-4); gap: var(--space-2) var(--space-3); }
	.hn-round__head span:nth-child(2) { display: none; }
	.hn-round__row .lbl { grid-column: 1 / -1; grid-row: 1; text-align: left; }
	.hn-half--l { flex-direction: row; }
	.hn-half--l .t { justify-content: flex-start; }
	.hn-prod { grid-template-columns: minmax(0, 1fr); padding: var(--space-6) var(--space-4) !important; gap: var(--space-4); }
	.hn-prod__rank { width: 48px; height: 48px; font-size: 20px; }
	.hn-keyspecs, .hn-never { grid-template-columns: minmax(0, 1fr); }
	.hn-weight { grid-template-columns: minmax(0, 1fr) 56px; }
	.hn-weight .t { grid-column: 1 / -1; grid-row: 2; }
	.wp-block-quote.is-style-hn-quote { padding: var(--space-6); font-size: 18px; line-height: 28px; }
}

/* =========================================================
   17. Kadence integration: palette, page shell, post head
   ========================================================= */
/* Kadence's palette and fonts, so its own elements (links, buttons, comments,
   related posts) use the brand colours without any Customizer work. */
body.hostnado {
	--global-palette1: #4F46E5; --global-palette2: #4338CA; --global-palette3: #0B1220;
	--global-palette4: #1E293B; --global-palette5: #475569; --global-palette6: #5B6B81;
	--global-palette7: #E2E8F0; --global-palette8: #F5F7FB; --global-palette9: #FFFFFF;
	--global-palette-highlight: var(--global-palette1); --global-palette-highlight-alt: var(--global-palette2); --global-palette-highlight-alt2: var(--global-palette9);
	--global-palette-btn-bg: var(--global-palette1); --global-palette-btn-bg-hover: var(--global-palette2);
	--global-palette-btn: var(--global-palette9); --global-palette-btn-hover: var(--global-palette9);
	--global-body-font-family: var(--font-sans);
	--global-heading-font-family: var(--font-display);
	--global-primary-nav-font-family: var(--font-sans);
	background: var(--white);
	color: var(--slate-800);
	font-size: 17px;
	line-height: 1.65;
}
.hostnado .content-bg, .hostnado.content-style-unboxed .site { background: var(--white); }

/* Vertical rhythm of the content area. */
.hostnado.content-vertical-padding-show .content-area { margin-top: var(--space-12); margin-bottom: var(--space-16); }
.hostnado.content-vertical-padding-hide .content-area { margin-top: 0; margin-bottom: 0; }

/* Post head (Kadence title area on single posts and pages). */
.hostnado .entry-header { margin-bottom: var(--space-8); }
.hostnado.single-post .entry-header { max-width: 1000px; padding-bottom: var(--space-6); border-bottom: 1px solid var(--line); }
.hostnado:is(.single, .page) .entry-header .entry-title { font: 700 48px/54px var(--font-display); letter-spacing: -.02em; color: var(--ink); margin: 0; }
.hostnado.page .entry-header .entry-title { font-size: 44px; line-height: 50px; }
.hostnado .entry-header .entry-taxonomies { margin: 0 0 var(--space-4); }
.hostnado .entry-header .entry-taxonomies a { font: 600 13px/20px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--vortex-ink); text-decoration: none; }
.hostnado .entry-header .entry-taxonomies a:hover { color: var(--storm); }
.hostnado .entry-header .entry-taxonomies .category-links { color: var(--line); }
.hostnado .entry-header .entry-meta { margin-top: var(--space-4); font: 400 14px/20px var(--font-sans); color: var(--slate-600); }
.hostnado .entry-header .entry-meta a { color: var(--ink); font-weight: 600; text-decoration: none; }
.hostnado .entry-header .entry-meta .author-avatar { margin-right: 8px; }
.hostnado .entry-header .entry-meta .author-avatar img { border-radius: 50%; }
.hostnado .entry-header .kadence-breadcrumbs, .hostnado .entry-header .rank-math-breadcrumb { margin-bottom: var(--space-4); font-size: 14px; color: var(--slate-600); }

/* Page title band (Kadence "above content" title on pages). */
.hostnado .page-hero-section .entry-hero-container-inner { background: var(--mist); border-bottom: 1px solid var(--line); }
.hostnado .page-hero-section .entry-header { min-height: 0; margin: 0; padding: var(--space-12) 0; text-align: left; justify-content: flex-start; align-items: flex-start; }
.hostnado .page-hero-section .entry-title { margin: 0; }

/* Body copy inside posts and narrow pages. */
.hostnado .single-content { font-size: 17px; line-height: 1.7; }
.hostnado .single-content > h2, .hostnado .hn-article > h2 { font: 700 32px/40px var(--font-display); letter-spacing: -.01em; margin: var(--space-12) 0 var(--space-4); }
.hostnado .single-content > h3, .hostnado .hn-article > h3 { font: 600 24px/32px var(--font-display); margin: var(--space-8) 0 var(--space-3); }
.hostnado .single-content > h4, .hostnado .hn-article > h4 { font: 600 20px/28px var(--font-display); margin: var(--space-6) 0 var(--space-2); }
.hostnado .single-content > :first-child, .hostnado .hn-article > :first-child { margin-top: 0; }

/* Article column next to the table of contents. */
.hostnado .hn-article { max-width: 860px; }

/* Wide single layout (best-of roundups): no TOC column, full-width blocks, readable text. */
.hostnado .hn-article--wide { max-width: none; }
.hn-article--wide > :is(p, ul, ol, blockquote, .hn-review-meta, .hn-toc-m) { max-width: 860px; }
.hn-article--wide .hn-toc-m { display: block; }

/* "Keep reading" cards after a post. */
.hn-related { margin: var(--space-16) calc(50% - 50vw) 0; padding: var(--space-16) 0; background: var(--mist); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hn-related .hn-sec-head { margin-bottom: var(--space-8); }

/* Comments line up with the article column. */
.hostnado.single-post .comments-area { max-width: 860px; margin-left: calc(240px + var(--space-12)); }
.hostnado.single-post.hn-wide-post .comments-area { margin-left: 0; }
.hostnado .comments-area { margin-top: var(--space-16); }

/* Widget box under the TOC. */
.hn-toc__extra .hn-btn { display: flex; width: 100%; margin-top: var(--space-3); }
.hn-toc__extra p { margin: 0; }

/* Kadence post footer bits: tags, author box, post navigation, related posts, comments. */
.hostnado .entry-footer { margin-top: var(--space-12); }
.hostnado .entry-tags a.tag-link { display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--space-3); margin: 0 6px 6px 0; border-radius: var(--radius-pill); border: 1px solid var(--line); color: var(--slate-800); font: 500 13px/20px var(--font-sans); text-decoration: none; }
.hostnado .post-navigation { margin: var(--space-12) 0; padding: var(--space-6) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hostnado .post-navigation a { color: var(--ink); text-decoration: none; font: 600 17px/24px var(--font-display); }
.hostnado .post-navigation a:hover { color: var(--storm); }
.hostnado .post-navigation .post-navigation-sub small { font: 600 12px/16px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--slate-500); }
.hostnado .entry-related { background: var(--mist); border-top: 1px solid var(--line); margin-top: var(--space-16); }
.hostnado .entry-related-title, .hostnado .comments-title, .hostnado .comment-reply-title { font: 700 26px/34px var(--font-display); color: var(--ink); }
.hostnado .entry-related .entry { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: none; background: var(--white); }
.hostnado .entry-related .entry-title { font: 600 18px/26px var(--font-display); }
.hostnado .entry-related .entry-title a { color: var(--ink); text-decoration: none; }
.hostnado .comment-respond input:not([type="submit"]):not([type="checkbox"]), .hostnado .comment-respond textarea { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--white); }
.hostnado .comment-respond input:focus, .hostnado .comment-respond textarea:focus { border-color: var(--storm); outline: none; box-shadow: 0 0 0 3px var(--storm-soft); }
.hostnado :is(button, input[type="submit"]).submit, .hostnado .comment-form .submit { background: var(--storm); color: var(--white); border-radius: var(--radius-md); font: 600 15px/20px var(--font-sans); padding: var(--space-3) 20px; box-shadow: none; }
.hostnado .comment-form .submit:hover { background: var(--storm-deep); }

/* 404 page. */
.hostnado.error404 .content-bg, .hostnado.error404 .entry { box-shadow: none; background: transparent; }
.hostnado.error404 .page-title { font: 700 44px/50px var(--font-display); color: var(--ink); }
.hostnado.error404 .search-form input[type="search"] { height: 48px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--mist); }

/* =========================================================
   18. Header
   ========================================================= */
.hn-dealbar { position: relative; z-index: 11; background: var(--bolt-soft); color: var(--ink); text-align: center; font: 500 14px/20px var(--font-sans); padding: 10px 16px; }
.hn-dealbar a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.hn-header { position: sticky; top: 0; z-index: 10; background: var(--white); border-bottom: 1px solid var(--line); }
.admin-bar .hn-header { top: var(--wp-admin--admin-bar--height, 32px); }
html.hn-drawer-open { overflow: hidden; }
.hn-header__in { height: 72px; display: flex; align-items: center; gap: var(--space-6); }
.hn-logo { flex: none; display: block; line-height: 0; }
.hn-logo img, .hn-logo__img { height: 34px; width: auto; max-width: 220px; display: block; }
.hn-header__nav { flex: 1; min-width: 0; }
.hn-nav { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.hn-nav > li { position: relative; margin: 0; }
.hn-nav > li > a { display: inline-flex; align-items: center; gap: 4px; padding: 10px 12px; border-radius: var(--radius-md); font: 600 15px/20px var(--font-sans); color: var(--slate-800); text-decoration: none; white-space: nowrap; }
.hn-nav > li > a .hn-nav__chev { width: 16px; height: 16px; color: var(--slate-500); transition: transform .15s; }
.hn-nav > li > a:hover, .hn-nav > li:focus-within > a, .hn-nav > li.is-open > a { background: var(--mist); color: var(--ink); }
.hn-nav > li:is(.current-menu-item, .current-menu-ancestor, .current-menu-parent) > a { color: var(--storm); }
.hn-nav .sub-menu { display: none; position: absolute; top: 100%; left: 0; z-index: 20; min-width: 300px; margin: 0; padding: var(--space-2); list-style: none; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.hn-nav > li > .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.hn-nav > li:hover > .sub-menu, .hn-nav > li:focus-within > .sub-menu, .hn-nav > li.is-open > .sub-menu { display: block; }
.hn-nav > li:hover > a .hn-nav__chev, .hn-nav > li.is-open > a .hn-nav__chev { transform: rotate(180deg); }
.hn-nav .sub-menu li { margin: 0; }
.hn-nav .sub-menu a { display: block; padding: 10px; border-radius: var(--radius-md); color: var(--ink); font: 600 15px/20px var(--font-sans); text-decoration: none; white-space: normal; }
.hn-nav .sub-menu a:hover, .hn-nav .sub-menu a:focus-visible { background: var(--mist); color: var(--ink); }
.hn-nav .sub-menu .current-menu-item > a { color: var(--storm); }
.hn-header__act { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.hn-iconbtn { width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border-radius: var(--radius-md); border: 1px solid transparent; background: transparent; color: var(--slate-800); cursor: pointer; box-shadow: none; }
.hn-iconbtn:hover, .hn-iconbtn[aria-expanded="true"] { background: var(--mist); color: var(--ink); }
.hn-iconbtn .hn-i { width: 22px; height: 22px; }
.hn-burger { display: none; }
.hn-burger .hn-burger__close, .hn-burger[aria-expanded="true"] .hn-burger__open { display: none; }
.hn-burger[aria-expanded="true"] .hn-burger__close { display: block; }
.hn-header .hn-header__cta { white-space: nowrap; }

.hn-searchbar { border-top: 1px solid var(--line); background: var(--white); padding: var(--space-4) 0; box-shadow: var(--shadow-md); }
.hn-searchform { position: relative; display: flex; gap: var(--space-2); align-items: center; max-width: 760px; margin: 0 auto; }
.hn-searchform > .hn-i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--slate-500); pointer-events: none; }
.hn-searchform input[type="search"] { flex: 1; min-width: 0; height: 48px; padding: 0 var(--space-4) 0 44px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--mist); font: 400 16px/24px var(--font-sans); color: var(--ink); box-sizing: border-box; }
.hn-searchform input[type="search"]:focus { outline: none; border-color: var(--storm); background: var(--white); box-shadow: 0 0 0 3px var(--storm-soft); }
.hn-searchform .hn-btn { min-height: 48px; padding: 0 20px; }

.hn-drawer { border-top: 1px solid var(--line); background: var(--white); padding: var(--space-2) 0 var(--space-6); max-height: calc(100vh - 72px); overflow-y: auto; overscroll-behavior: contain; box-shadow: var(--shadow-md); }
.hn-drawer__menu, .hn-drawer__menu .sub-menu { list-style: none; margin: 0; padding: 0; }
.hn-drawer__menu > li { margin: 0; }
.hn-drawer__menu a { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 var(--space-2); border-bottom: 1px solid var(--line); color: var(--ink); font: 600 16px/20px var(--font-sans); text-decoration: none; }
.hn-drawer__menu > li.menu-item-has-children > a { min-height: 0; padding: var(--space-6) var(--space-2) var(--space-2); border-bottom: 0; font: 600 12px/16px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--slate-500); }
.hn-drawer__menu .sub-menu a, .hn-drawer__menu .hn-menu-title { font-weight: 600; }
.hn-drawer__menu .hn-menu-item { gap: var(--space-3); }
.hn-drawer__menu .hn-menu-ic { width: 32px; height: 32px; }
.hn-drawer__menu .hn-menu-desc { display: none; }
.hn-drawer__menu .current-menu-item > a { color: var(--storm); }
.hn-drawer__cta.hn-btn { display: flex; width: 100%; margin-top: var(--space-6); }

/* =========================================================
   19. Footer
   ========================================================= */
.hn-footer { background: var(--ink); color: var(--slate-400); padding: var(--space-16) 0 0; font: 400 15px/24px var(--font-sans); }
.hn-footer .hn-sister { margin-bottom: var(--space-12); }
.hn-footer__top { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: var(--space-8); padding-bottom: var(--space-12); }
.hn-footer__logo { display: inline-block; line-height: 0; margin-bottom: var(--space-4); }
.hn-footer__logo img { height: 34px; width: auto; }
.hn-footer__about p { max-width: 340px; margin: 0; }
.hn-footer .hn-footer__h { font: 600 14px/20px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--white); margin: 0 0 var(--space-4); }
.hn-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.hn-footer li { margin: 0; }
.hn-footer ul a { color: var(--slate-400); text-decoration: none; }
.hn-footer ul a:hover, .hn-footer ul a:focus-visible { color: var(--white); }
.hn-footer a:focus-visible { outline-color: var(--vortex); }
.hn-footer__bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3) var(--space-8); padding: var(--space-6) 0; border-top: 1px solid var(--line-dark); font-size: 13px; line-height: 20px; }
.hn-footer__bar a { color: var(--slate-400); text-decoration: underline; text-underline-offset: 3px; }
.hn-footer__bar a:hover { color: var(--white); }

/* Kadence's scroll-to-top button in brand colours. */
.hostnado #kt-scroll-up, .hostnado #kt-scroll-up-reader { background: var(--ink); color: var(--white); border-color: var(--ink); border-radius: var(--radius-md); }

/* =========================================================
   20. Header, footer and post head: tablet and phone
   ========================================================= */
@media (max-width: 1100px) {
	.hn-header__nav, .hn-header__act .hn-header__cta { display: none; }
	.hn-burger { display: grid; }
	.hn-footer__top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.hn-footer__about { grid-column: 1 / -1; }
	.hostnado:is(.single, .page) .entry-header .entry-title { font-size: 40px; line-height: 46px; }
	.hostnado.single-post .comments-area { margin-left: 0; }
}
@media (max-width: 640px) {
	.hn-header__in { height: 60px; gap: var(--space-2); }
	.hn-logo img, .hn-logo__img { height: 28px; }
	.hn-dealbar { font-size: 13px; line-height: 18px; padding: 8px 12px; }
	.hn-drawer { max-height: calc(100vh - 60px); }
	.hn-searchform .hn-btn { display: none; }
	.hn-footer { padding-top: var(--space-12); }
	.hn-footer .hn-sister { margin-bottom: var(--space-8); }
	.hn-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--space-6); }
	.hn-footer__bar { flex-direction: column; }
	.hn-related { margin-top: var(--space-12); padding: var(--space-12) 0; }
	.hostnado.content-vertical-padding-show .content-area { margin-top: var(--space-8); margin-bottom: var(--space-12); }
	.hostnado:is(.single, .page) .entry-header .entry-title { font-size: 32px; line-height: 38px; }
	.hostnado .page-hero-section .entry-header { padding: var(--space-8) 0; }
	.hostnado .single-content > h2, .hostnado .hn-article > h2 { font-size: 26px; line-height: 32px; margin-top: var(--space-8); }
	.hostnado .single-content > h3, .hostnado .hn-article > h3 { font-size: 21px; line-height: 28px; }
}

/* =========================================================
   21. Block editor canvas
   Everything here is scoped to .editor-styles-wrapper, so it only applies
   inside the editor: a wide white page that looks like the published post.
   ========================================================= */
.editor-styles-wrapper .hn-picks[hidden] { display: block; }
/* Brand palette and type on the canvas (the front end sets these on body.hostnado). */
.editor-styles-wrapper {
	--global-palette1: #4F46E5; --global-palette2: #4338CA; --global-palette3: #0B1220;
	--global-palette4: #1E293B; --global-palette5: #475569; --global-palette6: #5B6B81;
	--global-palette7: #E2E8F0; --global-palette8: #F5F7FB; --global-palette9: #FFFFFF;
	--global-palette-highlight: var(--global-palette1);
	--global-palette-btn-bg: var(--global-palette1); --global-palette-btn-bg-hover: var(--global-palette2);
	--global-palette-btn: var(--global-palette9); --global-palette-btn-hover: var(--global-palette9);
	--global-body-font-family: var(--font-sans);
	--global-heading-font-family: var(--font-display);
	/* Full-width page: the editor column matches the site container. */
	--global-calc-content-width: 1200px;
	--wp--style--global--content-size: 1200px;
	--wp--style--global--wide-size: 1200px;
	background: var(--white) !important;
	color: var(--slate-800);
	font-family: var(--font-sans);
	font-size: 17px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

/* One white page, no grey frame or box shadow around the content. */
.editor-styles-wrapper .block-editor-block-list__layout.is-root-container,
.editor-styles-wrapper .edit-post-visual-editor__post-title-wrapper {
	background: transparent !important;
	box-shadow: none !important;
}
.editor-styles-wrapper .block-editor-block-list__layout.is-root-container > *,
.editor-styles-wrapper .edit-post-visual-editor__post-title-wrapper > * {
	max-width: 1200px !important;
}
.editor-styles-wrapper .block-editor-block-list__layout.is-root-container {
	padding-left: 32px !important;
	padding-right: 32px !important;
	padding-bottom: 120px;
}
.editor-styles-wrapper .edit-post-visual-editor__post-title-wrapper {
	padding-left: 32px;
	padding-right: 32px;
	margin-top: 48px !important;
}

/* Keep every top-level block centred in the page column (theme blocks set
   "margin: X 0", which would otherwise push them to the left edge). */
.editor-styles-wrapper .is-root-container > :not(.alignleft):not(.alignright):not(.alignfull) {
	margin-left: auto !important;
	margin-right: auto !important;
}
.editor-styles-wrapper .is-root-container > .alignfull {
	max-width: none !important;
	margin-left: -32px !important;
	margin-right: -32px !important;
}

/* Headings and title, as on the published post. */
.editor-styles-wrapper :is(h1, h2, h3, h4, h5, h6) { font-family: var(--font-display); color: var(--ink); }
.editor-styles-wrapper .editor-post-title,
.editor-styles-wrapper .wp-block-post-title {
	font: 700 48px/54px var(--font-display) !important;
	letter-spacing: -.02em;
	color: var(--ink);
	padding-bottom: var(--space-6);
	border-bottom: 1px solid var(--line);
}
.editor-styles-wrapper .is-root-container > h2 { font: 700 32px/40px var(--font-display); letter-spacing: -.01em; margin-top: var(--space-12); margin-bottom: var(--space-4); }
.editor-styles-wrapper .is-root-container > h3 { font: 600 24px/32px var(--font-display); margin-top: var(--space-8); margin-bottom: var(--space-3); }
.editor-styles-wrapper .is-root-container > h4 { font: 600 20px/28px var(--font-display); margin-top: var(--space-6); margin-bottom: var(--space-2); }
.editor-styles-wrapper a { color: var(--storm); }

/* Pros / cons / check lists: list items are blocks in the editor and get
   auto margins, which centres them inside the grid. */
.editor-styles-wrapper :is(ul.is-style-hn-pros, ul.is-style-hn-cons, ul.is-style-hn-checks) > li {
	margin: 0 !important;
	max-width: none !important;
	justify-self: stretch;
}

/* Nested blocks (inside groups, columns, cards) use their container's width. */
.editor-styles-wrapper .is-root-container .wp-block :where(.wp-block) { max-width: none; }

/* Spec and comparison tables span the column. */
.editor-styles-wrapper .wp-block-table:is(.is-style-hn-spec, .is-style-hn-compare) { width: 100%; }

/* Shortcode blocks (e.g. the score bars) shown as a tidy placeholder. */
.editor-styles-wrapper .wp-block-shortcode {
	border: 1px dashed var(--line);
	border-radius: var(--radius-md);
	background: var(--mist);
	box-shadow: none;
	padding: var(--space-3) var(--space-4);
	font-size: 13px;
}
.editor-styles-wrapper .wp-block-shortcode textarea {
	font: 400 13px/1.5 var(--font-mono);
	background: var(--white);
	border-color: var(--line);
}