/* Reset + base element styles. */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--color-ink); background: var(--color-bg); -webkit-font-smoothing: antialiased; } img, svg { max-width: 100%; display: block; } h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--space-4); line-height: var(--leading-tight); font-weight: 650; letter-spacing: -0.01em; text-wrap: balance; } /* h1/h2 carry the brand's technical-headline identity (mono display face); h3 and below stay on the sans body face — component titles (card headings, panel titles, FAQ questions) read better in it. */ h1, h2 { font-family: var(--font-display); font-weight: 600; } h1 { font-size: var(--text-5xl); } h2 { font-size: var(--text-3xl); } h3 { font-size: var(--text-xl); } h4 { font-size: var(--text-lg); } p { margin: 0 0 var(--space-4); color: var(--color-ink-muted); } a { color: var(--color-accent); text-decoration: none; } a:hover { text-decoration: underline; } ul, ol { margin: 0; padding: 0; list-style: none; } button, input, textarea, select { font: inherit; color: inherit; } /* Accessible focus state — visible on keyboard nav, not on mouse click. */ :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000; background: var(--color-bg-inverse); color: var(--color-ink-on-inverse); padding: var(--space-3) var(--space-4); border-radius: 0 0 var(--radius-sm) 0; } .skip-link:focus { left: 0; } /* Layout utilities */ .container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-5); } .container--narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--space-5); } .section { padding: var(--space-12) 0; } @media (max-width: 640px) { .section { padding: var(--space-8) 0; } h1 { font-size: var(--text-3xl); } h2 { font-size: var(--text-2xl); } } .section-eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-accent); margin-bottom: var(--space-3); } .section-eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--color-status-positive); flex-shrink: 0; } .section-header { max-width: 620px; margin-bottom: var(--space-8); } .section-header--center { margin-left: auto; margin-right: auto; text-align: center; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; } .icon { width: 22px; height: 22px; flex-shrink: 0; } .icon--lg { width: 32px; height: 32px; } .icon--sm { width: 16px; height: 16px; } /* * Scroll-reveal (progressive enhancement): only hidden pre-animation * when `.has-js` is present on (set by an inline script in * header.php before paint). Without JS, [data-reveal] content is * fully visible by default — nothing to break. */ .has-js [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity 0.5s var(--ease-standard), transform 0.5s var(--ease-standard); } .has-js [data-reveal].is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .has-js [data-reveal] { opacity: 1; transform: none; transition: none; } }