/*
 * 0WebHost design language
 *
 * This is intentionally framework-neutral. Both Solid applications import this
 * file so a colour, radius, focus treatment, or motion adjustment is made once.
 * Components should use these semantic values instead of product-specific hex
 * values (for example, `--ow-surface-raised`, not `#fff`).
 */
:root {
  /* ═══ Lagoon v4 OKLCH Tonal Ramps (Brief p. 3) ═══ */
  /* Teal · brand */
  --t50: #EDF8F8; --t100: #D8F3F3; --t200: #B8E9E8; --t300: #88DAD9;
  --t400: #36BABA; --t500: #06999A; --t600: #077D7D; --t700: #066464;
  --t800: #034B4B; --t900: #023434; --t950: #011B1B;

  /* ═══ Solid v3 OKLCH Tonal Ramps (Brief p. 3) ═══ */
  /* Violet · brand */
  --v50: #F5F5FE; --v100: #EAEBFF; --v200: #DADAFF; --v300: #C3C2FE;
  --v400: #9C95FF; --v500: #7F68FF; --v600: #693FF4; --v700: #5528CD;
  --v800: #4016A3; --v900: #2B1172; --v950: #150640;

  /* Ink · neutral (Lagoon v4 neutral, passes AA on all targets) */
  --n50: #F3F7F7; --n100: #E8EEEF; --n200: #D7E0E1; --n300: #C0CBCD;
  --n400: #9BA7A9; --n500: #7C898A; --n600: #637072; --n700: #4C5A5B;
  --n800: #364446; --n900: #222F31; --n950: #0D1819;

  /* Sun · deal */
  --s50: #FFFAEB; --s100: #FFF4D4; --s200: #FFE8A4; --s300: #FFD545;
  --s400: #EBBF0D; --s500: #BE9A07; --s600: #9A7D03; --s700: #786101;
  --s800: #5A4804; --s900: #3F3102; --s950: #221A01;

  /* Green · success */
  --g50: #EBFAF1; --g100: #D7F6E4; --g200: #B6EDCE; --g300: #85DFB0;
  --g400: #3FBF86; --g500: #019F68; --g600: #048254; --g700: #036742;
  --g800: #024E31; --g900: #013621; --g950: #031B10;

  /* Red · error */
  --r50: #FEF3F2; --r100: #FEE6E5; --r200: #FFD1CF; --r300: #FEB2AF;
  --r400: #FF7172; --r500: #ED3345; --r600: #CB0E2F; --r700: #A30624;
  --r800: #7E0118; --r900: #570711; --r950: #2F0407;

  /* Blue · info */
  --b50: #F0F7FE; --b100: #E0EFFE; --b200: #C6E1FF; --b300: #9FCEFE;
  --b400: #52A9FE; --b500: #0589E9; --b600: #0470C0; --b700: #02589A;
  --b800: #004276; --b900: #012E53; --b950: #00172E;
}

/* ═══ Lagoon v4 Semantic Mapping (Brief p. 4) ═══ */
[data-style="lagoon"] {
  --ow-brand: var(--t600);
  --ow-brand-ink: var(--t700);
  --ow-wash: var(--t50);
  --ow-dark: var(--t950);
  --ow-deal: var(--s300);
  --ow-deal-text: var(--n950);
  --ow-text: var(--n950);
  --ow-body: var(--n700);
  --ow-muted: var(--n600);
  --ow-line: var(--n200);
  --ow-ok-bg: var(--g100);
  --ow-ok: var(--g800);

  /* Semantic overrides for Lagoon v4 Teal */
  --ow-primary: var(--t600);
  --ow-primary-hover: var(--t700);
  --ow-primary-active: var(--t800);
  --ow-primary-weak: var(--t100);
  --ow-primary-ink: var(--t700);
  --ow-primary-light: var(--t400);
  --ow-on-primary: #FFFFFF;

  --ow-ink: var(--n950);
  --ow-ink-2: var(--n700);
  --ow-ink-3: var(--n600);

  --ow-canvas: var(--t50);
  --ow-surface: #FFFFFF;
  --ow-border: var(--n200);
  --ow-border-strong: var(--n300);

  --ow-night: var(--t950);
  --ow-night-2: var(--t900);
  --ow-night-3: var(--t800);
  --ow-on-night: var(--t200);
  --ow-on-night-mute: var(--t300);
  --ow-link-on-night: var(--t200);

  --ow-accent: var(--g600);
  --ow-accent-ink: var(--g800);
  --ow-accent-weak: var(--g100);

  --ow-deal: var(--s300);
  --ow-deal-ink: var(--n950);

  --ow-danger: var(--r600);
  --ow-ring: 0 0 0 2.5px var(--t600);

  /* Map --v* aliases to --t* under lagoon style */
  --v50: var(--t50);
  --v100: var(--t100);
  --v200: var(--t200);
  --v300: var(--t300);
  --v400: var(--t400);
  --v500: var(--t500);
  --v600: var(--t600);
  --v700: var(--t700);
  --v800: var(--t800);
  --v900: var(--t900);
  --v950: var(--t950);
}

/* ═══ Solid v3 Semantic Tokens (Brief p. 4) ═══ */
[data-style="solid"] {
  --ow-brand: var(--v600);
  --ow-brand-ink: var(--v700);
  --ow-wash: var(--v50);
  --ow-dark: var(--v950);
  --ow-deal: var(--s300);
  --ow-deal-text: var(--n950);
  --ow-text: var(--n950);
  --ow-body: var(--n700);
  --ow-muted: var(--n600);
  --ow-line: var(--n200);
  --ow-ok-bg: var(--g100);
  --ow-ok: var(--g800);

  /* Semantic override for Solid v3 */
  --ow-primary: var(--v600);
  --ow-primary-hover: var(--v700);
  --ow-primary-active: var(--v800);
  --ow-primary-weak: var(--v100);
  --ow-primary-ink: var(--v700);
  --ow-primary-light: var(--v400);
  --ow-on-primary: #FFFFFF;

  --ow-ink: var(--n950);
  --ow-ink-2: var(--n700);
  --ow-ink-3: var(--n600);

  --ow-canvas: var(--v50);
  --ow-surface: #FFFFFF;
  --ow-border: var(--n200);
  --ow-border-strong: var(--n300);

  --ow-night: var(--v950);
  --ow-night-2: var(--v900);
  --ow-night-3: var(--v800);
  --ow-on-night: var(--v200);
  --ow-on-night-mute: var(--v300);
  --ow-link-on-night: var(--v200);

  --ow-accent: var(--g600);
  --ow-accent-ink: var(--g800);
  --ow-accent-weak: var(--g100);

  --ow-deal: var(--s300);
  --ow-deal-ink: var(--n950);

  --ow-danger: var(--r600);
  --ow-ring: 0 0 0 2.5px var(--v600);
}

:root,
[data-palette="ultraviolet"] {
  color-scheme: light;

  /* Ultraviolet tokens (Brief Page 5 & 7) */
  --ow-primary: #5B3DF5;
  --ow-primary-hover: #4A2FD9;
  --ow-primary-active: #3D25B8;
  --ow-primary-weak: #F0ECFF;
  --ow-primary-ink: #4426D8;
  --ow-primary-light: #8F7BFF;
  --ow-on-primary: #FFFFFF;

  --ow-ink: #12101F;
  --ow-ink-2: #4A4763;
  --ow-ink-3: #6B6884; /* AA verified contrast 5.33:1 */

  --ow-canvas: #F6F5FF;
  --ow-surface: #FFFFFF;
  --ow-surface-subtle: #F6F5FF;
  --ow-surface-raised: #FFFFFF;
  --ow-surface-selected: #F0ECFF;

  --ow-border: #E5E2F6;
  --ow-border-strong: #CFCAEB;

  --ow-night: #0E0A24;
  --ow-night-2: #1A1440;
  --ow-night-3: #2A2160;
  --ow-on-night: #C9C4F0;
  --ow-on-night-mute: #A9A3D6;
  --ow-link-on-night: #A99BFF;

  --ow-accent: #19C39B;
  --ow-accent-ink: #0A7C62;
  --ow-accent-weak: #E8FAF4;

  --ow-deal: #FFB020;
  --ow-deal-ink: #3B2600;

  --ow-danger: #D92D4A;
  --ow-danger-weak: #FEECEF;

  --ow-focus: rgb(91 61 245 / 0.28);
  --ow-ring: 0 0 0 4px rgb(91 61 245 / 22%);

  /* Radius Tokens */
  --ow-r-sm: 8px;
  --ow-r-md: 12px;
  --ow-r-lg: 20px;
  --ow-r-xl: 28px;
  --ow-r-pill: 999px;

  /* Aliases for legacy component compatibility */
  --ow-radius-sm: 8px;
  --ow-radius-md: 12px;
  --ow-radius-lg: 20px;
  --ow-radius-xl: 28px;

  /* Shadow Tokens */
  --ow-sh-1: 0 1px 2px rgb(18 16 31 / 6%);
  --ow-sh-2: 0 8px 24px -8px rgb(70 40 200 / 18%);
  --ow-sh-3: 0 24px 60px -20px rgb(70 40 200 / 32%);
  --ow-shadow-sm: 0 1px 2px rgb(18 16 31 / 6%);
  --ow-shadow-md: 0 8px 24px -8px rgb(70 40 200 / 18%);
  --ow-shadow-lg: 0 24px 60px -20px rgb(70 40 200 / 32%);

  /* Motion Tokens */
  --ow-dur-fast: 120ms;
  --ow-dur: 200ms;
  --ow-dur-slow: 420ms;
  --ow-ease: cubic-bezier(.2, .8, .2, 1);
  --ow-motion-fast: 120ms;
  --ow-motion-base: 200ms;

  --ow-section-y: 96px;
}

@media (max-width: 767px) {
  :root {
    --ow-section-y: 64px;
  }
}

/* Palette: Ocean */
[data-palette="ocean"] {
  --ow-primary: #0A5CFF;
  --ow-primary-hover: #004CD6;
  --ow-primary-active: #003BB0;
  --ow-primary-weak: #EBF2FF;
  --ow-primary-ink: #0047CC;
  --ow-primary-light: #70A2FF;
  --ow-canvas: #F4F8FF;
  --ow-border: #DDE7F6;
  --ow-border-strong: #BACCE8;
  --ow-night: #05142E;
  --ow-night-2: #0A2147;
  --ow-night-3: #113166;
  --ow-on-night: #CFE1FD;
  --ow-on-night-mute: #96B8EB;
  --ow-link-on-night: #70A2FF;
  --ow-focus: rgb(10 92 255 / 0.28);
  --ow-ring: 0 0 0 4px rgb(10 92 255 / 22%);
}

/* Palette: Graphite */
[data-palette="graphite"] {
  --ow-primary: #374151;
  --ow-primary-hover: #1F2937;
  --ow-primary-active: #111827;
  --ow-primary-weak: #F3F4F6;
  --ow-primary-ink: #111827;
  --ow-primary-light: #6B7280;
  --ow-canvas: #FAFAFA;
  --ow-border: #E5E7EB;
  --ow-border-strong: #D1D5DB;
  --ow-night: #111827;
  --ow-night-2: #1F2937;
  --ow-night-3: #374151;
  --ow-on-night: #E5E7EB;
  --ow-on-night-mute: #9CA3AF;
  --ow-link-on-night: #9CA3AF;
  --ow-focus: rgb(55 65 81 / 0.28);
  --ow-ring: 0 0 0 4px rgb(55 65 81 / 22%);
}

/* Palette: Sunrise */
[data-palette="sunrise"] {
  --ow-primary: #EA580C;
  --ow-primary-hover: #C2410C;
  --ow-primary-active: #9A3412;
  --ow-primary-weak: #FFF7ED;
  --ow-primary-ink: #9A3412;
  --ow-primary-light: #FB923C;
  --ow-canvas: #FFFBF5;
  --ow-border: #FED7AA;
  --ow-border-strong: #FDBA74;
  --ow-night: #1C0F08;
  --ow-night-2: #2E180E;
  --ow-night-3: #432314;
  --ow-on-night: #FED7AA;
  --ow-on-night-mute: #FDBA74;
  --ow-link-on-night: #FB923C;
  --ow-focus: rgb(234 88 12 / 0.28);
  --ow-ring: 0 0 0 4px rgb(234 88 12 / 22%);
}

* { box-sizing: border-box; }

:where(button, a, input, select, textarea):focus-visible {
  outline: 2px solid var(--ow-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--ow-focus);
}

.ow-page {
  color: var(--ow-ink);
}

.ow-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.ow-card {
  border: 1px solid var(--ow-border);
  border-radius: var(--ow-radius-lg);
  background: var(--ow-surface-raised);
  box-shadow: var(--ow-shadow-sm);
}

.ow-card-interactive {
  transition: transform var(--ow-motion-base) var(--ow-ease), box-shadow var(--ow-motion-base) var(--ow-ease), border-color var(--ow-motion-fast) var(--ow-ease);
}

.ow-card-interactive:hover {
  border-color: var(--ow-border-strong);
  box-shadow: var(--ow-shadow-md);
  transform: translateY(-2px);
}

.ow-button {
  display: inline-flex;
  min-height: 2.5rem;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 1px solid transparent;
  border-radius: var(--ow-radius-sm);
  padding: 0.5rem 1rem;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.25rem;
  cursor: pointer;
  transition: transform var(--ow-motion-fast) var(--ow-ease), background-color var(--ow-motion-fast) var(--ow-ease), border-color var(--ow-motion-fast) var(--ow-ease), box-shadow var(--ow-motion-fast) var(--ow-ease);
}

.ow-button:hover { transform: translateY(-1px); box-shadow: var(--ow-shadow-sm); }
.ow-button:active { transform: translateY(0) scale(0.985); }
.ow-button:disabled { cursor: not-allowed; opacity: 0.54; transform: none; box-shadow: none; }
.ow-button-primary { background: var(--ow-primary); color: white; }
.ow-button-primary:hover { background: var(--ow-primary-hover); }
.ow-button-secondary { background: var(--ow-surface); border-color: var(--ow-border-strong); color: var(--ow-ink); }
.ow-button-secondary:hover { background: var(--ow-surface-subtle); }
.ow-button-danger { background: var(--ow-danger); color: white; }
.ow-button-danger:hover { background: #991b1b; }
.ow-button-ghost { background: transparent; color: var(--ow-primary-ink); }
.ow-button-ghost:hover { background: var(--ow-primary-weak); }

.ow-input, .ow-select, .ow-textarea {
  width: 100%;
  border: 1px solid var(--ow-border-strong);
  border-radius: var(--ow-radius-sm);
  background: var(--ow-surface);
  color: var(--ow-ink);
  font: inherit;
  transition: border-color var(--ow-motion-fast) var(--ow-ease), box-shadow var(--ow-motion-fast) var(--ow-ease);
}

.ow-input, .ow-select { min-height: 2.75rem; padding: 0.625rem 0.75rem; }
.ow-textarea { min-height: 6rem; padding: 0.75rem; }
.ow-input::placeholder, .ow-textarea::placeholder { color: var(--ow-ink-subtle); }
.ow-input:focus, .ow-select:focus, .ow-textarea:focus { border-color: var(--ow-primary); outline: none; box-shadow: 0 0 0 3px var(--ow-focus); }

.ow-status {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 999px;
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1rem;
}
.ow-status-success { background: var(--ow-success-weak); color: var(--ow-success); }
.ow-status-warning { background: var(--ow-warning-weak); color: var(--ow-warning); }
.ow-status-danger { background: var(--ow-danger-weak); color: var(--ow-danger); }
.ow-status-info { background: var(--ow-primary-weak); color: var(--ow-primary-ink); }
.ow-status-neutral { background: var(--ow-surface-subtle); color: var(--ow-ink-muted); }

.ow-nav-item {
  transition: color var(--ow-motion-fast) var(--ow-ease), background-color var(--ow-motion-fast) var(--ow-ease), transform var(--ow-motion-fast) var(--ow-ease);
}
.ow-nav-item:hover { transform: translateX(2px); }
.ow-nav-item[aria-current='page'] { background: var(--ow-primary); color: white; box-shadow: var(--ow-shadow-sm); }

.ow-empty-state { color: var(--ow-ink-muted); text-align: center; }
.ow-skeleton { border-radius: var(--ow-radius-sm); background: linear-gradient(90deg, var(--ow-surface-subtle) 25%, #eef2f7 37%, var(--ow-surface-subtle) 63%); background-size: 400% 100%; animation: ow-shimmer 1.4s ease infinite; }

@keyframes ow-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* ==========================================================================
   ENTERPRISE GRADE A TOKENS & SYSTEM (DARK THEME SUPPORT)
   ========================================================================== */
:root[data-theme='dark'], .theme-dark {
  color-scheme: dark;
  --ow-canvas: #090d16;
  --ow-surface: #0f172a;
  --ow-surface-subtle: #1e293b;
  --ow-surface-raised: #131d33;
  --ow-surface-selected: #1e3a8a33;
  --ow-ink: #f8fafc;
  --ow-ink-muted: #94a3b8;
  --ow-ink-subtle: #64748b;
  --ow-border: rgba(255, 255, 255, 0.09);
  --ow-border-strong: rgba(255, 255, 255, 0.16);

  --ow-primary: #3b82f6;
  --ow-primary-hover: #60a5fa;
  --ow-primary-active: #2563eb;
  --ow-primary-weak: rgba(59, 130, 246, 0.15);
  --ow-primary-ink: #93c5fd;
  --ow-focus: rgb(59 130 246 / 0.35);

  --ow-success: #10b981;
  --ow-success-weak: rgba(16, 185, 129, 0.15);
  --ow-warning: #f59e0b;
  --ow-warning-weak: rgba(245, 158, 11, 0.15);
  --ow-danger: #ef4444;
  --ow-danger-weak: rgba(239, 68, 68, 0.15);

  --ow-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  --ow-shadow-md: 0 12px 30px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
  --ow-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.7), 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* Radiant Gradients & Ambient Effects */
:root {
  --ow-gradient-primary: linear-gradient(135deg, #2563eb 0%, #3b82f6 50%, #06b6d4 100%);
  --ow-gradient-mesh: radial-gradient(at 0% 0%, rgba(37, 99, 235, 0.12) 0px, transparent 50%), radial-gradient(at 100% 100%, rgba(6, 182, 212, 0.12) 0px, transparent 50%);
  --ow-gradient-glow: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(37, 99, 235, 0.08), transparent 40%);
  --ow-glass-bg: rgba(255, 255, 255, 0.75);
  --ow-glass-border: rgba(255, 255, 255, 0.3);
  --ow-backdrop-blur: blur(16px);
}

:root[data-theme='dark'], .theme-dark {
  --ow-gradient-primary: linear-gradient(135deg, #3b82f6 0%, #6366f1 50%, #06b6d4 100%);
  --ow-gradient-mesh: radial-gradient(at 0% 0%, rgba(59, 130, 246, 0.18) 0px, transparent 60%), radial-gradient(at 100% 100%, rgba(99, 102, 241, 0.18) 0px, transparent 60%);
  --ow-gradient-glow: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(99, 102, 241, 0.15), transparent 40%);
  --ow-glass-bg: rgba(15, 23, 42, 0.75);
  --ow-glass-border: rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   1. BENTO BOXES
   ========================================================================== */
.ow-bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.25rem;
}

.ow-bento-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--ow-border);
  border-radius: var(--ow-radius-xl);
  background: var(--ow-surface-raised);
  padding: 1.75rem;
  box-shadow: var(--ow-shadow-sm);
  transition: border-color var(--ow-motion-fast) var(--ow-ease), box-shadow var(--ow-motion-base) var(--ow-ease), transform var(--ow-motion-base) var(--ow-ease);
}

.ow-bento-card:hover {
  border-color: var(--ow-border-strong);
  box-shadow: var(--ow-shadow-md);
  transform: translateY(-2px);
}

.ow-bento-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ow-gradient-glow);
  opacity: 0;
  transition: opacity var(--ow-motion-base) var(--ow-ease);
  pointer-events: none;
}

.ow-bento-card:hover::before {
  opacity: 1;
}

.ow-pulse-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ow-pulse-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: currentColor;
  position: relative;
}

.ow-pulse-dot::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: inherit;
  animation: ow-ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
  opacity: 0.75;
}

@keyframes ow-ping {
  75%, 100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

/* ==========================================================================
   2. HIGH-IMPACT BANNERS
   ========================================================================== */
.ow-banner {
  position: relative;
  border-radius: var(--ow-radius-lg);
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  border: 1px solid var(--ow-border);
  box-shadow: var(--ow-shadow-sm);
  background: var(--ow-surface);
}

.ow-banner-alert {
  background: var(--ow-surface-raised);
  border-left: 4px solid var(--ow-warning);
}

.ow-banner-incident {
  background: var(--ow-danger-weak);
  border-color: rgba(239, 68, 68, 0.3);
  color: var(--ow-danger);
}

.ow-banner-promo {
  background: var(--ow-gradient-primary);
  color: white;
  border: none;
  box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.4);
}

.ow-banner-sla {
  background: var(--ow-surface-raised);
  border: 1px solid var(--ow-border);
  position: relative;
  overflow: hidden;
}

.ow-banner-sla::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--ow-gradient-primary);
}

/* ==========================================================================
   3. COMPARISON TABLES (HYPERSCALER MATRIX)
   ========================================================================== */
.ow-comparison-container {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--ow-radius-xl);
  border: 1px solid var(--ow-border);
  background: var(--ow-surface-raised);
  box-shadow: var(--ow-shadow-sm);
}

.ow-comparison-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  text-align: left;
  font-size: 0.875rem;
}

.ow-comparison-table th,
.ow-comparison-table td {
  padding: 1.125rem 1.25rem;
  border-bottom: 1px solid var(--ow-border);
}

.ow-comparison-table tr:last-child td {
  border-bottom: none;
}

.ow-comparison-highlight-col {
  background: var(--ow-primary-weak);
  font-weight: 700;
  color: var(--ow-primary-ink);
  position: relative;
}

.ow-check-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--ow-success);
  display: inline-block;
  vertical-align: middle;
}

.ow-cross-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--ow-ink-subtle);
  display: inline-block;
  vertical-align: middle;
}

.ow-delta-badge {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  border-radius: var(--ow-radius-sm);
  font-size: 0.6875rem;
  font-weight: 800;
  background: var(--ow-success-weak);
  color: var(--ow-success);
  margin-left: 0.5rem;
}

/* ==========================================================================
   4. ENTERPRISE PRICING TABLES
   ========================================================================== */
.ow-pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}

.ow-pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2rem;
  border-radius: var(--ow-radius-xl);
  border: 1px solid var(--ow-border);
  background: var(--ow-surface-raised);
  box-shadow: var(--ow-shadow-sm);
  transition: transform var(--ow-motion-base) var(--ow-ease), box-shadow var(--ow-motion-base) var(--ow-ease), border-color var(--ow-motion-base) var(--ow-ease);
}

.ow-pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--ow-shadow-lg);
  border-color: var(--ow-border-strong);
}

.ow-pricing-popular {
  border: 2px solid var(--ow-primary);
  background: var(--ow-surface);
  box-shadow: var(--ow-shadow-md), 0 0 0 1px var(--ow-primary);
}

.ow-pricing-popular::before {
  content: 'MOST POPULAR';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ow-primary);
  color: white;
  font-size: 0.6875rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  padding: 0.25rem 0.875rem;
  border-radius: 999px;
  box-shadow: var(--ow-shadow-sm);
}

.ow-pricing-amount {
  font-size: 2.75rem;
  font-weight: 900;
  line-height: 1;
  color: var(--ow-ink);
  letter-spacing: -0.03em;
}

.ow-pricing-billing {
  font-size: 0.8125rem;
  color: var(--ow-ink-muted);
  font-weight: 500;
}

.ow-pricing-switch-container {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--ow-surface-subtle);
  padding: 0.375rem;
  border-radius: 999px;
  border: 1px solid var(--ow-border);
}

.ow-pricing-switch-btn {
  border: none;
  background: transparent;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ow-ink-muted);
  cursor: pointer;
  transition: all var(--ow-motion-fast) var(--ow-ease);
}

.ow-pricing-switch-btn.active {
  background: var(--ow-surface);
  color: var(--ow-ink);
  box-shadow: var(--ow-shadow-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}