/* Inter and JetBrains Mono via Google Fonts CDN */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ──────────────────────────────────────────────────────────────
   Reset
   ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { color-scheme: light dark; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
}
img { display: block; max-width: 100%; }
svg { max-width: 100%; }
.btn svg, .btn-primary svg, .btn-secondary svg, .btn-ghost svg, .btn-lg svg, .btn-sm svg,
a svg, button svg { display: inline-block; flex-shrink: 0; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; }

/* ──────────────────────────────────────────────────────────────
   Design tokens (RGB triplets for alpha-value compositing)
   ────────────────────────────────────────────────────────────── */
:root,
[data-theme='light'] {
  --color-canvas: 247 248 251;
  --color-surface: 255 255 255;
  --color-surface-raised: 255 255 255;
  --color-surface-hover: 244 244 246;
  --color-border: 224 228 236;
  --color-border-strong: 209 209 215;
  --color-text-primary: 17 17 19;
  --color-text-secondary: 91 91 100;
  --color-text-tertiary: 138 138 148;
  --color-brand: 82 88 230;
  --color-brand-hover: 69 75 210;
  --color-brand-subtle: 238 240 255;
  --color-brand-subtle-hover: 222 222 248;
  --color-brand-fg: 82 88 230;
  --color-success: 22 163 74;
  --color-success-subtle: 220 252 231;
  --color-warning: 217 119 6;
  --color-warning-subtle: 254 243 199;
  --color-danger: 220 38 38;
  --color-danger-subtle: 254 226 226;
}

[data-theme='dark'] {
  --color-canvas: 8 10 15;
  --color-surface: 15 18 26;
  --color-surface-raised: 20 24 34;
  --color-surface-hover: 26 31 43;
  --color-border: 34 40 54;
  --color-border-strong: 61 70 91;
  --color-text-primary: 240 241 245;
  --color-text-secondary: 161 165 178;
  --color-text-tertiary: 110 114 126;
  --color-brand: 126 119 246;
  --color-brand-hover: 149 143 250;
  --color-brand-subtle: 36 34 68;
  --color-brand-subtle-hover: 48 48 80;
  --color-brand-fg: 173 168 255;
  --color-success: 74 222 128;
  --color-success-subtle: 22 38 28;
  --color-warning: 251 191 36;
  --color-warning-subtle: 41 33 18;
  --color-danger: 248 113 113;
  --color-danger-subtle: 49 24 24;
}

/* ──────────────────────────────────────────────────────────────
   Semantic color utilities
   ────────────────────────────────────────────────────────────── */
body { background: rgb(var(--color-canvas)); color: rgb(var(--color-text-primary)); }

/* Focus ring */
*:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgb(var(--color-canvas)), 0 0 0 4px rgb(var(--color-brand) / 0.6);
}

/* ──────────────────────────────────────────────────────────────
   Buttons
   ────────────────────────────────────────────────────────────── */
.btn,
.btn-primary,
.btn-secondary,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: 0.5rem;
  font-weight: 600;
  padding: 0.5rem 0.875rem;
  font-size: 0.8125rem;
  line-height: 1.25rem;
  transition: all 150ms;
  cursor: pointer;
  border: none;
  white-space: nowrap;
}

.btn:active,
.btn-primary:active,
.btn-secondary:active,
.btn-ghost:active { transform: scale(0.99); }

.btn:disabled,
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-ghost:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-sm { padding: 0.375rem 0.625rem; font-size: 0.75rem; gap: 0.25rem; }
.btn-lg { padding: 0.625rem 1.25rem; font-size: 0.875rem; }

.btn-primary {
  background: rgb(var(--color-brand)); color: #fff;
  box-shadow: 0 1px 2px 0 rgb(var(--color-brand) / 0.1);
}
.btn-primary:hover { background: rgb(var(--color-brand-hover)); }

.btn-secondary {
  background: rgb(var(--color-surface)); color: rgb(var(--color-text-primary));
  border: 1px solid rgb(var(--color-border));
}
.btn-secondary:hover { background: rgb(var(--color-surface-hover)); border-color: rgb(var(--color-border-strong)); }

.btn-ghost { background: transparent; color: rgb(var(--color-text-secondary)); }
.btn-ghost:hover { color: rgb(var(--color-text-primary)); background: rgb(var(--color-surface-hover)); }
.btn-ghost.btn-sm { padding: 0.5rem; }

/* ──────────────────────────────────────────────────────────────
   Cards
   ────────────────────────────────────────────────────────────── */
.card {
  background: rgb(var(--color-surface)); border: 1px solid rgb(var(--color-border));
  border-radius: 1rem; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.04);
}
.card-padded { composes: card; padding: 1.25rem; }
/* Fallback for composes not working in plain CSS */
.card-padded {
  background: rgb(var(--color-surface)); border: 1px solid rgb(var(--color-border));
  border-radius: 1rem; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.04); padding: 1.25rem;
}

.enterprise-card { transition: all 200ms; }
.enterprise-card:hover {
  transform: translateY(-2px);
  border-color: rgb(var(--color-border-strong));
  box-shadow: 0 24px 70px -32px rgb(0 0 0 / 0.35), 0 1px 0 rgb(255 255 255 / 0.04) inset;
}

/* ──────────────────────────────────────────────────────────────
   Badges
   ────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.125rem 0.5rem; border-radius: 0.25rem;
  font-size: 0.6875rem; line-height: 1rem; font-weight: 500;
}
.badge-brand { background: rgb(var(--color-brand-subtle)); color: rgb(var(--color-brand-fg)); }
.badge-success { background: rgb(var(--color-success-subtle)); color: rgb(var(--color-success)); }

/* ──────────────────────────────────────────────────────────────
   Section kicker
   ────────────────────────────────────────────────────────────── */
.section-kicker {
  font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.24em; color: rgb(var(--color-brand-fg));
}

/* ──────────────────────────────────────────────────────────────
   Inputs
   ────────────────────────────────────────────────────────────── */
.input {
  width: 100%; background: rgb(var(--color-surface)); color: rgb(var(--color-text-primary));
  border: 1px solid rgb(var(--color-border)); border-radius: 0.75rem;
  padding: 0.5rem 0.75rem; font-size: 0.8125rem;
  transition: border-color 150ms;
}
.input::placeholder { color: rgb(var(--color-text-tertiary)); }
.input:focus { outline: none; border-color: rgb(var(--color-brand)); }

select.input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.625rem center; background-size: 1rem;
  padding-right: 2.25rem;
}

textarea.input { resize: none; }

/* ──────────────────────────────────────────────────────────────
   Scrollbar
   ────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgb(var(--color-border-strong)); border-radius: 8px; border: 2px solid rgb(var(--color-canvas)); }
::-webkit-scrollbar-thumb:hover { background: rgb(var(--color-text-tertiary)); }

/* ──────────────────────────────────────────────────────────────
   SVG Icons (inline via CSS for static HTML)
   ────────────────────────────────────────────────────────────── */
.icon { width: 1rem; height: 1rem; flex-shrink: 0; }
.icon-lg { width: 1.25rem; height: 1.25rem; }
.icon-xl { width: 1.5rem; height: 1.5rem; }

/* ──────────────────────────────────────────────────────────────
   Layout utilities
   ────────────────────────────────────────────────────────────── */
.container { max-width: 80rem; margin: 0 auto; padding: 0 1.5rem; }
.container-sm { max-width: 48rem; margin: 0 auto; padding: 0 1.5rem; }
.container-md { max-width: 56rem; margin: 0 auto; padding: 0 1.5rem; }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: start; }
.items-end { align-items: end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 0.25rem; }
.gap-1\.5 { gap: 0.375rem; }
.gap-2 { gap: 0.5rem; }
.gap-2\.5 { gap: 0.625rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.gap-12 { gap: 3rem; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }
.shrink-0 { flex-shrink: 0; }
.inline-flex { display: inline-flex; }

.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }

.w-full { width: 100%; }
.w-auto { width: auto; }
.min-h-screen { min-height: 100vh; }

.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; top: 0; }
.inset-0 { inset: 0; }
.z-10 { z-index: 10; }
.z-30 { z-index: 30; }
.z-50 { z-index: 50; }

.overflow-hidden { overflow: hidden; }
.text-center { text-align: center; }
.text-left { text-align: left; }

/* Spacing */
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
.p-6 { padding: 1.5rem; }
.p-7 { padding: 1.75rem; }
.p-8 { padding: 2rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.py-24 { padding-top: 6rem; padding-bottom: 6rem; }
.pt-16 { padding-top: 4rem; }
.pb-3 { padding-bottom: 0.75rem; }
.pb-18 { padding-bottom: 4.5rem; }
.pl-5 { padding-left: 1.25rem; }

.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.25rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-7 { margin-top: 1.75rem; }
.mt-8 { margin-top: 2rem; }
.mt-9 { margin-top: 2.25rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-12 { margin-top: 3rem; }
.mt-14 { margin-top: 3.5rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-14 { margin-bottom: 3.5rem; }
.my-8 { margin-top: 2rem; margin-bottom: 2rem; }
.mx-auto { margin-left: auto; margin-right: auto; }

.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-2\.5 > * + * { margin-top: 0.625rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.space-y-8 > * + * { margin-top: 2rem; }
.space-y-10 > * + * { margin-top: 2.5rem; }

/* ──────────────────────────────────────────────────────────────
   Typography
   ────────────────────────────────────────────────────────────── */
.text-2xs { font-size: 0.6875rem; line-height: 1rem; }
.text-xs { font-size: 0.75rem; line-height: 1.125rem; }
.text-sm { font-size: 0.8125rem; line-height: 1.25rem; }
.text-base { font-size: 0.875rem; line-height: 1.375rem; }
.text-lg { font-size: 1rem; line-height: 1.5rem; }
.text-xl { font-size: 1.125rem; line-height: 1.625rem; }
.text-2xl { font-size: 1.375rem; line-height: 1.875rem; letter-spacing: -0.01em; }
.text-3xl { font-size: 1.75rem; line-height: 2.25rem; letter-spacing: -0.02em; }
.text-5xl { font-size: 3rem; line-height: 1; }

.font-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

.tracking-tight { letter-spacing: -0.025em; }
.tracking-tighter { letter-spacing: -0.055em; }
.tracking-wider { letter-spacing: 0.05em; }
.tracking-widest { letter-spacing: 0.24em; }
.uppercase { text-transform: uppercase; }
.leading-6 { line-height: 1.5rem; }
.leading-7 { line-height: 1.75rem; }
.leading-8 { line-height: 2rem; }
.leading-relaxed { line-height: 1.625; }
.list-disc { list-style-type: disc; }

.max-w-xl { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }

/* Colors */
.text-white { color: #fff; }
.text-text-primary { color: rgb(var(--color-text-primary)); }
.text-text-secondary { color: rgb(var(--color-text-secondary)); }
.text-text-tertiary { color: rgb(var(--color-text-tertiary)); }
.text-brand-fg { color: rgb(var(--color-brand-fg)); }
.text-brand { color: rgb(var(--color-brand)); }
.text-success { color: rgb(var(--color-success)); }
.text-danger { color: rgb(var(--color-danger)); }

.bg-canvas { background: rgb(var(--color-canvas)); }
.bg-surface { background: rgb(var(--color-surface)); }
.bg-surface-raised { background: rgb(var(--color-surface-raised)); }
.bg-surface-hover { background: rgb(var(--color-surface-hover)); }
.bg-brand { background: rgb(var(--color-brand)); }
.bg-brand-subtle { background: rgb(var(--color-brand-subtle)); }
.bg-success { background: rgb(var(--color-success)); }
.bg-success-subtle { background: rgb(var(--color-success-subtle)); }
.bg-danger-subtle { background: rgb(var(--color-danger-subtle)); }

.border-border { border: 1px solid rgb(var(--color-border)); }
.border-t-border { border-top: 1px solid rgb(var(--color-border)); }
.border-b-border { border-bottom: 1px solid rgb(var(--color-border)); }
.border-y-border { border-top: 1px solid rgb(var(--color-border)); border-bottom: 1px solid rgb(var(--color-border)); }

.rounded-full { border-radius: 9999px; }
.rounded-md { border-radius: 0.5rem; }
.rounded-lg { border-radius: 0.625rem; }
.rounded-xl { border-radius: 0.875rem; }
.rounded-2xl { border-radius: 1rem; }
.rounded-3xl { border-radius: 1.5rem; }
.rounded-t-lg { border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; }

.shadow-subtle { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.04); }
.shadow-enterprise { box-shadow: 0 24px 70px -32px rgb(0 0 0 / 0.35), 0 1px 0 rgb(255 255 255 / 0.04) inset; }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); }

.backdrop-blur-xl { backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.backdrop-blur-lg { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.backdrop-blur { backdrop-filter: blur(8px); }

.opacity-90:hover { opacity: 0.9; }
.transition { transition: all 150ms; }

/* Specific backgrounds with alpha */
.bg-canvas-80 { background: rgb(var(--color-canvas) / 0.82); }
.bg-surface-70 { background: rgb(var(--color-surface) / 0.7); }
.bg-surface-90 { background: rgb(var(--color-surface) / 0.9); }
.bg-canvas-60 { background: rgb(var(--color-canvas) / 0.6); }
.bg-canvas-70 { background: rgb(var(--color-canvas) / 0.7); }
.bg-brand-10 { background: rgb(var(--color-brand) / 0.1); }
.bg-brand-20 { background: rgb(var(--color-brand) / 0.2); }
.bg-brand-25 { background: rgb(var(--color-brand) / 0.25); }
.border-brand-25 { border-color: rgb(var(--color-brand) / 0.25); }
.border-brand-45 { border-color: rgb(var(--color-brand) / 0.45); }
.border-success-20 { border-color: rgb(var(--color-success) / 0.2); }

/* ──────────────────────────────────────────────────────────────
   Navigation
   ────────────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 30;
  border-bottom: 1px solid rgb(var(--color-border));
  background: rgb(var(--color-canvas) / 0.82);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
}
.nav-inner {
  max-width: 80rem; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.5rem;
}
.nav-inner-sm {
  max-width: 56rem; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.5rem;
}
.nav-logo {
  display: flex; align-items: center; gap: 0.75rem;
}
.nav-logo img {
  height: 2.5rem; width: 2.5rem; border-radius: 0.75rem;
  overflow: hidden; object-fit: cover;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.04);
  outline: 1px solid rgb(255 255 255 / 0.1);
}
.nav-logo-sm img {
  height: 2rem; width: 2rem; border-radius: 0.5rem;
}
.nav-links {
  display: none; align-items: center; gap: 2rem;
}
.nav-links a {
  font-size: 0.8125rem; color: rgb(var(--color-text-secondary)); transition: color 150ms;
}
.nav-links a:hover { color: rgb(var(--color-text-primary)); }

/* ──────────────────────────────────────────────────────────────
   Landing page hero radial gradient background
   ────────────────────────────────────────────────────────────── */
.hero-bg {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle at top left, rgb(var(--color-brand) / 0.16), transparent 34rem),
    radial-gradient(circle at 75% 20%, rgb(var(--color-brand) / 0.10), transparent 32rem);
}

/* CTA banner gradient */
.cta-gradient {
  position: absolute; inset: 0;
  background: radial-gradient(circle at top, rgb(var(--color-brand) / 0.18), transparent 32rem);
}

/* Product preview glow */
.preview-glow {
  position: absolute; inset: -1.5rem;
  border-radius: 2rem;
  background: rgb(var(--color-brand) / 0.1);
  filter: blur(48px);
}

/* ──────────────────────────────────────────────────────────────
   Responsive
   ────────────────────────────────────────────────────────────── */
@media (min-width: 640px) {
  .sm\:flex-row { flex-direction: row; }
  .sm\:w-auto { width: auto; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm\:inline-flex { display: inline-flex; }
  .sm\:block { display: block; }
  .sm\:text-6xl { font-size: 3.75rem; line-height: 1; }
  .sm\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; letter-spacing: -0.02em; }
  .sm\:p-12 { padding: 3rem; }
}

@media (min-width: 768px) {
  .md\:flex { display: flex; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .lg\:flex-row { flex-direction: row; }
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-hero { grid-template-columns: 0.92fr 1.08fr; }
  .lg\:grid-cols-privacy { grid-template-columns: 0.86fr 1.14fr; }
  .lg\:grid-cols-preview { grid-template-columns: 0.9fr 1.1fr; }
  .lg\:grid-cols-contact { grid-template-columns: 1fr 1.1fr; }
  .lg\:items-center { align-items: center; }
  .lg\:items-start { align-items: start; }
  .lg\:items-end { align-items: end; }
  .lg\:pb-24 { padding-bottom: 6rem; }
  .lg\:pt-24 { padding-top: 6rem; }
  .lg\:justify-start { justify-content: flex-start; }
  .lg\:text-7xl { font-size: 4.5rem; line-height: 1; }
}

/* ──────────────────────────────────────────────────────────────
   Theme toggle
   ────────────────────────────────────────────────────────────── */
.theme-toggle { cursor: pointer; background: transparent; border: none; }

/* ──────────────────────────────────────────────────────────────
   Dialog / Modal overlay
   ────────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: rgb(0 0 0 / 0.65); padding: 1rem;
  backdrop-filter: blur(4px);
}
.modal-overlay[hidden] { display: none; }

/* ──────────────────────────────────────────────────────────────
   Hover link utility
   ────────────────────────────────────────────────────────────── */
a.hover-underline:hover { text-decoration: underline; }
a.hover-primary:hover { color: rgb(var(--color-text-primary)); }

/* Check icon for pricing lists */
.check-icon {
  width: 1rem; height: 1rem; flex-shrink: 0; color: rgb(var(--color-success));
}

/* Dot indicator */
.dot { width: 0.375rem; height: 0.375rem; border-radius: 9999px; }
.dot-success { background: rgb(var(--color-success)); box-shadow: 0 0 0 4px rgb(var(--color-success) / 0.16); }
.dot-danger { background: rgb(var(--color-danger) / 0.7); }
.dot-warning { background: rgb(var(--color-warning) / 0.7); }
.dot-sm-success { background: rgb(var(--color-success)); }

/* Product preview bars */
.bar { flex: 1; border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; }