/* Customer Connect: colors from customerconnect.io/sv. */
:root {
  /* Shared CC feature tones for navigation and product illustrations. */
  --color-feature-prospects-bg: #ffe6b0;
  --color-feature-prospects-fg: #534019;
  --color-feature-followups-bg: #ffdbbd;
  --color-feature-followups-fg: #662f00;
  --color-feature-pipeline-bg: #bfbefc;
  --color-feature-pipeline-fg: #2e036a;
  --color-feature-deals-bg: #cbffae;
  --color-feature-deals-fg: #07540a;
  --color-feature-customers-bg: #8de9ff;
  --color-feature-customers-fg: #002463;
  --color-feature-contacts-bg: #9cfbef;
  --color-feature-contacts-fg: #005649;

  --type-illustration-heading-size: 24px;
  /* CC light theme: app/src/styles/colors.css and globals.css. */
  --color-illustration-background: #f7f7fc;
  --color-illustration-panel: #ffffff;
  --color-illustration-selection: #eff0f6;
  --color-illustration-border: #d9dbe9;
  --color-illustration-text: #0c0c1a;
  --color-illustration-secondary: #6e7191;
  --color-illustration-success: #18bb0c;
  --color-illustration-icon-default: #14142a;
  --color-illustration-icon-prospects: var(--color-feature-prospects-fg);
  --color-illustration-icon-followups: var(--color-feature-followups-fg);
  --color-illustration-icon-pipeline: var(--color-feature-pipeline-fg);
  --color-illustration-icon-deals: var(--color-feature-deals-fg);
  --color-illustration-icon-customers: var(--color-feature-customers-fg);
  --color-illustration-icon-contacts: var(--color-feature-contacts-fg);
  --color-illustration-muted: #a0a3bd;
  --color-illustration-prospects: var(--color-feature-prospects-bg);
  --color-illustration-followups: var(--color-feature-followups-bg);
  --color-illustration-pipeline: var(--color-feature-pipeline-bg);
  --color-illustration-deals: var(--color-feature-deals-bg);
  --color-illustration-customers: var(--color-feature-customers-bg);
  --color-illustration-contacts: var(--color-feature-contacts-bg);
  --palette-steel: #6f7aa5;
  --palette-ice: #f2edff;
  --palette-navy: #262338;
  --palette-midnight: #0c0c1a;
  --palette-slate: #e7e3ef;
  --palette-green: #16845c;
  --palette-red: #c93545;
  --palette-blue: #610bef;
  --palette-amber: #946600;
  --palette-white: #ffffff;
  --color-background: #ffffff;
  --color-ambient-glow: rgb(97 11 239 / 10%);
  --ambient-bleed: clamp(var(--space-6), 5vw, var(--space-16));
  --color-header-background: var(--color-background);
  --color-illustration-frame-border: var(--color-illustration-border);
  --color-illustration-sidebar: var(--color-illustration-panel);
  --color-illustration-nav-text: var(--color-illustration-text);
  --color-illustration-nav-active: var(--color-illustration-text);
  --color-illustration-neutral-badge: var(--color-illustration-selection);
  --color-illustration-column-header: var(--color-illustration-selection);
  --color-illustration-toolbar: var(--color-illustration-selection);
  --color-illustration-sidebar-border: var(--color-illustration-border);
  --color-illustration-card: var(--color-illustration-panel);
  --color-menu-shadow: rgb(12 12 26 / 18%);
  --menu-shadow: 0 var(--space-6) var(--space-12) calc(-1 * var(--space-3)) var(--color-menu-shadow);
  --color-footer-background: var(--color-surface);
  --color-footer-text: var(--color-text);
  --color-footer-muted: var(--color-text-muted);
  --color-footer-border: var(--color-border);
  --color-surface: #faf9fd;
  --color-surface-raised: #ffffff;
  --color-surface-hover: #f2edff;
  --color-text: #0c0c1a;
  --color-text-muted: #4e4b66;
  --color-border: #e7e3ef;
  --color-accent: #610bef;
  --color-focus: #610bef;
  --color-selection: #e8ddff;
  --color-success: var(--palette-green);
  --color-danger: var(--palette-red);
  --color-warning: var(--palette-amber);
  --color-rating-star: #fbbc04;
  --color-button-primary-bg: #610bef;
  --color-button-primary-text: #ffffff;
  --color-button-primary-hover: #5008c9;
  --color-button-primary-active: #4006a3;
  --color-button-outline: var(--color-text);
  --motion-control: 160ms;
  --motion-indicator: 220ms;
  --motion-entrance: 320ms;
  --motion-stagger: 0ms;
  --motion-distance: 12px;
  --motion-lift: -1px;
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-11: 44px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-18: 72px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --hero-menu-gap: var(--space-6);
  --hero-padding-block: clamp(var(--space-10), 5vw, var(--space-18));
  --customer-logo-gap: clamp(var(--space-5), 3vw, var(--space-10));
  --editorial-column-gap: var(--block-column-gap);
  --panel-padding: clamp(var(--space-6), 5vw, var(--space-16));
  --catalog-padding-block: var(--hero-padding-block);
  --header-height: 68px;
  --top-nav-flag-width: 20px;
  --top-nav-flag-height: 15px;
  --color-header-shadow: rgb(12 12 26 / 8%);
  --color-image-shadow: rgb(12 12 26 / 10%);
  --image-shadow: 0 var(--space-3) var(--space-8) calc(-1 * var(--space-2)) var(--color-image-shadow);
  --header-shadow: 0 var(--space-1) var(--space-3) calc(-1 * var(--space-1)) var(--color-header-shadow);
  --page-gutter: clamp(var(--space-6), 4vw, var(--space-12));
  --page-max-width: 1280px;
  --content-gap: var(--block-gap);
  --logo-icon-size: 36px;
  --logo-font-size: var(--type-subheading-size);
  --logo-gap: var(--space-2);
  --nav-font-size: var(--type-small-size);
  --nav-line-height: 20px;
  --nav-gap: var(--space-1);
  --nav-logo-gap: var(--space-6);
  --nav-chevron-gap: var(--space-2);
  --nav-item-font-size: var(--type-body-size);
  --nav-item-line-height: 22px;
  --nav-caption-font-size: var(--type-label-size);
  --nav-caption-line-height: 18px;
  --nav-icon-size: 36px;
  --nav-radius: 12px;
  --nav-panel-radius: 24px;
  --nav-panel-padding: var(--space-8);
  --focus-width: 2px;
  --focus-offset: 4px;
  --touch-target: 44px;
  --button-height: var(--touch-target);
  --button-padding-inline: var(--space-4);
  --button-border-width: 1px;
  --button-radius: var(--nav-radius);
  --button-font-size: var(--nav-font-size);
  --button-line-height: var(--nav-line-height);
  --block-gap: clamp(var(--space-12), 7vw, var(--space-24));
  --block-column-gap: clamp(var(--space-8), 5vw, var(--space-16));
  --section-intro-gap: clamp(var(--space-8), 4vw, var(--space-12));
  --card-gap: var(--space-6);
  --integration-tile-size: 128px;
  --integration-icon-size: clamp(var(--space-10), 5vw, var(--space-16));
  --card-padding: clamp(var(--space-6), 3vw, var(--space-8));
  --text-gap: var(--space-4);
  --footer-padding-block: clamp(var(--space-12), 5vw, var(--space-16));
  /* Six shared sizes. Aliases describe purpose without adding block-specific scales. */
  --type-weight-regular: 400;
  --type-weight-medium: 500;
  --type-weight-emphasis: 600;
  --type-heading-weight: var(--type-weight-medium);
  --type-subheading-line: 1.35;
  --type-subheading-tracking: 0;
  --type-reading-line: 1.8;
  --type-label-line: 1.4;
  --type-label-tracking: .1em;
  --type-label-size: var(--type-small-size);
  --type-meta-size: var(--type-small-size);
  --type-small-size: 14px;
  --type-reading-size: var(--type-body-size);
  --type-subheading-size: clamp(18px, 2vw, 22px);
  --type-quote-size: var(--type-heading-size);
  --type-hero-size: clamp(40px, calc(26.74033px + 3.535912vw), 72px);
  --type-hero-line: 1.1;
  --type-hero-tracking: 0px;
  --type-heading-size: clamp(24px, calc(19.027624px + 1.325967vw), 36px);
  --type-heading-line: 1.1;
  --type-heading-tracking: 0px;
  --type-body-size: clamp(14px, calc(13.171271px + .2209945vw), 16px);
  --type-body-line: 1.4;
  --type-intro-size: clamp(16px, calc(15.171271px + .2209945vw), 18px);
  --type-question-size: var(--type-intro-size);
  --block-heading-size: var(--type-heading-size);
  --block-text-width: 65ch;
  --type-copy-width-compact: 44ch;
  --block-media-radius: 24px;
  --font-logo: system-ui, sans-serif;
}

@media (min-width: 800px) {
  :root { --type-hero-tracking: -2px; --type-heading-tracking: -1px; }
}

/* CC dark palette: app/src/styles/colors.css and globals.css. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-background: #06060e;
  --color-ambient-glow: rgb(169 150 255 / 18%);
  --color-header-background: #0e0e1c;
  --color-footer-background: #0e0e1c;
  --color-menu-shadow: rgb(0 0 0 / 48%);
  --color-surface: #0e0e1c;
  --color-surface-raised: #181725;
  --color-surface-hover: #262338;
  --color-text: #fcfcfc;
  /* Between CC's placeholder and line tones for clearer secondary text. */
  --color-text-muted: color-mix(in srgb, #a0a3bd 60%, #d9dbe9);
  --color-border: #262338;
  --color-accent: #a996ff;
  --color-focus: #a996ff;
  --color-selection: #4700ab;
  --color-success: #a6f787;
  --color-danger: #ff75cb;
  --color-warning: #ffdf9a;
  --color-rating-star: var(--color-warning);
  --color-button-primary-bg: #a996ff;
  --color-button-primary-text: #0c0c1a;
  --color-button-primary-hover: #bfbefc;
  --color-button-primary-active: #9875ff;
  --color-header-shadow: rgb(0 0 0 / 24%);
  --color-image-shadow: rgb(0 0 0 / 32%);
  --color-illustration-background: #06060e;
  /* DesktopNav: coal; NavItem: placeholder text and ash active background. */
  --color-illustration-sidebar: #0e0e1c;
  --color-illustration-nav-text: #a0a3bd;
  --color-illustration-nav-active: #ffffff;
  --color-illustration-neutral-badge: #4e4b66;
  --color-illustration-column-header: #181725;
  --color-illustration-toolbar: #181725;
  --color-illustration-sidebar-border: transparent;
  --color-illustration-card: #181725;
  --color-illustration-frame-border: #262338;
  --color-illustration-panel: #0e0e1c;
  --color-illustration-selection: #262338;
  --color-illustration-border: #262338;
  --color-illustration-text: #fcfcfc;
  --color-illustration-secondary: #a0a3bd;
  --color-illustration-muted: #a0a3bd;
  --color-illustration-icon-default: #d9dbe9;
  --color-feature-prospects-bg: #ffdf9a;
  --color-feature-followups-bg: #ffa65a;
  --color-feature-pipeline-bg: #a996ff;
  --color-feature-deals-bg: #a6f787;
  --color-feature-customers-bg: #50c8fc;
  --color-feature-contacts-bg: #6dfded;
  --color-illustration-success: #a6f787;
  --color-badge-text: #0c0c1a;
}

/* Spacious marketing pages; keep the first-screen offset independent of section gaps. */
:root[data-spacing="spacious"] {
  --page-gutter: clamp(var(--space-6), 5vw, var(--space-16));
  --content-gap: clamp(var(--space-12), 7vw, var(--space-24));
  --block-gap: clamp(var(--space-16), 10vw, var(--space-32));
  --block-column-gap: clamp(var(--space-8), 6.25vw, var(--space-20));
  --section-intro-gap: clamp(var(--space-10), 5vw, var(--space-16));
}
.logo[data-astro-cid-f7espo7c] {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  flex-shrink: 0;
}

.logo-artwork[data-astro-cid-f7espo7c] {
  display: block;
}

.logo-artwork[data-astro-cid-f7espo7c] svg {
  display: block;
  width: clamp(150px, 18vw, 202px);
  height: auto;
}

.logo[data-astro-cid-f7espo7c]:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 4px;
}