/* Comparisons hub. Every class is prefixed vhb-. Ink and paper with one warm accent. */
.vhb-page { --vhb-paper: #f5f1e8; --vhb-ink: #1b1f26; --vhb-soft: #424a56; --vhb-muted: #69717d; --vhb-rule: #d8d1c0; --vhb-accent: #c2542d; --vhb-night: #161b24; background: var(--vhb-paper); color: var(--vhb-ink); font-family: var(--font-sans); font-size: 16px; line-height: 1.65; overflow-x: clip; }
.vhb-page *, .vhb-page *::before, .vhb-page *::after { box-sizing: border-box; }
.vhb-page a:focus-visible { outline: 3px solid var(--vhb-accent); outline-offset: 3px; }
.vhb-wrap { width: min(1040px, 100% - 32px); margin-inline: auto; }
.vhb-hero { padding: clamp(64px, 9vw, 112px) 0 clamp(36px, 5vw, 56px); }
.vhb-hero h1 { font-family: var(--font-display, Georgia, serif); font-size: clamp(2.4rem, 6vw, 4.4rem); line-height: 1.03; margin: 0 0 20px; letter-spacing: -0.02em; }
.vhb-hero h1 small { display: block; font-family: var(--font-sans); font-size: 0.9rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--vhb-accent); margin-bottom: 14px; }
.vhb-lede { font-size: 1.12rem; color: var(--vhb-soft); max-width: 62ch; }
.vhb-cards { padding-bottom: clamp(40px, 6vw, 72px); }
.vhb-card { display: grid; grid-template-columns: 64px 1fr auto; gap: 24px; align-items: center; padding: 28px 8px; border-top: 2px solid var(--vhb-ink); text-decoration: none; color: inherit; }
.vhb-card:last-child { border-bottom: 2px solid var(--vhb-ink); }
.vhb-card:hover { background: #fffdf7; }
.vhb-n { font-family: var(--font-display, Georgia, serif); font-size: 2.4rem; color: var(--vhb-accent); line-height: 1; }
.vhb-tag { margin: 0 0 4px; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--vhb-muted); }
.vhb-card h2 { font-family: var(--font-display, Georgia, serif); font-size: clamp(1.4rem, 2.6vw, 2rem); margin: 0 0 6px; }
.vhb-card p:last-child { margin: 0; color: var(--vhb-soft); max-width: 62ch; }
.vhb-card b { color: var(--vhb-accent); white-space: nowrap; }
.vhb-method { padding: 0 0 clamp(40px, 6vw, 72px); }
.vhb-method h2 { font-family: var(--font-display, Georgia, serif); font-size: 1.8rem; margin: 0 0 12px; }
.vhb-method p { max-width: 70ch; color: var(--vhb-soft); }
.vhb-also { background: var(--vhb-night); color: #eef0f4; padding: clamp(44px, 6vw, 72px) 0; }
.vhb-also h2 { font-family: var(--font-display, Georgia, serif); font-size: 1.8rem; margin: 0 0 14px; }
.vhb-also ul { margin: 0 0 28px; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 32px; }
.vhb-also li a { color: #f3d9a8; }
.vhb-cta { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; border-top: 1px solid rgba(255,255,255,0.18); padding-top: 24px; }
.vhb-cta p { margin: 0; color: #c9ced9; }
.vhb-btn { display: inline-flex; padding: 12px 22px; border-radius: 6px; background: #f3d9a8; color: #1d1608 !important; font-weight: 700; text-decoration: none; }
.vhb-crumbs { display: flex; flex-wrap: wrap; gap: 6px 10px; padding: 22px 16px 32px; width: min(1040px, 100%); margin-inline: auto; font-size: 0.9rem; color: var(--vhb-muted); }
.vhb-crumbs a { color: var(--vhb-accent); }
@media (max-width: 760px) { .vhb-card { grid-template-columns: 1fr; gap: 10px; } .vhb-also ul { grid-template-columns: 1fr; } }