/* v8 home page + guides (brand kit v3). Uses tokens.css; no blue. */
.h8 { --rail: #E9DFC0; color: var(--ink); }
.h8 .ic { width: 1em; height: 1em; flex: none; }
.h8-hero { position: relative; background: var(--ink); color: var(--daylight); overflow: hidden; }
.h8-media { position: relative; aspect-ratio: 16 / 9; max-height: 72vh; width: 100%; background: var(--ink); }
.h8-media video, .h8-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.h8-media .h8-fallback { object-fit: contain; background: var(--daylight); padding: 8%; }
@media (max-width: 700px) { .h8-media { aspect-ratio: 9 / 13; max-height: 64vh; } }
.h8-copy { position: relative; max-width: 640px; margin: 0 auto; padding: 24px 20px 32px; display: grid; gap: 14px; }
.h8-copy h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 7vw, 3.25rem); line-height: 1.04; letter-spacing: -0.02em; margin: 0; color: var(--lamp); }
.h8-copy p { margin: 0; color: var(--daylight); }
.h8-copy .fine { color: var(--ash-light, #B9B4A3); font-size: 0.875rem; }
.h8-hero .vidctl { position: absolute; right: 12px; top: 12px; z-index: 2; font: 700 0.8125rem var(--font-body); background: rgba(27, 26, 23, 0.72); color: var(--daylight); border: 1.5px solid var(--daylight); border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.h8-sec { padding: 40px 16px; }
.h8-sec > .in { max-width: 560px; margin: 0 auto; display: grid; gap: 16px; }
.h8-sec h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 5vw, 2rem); line-height: 1.1; margin: 0; }
.h8-card { background: var(--daylight); border-radius: 28px; padding: 24px 20px; display: grid; gap: 14px; }
.h8-band { background: var(--lamp); }
.h8 .chips8 { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.h8 .chips8 li { border: 2px solid var(--ink); border-radius: 999px; padding: 6px 12px; font-weight: 700; font-size: 0.9375rem; background: var(--daylight); }
.h8 .scene8 svg { display: block; width: 100%; height: auto; }
.h8 .src { font-size: 0.8125rem; color: var(--dim); margin: 0; }
.h8 .src a, .h8 .fine a { color: inherit; }
.h8 .dodont { display: grid; gap: 16px; }
@media (min-width: 720px) { .h8 .dodont { grid-template-columns: 1fr 1fr; } .h8-sec > .in.wide { max-width: 920px; } }
.h8 .dd { background: var(--daylight); border-radius: 28px; padding: 18px; display: grid; gap: 10px; }
.h8 .dd svg { width: 100%; height: auto; display: block; }
.h8 .dd p { margin: 0; }
.h8 .dd .tag-no, .h8 .dd .tag-yes { font-weight: 800; font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; }
.h8 .dd .tag-no { color: var(--ember, #A3341B); }
.adhead { margin: 0 0 6px; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.4rem, 5vw, 1.9rem); line-height: 1.1; }
@media (prefers-reduced-motion: reduce) { .h8-hero .vidctl { display: none; } }
/* Guides v8 */
.g8 { max-width: 640px; margin: 0 auto; padding: 0 16px 48px; display: grid; gap: 16px; }
.g8 .answer { background: var(--ink); color: var(--daylight); border-radius: 28px; padding: 22px 20px; display: grid; gap: 10px; }
.g8 .answer .label { color: var(--lamp); }
.g8 .answer p { margin: 0; }
.g8 .pcard8 { background: var(--daylight); border: 2px solid var(--ink); border-radius: 24px; padding: 18px; display: grid; gap: 10px; }
.g8 .pcard8 .role { font-weight: 800; font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); }
.g8 .specs { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.g8 .specs li { border: 1.5px solid var(--ink); border-radius: 999px; padding: 4px 10px; font-size: 0.8125rem; font-weight: 700; }
.g8 .howbox { background: var(--daylight); border-radius: 24px; padding: 18px 20px; }
.g8 .aff { font-size: 0.8125rem; color: var(--dim); }
body.adland .h8-hero, body.adland #compare, body.adland #how, body.adland #dte { display: none; }
.h8 .dd { margin: 0; }