/* ========================================================================== Vaytax v2 Design System — editorial marketing treatment (2026-04-23) Loaded on every page. Adds new v2 accents; never overrides existing layout. Safe to load alongside styles.css (no conflicting selectors at equal specificity). ========================================================================== */ /* Flag-dot eyebrow decoration — decorates ALL existing `.tagline` usage (section eyebrow tags). Also available as `.eyebrow-flag`. */ .tagline::before, .eyebrow-flag::before { content: ''; display: inline-block; width: 24px; height: 8px; margin-right: 12px; vertical-align: -1px; background: linear-gradient( 90deg, #000 0%, #000 33.333%, #dd0000 33.333%, #dd0000 66.666%, #ffcc00 66.666%, #ffcc00 100% ); border-radius: 1px; } /* Opt-out where a page doesn't want the flag-dot on .tagline */ .tagline.no-flag::before { display: none; } /* Gold-italic accent for hero H1s — pages can mark a word or phrase with or to get the gold italic treatment. Default is MUTED gold (reads well on light backgrounds). Dark-background heros override to FLAG gold (#ffcc00). */ h1 em, h1 .accent { color: #8a6d3b; font-style: italic; font-weight: 400; } /* Dark-hero override: any h1 inside a dark hero or hero gradient section gets the brighter flag-gold italic for contrast. */ .hero h1 em, .hero h1 .accent, .v2-dark-hero h1 em, .v2-dark-hero h1 .accent, .pricing-hero h1 em, .pricing-hero h1 .accent, .lander-hero h1 em, .lander-hero h1 .accent, .amazon-hero h1 em, .amazon-hero h1 .accent, .shopify-hero h1 em, .shopify-hero h1 .accent { color: #ffcc00; } /* Footer flag-stripe left accent — works on the existing footer on every page. Targets a