/* ── Shared page frame ─────────────────────────────────────────────
   Loaded by every HTML page (index, product, developers, about,
   privacy). Replaces five near-identical inline <style> blocks that
   used to live in each HTML <head>.

   Anything that needs to vary per page (e.g. hero padding on the
   landing) ships in that page's own page-stylesheet, not here. */

html,
body              { background: var(--bg-0); }
.vh-page,
.av2-page         { background: var(--bg-0); }

/* Scroll-anchor offset: any `<section id="...">` is the target of
   a footer link, so we keep the scroll position below the sticky
   header bar. The landing has a taller header (banner + nav) so its
   own home.css overrides this with 128px. */
section[id]       { scroll-margin-top: 80px; }

/* Eyebrow label — small accent tag above section titles. Same
   treatment across all pages. */
.eyebrow          { color: var(--accent); }
.eyebrow::before  { background: var(--accent); box-shadow: 0 0 12px var(--accent); }

/* Hide the desktop nav on narrow screens — the burger menu takes over. */
@media (max-width: 1100px) {
  .vh-nav         { display: none; }
}

/* Header / footer horizontal padding consistency. */
.vh-header        { padding-left: 40px; padding-right: 40px; }
.vh-footer        { padding-left: 40px; padding-right: 40px; }

/* Section divider — soft horizontal line between sections. Used on
   landing + about pages. The last section in the page drops the line
   so the footer can take over the visual break. */
.section,
.section-tight   { border-bottom: 1px solid var(--line); }
.section:last-of-type,
.section-tight:last-of-type { border-bottom: none; }

/* Soft the hero glow in light theme so it doesn't drown the copy. */
[data-theme="light"] .hero-glow,
[data-theme="light"] .hero-bg { opacity: 0.4; }
