/* fonts.css */
/* System font stack (ESA-style): no custom font files; uses system-ui. */

/* base.css */
/**
 * Base: reset, design tokens, typography, accessibility.
 * No layout. Brand-owned public design system.
 */

/* ===== RESET ===== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

/* ===== DESIGN TOKENS (:root) ===== */
:root {
  /* Colors (semantic + legacy for migration) */
  --color-primary: #001C82;
  --color-secondary: #0D58FF;
  --color-accent: #2563eb;
  --color-background: #0C0C1F;
  /* CTA: single card background (contact-section-inner + contact-cta-box same), and deeper panel for service sections only */
  --color-surface: #18182b;
  --color-surface-deep: #161A28;
  /* Secondary CTA button: solid dark (not semi-transparent) */
  --color-cta-secondary-bg: #2d2e46;
  --color-text-primary: #EAF4FF;
  --color-text-muted: #CFE3FF;
  --color-border: rgba(37, 99, 235, 0.12);
  --color-border-strong: rgba(37, 99, 235, 0.18);
  --color-success: #00ff88;
  --color-warning: #ffaa00;
  --color-error: #ff4444;

  /* Danger & action buttons */
  --color-danger: #D32F2F;
  --color-danger-hover: #B71C1C;
  --color-premium-red: #C62828;
  --color-premium-red-hover: #B71C1C;
  --color-orange-dark: #E65100;
  --color-orange-dark-hover: #BF360C;
  --color-orange-light: #EF6C00;
  --color-orange-light-hover: #E65100;
  --color-green: #BFF747;
  --color-green-hover: #A5D936;
  --color-green-text: #1a1a1a;

  /* Legacy names (same values, for app.css/nav.css during migration) */
  --bg-900: var(--color-background);
  --bg-800: #12122a;
  --fg: var(--color-text-primary);
  --muted: var(--color-text-muted);
  --blue-900: var(--color-primary);
  --blue-500: var(--color-secondary);
  --cta: var(--color-accent);
  --cta-rgb: 37, 99, 235;
  --cta-hover: #1d4ed8;
  --cta-on-dark: #93c5fd;
  --ice: #C0FFFF;
  --line1: var(--color-border-strong);
  --line2: var(--color-border);
  --glass: rgba(255, 255, 255, 0.03);
  --glass-backdrop: blur(10px);
  --glass-shadow: 0 20px 60px rgba(0, 230, 255, 0.14);
  /* Card/small section (e.g. contact-cta-box, service interior cards): same as contact-cta-box */
  --card-bg: var(--color-background);
  --card-border: var(--line2);
  --r: 20px;
  --gradient: linear-gradient(135deg, #0D58FF, #00E6FF);

  /* Brand palette (raw; dark theme decorative use) */
  --color-1: #3b82f6;
  --color-2: #bc3af2;
  --color-3: #f23a80;
  --color-4: #f29d3a;
  --color-5: #9ff23a;

  /* Text on solid accent (CTA) buttons */
  --color-on-accent: #ffffff;
  /* Soft accent surfaces (e.g. secondary button) — dark UI: light text on tint */
  --color-accent-soft-bg: rgba(var(--cta-rgb), 0.12);
  --color-accent-soft-bg-hover: rgba(var(--cta-rgb), 0.2);
  --color-accent-soft-border: rgba(var(--cta-rgb), 0.28);
  --color-on-accent-soft: #ffffff;
  --focus-ring: var(--color-accent);

  /* Badge / chip (dark surfaces) */
  --badge-bg: rgba(12, 61, 217, 0.18);
  --badge-fg: #99c4ff;
  --badge-border: rgba(13, 88, 255, 0.22);
  /* Utility: dimmed muted (solid enough for AA on dark bg) */
  --muted-50: rgba(207, 227, 255, 0.62);

  /* Spacing scale */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */

  /* Typography */
  --font-family-sans: system-ui, -apple-system, sans-serif;
  --font-family-mono: ui-monospace, 'SF Mono', Consolas, monospace;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;
  --font-size-6xl: 3.75rem;
  --font-size-7xl: 4.5rem;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.1;
  --line-height-snug: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;

  /* Gradients (for .bg-gradient-to-r / .bg-gradient-to-br; from/to classes set values) */
  --gradient-stops: transparent;
  --gradient-from: transparent;
  --gradient-via: transparent;
  --gradient-to: transparent;

  /* Breakpoints (for reference in media queries) */
  --bp-xs: 560px;
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 860px;
  --bp-xl: 980px;
  --bp-2xl: 1024px;
}

/* ===== LIGHT THEME (explicit; default tokens above = dark) ===== */
html[data-theme="dark"] {
  color-scheme: dark;
}

html[data-theme="light"] {
  color-scheme: light;
  --bg-800: #e2e8f0;
  /* Accessible accents: blue-700 so white text meets WCAG AA on solid CTAs */
  --color-1: #1d4ed8;
  --color-2: #bc3af2;
  --color-3: #f23a80;
  --color-4: #f29d3a;
  --color-5: #9ff23a;
  --color-primary: #1e3a8a;
  --color-secondary: #2563eb;
  --color-accent: var(--color-1);
  /* Override critical.css --cta:#3b82f6 so solid CTAs meet WCAG AA with white text */
  --cta: var(--color-1);
  --color-background: #f8fafc;
  --color-surface: #ffffff;
  --color-surface-deep: #f1f5f9;
  --color-cta-secondary-bg: #e2e8f0;
  --color-text-primary: #0f172a;
  --color-text-muted: #475569;
  --color-border: rgba(15, 23, 42, 0.12);
  --color-border-strong: rgba(15, 23, 42, 0.2);
  --cta-rgb: 29, 78, 216;
  --cta-hover: #1e40af;
  --cta-on-dark: #1e40af;
  --ice: #0369a1;
  --line1: var(--color-border-strong);
  --line2: var(--color-border);
  --glass: rgba(15, 23, 42, 0.06);
  --glass-shadow: 0 20px 60px rgba(15, 23, 42, 0.08);
  --card-bg: #ffffff;
  --card-border: var(--line2);
  --gradient: linear-gradient(135deg, var(--color-1), #7c3aed);
  --color-on-accent: #ffffff;
  --color-accent-soft-bg: rgba(29, 78, 216, 0.12);
  --color-accent-soft-bg-hover: rgba(29, 78, 216, 0.2);
  --color-accent-soft-border: rgba(29, 78, 216, 0.35);
  --color-on-accent-soft: #1e3a8a;
  --focus-ring: var(--color-1);
  --badge-bg: rgba(29, 78, 216, 0.12);
  --badge-fg: #1e3a8a;
  --badge-border: rgba(29, 78, 216, 0.32);
  /* Success on light surfaces (neon green fails AA on white/#f8fafc) */
  --color-success: #047857;
  /* WCAG-safe semantic text on light backgrounds (avoid root neon warning/error) */
  --color-warning: #b45309;
  --color-error: #b91c1c;
  /* Dimmed secondary text utility (solid, AA on white) */
  --muted-50: #64748b;
}

/* Win over late utilities that hardcode slate-400 for .text-muted */
html[data-theme="light"] .text-muted {
  color: var(--muted) !important;
}

@media (prefers-contrast: more) {
  html[data-theme="light"] {
    --color-border: rgba(15, 23, 42, 0.35);
    --color-border-strong: rgba(15, 23, 42, 0.5);
  }
}

/* ===== BODY ===== */
body {
  background: var(--color-background);
  color: var(--color-text-primary);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-relaxed);
  overflow-x: hidden;
}

/* Legacy class: now uses system stack (Poppins removed per plan) */
.font-poppins {
  font-family: var(--font-family-sans);
}

/* ===== TYPOGRAPHY (base elements) ===== */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
}

h1 {
  font-size: clamp(2rem, 5vw + 1rem, 3.5rem);
}

h2 {
  font-size: clamp(1.5rem, 4vw + 0.5rem, 2.25rem);
}

h3 {
  font-size: clamp(1.25rem, 2vw + 0.5rem, 1.875rem);
}

h4 {
  font-size: var(--font-size-xl);
}

h5 {
  font-size: var(--font-size-lg);
}

h6 {
  font-size: var(--font-size-base);
}

p {
  margin-bottom: var(--space-4);
}

p:last-child {
  margin-bottom: 0;
}

small,
.text-small {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

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

@media (prefers-contrast: more) {
  :root {
    --color-border: rgba(7, 156, 255, 0.35);
    --color-border-strong: rgba(7, 156, 255, 0.5);
  }
}

:focus-visible {
  outline: 2px solid var(--focus-ring, var(--color-accent));
  outline-offset: 2px;
}

/* ===== GLOBAL LINKS (no underline by default; design tokens for contrast) ===== */
a {
  text-decoration: none;
  color: var(--cta);
  transition: color 0.2s ease;
}

a:hover {
  color: var(--cta-hover);
}

a:focus-visible {
  outline: 2px solid var(--focus-ring, var(--color-accent));
  outline-offset: 2px;
}

/* ===== COOKIE BANNER & PREFERENCES MODAL ===== */
/* Layout + positioning: Views/partials/cookie-settings.php (#cookie-consent-shell). Here: theme surface + links only. */
#cookie-banner {
  background: rgba(12, 12, 31, 0.95) !important;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: 1px solid var(--line2);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
}

/* Cookie preferences modal: styles live in partial cookie-settings.php (inline when banner renders) */

/* Cookie banner links: high contrast on dark bg (WCAG AA); avoids Lighthouse contrast failure */
#cookie-banner .cookie-banner-link {
  color: #93c5fd;
  text-decoration: underline;
  text-underline-offset: 2px;
}
#cookie-banner .cookie-banner-link:hover {
  color: #bfdbfe;
}
#cookie-banner .cookie-banner-link:focus-visible {
  outline: 2px solid #93c5fd;
  outline-offset: 2px;
}

html[data-theme="light"] #cookie-banner {
  background: rgba(248, 250, 252, 0.98) !important;
  border-color: var(--line2);
  box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.08);
}

html[data-theme="light"] #cookie-banner .cookie-banner-link {
  color: #1d4ed8;
}

html[data-theme="light"] #cookie-banner .cookie-banner-link:hover {
  color: #1e40af;
}

html[data-theme="light"] #cookie-banner .cookie-banner-link:focus-visible {
  outline-color: #2563eb;
}

/* Light banner surface (base.css wins over partial #cookie-banner bg): dark text, not partial’s white/slate */
html[data-theme="light"] #cookie-banner .cookie-title {
  color: var(--color-text-primary);
}

html[data-theme="light"] #cookie-banner .cookie-message {
  color: #334155;
}

/* ===== DANGER / ACTION BUTTON UTILITIES ===== */
.btn-danger {
  background: var(--color-danger);
  color: #ffffff;
}
.btn-danger:hover { background: var(--color-danger-hover); }
.btn-premium-red {
  background: var(--color-premium-red);
  color: #ffffff;
}
.btn-premium-red:hover { background: var(--color-premium-red-hover); }
.btn-orange-dark {
  background: var(--color-orange-dark);
  color: #ffffff;
}
.btn-orange-dark:hover { background: var(--color-orange-dark-hover); }
.btn-orange-light {
  background: var(--color-orange-light);
  color: #ffffff;
}
.btn-orange-light:hover { background: var(--color-orange-light-hover); }
.btn-green {
  background: var(--color-green);
  color: var(--color-green-text);
}
.btn-green:hover { background: var(--color-green-hover); }

/* ===== ADMIN EDIT NOTICE (logged-in admins on public views; HtmlCache strips .admin-edit-notice) ===== */
.admin-edit-notice {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  border: 1px solid color-mix(in srgb, var(--color-warning, #f59e0b) 42%, rgba(255, 255, 255, 0.18));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--color-warning, #f59e0b) 18%, transparent), transparent 46%),
    color-mix(in srgb, var(--color-surface, #0f172a) 86%, rgba(15, 23, 42, 0.82));
  border-radius: 1rem;
  padding: 0.875rem 1rem;
  margin: 1.25rem auto 1.5rem;
  color: var(--color-text-primary);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.admin-edit-notice__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  color: color-mix(in srgb, var(--color-warning, #f59e0b) 72%, #ffffff);
  background: color-mix(in srgb, var(--color-warning, #f59e0b) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-warning, #f59e0b) 35%, transparent);
}

.admin-edit-notice__icon svg,
.admin-edit-notice__link svg {
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.admin-edit-notice__body {
  min-width: 0;
  flex: 1 1 auto;
  display: inline-flex;
  flex-direction: column;
  gap: 0.125rem;
}

.admin-edit-notice__kicker {
  font-size: 0.6875rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-warning, #f59e0b) 80%, var(--color-text-muted));
}

.admin-edit-notice__title {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.25;
  font-weight: 800;
}

.admin-edit-notice__subtitle {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--color-text-muted);
}

.admin-edit-notice__link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-height: 2.375rem;
  padding: 0.625rem 0.875rem;
  border-radius: 999px;
  color: var(--color-on-accent, #fff);
  background: var(--color-accent, var(--cta, #2563eb));
  border: 1px solid color-mix(in srgb, var(--color-accent, #2563eb) 80%, #ffffff);
  font-size: 0.875rem;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--color-accent, #2563eb) 30%, transparent);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.admin-edit-notice__link:hover {
  text-decoration: none;
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--color-accent, #2563eb) 38%, transparent);
}

.admin-edit-notice__link:focus-visible {
  outline: 2px solid var(--focus-ring, var(--color-accent));
  outline-offset: 3px;
}

html[data-theme="light"] .admin-edit-notice {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--color-warning, #f59e0b) 16%, transparent), transparent 46%),
    rgba(255, 255, 255, 0.94);
  box-shadow:
    0 16px 36px rgba(15, 23, 42, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

@media (max-width: 640px) {
  .admin-edit-notice {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .admin-edit-notice__link {
    width: 100%;
  }
}

.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;
}

.sr-only:focus {
  position: fixed;
  z-index: 100000;
  top: 0.75rem;
  left: 0.75rem;
  width: auto;
  height: auto;
  padding: 0.75rem 1rem;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  border: 2px solid #60a5fa;
  border-radius: 0.75rem;
  color: #eaf4ff;
  background: #0c0c1f;
  box-shadow: 0 12px 30px rgba(2, 6, 23, 0.45);
}

html[data-theme="light"] .sr-only:focus {
  border-color: #1d4ed8;
  color: #0f172a;
  background: #ffffff;
}

/* ===== ICON/SIZE UTILITIES (home, header, SVGs, partials – modern view) ===== */
/* Ensures w-4 h-4 and related classes work from base layer so home and icons render correctly. */
.w-4 { width: 1rem; }
.h-4 { height: 1rem; }
.w-5 { width: 1.25rem; }
.h-5 { height: 1.25rem; }
.w-6 { width: 1.5rem; }
.h-6 { height: 1.5rem; }
.w-8 { width: 2rem; }
.h-8 { height: 2rem; }
.flex-shrink-0 { flex-shrink: 0; }

/* layout-core.css */
/**
 * Layout core: page background (main layout), container, section, stack, grid.
 * Mobile-first. Breakpoints: 560, 640, 768, 860, 980, 1024px.
 * Loaded for every view. Utilities live in layout-utilities.css.
 * Page background (starfield, neural-bg) lives here because main.php outputs it.
 */

/* ===== PAGE BACKGROUND (main layout: body pseudo-elements + .neural-bg) ===== */
/* Simplified for Firefox performance: no SVG filters, no SMIL. Static gradients only. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -4;
  /* Desktop: fewer star layers than before — less style/paint cost, same vibe */
  background:
    radial-gradient(1px 1px at 22% 28%, #ffffff 1px, transparent 1px),
    radial-gradient(1px 1px at 72% 72%, #079CFF 1px, transparent 1px),
    radial-gradient(1px 1px at 88% 38%, #00E6FF 1px, transparent 1px),
    radial-gradient(2px 2px at 12% 82%, rgba(255, 255, 255, 0.85) 1px, transparent 1px),
    var(--bg-900);
  background-size: 480px 480px, 420px 420px, 360px 360px, 520px 520px, auto;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  opacity: 0.38;
  pointer-events: none;
  background: radial-gradient(ellipse 85% 55% at 50% 0%, rgba(7, 156, 255, 0.07) 0%, transparent 52%);
}

.neural-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  opacity: 0.28;
  pointer-events: none;
  contain: layout style paint;
  background: radial-gradient(ellipse 100% 80% at 32% 22%, rgba(7, 156, 255, 0.09) 0%, transparent 48%);
}

.neural-bg::before {
  content: none;
}

/* Light theme: subtle page background (keep depth without dark starfield) */
html[data-theme="light"] body::before {
  background:
    radial-gradient(1px 1px at 22% 32%, rgba(37, 99, 235, 0.35) 1px, transparent 1px),
    radial-gradient(1px 1px at 78% 64%, rgba(8, 145, 178, 0.3) 1px, transparent 1px),
    radial-gradient(2px 2px at 12% 78%, rgba(15, 23, 42, 0.08) 1px, transparent 1px),
    var(--bg-900);
  background-size: 420px 420px, 380px 380px, 500px 500px, auto;
  opacity: 1;
}

html[data-theme="light"] body::after {
  opacity: 0.35;
  background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(37, 99, 235, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 80% 60%, rgba(8, 145, 178, 0.05) 0%, transparent 50%);
}

html[data-theme="light"] .neural-bg {
  opacity: 0.25;
  background: radial-gradient(ellipse 100% 80% at 30% 20%, rgba(37, 99, 235, 0.06) 0%, transparent 45%),
    radial-gradient(ellipse 80% 60% at 70% 80%, rgba(8, 145, 178, 0.04) 0%, transparent 45%);
}

html[data-theme="light"] .neural-bg::before {
  background: radial-gradient(circle at 20% 30%, rgba(37, 99, 235, 0.05) 0%, transparent 25%);
}

/* Mobile LCP: cheaper first paint — solid theme background only (tokens already set on html[data-theme]). */
@media (max-width: 1023px) {
  body::before {
    background: var(--bg-900);
    background-size: auto;
  }

  body::after {
    opacity: 0;
    background: none;
  }

  .neural-bg {
    opacity: 0;
    background: none;
  }

  .neural-bg::before {
    content: none;
  }

  html[data-theme="light"] body::before {
    background: var(--bg-900);
    background-size: auto;
    opacity: 1;
  }

  html[data-theme="light"] body::after {
    opacity: 0;
    background: none;
  }

  html[data-theme="light"] .neural-bg {
    opacity: 0;
    background: none;
  }

  html[data-theme="light"] .neural-bg::before {
    content: none;
  }
}

/* Animations removed for Firefox performance (no SVG filters/SMIL). Backgrounds are static gradients. */

/* ===== CONTAINER ===== */
.container {
  width: 100%;
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-5);
  padding-right: var(--space-5);
}

@media (min-width: 640px) {
  .container {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
}

/* Desktop .container padding in layout-core.desktop.css */

/* ===== SECTION ===== */
.section {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
  /* content-visibility:auto + intrinsic 200px caused large CLS when real section height applied (e.g. tools grid, marketing sections). */
}

.section--tight {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}

.section--loose {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}

/* Mobile .section padding in layout-core.mobile.css */

/* ===== SECTION LABEL (eyebrow above section headings) ===== */
.section-label {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-2);
}

/* ===== STACK (flex column with gap) ===== */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.stack--sm { gap: var(--space-2); }
.stack--md { gap: var(--space-4); }
.stack--lg { gap: var(--space-6); }
.stack--xl { gap: var(--space-8); }

.stack--center {
  align-items: center;
}

.stack--inline {
  flex-direction: row;
  flex-wrap: wrap;
}

/* ===== GRID ===== */
.grid {
  display: grid;
  gap: var(--space-4);
  width: 100%;
}

.grid--1 { grid-template-columns: 1fr; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--12 { grid-template-columns: repeat(12, 1fr); }

.grid--gap-sm { gap: var(--space-2); }
.grid--gap-md { gap: var(--space-4); }
.grid--gap-lg { gap: var(--space-6); }
.grid--gap-xl { gap: var(--space-8); }

/* Responsive grid: 1 col default, then 2 at sm, 4 at lg */
.grid--responsive {
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .grid--responsive-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .grid--responsive {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop grid in layout-core.desktop.css */

/* Full-width layout default */
.layout-full {
  width: 100%;
  min-height: 100%;
}

/* layout-utilities.css */
/**
 * Layout utilities + Tools & public views compatibility.
 * Used by partials, tools, SVGs. Load async on home; in bundle for other views.
 */

/* ===== LAYOUT UTILITIES (design system compatibility for partials and views) ===== */
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.flex-col { flex-direction: column; }
.flex-1 { flex: 1 1 0%; }
.min-w-0 { min-width: 0; }
.inline-flex { display: inline-flex; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }
/* Space between stacked children (margin-top on siblings except first) */
.space-y-2 > * + * { margin-top: var(--space-2); }
.space-y-3 > * + * { margin-top: var(--space-3); }
.space-y-4 > * + * { margin-top: var(--space-4); }
.space-y-6 > * + * { margin-top: var(--space-6); }
.space-y-8 > * + * { margin-top: var(--space-8); }
.relative { position: relative; }
.overflow-hidden { overflow: hidden; }
.w-full { width: 100%; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.mb-1 { margin-bottom: var(--space-1); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.pt-6 { padding-top: var(--space-6); }
.pt-4 { padding-top: var(--space-4); }
.ml-auto { margin-left: auto; }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.py-16 { padding-top: var(--space-16); padding-bottom: var(--space-16); }
.pb-4 { padding-bottom: var(--space-4); }
.pb-16 { padding-bottom: var(--space-16); }

/* Grid utilities (responsive via brand-design or below) */
.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)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 640px) {
  .sm\:flex-row { flex-direction: row; }
  .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\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Desktop .lg\:* in layout-utilities.desktop.css */
.select-none { user-select: none; }
.rounded-lg { border-radius: 8px; }
.rounded-r-xl { border-top-right-radius: 12px; border-bottom-right-radius: 12px; }
.rounded-l-xl { border-top-left-radius: 12px; border-bottom-left-radius: 12px; }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
.font-medium { font-weight: 500; }
.font-mono { font-family: var(--font-family-mono); }
.text-sm { font-size: var(--font-size-sm); }
.leading-none { line-height: 1; }
.h-12 { height: 3rem; }
.w-6 { width: 1.5rem; }
.rounded-full { border-radius: 9999px; }
/* WCAG 2.5.5 Target Size: minimum 44×44px touch target for controls (carousel dots, etc.) */
.touch-target-min { min-width: 44px; min-height: 44px; }
.pl-6 { padding-left: var(--space-6); }
.pr-8 { padding-right: var(--space-8); }
.transition-colors { transition-property: color, background-color, border-color; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.duration-300 { transition-duration: 300ms; }
.group:hover .group-hover\:bg-cta\/20 { background: rgba(37, 99, 235, 0.2); }
.group:hover .group-hover\:text-cta { color: var(--cta); }
/* Peer (sibling) state: when .peer is checked, style following siblings and their descendants */
.peer:checked ~ .peer-checked\:bg-cta { background: var(--cta); }
.peer:checked ~ .peer-checked\:border-cta { border-color: var(--cta); }
.peer:checked ~ .peer-checked\:opacity-100,
.peer:checked ~ * .peer-checked\:opacity-100 { opacity: 1; }
.peer:checked ~ .peer-checked\:text-cta { color: var(--cta); }
.bg-cta\/20 { background: rgba(37, 99, 235, 0.2); }
.bg-cta\/10 { background: rgba(37, 99, 235, 0.1); }
.from-cta\/20 { background: linear-gradient(to right, rgba(37, 99, 235, 0.2), transparent); }
.to-cta\/10 { background: linear-gradient(to left, rgba(37, 99, 235, 0.1), transparent); }
.from-line2\/10 { background-color: rgba(37, 99, 235, 0.06); }
.to-line2\/5 { background-color: rgba(37, 99, 235, 0.04); }
.bg-white\/10 { background: rgba(255, 255, 255, 0.1); }
.text-white\/85 { color: rgba(255, 255, 255, 0.85); }
.text-white\/80 { color: rgba(255, 255, 255, 0.8); }
.border-gray-300\/20 { border-color: rgba(209, 213, 219, 0.2); }
.hover\:bg-line2:hover { background: var(--line2); }
.hover\:from-cta\/10:hover { background: rgba(37, 99, 235, 0.1); }
.hover\:to-cta\/5:hover { background: rgba(37, 99, 235, 0.05); }
.hover\:bg-cta\/20:hover { background: rgba(37, 99, 235, 0.2); }
.hover\:bg-cta\/5:hover { background: rgba(37, 99, 235, 0.05); }
.hover\:border-cta\/50:hover { border-color: rgba(37, 99, 235, 0.5); }
.hover\:text-cta:hover { color: var(--cta); }
.text-\[11px\] { font-size: 11px; }
.bg-gradient-to-r { background-image: linear-gradient(to right, var(--gradient-stops, transparent)); }
.from-cta\/20.to-cta\/10 { background: linear-gradient(to right, rgba(37, 99, 235, 0.2), rgba(37, 99, 235, 0.1)); }
.from-line2\/10.to-line2\/5 { background: linear-gradient(to right, rgba(37, 99, 235, 0.06), rgba(37, 99, 235, 0.04)); }
.border-cta\/20 { border-color: rgba(37, 99, 235, 0.2); }
.bg-green-500\/10 { background: rgba(34, 197, 94, 0.1); }
.border-green-500\/20 { border-color: rgba(34, 197, 94, 0.2); }
.text-green-400 { color: #4ade80; }
/* Light: mint chip + green-400 fails AA (utility combo from CMS / partials) */
html[data-theme="light"] .bg-green-500\/10.text-green-400,
html[data-theme="light"] .bg-green-500\/10 .text-green-400,
html[data-theme="light"] .bg-green-500\/10 > span {
  color: #065f46 !important;
}
.text-red-500 { color: #ef4444; }
.text-red-600 { color: #dc2626; }
.hover\:text-red-600:hover { color: #dc2626; }
.hover\:text-amber-400:hover { color: #fbbf24; }
.hover\:text-red-400:hover { color: #f87171; }
.bg-red-500\/10 { background: rgba(239, 68, 68, 0.1); }
.hover\:bg-amber-400:hover { background: #fbbf24; }
.hover\:bg-red-400:hover { background: #f87171; }

/* ===== TOOLS & PUBLIC VIEWS COMPATIBILITY (utility classes used in tools, partials, SVGs) ===== */
.block { display: block; }
.inline { display: inline; }
.min-h-screen { min-height: 100vh; }
/* Hero templates 7/9: reserve space for CLS (arbitrary min-heights) */
.min-h-\[85vh\] { min-height: 85vh; }
.min-h-\[90vh\] { min-height: 90vh; }
.max-w-7xl { max-width: 80rem; margin-left: auto; margin-right: auto; }
.max-w-3xl { max-width: 48rem; margin-left: auto; margin-right: auto; }
.max-w-4xl { max-width: 56rem; margin-left: auto; margin-right: auto; }
.w-80 { width: 20rem; }
.h-80 { height: 20rem; }
.w-16 { width: 4rem; }
.h-16 { height: 4rem; }
.w-12 { width: 3rem; }
.h-12 { height: 3rem; }
.w-10 { width: 2.5rem; }
.h-10 { height: 2.5rem; }
.w-5 { width: 1.25rem; }
.h-5 { height: 1.25rem; }
.w-4 { width: 1rem; }
.h-4 { height: 1rem; }
.w-3 { width: 0.75rem; }
.h-3 { height: 0.75rem; }
.w-2 { width: 0.5rem; }
.h-2 { height: 0.5rem; }
.w-3\.5 { width: 0.875rem; }
.h-3\.5 { height: 0.875rem; }
.w-24 { width: 6rem; }
.h-24 { height: 6rem; }
.h-8 { height: 2rem; }
.h-48 { height: 12rem; }
/* Modal overlay utilities */
.fixed { position: fixed; }
.inset-0 { inset: 0; }
.bg-black\/50 { background-color: rgba(0, 0, 0, 0.5); }
.backdrop-blur-sm {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.absolute { position: absolute; }
.top-1\/2 { top: 50%; }
.-translate-y-1\/2 { transform: translateY(-50%); }
.translate-x-full { transform: translateX(100%); }
.-translate-x-full { transform: translateX(-100%); }
.transform { transform: translateZ(0); }
.-top-40 { top: -10rem; }
.-right-40 { right: -10rem; }
.-bottom-40 { bottom: -10rem; }
.-left-40 { left: -10rem; }
.right-12 { right: var(--space-6); }
.right-4 { right: var(--space-4); }
.z-20 { z-index: 20; }
.z-50 { z-index: 50; }
.-z-10 { z-index: -10; }
.flex-shrink-0 { flex-shrink: 0; }
.rounded-xl { border-radius: 12px; }
.rounded-2xl { border-radius: 16px; }
.rounded-3xl { border-radius: 24px; }
.blur-3xl { filter: blur(64px); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.pr-32 { padding-right: 8rem; }
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.py-24 { padding-top: 6rem; padding-bottom: 6rem; }
.py-12 { padding-top: var(--space-12); padding-bottom: var(--space-12); }
.pb-20 { padding-bottom: 5rem; }
.mr-1 { margin-right: var(--space-1); }
.mr-2 { margin-right: var(--space-2); }
.mr-3 { margin-right: var(--space-3); }
.-mr-8 { margin-right: -var(--space-8); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-12 { margin-bottom: var(--space-12); }
.mt-12 { margin-top: var(--space-12); }
.self-center { align-self: center; }
.gap-1\.5 { gap: 0.375rem; }
.lg\:gap-8 { gap: var(--space-8); }
.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.px-5 { padding-left: var(--space-5); padding-right: var(--space-5); }
.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.leading-relaxed { line-height: 1.625; }
.text-xs { font-size: var(--font-size-xs); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.font-semibold { font-weight: 600; }
.transition-all { transition-property: transform, opacity, box-shadow; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
.transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
.transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
.duration-500 { transition-duration: 500ms; }
.duration-700 { transition-duration: 700ms; }
.duration-1000 { transition-duration: 1000ms; }
.duration-200 { transition-duration: 200ms; }
.opacity-0 { opacity: 0; }
.group:hover .group-hover\:opacity-100 { opacity: 1; }
.group:hover .group-hover\:translate-x-full { transform: translateX(100%); }
.group:hover .group-hover\:translate-x-0\.5 { transform: translateX(0.125rem); }
.group:hover .group-hover\:translate-x-1 { transform: translateX(0.25rem); }
.group:hover .group-hover\:scale-110 { transform: scale(1.1); }
.group:hover .group-hover\:rotate-3 { transform: rotate(3deg); }
.group:hover .group-hover\:rotate-90 { transform: rotate(90deg); }
.group:hover .group-hover\:scale-105 { transform: scale(1.05); }
.group:hover .group-hover\:bg-cta\/20 { background: rgba(37, 99, 235, 0.2); }
.group:hover .group-hover\:text-white { color: #fff; }
.group:hover .group-hover\:text-red-400 { color: #f87171; }
.group:hover .group-hover\:text-blue-400 { color: #60a5fa; }
.group:hover .group-hover\:text-cyan-300 { color: #67e8f9; }
.hover\:opacity-70:hover { opacity: 0.7; }
.hover\:-translate-y-2:hover { transform: translateY(-0.5rem); }
.hover\:scale-105:hover { transform: scale(1.05); }
.hover\:translate-x-full:hover { transform: translateX(100%); }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
.hover\:shadow-2xl:hover { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
.shadow-cta\/10 { box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.1); }
.hover\:shadow-cta\/10:hover { box-shadow: 0 25px 50px -12px rgba(37, 99, 235, 0.1); }
.shadow-cta\/20 { box-shadow: 0 25px 50px -12px rgba(37, 99, 235, 0.2); }
.hover\:shadow-cta\/20:hover { box-shadow: 0 25px 50px -12px rgba(37, 99, 235, 0.2); }
.shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); }
.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--gradient-from, transparent), var(--gradient-via, transparent), var(--gradient-to, transparent)); }
/* Legacy tool page light gradient classes removed – tools use .tool-page and var(--bg-900) */
.from-cta\/5 { --gradient-from: rgba(37, 99, 235, 0.05); --gradient-stops: var(--gradient-from), var(--gradient-to, transparent); }
.to-purple-500\/5 { --gradient-to: rgba(168, 85, 247, 0.05); }
.bg-cta\/10 { background: rgba(37, 99, 235, 0.1); }
.bg-purple-500\/10 { background: rgba(168, 85, 247, 0.1); }
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }
.object-cover { object-fit: cover; }
.cursor-pointer { cursor: pointer; }
.cursor-crosshair { cursor: crosshair; }
.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.animate-spin { animation: spin 1s linear infinite; }
.resize-none { resize: none; }
.overflow-y-auto { overflow-y: auto; }
.disabled\:opacity-50:disabled { opacity: 0.5; }
.disabled\:cursor-not-allowed:disabled { cursor: not-allowed; }
/* Arbitrary height/min-height for tool textareas */
.h-\[150px\] { height: 150px; }
.h-\[200px\] { height: 200px; }
.h-\[300px\] { height: 300px; }
.h-\[400px\] { height: 400px; }
.h-\[600px\] { height: 600px; }
.min-h-\[80px\] { min-height: 80px; }
.min-h-\[100px\] { min-height: 100px; }
.min-h-\[200px\] { min-height: 200px; }
.min-h-\[300px\] { min-height: 300px; }
@keyframes pulse { 50% { opacity: 0.5; } }
@keyframes spin { to { transform: rotate(360deg); } }
.focus\:ring-2:focus { box-shadow: 0 0 0 2px var(--cta); }
.focus\:ring-cta:focus { box-shadow: 0 0 0 2px var(--cta); }
.focus\:outline-none:focus { outline: none; }
.focus\:border-cta\/50:focus { border-color: rgba(37, 99, 235, 0.5); }
.rounded { border-radius: 0.25rem; }
.text-white { color: #fff; }
.text-white\/85 { color: rgba(255, 255, 255, 0.85); }
.text-muted { color: var(--muted); }
.text-muted\/50 { color: var(--muted-50, rgba(148, 163, 184, 0.55)); }
.text-success { color: var(--color-success); }
.text-cta { color: var(--cta); }
.text-cta\/40 { color: rgba(37, 99, 235, 0.4); }
.text-line2 { color: var(--line2); }
.text-blue-400 { color: #60a5fa; }
.bg-transparent { background-color: transparent; }
.mt-0\.5 { margin-top: 0.125rem; }
.bg-blue-600 { background-color: #2563eb; }
.bg-gray-700 { background-color: #374151; }
.bg-gray-300 { background-color: #d1d5db; }
.bg-green-600 { background-color: #16a34a; }
.bg-red-600 { background-color: #dc2626; }
.bg-purple-600 { background-color: #9333ea; }
.bg-pink-500 { background-color: #ec4899; }
.bg-gray-600 { background-color: #4b5563; }
.hover\:bg-gray-700:hover { background-color: #374151; }
.border-2 { border-width: 2px; }
.border-b-2 { border-bottom-width: 2px; }
.border-white { border-color: #fff; }
.border-line2 { border-color: var(--line2); }
.border-cta { border-color: var(--cta); }
.mx-auto { margin-left: auto; margin-right: auto; }
.min-h-36 { min-height: 9rem; }
.top-4 { top: var(--space-4); }
.top-8 { top: var(--space-8); }
.bottom-2 { bottom: var(--space-2); }
.right-2 { right: var(--space-2); }
.right-4 { right: var(--space-4); }
.sticky { position: sticky; }
@media (min-width: 640px) {
  .sm\:inline { display: inline !important; }
  .sm\:min-h-\[90vh\] { min-height: 90vh; }
  .sm\:min-h-\[95vh\] { min-height: 95vh; }
  .sm\:px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
  .sm\:py-24 { padding-top: 6rem; padding-bottom: 6rem; }
  .sm\:py-32 { padding-top: 8rem; padding-bottom: 8rem; }
  .sm\:text-xl { font-size: var(--font-size-xl); }
  .sm\:w-3\.5 { width: 0.875rem; }
  .sm\:h-3\.5 { height: 0.875rem; }
}
/* Desktop .lg\:px-8, .lg\:p-12 in layout-utilities.desktop.css */

/* Tools-only utilities (dark: gradients, etc.) moved to views/tools-utilities.css */

/* components.css */
/**
 * Components: buttons, links, forms, cards, alerts.
 * Semantic class names only. Uses design tokens from base.css.
 */

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  line-height: 1.25;
  text-decoration: none;
  border: none;
  border-radius: 18px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  min-height: 44px;
}

.btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition-duration: 0.01ms;
  }
}

.btn-primary,
.btn-cta {
  background: var(--color-accent);
  color: var(--color-on-accent, #fff);
  box-shadow: 0 20px 60px rgba(0, 230, 255, 0.25);
}

.btn-primary:hover,
.btn-cta:hover {
  background: var(--cta-hover);
  color: var(--color-on-accent, #fff);
  transform: translateY(-2px);
  box-shadow: 0 25px 80px rgba(0, 230, 255, 0.35);
}

/* Secondary: soft accent surface + theme-appropriate foreground (WCAG on light) */
.btn-secondary {
  background: var(--color-accent-soft-bg);
  color: var(--color-on-accent-soft);
  border: 1px solid var(--color-accent-soft-border);
}

.btn-secondary:hover {
  background: var(--color-accent-soft-bg-hover);
  color: var(--color-on-accent-soft);
  border-color: var(--color-accent-soft-border);
}

.btn-ghost {
  background: transparent;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-strong);
}

.btn-ghost:hover {
  background: var(--color-border-strong);
}

/* Bordered neutral action (toolbar filters, secondary actions) */
.btn-outline {
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border-strong);
}

.btn-outline:hover {
  background: rgba(var(--cta-rgb), 0.08);
  color: var(--color-text-primary);
  border-color: rgba(var(--cta-rgb), 0.35);
}

.btn-sm {
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1.25;
  min-height: 36px;
  border-radius: 12px;
}

.btn-disabled,
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.btn-disabled:hover,
.btn:disabled:hover {
  transform: none;
}

/* Addon / service "Learn More" button (addons partial, services-addons-grid, services index) */
.learn-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--space-2) var(--space-4);
  margin-top: auto; /* push to bottom when inside flex column (addon cards) */
  font-family: var(--font-family-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1.25;
  color: var(--color-accent);
  background: rgba(var(--cta-rgb), 0.1);
  border: 1px solid var(--color-border-strong);
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.2s ease;
  min-height: 44px;
}

.learn-more-btn:hover {
  color: var(--cta-hover);
  background: rgba(var(--cta-rgb), 0.18);
  border-color: var(--color-accent);
  transform: translateY(-1px);
}

.learn-more-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.learn-more-btn:active {
  transform: translateY(0);
}

/* ===== LINKS ===== */
a {
  color: var(--color-accent);
  text-decoration: none;
}

a:hover {
  color: var(--cta-hover);
}

a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.link-cta {
  color: var(--color-accent);
  font-weight: var(--font-weight-semibold);
}

.link-cta:hover {
  color: var(--cta-hover);
}

.link-muted {
  color: var(--color-text-muted);
}

.link-muted:hover {
  color: var(--color-text-primary);
}

/* ===== FORMS ===== */
.label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.input,
.select,
textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--space-2);
  transition: none;
}

.input::placeholder,
textarea::placeholder {
  color: var(--color-text-muted);
}

.input:focus,
.select:focus,
textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(7, 156, 255, 0.2);
}

.input-error {
  border-color: var(--color-error);
}

.input-error:focus {
  box-shadow: 0 0 0 3px rgba(255, 68, 68, 0.2);
}

.input-success {
  border-color: var(--color-success);
}

.select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23EAF4FF' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  padding-right: 2.5rem;
}

/* ===== CARDS / PANELS ===== */
.card,
.panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r);
  padding: var(--space-6);
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 60px rgba(0, 230, 255, 0.14);
}

.card--elevated,
.panel--elevated {
  box-shadow: 0 25px 80px rgba(0, 230, 255, 0.2);
}

.glass {
  background: var(--glass);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line2);
  border-radius: var(--r);
  box-shadow: 0 20px 60px rgba(0, 230, 255, 0.14);
}

/* ===== ALERTS / NOTICES ===== */
.alert {
  padding: var(--space-4);
  border-radius: var(--space-2);
  border: 1px solid;
}

.alert--success {
  background: rgba(0, 255, 136, 0.1);
  border-color: var(--color-success);
  color: var(--color-success);
}

.alert--warning {
  background: rgba(255, 170, 0, 0.1);
  border-color: var(--color-warning);
  color: var(--color-warning);
}

.alert--error {
  background: rgba(255, 68, 68, 0.1);
  border-color: var(--color-error);
  color: var(--color-error);
}

.alert--info {
  background: rgba(7, 156, 255, 0.1);
  border-color: var(--color-accent);
  color: var(--color-text-primary);
}

/* ===== UTILITY (semantic text/background helpers for migration) ===== */
.text-fg { color: var(--fg); }
.text-muted { color: var(--muted); }
.text-cta { color: var(--cta); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-error { color: var(--color-error); }

.bg-glass { background: var(--glass); }
.bg-bg-900 { background: var(--bg-900); }
.bg-cta { background: var(--cta); }
.border-line1 { border-color: var(--line1); }
.border-line2 { border-color: var(--line2); }
.border-cta { border-color: var(--cta); }

.bold-home-icon {
  width: 24px;
  height: 24px;
  fill: currentColor;
  color: var(--fg);
}

.grad {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Cookie policy page: readable body copy + clear links (admin HTML inside .legal-content) */
.cookie-policy-content .legal-content {
  font-size: var(--font-size-base);
  line-height: 1.65;
  color: var(--color-text-muted);
}

.cookie-policy-content .legal-content p {
  margin-bottom: var(--space-4);
}

.cookie-policy-content .legal-content p:last-child {
  margin-bottom: 0;
}

.cookie-policy-content .legal-content h1,
.cookie-policy-content .legal-content h2,
.cookie-policy-content .legal-content h3,
.cookie-policy-content .legal-content h4 {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}

.cookie-policy-content .legal-content h1:first-child,
.cookie-policy-content .legal-content h2:first-child,
.cookie-policy-content .legal-content h3:first-child {
  margin-top: 0;
}

.cookie-policy-content .legal-content ul,
.cookie-policy-content .legal-content ol {
  padding-left: var(--space-6);
  margin-bottom: var(--space-4);
  color: var(--color-text-muted);
}

.cookie-policy-content .legal-content li {
  margin-bottom: var(--space-2);
}

/* In-content links: CTA colour + underline (AA on light and dark surfaces) */
.cookie-policy-content a {
  color: var(--cta) !important;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  font-weight: 600;
}

.cookie-policy-content a:hover {
  color: var(--cta-hover) !important;
}


/* ===== ICON SIZES (for icon_svg; use these or compatibility w-/h- in layout.css) ===== */
.icon-size-sm { width: 1rem; height: 1rem; }
.icon-size-md { width: 1.25rem; height: 1.25rem; }
.icon-size-lg { width: 1.5rem; height: 1.5rem; }
.icon-size-xl { width: 4rem; height: 4rem; }
.icon-size-2xl { width: 6rem; height: 6rem; }
.icon-muted { color: var(--muted); fill: currentColor; }
.icon-cta { color: var(--cta); fill: currentColor; }
.icon-success { color: var(--color-success); fill: currentColor; }
.icon-center { margin-left: auto; margin-right: auto; }
.icon-inline { display: inline; vertical-align: middle; }
.icon-inline + span { margin-left: var(--space-2); }

/* brand-design.css */
/**
 * Brand design: global breakpoints for typography, grid columns, spacing, overflow.
 * Mobile-first. Breakpoints: 560, 640, 768, 860, 980, 1024px.
 * Theme-ready (light now; dark via :root variables).
 */

/* ===== TYPOGRAPHY SCALING BY BREAKPOINT ===== */
/* Base sizes set in base.css; here we only adjust where breakpoints matter */

@media (min-width: 640px) {
  body {
    font-size: var(--font-size-base);
  }
}

@media (min-width: 768px) {
  .section-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
  }
  .section-subtitle {
    font-size: var(--font-size-lg);
  }
}

/* Desktop .section-title in brand-design.desktop.css */

/* ===== GRID COLUMN OVERRIDES BY BREAKPOINT ===== */
/* Use with .grid for responsive column counts */
.grid-cols-1-md-2 {
  grid-template-columns: 1fr;
}

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

.grid-cols-1-lg-4 {
  grid-template-columns: 1fr;
}

/* Desktop .grid-cols-1-lg-4 in brand-design.desktop.css */

.grid-cols-1-lg-12 {
  grid-template-columns: 1fr;
}
/* Desktop .grid-cols-1-lg-12 in brand-design.desktop.css */

/* ===== SPACING BY BREAKPOINT ===== */
.padding-inline-responsive {
  padding-left: var(--space-5);
  padding-right: var(--space-5);
}

@media (min-width: 640px) {
  .padding-inline-responsive {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
}

/* Desktop .padding-inline-responsive in brand-design.desktop.css */

/* ===== OVERFLOW ===== */
.overflow-x-auto {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

/* ===== TOUCH-FRIENDLY TARGETS ===== */
@media (pointer: coarse) {
  .btn,
  .nav-link,
  a[role="button"] {
    min-height: 44px;
    min-width: 44px;
  }
}

/* ===== THEME READY (dark now; light can override later) ===== */
[data-theme="light"] {
  --color-background: #f8fafc;
  --color-surface: rgba(0, 0, 0, 0.03);
  --color-text-primary: #0f172a;
  --color-text-muted: #475569;
  --color-border: rgba(0, 0, 0, 0.12);
  --color-border-strong: rgba(0, 0, 0, 0.18);
}

/* app.css */
/* ===== APP-SPECIFIC CSS (design system base is in base.css, layout-core.css, components.css) ===== */
/* This file: app utilities (glass, btn, section-title, error pages, headings). No page background – that lives in layout-core.css (main layout). */
/* Variables and reset in base.css; .container and page background in layout-core.css; buttons/links in components.css. */

/* ===== UTILITY CLASSES ===== */
.bold-home-icon {
  width: 24px;
  height: 24px;
  fill: currentColor;
  color: var(--fg);
}

/* .container is in layout.css */

.hidden {
  display: none !important;
}

.glass {
  background: var(--glass);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line2);
  border-radius: var(--r);
  box-shadow: var(--glass-shadow, 0 20px 60px rgba(0, 230, 255, 0.14));
}

/* Utility classes using design tokens */
.text-fg {
  color: var(--fg);
}

.text-muted {
  color: var(--muted);
}

.text-cta {
  color: var(--cta);
}

/* Links distinguishable without relying on color (WCAG) */
a.text-cta {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
a.text-cta:hover {
  text-decoration: underline;
}

.text-success {
  color: var(--success);
}

.text-warning {
  color: var(--warning);
}

.text-error {
  color: var(--error);
}

.bg-glass {
  background: var(--glass);
}

.bg-bg-900 {
  background: var(--bg-900);
}

.bg-cta {
  background: var(--cta);
}

.bg-success {
  background: var(--success);
}

.bg-warning {
  background: var(--warning);
}

.bg-error {
  background: var(--error);
}

.border-line1 {
  border-color: var(--line1);
}

.border-line2 {
  border-color: var(--line2);
}

.border-cta {
  border-color: var(--cta);
}

.border-success {
  border-color: var(--success);
}

.border-warning {
  border-color: var(--warning);
}

.border-error {
  border-color: var(--error);
}

/* CTA contrast on dark backgrounds (WCAG AA) */
.bg-bg-900 .text-cta,
.bg-bg-800 .text-cta {
  color: var(--cta-on-dark);
}
.bg-bg-900 .border-cta,
.bg-bg-800 .border-cta {
  border-color: var(--cta-on-dark);
}
.bg-bg-900 a:not([class*="text-"]),
.bg-bg-800 a:not([class*="text-"]) {
  color: var(--cta-on-dark);
}

.hover\:text-fg:hover {
  color: var(--fg);
}

.hover\:text-cta:hover {
  color: var(--cta);
}

.hover\:bg-line1:hover {
  background: var(--line1);
}

.hover\:border-cta:hover {
  border-color: var(--cta);
}

.hover\:shadow-lg:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.hover\:shadow-cta\/20:hover {
  box-shadow: 0 20px 60px rgba(7, 156, 255, 0.2);
}

/* .btn, .btn-cta, .btn-ghost: canonical in main/components.css */

.btn-contact {
  background: #6B46C1 !important;
  color: white !important;
}

.btn-contact:hover {
  background: #5B21B6 !important;
  color: white !important;
}

/* Scrollbar Hide Utility */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.grad {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--badge-bg);
  color: var(--badge-fg);
  border: 1px solid var(--badge-border);
  font-size: 0.8rem;
}

.neon {
  outline: 2px solid var(--cta);
  box-shadow: 0 0 0 2px rgba(7, 156, 255, 0.12), 0 30px 90px rgba(0, 230, 255, 0.28);
}

/* .section is in layout.css */

.stat {
  border: 1px solid var(--line1);
  border-radius: 16px;
  padding: 14px 16px;
  background: var(--glass);
  text-align: center;
}

.muted {
  color: var(--muted);
}

/* ===== SECTION HEADERS (Wireframe Base) ===== */
.section-header {
  text-align: center;
  margin-bottom: 48px;
}

.section-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.section-subtitle {
  color: var(--muted);
  max-width: 600px;
  margin: 0 auto;
}

/* Service view hero: only h1 (title) and h2 (subtitle). Subtitle classes: .default-hero__subtitle (default template), .it-services-hero__subtitle (it-services). */

/* Section heading as p (service view: one h1, one h2; rest section titles are p with BEM __heading + this class). BEM __heading supplies font-size/weight. */
.section-heading-p {
  display: block;
  margin: 0 0 1rem;
}

/* .sr-only is in base.css */


/* ===== RESPONSIVE DESIGN (Wireframe Base) ===== */
/* Mobile-only .btn full-width moved to app.mobile.css (media="(max-width: 1023px)"). */

/* SVGs follow currentColor so theme + parent text color apply; dark-only hard white avoids light-theme contrast breaks */
html[data-theme="dark"] .text-white svg,
html[data-theme="dark"] .text-white svg path,
html[data-theme="dark"] .text-white svg use,
html[data-theme="dark"] svg.text-white,
html[data-theme="dark"] svg.text-white path,
html[data-theme="dark"] svg.text-white use,
html[data-theme="dark"] .icon-svg.text-white,
html[data-theme="dark"] .icon-svg.text-white svg,
html[data-theme="dark"] .icon-svg.text-white svg path,
html[data-theme="dark"] .icon-svg.text-white svg use {
  fill: #ffffff !important;
  color: #ffffff !important;
}

html[data-theme="light"] .text-white svg,
html[data-theme="light"] .text-white svg path,
html[data-theme="light"] .text-white svg use,
html[data-theme="light"] svg.text-white,
html[data-theme="light"] svg.text-white path,
html[data-theme="light"] svg.text-white use,
html[data-theme="light"] .icon-svg.text-white,
html[data-theme="light"] .icon-svg.text-white svg,
html[data-theme="light"] .icon-svg.text-white svg path,
html[data-theme="light"] .icon-svg.text-white svg use {
  fill: currentColor !important;
  color: currentColor !important;
}

/* ===== SEO-FRIENDLY HEADING CLASSES ===== */
/* Use real H1/H2/H3 with section-title and subsection-title for semantic structure and SEO. */
.heading-1 {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1.5rem;
}

@media (min-width: 640px) {
  .heading-1 {
    font-size: 3.75rem;
  }
}
/* Desktop .heading-1 4.5rem in app.desktop.css */

.heading-2 {
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem;
}

@media (min-width: 640px) {
  .heading-2 {
    font-size: 2.25rem;
  }
}
/* Desktop heading overrides in app.desktop.css if needed */

.heading-3 {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 1rem;
}

/* Semantic subsection heading (use with <h3 class="subsection-title">) */
.subsection-title {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 1rem;
}

.heading-4 {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 0.75rem;
}

/* Select dropdown: follow active theme (html data-theme from BoldTheme) */
html[data-theme="dark"] select {
  color-scheme: dark;
}

html[data-theme="light"] select {
  color-scheme: light;
}

select option {
  background-color: var(--color-background) !important;
  color: var(--color-text-primary) !important;
  padding: 0.5rem 0.75rem;
}

select:focus option {
  background-color: var(--color-surface-deep) !important;
  color: var(--color-text-primary) !important;
}

select option:hover,
select option:focus {
  background-color: color-mix(in srgb, var(--color-accent) 18%, var(--color-background)) !important;
  color: var(--color-text-primary) !important;
}

select option:checked {
  background-color: color-mix(in srgb, var(--color-accent) 28%, var(--color-background)) !important;
  color: var(--cta) !important;
}

/* header.css */
/* ===== HEADER PARTIAL ===== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(12, 12, 31, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
}

html[data-theme="light"] .site-header {
  background: rgba(248, 250, 252, 0.92);
}

.header-top-bar {
  padding: var(--space-2) 0;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.header-top-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.header-top-bar-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.header-top-bar-cta {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent);
  text-decoration: none;
  padding: var(--space-1) var(--space-3);
  border-radius: 8px;
  border: 1px solid var(--color-border);
  transition: none;
}

.header-top-bar-cta:hover {
  color: var(--cta-hover);
  border-color: var(--color-accent);
  background: rgba(var(--cta-rgb), 0.08);
}

.header-top-bar-cta:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.header-main {
  flex-shrink: 0;
}

/* CLS: fixed height so nav/font load cannot change header bar size */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 64px;
  height: 64px;
  padding-top: 0;
  padding-bottom: 0;
  box-sizing: border-box;
}

.logo,
.logo-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--color-text-primary);
  flex-shrink: 0;
}

.logo:hover,
.logo-link:hover {
  color: var(--color-text-primary);
  text-decoration: none;
}

.logo-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--color-surface);
}

.logo-icon .logo-img,
.logo-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.logo-icon svg {
  width: 24px;
  height: 24px;
  fill: var(--color-accent);
}

.logo-text {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

/* Mobile header in header.mobile.css (media="(max-width: 1023px)"). */

/* footer.css */
/* Footer Partial – design tokens only. Multi-column: Product, Solutions, Resources, Company. */

.site-footer,
.footer {
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  backdrop-filter: blur(10px);
  padding: var(--space-12) 0 var(--space-6);
  margin-top: var(--space-12);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
  min-height: 14rem;
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop .footer-grid in footer.desktop.css */

.footer-section h2,
.footer-section h4 {
  color: var(--color-text-primary);
  font-weight: 600;
  margin-bottom: var(--space-4);
  font-size: var(--font-size-base);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-links li {
  margin-bottom: var(--space-2);
}

.footer-links a,
.footer-link {
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: var(--font-size-sm);
  transition: color 0.2s ease;
}

.footer-links a:hover,
.footer-link:hover,
.footer-links a:focus,
.footer-link:focus {
  color: var(--color-accent);
}

.footer-link:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.footer-social {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.social-link {
  width: 40px;
  height: 40px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.social-link:hover,
.social-link:focus {
  color: var(--color-accent);
  border-color: var(--color-border-strong);
  transform: translateY(-2px);
}

.social-link:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.social-link-icon {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.footer-bottom {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.footer-copyright {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* Mobile footer spacing in footer.mobile.css */

/* page-loading.css */
/* ===== PAGE LOADING PARTIAL ===== */
/* Semantic: page-loading, page-loading-content, page-loading-logo, page-loading-name, page-loading-tagline, page-loading-spinner */

.page-loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4, 16px);
  text-align: center;
  padding: var(--space-8, 32px);
}

.page-loading-logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.page-loading-logo-placeholder {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cta-on-dark, #93c5fd);
}

.page-loading-icon {
  width: 40px;
  height: 40px;
}

.page-loading-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--fg);
  margin: 0;
}

.page-loading-tagline {
  font-size: 0.875rem;
  color: var(--muted);
  margin: 0;
  max-width: 20rem;
}

.page-loading-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--line2);
  border-top-color: var(--cta-on-dark, #93c5fd);
  border-radius: 50%;
  animation: page-loading-spin 0.8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .page-loading-spinner {
    animation: none;
    border-top-color: var(--cta-on-dark, #93c5fd);
    opacity: 0.8;
  }
}

@keyframes page-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

/* privacy.css */
/* Privacy View Specific Styles */
/* Styles specific to the privacy page. Content uses .privacy-body wrapper. */

.privacy-content {
    /* Legacy/other use */
}

/* Scoped content block (prose + privacy-body) */
.privacy-body {
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--color-text-muted);
}

.privacy-body p {
    margin-bottom: var(--space-4);
}

.privacy-body p:last-child {
    margin-bottom: 0;
}

/* Heading-like paragraphs (h1–h4 replaced by p with semantic classes) */
.privacy-body p.page-topic {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-top: var(--space-6);
    margin-bottom: var(--space-4);
    line-height: var(--line-height-snug);
}

.privacy-body p.page-topic:first-child {
    margin-top: 0;
}

.privacy-body p.section-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-top: var(--space-6);
    margin-bottom: var(--space-4);
    line-height: var(--line-height-snug);
}

.privacy-body p.section-title:first-child {
    margin-top: 0;
}

.privacy-body p.subsection-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-top: var(--space-4);
    margin-bottom: var(--space-3);
    line-height: 1.35;
}

.privacy-body p.subsubsection-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-top: var(--space-4);
    margin-bottom: var(--space-2);
    line-height: 1.4;
}

/* Lists: indent and spacing */
.privacy-body ul,
.privacy-body ol {
    padding-left: var(--space-6);
    margin-bottom: var(--space-4);
    list-style-position: outside;
}

.privacy-body ul {
    list-style-type: disc;
}

.privacy-body ol {
    list-style-type: decimal;
}

.privacy-body li {
    margin-bottom: var(--space-2);
    line-height: 1.5;
}

.privacy-body li:last-child {
    margin-bottom: 0;
}

/* Body links: --color-primary (#001C82) and the inherited #2563eb both fall
   below the 4.5:1 WCAG AA floor on the dark backdrop (1.37:1 and 3.77:1).
   --cta-on-dark is what the theme already uses for links on dark surfaces
   and measures 10.88:1, with --cta kept for the light theme. */
.privacy-body a {
    color: var(--cta, #2563eb);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.privacy-body a:hover,
.privacy-body a:focus-visible {
    text-decoration-thickness: 2px;
}

html[data-theme="dark"] .privacy-body a {
    color: var(--cta-on-dark, #93c5fd);
}

/* Legal page hero: py-24 sm:py-32 gives it 128px of bottom padding, which
   then stacks with the content section (48px) and the card itself (48px),
   leaving 224px of empty space between the last updated line and the first
   heading. Keep the generous top spacing under the fixed nav and trim the
   bottom so the document starts where the eye expects it. */
.legal-hero {
    padding-bottom: 2.5rem;
}

@media (min-width: 640px) {
    .legal-hero {
        padding-bottom: 3rem;
    }
}

/* app.mobile.css */
@media (max-width: 1023px){
/* app.mobile.css: mobile-only (max-width: 1023px). Load with media="(max-width: 1023px)". */
.btn {
  width: 100%;
  justify-content: center;
}

}
/* app.desktop.css */
@media (min-width: 1024px){
/* app.desktop.css: desktop-only (min-width: 1024px). Load with media="(min-width: 1024px)". */
.heading-1 {
  font-size: 4.5rem;
}

}
/* layout-core.mobile.css */
@media (max-width: 1023px){
/* layout-core.mobile.css: mobile-only (max-width: 1023px). Load with media="(max-width: 1023px)". */
.container {
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

@media (max-width: 768px) {
  .section {
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
  }
  .section--loose {
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
  }
}

@media (max-width: 480px) {
  .section {
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
  }
}

}
/* layout-core.desktop.css */
@media (min-width: 1024px){
/* layout-core.desktop.css: desktop-only (min-width: 1024px). Load with media="(min-width: 1024px)". */
.container {
  padding-left: var(--space-8);
  padding-right: var(--space-8);
}

.grid--responsive {
  grid-template-columns: repeat(4, 1fr);
}
.grid--responsive-2 {
  grid-template-columns: repeat(2, 1fr);
}

}
/* layout-utilities.desktop.css */
@media (min-width: 1024px){
/* layout-utilities.desktop.css: desktop-only (min-width: 1024px). Load with media="(min-width: 1024px)". */
.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-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.lg\:col-span-2 {
  grid-column: span 2 / span 2;
}
.lg\:hidden {
  display: none !important;
}
.lg\:px-8 {
  padding-left: var(--space-8);
  padding-right: var(--space-8);
}
.lg\:p-12 {
  padding: var(--space-12);
}
.lg\:max-w-md {
  max-width: 28rem;
}

}
/* brand-design.desktop.css */
@media (min-width: 1024px){
/* brand-design.desktop.css: desktop-only (min-width: 1024px). Load with media="(min-width: 1024px)". */
.section-title {
  font-size: 2.5rem;
}

.grid-cols-1-lg-4 {
  grid-template-columns: repeat(4, 1fr);
}

.grid-cols-1-lg-12 {
  grid-template-columns: repeat(12, 1fr);
}

.padding-inline-responsive {
  padding-left: var(--space-8);
  padding-right: var(--space-8);
}

}
/* header.mobile.css */
@media (max-width: 1023px){
/* header.mobile.css: mobile-only (max-width: 1023px). Load with media="(max-width: 1023px)". */
@media (max-width: 1023px) {
  .header-inner {
    min-height: 56px;
    height: 56px;
  }

  .logo-text {
    font-size: var(--font-size-lg);
  }

  .logo-icon {
    width: 36px;
    height: 36px;
  }
}

@media (max-width: 480px) {
  .logo-text {
    font-size: var(--font-size-base);
  }
}

}
/* theme.css */
/* Stitch Bold Modern — base theme CSS */
/* Active theme CSS is served from /assets/theme-active/css/ when theme is published */

:root {
  --theme-primary: #1a56db;
  --theme-secondary: #1e3a8a;
  --theme-accent: #7c3aed;
}