/* 808bits HSM product page. Scoped additions on top of the baseof styles. */

.trail { color: var(--muted); font-size: 0.8rem; margin-bottom: 1.2rem; letter-spacing: 0.02em; }
.trail a { color: var(--muted); text-decoration: none; }
.trail a:hover { color: var(--orange); }

.hsm-hero { padding: 1rem 0 2.4rem; }
.hsm-eyebrow { color: var(--orange); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 0.8rem; }
.hsm-hero h1 { font-size: clamp(1.7rem, 5vw, 2.5rem); font-weight: 600; letter-spacing: -0.01em; margin: 0 0 1rem; max-width: 34rem; }
.hsm-lede { font-family: var(--serif); font-size: 1.15rem; color: var(--ink); max-width: 34rem; margin: 0; }
.hsm-boot { color: var(--muted); font-size: 0.82rem; margin: 1.6rem 0 0; }
.hsm-boot::before { content: '> '; color: var(--orange); }
.hsm-boot::after { content: '_'; color: var(--orange); animation: hsm-blink 1.1s steps(1) infinite; }
@keyframes hsm-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hsm-boot::after { animation: none; } }

/* Two panes side by side, stacked on a phone. */
.hsm-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 0 0 3rem; }
@media (max-width: 700px) { .hsm-compare { grid-template-columns: 1fr; } }
.hsm-pane { margin: 0; border: 1px solid var(--rule); border-radius: 4px; background: #0d1014; padding: 1rem 1.1rem; min-width: 0; }
.hsm-pane figcaption { color: var(--muted); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 0.7rem; }
.hsm-pane figcaption code { text-transform: none; color: var(--bright); }
.hsm-pane pre { margin: 0; font-size: 0.78rem; line-height: 1.7; color: var(--ink); overflow-x: auto; }
.hsm-pane .bad { color: var(--red); }
.hsm-verdict { font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.85rem; margin: 0.9rem 0 0.3rem; }
.hsm-verdict.ok { color: var(--yellow); }
.hsm-verdict.no { color: var(--red); }
.hsm-verdict::before { content: '> '; color: var(--muted); }
.hsm-note { color: var(--muted); font-family: var(--serif); font-size: 0.92rem; margin: 0; }

/* Square video at the full column width. */
.hsm-video { margin: 0 0 3rem; }
.hsm-video video { display: block; width: 100%; height: auto; border: 1px solid var(--rule); border-radius: 6px; background: #000; }
.hsm-video figcaption { color: var(--muted); font-size: 0.78rem; text-align: center; margin-top: 0.6rem; }