/* Shared overrides for dark variants (below the hero). Each theme sets its own tokens. */
.masthead { background: color-mix(in srgb, var(--bg) 82%, transparent); border-bottom-color: var(--line); }
.pill--dark { background: var(--ink); color: var(--bg); }
.tile, .faq details, .contact__card, .product__visual { border: 1px solid var(--line); }
.section--muted { border-block: 1px solid var(--line); }
.section--contact { border-top: 1px solid var(--line); }
.footer { border-top: 1px solid var(--line); }
.phscale__ticks { color: var(--ink-2); }
.product__link { color: var(--accent); }
.steps li::before { background: var(--accent); color: var(--accent-ink); }
.faq summary::after { background: var(--accent-soft); color: var(--accent); }
.tile--dark .focus strong { color: var(--accent); }
.hero__actions .pill--ghost { color: var(--ink); }
/* Generic hero layout for generated variants: text left, visual right (or centred). */
.vx-hero { overflow-x: clip; }
.vx-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; padding-block: clamp(2.5rem, 6vw, 5rem) clamp(1rem, 3vw, 2rem); }
@media (min-width: 64em) { .vx-inner { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }
.vx-inner.is-center { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.vx-inner.is-center .vx-text { display: flex; flex-direction: column; align-items: center; max-width: 52rem; }
.vx-inner.is-center .hero__actions { justify-content: center; align-self: center; }
.vx-title { font-size: clamp(2.75rem, 5.4vw, 5.25rem); line-height: 0.98; letter-spacing: -0.05em; }
.vx-hero .hero__lead { margin-top: 1.5rem; }
.vx-hero .hero__actions { margin-top: 2rem; }