/* Shared, framework-free styles for ui_kits/marketing-site/*.html.
   Plain CSS classes over the design system's custom properties — matches the
   real technical constraint (static HTML/CSS + minimal vanilla JS, no framework). */
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-sans); background: var(--surface-canvas); color: var(--text-primary); }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 64px); }
.narrow { max-width: 720px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 64px); }

.nav { position: sticky; top: 0; z-index: 10; height: 64px; display: flex; align-items: center; gap: 32px; padding: 0 clamp(20px, 5vw, 64px); border-bottom: 1px solid var(--border-default); background: var(--surface-primary); }
.wordmark { font: 600 19px/1 var(--font-mono); color: var(--text-primary); letter-spacing: -0.01em; }
.nav-links { display: flex; gap: 24px; font: var(--text-body-s); color: var(--text-secondary); }
.nav-links a { color: var(--text-secondary); }
.nav-links a.current { color: var(--text-primary); font-weight: 600; }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.nav-signin { font: var(--text-body-s); color: var(--text-muted); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 550 14px/1 var(--font-sans); height: 40px; padding: 0 20px; border-radius: var(--radius-sm); cursor: pointer; border: 1px solid transparent; white-space: nowrap; }
.btn-lg { height: 46px; padding: 0 26px; font-size: 15px; }
.btn-sm { height: 32px; padding: 0 14px; font-size: 13px; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary { background: var(--surface-secondary); color: var(--text-primary); border-color: var(--border-default); }
.btn-secondary:hover { background: var(--surface-tertiary); }
.btn-ghost { background: transparent; color: var(--text-primary); }
.btn-ghost:hover { background: var(--surface-secondary); }

.badge { display: inline-flex; align-items: center; gap: 6px; font: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; padding: 3px 9px; border-radius: var(--radius-full); }
.badge-accent { background: var(--accent-subtle); color: var(--accent); }
.badge-amber { background: var(--accent-amber-subtle); color: var(--accent-amber); }
.badge-neutral { background: var(--surface-tertiary); color: var(--text-secondary); }

.card { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: var(--space-5); }
.card h3 { font: var(--text-heading-s); margin: 0 0 8px; color: var(--text-primary); }
.card p { font: var(--text-body-m); color: var(--text-secondary); margin: 0; }

.eyebrow { font: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.section { padding: 72px 0; }
.section-tight { padding: 48px 0; }
h1.hero-title { font: var(--text-display-l); margin: 0 0 16px; }
h2.section-title { font: var(--text-heading-l); margin: 0; color: var(--text-primary); }
p.lede { font: var(--text-body-l); color: var(--text-secondary); }

table.compare { width: 100%; border-collapse: collapse; font: var(--text-body-m); }
table.compare th, table.compare td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border-subtle); }
table.compare th { font: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
table.compare td.yes::before { content: "✓ "; color: var(--success); font-weight: 700; }
table.compare td.no::before { content: "— "; color: var(--text-muted); }

.footer { border-top: 1px solid var(--border-default); padding: 48px clamp(20px, 5vw, 64px); }
.footer-cols { max-width: 1180px; margin: 0 auto; display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.footer-col h4 { font: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); margin: 0 0 10px; }
.footer-col a, .footer-col span { display: block; font: var(--text-body-s); color: var(--text-secondary); margin-bottom: 6px; }
.footer-legal { font: var(--text-body-s); color: var(--text-muted); margin-top: 24px; text-align: center; }

code, .mono { font-family: var(--font-mono); }