/* Reset & Base */
*, *::before, *::after { box-sizing: border-box; }
html { width: 100%; overflow-x: hidden; }
* { margin: 0; }
html:focus-within { scroll-behavior: smooth; }
html, body { height: 100%; }
body {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: 1.6;
  background: radial-gradient(1000px 600px at 80% -20%, rgba(45,106,152,0.12), transparent 60%) no-repeat, var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  max-width: 100%;
  overflow-x: hidden;
}

/* Sticky footer layout */
body > site-header ~ main { min-height: calc(100vh - 320px); display: block; }
/* Adjust the 320px if your header+footer combined height differs; footer will sit at bottom */

img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul[role='list'], ol[role='list'] { list-style: none; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.skip-link:focus { position: fixed; left: var(--space); top: var(--space); width: auto; height: auto; background: var(--color-brand-700); color: white; padding: var(--space-xs) var(--space); border-radius: var(--radius); z-index: 10002; }

/* Typography */
h1, h2, h3 { line-height: 1.2; }
h1 { font-size: var(--font-size-4xl); font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: var(--font-size-3xl); font-weight: 700; letter-spacing: -0.01em; }
h3 { font-size: var(--font-size-xl); font-weight: 700; }
p { color: var(--color-muted); }

/* Buttons */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem;
  /* Unified sizing */
  min-height: 44px; /* accessible target */
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius);
  background: var(--color-elev-1); border: 1px solid var(--color-border);
  color: var(--color-text); transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.button:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.button:active { transform: translateY(0); }
.button:focus-visible { outline: 2px solid color-mix(in oklab, var(--color-brand-600) 55%, transparent); outline-offset: 2px; box-shadow: 0 0 0 4px color-mix(in oklab, var(--color-brand-600) 18%, transparent); }
.button.button-primary { background: linear-gradient(180deg, var(--color-brand-600), var(--color-brand-700)); color: #fff; border-color: transparent; box-shadow: 0 10px 30px rgba(14,165,233,.3); }
.button.button-primary:hover { filter: brightness(1.05); }
.button.button-ghost { background: var(--color-panel); border-color: var(--color-border); color: var(--color-text); }
[data-theme="dark"] .button.button-ghost { background: color-mix(in oklab, var(--color-panel) 70%, var(--color-brand-700)); color: var(--color-text); }
.button.button-lg { min-height: 48px; padding: 0.9rem 1.4rem; font-weight: 600; }
.badge { display: inline-flex; align-items: center; padding: 0.35rem 0.75rem; font-size: var(--font-size-sm); border-radius: var(--radius-full);
  background: color-mix(in oklab, var(--color-brand-600) 16%, var(--color-panel));
  color: color-mix(in oklab, var(--color-brand-800) 70%, var(--color-text));
  border: 1px solid color-mix(in oklab, var(--color-brand-600) 40%, var(--color-border));
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  backdrop-filter: saturate(1.1) blur(2px);
}
[data-theme="dark"] .badge { color: color-mix(in oklab, var(--color-text) 85%, var(--color-brand-600)); background: color-mix(in oklab, var(--color-brand-700) 22%, var(--color-panel)); border-color: color-mix(in oklab, var(--color-brand-700) 45%, var(--color-border)); }

/* Sections */
.section { padding: var(--space-3xl) 0; }
/* Print styles */
@media print {
  .site-header, .site-footer, video, .nav-backdrop, .site-nav, .back-to-top { display: none !important; }
  .section, .hero, .cta-banner { padding: 0 !important; }
  a { text-decoration: underline; color: #000 !important; }
  body { background: #fff !important; color: #000 !important; }
  .card, .trust-strip, .compare-table { box-shadow: none !important; border-color: #000 !important; }
}
.section.page-title { padding-top: calc(var(--space-4xl) + var(--header-h)); }
.section.alt { background: linear-gradient(180deg, color-mix(in oklab, var(--color-brand-600) 6%, transparent) 0%, color-mix(in oklab, var(--color-brand-600) 14%, transparent) 100%); }
.section-header { margin-bottom: var(--space-xl); }
.section-title { margin-bottom: var(--space-xs); }
.section-subtitle { font-size: var(--font-size-md); }