/* Button + badge primitives (ported from the design system) and small extras
   so the marketing site is self-contained. */
html { scroll-behavior: smooth; }
svg { vertical-align: middle; }

/* Button */
.hcms-btn { --_h: var(--control-md); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--_h); padding: 0 var(--space-4); font-family: var(--font-ui); font-size: var(--text-base); font-weight: var(--weight-medium); line-height: 1; letter-spacing: var(--tracking-tight); border: 1px solid transparent; border-radius: var(--radius-md); cursor: pointer; white-space: nowrap; text-decoration: none; transition: var(--transition-control); }
.hcms-btn:hover { text-decoration: none; }
.hcms-btn--sm { --_h: var(--control-sm); padding: 0 var(--space-3); font-size: var(--text-sm); }
.hcms-btn--lg { --_h: var(--control-lg); padding: 0 var(--space-5); font-size: var(--text-lg); }
.hcms-btn--block { width: 100%; }
.hcms-btn--primary { background: var(--primary); color: var(--primary-fg); }
.hcms-btn--primary:hover { background: var(--primary-hover); }
.hcms-btn--outline { background: transparent; color: var(--text); border-color: var(--border-strong); }
.hcms-btn--outline:hover { background: var(--surface-2); border-color: var(--text-subtle); }
/* On the dark hero, the outline button needs light colors */
.mk-hero .hcms-btn--outline { color: #fff; border-color: rgba(255,255,255,.28); }
.mk-hero .hcms-btn--outline:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.5); }

/* Badge */
.hcms-badge { display: inline-flex; align-items: center; gap: var(--space-1); height: 1.375rem; padding: 0 var(--space-2); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-mono); line-height: 1; border-radius: var(--radius-sm); border: 1px solid transparent; }
.hcms-badge--dot::before { content: ''; width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; }
.hcms-badge--success { background: var(--success-bg); color: var(--success-fg); }
.hcms-badge--warning { background: var(--warning-bg); color: var(--warning-fg); }
.hcms-badge--info { background: var(--info-bg); color: var(--info-fg); }

/* Hero mockup stat */
.mk-stat { flex: 1; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-3); }
.mk-stat__l { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-subtle); }
.mk-stat__v { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 500; line-height: 1; margin: 4px 0; }
.mk-stat__d { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--success); }