/* =========================================================
   Marketing Design Tokens (single source of truth)
   ========================================================= */

:root {
  /* --- Core defaults (derive from global system tokens) --- */
  --marketing-primary-default: var(--brand-primary, #1e87f0);
  --marketing-accent-default: var(--brand-secondary, #f97316);
  --marketing-surface-default: var(--surface-section, #ffffff);
  --marketing-surface-muted-default: var(--surface-muted, #eef2f7);

  /* Dark defaults: keep as explicit tokens for overrides */
  --marketing-surface-dark-default: var(--surface-section, #111a24);
  --marketing-surface-muted-dark-default: var(--surface-muted, #0b111a);
  --marketing-card-dark-default: var(--surface-card, #1a2636);

  /* Text defaults */
  --marketing-text-default: var(--text-body, #111827);
  --marketing-text-on-surface-default: var(--text-body, #111827);
  --marketing-text-on-background-default: var(--text-body, #111827);
  --marketing-text-muted-on-surface-default: var(--text-muted, #4b5563);
  --marketing-text-muted-on-background-default: var(--text-muted, #4b5563);

  --marketing-text-on-surface-dark-default: #f2f5fa;
  --marketing-text-on-background-dark-default: #f2f5fa;
  --marketing-text-muted-on-surface-dark-default: #e0e6f1;
  --marketing-text-muted-on-background-dark-default: #e0e6f1;

  --marketing-text-on-primary-default: var(--text-on-primary, #ffffff);

  /* Neutrals / misc */
  --marketing-white: #ffffff;
  --marketing-black: #000000;
  --marketing-black-rgb: 0 0 0;
  --marketing-ink: #0b1728;

  --marketing-danger-500: #ff6b6b;
  --marketing-danger-600: #ff4c4c;

  --marketing-link-contrast-light: #0000ee;
  --marketing-link-contrast-dark: #ffff00;

  /* Typography scale */
  --marketing-h1: clamp(2.4rem, 4vw, 3.6rem);
  --marketing-h2: clamp(2rem, 3vw, 2.8rem);
  --marketing-h3: clamp(1.5rem, 2.3vw, 2.2rem);
  --marketing-body: clamp(1rem, 1.2vw, 1.125rem);
  --marketing-heading-line-height: 1.15;
  --marketing-body-line-height: 1.65;

  /* Layout scale */
  --marketing-section-padding: clamp(32px, 6vw, 72px);
  --marketing-section-gap: clamp(20px, 4vw, 40px);

  /* Glass/cards */
  --marketing-surface-glass: rgba(255, 255, 255, 0.96);
  --marketing-surface-glass-dark: rgba(15, 36, 27, 0.96);
  --marketing-card-default: var(--marketing-surface-glass);

  --marketing-surface-accent-soft: rgba(255, 255, 255, 0.08);
  --marketing-border-light: rgba(255, 255, 255, 0.18);

  /* Rings/overlays */
  --marketing-ring-strong: rgba(0, 0, 0, 0.6);
  --marketing-ring-strong-dark: rgba(255, 255, 255, 0.72);
  --marketing-overlay-soft: rgba(15, 23, 42, 0.12);
  --marketing-overlay-strong: rgba(0, 0, 0, 0.18);
  --marketing-overlay-hero: rgba(0, 0, 0, 0.24);

  /* Shadows */
  --marketing-shadow-soft: 0 6px 24px rgba(0, 0, 0, 0.05);
  --marketing-shadow-dark: 0 6px 24px rgba(0, 0, 0, 0.35);
  --marketing-shadow-panel: 0 16px 32px rgba(15, 23, 42, 0.08);

  --marketing-shadow-card-base: 0 22px 48px rgba(15, 23, 42, 0.09);
  --marketing-shadow-card-soft-base: 0 16px 36px rgba(0, 0, 0, 0.05);
  --marketing-shadow-card: var(--marketing-shadow-card-base);
  --marketing-shadow-card-soft: var(--marketing-shadow-card-soft-base);
  --marketing-shadow-card-hover: 0 12px 28px rgba(0, 0, 0, 0.08);

  --marketing-shadow-accent: 0 28px 60px rgba(0, 0, 0, 0.18);
  --marketing-shadow-hero-mockup: 0 20px 60px rgba(2, 6, 23, 0.45);
  --marketing-shadow-pill: 0 12px 24px -22px rgba(15, 23, 42, 0.4);
  --marketing-shadow-callout: 0 16px 32px rgba(0, 0, 0, 0.18);
  --marketing-shadow-stat: 0 18px 38px rgba(15, 23, 42, 0.08);
  --marketing-shadow-stat-accent: rgba(15, 23, 42, 0.18);

  /* Fonts */
  --marketing-font-stack-modern: "Poppins", "Inter", "Roboto", "Helvetica Neue", Arial, sans-serif;
  --marketing-font-stack-classic: "Georgia", "Times New Roman", serif;
  --marketing-font-stack-tech: "Inter", "Segoe UI", system-ui, sans-serif;

  /* Marker underline */
  --marketing-marker-underline: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgMjAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgogIDxmaWx0ZXIgaWQ9InJvdWdoIj4KICAgIDxmZVR1cmJ1bGVuY2UgdHlwZT0iZnJhY3RhbE5vaXNlIiBiYXNlRnJlcXVlbmN5PSIwLjgiIG51bU9jdGF2ZXM9IjMiLz4KICAgIDxmZURpc3BsYWNlbWVudE1hcCBpbj0iU291cmNlR3JhcGhpYyIgc2NhbGU9IjIiLz4KICA8L2ZpbHRlcj4KICA8cGF0aCBkPSJNMiAxMCBRNTAgMiAxMDAgMTAgVDE5OCAxMCIgc3Ryb2tlPSJyZ2JhKDI0OCwyNDYsMjQwLDAuNykiIHN0cm9rZS13aWR0aD0iNiIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBmaWx0ZXI9InVybCgjcm91Z2gpIi8+Cjwvc3ZnPgo=");

  /* --- Resolved marketing tokens (overrideable from system) --- */
  --marketing-primary: var(--brand-primary, var(--marketing-primary-default, #1e87f0));
  --marketing-accent: var(--brand-accent, var(--marketing-accent-default, #f97316));

  --marketing-surface: var(--surface, var(--marketing-surface-default, #ffffff));
  --marketing-surface-muted: var(--surface-muted, var(--marketing-surface-muted-default, #eef2f7));

  --marketing-surface-dark: var(--surface-dark, var(--marketing-surface-dark-default, #111a24));
  --marketing-surface-muted-dark: var(--surface-muted-dark, var(--marketing-surface-muted-dark-default, #0b111a));

  --marketing-card-dark: var(--marketing-card-dark-default);
  --marketing-card: var(--marketing-card-default);

  --marketing-text: var(--text-primary, var(--marketing-text-default, #111827));
  --marketing-text-on-surface: var(--text-on-surface, var(--marketing-text-on-surface-default, #111827));
  --marketing-text-on-background: var(--text-on-background, var(--marketing-text-on-background-default, #111827));

  --marketing-text-muted-on-surface: var(--text-muted-on-surface, var(--marketing-text-muted-on-surface-default, #4b5563));
  --marketing-text-muted-on-background: var(--text-muted-on-background, var(--marketing-text-muted-on-background-default, #4b5563));

  --marketing-text-on-surface-dark: var(--text-on-surface-dark, var(--marketing-text-on-surface-dark-default, #f2f5fa));
  --marketing-text-on-background-dark: var(--text-on-background-dark, var(--marketing-text-on-background-dark-default, #f2f5fa));

  --marketing-text-muted-on-surface-dark: var(--text-muted-on-surface-dark, var(--marketing-text-muted-on-surface-dark-default, #e0e6f1));
  --marketing-text-muted-on-background-dark: var(--text-muted-on-background-dark, var(--marketing-text-muted-on-background-dark-default, #e0e6f1));

  --marketing-on-accent: var(--contrast-text-on-primary, var(--text-on-primary, #ffffff));
  --marketing-text-on-primary: var(--marketing-on-accent);

  --marketing-link: var(--brand-primary, var(--marketing-primary, #1e87f0));
  --marketing-background: var(--surface-page, var(--marketing-surface));
  --marketing-background-dark: var(--surface-page, var(--marketing-surface-dark));
  --marketing-border: var(--border-muted, color-mix(in oklab, var(--marketing-primary) 18%, transparent));
  --marketing-ring: color-mix(in oklab, var(--marketing-primary) 45%, transparent);
  --marketing-topbar-light: color-mix(in oklab, var(--marketing-surface) 92%, var(--marketing-card) 8%);
  --marketing-topbar-dark: color-mix(in oklab, var(--marketing-surface-dark) 92%, var(--marketing-card-dark) 8%);

  /* --- Presets (default) --- */
  --marketing-font-stack: var(--marketing-font-stack-modern);
  --marketing-heading-font-stack: var(--marketing-font-stack-modern);
  --marketing-heading-weight: var(--font-heading-weight, 700);
  --marketing-heading-letter-spacing: 0;

  --marketing-card-radius: var(--card-radius, 10px);
  --card-radius-square: 8px;
  --card-radius-pill: 28px;

  /* Buttons (filled default) */
  --marketing-button-primary-bg: var(--marketing-primary);
  --marketing-button-primary-text: var(--marketing-on-accent);
  --marketing-button-primary-border-color: color-mix(in oklab, var(--marketing-primary) 60%, transparent);
  --marketing-button-primary-hover-bg: color-mix(in oklab, var(--marketing-primary) 88%, var(--marketing-black));
  --marketing-button-primary-focus-bg: color-mix(in oklab, var(--marketing-primary) 86%, var(--marketing-black));
  --marketing-button-primary-active-bg: color-mix(in oklab, var(--marketing-primary) 78%, var(--marketing-black));

  --marketing-button-secondary-bg: transparent;
  --marketing-button-secondary-text: var(--marketing-primary);
  --marketing-button-secondary-border-color: color-mix(in oklab, var(--marketing-primary) 50%, transparent);
  --marketing-button-secondary-hover-bg: color-mix(in oklab, var(--marketing-primary) 12%, transparent);

  /* Topbar contrast hooks */
  --marketing-topbar-btn-bg: transparent;
  --marketing-topbar-btn-bg-dark: #1f232a;

  --marketing-topbar-text-contrast-light: #0a0a0a;
  --marketing-topbar-text-contrast-dark: #ffffff;

  --marketing-topbar-drop-bg-contrast-light: #ffffff;
  --marketing-topbar-drop-bg-contrast-dark: #000000;

  --marketing-topbar-drop-border-contrast-light: #000000;
  --marketing-topbar-drop-border-contrast-dark: #ffffff;

  --marketing-topbar-btn-border-contrast-light: #000000;
  --marketing-topbar-btn-border-contrast-dark: #ffffff;

  --marketing-topbar-btn-border-hover-contrast-light: #000000;
  --marketing-topbar-btn-border-hover-contrast-dark: #ffffff;

  --marketing-topbar-btn-bg-hover-contrast-light: #e6e6e6;
  --marketing-topbar-btn-bg-hover-contrast-dark: rgba(255, 255, 255, 0.16);

  --marketing-topbar-focus-ring-contrast-light: rgba(0, 120, 255, 0.6);
  --marketing-topbar-focus-ring-contrast-dark: rgba(140, 200, 255, 0.8);
}

:root[data-marketing-scheme="monochrome"] {
  --marketing-card-default: var(--marketing-surface);
  --marketing-card-dark-default: var(--marketing-surface-dark);
}

:where(
  :root[data-typography-preset="classic"],
  .page-preview-pane[data-preview-intent] [data-typography-preset="classic"],
  [data-preview-intent][data-typography-preset="classic"]
) {
  --marketing-font-stack: var(--marketing-font-stack-classic);
  --marketing-heading-font-stack: var(--marketing-font-stack-classic);
  --marketing-heading-weight: 600;
}
:where(
  :root[data-typography-preset="tech"],
  .page-preview-pane[data-preview-intent] [data-typography-preset="tech"],
  [data-preview-intent][data-typography-preset="tech"]
) {
  --marketing-font-stack: var(--marketing-font-stack-tech);
  --marketing-heading-font-stack: var(--marketing-font-stack-tech);
  --marketing-heading-weight: 700;
  --marketing-heading-letter-spacing: 0.01em;
}
:where(
  :root[data-typography-preset="modern"],
  .page-preview-pane[data-preview-intent] [data-typography-preset="modern"],
  [data-preview-intent][data-typography-preset="modern"]
) {
  /* explicit for clarity; same as default */
}

/* Card style presets */
:where(
  :root[data-card-style="rounded"],
  .page-preview-pane[data-preview-intent] [data-card-style="rounded"],
  [data-preview-intent][data-card-style="rounded"]
) {
  --marketing-card-radius: var(--card-radius, 10px);
  --marketing-shadow-card: var(--marketing-shadow-card-base);
  --marketing-shadow-card-soft: var(--marketing-shadow-card-soft-base);
}
:where(
  :root[data-card-style="square"],
  .page-preview-pane[data-preview-intent] [data-card-style="square"],
  [data-preview-intent][data-card-style="square"]
) {
  --marketing-card-radius: var(--card-radius-square);
  --marketing-shadow-card: var(--marketing-shadow-soft);
  --marketing-shadow-card-soft: var(--marketing-shadow-soft);
}
:where(
  :root[data-card-style="pill"],
  .page-preview-pane[data-preview-intent] [data-card-style="pill"],
  [data-preview-intent][data-card-style="pill"]
) {
  --marketing-card-radius: var(--card-radius-pill);
  --marketing-shadow-card: var(--marketing-shadow-callout);
  --marketing-shadow-card-soft: var(--marketing-shadow-card);
}

/* Button style presets (override only the deltas) */
:where(
  :root[data-button-style="outline"],
  .page-preview-pane[data-preview-intent] [data-button-style="outline"],
  [data-preview-intent][data-button-style="outline"]
) {
  --marketing-button-primary-bg: transparent;
  --marketing-button-primary-text: var(--marketing-primary);
  --marketing-button-primary-border-color: var(--marketing-primary);
  --marketing-button-primary-hover-bg: color-mix(in oklab, var(--marketing-primary) 12%, transparent);
  --marketing-button-primary-focus-bg: color-mix(in oklab, var(--marketing-primary) 16%, transparent);
  --marketing-button-primary-active-bg: color-mix(in oklab, var(--marketing-primary) 20%, transparent);

  --marketing-button-secondary-bg: transparent;
  --marketing-button-secondary-text: var(--marketing-primary);
  --marketing-button-secondary-border-color: var(--marketing-primary);
  --marketing-button-secondary-hover-bg: color-mix(in oklab, var(--marketing-primary) 12%, transparent);
}
:where(
  :root[data-button-style="ghost"],
  .page-preview-pane[data-preview-intent] [data-button-style="ghost"],
  [data-preview-intent][data-button-style="ghost"]
) {
  --marketing-button-primary-bg: color-mix(in oklab, var(--marketing-primary) 12%, transparent);
  --marketing-button-primary-text: var(--marketing-primary);
  --marketing-button-primary-border-color: color-mix(in oklab, var(--marketing-primary) 45%, transparent);
  --marketing-button-primary-hover-bg: color-mix(in oklab, var(--marketing-primary) 18%, transparent);
  --marketing-button-primary-focus-bg: color-mix(in oklab, var(--marketing-primary) 22%, transparent);
  --marketing-button-primary-active-bg: color-mix(in oklab, var(--marketing-primary) 28%, transparent);

  --marketing-button-secondary-bg: color-mix(in oklab, var(--marketing-primary) 8%, transparent);
  --marketing-button-secondary-text: var(--marketing-primary);
  --marketing-button-secondary-border-color: color-mix(in oklab, var(--marketing-primary) 35%, transparent);
  --marketing-button-secondary-hover-bg: color-mix(in oklab, var(--marketing-primary) 14%, transparent);
}

/* =========================================================
   Base page bindings (marketing + CMS render)
   ========================================================= */

:where(html[data-theme], .marketing-scope[data-theme]) {
  color: var(--color-text, var(--text-primary, var(--marketing-text)));
  background-color: var(--marketing-background, var(--surface-page, var(--marketing-surface)));
}
:where(html[data-theme] body, .marketing-scope[data-theme]) {
  color: inherit;
  background-color: var(--marketing-background, var(--surface-page, var(--marketing-surface)));
}

/* Shared typographic rules (define ONCE) */
:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) {
  font-family: var(--marketing-font-stack);
  color: var(--qr-fg, var(--marketing-text-on-background, var(--text-body, #111827)));
}
:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) h1,
:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) h2,
:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) h3 {
  color: var(--qr-text, var(--marketing-text-on-background, var(--text-body, #111827)));
  line-height: var(--marketing-heading-line-height);
  font-family: var(--marketing-heading-font-stack, var(--marketing-font-stack));
  font-weight: var(--marketing-heading-weight);
  letter-spacing: var(--marketing-heading-letter-spacing);
  margin: 0 0 0.6em;
}
:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) h1 { font-size: var(--marketing-h1); }
:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) h2 { font-size: var(--marketing-h2); }
:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) h3 { font-size: var(--marketing-h3); margin-bottom: 0.5em; }
:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) p {
  font-size: var(--marketing-body);
  line-height: var(--marketing-body-line-height);
  margin: 0 0 1em;
}

/* =========================================================
   Marketing page token binding (unchanged semantics)
   ========================================================= */

:is(body, .marketing-scope).marketing-page {
  --qr-brand-50:  color-mix(in oklab, var(--marketing-primary) 8%,  var(--marketing-white));
  --qr-brand-100: color-mix(in oklab, var(--marketing-primary) 16%, var(--marketing-white));
  --qr-brand-200: color-mix(in oklab, var(--marketing-primary) 24%, var(--marketing-white));
  --qr-brand-300: color-mix(in oklab, var(--marketing-primary) 32%, var(--marketing-white));
  --qr-brand-400: color-mix(in oklab, var(--marketing-primary) 40%, var(--marketing-white));
  --qr-brand-500: var(--marketing-primary);
  --qr-brand-600: color-mix(in oklab, var(--marketing-primary) 85%, var(--marketing-black));
  --qr-brand-700: color-mix(in oklab, var(--marketing-primary) 92%, var(--marketing-black));
  --qr-brand-800: color-mix(in oklab, var(--marketing-primary) 96%, var(--marketing-black));
  --qr-brand-900: color-mix(in oklab, var(--marketing-primary) 98%, var(--marketing-black));

  --qr-bg: var(--marketing-background, var(--marketing-surface));
  --qr-fg: var(--marketing-text-on-background);
  --qr-bg-soft: var(--marketing-surface-muted, var(--marketing-surface));

  --marketing-card: var(--marketing-card-default);
  --qr-card: var(--marketing-card, var(--marketing-surface-glass));

  --qr-border: color-mix(in oklab, var(--marketing-primary) 18%, transparent);
  --qr-ring:   color-mix(in oklab, var(--marketing-primary) 45%, transparent);

  --qr-text:  var(--marketing-text-on-background);
  --qr-muted: var(--marketing-text-muted-on-background);

  --qr-icon-color: var(--qr-text);

  --qr-section-bg: var(--qr-bg);
  --qr-card-border: var(--qr-border);

  --qr-landing-bg: var(--qr-bg);
  --qr-landing-text: var(--qr-fg);
  --qr-landing-primary: var(--marketing-primary);
  --qr-contrast-on-primary: var(--marketing-on-accent);

  --qr-danger-500: var(--marketing-danger-500);
  --qr-danger-600: var(--marketing-danger-600);

  --qr-shadow: var(--marketing-shadow-soft);
  --qr-link: var(--marketing-link);

  --accent-primary: var(--marketing-primary);
  --accent-secondary: var(--marketing-accent);
  --accent-color: var(--marketing-primary);

  --qr-landing-topbar-bg-light: var(--marketing-topbar-light,
    color-mix(in oklab, var(--qr-bg) 92%, var(--qr-card) 8%)
  );
  --qr-landing-topbar-bg-dark: var(--marketing-topbar-dark, var(--qr-landing-topbar-bg-light));
  --qr-landing-topbar-bg: var(--qr-landing-topbar-bg-light);

  --qr-hero-grad-start: var(--qr-landing-topbar-bg);
  --qr-hero-grad-end: var(--qr-bg-soft);
  --qr-hero-gradient: linear-gradient(135deg, var(--qr-hero-grad-start) 0%, var(--qr-hero-grad-end) 100%);

  --color-bg: var(--qr-bg);
  --color-text: var(--qr-text);
  --color-primary: var(--qr-landing-primary);
  --color-secondary: var(--marketing-secondary, var(--marketing-accent));
  --color-muted: var(--marketing-surface-muted, var(--marketing-surface));
  --color-default: var(--marketing-surface, var(--marketing-background));
  --color-background: var(--marketing-background, var(--marketing-surface));
  --color-background-muted: var(--marketing-surface-muted, var(--marketing-surface));
  --color-background-secondary: var(--marketing-secondary, var(--marketing-accent));
  --color-text-muted: var(--marketing-text-muted-on-background);
  --color-text-emphasis: var(--marketing-text-emphasis, var(--marketing-text-on-surface));
  --color-text-inverse: var(--marketing-text-inverse, var(--marketing-on-accent));
  --color-border: var(--marketing-border, var(--marketing-border-light, var(--border-muted)));
  --color-border-muted: var(--marketing-border-muted, var(--marketing-border, var(--marketing-border-light, var(--border-muted))));
  --color-success: var(--marketing-success, var(--marketing-primary));
  --color-warning: var(--marketing-warning, var(--marketing-accent));
  --color-danger: var(--marketing-danger, var(--marketing-danger-500, var(--marketing-danger-600)));
  --color-link: var(--marketing-link, var(--marketing-primary));
  --color-link-hover: var(--marketing-link-hover, var(--marketing-link, var(--marketing-primary)));
  --color-button-primary: var(--marketing-button-primary-bg);
  --color-button-secondary: var(--marketing-button-secondary-bg);
  --color-button-default: var(--marketing-surface, var(--marketing-background));

  --section-card-surface: var(--marketing-surface);
  --section-default-surface: var(--marketing-surface);
  --section-default-muted: var(--marketing-surface-muted);

  color-scheme: light;
}

/* CMS render token binding (minimal fallback set) */
:is(body, .marketing-scope).cms-page-render {
  --qr-bg: var(--marketing-background, var(--surface-page, var(--marketing-surface, var(--surface-section))));
  --qr-fg: var(--marketing-text-on-background, var(--text-body));
  --qr-text: var(--marketing-text-on-background, var(--text-body));
  --qr-muted: var(--marketing-text-muted-on-background, var(--text-muted));
  --qr-card: var(--marketing-card, var(--marketing-surface-glass, var(--surface-card)));
  --qr-border: var(--marketing-border, var(--border-muted));
  --qr-card-border: var(--qr-border);
  --qr-link: var(--marketing-link, var(--text-link));
  --qr-landing-primary: var(--marketing-primary, var(--brand-primary));
  --qr-ring: var(--marketing-ring, color-mix(in oklab, var(--qr-landing-primary) 45%, transparent));
  --color-bg: var(--qr-bg);
  --color-text: var(--qr-text);
  --color-primary: var(--qr-landing-primary);
  --color-secondary: var(--marketing-secondary, var(--marketing-accent));
  --color-muted: var(--marketing-surface-muted, var(--marketing-surface));
  --color-default: var(--marketing-surface, var(--marketing-background));
  --color-background: var(--marketing-background, var(--marketing-surface));
  --color-background-muted: var(--marketing-surface-muted, var(--marketing-surface));
  --color-background-secondary: var(--marketing-secondary, var(--marketing-accent));
  --color-text-muted: var(--marketing-text-muted-on-background, var(--text-muted));
  --color-text-emphasis: var(--marketing-text-emphasis, var(--marketing-text-on-surface, var(--text-heading)));
  --color-text-inverse: var(--marketing-text-inverse, var(--text-on-primary));
  --color-border: var(--marketing-border, var(--marketing-border-light, var(--border-muted)));
  --color-border-muted: var(--marketing-border-muted, var(--marketing-border, var(--marketing-border-light, var(--border-muted))));
  --color-success: var(--marketing-success, var(--marketing-primary));
  --color-warning: var(--marketing-warning, var(--marketing-accent));
  --color-danger: var(--marketing-danger, var(--marketing-danger-500, var(--marketing-danger-600)));
  --color-link: var(--marketing-link, var(--text-link));
  --color-link-hover: var(--marketing-link-hover, var(--marketing-link, var(--text-link)));
  --color-button-primary: var(--marketing-button-primary-bg, var(--qr-landing-primary));
  --color-button-secondary: var(--marketing-button-secondary-bg, var(--marketing-accent));
  --color-button-default: var(--marketing-surface, var(--marketing-background));
}

/* Dark mode (marketing-page) */
:is(body.dark-mode, body[data-theme="dark"], html[data-theme="dark"] body, .marketing-scope.dark-mode, .marketing-scope[data-theme="dark"]).marketing-page:not(.high-contrast) {
  --marketing-background: var(--marketing-background-dark, var(--surface-page));
  --marketing-surface: var(--marketing-surface-dark, var(--marketing-surface));
  --marketing-surface-muted: var(--marketing-surface-muted-dark, var(--marketing-surface-muted));
  --marketing-card: var(--marketing-card-dark, var(--marketing-surface-glass-dark));

  --qr-bg: var(--marketing-background-dark, var(--marketing-background, var(--marketing-surface)));
  --qr-fg: var(--marketing-text-on-background-dark);
  --qr-bg-soft: var(--marketing-surface-muted, var(--marketing-surface));
  --qr-card: var(--marketing-card, var(--marketing-surface-glass-dark));

  --qr-border: color-mix(in oklab, var(--marketing-primary) 30%, transparent);
  --qr-ring:   color-mix(in oklab, var(--marketing-primary) 55%, transparent);

  --marketing-button-secondary-border-color: color-mix(in oklab, var(--marketing-primary) 80%, transparent);

  --qr-text:  var(--marketing-text-on-background-dark);
  --qr-muted: var(--marketing-text-muted-on-background-dark);

  --qr-shadow: var(--marketing-shadow-dark);

  --qr-landing-topbar-bg: var(--qr-landing-topbar-bg-dark);

  --marketing-text-on-surface: var(--marketing-text-on-surface-dark, var(--marketing-text-on-surface));
  --marketing-text-muted-on-surface: var(--marketing-text-muted-on-surface-dark, var(--marketing-text-muted-on-surface));
  --marketing-ink: var(--marketing-ink-dark, var(--marketing-ink));

  --section-card-surface: var(--marketing-card, var(--marketing-surface));
  color-scheme: dark;
}

/* =========================================================
   Shared UI overrides (lower specificity via :where)
   ========================================================= */

:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) :where(a) {
  color: var(--qr-link);
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: opacity .2s, text-decoration-color .2s;
}
:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) :where(a:hover) {
  opacity: .8;
  text-decoration-color: currentColor;
}

:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) :where(.uk-button) {
  transition: opacity .2s, transform .2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) :where(.uk-button:hover) { opacity: .85; }

:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) :where(.uk-button-primary) {
  background: var(--marketing-button-primary-bg) !important;
  color: var(--marketing-button-primary-text) !important;
  border: 1px solid var(--marketing-button-primary-border-color);
}
:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) :where(.uk-button-primary:hover) {
  background: var(--marketing-button-primary-hover-bg) !important;
}
:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) :where(.uk-button-primary:focus-visible) {
  background: var(--marketing-button-primary-focus-bg) !important;
}
:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) :where(.uk-button-primary:active) {
  background: var(--marketing-button-primary-active-bg) !important;
  transform: translateY(1px);
}

:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) :where(.uk-button-default) {
  background: var(--marketing-button-secondary-bg) !important;
  color: var(--marketing-button-secondary-text) !important;
  border: 1px solid var(--marketing-button-secondary-border-color);
}
:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) :where(.uk-button-default:hover) {
  background: var(--marketing-button-secondary-hover-bg) !important;
}

/* Cards on landing/cms */
:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) :where(.uk-card, .qr-card, .feature-box, .feature-card) {
  --qr-text: var(--marketing-text-on-surface);
  --qr-muted: var(--marketing-text-muted-on-surface);
  background: var(--qr-card) !important;
  color: var(--qr-text) !important;
  border: 1px solid var(--qr-card-border);
  box-shadow: var(--marketing-shadow-card);
  border-radius: var(--marketing-card-radius);
}

/* =========================================================
   Chat/Cookie
   ========================================================= */

.marketing-chat-modal .uk-modal-dialog {
  max-width: 720px;
}

.marketing-chat__dialog {
  display: flex;
  flex-direction: column;
  gap: 16px;
  --marketing-chat-surface: color-mix(
    in oklab,
    var(--qr-card, var(--marketing-surface-muted)) 96%,
    color-mix(in oklab, var(--marketing-white) 94%, transparent)
  );
  --marketing-chat-surface-alt: color-mix(
    in oklab,
    var(--qr-card, var(--marketing-surface-muted)) 92%,
    color-mix(in oklab, var(--marketing-white) 82%, transparent)
  );
  --marketing-chat-emphasis: color-mix(
    in oklab,
    var(--marketing-primary) 18%,
    color-mix(in oklab, var(--marketing-white) 94%, transparent)
  );
  --marketing-chat-strong: color-mix(
    in oklab,
    var(--qr-text, var(--marketing-text-on-surface)) 90%,
    color-mix(in oklab, var(--marketing-ink) 10%, transparent)
  );
  --marketing-chat-muted: color-mix(
    in oklab,
    var(--qr-muted, var(--marketing-text-muted-on-surface)) 92%,
    color-mix(in oklab, var(--marketing-ink) 60%, transparent)
  );
  --marketing-chat-border: color-mix(
    in oklab,
    var(--qr-card-border, var(--marketing-border)) 85%,
    transparent
  );
  background: var(--marketing-chat-surface);
  color: var(--marketing-chat-strong);
  border: 1px solid var(--marketing-chat-border);
  border-radius: 12px;
  box-shadow: 0 28px 64px -40px color-mix(in oklab, var(--marketing-ink) 55%, transparent),
    0 12px 32px -20px color-mix(in oklab, var(--marketing-ink) 35%, transparent);
}

.marketing-chat__intro {
  margin: 0;
  color: var(--marketing-chat-muted);
}

.marketing-chat__messages {
  max-height: 320px;
  overflow-y: auto;
  padding: 12px 16px;
  background: var(--marketing-chat-surface-alt);
  border: 1px solid color-mix(in oklab, var(--marketing-chat-border) 92%, transparent);
  border-radius: 10px;
}

.marketing-chat__system {
  margin-bottom: 12px;
  padding: 12px 14px;
  background: var(--marketing-chat-emphasis);
  border-radius: 8px;
  font-weight: 600;
  color: var(--marketing-chat-strong);
}

.marketing-chat__turn {
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid color-mix(in oklab, var(--marketing-chat-border) 78%, transparent);
}

.marketing-chat__turn:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}

.marketing-chat__question {
  margin: 0 0 8px;
  font-size: 1.05rem;
}

.marketing-chat__answer p {
  margin: 0 0 8px;
  line-height: 1.5;
}

.marketing-chat__answer p:last-child {
  margin-bottom: 0;
}

.marketing-chat__context {
  margin-top: 12px;
}

.marketing-chat__context-toggle {
  margin: 0;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--marketing-chat-muted);
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
}

.marketing-chat__context-toggle::-webkit-details-marker {
  display: none;
}

.marketing-chat__context-toggle::before {
  content: '\25B8';
  display: inline-block;
  margin-right: 6px;
  transition: transform 0.2s ease;
}

.marketing-chat__context[open] .marketing-chat__context-toggle::before {
  transform: rotate(90deg);
}

.marketing-chat__context-list {
  margin: 8px 0 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.marketing-chat__context-item {
  font-size: 0.95rem;
}

.marketing-chat__context-link {
  color: var(--marketing-primary);
  text-decoration: none;
}

.marketing-chat__context-link:hover,
.marketing-chat__context-link:focus {
  text-decoration: underline;
}

.marketing-chat__context-label {
  color: var(--marketing-chat-muted);
}

.marketing-chat__status {
  min-height: 1.25em;
  margin: 0;
  font-weight: 600;
  color: var(--marketing-chat-muted);
}

.marketing-chat__status--error {
  color: var(--marketing-danger-600);
}

.marketing-chat__honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(100%);
  border: 0;
  padding: 0;
  margin: 0;
}

.marketing-chat__form textarea {
  resize: vertical;
}

.marketing-chat__form-actions {
  margin-top: 12px;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.marketing-chat__form--loading textarea {
  opacity: 0.75;
}

:is(body.dark-mode, body[data-theme="dark"], html[data-theme="dark"] body, .marketing-scope.dark-mode, .marketing-scope[data-theme="dark"]):is(.marketing-page, .cms-page-render):not(.high-contrast)
  .marketing-chat__dialog {
  --marketing-chat-surface: color-mix(
    in oklab,
    var(--qr-card, var(--marketing-surface-dark)) 85%,
    color-mix(in oklab, var(--marketing-ink) 92%, transparent)
  );
  --marketing-chat-surface-alt: color-mix(
    in oklab,
    color-mix(in oklab, var(--marketing-ink) 94%, transparent) 82%,
    color-mix(in oklab, var(--marketing-primary) 22%, transparent) 18%
  );
  --marketing-chat-emphasis: color-mix(
    in oklab,
    var(--marketing-primary) 42%,
    color-mix(in oklab, var(--marketing-ink) 88%, transparent)
  );
  --marketing-chat-strong: color-mix(
    in oklab,
    var(--marketing-white) 94%,
    color-mix(in oklab, var(--marketing-white) 72%, transparent) 6%
  );
  --marketing-chat-muted: color-mix(
    in oklab,
    color-mix(in oklab, var(--marketing-white) 92%, transparent) 88%,
    color-mix(in oklab, var(--marketing-white) 70%, transparent) 12%
  );
  --marketing-chat-border: color-mix(
    in oklab,
    color-mix(in oklab, var(--marketing-primary) 45%, transparent) 50%,
    color-mix(in oklab, var(--marketing-white) 18%, transparent) 50%
  );
}

@media (max-width: 640px) {
  .marketing-chat__dialog {
    padding: 20px 18px;
  }

  .marketing-chat__messages {
    max-height: 240px;
  }
}

:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) .marketing-cookie-banner {
  position: fixed;
  inset: auto 24px 24px auto;
  width: min(360px, calc(100% - 48px));
  border-radius: 16px;
  box-shadow: 0 24px 58px -34px color-mix(in oklab, var(--marketing-ink) 65%, transparent),
    0 18px 32px -28px color-mix(in oklab, var(--marketing-ink) 35%, transparent);
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform 0.25s ease, opacity 0.25s ease;
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  z-index: 1050;
}

:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) .marketing-floating-button {
  position: fixed;
  bottom: clamp(1rem, 4vw, 1.75rem);
  z-index: 1040;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border: 1px solid color-mix(in oklab, var(--marketing-primary) 52%, color-mix(in oklab, var(--marketing-white) 24%, transparent));
  border-radius: 9999px;
  background: color-mix(in oklab, var(--marketing-primary) 22%, color-mix(in oklab, var(--marketing-ink) 94%, transparent));
  color: var(--marketing-white);
  box-shadow: 0 20px 45px color-mix(in oklab, var(--marketing-ink) 32%, transparent),
    0 8px 18px color-mix(in oklab, var(--marketing-ink) 28%, transparent);
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) .marketing-floating-button svg {
  width: 1.45rem;
  height: 1.45rem;
  color: inherit;
  stroke: currentColor;
  fill: none;
}

:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) .marketing-floating-button .uk-icon {
  color: inherit !important;
}

:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) .marketing-floating-button:hover,
:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) .marketing-floating-button:focus-visible {
  background: color-mix(in oklab, var(--marketing-primary) 30%, color-mix(in oklab, var(--marketing-ink) 90%, transparent));
  border-color: color-mix(in oklab, var(--marketing-primary) 64%, color-mix(in oklab, var(--marketing-white) 28%, transparent));
  box-shadow: 0 22px 48px color-mix(in oklab, var(--marketing-ink) 36%, transparent),
    0 10px 20px color-mix(in oklab, var(--marketing-ink) 30%, transparent);
}

:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) .marketing-floating-button:focus-visible {
  outline: 3px solid color-mix(in oklab, var(--marketing-primary) 70%, var(--marketing-white) 30%);
  outline-offset: 3px;
}

:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) .marketing-floating-button:active {
  transform: scale(0.96);
}

:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) .marketing-cookie-trigger {
  left: clamp(1rem, 4vw, 1.75rem);
}

.marketing-chat-fab {
  right: clamp(1rem, 4vw, 1.75rem);
}

:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) .marketing-cookie-trigger--active {
  background: color-mix(in oklab, var(--marketing-primary) 26%, color-mix(in oklab, var(--marketing-ink) 92%, transparent));
  border-color: color-mix(in oklab, var(--marketing-primary) 58%, color-mix(in oklab, var(--marketing-white) 26%, transparent));
  box-shadow: 0 16px 36px color-mix(in oklab, var(--marketing-ink) 28%, transparent),
    0 6px 14px color-mix(in oklab, var(--marketing-ink) 24%, transparent);
}

html:not([data-theme="dark"]) :is(body, .marketing-scope):is(.marketing-page, .cms-page-render):not(.dark-mode):not(.high-contrast):not([data-theme="dark"]) .marketing-floating-button,
html[data-theme="light"] :is(body, .marketing-scope):is(.marketing-page, .cms-page-render):not(.high-contrast) .marketing-floating-button {
  color: var(--marketing-white);
  border-color: color-mix(in oklab, var(--marketing-primary) 52%, color-mix(in oklab, var(--marketing-white) 24%, transparent));
  background: color-mix(in oklab, var(--marketing-primary) 22%, color-mix(in oklab, var(--marketing-ink) 94%, transparent));
  box-shadow: 0 20px 45px color-mix(in oklab, var(--marketing-ink) 32%, transparent),
    0 8px 18px color-mix(in oklab, var(--marketing-ink) 28%, transparent);
}

html:not([data-theme="dark"]) :is(body, .marketing-scope):is(.marketing-page, .cms-page-render):not(.dark-mode):not(.high-contrast):not([data-theme="dark"]) .marketing-floating-button svg,
html[data-theme="light"] :is(body, .marketing-scope):is(.marketing-page, .cms-page-render):not(.high-contrast) .marketing-floating-button svg {
  color: inherit;
  stroke: currentColor;
}

@media (max-width: 640px) {
  :is(body, .marketing-scope):is(.marketing-page, .cms-page-render) .marketing-floating-button {
    width: 3rem;
    height: 3rem;
    bottom: clamp(0.85rem, 6vw, 1.25rem);
    box-shadow: 0 14px 28px color-mix(in oklab, var(--marketing-ink) 30%, transparent),
      0 6px 16px color-mix(in oklab, var(--marketing-ink) 28%, transparent);
  }

  :is(body, .marketing-scope):is(.marketing-page, .cms-page-render) .marketing-floating-button svg {
    width: 1.35rem;
    height: 1.35rem;
  }

  :is(body, .marketing-scope):is(.marketing-page, .cms-page-render) .marketing-cookie-trigger {
    left: clamp(0.85rem, 6vw, 1.25rem);
  }

  .marketing-chat-fab {
    right: clamp(0.85rem, 6vw, 1.25rem);
  }
}

:is(body, .marketing-scope):is(.marketing-page, .cms-page-render).high-contrast .marketing-floating-button,
:is(body, .marketing-scope):is(.marketing-page, .cms-page-render)[data-theme="high-contrast"] .marketing-floating-button,
html[data-theme="high-contrast"] :is(body, .marketing-scope):is(.marketing-page, .cms-page-render) .marketing-floating-button,
:is(body, .marketing-scope).high-contrast .marketing-floating-button {
  background: var(--marketing-black);
  color: var(--marketing-white);
  box-shadow: none;
  border: 2px solid currentColor;
}

:is(body, .marketing-scope):is(.marketing-page, .cms-page-render).high-contrast .marketing-cookie-trigger.marketing-cookie-trigger--active,
:is(body, .marketing-scope):is(.marketing-page, .cms-page-render)[data-theme="high-contrast"] .marketing-cookie-trigger.marketing-cookie-trigger--active,
html[data-theme="high-contrast"] :is(body, .marketing-scope):is(.marketing-page, .cms-page-render) .marketing-cookie-trigger.marketing-cookie-trigger--active,
:is(body, .marketing-scope).high-contrast .marketing-cookie-trigger.marketing-cookie-trigger--active {
  background: var(--marketing-ink);
}

:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) .marketing-cookie-banner--visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) .marketing-cookie-banner__headline {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 4px;
}

:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) .marketing-cookie-banner__icon {
  color: var(--marketing-primary);
}

:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) .marketing-cookie-banner__copy {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
}

:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) .marketing-cookie-banner__fineprint {
  margin: 0;
  font-size: 0.85rem;
  color: color-mix(in oklab, currentColor 72%, color-mix(in oklab, var(--marketing-white) 40%, transparent));
}

:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) .marketing-cookie-banner__link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) .marketing-cookie-banner__link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) .marketing-cookie-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) .marketing-cookie-banner__button {
  flex: 1 1 140px;
}

@media (max-width: 640px) {
  :is(body, .marketing-scope):is(.marketing-page, .cms-page-render) .marketing-cookie-banner {
    inset: auto 16px 16px 16px;
    width: auto;
  }
}

:is(body.dark-mode, body[data-theme="dark"], html[data-theme="dark"] body, .marketing-scope.dark-mode, .marketing-scope[data-theme="dark"]):is(.marketing-page, .cms-page-render):not(.high-contrast)
  .marketing-cookie-banner {
  background-color: var(--marketing-surface, #0b0b0b);
  border-color: var(--marketing-border, #222);
  background: linear-gradient(
    160deg,
    color-mix(in oklab, var(--marketing-primary) 28%, color-mix(in oklab, var(--marketing-ink) 95%, transparent)) 0%,
    color-mix(in oklab, var(--marketing-primary) 18%, color-mix(in oklab, var(--marketing-ink) 96%, transparent)) 100%
  ) !important;
  border: 1px solid color-mix(in oklab, var(--marketing-primary) 48%, color-mix(in oklab, var(--marketing-white) 18%, transparent))
    !important;
  color: color-mix(in oklab, var(--marketing-white) 92%, color-mix(in oklab, var(--marketing-white) 8%, transparent))
    !important;
}

html:not([data-theme="dark"]) :is(body, .marketing-scope):is(.marketing-page, .cms-page-render):not(.dark-mode):not(.high-contrast):not([data-theme="dark"]) .marketing-cookie-banner,
html[data-theme="light"] :is(body, .marketing-scope):is(.marketing-page, .cms-page-render):not(.high-contrast) .marketing-cookie-banner {
  background-color: var(--marketing-surface, #fff);
  border-color: var(--marketing-border, #e2e2e2);
  background: linear-gradient(
    160deg,
    color-mix(in oklab, var(--marketing-primary) 12%, var(--marketing-white) 88%) 0%,
    color-mix(in oklab, var(--marketing-primary) 8%, var(--marketing-surface-muted) 92%) 100%
  ) !important;
  border: 1px solid color-mix(in oklab, var(--marketing-primary) 26%, color-mix(in oklab, var(--marketing-ink) 10%, transparent))
    !important;
  color: color-mix(in oklab, var(--marketing-ink) 88%, var(--marketing-primary) 12%) !important;
}

:is(body, .marketing-scope):is(.marketing-page, .cms-page-render).high-contrast .marketing-cookie-banner,
:is(body, .marketing-scope):is(.marketing-page, .cms-page-render)[data-theme="high-contrast"] .marketing-cookie-banner,
html[data-theme="high-contrast"] :is(body, .marketing-scope):is(.marketing-page, .cms-page-render) .marketing-cookie-banner,
:is(body, .marketing-scope).high-contrast .marketing-cookie-banner {
  background-color: var(--qr-card, var(--marketing-black));
  background: var(--qr-card, var(--marketing-black));
  color: var(--qr-text, var(--marketing-white));
  border: 2px solid currentColor;
  box-shadow: none;
}

:is(body, .marketing-scope):is(.marketing-page, .cms-page-render).high-contrast .marketing-cookie-banner__link,
:is(body, .marketing-scope):is(.marketing-page, .cms-page-render)[data-theme="high-contrast"] .marketing-cookie-banner__link,
html[data-theme="high-contrast"] :is(body, .marketing-scope):is(.marketing-page, .cms-page-render) .marketing-cookie-banner__link,
:is(body, .marketing-scope).high-contrast .marketing-cookie-banner__link {
  text-decoration-thickness: 2px;
}

/* =========================================================
   Topbar refactor (shared base, per-scope deltas)
   ========================================================= */

:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) .qr-topbar {
  padding-top: env(safe-area-inset-top);
  background: var(--qr-landing-topbar-bg);
  backdrop-filter: blur(8px);
  color: var(--qr-text);
  border-bottom: 1px solid var(--qr-card-border);
  z-index: 1000;
}

:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) .qr-topbar nav.topbar {
  --topbar-height: 64px;
}
:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) .qr-topbar {
  min-height: 64px;
  height: 64px;
}
@media (max-width: 959px) {
  :is(body, .marketing-scope):is(.marketing-page, .cms-page-render) .qr-topbar { min-height: 56px; height: 56px; }
  :is(body, .marketing-scope):is(.marketing-page, .cms-page-render) .qr-topbar nav.topbar { --topbar-height: 56px; }
}

:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) .qr-topbar :where(.uk-navbar, .uk-navbar-container) {
  background: var(--qr-landing-topbar-bg);
}

:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) .qr-topbar :where(.uk-navbar-container, .uk-navbar-right, .uk-navbar-center) {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 12px;
}

:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) .qr-topbar .uk-navbar-right {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-end;
}

:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) .qr-topbar :where(.uk-navbar-right .uk-navbar-nav, .uk-navbar-center .uk-navbar-nav) {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: nowrap;
  gap: 8px;
}
:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) .qr-topbar .uk-navbar-right .uk-navbar-nav { justify-content: flex-end; }
:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) .qr-topbar .uk-navbar-center .uk-navbar-nav { justify-content: center; }

:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) .qr-topbar .uk-navbar-nav > li > a {
  color: var(--qr-text) !important;
  font-weight: 500;
  opacity: .9;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  line-height: 38px;
  height: 40px;
  border: 1px solid transparent;
  border-radius: 6px;
  transition: opacity .2s, background .12s, border-color .12s;
}

:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) .qr-topbar .uk-navbar-nav > li > a:hover,
:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) .qr-topbar .uk-navbar-nav > li.uk-active > a {
  opacity: 1;
  background: color-mix(in oklab, var(--qr-text) 8%, transparent);
  border-color: color-mix(in oklab, var(--qr-text) 40%, transparent);
}

:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) .qr-topbar :where(.uk-navbar-nav > li > a:focus-visible, #configMenuToggle:focus-visible, .uk-navbar-toggle:focus-visible) {
  outline: none;
  box-shadow: 0 0 0 3px var(--qr-ring);
  border-radius: 6px;
}

:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) .qr-topbar .uk-navbar-toggle {
  color: var(--qr-text) !important;
}

/* Only marketing-page should be sticky */
:is(body, .marketing-scope).marketing-page .qr-topbar { position: sticky; top: 0; }

/* =========================================================
   Section spacing (single place)
   ========================================================= */
.marketing-section { padding-block: var(--marketing-section-padding); }
.marketing-section + .marketing-section { margin-top: var(--marketing-section-gap); }
:is(body, .marketing-scope).marketing-page .uk-section,
:is(body, .marketing-scope).marketing-page .page-modules { padding-top: clamp(36px, 8vw, 72px); padding-bottom: clamp(36px, 8vw, 72px); }
@media (min-width: 1200px) {
  :is(body, .marketing-scope).marketing-page .uk-section,
  :is(body, .marketing-scope).marketing-page .page-modules { padding-top: 88px; padding-bottom: 88px; }
}

/* =========================================================
   Hero: Media + Video (CMS marketing)
   ========================================================= */
:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) .hero-block--media-video .hero-media-card {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 3vw, 18px);
  padding: clamp(14px, 4vw, 24px);
  border-radius: clamp(16px, 3vw, 24px);
  background: linear-gradient(
    140deg,
    color-mix(in oklab, var(--marketing-primary) 28%, var(--qr-card) 72%) 0%,
    color-mix(in oklab, var(--marketing-primary) 12%, var(--qr-card) 88%) 100%
  );
  border: 1px solid color-mix(in oklab, var(--marketing-primary) 30%, transparent);
  box-shadow: var(--marketing-shadow-hero-mockup);
}

:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) .hero-block--media-video .hero-media-card__frame {
  position: relative;
  border-radius: clamp(12px, 2.5vw, 18px);
  overflow: hidden;
  background: var(--qr-card);
}

:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) .hero-block--media-video .hero-media-card__frame::before {
  content: '';
  display: block;
  padding-top: 56.25%;
}

:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) .hero-block--media-video .hero-media-card__embed {
  position: absolute;
  inset: 0;
}

:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) .hero-block--media-video .hero-media-card__embed iframe,
:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) .hero-block--media-video .hero-media-card__embed img {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: cover;
}

:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) .hero-block--media-video .hero-media-card__meta {
  display: grid;
  gap: 12px;
  color: var(--qr-text);
}

:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) .hero-block--media-video .hero-media-card__meta-text {
  display: grid;
  gap: 4px;
}

:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) .hero-block--media-video .hero-media-card__meta-text strong {
  font-size: 1.05rem;
}

:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) .hero-block--media-video .hero-media-card__meta-text span {
  color: var(--qr-muted);
}

:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) .hero-block--media-video .hero-media-card__meta-actions {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 10px;
}

@media (min-width: 640px) {
  :is(body, .marketing-scope):is(.marketing-page, .cms-page-render) .hero-block--media-video .hero-media-card__meta-actions {
    flex-direction: row;
  }
}

:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) .hero-block--media-video .hero-media-card__link,
:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) .hero-block--media-video .hero-media-card__reference {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--marketing-primary) 50%, transparent);
  background: color-mix(in oklab, var(--marketing-primary) 18%, transparent);
  color: var(--qr-text);
  text-decoration: none;
  font-weight: 600;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) .hero-block--media-video .hero-media-card__link:hover,
:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) .hero-block--media-video .hero-media-card__reference:hover,
:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) .hero-block--media-video .hero-media-card__link:focus-visible,
:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) .hero-block--media-video .hero-media-card__reference:focus-visible {
  background: color-mix(in oklab, var(--marketing-primary) 26%, transparent);
  border-color: color-mix(in oklab, var(--marketing-primary) 68%, transparent);
  transform: translateY(-1px);
}

:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) .hero-block--media-video .hero-media-card__note {
  margin: 0;
  font-size: 0.9rem;
  color: var(--qr-muted);
}

@media (max-width: 959px) {
  :is(body, .marketing-scope):is(.marketing-page, .cms-page-render) .hero-block--media-video .hero-media-card {
    padding: 20px;
  }
}

/* ── Hero video consent placeholder ─────────────────────────────── */

:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) .hero-media-card__consent {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: clamp(16px, 4vw, 32px);
  text-align: center;
  background: color-mix(in oklab, var(--qr-card) 92%, var(--marketing-primary) 8%);
  border-radius: inherit;
}

:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) .hero-media-card__consent-icon {
  color: var(--qr-muted);
  opacity: 0.6;
}

:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) .hero-media-card__consent-text {
  margin: 0;
  font-size: clamp(0.8rem, 1.8vw, 0.95rem);
  line-height: 1.5;
  color: var(--qr-text);
  max-width: 36ch;
}

:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) .hero-media-card__consent-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 24px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--marketing-primary) 50%, transparent);
  background: color-mix(in oklab, var(--marketing-primary) 22%, transparent);
  color: var(--qr-text);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) .hero-media-card__consent-button:hover,
:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) .hero-media-card__consent-button:focus-visible {
  background: color-mix(in oklab, var(--marketing-primary) 32%, transparent);
  border-color: color-mix(in oklab, var(--marketing-primary) 68%, transparent);
  transform: translateY(-1px);
}

:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) .hero-media-card__consent-hint {
  margin: 0;
  font-size: 0.75rem;
  color: var(--qr-muted);
  max-width: 36ch;
}

/* ── About page (calhelp-about) ─────────────────────────────────── */

.calhelp-about-page {
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
}

.calhelp-about__logo {
  font-weight: 700;
  letter-spacing: 0.4px;
}

.calhelp-about__nav > li.uk-active > a {
  font-weight: 600;
  border-bottom: 2px solid currentColor;
}

.calhelp-about__hero {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
}

.calhelp-about__quote {
  border-left: 4px solid var(--brand-primary, #1e87f0);
  padding-left: 12px;
}

.calhelp-about__portrait {
  width: 160px;
  height: 160px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-primary, #1e87f0) 10%, var(--surface-card, #fff)), color-mix(in srgb, var(--brand-primary, #1e87f0) 3%, var(--surface-card, #fff)));
  color: var(--brand-primary, #1e87f0);
  font-weight: 700;
  font-size: 1.4rem;
}

.calhelp-about__cta .uk-button {
  min-width: 180px;
}

/* ── Maintenance page (calserver-maintenance) ───────────────────── */

body.marketing-page.calserver-maintenance-theme {
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  background: linear-gradient(180deg, #0f172a 0%, #111827 45%, #0b1220 100%);
  color: var(--marketing-text-on-surface, #f8fafc);
}

.calserver-maintenance-theme .marketing-layout {
  min-height: 100vh;
  background: radial-gradient(circle at top right, rgba(59, 130, 246, 0.2), transparent 55%),
              radial-gradient(circle at 20% 20%, rgba(96, 165, 250, 0.18), transparent 50%),
              linear-gradient(180deg, rgba(15, 23, 42, 0.92) 0%, rgba(15, 23, 42, 0.6) 55%, rgba(15, 23, 42, 0.9) 100%);
}

.calserver-maintenance-theme .qr-topbar,
.calserver-maintenance-theme .uk-navbar,
.calserver-maintenance-theme .uk-navbar-container {
  background: transparent;
}

.calserver-maintenance-theme .qr-topbar {
  height: auto;
  min-height: calc(48px + 16px);
  padding: 8px 0;
}

@media (max-width: 959px) {
  .calserver-maintenance-theme .qr-topbar {
    height: auto;
    min-height: 72px;
    padding-top: 0;
    padding-bottom: 16px;
  }
}

.calserver-maintenance-theme .uk-navbar-nav > li > a {
  color: var(--marketing-text-muted-on-surface, #cbd5f5);
  font-weight: 500;
}

.calserver-maintenance-theme .uk-navbar-nav > li > a:focus,
.calserver-maintenance-theme .uk-navbar-nav > li > a:hover {
  color: var(--marketing-text-on-surface, #f8fafc);
}

.calserver-maintenance-hero {
  padding-top: 6rem;
  padding-bottom: 4rem;
}

.calserver-maintenance-hero__grid {
  align-items: stretch;
}

.calserver-maintenance-hero__copy {
  background: rgba(15, 23, 42, 0.6);
  border-radius: 1.5rem;
  padding: 2.75rem;
  box-shadow: 0 40px 80px rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(12px);
}

.calserver-maintenance-hero__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1.1rem;
  background: linear-gradient(135deg, #fb7185, #facc15);
  color: #0b1220;
  margin-bottom: 1.25rem;
  font-size: 1.75rem;
}

.calserver-maintenance-hero__title {
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 1rem;
}

.calserver-maintenance-hero__subtitle {
  font-size: 1.15rem;
  line-height: 1.65;
  color: var(--marketing-text-muted-on-surface, #dbeafe);
  margin-bottom: 1.75rem;
}

.calserver-maintenance-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.calserver-maintenance-hero__actions .uk-button.git-btn {
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  padding: 0.85rem 1.75rem;
  border-radius: 999px;
  font-size: 1rem;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.calserver-maintenance-hero__actions .uk-button-primary {
  background: linear-gradient(135deg, #2563eb, #38bdf8);
  border: none;
  color: #0b1220;
  font-weight: 600;
}

.calserver-maintenance-hero__actions .uk-button-primary:hover,
.calserver-maintenance-hero__actions .uk-button-primary:focus {
  background: linear-gradient(135deg, #1d4ed8, #0ea5e9);
  color: var(--marketing-text-on-surface, #f8fafc);
}

.calserver-maintenance-hero__actions .uk-button-default {
  border-color: rgba(148, 163, 184, 0.4);
  color: var(--marketing-text-on-surface, #e2e8f0);
  background: rgba(15, 23, 42, 0.45);
}

.calserver-maintenance-hero__actions .uk-button-default:hover,
.calserver-maintenance-hero__actions .uk-button-default:focus {
  border-color: rgba(148, 163, 184, 0.7);
  color: var(--marketing-text-on-surface, #f8fafc);
}

.calserver-maintenance-status-card {
  background: rgba(15, 23, 42, 0.72);
  border-radius: 1.5rem;
  padding: 2rem;
  border: 1px solid rgba(148, 163, 184, 0.25);
  box-shadow: 0 30px 60px rgba(15, 23, 42, 0.35);
}

.calserver-maintenance-status {
  margin: 0;
}

.calserver-maintenance-status__item {
  margin-bottom: 1.25rem;
}

.calserver-maintenance-status__item:last-child {
  margin-bottom: 0;
}

.calserver-maintenance-status__item dt {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  color: var(--marketing-text-muted-on-surface, #94a3b8);
  margin-bottom: 0.35rem;
}

.calserver-maintenance-status__item dd {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--marketing-text-on-surface, #f8fafc);
}

.calserver-maintenance-status__hint {
  margin-top: 1.5rem;
  color: var(--marketing-text-muted-on-surface, #cbd5f5);
  font-size: 0.95rem;
  line-height: 1.6;
}

.calserver-maintenance-section {
  padding-top: 4rem;
  padding-bottom: 4rem;
  color: var(--marketing-text-on-surface, #e2e8f0);
}

.calserver-maintenance-section__header {
  max-width: 720px;
  margin: 0 auto 3rem auto;
  text-align: left;
}

.calserver-maintenance-section__eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  background: rgba(96, 165, 250, 0.2);
  color: var(--marketing-text-muted-on-surface, #bfdbfe);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
}

.calserver-maintenance-section__title {
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.calserver-maintenance-section__intro {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--marketing-text-muted-on-surface, #cbd5f5);
  margin-bottom: 0;
}

.calserver-maintenance-timeline {
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 2px solid rgba(96, 165, 250, 0.35);
}

.calserver-maintenance-timeline__item {
  position: relative;
  padding-left: 2.5rem;
  margin-bottom: 2.5rem;
}

.calserver-maintenance-timeline__item:last-child {
  margin-bottom: 0;
}

.calserver-maintenance-timeline__item::before {
  content: '';
  position: absolute;
  left: -0.95rem;
  top: 0.3rem;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #2563eb, #38bdf8);
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.45);
}

.calserver-maintenance-timeline__time {
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--marketing-link, #93c5fd);
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.calserver-maintenance-timeline__body h3 {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.calserver-maintenance-timeline__body p {
  margin: 0;
  color: var(--marketing-text-muted-on-surface, #dbeafe);
  line-height: 1.6;
}

.calserver-maintenance-note {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.25rem 1.5rem;
  border-radius: 1rem;
  background: rgba(96, 165, 250, 0.12);
  border: 1px solid rgba(96, 165, 250, 0.35);
  margin-top: 2.5rem;
}

.calserver-maintenance-note__icon {
  color: var(--marketing-accent, #60a5fa);
  font-size: 1.5rem;
}

.calserver-maintenance-note__text {
  margin: 0;
  color: var(--marketing-text-muted-on-surface, #bfdbfe);
  line-height: 1.6;
}

.calserver-maintenance-note__text a {
  color: var(--marketing-link, #93c5fd);
  text-decoration: underline;
}

.calserver-maintenance-support-card {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 1.5rem;
  padding: 2.5rem;
  box-shadow: 0 30px 60px rgba(15, 23, 42, 0.35);
  height: 100%;
}

.calserver-maintenance-support-card--secondary {
  background: rgba(15, 23, 42, 0.5);
}

.calserver-maintenance-support-list {
  margin: 2rem 0 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1.5rem;
}

.calserver-maintenance-support-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: flex-start;
}

.calserver-maintenance-support-icon {
  color: var(--marketing-accent, #60a5fa);
  font-size: 1.3rem;
}

.calserver-maintenance-support-item strong {
  display: block;
  font-weight: 600;
  margin-bottom: 0.3rem;
}

.calserver-maintenance-support-item p,
.calserver-maintenance-support-item a {
  color: var(--marketing-text-muted-on-surface, #dbeafe);
  margin: 0;
}

.calserver-maintenance-support-item a:hover,
.calserver-maintenance-support-item a:focus {
  color: var(--marketing-link, #93c5fd);
}

.calserver-maintenance-checklist {
  margin: 1.75rem 0 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1.25rem;
}

.calserver-maintenance-checklist li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  line-height: 1.6;
  color: var(--marketing-text-muted-on-surface, #cbd5f5);
}

.calserver-maintenance-check {
  color: #34d399;
  font-size: 1.2rem;
}

.calserver-maintenance-checklist li:last-child {
  margin-bottom: 0;
}

.calserver-maintenance-support-card h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.calserver-maintenance-support-card .calserver-maintenance-note__text {
  margin-top: 1.75rem;
}

.calserver-maintenance-updates {
  background: rgba(15, 23, 42, 0.4);
  border-top: 1px solid rgba(148, 163, 184, 0.2);
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.calserver-maintenance-updates__table-wrapper {
  position: relative;
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(15, 23, 42, 0.55);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.4);
}

.calserver-maintenance-updates__table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  color: var(--marketing-text-on-surface, #e2e8f0);
}

.calserver-maintenance-updates__table th,
.calserver-maintenance-updates__table td {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
  text-align: left;
  vertical-align: top;
}

.calserver-maintenance-updates__table thead th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--marketing-link, #93c5fd);
  background: rgba(12, 20, 35, 0.9);
  position: sticky;
  top: 0;
  z-index: 1;
}

.calserver-maintenance-updates__table tbody tr {
  transition: background 0.2s ease;
}

.calserver-maintenance-updates__table tbody tr:nth-child(even) {
  background: rgba(12, 20, 35, 0.65);
}

.calserver-maintenance-updates__table tbody tr:hover {
  background: rgba(37, 99, 235, 0.18);
}

.calserver-maintenance-updates__date {
  color: var(--marketing-link, #93c5fd);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.calserver-maintenance-updates__date-cell {
  white-space: nowrap;
  width: 140px;
}

.calserver-maintenance-updates__link,
.calserver-maintenance-updates__title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--marketing-text-on-surface, #f8fafc);
}

.calserver-maintenance-updates__link {
  text-decoration: none;
}

.calserver-maintenance-updates__link:hover,
.calserver-maintenance-updates__link:focus {
  color: var(--marketing-text-muted-on-surface, #bfdbfe);
  text-decoration: underline;
}

.calserver-maintenance-updates__excerpt {
  color: var(--marketing-text-muted-on-surface, #cbd5f5);
  line-height: 1.6;
}

.calserver-maintenance-updates__excerpt-cell {
  max-width: 560px;
}

.calserver-maintenance-updates .uk-button-text {
  color: var(--marketing-accent, #60a5fa);
}

.calserver-maintenance-updates .uk-button-text:hover,
.calserver-maintenance-updates .uk-button-text:focus {
  color: var(--marketing-text-muted-on-surface, #bfdbfe);
}

.calserver-maintenance-theme .footer-columns {
  background: transparent;
  border-top: 1px solid rgba(148, 163, 184, 0.2);
}

.calserver-maintenance-theme .footer-section strong,
.calserver-maintenance-theme .footer-section p,
.calserver-maintenance-theme .footer-section a,
.calserver-maintenance-theme .footer-section li {
  color: var(--marketing-text-on-surface, #e2e8f0);
}

.calserver-maintenance-theme .footer-section a:hover,
.calserver-maintenance-theme .footer-section a:focus {
  color: var(--marketing-link, #93c5fd);
}

@media (max-width: 960px) {
  .calserver-maintenance-hero {
    padding-top: 4rem;
    padding-bottom: 3rem;
  }

  .calserver-maintenance-hero__copy {
    padding: 2rem;
  }

  .calserver-maintenance-hero__title {
    font-size: 2.2rem;
  }

  .calserver-maintenance-section__header {
    margin-bottom: 2.5rem;
  }

  .calserver-maintenance-updates__table {
    min-width: 520px;
  }

  .calserver-maintenance-updates__table th,
  .calserver-maintenance-updates__table td {
    padding: 1rem 1.25rem;
  }
}

@media (max-width: 640px) {
  .calserver-maintenance-hero__actions {
    flex-direction: column;
  }

  .calserver-maintenance-status-card {
    margin-top: 2rem;
  }

  .calserver-maintenance-timeline {
    border-left-width: 1px;
  }

  .calserver-maintenance-timeline__item {
    padding-left: 2rem;
  }
}

/* ── Fluke MET/CAL page ─────────────────────────────────────────── */

.metcal-hero {
    position: relative;
    padding-top: 96px;
    padding-bottom: 96px;
}

.metcal-hero__badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    background: color-mix(in oklab, var(--marketing-primary, var(--brand-primary)) 72%, rgba(255, 255, 255, 0.08) 28%);
    color: var(--marketing-text-on-surface, #0b162d);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
}

.metcal-hero__title {
    margin-top: 24px;
    margin-bottom: 16px;
    font-size: clamp(2.4rem, 3.4vw, 3.1rem);
    font-weight: 600;
    color: var(--marketing-text-on-surface, #0b162d);
}

.metcal-hero__claim {
    margin: 12px 0 18px;
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--marketing-text-on-surface, #16213d);
}

.metcal-hero__subtitle {
    max-width: 640px;
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--marketing-text-on-surface, #16213d);
}

.metcal-hero__illustration {
    margin-bottom: 24px;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 28px;
    background: linear-gradient(135deg, rgba(18, 28, 52, 0.92) 0%, rgba(28, 54, 96, 0.78) 35%, rgba(64, 118, 189, 0.72) 100%);
    border: 1px solid color-mix(in oklab, var(--marketing-primary, var(--brand-primary)) 46%, rgba(255, 255, 255, 0.18) 54%);
    box-shadow: 0 35px 90px -60px rgba(11, 17, 31, 0.85);
    position: relative;
    overflow: hidden;
}

.metcal-hero__illustration::after {
    content: '';
    position: absolute;
    inset: 16px;
    border-radius: 22px;
    border: 1px dashed rgba(255, 255, 255, 0.32);
    background: radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.25) 0, transparent 45%),
        radial-gradient(circle at 75% 65%, rgba(255, 255, 255, 0.18) 0, transparent 40%);
}

.metcal-hero__bullets {
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: var(--marketing-text-on-surface, #16213d);
}

.metcal-hero__bullets li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.metcal-hero__icon {
    width: 20px;
    height: 20px;
    color: var(--marketing-text-on-surface, #0b162d);
}

.metcal-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 32px;
}

.metcal-hero__actions .uk-button {
    border-radius: 999px;
    padding: 10px 26px;
}

.metcal-hero__actions .uk-button-primary {
    background: color-mix(in oklab, var(--marketing-primary, var(--brand-primary)) 85%, rgba(255, 255, 255, 0.08) 15%);
    border-color: color-mix(in oklab, var(--marketing-primary, var(--brand-primary)) 88%, rgba(255, 255, 255, 0.22) 12%);
}

.metcal-hero__actions .uk-button-primary:hover,
.metcal-hero__actions .uk-button-primary:focus {
    background: color-mix(in oklab, var(--marketing-primary, var(--brand-primary)) 94%, rgba(255, 255, 255, 0.14) 6%);
    color: var(--marketing-on-accent, #fff);
}

.metcal-hero__actions .uk-button-default {
    background: transparent;
    color: var(--marketing-text-on-surface, #0b162d);
    border-color: color-mix(in oklab, var(--marketing-primary, var(--brand-primary)) 42%, rgba(11, 23, 44, 0.36) 58%);
}

body[data-theme='dark'] .metcal-hero__actions .uk-button-default {
    border-color: color-mix(in oklab, var(--marketing-primary, var(--brand-primary)) 42%, rgba(255, 255, 255, 0.36) 58%);
}

.metcal-hero__actions .uk-button-default:hover,
.metcal-hero__actions .uk-button-default:focus {
    background: var(--surface-card, #fff);
    color: var(--marketing-text-on-surface, #0d1730);
}

.metcal-hero__proof {
    margin-top: 24px;
    font-size: 0.95rem;
    color: var(--marketing-text-muted-on-surface, #243253);
}

.metcal-hero__highlight {
    padding: 28px;
    border-radius: 24px;
    background: color-mix(in oklab, rgba(9, 15, 28, 0.84) 68%, var(--marketing-primary, var(--brand-primary)) 32%);
    border: 1px solid color-mix(in oklab, var(--marketing-primary, var(--brand-primary)) 52%, rgba(255, 255, 255, 0.18));
    color: rgba(255, 255, 255, 0.92);
}

.metcal-hero__highlight-title {
    margin-bottom: 12px;
    font-size: 1.2rem;
    font-weight: 600;
    color: #fff;
}

.metcal-hero__highlight-list {
    padding-left: 20px;
    margin: 0;
    list-style: disc;
    color: color-mix(in oklab, #ffffff 84%, var(--marketing-primary, var(--brand-primary)) 16%);
}

.metcal-section {
    padding-top: 96px;
    padding-bottom: 96px;
}

.metcal-section--light {
    background: color-mix(in oklab, var(--marketing-primary, var(--brand-primary)) 6%, rgba(13, 23, 44, 0.06) 94%);
}

.metcal-metteam {
    position: relative;
}

.metcal-metteam .calserver-metcal__inner {
    padding-top: 0;
    padding-bottom: 0;
}

.metcal-metteam__header {
    max-width: 880px;
}

.metcal-metteam__grid {
    margin-top: 48px;
}

.metcal-metteam .metcal-metteam__note {
    margin-top: clamp(40px, 6vw, 72px);
    max-width: 760px;
    position: relative;
    z-index: 2;
}

.metcal-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: color-mix(in oklab, var(--marketing-primary, var(--brand-primary)) 52%, rgba(255, 255, 255, 0.1) 48%);
    color: var(--marketing-text-on-surface, #0b162d);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
}

.metcal-section__title {
    margin-top: 24px;
    font-size: clamp(2rem, 2.6vw, 2.4rem);
    font-weight: 600;
    color: var(--marketing-text-on-surface, #0b162d);
}

.metcal-section__lead {
    margin-top: 12px;
    margin-bottom: 32px;
    max-width: 720px;
    font-size: 1.05rem;
    color: var(--marketing-text-on-surface, #16213d);
}

.metcal-report-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}

.metcal-report-card {
    padding: 28px;
    border-radius: 20px;
    background: var(--surface-card, #ffffff);
    border: 1px solid rgba(12, 22, 40, 0.08);
    box-shadow: 0 28px 70px -48px rgba(12, 22, 40, 0.35);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.metcal-report-card h3 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--marketing-text-on-surface, #0b162d);
}

.metcal-report-card p {
    margin: 0;
    color: var(--marketing-text-on-surface, #16213d);
}

.metcal-report-card ul {
    margin: 0;
    padding-left: 18px;
    color: var(--marketing-text-muted-on-surface, #243253);
}

.metcal-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
}

.metcal-card {
    padding: 28px;
    border-radius: 20px;
    background: var(--surface-card, #ffffff);
    border: 1px solid rgba(15, 25, 46, 0.08);
    box-shadow: 0 30px 70px -40px rgba(12, 22, 40, 0.28);
}

.metcal-card--accent {
    background: color-mix(in oklab, var(--marketing-primary, var(--brand-primary)) 12%, var(--surface-card, rgba(255, 255, 255, 0.92)) 88%);
    border-color: color-mix(in oklab, var(--marketing-primary, var(--brand-primary)) 36%, rgba(12, 22, 40, 0.08) 64%);
}

.metcal-card__title {
    margin-bottom: 8px;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--marketing-text-on-surface, #0b162d);
}

.metcal-card__text {
    margin: 0 0 16px;
    color: var(--marketing-text-on-surface, #16213d);
}

.metcal-card__list {
    margin: 0;
    padding-left: 20px;
    color: var(--marketing-text-muted-on-surface, #243253);
}

.metcal-timeline {
    counter-reset: metcal-step;
    display: grid;
    gap: 20px;
    padding: 0;
    margin: 0 0 40px;
    list-style: none;
}

.metcal-timeline__item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    padding: 20px 24px;
    border-radius: 16px;
    background: var(--surface-card, rgba(255, 255, 255, 0.96));
    border: 1px solid rgba(15, 25, 46, 0.08);
    box-shadow: 0 24px 64px -40px rgba(12, 22, 40, 0.2);
}

.metcal-timeline__badge {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: color-mix(in oklab, var(--marketing-primary, var(--brand-primary)) 72%, rgba(255, 255, 255, 0.12) 28%);
    color: var(--marketing-on-accent, #fff);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.metcal-timeline__body h3 {
    margin: 0 0 6px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--marketing-text-on-surface, #0b162d);
}

.metcal-timeline__body p {
    margin: 0;
    color: var(--marketing-text-on-surface, #16213d);
}

.metcal-migration-transfer {
    margin-top: 32px;
    padding: 28px;
    border-radius: 20px;
    background: color-mix(in oklab, var(--marketing-primary, var(--brand-primary)) 8%, rgba(15, 25, 46, 0.04) 92%);
    border: 1px solid rgba(15, 25, 46, 0.08);
}

.metcal-migration-offer {
    margin-top: 24px;
    padding: 24px;
    border-radius: 18px;
    background: color-mix(in oklab, var(--marketing-primary, var(--brand-primary)) 10%, var(--surface-card, rgba(255, 255, 255, 0.94)) 90%);
    border: 1px solid rgba(15, 25, 46, 0.1);
    box-shadow: 0 20px 48px -36px rgba(12, 22, 40, 0.28);
}

.metcal-migration-offer__title {
    margin: 0 0 12px;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--marketing-text-on-surface, #0b162d);
}

.metcal-migration-offer__list {
    margin: 0;
    padding-left: 20px;
    color: var(--marketing-text-on-surface, #16213d);
}

.metcal-migration-offer__item {
    margin-bottom: 8px;
    line-height: 1.5;
}

.metcal-migration-offer__item:last-child {
    margin-bottom: 0;
}

.metcal-subheading {
    margin-top: 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--marketing-text-on-surface, #0b162d);
}

.metcal-transfer-list {
    margin: 16px 0 0;
    padding-left: 20px;
    color: var(--marketing-text-muted-on-surface, #243253);
}

.metcal-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
}

.metcal-feature {
    padding: 24px;
    border-radius: 18px;
    background: var(--surface-card, rgba(255, 255, 255, 0.96));
    border: 1px solid rgba(15, 25, 46, 0.08);
    color: var(--marketing-text-on-surface, #16213d);
}

.metcal-feature h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.15rem;
    font-weight: 600;
}

.metcal-feature-list,
.metcal-feature-list li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.metcal-feature-list li {
    margin-bottom: 12px;
    color: var(--marketing-text-muted-on-surface, #243253);
}

.metcal-security-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
}

.metcal-security {
    padding: 24px;
    border-radius: 18px;
    background: var(--surface-card, #ffffff);
    border: 1px solid rgba(15, 25, 46, 0.08);
    box-shadow: 0 18px 48px -30px rgba(12, 22, 40, 0.2);
    color: var(--marketing-text-on-surface, #16213d);
}

.metcal-packages {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
}

.metcal-package {
    padding: 28px;
    border-radius: 20px;
    background: var(--surface-card, #ffffff);
    border: 1px solid rgba(15, 25, 46, 0.08);
    box-shadow: 0 24px 64px -40px rgba(12, 22, 40, 0.24);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.metcal-package--highlight {
    background: color-mix(in oklab, var(--marketing-primary, var(--brand-primary)) 12%, var(--surface-card, rgba(255, 255, 255, 0.92)) 88%);
    border-color: color-mix(in oklab, var(--marketing-primary, var(--brand-primary)) 38%, rgba(12, 22, 40, 0.08) 62%);
}

.metcal-package__subtitle {
    margin: 0;
    font-weight: 500;
    color: var(--marketing-text-on-surface, #16213d);
}

.metcal-package__list {
    margin: 0;
    padding-left: 18px;
    color: var(--marketing-text-muted-on-surface, #243253);
}

.metcal-package__outcome {
    margin: 0;
    color: var(--marketing-text-on-surface, #16213d);
}

.metcal-faq [data-uk-accordion] {
    width: 100%;
}

.metcal-faq__item {
    border-radius: 16px;
    background: var(--surface-card, #ffffff);
    border: 1px solid rgba(15, 25, 46, 0.1);
    margin-bottom: 12px;
    overflow: hidden;
}

.metcal-section--light .metcal-faq__item {
    background: var(--surface-card, rgba(255, 255, 255, 0.98));
}

.metcal-faq__toggle {
    display: block;
    padding: 18px 24px;
    font-weight: 600;
    color: var(--marketing-text-on-surface, #0b162d);
    text-decoration: none;
}

.metcal-faq__toggle:focus,
.metcal-faq__toggle:hover {
    background: color-mix(in oklab, var(--marketing-primary, var(--brand-primary)) 10%, rgba(12, 22, 40, 0.06) 90%);
}

.metcal-faq__content {
    padding: 0 24px 24px;
    color: var(--marketing-text-on-surface, #16213d);
}

body[data-theme='dark'] .metcal-section--light {
    background: color-mix(in oklab, #060b16 78%, var(--marketing-primary, var(--brand-primary)) 22%);
}

body[data-theme='dark'] .metcal-card,
body[data-theme='dark'] .metcal-migration-transfer,
body[data-theme='dark'] .metcal-timeline__item,
body[data-theme='dark'] .metcal-feature,
body[data-theme='dark'] .metcal-security,
body[data-theme='dark'] .metcal-package,
body[data-theme='dark'] .metcal-faq__item {
    border-color: rgba(82, 118, 189, 0.35);
    box-shadow: 0 28px 72px -48px rgba(3, 8, 18, 0.85);
}

body[data-theme='dark'] .metcal-card--accent,
body[data-theme='dark'] .metcal-package--highlight {
    border-color: color-mix(in oklab, var(--marketing-primary, var(--brand-primary)) 58%, rgba(255, 255, 255, 0.16));
}

body[data-theme='dark'] .metcal-migration-offer {
    border-color: rgba(88, 128, 199, 0.42);
    box-shadow: 0 24px 64px -46px rgba(3, 8, 18, 0.82);
}

body[data-theme='dark'] .metcal-faq__toggle:hover,
body[data-theme='dark'] .metcal-faq__toggle:focus {
    background: color-mix(in oklab, var(--marketing-primary, var(--brand-primary)) 34%, #0a1426 66%);
}

.metcal-sticky-cta {
    position: fixed;
    inset: auto 24px 24px 24px;
    z-index: 1030;
    transform: translateY(120%);
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0;
    pointer-events: none;
}

.metcal-sticky-cta--dismissed {
    display: none;
}

.metcal-sticky-cta--visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.metcal-sticky-cta__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding: 20px 24px;
    padding-right: 72px;
    border-radius: 18px;
    background: color-mix(in oklab, var(--marketing-primary, var(--brand-primary)) 92%, rgba(10, 16, 26, 0.92) 8%);
    box-shadow: 0 26px 68px -40px rgba(10, 16, 28, 0.65);
    color: var(--marketing-on-accent, #ffffff);
}

.metcal-sticky-cta__dismiss {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.metcal-sticky-cta__dismiss:hover,
.metcal-sticky-cta__dismiss:focus {
    background: rgba(255, 255, 255, 0.2);
    color: #0d1730;
    border-color: rgba(255, 255, 255, 0.65);
}

.metcal-sticky-cta__dismiss:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

.metcal-sticky-cta__copy {
    max-width: 480px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.metcal-sticky-cta__copy strong {
    font-size: 1.1rem;
}

.metcal-sticky-cta__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.metcal-sticky-cta__actions .uk-button {
    border-radius: 999px;
    padding: 10px 24px;
}

.metcal-sticky-cta__actions .uk-button-default {
    background: transparent;
    color: rgba(255, 255, 255, 0.92);
    border-color: color-mix(in oklab, var(--marketing-primary, var(--brand-primary)) 46%, rgba(255, 255, 255, 0.38) 54%);
}

.metcal-sticky-cta__actions .uk-button-default:hover,
.metcal-sticky-cta__actions .uk-button-default:focus {
    background: var(--surface-card, #fff);
    color: var(--marketing-text-on-surface, #0d1730);
}

.metcal-sticky-cta__actions .uk-button-primary {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.42);
}

.metcal-sticky-cta__actions .uk-button-primary:hover,
.metcal-sticky-cta__actions .uk-button-primary:focus {
    background: rgba(255, 255, 255, 0.22);
    color: #0d1730;
}

@media (max-width: 1024px) {
    .metcal-hero {
        padding-top: 72px;
        padding-bottom: 72px;
    }

    .metcal-section {
        padding-top: 72px;
        padding-bottom: 72px;
    }
}

@media (max-width: 960px) {
    .metcal-hero__highlight {
        margin-top: 32px;
    }
}

@media (max-width: 640px) {
    .metcal-hero__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .metcal-card,
    .metcal-feature,
    .metcal-security,
    .metcal-package {
        padding: 22px;
    }

    .metcal-sticky-cta {
        inset: auto 16px 16px 16px;
    }

    .metcal-sticky-cta__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 20px 20px 20px 20px;
        padding-right: 56px;
    }

    .metcal-sticky-cta__copy {
        max-width: none;
    }

    .metcal-sticky-cta__actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 10px;
    }

    .metcal-sticky-cta__actions .uk-button {
        width: 100%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
}

/* ── Future-is-Green page ────────────────────────────────────────
   Token definitions alias --fig-* to --marketing-* scheme tokens.
   Layout CSS below references --fig-* and stays unchanged.
   ─────────────────────────────────────────────────────────────── */

body.marketing-page.future-is-green-theme {
  /* Color tokens → marketing scheme */
  --fig-primary: var(--marketing-primary, #138f52);
  --fig-primary-dark: var(--marketing-link-hover, #0c6f3f);
  --fig-secondary: var(--marketing-on-accent, #ffffff);
  --fig-background: var(--marketing-background, #f0f9f3);
  --fig-surface: var(--marketing-surface-glass, rgba(255, 255, 255, 0.96));
  --fig-surface-alt: var(--marketing-surface, #ffffff);
  --fig-surface-strong: var(--marketing-surface, #ffffff);
  --fig-surface-soft: var(--marketing-surface-glass, rgba(255, 255, 255, 0.92));
  --fig-surface-muted: var(--marketing-surface-accent-soft, rgba(19, 143, 82, 0.08));
  --fig-text: var(--marketing-text-on-surface, #123524);
  --fig-muted: var(--marketing-text-muted-on-surface, #3f5a4b);
  --fig-accent: var(--marketing-accent, #9cd78f);
  --fig-border: var(--marketing-border, rgba(19, 143, 82, 0.18));
  --fig-border-soft: var(--marketing-border-muted, rgba(19, 143, 82, 0.12));
  --fig-border-strong: rgba(19, 143, 82, 0.22);
  /* Layout metrics (page-specific, not in scheme) */
  --fig-logo-size: clamp(56px, 8.4vw, 80px);
  --fig-logo-expanded-scale: 1.35;
  --fig-logo-condensed-scale: 1;
  --fig-anchor-offset: calc(var(--fig-logo-size) * var(--fig-logo-expanded-scale) + 16px);
  /* Derived tints/glass from primary */
  --fig-topbar-bg: color-mix(in srgb, var(--fig-background) 92%, transparent);
  --fig-topbar-border: var(--fig-border);
  --fig-hero-gradient-strong: color-mix(in oklab, var(--fig-primary) 18%, transparent);
  --fig-hero-gradient-soft: color-mix(in oklab, var(--fig-primary) 12%, transparent);
  --fig-tint-soft: color-mix(in oklab, var(--fig-primary) 12%, transparent);
  --fig-tint-strong: color-mix(in oklab, var(--fig-primary) 18%, transparent);
  --fig-pill-bg: color-mix(in oklab, var(--fig-primary) 10%, transparent);
  /* Shadows → marketing scheme */
  --fig-shadow-soft: var(--marketing-shadow-soft, 0 12px 24px -20px rgba(16, 52, 36, 0.35));
  --fig-shadow-medium: var(--marketing-shadow-panel, 0 18px 44px -32px rgba(16, 52, 36, 0.42));
  --fig-shadow-strong: var(--marketing-shadow-card-base, 0 20px 44px -32px rgba(16, 52, 36, 0.45));
  --fig-shadow-card: var(--marketing-shadow-card, 0 32px 60px -40px rgba(16, 52, 36, 0.5));
  --fig-shadow-contact: var(--marketing-shadow-callout, 0 18px 42px -30px rgba(16, 52, 36, 0.42));
  --fig-shadow-stat: var(--marketing-shadow-stat, 0 12px 24px -20px rgba(16, 52, 36, 0.35));
  --fig-shadow-button: var(--marketing-shadow-pill, 0 18px 34px -20px rgba(19, 143, 82, 0.65));
  --fig-shadow-button-hover: 0 20px 36px -18px rgba(12, 111, 63, 0.7);
  --fig-shadow-cta: var(--marketing-shadow-callout, 0 16px 36px -24px rgba(19, 143, 82, 0.85));
  --fig-shadow-cta-hover: 0 20px 36px -20px rgba(19, 143, 82, 0.9);
  /* QR aliases */
  --qr-bg: var(--fig-background);
  --qr-bg-soft: color-mix(in oklab, var(--fig-background) 84%, var(--fig-surface) 16%);
  --qr-card: var(--fig-surface);
  --qr-card-border: var(--fig-border);
  --qr-fg: var(--fig-text);
  --qr-text: var(--fig-text);
  --qr-muted: var(--fig-muted);
  --qr-ring: color-mix(in oklab, var(--fig-primary) 45%, transparent);
  background: var(--fig-background);
  color: var(--fig-text);
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  color-scheme: light;
}

body.marketing-page.future-is-green-theme[data-theme='dark']:not(.high-contrast) {
  --fig-primary: var(--marketing-accent, #4cc986);
  --fig-primary-dark: #34ad6c;
  --fig-secondary: var(--marketing-on-accent, #ffffff);
  --fig-background: var(--marketing-background-dark, #071b12);
  --fig-surface: var(--marketing-surface-glass-dark, rgba(15, 36, 27, 0.96));
  --fig-surface-alt: var(--marketing-surface-dark, #0f2419);
  --fig-surface-strong: #163427;
  --fig-surface-soft: rgba(10, 28, 21, 0.88);
  --fig-surface-muted: rgba(76, 201, 134, 0.2);
  --fig-text: var(--marketing-text-on-surface-dark, #e6fff3);
  --fig-muted: var(--marketing-text-muted-on-surface-dark, #b6d8c9);
  --fig-accent: #7ae3b4;
  --fig-border: rgba(76, 201, 134, 0.3);
  --fig-border-soft: rgba(76, 201, 134, 0.22);
  --fig-border-strong: rgba(76, 201, 134, 0.4);
  --fig-topbar-bg: rgba(7, 23, 18, 0.9);
  --fig-topbar-border: rgba(76, 201, 134, 0.32);
  --fig-hero-gradient-strong: rgba(76, 201, 134, 0.26);
  --fig-hero-gradient-soft: rgba(76, 201, 134, 0.2);
  --fig-tint-soft: rgba(76, 201, 134, 0.26);
  --fig-tint-strong: rgba(76, 201, 134, 0.32);
  --fig-pill-bg: rgba(76, 201, 134, 0.22);
  --fig-shadow-soft: 0 12px 24px -20px rgba(2, 10, 6, 0.65);
  --fig-shadow-medium: 0 18px 44px -32px rgba(2, 12, 7, 0.72);
  --fig-shadow-strong: 0 20px 44px -32px rgba(2, 14, 9, 0.75);
  --fig-shadow-card: 0 32px 60px -40px rgba(2, 12, 8, 0.78);
  --fig-shadow-contact: 0 18px 42px -30px rgba(2, 12, 8, 0.74);
  --fig-shadow-stat: 0 12px 24px -20px rgba(2, 12, 8, 0.62);
  --fig-shadow-button: 0 18px 34px -20px rgba(4, 16, 11, 0.7);
  --fig-shadow-button-hover: 0 20px 36px -18px rgba(4, 18, 12, 0.74);
  --fig-shadow-cta: 0 16px 36px -24px rgba(76, 201, 134, 0.58);
  --fig-shadow-cta-hover: 0 20px 36px -20px rgba(76, 201, 134, 0.62);
  --qr-bg: var(--fig-background);
  --qr-bg-soft: color-mix(in oklab, var(--fig-background) 70%, var(--fig-surface) 30%);
  --qr-card: var(--fig-surface);
  --qr-card-border: var(--fig-border);
  --qr-fg: var(--fig-text);
  --qr-text: var(--fig-text);
  --qr-muted: var(--fig-muted);
  --qr-ring: color-mix(in oklab, var(--fig-primary) 55%, transparent);
  color-scheme: dark;
}

body.marketing-page.future-is-green-theme.high-contrast {
  --qr-bg: #ffffff;
  --qr-bg-soft: #ffffff;
  --qr-card: #ffffff;
  --qr-card-border: #000000;
  --qr-fg: #000000;
  --qr-text: #000000;
  --qr-muted: #000000;
  --qr-ring: rgba(0, 0, 0, 0.6);
  color-scheme: light;
}

body.marketing-page.future-is-green-theme[data-theme='dark'].high-contrast {
  --qr-bg: #000000;
  --qr-bg-soft: #000000;
  --qr-card: #000000;
  --qr-card-border: #ffffff;
  --qr-fg: #ffffff;
  --qr-text: #ffffff;
  --qr-muted: #ffffff;
  --qr-ring: rgba(255, 255, 255, 0.72);
  color-scheme: dark;
}

body.marketing-page.future-is-green-theme .marketing-layout {
  background: transparent;
}

.future-is-green-theme .qr-topbar,
.future-is-green-theme .uk-navbar,
.future-is-green-theme .uk-navbar-container {
  background: var(--fig-topbar-bg);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--fig-topbar-border);
  color: var(--fig-text);
}

.future-is-green-theme .qr-topbar .uk-navbar-toggle {
  margin-right: 1mm;
}

.future-is-green-theme .uk-navbar a {
  color: var(--fig-text);
}

.future-is-green-theme:not([data-theme='dark']) #qr-offcanvas .uk-nav-header {
  color: #000000;
}

.future-is-green-theme .uk-navbar-dropdown {
  width: 720px;
  padding: 16px 0;
  box-sizing: border-box;
}

.future-is-green-theme .uk-navbar-dropdown .uk-nav {
  padding: 8px 0;
}

.future-is-green-theme .uk-navbar-dropdown-nav > li > a {
  padding: 10px 18px;
  line-height: 1.35;
  font-weight: 500;
  border-radius: 6px;
  transition: background-color 0.18s ease;
}

.future-is-green-theme .uk-navbar-dropdown-nav > li + li {
  margin-top: 2px;
}

.future-is-green-theme .uk-navbar-dropdown-nav > li > a:hover,
.future-is-green-theme .uk-navbar-dropdown-nav > li > a:focus {
  background: rgba(0, 0, 0, 0.035);
}

.future-is-green-theme .uk-navbar-dropdown-nav > li > a:focus-visible {
  outline: 2px solid rgba(19, 143, 82, 0.5);
  outline-offset: 2px;
}

.future-is-green-theme .menu-explain {
  padding: 18px;
  border-left: 1px solid rgba(0, 0, 0, 0.06);
  background: #f7f8f9;
  min-height: 220px;
}

.future-is-green-theme .menu-explain h5 {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
}

.future-is-green-theme .menu-explain p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  opacity: 0.92;
}

.future-is-green-theme .menu-explain p.menu-explain__subline {
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.4;
  opacity: 0.78;
}

.future-is-green-theme .menu-explain .explain-pane.uk-hidden {
  display: none !important;
}

.future-is-green-theme .uk-navbar-dropdown h5,
.future-is-green-theme .uk-navbar-dropdown h6 {
  font-weight: 600;
  line-height: 1.2;
}

.future-is-green-theme .uk-navbar-dropdown h6 {
  font-size: 13px;
  opacity: 0.75;
}

.future-is-green-theme section[id] {
  scroll-margin-top: var(--fig-anchor-offset);
}

.future-is-green-theme .fig-scroll-anchor {
  display: block;
  height: 0;
  scroll-margin-top: var(--fig-anchor-offset);
}


.future-is-green-theme .fig-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  text-decoration: none;
  line-height: 1;
  color: var(--fig-text);
}

.future-is-green-theme .fig-logo__image {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--fig-logo-size);
  height: var(--fig-logo-size);
  padding: clamp(8px, 1.4vw, 14px);
  border-radius: 0;
  border: 1px solid rgba(19, 143, 82, 0.08);
  background: var(--fig-secondary);
  box-shadow: 0 18px 36px -28px rgba(19, 143, 82, 0.65);
  overflow: hidden;
  transform: scale(var(--fig-logo-expanded-scale));
  transform-origin: center;
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-radius 0.28s ease;
}

.future-is-green-theme .fig-logo__wordmark {
  display: inline-flex;
  align-items: center;
  margin-left: clamp(12px, 2.4vw, 28px);
}

.future-is-green-theme .fig-logo__wordmark-svg {
  display: block;
  width: clamp(109.2px, 14.3vw, 174.2px);
  height: auto;
  color: var(--fig-text);
}

.future-is-green-theme .fig-logo__wordmark-svg .fig-wordmark__connector {
  opacity: 0.6;
}

.future-is-green-theme .fig-logo__wordmark-svg .fig-wordmark__subtitle {
  opacity: 0.58;
}

.future-is-green-theme .fig-logo__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (max-width: 960px) {
  .future-is-green-theme .fig-logo__wordmark {
    display: none;
  }
}

.future-is-green-theme .qr-topbar.fig-topbar--condensed .fig-logo__image {
  transform: scale(var(--fig-logo-condensed-scale));
  box-shadow: 0 14px 28px -26px rgba(19, 143, 82, 0.55);
  border-radius: 0;
}

.future-is-green-theme .fig-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 959px) {
  .future-is-green-theme .uk-navbar-dropdown {
    width: 100%;
  }

  .future-is-green-theme .menu-explain {
    border-left: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
  }
}

@media (max-width: 640px) {
  body.marketing-page.future-is-green-theme {
    --fig-logo-size: clamp(54px, 18vw, 68px);
    --fig-logo-expanded-scale: 1.35;
  }
}

@media (min-width: 960px) {
  .future-is-green-theme .uk-navbar-nav > li > a {
    padding-left: 12px;
    padding-right: 12px;
  }
}

.future-is-green-theme .fig-cta .fig-primary-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 600;
  color: var(--fig-secondary);
  background: var(--fig-primary);
  box-shadow: var(--fig-shadow-cta);
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.future-is-green-theme .fig-cta .fig-primary-link:hover,
.future-is-green-theme .fig-cta .fig-primary-link:focus {
  background: var(--fig-primary-dark);
  transform: translateY(-1px);
  box-shadow: var(--fig-shadow-cta-hover);
}

.future-is-green-theme .fig-hero {
  position: relative;
  padding-top: 120px;
  padding-bottom: 96px;
  overflow: hidden;
}

.future-is-green-theme .fig-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top left, var(--fig-hero-gradient-strong), transparent 55%),
              radial-gradient(circle at bottom right, var(--fig-hero-gradient-soft), transparent 55%);
  z-index: 0;
}

.future-is-green-theme .fig-hero > .uk-container,
.future-is-green-theme .fig-hero .fig-hero__copy,
.future-is-green-theme .fig-hero .fig-hero__visual {
  position: relative;
  z-index: 1;
}

.future-is-green-theme .fig-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--fig-tint-soft);
  border-radius: 999px;
  color: var(--fig-primary-dark);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.75rem;
}

.future-is-green-theme .fig-hero__title {
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  line-height: 1.15;
  color: var(--fig-text);
  margin-top: 24px;
  margin-bottom: 24px;
}

.future-is-green-theme .fig-hero__subtitle {
  color: var(--fig-muted);
  font-size: 1.1rem;
}

.future-is-green-theme .fig-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 32px 0 28px;
}

.future-is-green-theme .fig-hero__stats-bar {
  margin-top: 48px;
}

.future-is-green-theme .fig-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.future-is-green-theme .fig-button--primary {
  background: var(--fig-primary);
  color: var(--fig-secondary);
  box-shadow: var(--fig-shadow-button);
}

.future-is-green-theme .fig-button--primary:hover,
.future-is-green-theme .fig-button--primary:focus {
  background: var(--fig-primary-dark);
  transform: translateY(-1px);
  box-shadow: var(--fig-shadow-button-hover);
}

.future-is-green-theme .fig-button--ghost {
  background: transparent;
  color: var(--fig-primary);
  border: 1px solid var(--fig-border);
}

.future-is-green-theme .fig-button--ghost:hover,
.future-is-green-theme .fig-button--ghost:focus {
  color: var(--fig-primary-dark);
  border-color: var(--fig-border-strong);
  transform: translateY(-1px);
}

.future-is-green-theme .fig-hero__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.future-is-green-theme .fig-hero__stats li {
  padding: 14px 18px;
  background: var(--fig-surface-soft);
  border-radius: 14px;
  border: 1px solid var(--fig-border);
  color: var(--fig-text);
  box-shadow: var(--fig-shadow-stat);
}

.future-is-green-theme .fig-hero__stat {
  display: flex;
  align-items: center;
  gap: 14px;
}

.future-is-green-theme .fig-hero__stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--fig-tint-soft);
  color: var(--fig-primary);
  flex-shrink: 0;
}

.future-is-green-theme .fig-hero__stat-icon svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.future-is-green-theme .fig-hero__stat-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-weight: 500;
  line-height: 1.2;
}

.future-is-green-theme .fig-hero__stat-label strong {
  font-size: 1.1rem;
  color: var(--fig-primary-dark);
}

.future-is-green-theme .fig-hero__stat-label span {
  color: var(--fig-muted);
}

.future-is-green-theme .fig-hero__card {
  border-radius: 0;
  background: var(--fig-surface-strong);
  border: 1px solid var(--fig-border);
  box-shadow: var(--fig-shadow-card);
}

.future-is-green-theme .fig-hero__card-title {
  font-size: 1.6rem;
  color: var(--fig-text);
  margin-bottom: 16px;
}

.future-is-green-theme .fig-hero__card p {
  color: var(--fig-muted);
}

.future-is-green-theme .fig-hero__card-metric {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 24px 0;
}

.future-is-green-theme .fig-hero__metric-value {
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--fig-primary);
}

.future-is-green-theme .fig-hero__metric-label {
  font-size: 0.95rem;
  color: var(--fig-muted);
}

.future-is-green-theme .fig-hero__card-note {
  font-size: 0.95rem;
}

.future-is-green-theme .fig-trust {
  margin-top: 48px;
  padding: 24px;
  border-radius: 16px;
  background: var(--fig-surface-muted);
  border: 1px solid var(--fig-border);
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: stretch;
  position: relative;
  overflow: hidden;
}

.future-is-green-theme .fig-trust__headline {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  padding: 12px 0;
}

.future-is-green-theme .fig-trust__label {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  border-radius: 999px;
  background: var(--fig-surface);
  border: 1px solid var(--fig-border);
  font-weight: 600;
  color: var(--fig-text);
  white-space: nowrap;
}

.future-is-green-theme .fig-trust__ticker {
  position: relative;
  flex: 1 1 auto;
  min-height: 54px;
  border-radius: 999px;
  background: var(--fig-surface);
  border: 1px solid var(--fig-border-soft);
  overflow: hidden;
  pointer-events: none;
}

.future-is-green-theme .fig-trust__ticker::before,
.future-is-green-theme .fig-trust__ticker::after {
  content: '';
  position: absolute;
  top: 0;
  width: 48px;
  height: 100%;
  z-index: 2;
}

.future-is-green-theme .fig-trust__ticker::before {
  left: 0;
  background: linear-gradient(90deg, var(--fig-surface) 0%, transparent 100%);
}

.future-is-green-theme .fig-trust__ticker::after {
  right: 0;
  background: linear-gradient(270deg, var(--fig-surface) 0%, transparent 100%);
}

.future-is-green-theme .fig-trust__ticker-track {
  display: flex;
  gap: 12px;
  padding: 12px 24px;
  width: max-content;
  animation: fig-trust-marquee 26s linear infinite;
}

.future-is-green-theme .fig-trust__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 18px;
  border-radius: 999px;
  background: var(--fig-surface-soft);
  border: 1px solid var(--fig-border-soft);
  color: var(--fig-muted);
  font-weight: 600;
  font-size: 0.85rem;
  white-space: nowrap;
}

@keyframes fig-trust-marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}


.future-is-green-theme .fig-section {
  position: relative;
  padding: 96px 0;
  background: transparent;
}

.future-is-green-theme .fig-section--contrast {
  background: var(--fig-surface-alt);
  border-top: 1px solid var(--fig-border-soft);
  border-bottom: 1px solid var(--fig-border-soft);
}

.future-is-green-theme .fig-section__intro {
  max-width: 680px;
  margin: 0 auto 48px;
  text-align: center;
}

.future-is-green-theme .fig-section__intro h2 {
  margin-bottom: 16px;
  color: var(--fig-text);
}

.future-is-green-theme .fig-section__intro p {
  color: var(--fig-muted);
}

.future-is-green-theme .fig-benefits-grid {
  display: grid;
  gap: 24px;
}

@media (min-width: 960px) {
  .future-is-green-theme .fig-benefits-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.future-is-green-theme .fig-benefit-card {
  border-radius: 16px;
  background: var(--fig-surface);
  border: 1px solid var(--fig-border);
  padding: 28px;
  box-shadow: var(--fig-shadow-medium);
  text-align: left;
}

.future-is-green-theme .fig-benefit-card__value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--fig-primary);
}

.future-is-green-theme .fig-benefit-card__label {
  font-weight: 500;
  color: var(--fig-text);
  margin-top: 8px;
}

.future-is-green-theme .fig-benefit-card__desc {
  color: var(--fig-muted);
  margin-top: 12px;
}

.future-is-green-theme .fig-process-grid {
  display: grid;
  gap: 24px;
}

@media (min-width: 960px) {
  .future-is-green-theme .fig-process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.future-is-green-theme .fig-process-step {
  padding: 32px;
  border-radius: 18px;
  background: var(--fig-surface);
  border: 1px solid var(--fig-border);
  box-shadow: var(--fig-shadow-strong);
}

.future-is-green-theme .fig-process-step__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--fig-tint-soft);
  color: var(--fig-primary);
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: 16px;
}

.future-is-green-theme .fig-process-step h3 {
  color: var(--fig-text);
  margin-bottom: 12px;
}

.future-is-green-theme .fig-process-step p {
  color: var(--fig-muted);
}

.future-is-green-theme .fig-offerings {
  display: grid;
  gap: 24px;
}

@media (min-width: 960px) {
  .future-is-green-theme .fig-offerings {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.future-is-green-theme .fig-offering-card {
  padding: 28px;
  border-radius: 18px;
  background: var(--fig-surface);
  border: 1px solid var(--fig-border);
  box-shadow: var(--fig-shadow-medium);
}

.future-is-green-theme .fig-offering-card h3 {
  color: var(--fig-text);
  margin-bottom: 16px;
}

.future-is-green-theme .fig-offering-card ul {
  padding-left: 20px;
  margin: 0;
  color: var(--fig-muted);
}

.future-is-green-theme .fig-case-grid {
  display: grid;
  gap: 24px;
}

@media (min-width: 960px) {
  .future-is-green-theme .fig-case-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.future-is-green-theme .fig-case-card {
  padding: 28px;
  border-radius: 18px;
  background: var(--fig-surface);
  border: 1px solid var(--fig-border);
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: var(--fig-shadow-strong);
}

.future-is-green-theme .fig-case-card h3 {
  margin: 0;
  color: var(--fig-text);
}

.future-is-green-theme .fig-case-card ul {
  margin: 0;
  padding-left: 20px;
  color: var(--fig-muted);
}

.future-is-green-theme .fig-case-card .fig-case-card__cta {
  margin-top: auto;
}

.future-is-green-theme .fig-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--fig-primary);
  text-decoration: none;
}

.future-is-green-theme .fig-link:hover,
.future-is-green-theme .fig-link:focus {
  color: var(--fig-primary-dark);
  text-decoration: underline;
}

.future-is-green-theme .fig-technology-grid {
  display: grid;
  gap: 32px;
}

@media (min-width: 960px) {
  .future-is-green-theme .fig-technology-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.future-is-green-theme .fig-technology-grid.fig-technology-grid--is-enhanced {
  display: none;
}

.future-is-green-theme .fig-technology-card {
  padding: 30px;
  border-radius: 18px;
  background: var(--fig-surface);
  border: 1px solid var(--fig-border);
  box-shadow: var(--fig-shadow-strong);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.future-is-green-theme .fig-technology-card h3 {
  margin: 0;
  color: var(--fig-text);
}

.future-is-green-theme .fig-technology-card p {
  margin: 0;
  color: var(--fig-muted);
}

.future-is-green-theme .fig-technology-interactive {
  display: grid;
  gap: 24px;
}

@media (min-width: 960px) {
  .future-is-green-theme .fig-technology-interactive {
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    gap: 32px;
    align-items: stretch;
  }
}

.future-is-green-theme .fig-technology-interactive__nav {
  position: relative;
}

.future-is-green-theme .fig-technology-nav {
  display: grid;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 959px) {
  .future-is-green-theme .fig-technology-nav {
    grid-auto-flow: row;
    grid-auto-rows: auto;
    overflow: visible;
    padding-bottom: 0;
  }

  .future-is-green-theme .fig-technology-nav__item {
    scroll-snap-align: unset;
  }
}

.future-is-green-theme .fig-technology-nav__item {
  display: block;
}

.future-is-green-theme .fig-technology-nav__button {
  width: 100%;
  text-align: left;
  background: var(--fig-surface);
  border: 1px solid var(--fig-border);
  border-radius: 18px;
  padding: 18px 20px;
  font: inherit;
  color: var(--fig-text);
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  box-shadow: var(--fig-shadow-soft);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.future-is-green-theme .fig-technology-nav__button:focus,
.future-is-green-theme .fig-technology-nav__button:hover {
  outline: none;
  border-color: var(--fig-primary);
  box-shadow: var(--fig-shadow-medium);
  transform: translateY(-2px);
}

.future-is-green-theme .fig-technology-nav__button.is-active {
  background: var(--fig-surface-soft);
  border-color: var(--fig-primary);
  box-shadow: var(--fig-shadow-strong);
}

.future-is-green-theme .fig-technology-nav__title {
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.4;
}

.future-is-green-theme .fig-technology-nav__desc {
  color: var(--fig-muted);
  font-size: 0.875rem;
  line-height: 1.4;
}

.future-is-green-theme .fig-technology-interactive__display {
  position: relative;
  transition: min-height 0.3s ease;
}

@media (max-width: 768px) {
  .future-is-green-theme .fig-technology-interactive__display {
    min-height: 0;
  }
}

.future-is-green-theme .fig-technology-panel {
  padding: 32px;
  border-radius: 20px;
  background: var(--fig-surface);
  border: 1px solid var(--fig-border);
  box-shadow: var(--fig-shadow-card);
  display: flex;
  flex-direction: column;
  gap: 18px;
  animation: fig-technology-fade 0.32s ease;
}

.future-is-green-theme .fig-technology-panel:not(.is-active) {
  display: none;
}

.future-is-green-theme .fig-technology-panel .fig-feature-list {
  gap: 16px;
}

@keyframes fig-technology-fade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.future-is-green-theme .fig-feature-list {
  display: grid;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.future-is-green-theme .fig-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--fig-muted);
}

.future-is-green-theme .fig-feature-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--fig-tint-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fig-primary);
  font-weight: 700;
  flex-shrink: 0;
}

.future-is-green-theme .fig-pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 0;
  margin: 24px 0 0;
  list-style: none;
}

.future-is-green-theme .fig-pill-list li {
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--fig-pill-bg);
  color: var(--fig-text);
  font-weight: 500;
}

.future-is-green-theme .fig-pricing-grid {
  display: grid;
  gap: 24px;
}

@media (min-width: 960px) {
  .future-is-green-theme .fig-pricing-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.future-is-green-theme .fig-pricing-card {
  padding: 30px;
  border-radius: 20px;
  background: var(--fig-surface);
  border: 1px solid var(--fig-border);
  box-shadow: var(--fig-shadow-strong);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.future-is-green-theme .fig-pricing-card h3 {
  margin: 0;
  color: var(--fig-text);
}

.future-is-green-theme .fig-pricing-card p {
  margin: 0;
  color: var(--fig-muted);
}

.future-is-green-theme .fig-pricing-card ul {
  margin: 0;
  padding-left: 20px;
  color: var(--fig-muted);
}

.future-is-green-theme .fig-about-grid {
  display: grid;
  gap: 32px;
}

@media (min-width: 960px) {
  .future-is-green-theme .fig-about-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.future-is-green-theme .fig-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 2px solid var(--fig-border);
  padding-left: 20px;
}

.future-is-green-theme .fig-timeline li {
  position: relative;
  margin-bottom: 18px;
  color: var(--fig-muted);
}

.future-is-green-theme .fig-timeline li::before {
  content: '';
  position: absolute;
  left: -28px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--fig-primary);
  box-shadow: 0 0 0 4px var(--fig-tint-strong);
}

.future-is-green-theme .fig-partner-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 16px;
}

.future-is-green-theme .fig-partner-tag {
  padding: 10px 18px;
  border-radius: 14px;
  background: var(--fig-tint-soft);
  color: var(--fig-text);
  font-weight: 500;
}

.future-is-green-theme #faq .uk-accordion-title {
  font-weight: 600;
  color: var(--fig-text);
}

.future-is-green-theme #faq .uk-accordion-content {
  color: var(--fig-muted);
}

.future-is-green-theme .fig-contact-card {
  border-radius: 18px;
  border: 1px solid var(--fig-border);
  padding: 28px;
  background: var(--fig-surface);
  box-shadow: var(--fig-shadow-contact);
}

.future-is-green-theme .fig-contact-card a {
  color: var(--fig-primary);
  font-weight: 600;
}

.future-is-green-theme .fig-footer {
  padding: 24px 0;
  background: var(--fig-surface-muted);
  border-top: 1px solid var(--fig-border);
  color: var(--fig-muted);
}


.future-is-green-theme .fig-footer strong {
  color: #ffffff;
}

.future-is-green-theme .fig-footer .footer-about p,
.future-is-green-theme .fig-footer .footer-contact p {
  color: #ffffff;
}

.future-is-green-theme .fig-footer a {
  color: var(--fig-primary);
  text-decoration: none;
}

.future-is-green-theme .fig-footer .footer-contact a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.future-is-green-theme .fig-footer .footer-contact a .uk-icon,
.future-is-green-theme .fig-footer .footer-contact a [data-uk-icon] {
  color: inherit;
  display: inline-flex;
}

.future-is-green-theme .fig-footer .footer-contact a .uk-icon svg,
.future-is-green-theme .fig-footer .footer-contact a [data-uk-icon] svg {
  stroke: currentColor;
  fill: currentColor;
}

.future-is-green-theme[data-theme='dark']:not(.high-contrast) .fig-footer a {
  color: var(--fig-secondary);
}

.future-is-green-theme .fig-footer a:hover,
.future-is-green-theme .fig-footer a:focus {
  text-decoration: underline;
}

@media (max-width: 959px) {
  .future-is-green-theme .fig-hero {
    padding-top: 88px;
    padding-bottom: 72px;
  }

  .future-is-green-theme .fig-hero__stats {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }

  .future-is-green-theme .fig-section {
    padding: 72px 0;
  }
}

@media (max-width: 639px) {
  .future-is-green-theme .fig-hero__stats {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   CalServer Layout Components (migrated from calserver.css)
   ========================================================= */

/* calServer marketing overrides for landing layout */

body.marketing-page.calserver-layout {
    --calserver-primary: var(--qr-landing-primary);
    --cs-logo-size: clamp(48px, 7vw, 72px);
    --cs-logo-gap: clamp(12px, 2.6vw, 22px);
    --cs-anchor-offset: calc(var(--cs-logo-size) + 32px);
    scroll-behavior: smooth;
}

.marketing-page .hero-bg-calserver {
    background:
        radial-gradient(420px 320px at 12% 18%, color-mix(in oklab, var(--calserver-primary) 36%, color-mix(in oklab, var(--marketing-ink) 25%, transparent)) 0%, transparent 68%),
        radial-gradient(520px 360px at 88% 12%, color-mix(in oklab, color-mix(in oklab, var(--marketing-primary) 35%, var(--marketing-white) 65%) 32%, transparent) 0%, transparent 70%),
        radial-gradient(540px 420px at 48% 108%, color-mix(in oklab, var(--calserver-primary) 28%, color-mix(in oklab, var(--marketing-ink) 80%, transparent)) 0%, transparent 74%),
        var(--qr-hero-gradient);
    background-color: var(--qr-hero-grad-start);
    overflow: hidden;
}

.marketing-page .hero-bg-calserver::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, var(--cs-hero-overlay-top) 0%, var(--cs-hero-overlay-bottom) 100%);
    opacity: 0.82;
}

.marketing-page .calserver-hero-bg__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    mix-blend-mode: screen;
    opacity: 0.82;
    transition: opacity 0.3s ease;
}

.marketing-page .hero-bg-calserver.is-static .calserver-hero-bg__canvas {
    opacity: 0;
    display: none;
}

body.marketing-page.calserver-layout.high-contrast .calserver-hero-bg__canvas,
body.marketing-page.calserver-layout[data-theme="high-contrast"] .calserver-hero-bg__canvas,
body.high-contrast .calserver-hero-bg__canvas {
    display: none !important;
}

.calserver-layout .cs-logo {
    display: inline-flex;
    align-items: center;
    gap: var(--cs-logo-gap);
    color: var(--cs-logo-text);
    font-size: clamp(20px, 2.8vw, 28px);
    font-weight: 700;
    letter-spacing: 0.01em;
    text-decoration: none;
    line-height: 1;
}

.calserver-layout .cs-logo__image {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--cs-logo-size);
    height: var(--cs-logo-size);
    border-radius: 18px;
    border: none;
    background: none;
    box-shadow: none;
    overflow: hidden;
}

.calserver-layout .cs-logo__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.calserver-layout .cs-logo__wordmark {
    display: inline-flex;
    align-items: center;
    color: inherit;
    text-transform: none;
}

.calserver-layout .cs-logo__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 960px) {
    .calserver-layout .cs-logo__wordmark {
        display: none;
    }
}

.calserver-layout .qr-topbar,
.calserver-layout .uk-navbar,
.calserver-layout .uk-navbar-container {
    background: var(--cs-topbar-bg);
    color: var(--cs-topbar-text);
    border-bottom: 1px solid var(--cs-topbar-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.calserver-layout .uk-navbar a {
    color: var(--cs-topbar-text);
    transition: color 0.18s ease;
}

.calserver-layout .uk-navbar a:hover,
.calserver-layout .uk-navbar a:focus {
    color: color-mix(in oklab, var(--calserver-primary) 70%, var(--cs-topbar-text) 30%);
}

.calserver-layout .uk-navbar a:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--calserver-primary) 60%, transparent);
    outline-offset: 2px;
}

.calserver-layout .cs-mega-nav > li > a {
    font-weight: 600;
    padding: 0 16px;
    text-transform: none;
}

.calserver-layout .cs-mega-nav > li > a:hover,
.calserver-layout .cs-mega-nav > li > a:focus {
    color: color-mix(in oklab, var(--calserver-primary) 75%, var(--cs-topbar-text) 25%);
}

.calserver-layout .cs-mega-nav .uk-navbar-dropdown {
    width: 720px;
    padding: 16px 0;
    box-sizing: border-box;
    background: var(--cs-mega-highlight-bg);
    color: var(--cs-topbar-text);
    border: 1px solid var(--cs-topbar-border);
    box-shadow: 0 22px 48px -34px color-mix(in oklab, var(--marketing-ink) 40%, transparent);
}

.calserver-layout .cs-mega-nav .uk-navbar-dropdown-nav > li > a {
    padding: 10px 18px;
    line-height: 1.35;
    font-weight: 500;
    border-radius: 6px;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.calserver-layout .cs-mega-nav .uk-navbar-dropdown-nav > li + li {
    margin-top: 2px;
}

.calserver-layout .cs-mega-nav .uk-navbar-dropdown-nav > li > a:hover,
.calserver-layout .cs-mega-nav .uk-navbar-dropdown-nav > li > a:focus {
    background: var(--cs-mega-highlight-muted);
}

.calserver-layout .cs-mega-nav .uk-navbar-dropdown-nav > li > a:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--calserver-primary) 55%, transparent);
    outline-offset: 2px;
}

.calserver-layout .menu-explain {
    padding: 18px;
    border-left: 1px solid var(--cs-topbar-border);
    background: color-mix(in oklab, var(--cs-mega-highlight-bg) 92%, color-mix(in oklab, var(--marketing-white) 96%, transparent) 8%);
    min-height: 220px;
}

.calserver-layout .menu-explain h5 {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 600;
}

.calserver-layout .menu-explain p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--cs-topbar-muted);
}

.calserver-layout .menu-explain p.menu-explain__subline {
    margin-top: 8px;
    font-size: 12.5px;
    opacity: 0.78;
}

.calserver-layout .menu-explain .explain-pane.uk-hidden {
    display: none !important;
}

.calserver-layout section[id] {
    scroll-margin-top: var(--cs-anchor-offset);
}

.calserver-layout .cs-cta {
    display: flex;
    align-items: center;
}

.calserver-layout .cs-cta .cs-primary-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: 999px;
    background: var(--calserver-primary);
    color: var(--marketing-text-on-primary);
    font-weight: 600;
    box-shadow: 0 16px 36px -24px color-mix(in oklab, var(--calserver-primary) 70%, color-mix(in oklab, var(--marketing-ink) 55%, transparent));
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.calserver-layout .cs-cta .cs-primary-link:hover,
.calserver-layout .cs-cta .cs-primary-link:focus {
    background: color-mix(in oklab, var(--calserver-primary) 82%, var(--marketing-ink) 18%);
    transform: translateY(-1px);
    box-shadow: 0 20px 42px -24px color-mix(in oklab, var(--calserver-primary) 78%, color-mix(in oklab, var(--marketing-ink) 60%, transparent));
}

.calserver-layout .cs-cta .cs-primary-link:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--marketing-white) 70%, var(--calserver-primary) 30%);
    outline-offset: 3px;
}

body.marketing-page.calserver-layout.high-contrast .qr-topbar,
body.marketing-page.calserver-layout.high-contrast .uk-navbar,
body.marketing-page.calserver-layout.high-contrast .uk-navbar-container,
body.marketing-page.calserver-layout[data-theme="high-contrast"] .qr-topbar,
body.marketing-page.calserver-layout[data-theme="high-contrast"] .uk-navbar,
body.marketing-page.calserver-layout[data-theme="high-contrast"] .uk-navbar-container {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

@media (max-width: 960px) {
    .calserver-layout .cs-mega-nav .uk-navbar-dropdown {
        width: 100%;
    }

    .calserver-layout .menu-explain {
        border-left: 0;
        border-top: 1px solid var(--cs-topbar-border);
    }
}

body.marketing-page.calserver-layout.dark-mode:not(.high-contrast) .uk-card-primary,
body.marketing-page.calserver-layout[data-theme="dark"]:not(.high-contrast) .uk-card-primary {
    background: linear-gradient(
            135deg,
            color-mix(in oklab, var(--calserver-primary) 56%, var(--marketing-surface-muted-dark) 44%) 0%,
            color-mix(in oklab, var(--calserver-primary) 82%, var(--marketing-surface-dark) 18%) 100%
        ) !important;
    border-color: color-mix(in oklab, var(--calserver-primary) 60%, color-mix(in oklab, var(--marketing-white) 26%, transparent)) !important;
    color: var(--cs-text-on-dark);
    box-shadow: 0 32px 58px -34px color-mix(in oklab, var(--calserver-primary) 65%, transparent),
        0 24px 44px -32px color-mix(in oklab, var(--marketing-ink) 72%, transparent);
}

body.marketing-page.calserver-layout.dark-mode:not(.high-contrast) .uk-card-primary.uk-card-primary--highlight,
body.marketing-page.calserver-layout[data-theme="dark"]:not(.high-contrast) .uk-card-primary.uk-card-primary--highlight {
    background: linear-gradient(
            145deg,
            color-mix(in oklab, var(--calserver-primary) 68%, var(--marketing-surface-muted-dark) 32%) 0%,
            color-mix(in oklab, var(--calserver-primary) 94%, var(--marketing-ink) 6%) 100%
        ) !important;
    border-color: color-mix(in oklab, var(--calserver-primary) 78%, color-mix(in oklab, var(--marketing-white) 38%, transparent)) !important;
    box-shadow: 0 42px 72px -36px color-mix(in oklab, var(--calserver-primary) 52%, color-mix(in oklab, var(--marketing-primary) 65%, transparent)),
        0 26px 52px -34px color-mix(in oklab, var(--marketing-ink) 82%, transparent);
}

.calserver-layout .calserver-news {
    background: linear-gradient(
            180deg,
            color-mix(in oklab, var(--calserver-primary) 6%, color-mix(in oklab, var(--marketing-white) 94%, transparent)) 0%,
            color-mix(in oklab, var(--marketing-white) 92%, transparent) 100%
    );
    border-top: 1px solid color-mix(in oklab, var(--calserver-primary) 18%, color-mix(in oklab, var(--marketing-ink) 8%, transparent));
    border-bottom: 1px solid color-mix(in oklab, var(--calserver-primary) 18%, color-mix(in oklab, var(--marketing-ink) 8%, transparent));
}

.calserver-layout .calserver-news .uk-heading-medium {
    font-weight: 600;
    color: color-mix(in oklab, var(--calserver-primary) 68%, var(--marketing-ink) 32%);
}

.calserver-layout .calserver-news .uk-button-text {
    color: color-mix(in oklab, var(--calserver-primary) 74%, var(--marketing-text-on-surface) 26%);
}

.calserver-layout .calserver-news .uk-button-text:hover,
.calserver-layout .calserver-news .uk-button-text:focus {
    color: color-mix(in oklab, var(--calserver-primary) 88%, var(--marketing-ink) 12%);
    text-decoration: none;
}

.calserver-layout .calserver-news--listing .marketing-news-card {
    border: 1px solid color-mix(in oklab, var(--calserver-primary) 18%, color-mix(in oklab, var(--marketing-ink) 10%, transparent));
    box-shadow: 0 24px 40px -32px color-mix(in oklab, var(--calserver-primary) 18%, color-mix(in oklab, var(--marketing-ink) 42%, transparent));
}

.calserver-layout .calserver-news--listing .marketing-news-card__date {
    color: color-mix(in oklab, var(--calserver-primary) 32%, var(--marketing-text-muted-on-surface) 68%);
}

.calserver-layout .calserver-news-entry {
    background: color-mix(in oklab, var(--calserver-primary) 6%, color-mix(in oklab, var(--marketing-white) 96%, transparent) 94%);
    border: 1px solid color-mix(in oklab, var(--calserver-primary) 18%, color-mix(in oklab, var(--marketing-ink) 10%, transparent));
    border-radius: 18px;
    padding: clamp(1.5rem, 3vw, 3rem);
    box-shadow: 0 32px 58px -36px color-mix(in oklab, var(--marketing-primary) 28%, transparent),
        0 22px 36px -30px color-mix(in oklab, var(--marketing-ink) 22%, transparent);
}

.calserver-layout .calserver-news-entry .uk-article-meta {
    color: color-mix(in oklab, var(--calserver-primary) 28%, var(--marketing-text-muted-on-surface) 72%);
}

.calserver-layout .calserver-news-entry a {
    color: color-mix(in oklab, var(--calserver-primary) 72%, var(--marketing-text-on-surface) 28%);
}

.calserver-layout .calserver-news-entry a:hover,
.calserver-layout .calserver-news-entry a:focus {
    color: color-mix(in oklab, var(--calserver-primary) 88%, var(--marketing-ink) 12%);
}

body.marketing-page.calserver-layout.dark-mode:not(.high-contrast) .uk-card-primary p,
body.marketing-page.calserver-layout.dark-mode:not(.high-contrast) .uk-card-primary li,
body.marketing-page.calserver-layout.dark-mode:not(.high-contrast) .uk-card-primary .muted,
body.marketing-page.calserver-layout[data-theme="dark"]:not(.high-contrast) .uk-card-primary p,
body.marketing-page.calserver-layout[data-theme="dark"]:not(.high-contrast) .uk-card-primary li,
body.marketing-page.calserver-layout[data-theme="dark"]:not(.high-contrast) .uk-card-primary .muted {
    color: color-mix(in oklab, var(--marketing-white) 92%, color-mix(in oklab, var(--marketing-white) 68%, transparent) 8%) !important;
}

body.marketing-page.calserver-layout.dark-mode:not(.high-contrast) .uk-card-primary .uk-list-bullet > li::before,
body.marketing-page.calserver-layout[data-theme="dark"]:not(.high-contrast) .uk-card-primary .uk-list-bullet > li::before {
    border-color: color-mix(in oklab, var(--marketing-white) 80%, color-mix(in oklab, var(--marketing-primary) 36%, transparent) 20%);
}

body.marketing-page.calserver-layout.dark-mode:not(.high-contrast) .uk-card-primary .uk-button-default,
body.marketing-page.calserver-layout[data-theme="dark"]:not(.high-contrast) .uk-card-primary .uk-button-default {
    background: color-mix(in oklab, var(--marketing-white) 88%, var(--calserver-primary) 12%);
    color: color-mix(in oklab, var(--calserver-primary) 90%, var(--marketing-ink) 10%);
    border-color: color-mix(in oklab, var(--calserver-primary) 42%, color-mix(in oklab, var(--marketing-white) 45%, transparent));
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--calserver-primary) 46%, color-mix(in oklab, var(--marketing-white) 42%, transparent)) inset,
        0 16px 30px -20px color-mix(in oklab, var(--marketing-primary) 60%, transparent);
}

body.marketing-page.calserver-layout.dark-mode:not(.high-contrast) #contact-form .btn.btn-black.uk-button-secondary,
body.marketing-page.calserver-layout[data-theme="dark"]:not(.high-contrast) #contact-form .btn.btn-black.uk-button-secondary {
    background: color-mix(in oklab, var(--calserver-primary) 82%, color-mix(in oklab, var(--marketing-ink) 92%, transparent) 18%);
    color: color-mix(in oklab, var(--marketing-white) 92%, var(--calserver-primary) 8%);
    border-color: color-mix(in oklab, var(--calserver-primary) 70%, color-mix(in oklab, var(--marketing-white) 28%, transparent));
    box-shadow: 0 22px 46px -28px color-mix(in oklab, var(--calserver-primary) 72%, color-mix(in oklab, var(--marketing-ink) 85%, transparent));
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

body.marketing-page.calserver-layout.dark-mode:not(.high-contrast) #contact-form .btn.btn-black.uk-button-secondary:hover,
body.marketing-page.calserver-layout[data-theme="dark"]:not(.high-contrast) #contact-form .btn.btn-black.uk-button-secondary:hover {
    background: color-mix(in oklab, var(--calserver-primary) 94%, color-mix(in oklab, var(--marketing-ink) 90%, transparent) 6%);
    color: var(--marketing-white);
    box-shadow: 0 28px 52px -26px color-mix(in oklab, var(--calserver-primary) 82%, color-mix(in oklab, var(--marketing-ink) 92%, transparent));
}

body.marketing-page.calserver-layout.dark-mode:not(.high-contrast) #contact-form .btn.btn-black.uk-button-secondary:focus-visible,
body.marketing-page.calserver-layout[data-theme="dark"]:not(.high-contrast) #contact-form .btn.btn-black.uk-button-secondary:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--calserver-primary) 78%, color-mix(in oklab, var(--marketing-primary) 45%, transparent));
    outline-offset: 2px;
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--calserver-primary) 68%, color-mix(in oklab, var(--marketing-white) 24%, transparent)),
        0 24px 48px -26px color-mix(in oklab, var(--calserver-primary) 78%, color-mix(in oklab, var(--marketing-ink) 88%, transparent));
}

body.marketing-page.calserver-layout.dark-mode:not(.high-contrast) .uk-card-primary .uk-button-default:hover,
body.marketing-page.calserver-layout[data-theme="dark"]:not(.high-contrast) .uk-card-primary .uk-button-default:hover {
    background: color-mix(in oklab, var(--marketing-white) 74%, var(--calserver-primary) 26%);
    color: color-mix(in oklab, var(--calserver-primary) 94%, var(--marketing-ink) 6%);
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--calserver-primary) 58%, color-mix(in oklab, var(--marketing-white) 48%, transparent)) inset,
        0 22px 36px -22px color-mix(in oklab, var(--marketing-primary) 65%, transparent);
}

body.marketing-page.calserver-layout.dark-mode:not(.high-contrast) .uk-card-primary .uk-button-default:focus-visible,
body.marketing-page.calserver-layout[data-theme="dark"]:not(.high-contrast) .uk-card-primary .uk-button-default:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--calserver-primary) 75%, var(--marketing-white) 25%);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--calserver-primary) 54%, color-mix(in oklab, var(--marketing-white) 40%, transparent));
}

body.marketing-page.calserver-layout.dark-mode:not(.high-contrast) .uk-card-primary .pill--badge,
body.marketing-page.calserver-layout[data-theme="dark"]:not(.high-contrast) .uk-card-primary .pill--badge {
    background: color-mix(in oklab, var(--marketing-white) 90%, var(--calserver-primary) 10%);
    color: color-mix(in oklab, var(--calserver-primary) 78%, var(--marketing-ink) 22%);
    border-color: color-mix(in oklab, var(--calserver-primary) 46%, color-mix(in oklab, var(--marketing-white) 60%, transparent));
    box-shadow: 0 18px 32px -22px color-mix(in oklab, var(--marketing-primary) 55%, transparent);
}

body.marketing-page.calserver-layout.dark-mode:not(.high-contrast) .uk-card .uk-card-title,
body.marketing-page.calserver-layout.dark-mode:not(.high-contrast) .uk-card h3,
body.marketing-page.calserver-layout.dark-mode:not(.high-contrast) .uk-card h4,
body.marketing-page.calserver-layout[data-theme="dark"]:not(.high-contrast) .uk-card .uk-card-title,
body.marketing-page.calserver-layout[data-theme="dark"]:not(.high-contrast) .uk-card h3,
body.marketing-page.calserver-layout[data-theme="dark"]:not(.high-contrast) .uk-card h4 {
    color: var(--cs-text-on-dark) !important;
}

body.marketing-page.calserver-layout:not(.dark-mode):not(.high-contrast) .uk-card .uk-card-title,
body.marketing-page.calserver-layout:not(.dark-mode):not(.high-contrast) .uk-card h3,
body.marketing-page.calserver-layout:not(.dark-mode):not(.high-contrast) .uk-card h4,
body.marketing-page.calserver-layout[data-theme="light"]:not(.high-contrast) .uk-card .uk-card-title,
body.marketing-page.calserver-layout[data-theme="light"]:not(.high-contrast) .uk-card h3,
body.marketing-page.calserver-layout[data-theme="light"]:not(.high-contrast) .uk-card h4 {
    color: color-mix(in oklab, var(--calserver-primary) 22%, var(--marketing-ink) 78%) !important;
}

body.marketing-page.calserver-layout:not(.dark-mode):not(.high-contrast) .uk-card-default,
body.marketing-page.calserver-layout[data-theme="light"]:not(.high-contrast) .uk-card-default {
    background: var(--marketing-white) !important;
}

body.marketing-page.calserver-layout:not(.dark-mode):not(.high-contrast) .uk-card-primary,
body.marketing-page.calserver-layout[data-theme="light"]:not(.high-contrast) .uk-card-primary {
    background: linear-gradient(
            135deg,
            color-mix(in oklab, var(--calserver-primary) 86%, var(--marketing-ink) 14%) 0%,
            color-mix(in oklab, var(--calserver-primary) 70%, var(--marketing-ink) 30%) 100%
        ) !important;
    border-color: color-mix(in oklab, var(--calserver-primary) 65%, transparent) !important;
    color: var(--marketing-text-on-primary);
    box-shadow: 0 26px 46px -30px color-mix(in oklab, var(--calserver-primary) 42%, transparent);
}

body.marketing-page.calserver-layout:not(.dark-mode):not(.high-contrast) .uk-card-primary h3,
body.marketing-page.calserver-layout:not(.dark-mode):not(.high-contrast) .uk-card-primary p,
body.marketing-page.calserver-layout:not(.dark-mode):not(.high-contrast) .uk-card-primary li,
body.marketing-page.calserver-layout[data-theme="light"]:not(.high-contrast) .uk-card-primary h3,
body.marketing-page.calserver-layout[data-theme="light"]:not(.high-contrast) .uk-card-primary p,
body.marketing-page.calserver-layout[data-theme="light"]:not(.high-contrast) .uk-card-primary li {
    color: color-mix(in oklab, var(--marketing-white) 92%, transparent) !important;
}

body.marketing-page.calserver-layout:not(.dark-mode):not(.high-contrast) .uk-card-primary .uk-button-default,
body.marketing-page.calserver-layout[data-theme="light"]:not(.high-contrast) .uk-card-primary .uk-button-default {
    background: var(--marketing-white);
    color: color-mix(in oklab, var(--calserver-primary) 82%, var(--marketing-ink) 18%);
    border-color: transparent;
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--marketing-white) 55%, transparent) inset;
}

body.marketing-page.calserver-layout:not(.dark-mode):not(.high-contrast) .uk-card-primary .uk-button-default:hover,
body.marketing-page.calserver-layout[data-theme="light"]:not(.high-contrast) .uk-card-primary .uk-button-default:hover {
    background: color-mix(in oklab, var(--marketing-white) 88%, var(--calserver-primary) 12%);
    color: color-mix(in oklab, var(--calserver-primary) 88%, var(--marketing-ink) 12%);
}

body.marketing-page.calserver-layout:not(.dark-mode):not(.high-contrast) .uk-card-primary .uk-list-bullet > li::before,
body.marketing-page.calserver-layout[data-theme="light"]:not(.high-contrast) .uk-card-primary .uk-list-bullet > li::before {
    border-color: color-mix(in oklab, var(--marketing-white) 70%, transparent);
}

body.marketing-page.calserver-layout.dark-mode:not(.high-contrast) .site-footer,
body.marketing-page.calserver-layout.dark-mode:not(.high-contrast) .site-footer a,
body.marketing-page.calserver-layout.dark-mode:not(.high-contrast) .footer-section,
body.marketing-page.calserver-layout.dark-mode:not(.high-contrast) .footer-section p,
body.marketing-page.calserver-layout.dark-mode:not(.high-contrast) .footer-section li,
body.marketing-page.calserver-layout.dark-mode:not(.high-contrast) .footer-section strong,
body.marketing-page.calserver-layout[data-theme="dark"]:not(.high-contrast) .site-footer,
body.marketing-page.calserver-layout[data-theme="dark"]:not(.high-contrast) .site-footer a,
body.marketing-page.calserver-layout[data-theme="dark"]:not(.high-contrast) .footer-section,
body.marketing-page.calserver-layout[data-theme="dark"]:not(.high-contrast) .footer-section p,
body.marketing-page.calserver-layout[data-theme="dark"]:not(.high-contrast) .footer-section li,
body.marketing-page.calserver-layout[data-theme="dark"]:not(.high-contrast) .footer-section strong {
    color: var(--marketing-white);
}

body.marketing-page.calserver-layout:not(.dark-mode):not(.high-contrast) .site-footer,
body.marketing-page.calserver-layout:not(.dark-mode):not(.high-contrast) .site-footer a,
body.marketing-page.calserver-layout:not(.dark-mode):not(.high-contrast) .footer-section,
body.marketing-page.calserver-layout:not(.dark-mode):not(.high-contrast) .footer-section p,
body.marketing-page.calserver-layout:not(.dark-mode):not(.high-contrast) .footer-section li,
body.marketing-page.calserver-layout:not(.dark-mode):not(.high-contrast) .footer-section strong,
body.marketing-page.calserver-layout[data-theme="light"]:not(.high-contrast) .site-footer,
body.marketing-page.calserver-layout[data-theme="light"]:not(.high-contrast) .site-footer a,
body.marketing-page.calserver-layout[data-theme="light"]:not(.high-contrast) .footer-section,
body.marketing-page.calserver-layout[data-theme="light"]:not(.high-contrast) .footer-section p,
body.marketing-page.calserver-layout[data-theme="light"]:not(.high-contrast) .footer-section li,
body.marketing-page.calserver-layout[data-theme="light"]:not(.high-contrast) .footer-section strong {
    color: color-mix(in oklab, var(--qr-text, var(--marketing-text-on-surface)) 92%, var(--calserver-primary) 8%);
}

body.marketing-page.calserver-layout:not(.high-contrast) .hero-bg-calserver {
    background:
        radial-gradient(
            580px 360px at 0% 0%,
            color-mix(in oklab, var(--calserver-primary) 40%, transparent),
            transparent
        ),
        radial-gradient(
            520px 320px at 100% 0%,
            color-mix(in oklab, var(--calserver-primary) 30%, transparent),
            transparent
        ),
        linear-gradient(180deg, var(--cs-hero-overlay-top) 0%, var(--cs-hero-overlay-bottom) 100%),
        var(--qr-hero-gradient);
    background-color: var(--qr-hero-grad-start);
    box-shadow: var(--cs-hero-shadow);
}

body.marketing-page.calserver-layout .calserver-hero-grid {
    align-items: stretch;
}

body.marketing-page.calserver-layout .calserver-hero-grid__media {
    display: flex;
}

body.marketing-page.calserver-layout .calserver-hero-grid__media > * {
    width: 100%;
}

body.marketing-page.calserver-layout .calserver-hero-video {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 28px 32px 32px;
    background: linear-gradient(
            132deg,
            color-mix(in oklab, var(--calserver-primary) 34%, var(--marketing-ink) 66%) 0%,
            color-mix(in oklab, var(--calserver-primary) 48%, var(--marketing-ink) 52%) 100%
        );
    border-radius: 26px;
    border: 1px solid color-mix(in oklab, var(--calserver-primary) 46%, transparent);
    box-shadow: 0 26px 60px -32px color-mix(in oklab, var(--marketing-ink) 65%, transparent);
    overflow: hidden;
}

body.marketing-page.calserver-layout .calserver-hero-video__badge {
    align-self: flex-start;
    font-weight: 600;
}

body.marketing-page.calserver-layout .calserver-hero-video__frame {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid color-mix(in oklab, var(--calserver-primary) 38%, transparent);
}

body.marketing-page.calserver-layout .calserver-hero-video__frame::before {
    content: "";
    display: block;
    padding-top: 56.25%;
}

body.marketing-page.calserver-layout .calserver-hero-video__embed {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 24px 28px;
    text-align: center;
    background: linear-gradient(
            144deg,
            color-mix(in oklab, var(--calserver-primary) 28%, color-mix(in oklab, var(--marketing-ink) 86%, transparent)) 0%,
            color-mix(in oklab, var(--calserver-primary) 52%, color-mix(in oklab, var(--marketing-ink) 82%, transparent)) 100%
        );
    color: color-mix(in oklab, var(--marketing-white) 94%, transparent);
}

body.marketing-page.calserver-layout .calserver-hero-video__embed.is-loaded {
    display: block;
    padding: 0;
    background: transparent;
}

body.marketing-page.calserver-layout .calserver-hero-video__frame iframe,
body.marketing-page.calserver-layout .calserver-hero-video__embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

body.marketing-page.calserver-layout .calserver-hero-video__preview {
    display: grid;
    gap: 6px;
    justify-items: center;
    padding: 18px 24px;
    width: 100%;
    border-radius: 16px;
    background: color-mix(in oklab, var(--marketing-white) 8%, transparent);
}

body.marketing-page.calserver-layout .calserver-hero-video__preview-title {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: color-mix(in oklab, var(--marketing-white) 94%, transparent);
}

body.marketing-page.calserver-layout .calserver-hero-video__preview-subtitle {
    font-size: 0.85rem;
    color: color-mix(in oklab, var(--marketing-white) 72%, transparent);
}

body.marketing-page.calserver-layout .calserver-hero-video__hint,
body.marketing-page.calserver-layout .calserver-hero-video__privacy-note,
body.marketing-page.calserver-layout .calserver-hero-video__noscript-note {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: color-mix(in oklab, var(--marketing-white) 86%, transparent);
}

body.marketing-page.calserver-layout .calserver-hero-video__hint {
    max-width: 420px;
}

body.marketing-page.calserver-layout .calserver-hero-video__privacy-note {
    font-size: 0.78rem;
    opacity: 0.9;
}

body.marketing-page.calserver-layout .calserver-hero-video__noscript-note a {
    color: inherit;
    text-decoration: underline;
}

body.marketing-page.calserver-layout .calserver-hero-video__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 18px;
}

body.marketing-page.calserver-layout .calserver-hero-video__meta-text {
    display: grid;
    gap: 4px;
    color: color-mix(in oklab, var(--marketing-white) 92%, transparent);
}

body.marketing-page.calserver-layout .calserver-hero-video__meta-text strong {
    font-size: 1.12rem;
    letter-spacing: 0.01em;
}

body.marketing-page.calserver-layout .calserver-hero-video__meta-text span {
    font-size: 0.95rem;
    color: color-mix(in oklab, var(--marketing-white) 86%, color-mix(in oklab, var(--marketing-white) 40%, transparent) 14%);
}

body.marketing-page.calserver-layout .calserver-hero-video__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid color-mix(in oklab, var(--calserver-primary) 68%, color-mix(in oklab, var(--marketing-white) 45%, transparent));
    background: color-mix(in oklab, var(--calserver-primary) 38%, color-mix(in oklab, var(--marketing-white) 5%, transparent));
    color: color-mix(in oklab, var(--marketing-white) 96%, transparent);
    font-weight: 600;
    text-decoration: none;
    transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, border-color 180ms ease;
}

body.marketing-page.calserver-layout .calserver-hero-video__link:hover,
body.marketing-page.calserver-layout .calserver-hero-video__link:focus-visible {
    background: color-mix(in oklab, var(--calserver-primary) 56%, color-mix(in oklab, var(--marketing-white) 8%, transparent));
    border-color: color-mix(in oklab, var(--calserver-primary) 82%, color-mix(in oklab, var(--marketing-white) 60%, transparent));
    box-shadow: 0 18px 36px -24px color-mix(in oklab, var(--marketing-ink) 45%, transparent);
    transform: translateY(-1px);
}

body.marketing-page.calserver-layout .calserver-hero-video__footnote {
    margin: 0;
    font-size: 0.9rem;
    color: color-mix(in oklab, var(--marketing-white) 78%, color-mix(in oklab, var(--marketing-white) 40%, transparent) 22%);
}

@media (max-width: 959px) {
    body.marketing-page.calserver-layout .calserver-hero-video {
        padding: 24px;
    }

    body.marketing-page.calserver-layout .calserver-hero-video__meta {
        flex-direction: column;
        align-items: stretch;
    }

    body.marketing-page.calserver-layout .calserver-hero-video__link {
        justify-content: center;
    }
}

body.marketing-page.calserver-layout.high-contrast .calserver-hero-video,
body.marketing-page.calserver-layout[data-theme="high-contrast"] .calserver-hero-video {
    background: var(--qr-card);
    border-color: currentColor;
    box-shadow: none;
}

body.marketing-page.calserver-layout.high-contrast .calserver-hero-video__embed,
body.marketing-page.calserver-layout[data-theme="high-contrast"] .calserver-hero-video__embed {
    background: var(--qr-card);
    color: currentColor;
}

body.marketing-page.calserver-layout.high-contrast .calserver-hero-video__hint,
body.marketing-page.calserver-layout[data-theme="high-contrast"] .calserver-hero-video__hint,
body.marketing-page.calserver-layout.high-contrast .calserver-hero-video__privacy-note,
body.marketing-page.calserver-layout[data-theme="high-contrast"] .calserver-hero-video__privacy-note,
body.marketing-page.calserver-layout.high-contrast .calserver-hero-video__noscript-note,
body.marketing-page.calserver-layout[data-theme="high-contrast"] .calserver-hero-video__noscript-note {
    color: currentColor;
}

body.marketing-page.calserver-layout.high-contrast .calserver-hero-video__preview,
body.marketing-page.calserver-layout[data-theme="high-contrast"] .calserver-hero-video__preview {
    background: currentColor;
    color: var(--qr-bg);
}

body.marketing-page.calserver-layout.high-contrast .calserver-hero-video__preview-title,
body.marketing-page.calserver-layout[data-theme="high-contrast"] .calserver-hero-video__preview-title,
body.marketing-page.calserver-layout.high-contrast .calserver-hero-video__preview-subtitle,
body.marketing-page.calserver-layout[data-theme="high-contrast"] .calserver-hero-video__preview-subtitle {
    color: inherit;
}

body.marketing-page.calserver-layout.high-contrast .calserver-hero-video__meta-text,
body.marketing-page.calserver-layout[data-theme="high-contrast"] .calserver-hero-video__meta-text,
body.marketing-page.calserver-layout.high-contrast .calserver-hero-video__meta-text span,
body.marketing-page.calserver-layout[data-theme="high-contrast"] .calserver-hero-video__meta-text span,
body.marketing-page.calserver-layout.high-contrast .calserver-hero-video__footnote,
body.marketing-page.calserver-layout[data-theme="high-contrast"] .calserver-hero-video__footnote {
    color: currentColor;
}

body.marketing-page.calserver-layout.high-contrast .calserver-hero-video__link,
body.marketing-page.calserver-layout[data-theme="high-contrast"] .calserver-hero-video__link {
    color: currentColor;
    background: transparent;
    border-color: currentColor;
    box-shadow: none;
}

body.marketing-page.calserver-layout.high-contrast .calserver-hero-video__link:hover,
body.marketing-page.calserver-layout.high-contrast .calserver-hero-video__link:focus-visible,
body.marketing-page.calserver-layout[data-theme="high-contrast"] .calserver-hero-video__link:hover,
body.marketing-page.calserver-layout[data-theme="high-contrast"] .calserver-hero-video__link:focus-visible {
    background: currentColor;
    color: var(--qr-bg);
}

body.marketing-page.calserver-layout .hero-list li {
    color: var(--qr-muted);
}

body.marketing-page.calserver-layout .pill {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

body.marketing-page.calserver-layout .pill--soft {
    background: color-mix(in oklab, var(--calserver-primary) 15%, transparent);
    color: var(--qr-landing-primary);
}

body.marketing-page.calserver-layout .pill--accent {
    background: var(--qr-card);
    color: var(--qr-landing-primary);
    box-shadow: 0 6px 18px -10px rgb(var(--marketing-black-rgb) / 0.45);
}

body.marketing-page.calserver-layout .pill--badge {
    background: color-mix(in oklab, var(--marketing-white) 86%, transparent);
    color: color-mix(in oklab, var(--calserver-primary) 70%, var(--marketing-ink) 30%);
    border: 1px solid color-mix(in oklab, var(--marketing-white) 60%, transparent);
}

body.marketing-page.calserver-layout .shadow-soft {
    box-shadow: 0 18px 36px -24px color-mix(in oklab, var(--marketing-ink) 35%, transparent),
        0 12px 24px -18px color-mix(in oklab, var(--marketing-ink) 25%, transparent);
    border-radius: 18px;
}

body.marketing-page.calserver-layout .pricing-card--featured {
    position: relative;
    z-index: 1;
    padding: clamp(36px, 3vw, 52px);
    border-radius: 22px;
    box-shadow: 0 28px 64px -28px color-mix(in oklab, var(--marketing-ink) 55%, transparent),
        0 18px 38px -24px color-mix(in oklab, var(--marketing-ink) 40%, transparent);
    transform: none;
    transform-origin: center top;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

body.marketing-page.calserver-layout .pricing-card--featured h3 {
    font-size: clamp(1.7rem, 1.2vw + 1.2rem, 2.2rem);
}

body.marketing-page.calserver-layout .pricing-card--featured p,
body.marketing-page.calserver-layout .pricing-card--featured li {
    font-size: 1.08rem;
}

@media (min-width: 960px) {
    body.marketing-page.calserver-layout .pricing-card--featured {
        transform: scale(1.06) translateY(-10px);
    }

    body.marketing-page.calserver-layout .pricing-card--featured:hover {
        transform: scale(1.08) translateY(-14px);
        box-shadow: 0 36px 78px -28px color-mix(in oklab, var(--marketing-ink) 60%, transparent),
            0 20px 42px -24px color-mix(in oklab, var(--marketing-ink) 45%, transparent);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.marketing-page.calserver-layout .pricing-card--featured {
        transition: none;
        transform: none !important;
    }
}

body.marketing-page.calserver-layout .calserver-highlight {
    padding: 32px 0 28px;
    background: var(--cs-highlight-bg);
    border-top: 1px solid var(--cs-highlight-border-top);
    border-bottom: 1px solid var(--cs-highlight-border-bottom);
    box-shadow: var(--cs-highlight-shadow);
}

body.marketing-page.calserver-layout:not(.high-contrast)
    .calserver-highlight
    .uk-subnav.uk-subnav-pill {
    gap: 12px;
}

body.marketing-page.calserver-layout:not(.high-contrast)
    .calserver-highlight
    .uk-subnav.uk-subnav-pill
    > *
    > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 22px;
    border-radius: 999px;
    background: var(--cs-mode-pill-bg);
    color: var(--cs-mode-pill-text);
    border: 1px solid var(--cs-mode-pill-border);
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    box-shadow: var(--cs-mode-pill-shadow);
    transition: background-color 180ms ease, color 180ms ease,
        border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

body.marketing-page.calserver-layout:not(.high-contrast)
    .calserver-highlight
    .uk-subnav.uk-subnav-pill
    > *
    > a:hover,
body.marketing-page.calserver-layout:not(.high-contrast)
    .calserver-highlight
    .uk-subnav.uk-subnav-pill
    > *
    > a:focus {
    background: var(--cs-mode-pill-hover-bg);
    color: var(--cs-mode-pill-hover-text);
    border-color: var(--cs-mode-pill-hover-border);
    box-shadow: var(--cs-mode-pill-hover-shadow);
    transform: translateY(-1px);
}

body.marketing-page.calserver-layout:not(.high-contrast)
    .calserver-highlight
    .uk-subnav.uk-subnav-pill
    > *
    > a:focus-visible {
    outline: 3px solid var(--cs-mode-pill-focus-ring);
    outline-offset: 3px;
}

body.marketing-page.calserver-layout:not(.high-contrast)
    .calserver-highlight
    .uk-subnav.uk-subnav-pill
    > .uk-active
    > a,
body.marketing-page.calserver-layout:not(.high-contrast)
    .calserver-highlight
    .uk-subnav.uk-subnav-pill
    > .uk-active
    > a:hover,
body.marketing-page.calserver-layout:not(.high-contrast)
    .calserver-highlight
    .uk-subnav.uk-subnav-pill
    > .uk-active
    > a:focus {
    background: var(--cs-mode-pill-active-bg);
    color: var(--cs-mode-pill-active-text);
    border-color: var(--cs-mode-pill-active-border);
    box-shadow: var(--cs-mode-pill-hover-shadow);
    transform: translateY(-1px);
}

body.marketing-page.calserver-layout .calserver-highlight__intro {
    max-width: 720px;
    margin: 0 auto 42px;
}

body.marketing-page.calserver-layout .calserver-highlight__intro p {
    color: color-mix(in oklab, color-mix(in oklab, var(--marketing-white) 92%, transparent) 92%, color-mix(in oklab, var(--marketing-white) 62%, transparent) 8%);
}

.calserver-chat-trigger {
    white-space: nowrap;
}

/* Chat/Cookie styles are consolidated in marketing.css. */

body.marketing-page.calserver-layout:not(.high-contrast)
    :is(
        #modal-standard-hosting,
        #modal-performance-hosting,
        #modal-enterprise-hosting
    )
    .uk-modal-dialog,
body.marketing-page.calserver-layout[data-theme="light"]:not(.high-contrast)
    :is(
        #modal-standard-hosting,
        #modal-performance-hosting,
        #modal-enterprise-hosting
    )
    .uk-modal-dialog,
body.marketing-page.calserver-layout[data-theme="dark"]:not(.high-contrast)
    :is(
        #modal-standard-hosting,
        #modal-performance-hosting,
        #modal-enterprise-hosting
    )
    .uk-modal-dialog {
    --cs-hosting-modal-surface: color-mix(
        in oklab,
        var(--qr-card, var(--marketing-surface-muted)) 94%,
        color-mix(in oklab, var(--marketing-white) 92%, transparent)
    );
    --cs-hosting-modal-text: color-mix(
        in oklab,
        var(--qr-text, var(--marketing-text-on-surface)) 92%,
        color-mix(in oklab, var(--marketing-ink) 8%, transparent)
    );
    --cs-hosting-modal-muted: color-mix(
        in oklab,
        var(--qr-muted, var(--marketing-text-muted-on-surface)) 90%,
        color-mix(in oklab, var(--marketing-ink) 18%, transparent)
    );
    --cs-hosting-modal-border: color-mix(
        in oklab,
        var(--qr-card-border, var(--marketing-border)) 82%,
        transparent
    );
    --cs-hosting-modal-bullet: color-mix(
        in oklab,
        var(--calserver-primary, var(--marketing-primary)) 52%,
        transparent
    );
    --cs-hosting-modal-title: color-mix(
        in oklab,
        var(--calserver-primary, var(--marketing-primary)) 32%,
        var(--cs-hosting-modal-text) 68%
    );
    background: var(--cs-hosting-modal-surface);
    color: var(--cs-hosting-modal-text);
    border: 1px solid var(--cs-hosting-modal-border);
    border-radius: 16px;
    box-shadow: 0 32px 72px -48px color-mix(in oklab, var(--marketing-ink) 45%, transparent),
        0 18px 36px -28px color-mix(in oklab, var(--marketing-ink) 28%, transparent);
}

body.marketing-page.calserver-layout:not(.high-contrast)
    :is(
        #modal-standard-hosting,
        #modal-performance-hosting,
        #modal-enterprise-hosting
    )
    .uk-modal-title,
body.marketing-page.calserver-layout[data-theme="light"]:not(.high-contrast)
    :is(
        #modal-standard-hosting,
        #modal-performance-hosting,
        #modal-enterprise-hosting
    )
    .uk-modal-title,
body.marketing-page.calserver-layout[data-theme="dark"]:not(.high-contrast)
    :is(
        #modal-standard-hosting,
        #modal-performance-hosting,
        #modal-enterprise-hosting
    )
    .uk-modal-title {
    color: var(--cs-hosting-modal-title);
}

body.marketing-page.calserver-layout:not(.high-contrast)
    :is(
        #modal-standard-hosting,
        #modal-performance-hosting,
        #modal-enterprise-hosting
    )
    .uk-list-bullet
    > li::before,
body.marketing-page.calserver-layout[data-theme="light"]:not(.high-contrast)
    :is(
        #modal-standard-hosting,
        #modal-performance-hosting,
        #modal-enterprise-hosting
    )
    .uk-list-bullet
    > li::before,
body.marketing-page.calserver-layout[data-theme="dark"]:not(.high-contrast)
    :is(
        #modal-standard-hosting,
        #modal-performance-hosting,
        #modal-enterprise-hosting
    )
    .uk-list-bullet
    > li::before {
    border-color: var(--cs-hosting-modal-bullet);
}

body.marketing-page.calserver-layout:not(.high-contrast)
    :is(
        #modal-standard-hosting,
        #modal-performance-hosting,
        #modal-enterprise-hosting
    )
    p,
body.marketing-page.calserver-layout[data-theme="light"]:not(.high-contrast)
    :is(
        #modal-standard-hosting,
        #modal-performance-hosting,
        #modal-enterprise-hosting
    )
    p,
body.marketing-page.calserver-layout[data-theme="dark"]:not(.high-contrast)
    :is(
        #modal-standard-hosting,
        #modal-performance-hosting,
        #modal-enterprise-hosting
    )
    p {
    color: var(--cs-hosting-modal-muted);
}

body.marketing-page.calserver-layout.dark-mode:not(.high-contrast)
    #modal-standard-hosting
    .uk-modal-dialog,
body.marketing-page.calserver-layout[data-theme="dark"]:not(.high-contrast)
    #modal-standard-hosting
    .uk-modal-dialog,
body.marketing-page.calserver-layout.dark-mode:not(.high-contrast)
    #modal-performance-hosting
    .uk-modal-dialog,
body.marketing-page.calserver-layout[data-theme="dark"]:not(.high-contrast)
    #modal-performance-hosting
    .uk-modal-dialog,
body.marketing-page.calserver-layout.dark-mode:not(.high-contrast)
    #modal-enterprise-hosting
    .uk-modal-dialog,
body.marketing-page.calserver-layout[data-theme="dark"]:not(.high-contrast)
    #modal-enterprise-hosting
    .uk-modal-dialog {
    --cs-hosting-modal-surface: color-mix(
        in oklab,
        color-mix(in oklab, var(--marketing-ink) 92%, transparent) 82%,
        color-mix(in oklab, var(--calserver-primary, var(--marketing-primary)) 24%, transparent) 18%
    );
    --cs-hosting-modal-text: color-mix(
        in oklab,
        var(--marketing-white) 94%,
        color-mix(in oklab, var(--marketing-white) 72%, transparent) 6%
    );
    --cs-hosting-modal-muted: color-mix(
        in oklab,
        color-mix(in oklab, var(--marketing-white) 92%, transparent) 86%,
        color-mix(in oklab, var(--marketing-white) 64%, transparent) 14%
    );
    --cs-hosting-modal-border: color-mix(
        in oklab,
        color-mix(in oklab, var(--marketing-primary) 50%, transparent) 54%,
        color-mix(in oklab, var(--marketing-white) 22%, transparent) 46%
    );
    --cs-hosting-modal-bullet: color-mix(
        in oklab,
        var(--calserver-primary, var(--marketing-primary)) 78%,
        color-mix(in oklab, var(--marketing-white) 28%, transparent)
    );
    --cs-hosting-modal-title: color-mix(
        in oklab,
        var(--marketing-white) 94%,
        var(--calserver-primary, var(--marketing-primary)) 6%
    );
    background: var(--cs-hosting-modal-surface);
    color: var(--cs-hosting-modal-text);
    border-color: var(--cs-hosting-modal-border);
    box-shadow: 0 42px 88px -52px color-mix(
            in oklab,
            var(--calserver-primary, var(--marketing-primary)) 48%,
            color-mix(in oklab, var(--marketing-ink) 82%, transparent)
        ),
        0 22px 44px -30px color-mix(in oklab, var(--marketing-ink) 70%, transparent);
}

body.marketing-page.calserver-layout.dark-mode:not(.high-contrast)
    :is(
        #modal-standard-hosting,
        #modal-performance-hosting,
        #modal-enterprise-hosting
    )
    p,
body.marketing-page.calserver-layout[data-theme="dark"]:not(.high-contrast)
    :is(
        #modal-standard-hosting,
        #modal-performance-hosting,
        #modal-enterprise-hosting
    )
    p {
    color: var(--cs-hosting-modal-text);
}


body.marketing-page.calserver-layout:not(.dark-mode):not(.high-contrast)
    .calserver-highlight__intro
    p,
body.marketing-page.calserver-layout[data-theme="light"]:not(.high-contrast)
    .calserver-highlight__intro
    p {
    color: color-mix(in oklab, var(--qr-text) 92%, var(--qr-bg) 8%);
}

body.marketing-page.calserver-layout:not(.dark-mode):not(.high-contrast) .calserver-highlight.uk-light,
body.marketing-page.calserver-layout[data-theme="light"]:not(.high-contrast) .calserver-highlight.uk-light {
    color: var(--qr-text);
}

body.marketing-page.calserver-layout:not(.dark-mode):not(.high-contrast)
    .calserver-highlight.uk-light
    :is(h1, h2, h3, h4, h5, h6, .uk-heading-small, .uk-heading-medium, .uk-heading-large, .uk-heading-xlarge,
        .uk-heading-line > span, .uk-text-lead) {
    color: inherit;
}

body.marketing-page.calserver-layout[data-theme="light"]:not(.high-contrast)
    .calserver-highlight.uk-light
    :is(h1, h2, h3, h4, h5, h6, .uk-heading-small, .uk-heading-medium, .uk-heading-large, .uk-heading-xlarge,
        .uk-heading-line > span, .uk-text-lead) {
    color: inherit;
}

body.marketing-page.calserver-layout .calserver-highlight-card {
    background: var(--cs-highlight-card-bg) !important;
    border: 1px solid var(--cs-highlight-card-border) !important;
    border-radius: 22px;
    box-shadow: var(--cs-highlight-card-shadow);
    padding: 32px 36px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: color-mix(in oklab, var(--qr-text) 88%, var(--qr-bg) 12%);
}

body.marketing-page.calserver-layout .calserver-highlight-card .uk-card-title {
    color: color-mix(in oklab, var(--calserver-primary) 32%, var(--qr-text) 68%);
    letter-spacing: -0.01em;
}

body.marketing-page.calserver-layout .calserver-highlight-card .uk-list-bullet > li::before {
    border-color: color-mix(in oklab, var(--calserver-primary) 48%, transparent);
}

body.marketing-page.calserver-layout .calserver-highlight-card__actions {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    align-items: center;
}

body.marketing-page.calserver-layout .calserver-highlight-card__actions .muted {
    font-size: 0.85rem;
}

body.marketing-page.calserver-layout:not(.dark-mode):not(.high-contrast)
    .calserver-highlight-card__actions
    .uk-button-primary,
body.marketing-page.calserver-layout[data-theme="light"]:not(.high-contrast)
    .calserver-highlight-card__actions
    .uk-button-primary {
    background: color-mix(in oklab, var(--calserver-primary) 88%, var(--marketing-ink) 12%);
    border-color: color-mix(in oklab, var(--calserver-primary) 68%, color-mix(in oklab, var(--marketing-ink) 24%, transparent));
    color: var(--marketing-white);
    box-shadow: 0 18px 36px -24px
        color-mix(in oklab, var(--calserver-primary) 68%, color-mix(in oklab, var(--marketing-ink) 70%, transparent));
}

body.marketing-page.calserver-layout:not(.dark-mode):not(.high-contrast)
    .calserver-highlight-card__actions
    .uk-button-primary:hover,
body.marketing-page.calserver-layout[data-theme="light"]:not(.high-contrast)
    .calserver-highlight-card__actions
    .uk-button-primary:hover {
    background: color-mix(in oklab, var(--calserver-primary) 78%, var(--marketing-ink) 22%);
    border-color: color-mix(in oklab, var(--calserver-primary) 72%, color-mix(in oklab, var(--marketing-ink) 34%, transparent));
}

body.marketing-page.calserver-layout:not(.dark-mode):not(.high-contrast)
    .calserver-highlight-card__actions
    .uk-button-primary:focus-visible,
body.marketing-page.calserver-layout[data-theme="light"]:not(.high-contrast)
    .calserver-highlight-card__actions
    .uk-button-primary:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--calserver-primary) 75%, var(--marketing-white) 25%);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--calserver-primary) 54%, color-mix(in oklab, var(--marketing-ink) 18%, transparent));
}

body.marketing-page.calserver-layout:not(.dark-mode):not(.high-contrast)
    .calserver-highlight-card__actions
    .uk-button-default,
body.marketing-page.calserver-layout[data-theme="light"]:not(.high-contrast)
    .calserver-highlight-card__actions
    .uk-button-default {
    background: var(--marketing-white);
    color: color-mix(in oklab, var(--calserver-primary) 82%, var(--marketing-ink) 18%);
    border-color: color-mix(in oklab, var(--calserver-primary) 32%, color-mix(in oklab, var(--marketing-ink) 8%, transparent));
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--calserver-primary) 26%, color-mix(in oklab, var(--marketing-ink) 16%, transparent)) inset,
        0 14px 28px -24px color-mix(in oklab, var(--marketing-ink) 32%, transparent);
}

body.marketing-page.calserver-layout:not(.dark-mode):not(.high-contrast)
    .calserver-highlight-card__actions
    .uk-button-default:hover,
body.marketing-page.calserver-layout[data-theme="light"]:not(.high-contrast)
    .calserver-highlight-card__actions
    .uk-button-default:hover {
    background: color-mix(in oklab, var(--marketing-white) 86%, var(--calserver-primary) 14%);
    color: color-mix(in oklab, var(--calserver-primary) 88%, var(--marketing-ink) 12%);
    border-color: color-mix(in oklab, var(--calserver-primary) 46%, color-mix(in oklab, var(--marketing-ink) 16%, transparent));
}

body.marketing-page.calserver-layout:not(.dark-mode):not(.high-contrast)
    .calserver-highlight-card__actions
    .uk-button-default:focus-visible,
body.marketing-page.calserver-layout[data-theme="light"]:not(.high-contrast)
    .calserver-highlight-card__actions
    .uk-button-default:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--calserver-primary) 62%, var(--marketing-white) 38%);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--calserver-primary) 32%, color-mix(in oklab, var(--marketing-ink) 22%, transparent));
}

@media (max-width: 959px) {
    body.marketing-page.calserver-layout .calserver-highlight-card {
        padding: 28px;
    }
}

@media (max-width: 639px) {
    body.marketing-page.calserver-layout .calserver-highlight-card__actions {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    body.marketing-page.calserver-layout .calserver-highlight-card__actions .uk-button {
        width: 100%;
        justify-content: center;
    }
}

body.marketing-page.calserver-layout .calserver-section-glow {
    position: relative;
    overflow: hidden;
    z-index: 0;
}

body.marketing-page.calserver-layout .calserver-section-glow > * {
    position: relative;
    z-index: 1;
}

body.marketing-page.calserver-layout .calserver-section-glow::before,
body.marketing-page.calserver-layout .calserver-section-glow::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 160px;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        color-mix(in oklab, var(--calserver-primary) 16%, transparent) 0%,
        transparent 100%
    );
    z-index: 0;
}

body.marketing-page.calserver-layout .calserver-section-glow::before {
    left: 0;
}

body.marketing-page.calserver-layout .calserver-section-glow::after {
    right: 0;
    transform: scaleX(-1);
}

body.marketing-page.calserver-layout .calserver-stats-strip {
    display: grid;
    gap: 18px;
    position: relative;
    z-index: 1;
}

@media (min-width: 640px) {
    body.marketing-page.calserver-layout .calserver-stats-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

body.marketing-page.calserver-layout .calserver-stats-strip__item {
    padding: 18px 20px;
    border-radius: 18px;
    background: var(--cs-highlight-card-bg);
    border: 1px solid var(--cs-highlight-card-border);
    box-shadow: var(--cs-highlight-card-shadow);
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 120px;
}

body.marketing-page.calserver-layout .calserver-stats-strip__header {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
}

body.marketing-page.calserver-layout .calserver-stats-strip__title-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

body.marketing-page.calserver-layout .calserver-stats-strip__value {
    font-size: clamp(2rem, 2.2vw + 1.2rem, 3rem);
    font-weight: 700;
    color: var(--qr-landing-primary);
    letter-spacing: -0.01em;
    flex-shrink: 0;
}

body.marketing-page.calserver-layout.dark-mode:not(.high-contrast) .calserver-stats-strip__value,
body.marketing-page.calserver-layout[data-theme="dark"]:not(.high-contrast) .calserver-stats-strip__value {
    color: var(--qr-text);
}

body.marketing-page.calserver-layout:not(.dark-mode):not(.high-contrast) .calserver-stats-strip__value,
body.marketing-page.calserver-layout[data-theme="light"]:not(.high-contrast) .calserver-stats-strip__value {
    color: color-mix(in oklab, var(--calserver-primary) 86%, var(--marketing-ink) 14%);
}

body.marketing-page.calserver-layout .calserver-stats-strip__title {
    color: var(--qr-text);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.3;
}

body.marketing-page.calserver-layout .calserver-stats-strip__label {
    color: var(--qr-muted);
    font-size: 0.95rem;
    line-height: 1.35;
    display: block;
}

body.marketing-page.calserver-layout .calserver-stats-strip__benefit {
    margin: 8px 0 0;
    color: var(--qr-text);
    font-size: 0.95rem;
    line-height: 1.45;
}

body.marketing-page.calserver-layout .calserver-stats-strip__tooltip {
    color: var(--qr-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    cursor: help;
}

body.marketing-page.calserver-layout .calserver-stats-strip__tooltip:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--calserver-primary) 65%, transparent);
    outline-offset: 2px;
}

body.marketing-page.calserver-layout .calserver-logo-marquee {
    margin-top: 34px;
    position: relative;
    overflow: hidden;
    padding: 6px 0;
}

body.marketing-page.calserver-layout .calserver-logo-marquee::before,
body.marketing-page.calserver-layout .calserver-logo-marquee::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(90deg, var(--qr-card), transparent);
}

body.marketing-page.calserver-layout .calserver-logo-marquee::before {
    left: 0;
}

body.marketing-page.calserver-layout .calserver-logo-marquee::after {
    right: 0;
    transform: scaleX(-1);
}

body.marketing-page.calserver-layout .calserver-logo-marquee__track {
    display: flex;
    align-items: center;
    gap: 48px;
    animation: calserver-marquee 26s linear infinite;
}

body.marketing-page.calserver-layout .calserver-logo-marquee__item {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 130px;
    padding: 10px 24px;
    border-radius: 999px;
    background: color-mix(in oklab, var(--calserver-primary) 16%, transparent);
    border: 1px solid color-mix(in oklab, var(--calserver-primary) 32%, transparent);
    color: color-mix(in oklab, var(--calserver-primary) 85%, var(--marketing-text-on-surface-dark) 15%);
    font-weight: 600;
    letter-spacing: 0.01em;
    text-align: center;
    opacity: 0.96;
}

body.marketing-page.calserver-layout .calserver-logo-marquee__item img {
    max-height: 40px;
    width: auto;
    filter: drop-shadow(0 4px 10px color-mix(in oklab, var(--marketing-ink) 25%, transparent));
}

body.marketing-page.calserver-layout .calserver-pricing__header {
    gap: 12px;
}

body.marketing-page.calserver-layout .calserver-pricing-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
    padding: clamp(24px, 3vw, 32px);
}

body.marketing-page.calserver-layout .calserver-pricing-card .uk-list {
    margin-top: 4px;
    flex-grow: 1;
}

body.marketing-page.calserver-layout .calserver-pricing-card .uk-button {
    margin-top: auto;
    align-self: center;
}

body.marketing-page.calserver-layout .calserver-pricing-card .uk-text-bold {
    font-size: clamp(1.4rem, 1.1vw + 1.1rem, 2rem);
}

@keyframes calserver-marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.marketing-page.calserver-layout .calserver-logo-marquee__track {
        animation: none;
    }
}

body.marketing-page.calserver-layout #trust {
    --trust-step-accent: color-mix(in oklab, var(--calserver-primary) 72%, var(--qr-text) 28%);
    --trust-axis-color: color-mix(in oklab, var(--trust-step-accent) 45%, var(--qr-bg) 55%);
    --trust-step-marker-bg: color-mix(in oklab, var(--qr-bg) 78%, var(--trust-step-accent) 22%);
    --trust-step-marker-icon: color-mix(in oklab, var(--trust-step-accent) 72%, var(--qr-text) 28%);
    --trust-step-surface: color-mix(in oklab, var(--qr-card) 18%, transparent 82%);
    --trust-step-surface-hover: color-mix(in oklab, var(--trust-step-marker-bg) 30%, var(--trust-step-surface) 70%);
}

body.marketing-page.calserver-layout #trust .trust-story {
    position: relative;
    list-style: none;
    margin: 44px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 36px;
}

body.marketing-page.calserver-layout #trust .trust-story__lead {
    margin: 12px 0 0;
    font-size: 1.1rem;
    line-height: 1.7;
    color: color-mix(in oklab, var(--qr-text) 78%, var(--qr-bg) 22%);
}

body.marketing-page.calserver-layout #trust .trust-story__step {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 72px) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    padding: 8px 0;
    border-radius: 20px;
    outline: none;
    scroll-margin: 96px;
    transition: color 220ms ease;
}

body.marketing-page.calserver-layout #trust .trust-story__marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    min-width: 64px;
}

body.marketing-page.calserver-layout #trust .trust-story__connector {
    width: 2px;
    flex: 1 1 24px;
    min-height: 24px;
    background: var(--trust-axis-color);
    border-radius: 999px;
    transition: background 220ms ease;
}

body.marketing-page.calserver-layout #trust .trust-story__step:first-child .trust-story__connector--before,
body.marketing-page.calserver-layout #trust .trust-story__step:last-child .trust-story__connector--after {
    display: none;
}

body.marketing-page.calserver-layout #trust .trust-story__badge {
    position: relative;
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border-radius: 999px;
    background: var(--trust-step-marker-bg);
    border: 2px solid color-mix(in oklab, var(--trust-step-accent) 80%, transparent);
    color: var(--trust-step-marker-icon);
    transition: transform 220ms ease, background 220ms ease, border-color 220ms ease, color 220ms ease;
}

body.marketing-page.calserver-layout #trust .trust-story__badge::after {
    content: attr(data-step-index);
    position: absolute;
    inset-inline-end: -8px;
    inset-block-end: -8px;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: color-mix(in oklab, var(--trust-step-accent) 75%, var(--qr-bg) 25%);
    color: var(--marketing-white);
    font-weight: 600;
    font-size: 0.9rem;
    display: grid;
    place-items: center;
    box-shadow: 0 0 0 2px var(--qr-bg);
    transition: background 220ms ease, color 220ms ease, box-shadow 220ms ease;
}

body.marketing-page.calserver-layout #trust .trust-story__badge-icon {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    color: inherit;
}

body.marketing-page.calserver-layout #trust .trust-story__badge-icon svg {
    width: 24px;
    height: 24px;
}

body.marketing-page.calserver-layout #trust .trust-story__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

body.marketing-page.calserver-layout #trust .trust-story__content {
    background: var(--trust-step-surface);
    border-radius: 18px;
    padding: 18px 22px;
    border: 1px solid color-mix(in oklab, var(--qr-text) 12%, transparent);
    transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

body.marketing-page.calserver-layout #trust .trust-story__title {
    margin: 0 0 12px;
    font-size: 1.35rem;
    line-height: 1.35;
}

body.marketing-page.calserver-layout #trust .trust-story__text {
    margin: 0;
    color: color-mix(in oklab, var(--qr-text) 74%, var(--qr-bg) 26%);
    line-height: 1.65;
}

body.marketing-page.calserver-layout #trust .trust-story__step:hover .trust-story__content,
body.marketing-page.calserver-layout #trust .trust-story__step:focus-visible .trust-story__content,
body.marketing-page.calserver-layout #trust .trust-story__step:focus-within .trust-story__content {
    background: var(--trust-step-surface-hover);
    border-color: color-mix(in oklab, var(--trust-step-accent) 65%, transparent);
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--trust-step-accent) 45%, transparent);
}

body.marketing-page.calserver-layout #trust .trust-story__step:hover .trust-story__badge,
body.marketing-page.calserver-layout #trust .trust-story__step:focus-visible .trust-story__badge,
body.marketing-page.calserver-layout #trust .trust-story__step:focus-within .trust-story__badge {
    background: color-mix(in oklab, var(--trust-step-marker-bg) 40%, var(--trust-step-accent) 60%);
    border-color: color-mix(in oklab, var(--trust-step-accent) 80%, var(--marketing-white) 20%);
    color: color-mix(in oklab, var(--marketing-white) 70%, var(--trust-step-marker-icon) 30%);
    transform: translateY(-2px);
}

body.marketing-page.calserver-layout #trust .trust-story__step:hover .trust-story__badge::after,
body.marketing-page.calserver-layout #trust .trust-story__step:focus-visible .trust-story__badge::after,
body.marketing-page.calserver-layout #trust .trust-story__step:focus-within .trust-story__badge::after {
    background: color-mix(in oklab, var(--trust-step-accent) 88%, var(--qr-bg) 12%);
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--qr-bg) 85%, transparent 15%);
}

body.marketing-page.calserver-layout #trust .trust-story__step:hover .trust-story__connector,
body.marketing-page.calserver-layout #trust .trust-story__step:focus-visible .trust-story__connector,
body.marketing-page.calserver-layout #trust .trust-story__step:focus-within .trust-story__connector {
    background: color-mix(in oklab, var(--trust-step-accent) 65%, transparent);
}

body.marketing-page.calserver-layout #trust .trust-story__step:focus-visible {
    outline: 3px solid color-mix(in oklab, var(--trust-step-accent) 68%, transparent);
    outline-offset: 10px;
}

body.marketing-page.calserver-layout #trust .trust-story__closing {
    background: color-mix(in oklab, var(--qr-card) 88%, var(--calserver-primary) 12%);
    border-radius: 24px;
    padding: 36px 40px;
    margin-top: 52px;
    box-shadow: none;
    border: 1px solid color-mix(in oklab, var(--trust-step-accent) 35%, transparent);
}

body.marketing-page.calserver-layout #trust .trust-story__closing-title {
    margin: 0 0 12px;
    font-size: 1.6rem;
    line-height: 1.4;
}

body.marketing-page.calserver-layout #trust .trust-story__closing-text {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.7;
    color: color-mix(in oklab, var(--qr-text) 78%, var(--qr-bg) 22%);
}

body.marketing-page.calserver-layout #trust .trust-story__cta-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-start;
}

body.marketing-page.calserver-layout #trust .trust-story__cta-group .uk-button,
body.marketing-page.calserver-layout #trust .trust-story__cta-group .btn {
    flex: 1 1 auto;
    min-width: 180px;
    text-align: center;
}

body.high-contrast #trust,
body[data-theme="dark"].high-contrast #trust {
    --trust-step-surface: transparent;
    --trust-step-surface-hover: rgb(var(--marketing-black-rgb) / 0.08);
    --trust-axis-color: currentColor;
    --trust-step-marker-bg: transparent;
    --trust-step-marker-icon: currentColor;
}

body[data-theme="dark"].high-contrast #trust {
    --trust-step-surface-hover: color-mix(in oklab, var(--marketing-white) 10%, transparent);
}

body.high-contrast #trust .trust-story__badge,
body[data-theme="dark"].high-contrast #trust .trust-story__badge {
    border-color: currentColor;
}

body.high-contrast #trust .trust-story__badge::after {
    background: var(--marketing-black);
    color: var(--marketing-white);
    box-shadow: none;
}

body[data-theme="dark"].high-contrast #trust .trust-story__badge::after {
    background: var(--marketing-white);
    color: var(--marketing-black);
}

body.high-contrast #trust .trust-story__connector,
body[data-theme="dark"].high-contrast #trust .trust-story__connector {
    background: currentColor;
}

body.high-contrast #trust .trust-story__step:focus-visible,
body[data-theme="dark"].high-contrast #trust .trust-story__step:focus-visible {
    outline-color: currentColor;
}

body.high-contrast #trust .trust-story__content,
body[data-theme="dark"].high-contrast #trust .trust-story__content {
    border-color: currentColor;
    box-shadow: none;
}

body.high-contrast #trust .trust-story__step:hover .trust-story__badge,
body.high-contrast #trust .trust-story__step:focus-visible .trust-story__badge,
body.high-contrast #trust .trust-story__step:focus-within .trust-story__badge,
body[data-theme="dark"].high-contrast #trust .trust-story__step:hover .trust-story__badge,
body[data-theme="dark"].high-contrast #trust .trust-story__step:focus-visible .trust-story__badge,
body[data-theme="dark"].high-contrast #trust .trust-story__step:focus-within .trust-story__badge {
    background: transparent;
    color: currentColor;
    transform: none;
}

body.high-contrast #trust .trust-story__step:hover .trust-story__badge::after,
body.high-contrast #trust .trust-story__step:focus-visible .trust-story__badge::after,
body.high-contrast #trust .trust-story__step:focus-within .trust-story__badge::after {
    background: var(--marketing-black);
    color: var(--marketing-white);
}

body[data-theme="dark"].high-contrast #trust .trust-story__step:hover .trust-story__badge::after,
body[data-theme="dark"].high-contrast #trust .trust-story__step:focus-visible .trust-story__badge::after,
body[data-theme="dark"].high-contrast #trust .trust-story__step:focus-within .trust-story__badge::after {
    background: var(--marketing-white);
    color: var(--marketing-black);
}

body.high-contrast #trust .trust-story__step:hover .trust-story__connector,
body.high-contrast #trust .trust-story__step:focus-visible .trust-story__connector,
body.high-contrast #trust .trust-story__step:focus-within .trust-story__connector,
body[data-theme="dark"].high-contrast #trust .trust-story__step:hover .trust-story__connector,
body[data-theme="dark"].high-contrast #trust .trust-story__step:focus-visible .trust-story__connector,
body[data-theme="dark"].high-contrast #trust .trust-story__step:focus-within .trust-story__connector {
    background: currentColor;
}

@media (min-width: 960px) {
    body.marketing-page.calserver-layout #trust .trust-story {
        flex-direction: row;
        align-items: stretch;
        gap: 40px;
    }

    body.marketing-page.calserver-layout #trust .trust-story__step {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        text-align: center;
        gap: 24px;
        padding: 16px 12px 24px;
    }

    body.marketing-page.calserver-layout #trust .trust-story__marker {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width: 100%;
        gap: 18px;
    }

    body.marketing-page.calserver-layout #trust .trust-story__connector {
        min-height: 2px;
        height: 2px;
        width: 100%;
    }

    body.marketing-page.calserver-layout #trust .trust-story__content {
        max-width: 360px;
    }

    body.marketing-page.calserver-layout #trust .trust-story__title {
        margin: 0 0 10px;
    }
}

@media (max-width: 1200px) {
    body.marketing-page.calserver-layout #trust .trust-story__closing {
        padding: 32px;
    }
}

@media (max-width: 959px) {
    body.marketing-page.calserver-layout #trust .trust-story {
        margin-top: 36px;
        gap: 32px;
    }

    body.marketing-page.calserver-layout #trust .trust-story__step {
        grid-template-columns: minmax(0, 60px) minmax(0, 1fr);
        gap: 18px;
        padding: 4px 0;
    }

    body.marketing-page.calserver-layout #trust .trust-story__badge {
        width: 54px;
        height: 54px;
    }

    body.marketing-page.calserver-layout #trust .trust-story__badge::after {
        width: 24px;
        height: 24px;
        font-size: 0.8rem;
    }

    body.marketing-page.calserver-layout #trust .trust-story__content {
        padding: 16px 18px;
    }

    body.marketing-page.calserver-layout #trust .trust-story__closing {
        margin-top: 44px;
    }
}

@media (max-width: 640px) {
    body.marketing-page.calserver-layout #trust .trust-story__lead {
        font-size: 1rem;
    }

    body.marketing-page.calserver-layout #trust .trust-story__title {
        font-size: 1.2rem;
    }

    body.marketing-page.calserver-layout #trust .trust-story__text {
        font-size: 1rem;
    }

    body.marketing-page.calserver-layout #trust .trust-story__cta-group {
        flex-direction: column;
        align-items: stretch;
    }
}

body.marketing-page.calserver-layout .muted {
    color: color-mix(in oklab, var(--qr-text) 60%, var(--qr-bg) 40%);
}

body.marketing-page.calserver-layout .quick-cta {
    border-radius: 18px;
    background: color-mix(in oklab, var(--calserver-primary) 10%, transparent);
    padding: 24px 32px;
}

body.marketing-page.calserver-layout .uk-card-hover {
    transition: transform 220ms ease, box-shadow 220ms ease;
}

body.marketing-page.calserver-layout .uk-card-hover:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 48px -28px color-mix(in oklab, var(--marketing-ink) 45%, transparent);
}

body.marketing-page.calserver-layout .feature-nav {
    margin: 0 auto 12px;
    max-width: 1024px;
}

body.marketing-page.calserver-layout .feature-nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.marketing-page.calserver-layout .feature-nav__pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    border-radius: 999px;
    background: color-mix(in oklab, var(--calserver-primary) 10%, transparent);
    color: var(--qr-landing-primary);
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    box-shadow: 0 1px 0 0 color-mix(in oklab, var(--marketing-white) 30%, transparent) inset,
        0 14px 28px -24px color-mix(in oklab, var(--marketing-primary) 90%, transparent);
    transition: background-color 180ms ease, color 180ms ease,
        transform 180ms ease, box-shadow 180ms ease;
}

body.marketing-page.calserver-layout .feature-nav__pill.is-active {
    background: var(--qr-landing-primary);
    color: var(--marketing-white);
    box-shadow: 0 1px 0 0 color-mix(in oklab, var(--marketing-white) 40%, transparent) inset,
        0 20px 34px -24px color-mix(in oklab, var(--marketing-primary) 95%, transparent);
}

body.marketing-page.calserver-layout .feature-nav__pill:hover,
body.marketing-page.calserver-layout .feature-nav__pill:focus {
    background: var(--qr-landing-primary);
    color: var(--marketing-white);
    transform: translateY(-2px);
    box-shadow: 0 18px 32px -22px color-mix(in oklab, var(--marketing-primary) 90%, transparent);
}

body.marketing-page.calserver-layout .feature-slider {
    margin-top: 40px;
}

body.marketing-page.calserver-layout .feature-slider__list > li {
    display: flex;
    position: relative;
    padding: 12px;
}

body.marketing-page.calserver-layout .feature-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--cs-card-dark);
    border: 1px solid var(--cs-card-dark-border);
    border-radius: 14px;
    padding: 24px;
    color: var(--cs-text-on-dark);
    box-shadow: 0 12px 24px -12px rgb(var(--marketing-black-rgb) / 0.35),
        0 6px 12px -8px rgb(var(--marketing-black-rgb) / 0.25);
    transition: background-color 250ms ease, border-color 250ms ease, box-shadow 250ms ease,
        transform 250ms ease, opacity 200ms ease;
}

body.marketing-page.calserver-layout .feature-card__title,
body.marketing-page.calserver-layout .feature-card p,
body.marketing-page.calserver-layout .feature-card li {
    color: var(--cs-text-on-dark);
}

body.marketing-page.calserver-layout .feature-card .uk-list-bullet > li::before {
    border-color: var(--cs-text-on-dark);
}

body.marketing-page.calserver-layout .feature-card--focus {
    background: var(--cs-card-focus-bg);
    border-color: var(--cs-card-focus-border);
    box-shadow: var(--cs-card-focus-shadow);
}

body.marketing-page.calserver-layout .feature-slider__list > li.is-center .feature-card {
    transform: scale(1.04);
}

body.marketing-page.calserver-layout .feature-slider__list > li.is-center .feature-card.feature-card--focus {
    transform: scale(1.04) translateY(-2px);
    box-shadow: var(--cs-card-focus-shadow);
}

body.marketing-page.calserver-layout #modules .calserver-modules-grid {
    display: grid;
    gap: 32px;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    margin-top: 40px;
    align-items: start;
}

body.marketing-page.calserver-layout .calserver-modules-nav {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
    border-bottom: none;
    position: relative;
    z-index: 2;
}

body.marketing-page.calserver-layout .calserver-modules-nav__link {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 18px 20px;
    border-radius: 18px;
    background: color-mix(in oklab, var(--calserver-primary) 10%, transparent);
    border: 1px solid color-mix(in oklab, var(--calserver-primary) 15%, var(--qr-card-border) 85%);
    box-shadow: 0 18px 36px -28px color-mix(in oklab, var(--marketing-ink) 28%, transparent);
    color: var(--qr-text);
    text-decoration: none;
    transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease,
        transform 200ms ease;
}

body.marketing-page.calserver-layout .calserver-modules-nav__title {
    font-weight: 600;
    letter-spacing: 0.01em;
}

body.marketing-page.calserver-layout .calserver-modules-nav__desc {
    color: color-mix(in oklab, var(--qr-text) 68%, var(--qr-bg) 32%);
    font-size: 0.92rem;
}

body.marketing-page.calserver-layout .calserver-modules-nav li.uk-active .calserver-modules-nav__link,
body.marketing-page.calserver-layout .calserver-modules-nav__link:hover {
    background: color-mix(in oklab, var(--calserver-primary) 18%, var(--qr-card) 82%);
    border-color: color-mix(in oklab, var(--calserver-primary) 45%, transparent);
    box-shadow: 0 24px 48px -30px color-mix(in oklab, var(--marketing-ink) 42%, transparent);
    transform: translateY(-2px);
}

body.marketing-page.calserver-layout .calserver-modules-nav__link:focus-visible {
    outline: 3px solid color-mix(in oklab, var(--calserver-primary) 60%, var(--marketing-white) 40%);
    outline-offset: 3px;
}

body.marketing-page.calserver-layout .calserver-modules-nav > li {
    margin: 0;
}

body.marketing-page.calserver-layout .calserver-modules-switcher {
    margin: 0;
    padding: 0;
    list-style: none;
}

body.marketing-page.calserver-layout .calserver-modules-switcher > li {
    list-style: none;
}

body.marketing-page.calserver-layout .calserver-module-figure {
    position: relative;
    isolation: isolate;
    margin: 0;
    border-radius: 22px;
    display: flex;
    flex-direction: column;
    height: 100%;
    z-index: 0;
}

body.marketing-page.calserver-layout .calserver-module-figure::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--qr-card);
    border: 1px solid var(--qr-card-border);
    box-shadow: 0 22px 48px -28px color-mix(in oklab, var(--marketing-ink) 35%, transparent);
    pointer-events: none;
    z-index: 0;
}

body.marketing-page.calserver-layout .calserver-module-figure img,
body.marketing-page.calserver-layout .calserver-module-figure video,
body.marketing-page.calserver-layout .calserver-module-figure .calserver-module-figure__visual,
body.marketing-page.calserver-layout .calserver-module-figure figcaption {
    position: relative;
    z-index: 1;
}

body.marketing-page.calserver-layout .calserver-module-figure img,
body.marketing-page.calserver-layout .calserver-module-figure video,
body.marketing-page.calserver-layout .calserver-module-figure .calserver-module-figure__visual {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 0;
    box-shadow: 0 18px 32px -24px color-mix(in oklab, var(--marketing-ink) 45%, transparent);
}

body.marketing-page.calserver-layout .calserver-module-figure video {
    background: var(--marketing-black);
}

body.marketing-page.calserver-layout .calserver-module-figure__visual {
    aspect-ratio: 16 / 9;
    background: radial-gradient(circle at 20% 20%, color-mix(in oklab, var(--marketing-primary) 60%, transparent), color-mix(in oklab, var(--marketing-ink) 92%, transparent));
    border-radius: 22px 22px 0 0;
    color: var(--marketing-white);
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 36px;
    overflow: hidden;
    position: relative;
}

body.marketing-page.calserver-layout .calserver-module-figure__visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 18%, color-mix(in oklab, var(--marketing-white) 16%, transparent), transparent 55%),
        radial-gradient(circle at 12% 78%, color-mix(in oklab, var(--marketing-white) 12%, transparent), transparent 50%),
        linear-gradient(135deg, color-mix(in oklab, var(--marketing-white) 10%, transparent), transparent 60%);
    mix-blend-mode: screen;
    opacity: 0.85;
}

body.marketing-page.calserver-layout .calserver-module-figure__visual[data-module="device-management"] {
    background: radial-gradient(circle at 12% 18%, color-mix(in oklab, var(--marketing-primary) 70%, transparent), color-mix(in oklab, var(--marketing-ink) 92%, transparent)),
        linear-gradient(145deg, color-mix(in oklab, var(--marketing-primary) 85%, transparent), color-mix(in oklab, var(--marketing-ink) 95%, transparent));
}

body.marketing-page.calserver-layout .calserver-module-figure__visual[data-module="calendar-resources"] {
    background: radial-gradient(circle at 82% 22%, color-mix(in oklab, var(--marketing-primary) 60%, transparent), color-mix(in oklab, var(--marketing-ink) 96%, transparent)),
        linear-gradient(135deg, color-mix(in oklab, var(--marketing-primary) 88%, transparent), color-mix(in oklab, var(--marketing-ink) 95%, transparent));
}

body.marketing-page.calserver-layout .calserver-module-figure__visual[data-module="order-ticketing"] {
    background: radial-gradient(circle at 18% 78%, color-mix(in oklab, var(--marketing-accent) 68%, transparent), color-mix(in oklab, var(--marketing-accent) 94%, transparent)),
        linear-gradient(140deg, color-mix(in oklab, var(--marketing-accent) 82%, transparent), color-mix(in oklab, var(--marketing-accent) 92%, transparent));
}

body.marketing-page.calserver-layout .calserver-module-figure__visual[data-module="self-service"] {
    background: radial-gradient(circle at 78% 24%, color-mix(in oklab, var(--marketing-primary) 65%, transparent), color-mix(in oklab, var(--marketing-ink) 93%, transparent)),
        linear-gradient(135deg, color-mix(in oklab, var(--marketing-primary) 84%, transparent), color-mix(in oklab, var(--marketing-ink) 92%, transparent));
}

body.marketing-page.calserver-layout .calserver-module-figure__visual-label {
    font-size: clamp(1.4rem, 2vw + 1rem, 2.35rem);
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.2;
    margin: 0;
    max-width: 20ch;
    position: relative;
    z-index: 1;
}

body.marketing-page.calserver-layout .calserver-module-figure__video--manual {
    cursor: pointer;
}

body.marketing-page.calserver-layout .calserver-module-figure--manual .calserver-module-figure__fullscreen-button {
    top: 14px;
    right: 14px;
}

body.marketing-page.calserver-layout .calserver-module-figure__fullscreen-button {
    position: absolute;
    top: 18px;
    right: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 1px solid color-mix(in oklab, var(--calserver-primary) 58%, color-mix(in oklab, var(--marketing-white) 24%, transparent));
    background: color-mix(in oklab, var(--calserver-primary) 46%, color-mix(in oklab, var(--marketing-ink) 92%, transparent));
    color: var(--marketing-white);
    cursor: pointer;
    z-index: 2;
    box-shadow: 0 16px 32px -22px color-mix(in oklab, var(--marketing-ink) 55%, transparent);
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

body.marketing-page.calserver-layout .calserver-module-figure__fullscreen-button:hover,
body.marketing-page.calserver-layout .calserver-module-figure__fullscreen-button:focus-visible {
    background: color-mix(in oklab, var(--calserver-primary) 60%, color-mix(in oklab, var(--marketing-ink) 90%, transparent));
    border-color: color-mix(in oklab, var(--calserver-primary) 68%, color-mix(in oklab, var(--marketing-white) 30%, transparent));
    box-shadow: 0 18px 36px -20px color-mix(in oklab, var(--marketing-ink) 62%, transparent);
    transform: translateY(-1px);
}

body.marketing-page.calserver-layout .calserver-module-figure__fullscreen-button:focus-visible {
    outline: 3px solid color-mix(in oklab, var(--calserver-primary) 68%, color-mix(in oklab, var(--marketing-white) 28%, transparent));
    outline-offset: 2px;
}

body.marketing-page.calserver-layout .calserver-module-figure__fullscreen-button[data-state="active"] {
    background: color-mix(in oklab, var(--calserver-primary) 72%, color-mix(in oklab, var(--marketing-ink) 94%, transparent));
    border-color: color-mix(in oklab, var(--calserver-primary) 78%, color-mix(in oklab, var(--marketing-white) 34%, transparent));
}

body.marketing-page.calserver-layout .calserver-module-figure__fullscreen-icon {
    font-size: 1.35rem;
    line-height: 1;
}

body.marketing-page.calserver-layout .calserver-module-figure figcaption {
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--qr-card);
    border: 1px solid color-mix(in oklab, var(--calserver-primary) 22%, var(--qr-card-border) 78%);
    border-top: 1px solid color-mix(in oklab, var(--calserver-primary) 28%, color-mix(in oklab, var(--marketing-ink) 32%, transparent));
    border-radius: 0 0 22px 22px;
}

body.marketing-page.calserver-layout .calserver-module-figure h3 {
    margin: 0;
}

body.marketing-page.calserver-layout .calserver-module-figure .uk-list {
    margin-bottom: 0;
}

body.marketing-page.calserver-layout .calserver-module-figure__download {
    margin: 0;
}

body.marketing-page.calserver-layout .calserver-module-figure__download-link {
    font-weight: 600;
    text-decoration: none;
}

body.marketing-page.calserver-layout .calserver-module-figure__download-link:hover,
body.marketing-page.calserver-layout .calserver-module-figure__download-link:focus {
    text-decoration: underline;
}

@media (max-width: 1024px) {
    body.marketing-page.calserver-layout #modules .calserver-modules-grid {
        grid-template-columns: 1fr;
    }

    body.marketing-page.calserver-layout .calserver-modules-nav {
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 8px;
        margin-bottom: 12px;
    }

    body.marketing-page.calserver-layout .calserver-modules-nav > li {
        min-width: 240px;
        flex: 0 0 auto;
    }
}

@media (max-width: 640px) {
    body.marketing-page.calserver-layout .calserver-modules-nav {
        flex-direction: column;
        align-items: center;
        overflow-x: visible;
        padding-bottom: 0;
        margin-bottom: 0;
        gap: 12px;
        width: 100%;
    }

    body.marketing-page.calserver-layout .calserver-modules-nav > li {
        min-width: 0;
        width: min(100%, 360px);
        margin-inline: auto;
    }

    body.marketing-page.calserver-layout .calserver-modules-nav__link {
        padding: 16px;
        padding-inline-start: 0;
    }

    body.marketing-page.calserver-layout .calserver-module-figure figcaption {
        padding: 22px;
    }
}

body.marketing-page.calserver-layout .feature-slider__list > li.is-center .feature-card:not(.feature-card--focus) {
    box-shadow: 0 22px 48px -32px color-mix(in oklab, var(--marketing-ink) 45%, transparent);
}

body.marketing-page.calserver-layout .feature-slider__list > li.is-center .feature-card:hover {
    transform: scale(1.04) translateY(-2px);
}

body.marketing-page.calserver-layout .feature-slider__list > li:not(.is-center) .feature-card {
    opacity: 0.92;
}

body.marketing-page.calserver-layout .feature-slider__list > li:not(.is-center) .feature-card:hover {
    transform: translateY(-4px);
}

body.marketing-page.calserver-layout .testimonial-card {
    min-height: 240px;
}

body.marketing-page.calserver-layout .usecase-card--visual {
    display: none;
    padding: 0;
    overflow: hidden;
}

body.marketing-page.calserver-layout .usecase-card--visual .usecase-visual {
    margin: 0;
}

body.marketing-page.calserver-layout .usecase-card--visual .usecase-visual__image {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 959px) {
    body.marketing-page.calserver-layout .quick-cta {
        padding: 20px;
    }
}


.calserver-metcal {
    position: relative;
    overflow: hidden;
}

.calserver-metcal::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            color-mix(in oklab, var(--calserver-primary) 18%, color-mix(in oklab, var(--marketing-ink) 94%, transparent)) 0%,
            color-mix(in oklab, var(--calserver-primary) 32%, color-mix(in oklab, var(--marketing-ink) 92%, transparent)) 46%,
            color-mix(in oklab, var(--calserver-primary) 56%, color-mix(in oklab, var(--marketing-ink) 92%, transparent)) 100%);
    opacity: 0.94;
    pointer-events: none;
}

.calserver-metcal__inner {
    position: relative;
    z-index: 1;
}

.calserver-metcal__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: color-mix(in oklab, var(--calserver-primary) 64%, color-mix(in oklab, var(--marketing-white) 14%, transparent) 36%);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    color: color-mix(in oklab, var(--marketing-white) 92%, transparent);
}

.calserver-metcal__title {
    margin-top: 24px;
    margin-bottom: 16px;
    font-size: clamp(2rem, 2.8vw, 2.75rem);
    font-weight: 600;
    color: var(--marketing-white);
}

.calserver-metcal .calserver-metcal__lead {
    max-width: 880px;
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--marketing-white);
}

.calserver-metcal__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
    margin-top: 40px;
}

.calserver-metcal__card {
    position: relative;
    height: 100%;
    padding: 24px;
    border-radius: 20px;
    background: color-mix(in oklab, color-mix(in oklab, var(--marketing-ink) 92%, transparent) 68%, var(--calserver-primary) 32%);
    border: 1px solid color-mix(in oklab, var(--calserver-primary) 48%, color-mix(in oklab, var(--marketing-white) 16%, transparent));
    box-shadow: 0 24px 68px -32px color-mix(in oklab, var(--calserver-primary) 48%, color-mix(in oklab, var(--marketing-ink) 82%, transparent));
}

.calserver-metcal__card h3 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    font-size: 1.15rem;
    font-weight: 600;
    color: color-mix(in oklab, var(--marketing-white) 94%, transparent);
}

.calserver-metcal__card p,
.calserver-metcal__card ul {
    margin: 0;
    color: color-mix(in oklab, var(--marketing-white) 94%, transparent);
    line-height: 1.6;
}

.calserver-metcal__card ul {
    padding-left: 20px;
    margin-top: 12px;
    list-style: disc;
}

.calserver-metcal__card svg {
    width: 24px;
    height: 24px;
    color: color-mix(in oklab, var(--marketing-white) 86%, var(--calserver-primary) 14%);
}

.calserver-metcal__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: clamp(40px, 5vw, 72px);
}

.calserver-metcal__cta .uk-button {
    border-radius: 999px;
    padding: 10px 26px;
}

.calserver-metcal__cta .uk-button-primary {
    background: color-mix(in oklab, var(--calserver-primary) 82%, color-mix(in oklab, var(--marketing-white) 8%, transparent) 18%);
    border-color: color-mix(in oklab, var(--calserver-primary) 88%, color-mix(in oklab, var(--marketing-white) 24%, transparent) 12%);
}

.calserver-metcal__cta .uk-button-primary:hover,
.calserver-metcal__cta .uk-button-primary:focus {
    background: color-mix(in oklab, var(--calserver-primary) 92%, color-mix(in oklab, var(--marketing-white) 16%, transparent) 8%);
    color: var(--marketing-white);
}

.calserver-metcal__cta .uk-button-default {
    color: color-mix(in oklab, var(--marketing-white) 92%, transparent);
    border-color: color-mix(in oklab, var(--calserver-primary) 42%, color-mix(in oklab, var(--marketing-white) 42%, transparent) 58%);
    background: transparent;
}

.calserver-metcal__cta .uk-button-default:hover,
.calserver-metcal__cta .uk-button-default:focus {
    color: var(--marketing-ink);
    background: var(--marketing-white);
}

.calserver-layout .calserver-metcal__note {
    margin-top: 16px;
    font-size: 0.9rem;
    color: color-mix(in oklab, var(--marketing-white) 88%, transparent);
}

.calserver-metcal__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: color-mix(in oklab, var(--calserver-primary) 78%, color-mix(in oklab, var(--marketing-white) 18%, transparent) 22%);
    color: color-mix(in oklab, var(--marketing-white) 92%, transparent);
    font-weight: 600;
}

.calserver-metcal__card strong {
    display: block;
    margin-bottom: 4px;
    color: color-mix(in oklab, var(--marketing-white) 96%, transparent);
}

.calserver-metcal__card--dark {
    background: color-mix(in oklab, color-mix(in oklab, var(--marketing-ink) 94%, transparent) 86%, var(--calserver-primary) 14%);
}

.calserver-metcal__card--outline {
    background: color-mix(in oklab, var(--marketing-ink) 72%, transparent);
}

.calserver-metcal__icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: color-mix(in oklab, var(--calserver-primary) 58%, color-mix(in oklab, var(--marketing-white) 12%, transparent) 42%);
    color: var(--marketing-white);
}

.calserver-metcal__footnote {
    margin-top: 10px;
    font-size: 0.85rem;
    color: color-mix(in oklab, var(--marketing-white) 68%, var(--calserver-primary) 32%);
}

.calserver-metcal__cta .uk-button .uk-icon {
    margin-right: 8px;
}

@media (max-width: 960px) {
    .calserver-metcal__title {
        font-size: 2.2rem;
    }

    .calserver-metcal__cta {
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    .calserver-metcal__grid {
        display: flex;
        gap: 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -ms-overflow-style: none;
        scrollbar-width: none;
        padding: 0 8px 16px;
    }

    .calserver-metcal__grid::-webkit-scrollbar {
        display: none;
    }

    .calserver-metcal__card {
        padding: 20px;
        flex: 0 0 85%;
        scroll-snap-align: start;
        scroll-margin: 8px;
    }

    .calserver-metcal__cta {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ---------------------------------------------------------------------------
   Tablet responsive override
   ---------------------------------------------------------------------------
   UIKit's @m breakpoint (960 px) is too late for tablet displays — 3 columns
   fit comfortably at 640 px on devices like iPad Pro.  Override the common
   grid utilities so pre-rendered CMS content (which uses @m classes) switches
   to multi-column earlier.  Scoped to .calserver-layout to avoid side-effects.
   --------------------------------------------------------------------------- */
@media (min-width: 640px) {
    .calserver-layout .uk-child-width-1-2\@m > * {
        width: 50%;
    }

    .calserver-layout .uk-child-width-1-3\@m > * {
        width: calc(100% * 1 / 3.001);
    }
}

/* =========================================================
   CalHelp Theme Components (migrated from calhelp.css)
   ========================================================= */

/* calHelp marketing uses calServer styling via shared selectors. */

/* calServer marketing overrides for landing layout */

body.marketing-page:is(.calserver-layout, .calhelp-theme) {
    --calserver-primary: var(--qr-landing-primary);
    --cs-logo-size: clamp(48px, 7vw, 72px);
    --cs-logo-gap: clamp(12px, 2.6vw, 22px);
    scroll-behavior: smooth;
}

.marketing-page .hero-bg-calserver {
    background:
        radial-gradient(420px 320px at 12% 18%, color-mix(in oklab, var(--calserver-primary) 36%, color-mix(in oklab, var(--marketing-ink) 25%, transparent)) 0%, transparent 68%),
        radial-gradient(520px 360px at 88% 12%, color-mix(in oklab, color-mix(in oklab, var(--marketing-primary) 35%, var(--marketing-white) 65%) 32%, transparent) 0%, transparent 70%),
        radial-gradient(540px 420px at 48% 108%, color-mix(in oklab, var(--calserver-primary) 28%, color-mix(in oklab, var(--marketing-ink) 80%, transparent)) 0%, transparent 74%),
        var(--qr-hero-gradient);
    background-color: var(--qr-hero-grad-start);
    overflow: hidden;
}

.marketing-page .hero-bg-calserver::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, var(--cs-hero-overlay-top) 0%, var(--cs-hero-overlay-bottom) 100%);
    opacity: 0.82;
}

.marketing-page :is(.calserver-hero-bg__canvas, .calhelp-hero-bg__canvas) {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    mix-blend-mode: screen;
    opacity: 0.82;
    transition: opacity 0.3s ease;
}

.marketing-page .hero-bg-calserver.is-static :is(.calserver-hero-bg__canvas, .calhelp-hero-bg__canvas) {
    opacity: 0;
    display: none;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme).high-contrast :is(.calserver-hero-bg__canvas, .calhelp-hero-bg__canvas),
body.marketing-page:is(.calserver-layout, .calhelp-theme)[data-theme="high-contrast"] :is(.calserver-hero-bg__canvas, .calhelp-hero-bg__canvas),
body.high-contrast :is(.calserver-hero-bg__canvas, .calhelp-hero-bg__canvas) {
    display: none !important;
}

:is(.calserver-layout, .calhelp-theme) .cs-logo {
    display: inline-flex;
    align-items: center;
    gap: var(--cs-logo-gap);
    color: var(--cs-logo-text);
    font-size: clamp(20px, 2.8vw, 28px);
    font-weight: 700;
    letter-spacing: 0.01em;
    text-decoration: none;
    line-height: 1;
}

:is(.calserver-layout, .calhelp-theme) .cs-logo__image {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--cs-logo-size);
    height: var(--cs-logo-size);
    border-radius: 18px;
    border: none;
    background: none;
    box-shadow: none;
    overflow: hidden;
}

:is(.calserver-layout, .calhelp-theme) .cs-logo__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

:is(.calserver-layout, .calhelp-theme) .cs-logo__wordmark {
    display: inline-flex;
    align-items: center;
    color: inherit;
    text-transform: none;
}

:is(.calserver-layout, .calhelp-theme) .cs-logo__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 960px) {
    :is(.calserver-layout, .calhelp-theme) .cs-logo__wordmark {
        display: none;
    }
}

body.marketing-page:is(.calserver-layout, .calhelp-theme).dark-mode:not(.high-contrast) .uk-card-primary,
body.marketing-page:is(.calserver-layout, .calhelp-theme)[data-theme="dark"]:not(.high-contrast) .uk-card-primary {
    background: linear-gradient(
            135deg,
            color-mix(in oklab, var(--calserver-primary) 56%, var(--marketing-surface-muted-dark) 44%) 0%,
            color-mix(in oklab, var(--calserver-primary) 82%, var(--marketing-surface-dark) 18%) 100%
        ) !important;
    border-color: color-mix(in oklab, var(--calserver-primary) 60%, color-mix(in oklab, var(--marketing-white) 26%, transparent)) !important;
    color: var(--cs-text-on-dark);
    box-shadow: 0 32px 58px -34px color-mix(in oklab, var(--marketing-primary) 65%, transparent),
        0 24px 44px -32px color-mix(in oklab, var(--marketing-ink) 72%, transparent);
}

body.marketing-page:is(.calserver-layout, .calhelp-theme).dark-mode:not(.high-contrast) .uk-card-primary.uk-card-primary--highlight,
body.marketing-page:is(.calserver-layout, .calhelp-theme)[data-theme="dark"]:not(.high-contrast) .uk-card-primary.uk-card-primary--highlight {
    background: linear-gradient(
            145deg,
            color-mix(in oklab, var(--calserver-primary) 68%, var(--marketing-surface-muted-dark) 32%) 0%,
            color-mix(in oklab, var(--calserver-primary) 94%, var(--marketing-ink) 6%) 100%
        ) !important;
    border-color: color-mix(in oklab, var(--calserver-primary) 78%, color-mix(in oklab, var(--marketing-white) 38%, transparent)) !important;
    box-shadow: 0 42px 72px -36px color-mix(in oklab, var(--calserver-primary) 52%, color-mix(in oklab, var(--marketing-primary) 65%, transparent)),
        0 26px 52px -34px color-mix(in oklab, var(--marketing-ink) 82%, transparent);
}

body.marketing-page:is(.calserver-layout, .calhelp-theme).dark-mode:not(.high-contrast) .uk-card-primary p,
body.marketing-page:is(.calserver-layout, .calhelp-theme).dark-mode:not(.high-contrast) .uk-card-primary li,
body.marketing-page:is(.calserver-layout, .calhelp-theme).dark-mode:not(.high-contrast) .uk-card-primary .muted,
body.marketing-page:is(.calserver-layout, .calhelp-theme)[data-theme="dark"]:not(.high-contrast) .uk-card-primary p,
body.marketing-page:is(.calserver-layout, .calhelp-theme)[data-theme="dark"]:not(.high-contrast) .uk-card-primary li,
body.marketing-page:is(.calserver-layout, .calhelp-theme)[data-theme="dark"]:not(.high-contrast) .uk-card-primary .muted {
    color: color-mix(in oklab, var(--marketing-white) 92%, color-mix(in oklab, var(--marketing-white) 68%, transparent) 8%) !important;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme).dark-mode:not(.high-contrast) .uk-card-primary .uk-list-bullet > li::before,
body.marketing-page:is(.calserver-layout, .calhelp-theme)[data-theme="dark"]:not(.high-contrast) .uk-card-primary .uk-list-bullet > li::before {
    border-color: color-mix(in oklab, var(--marketing-white) 80%, color-mix(in oklab, var(--marketing-primary) 36%, transparent) 20%);
}

body.marketing-page:is(.calserver-layout, .calhelp-theme).dark-mode:not(.high-contrast) .uk-card-primary .uk-button-default,
body.marketing-page:is(.calserver-layout, .calhelp-theme)[data-theme="dark"]:not(.high-contrast) .uk-card-primary .uk-button-default {
    background: color-mix(in oklab, var(--marketing-white) 88%, var(--calserver-primary) 12%);
    color: color-mix(in oklab, var(--calserver-primary) 90%, var(--marketing-ink) 10%);
    border-color: color-mix(in oklab, var(--calserver-primary) 42%, color-mix(in oklab, var(--marketing-white) 45%, transparent));
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--calserver-primary) 46%, color-mix(in oklab, var(--marketing-white) 42%, transparent)) inset,
        0 16px 30px -20px color-mix(in oklab, var(--marketing-primary) 60%, transparent);
}

body.marketing-page:is(.calserver-layout, .calhelp-theme).dark-mode:not(.high-contrast) #contact-form .btn.btn-black.uk-button-secondary,
body.marketing-page:is(.calserver-layout, .calhelp-theme)[data-theme="dark"]:not(.high-contrast) #contact-form .btn.btn-black.uk-button-secondary {
    background: color-mix(in oklab, var(--calserver-primary) 82%, color-mix(in oklab, var(--marketing-ink) 92%, transparent) 18%);
    color: color-mix(in oklab, var(--marketing-white) 92%, var(--calserver-primary) 8%);
    border-color: color-mix(in oklab, var(--calserver-primary) 70%, color-mix(in oklab, var(--marketing-white) 28%, transparent));
    box-shadow: 0 22px 46px -28px color-mix(in oklab, var(--calserver-primary) 72%, color-mix(in oklab, var(--marketing-ink) 85%, transparent));
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme).dark-mode:not(.high-contrast) #contact-form .btn.btn-black.uk-button-secondary:hover,
body.marketing-page:is(.calserver-layout, .calhelp-theme)[data-theme="dark"]:not(.high-contrast) #contact-form .btn.btn-black.uk-button-secondary:hover {
    background: color-mix(in oklab, var(--calserver-primary) 94%, color-mix(in oklab, var(--marketing-ink) 90%, transparent) 6%);
    color: var(--marketing-white);
    box-shadow: 0 28px 52px -26px color-mix(in oklab, var(--calserver-primary) 82%, color-mix(in oklab, var(--marketing-ink) 92%, transparent));
}

body.marketing-page:is(.calserver-layout, .calhelp-theme).dark-mode:not(.high-contrast) #contact-form .btn.btn-black.uk-button-secondary:focus-visible,
body.marketing-page:is(.calserver-layout, .calhelp-theme)[data-theme="dark"]:not(.high-contrast) #contact-form .btn.btn-black.uk-button-secondary:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--calserver-primary) 78%, color-mix(in oklab, var(--marketing-primary) 45%, transparent));
    outline-offset: 2px;
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--calserver-primary) 68%, color-mix(in oklab, var(--marketing-white) 24%, transparent)),
        0 24px 48px -26px color-mix(in oklab, var(--calserver-primary) 78%, color-mix(in oklab, var(--marketing-ink) 88%, transparent));
}

body.marketing-page:is(.calserver-layout, .calhelp-theme).dark-mode:not(.high-contrast) .uk-card-primary .uk-button-default:hover,
body.marketing-page:is(.calserver-layout, .calhelp-theme)[data-theme="dark"]:not(.high-contrast) .uk-card-primary .uk-button-default:hover {
    background: color-mix(in oklab, var(--marketing-white) 74%, var(--calserver-primary) 26%);
    color: color-mix(in oklab, var(--calserver-primary) 94%, var(--marketing-ink) 6%);
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--calserver-primary) 58%, color-mix(in oklab, var(--marketing-white) 48%, transparent)) inset,
        0 22px 36px -22px color-mix(in oklab, var(--marketing-primary) 65%, transparent);
}

body.marketing-page:is(.calserver-layout, .calhelp-theme).dark-mode:not(.high-contrast) .uk-card-primary .uk-button-default:focus-visible,
body.marketing-page:is(.calserver-layout, .calhelp-theme)[data-theme="dark"]:not(.high-contrast) .uk-card-primary .uk-button-default:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--calserver-primary) 75%, var(--marketing-white) 25%);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--calserver-primary) 54%, color-mix(in oklab, var(--marketing-white) 40%, transparent));
}

body.marketing-page:is(.calserver-layout, .calhelp-theme).dark-mode:not(.high-contrast) .uk-card-primary .pill--badge,
body.marketing-page:is(.calserver-layout, .calhelp-theme)[data-theme="dark"]:not(.high-contrast) .uk-card-primary .pill--badge {
    background: color-mix(in oklab, var(--marketing-white) 90%, var(--calserver-primary) 10%);
    color: color-mix(in oklab, var(--calserver-primary) 78%, var(--marketing-ink) 22%);
    border-color: color-mix(in oklab, var(--calserver-primary) 46%, color-mix(in oklab, var(--marketing-white) 60%, transparent));
    box-shadow: 0 18px 32px -22px color-mix(in oklab, var(--marketing-primary) 55%, transparent);
}

body.marketing-page:is(.calserver-layout, .calhelp-theme).dark-mode:not(.high-contrast) .uk-card .uk-card-title,
body.marketing-page:is(.calserver-layout, .calhelp-theme).dark-mode:not(.high-contrast) .uk-card h3,
body.marketing-page:is(.calserver-layout, .calhelp-theme).dark-mode:not(.high-contrast) .uk-card h4,
body.marketing-page:is(.calserver-layout, .calhelp-theme)[data-theme="dark"]:not(.high-contrast) .uk-card .uk-card-title,
body.marketing-page:is(.calserver-layout, .calhelp-theme)[data-theme="dark"]:not(.high-contrast) .uk-card h3,
body.marketing-page:is(.calserver-layout, .calhelp-theme)[data-theme="dark"]:not(.high-contrast) .uk-card h4 {
    color: var(--cs-text-on-dark) !important;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme):not(.dark-mode):not(.high-contrast) .uk-card .uk-card-title,
body.marketing-page:is(.calserver-layout, .calhelp-theme):not(.dark-mode):not(.high-contrast) .uk-card h3,
body.marketing-page:is(.calserver-layout, .calhelp-theme):not(.dark-mode):not(.high-contrast) .uk-card h4,
body.marketing-page:is(.calserver-layout, .calhelp-theme)[data-theme="light"]:not(.high-contrast) .uk-card .uk-card-title,
body.marketing-page:is(.calserver-layout, .calhelp-theme)[data-theme="light"]:not(.high-contrast) .uk-card h3,
body.marketing-page:is(.calserver-layout, .calhelp-theme)[data-theme="light"]:not(.high-contrast) .uk-card h4 {
    color: color-mix(in oklab, var(--calserver-primary) 22%, var(--marketing-ink) 78%) !important;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme):not(.dark-mode):not(.high-contrast) .uk-card-default,
body.marketing-page:is(.calserver-layout, .calhelp-theme)[data-theme="light"]:not(.high-contrast) .uk-card-default {
    background: var(--marketing-white) !important;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme):not(.dark-mode):not(.high-contrast) .uk-card-primary,
body.marketing-page:is(.calserver-layout, .calhelp-theme)[data-theme="light"]:not(.high-contrast) .uk-card-primary {
    background: linear-gradient(
            135deg,
            color-mix(in oklab, var(--calserver-primary) 86%, var(--marketing-ink) 14%) 0%,
            color-mix(in oklab, var(--calserver-primary) 70%, var(--marketing-ink) 30%) 100%
        ) !important;
    border-color: color-mix(in oklab, var(--calserver-primary) 65%, transparent) !important;
    color: var(--marketing-text-on-primary);
    box-shadow: 0 26px 46px -30px color-mix(in oklab, var(--calserver-primary) 42%, transparent);
}

body.marketing-page:is(.calserver-layout, .calhelp-theme):not(.dark-mode):not(.high-contrast) .uk-card-primary h3,
body.marketing-page:is(.calserver-layout, .calhelp-theme):not(.dark-mode):not(.high-contrast) .uk-card-primary p,
body.marketing-page:is(.calserver-layout, .calhelp-theme):not(.dark-mode):not(.high-contrast) .uk-card-primary li,
body.marketing-page:is(.calserver-layout, .calhelp-theme)[data-theme="light"]:not(.high-contrast) .uk-card-primary h3,
body.marketing-page:is(.calserver-layout, .calhelp-theme)[data-theme="light"]:not(.high-contrast) .uk-card-primary p,
body.marketing-page:is(.calserver-layout, .calhelp-theme)[data-theme="light"]:not(.high-contrast) .uk-card-primary li {
    color: color-mix(in oklab, var(--marketing-white) 92%, transparent) !important;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme):not(.dark-mode):not(.high-contrast) .uk-card-primary .uk-button-default,
body.marketing-page:is(.calserver-layout, .calhelp-theme)[data-theme="light"]:not(.high-contrast) .uk-card-primary .uk-button-default {
    background: var(--marketing-white);
    color: color-mix(in oklab, var(--calserver-primary) 82%, var(--marketing-ink) 18%);
    border-color: transparent;
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--marketing-white) 55%, transparent) inset;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme):not(.dark-mode):not(.high-contrast) .uk-card-primary .uk-button-default:hover,
body.marketing-page:is(.calserver-layout, .calhelp-theme)[data-theme="light"]:not(.high-contrast) .uk-card-primary .uk-button-default:hover {
    background: color-mix(in oklab, var(--marketing-white) 88%, var(--calserver-primary) 12%);
    color: color-mix(in oklab, var(--calserver-primary) 88%, var(--marketing-ink) 12%);
}

body.marketing-page:is(.calserver-layout, .calhelp-theme):not(.dark-mode):not(.high-contrast) .uk-card-primary .uk-list-bullet > li::before,
body.marketing-page:is(.calserver-layout, .calhelp-theme)[data-theme="light"]:not(.high-contrast) .uk-card-primary .uk-list-bullet > li::before {
    border-color: color-mix(in oklab, var(--marketing-white) 70%, transparent);
}

body.marketing-page:is(.calserver-layout, .calhelp-theme):not(.high-contrast) .site-footer,
body.marketing-page:is(.calserver-layout, .calhelp-theme):not(.high-contrast) .site-footer a,
body.marketing-page:is(.calserver-layout, .calhelp-theme):not(.high-contrast) .footer-section,
body.marketing-page:is(.calserver-layout, .calhelp-theme):not(.high-contrast) .footer-section p,
body.marketing-page:is(.calserver-layout, .calhelp-theme):not(.high-contrast) .footer-section li,
body.marketing-page:is(.calserver-layout, .calhelp-theme):not(.high-contrast) .footer-section strong {
    color: var(--marketing-white);
}

body.marketing-page:is(.calserver-layout, .calhelp-theme):not(.high-contrast) .hero-bg-calserver {
    background:
        radial-gradient(
            580px 360px at 0% 0%,
            color-mix(in oklab, var(--calserver-primary) 40%, transparent),
            transparent
        ),
        radial-gradient(
            520px 320px at 100% 0%,
            color-mix(in oklab, var(--calserver-primary) 30%, transparent),
            transparent
        ),
        linear-gradient(180deg, var(--cs-hero-overlay-top) 0%, var(--cs-hero-overlay-bottom) 100%),
        var(--qr-hero-gradient);
    background-color: var(--qr-hero-grad-start);
    box-shadow: var(--cs-hero-shadow);
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-hero-grid, .calhelp-hero-grid) {
    align-items: stretch;
}

body.marketing-page.calhelp-theme:not(.dark-mode):not(.high-contrast):not([data-theme="dark"]):not([data-theme="high-contrast"]) .calhelp-hero-grid__content {
    color: var(--cs-text-on-dark);
}

body.marketing-page.calhelp-theme:not(.dark-mode):not(.high-contrast):not([data-theme="dark"]):not([data-theme="high-contrast"]) .calhelp-hero-grid__content .qr-sub {
    color: color-mix(in oklab, var(--cs-text-on-dark) 92%, transparent);
}

body.marketing-page.calhelp-theme:not(.dark-mode):not(.high-contrast):not([data-theme="dark"]):not([data-theme="high-contrast"]) .calhelp-hero-grid__content .calhelp-trust {
    color: color-mix(in oklab, var(--cs-text-on-dark) 86%, transparent);
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-hero-grid__media, .calhelp-hero-grid__media) {
    display: flex;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-hero-grid__media, .calhelp-hero-grid__media) > * {
    width: 100%;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-hero-video, .calhelp-hero-video) {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 28px 32px 32px;
    background: linear-gradient(
            132deg,
            color-mix(in oklab, var(--calserver-primary) 34%, var(--marketing-ink) 66%) 0%,
            color-mix(in oklab, var(--calserver-primary) 48%, var(--marketing-ink) 52%) 100%
        );
    border-radius: 26px;
    border: 1px solid color-mix(in oklab, var(--calserver-primary) 46%, transparent);
    box-shadow: 0 26px 60px -32px color-mix(in oklab, var(--marketing-ink) 65%, transparent);
    overflow: hidden;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-hero-video__badge, .calhelp-hero-video__badge) {
    align-self: flex-start;
    font-weight: 600;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-hero-video__frame, .calhelp-hero-video__frame) {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid color-mix(in oklab, var(--calserver-primary) 38%, transparent);
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-hero-video__frame, .calhelp-hero-video__frame)::before {
    content: "";
    display: block;
    padding-top: 56.25%;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-hero-video__embed, .calhelp-hero-video__embed) {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 24px 28px;
    text-align: center;
    background: linear-gradient(
            144deg,
            color-mix(in oklab, var(--calserver-primary) 28%, color-mix(in oklab, var(--marketing-ink) 86%, transparent)) 0%,
            color-mix(in oklab, var(--calserver-primary) 52%, color-mix(in oklab, var(--marketing-ink) 82%, transparent)) 100%
        );
    color: color-mix(in oklab, var(--marketing-white) 94%, transparent);
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-hero-video__embed, .calhelp-hero-video__embed).is-loaded {
    display: block;
    padding: 0;
    background: transparent;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-hero-video__frame, .calhelp-hero-video__frame) iframe,
body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-hero-video__embed, .calhelp-hero-video__embed) iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-hero-video__preview, .calhelp-hero-video__preview) {
    display: grid;
    gap: 6px;
    justify-items: center;
    padding: 18px 24px;
    width: 100%;
    border-radius: 16px;
    background: color-mix(in oklab, var(--marketing-white) 8%, transparent);
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-hero-video__preview-title, .calhelp-hero-video__preview-title) {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: color-mix(in oklab, var(--marketing-white) 94%, transparent);
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-hero-video__preview-subtitle, .calhelp-hero-video__preview-subtitle) {
    font-size: 0.85rem;
    color: color-mix(in oklab, var(--marketing-white) 72%, transparent);
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-hero-video__hint, .calhelp-hero-video__hint),
body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-hero-video__privacy-note, .calhelp-hero-video__privacy-note),
body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-hero-video__noscript-note, .calhelp-hero-video__noscript-note) {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: color-mix(in oklab, var(--marketing-white) 86%, transparent);
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-hero-video__hint, .calhelp-hero-video__hint) {
    max-width: 420px;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-hero-video__privacy-note, .calhelp-hero-video__privacy-note) {
    font-size: 0.78rem;
    opacity: 0.9;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-hero-video__noscript-note, .calhelp-hero-video__noscript-note) a {
    color: inherit;
    text-decoration: underline;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-hero-video__meta, .calhelp-hero-video__meta) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 18px;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-hero-video__meta-text, .calhelp-hero-video__meta-text) {
    display: grid;
    gap: 4px;
    color: color-mix(in oklab, var(--marketing-white) 92%, transparent);
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-hero-video__meta-text, .calhelp-hero-video__meta-text) strong {
    font-size: 1.12rem;
    letter-spacing: 0.01em;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-hero-video__meta-text, .calhelp-hero-video__meta-text) span {
    font-size: 0.95rem;
    color: color-mix(in oklab, var(--marketing-white) 86%, color-mix(in oklab, var(--marketing-white) 40%, transparent) 14%);
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-hero-video__link, .calhelp-hero-video__link) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid color-mix(in oklab, var(--calserver-primary) 68%, color-mix(in oklab, var(--marketing-white) 45%, transparent));
    background: color-mix(in oklab, var(--calserver-primary) 38%, color-mix(in oklab, var(--marketing-white) 5%, transparent));
    color: color-mix(in oklab, var(--marketing-white) 96%, transparent);
    font-weight: 600;
    text-decoration: none;
    transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, border-color 180ms ease;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-hero-video__link, .calhelp-hero-video__link):hover,
body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-hero-video__link, .calhelp-hero-video__link):focus-visible {
    background: color-mix(in oklab, var(--calserver-primary) 56%, color-mix(in oklab, var(--marketing-white) 8%, transparent));
    border-color: color-mix(in oklab, var(--calserver-primary) 82%, color-mix(in oklab, var(--marketing-white) 60%, transparent));
    box-shadow: 0 18px 36px -24px color-mix(in oklab, var(--marketing-ink) 45%, transparent);
    transform: translateY(-1px);
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-hero-video__footnote, .calhelp-hero-video__footnote) {
    margin: 0;
    font-size: 0.9rem;
    color: color-mix(in oklab, var(--marketing-white) 78%, color-mix(in oklab, var(--marketing-white) 40%, transparent) 22%);
}

@media (max-width: 959px) {
    body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-hero-video, .calhelp-hero-video) {
        padding: 24px;
    }

    body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-hero-video__meta, .calhelp-hero-video__meta) {
        flex-direction: column;
        align-items: stretch;
    }

    body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-hero-video__link, .calhelp-hero-video__link) {
        justify-content: center;
    }
}

body.marketing-page:is(.calserver-layout, .calhelp-theme).high-contrast :is(.calserver-hero-video, .calhelp-hero-video),
body.marketing-page:is(.calserver-layout, .calhelp-theme)[data-theme="high-contrast"] :is(.calserver-hero-video, .calhelp-hero-video) {
    background: var(--qr-card);
    border-color: currentColor;
    box-shadow: none;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme).high-contrast :is(.calserver-hero-video__embed, .calhelp-hero-video__embed),
body.marketing-page:is(.calserver-layout, .calhelp-theme)[data-theme="high-contrast"] :is(.calserver-hero-video__embed, .calhelp-hero-video__embed) {
    background: var(--qr-card);
    color: currentColor;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme).high-contrast :is(.calserver-hero-video__hint, .calhelp-hero-video__hint),
body.marketing-page:is(.calserver-layout, .calhelp-theme)[data-theme="high-contrast"] :is(.calserver-hero-video__hint, .calhelp-hero-video__hint),
body.marketing-page:is(.calserver-layout, .calhelp-theme).high-contrast :is(.calserver-hero-video__privacy-note, .calhelp-hero-video__privacy-note),
body.marketing-page:is(.calserver-layout, .calhelp-theme)[data-theme="high-contrast"] :is(.calserver-hero-video__privacy-note, .calhelp-hero-video__privacy-note),
body.marketing-page:is(.calserver-layout, .calhelp-theme).high-contrast :is(.calserver-hero-video__noscript-note, .calhelp-hero-video__noscript-note),
body.marketing-page:is(.calserver-layout, .calhelp-theme)[data-theme="high-contrast"] :is(.calserver-hero-video__noscript-note, .calhelp-hero-video__noscript-note) {
    color: currentColor;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme).high-contrast :is(.calserver-hero-video__preview, .calhelp-hero-video__preview),
body.marketing-page:is(.calserver-layout, .calhelp-theme)[data-theme="high-contrast"] :is(.calserver-hero-video__preview, .calhelp-hero-video__preview) {
    background: currentColor;
    color: var(--qr-bg);
}

body.marketing-page:is(.calserver-layout, .calhelp-theme).high-contrast :is(.calserver-hero-video__preview-title, .calhelp-hero-video__preview-title),
body.marketing-page:is(.calserver-layout, .calhelp-theme)[data-theme="high-contrast"] :is(.calserver-hero-video__preview-title, .calhelp-hero-video__preview-title),
body.marketing-page:is(.calserver-layout, .calhelp-theme).high-contrast :is(.calserver-hero-video__preview-subtitle, .calhelp-hero-video__preview-subtitle),
body.marketing-page:is(.calserver-layout, .calhelp-theme)[data-theme="high-contrast"] :is(.calserver-hero-video__preview-subtitle, .calhelp-hero-video__preview-subtitle) {
    color: inherit;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme).high-contrast :is(.calserver-hero-video__meta-text, .calhelp-hero-video__meta-text),
body.marketing-page:is(.calserver-layout, .calhelp-theme)[data-theme="high-contrast"] :is(.calserver-hero-video__meta-text, .calhelp-hero-video__meta-text),
body.marketing-page:is(.calserver-layout, .calhelp-theme).high-contrast :is(.calserver-hero-video__meta-text, .calhelp-hero-video__meta-text) span,
body.marketing-page:is(.calserver-layout, .calhelp-theme)[data-theme="high-contrast"] :is(.calserver-hero-video__meta-text, .calhelp-hero-video__meta-text) span,
body.marketing-page:is(.calserver-layout, .calhelp-theme).high-contrast :is(.calserver-hero-video__footnote, .calhelp-hero-video__footnote),
body.marketing-page:is(.calserver-layout, .calhelp-theme)[data-theme="high-contrast"] :is(.calserver-hero-video__footnote, .calhelp-hero-video__footnote) {
    color: currentColor;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme).high-contrast :is(.calserver-hero-video__link, .calhelp-hero-video__link),
body.marketing-page:is(.calserver-layout, .calhelp-theme)[data-theme="high-contrast"] :is(.calserver-hero-video__link, .calhelp-hero-video__link) {
    color: currentColor;
    background: transparent;
    border-color: currentColor;
    box-shadow: none;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme).high-contrast :is(.calserver-hero-video__link, .calhelp-hero-video__link):hover,
body.marketing-page:is(.calserver-layout, .calhelp-theme).high-contrast :is(.calserver-hero-video__link, .calhelp-hero-video__link):focus-visible,
body.marketing-page:is(.calserver-layout, .calhelp-theme)[data-theme="high-contrast"] :is(.calserver-hero-video__link, .calhelp-hero-video__link):hover,
body.marketing-page:is(.calserver-layout, .calhelp-theme)[data-theme="high-contrast"] :is(.calserver-hero-video__link, .calhelp-hero-video__link):focus-visible {
    background: currentColor;
    color: var(--qr-bg);
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) .hero-list li {
    color: var(--qr-muted);
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) .pill {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) .pill--soft {
    background: color-mix(in oklab, var(--calserver-primary) 15%, transparent);
    color: var(--qr-landing-primary);
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) .pill--accent {
    background: var(--qr-card);
    color: var(--qr-landing-primary);
    box-shadow: 0 6px 18px -10px rgb(var(--marketing-black-rgb) / 0.45);
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) .pill--badge {
    background: color-mix(in oklab, var(--marketing-white) 86%, transparent);
    color: color-mix(in oklab, var(--calserver-primary) 70%, var(--marketing-ink) 30%);
    border: 1px solid color-mix(in oklab, var(--marketing-white) 60%, transparent);
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) .shadow-soft {
    box-shadow: 0 18px 36px -24px color-mix(in oklab, var(--marketing-ink) 35%, transparent),
        0 12px 24px -18px color-mix(in oklab, var(--marketing-ink) 25%, transparent);
    border-radius: 18px;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) .pricing-card--featured {
    position: relative;
    z-index: 1;
    padding: clamp(36px, 3vw, 52px);
    border-radius: 22px;
    box-shadow: 0 28px 64px -28px color-mix(in oklab, var(--marketing-ink) 55%, transparent),
        0 18px 38px -24px color-mix(in oklab, var(--marketing-ink) 40%, transparent);
    transform: none;
    transform-origin: center top;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) .pricing-card--featured h3 {
    font-size: clamp(1.7rem, 1.2vw + 1.2rem, 2.2rem);
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) .pricing-card--featured p,
body.marketing-page:is(.calserver-layout, .calhelp-theme) .pricing-card--featured li {
    font-size: 1.08rem;
}

@media (min-width: 960px) {
    body.marketing-page:is(.calserver-layout, .calhelp-theme) .pricing-card--featured {
        transform: scale(1.06) translateY(-10px);
    }

    body.marketing-page:is(.calserver-layout, .calhelp-theme) .pricing-card--featured:hover {
        transform: scale(1.08) translateY(-14px);
        box-shadow: 0 36px 78px -28px color-mix(in oklab, var(--marketing-ink) 60%, transparent),
            0 20px 42px -24px color-mix(in oklab, var(--marketing-ink) 45%, transparent);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.marketing-page:is(.calserver-layout, .calhelp-theme) .pricing-card--featured {
        transition: none;
        transform: none !important;
    }
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-highlight, .calhelp-highlight) {
    padding: 32px 0 28px;
    background: var(--cs-highlight-bg);
    border-top: 1px solid var(--cs-highlight-border-top);
    border-bottom: 1px solid var(--cs-highlight-border-bottom);
    box-shadow: var(--cs-highlight-shadow);
}

body.marketing-page:is(.calserver-layout, .calhelp-theme):not(.high-contrast)
    :is(.calserver-highlight, .calhelp-highlight)
    .uk-subnav.uk-subnav-pill {
    gap: 12px;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme):not(.high-contrast)
    :is(.calserver-highlight, .calhelp-highlight)
    .uk-subnav.uk-subnav-pill
    > *
    > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 22px;
    border-radius: 999px;
    background: var(--cs-mode-pill-bg);
    color: var(--cs-mode-pill-text);
    border: 1px solid var(--cs-mode-pill-border);
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    box-shadow: var(--cs-mode-pill-shadow);
    transition: background-color 180ms ease, color 180ms ease,
        border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme):not(.high-contrast)
    :is(.calserver-highlight, .calhelp-highlight)
    .uk-subnav.uk-subnav-pill
    > *
    > a:hover,
body.marketing-page:is(.calserver-layout, .calhelp-theme):not(.high-contrast)
    :is(.calserver-highlight, .calhelp-highlight)
    .uk-subnav.uk-subnav-pill
    > *
    > a:focus {
    background: var(--cs-mode-pill-hover-bg);
    color: var(--cs-mode-pill-hover-text);
    border-color: var(--cs-mode-pill-hover-border);
    box-shadow: var(--cs-mode-pill-hover-shadow);
    transform: translateY(-1px);
}

body.marketing-page:is(.calserver-layout, .calhelp-theme):not(.high-contrast)
    :is(.calserver-highlight, .calhelp-highlight)
    .uk-subnav.uk-subnav-pill
    > *
    > a:focus-visible {
    outline: 3px solid var(--cs-mode-pill-focus-ring);
    outline-offset: 3px;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme):not(.high-contrast)
    :is(.calserver-highlight, .calhelp-highlight)
    .uk-subnav.uk-subnav-pill
    > .uk-active
    > a,
body.marketing-page:is(.calserver-layout, .calhelp-theme):not(.high-contrast)
    :is(.calserver-highlight, .calhelp-highlight)
    .uk-subnav.uk-subnav-pill
    > .uk-active
    > a:hover,
body.marketing-page:is(.calserver-layout, .calhelp-theme):not(.high-contrast)
    :is(.calserver-highlight, .calhelp-highlight)
    .uk-subnav.uk-subnav-pill
    > .uk-active
    > a:focus {
    background: var(--cs-mode-pill-active-bg);
    color: var(--cs-mode-pill-active-text);
    border-color: var(--cs-mode-pill-active-border);
    box-shadow: var(--cs-mode-pill-hover-shadow);
    transform: translateY(-1px);
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-highlight__intro, .calhelp-highlight__intro) {
    max-width: 720px;
    margin: 0 auto 42px;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-highlight__intro, .calhelp-highlight__intro) p {
    color: color-mix(in oklab, color-mix(in oklab, var(--marketing-white) 92%, transparent) 92%, color-mix(in oklab, var(--marketing-white) 62%, transparent) 8%);
}

body.marketing-page:is(.calserver-layout, .calhelp-theme):not(.dark-mode):not(.high-contrast)
    :is(.calserver-highlight__intro, .calhelp-highlight__intro)
    p,
body.marketing-page:is(.calserver-layout, .calhelp-theme)[data-theme="light"]:not(.high-contrast)
    :is(.calserver-highlight__intro, .calhelp-highlight__intro)
    p {
    color: color-mix(in oklab, var(--qr-text) 92%, var(--qr-bg) 8%);
}

body.marketing-page:is(.calserver-layout, .calhelp-theme):not(.dark-mode):not(.high-contrast) :is(.calserver-highlight, .calhelp-highlight).uk-light,
body.marketing-page:is(.calserver-layout, .calhelp-theme)[data-theme="light"]:not(.high-contrast) :is(.calserver-highlight, .calhelp-highlight).uk-light {
    color: var(--qr-text);
}

body.marketing-page:is(.calserver-layout, .calhelp-theme):not(.dark-mode):not(.high-contrast)
    :is(.calserver-highlight, .calhelp-highlight).uk-light
    :is(h1, h2, h3, h4, h5, h6, .uk-heading-small, .uk-heading-medium, .uk-heading-large, .uk-heading-xlarge,
        .uk-heading-line > span, .uk-text-lead) {
    color: inherit;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme)[data-theme="light"]:not(.high-contrast)
    :is(.calserver-highlight, .calhelp-highlight).uk-light
    :is(h1, h2, h3, h4, h5, h6, .uk-heading-small, .uk-heading-medium, .uk-heading-large, .uk-heading-xlarge,
        .uk-heading-line > span, .uk-text-lead) {
    color: inherit;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-highlight-card, .calhelp-highlight-card) {
    background: var(--cs-highlight-card-bg) !important;
    border: 1px solid var(--cs-highlight-card-border) !important;
    border-radius: 22px;
    box-shadow: var(--cs-highlight-card-shadow);
    padding: 32px 36px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: color-mix(in oklab, var(--qr-text) 88%, var(--qr-bg) 12%);
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-highlight-card, .calhelp-highlight-card) .uk-card-title {
    color: color-mix(in oklab, var(--calserver-primary) 32%, var(--qr-text) 68%);
    letter-spacing: -0.01em;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-highlight-card, .calhelp-highlight-card) .uk-list-bullet > li::before {
    border-color: color-mix(in oklab, var(--calserver-primary) 48%, transparent);
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-highlight-card__actions, .calhelp-highlight-card__actions) {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    align-items: center;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-highlight-card__actions, .calhelp-highlight-card__actions) .muted {
    font-size: 0.85rem;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme):not(.dark-mode):not(.high-contrast)
    :is(.calserver-highlight-card__actions, .calhelp-highlight-card__actions)
    .uk-button-primary,
body.marketing-page:is(.calserver-layout, .calhelp-theme)[data-theme="light"]:not(.high-contrast)
    :is(.calserver-highlight-card__actions, .calhelp-highlight-card__actions)
    .uk-button-primary {
    background: color-mix(in oklab, var(--calserver-primary) 88%, var(--marketing-ink) 12%);
    border-color: color-mix(in oklab, var(--calserver-primary) 68%, color-mix(in oklab, var(--marketing-ink) 24%, transparent));
    color: var(--marketing-white);
    box-shadow: 0 18px 36px -24px
        color-mix(in oklab, var(--calserver-primary) 68%, color-mix(in oklab, var(--marketing-ink) 70%, transparent));
}

body.marketing-page:is(.calserver-layout, .calhelp-theme):not(.dark-mode):not(.high-contrast)
    :is(.calserver-highlight-card__actions, .calhelp-highlight-card__actions)
    .uk-button-primary:hover,
body.marketing-page:is(.calserver-layout, .calhelp-theme)[data-theme="light"]:not(.high-contrast)
    :is(.calserver-highlight-card__actions, .calhelp-highlight-card__actions)
    .uk-button-primary:hover {
    background: color-mix(in oklab, var(--calserver-primary) 78%, var(--marketing-ink) 22%);
    border-color: color-mix(in oklab, var(--calserver-primary) 72%, color-mix(in oklab, var(--marketing-ink) 34%, transparent));
}

body.marketing-page:is(.calserver-layout, .calhelp-theme):not(.dark-mode):not(.high-contrast)
    :is(.calserver-highlight-card__actions, .calhelp-highlight-card__actions)
    .uk-button-primary:focus-visible,
body.marketing-page:is(.calserver-layout, .calhelp-theme)[data-theme="light"]:not(.high-contrast)
    :is(.calserver-highlight-card__actions, .calhelp-highlight-card__actions)
    .uk-button-primary:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--calserver-primary) 75%, var(--marketing-white) 25%);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--calserver-primary) 54%, color-mix(in oklab, var(--marketing-ink) 18%, transparent));
}

body.marketing-page:is(.calserver-layout, .calhelp-theme):not(.dark-mode):not(.high-contrast)
    :is(.calserver-highlight-card__actions, .calhelp-highlight-card__actions)
    .uk-button-default,
body.marketing-page:is(.calserver-layout, .calhelp-theme)[data-theme="light"]:not(.high-contrast)
    :is(.calserver-highlight-card__actions, .calhelp-highlight-card__actions)
    .uk-button-default {
    background: var(--marketing-white);
    color: color-mix(in oklab, var(--calserver-primary) 82%, var(--marketing-ink) 18%);
    border-color: color-mix(in oklab, var(--calserver-primary) 32%, color-mix(in oklab, var(--marketing-ink) 8%, transparent));
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--calserver-primary) 26%, color-mix(in oklab, var(--marketing-ink) 16%, transparent)) inset,
        0 14px 28px -24px color-mix(in oklab, var(--marketing-ink) 32%, transparent);
}

body.marketing-page:is(.calserver-layout, .calhelp-theme):not(.dark-mode):not(.high-contrast)
    :is(.calserver-highlight-card__actions, .calhelp-highlight-card__actions)
    .uk-button-default:hover,
body.marketing-page:is(.calserver-layout, .calhelp-theme)[data-theme="light"]:not(.high-contrast)
    :is(.calserver-highlight-card__actions, .calhelp-highlight-card__actions)
    .uk-button-default:hover {
    background: color-mix(in oklab, var(--marketing-white) 86%, var(--calserver-primary) 14%);
    color: color-mix(in oklab, var(--calserver-primary) 88%, var(--marketing-ink) 12%);
    border-color: color-mix(in oklab, var(--calserver-primary) 46%, color-mix(in oklab, var(--marketing-ink) 16%, transparent));
}

body.marketing-page:is(.calserver-layout, .calhelp-theme):not(.dark-mode):not(.high-contrast)
    :is(.calserver-highlight-card__actions, .calhelp-highlight-card__actions)
    .uk-button-default:focus-visible,
body.marketing-page:is(.calserver-layout, .calhelp-theme)[data-theme="light"]:not(.high-contrast)
    :is(.calserver-highlight-card__actions, .calhelp-highlight-card__actions)
    .uk-button-default:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--calserver-primary) 62%, var(--marketing-white) 38%);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--calserver-primary) 32%, color-mix(in oklab, var(--marketing-ink) 22%, transparent));
}

@media (max-width: 959px) {
    body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-highlight-card, .calhelp-highlight-card) {
        padding: 28px;
    }
}

@media (max-width: 639px) {
    body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-highlight-card__actions, .calhelp-highlight-card__actions) {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-highlight-card__actions, .calhelp-highlight-card__actions) .uk-button {
        width: 100%;
        justify-content: center;
    }
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-section-glow, .calhelp-section-glow) {
    position: relative;
    overflow: hidden;
    z-index: 0;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-section-glow, .calhelp-section-glow) > * {
    position: relative;
    z-index: 1;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-section-glow, .calhelp-section-glow)::before,
body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-section-glow, .calhelp-section-glow)::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 160px;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        color-mix(in oklab, var(--calserver-primary) 16%, transparent) 0%,
        transparent 100%
    );
    z-index: 0;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-section-glow, .calhelp-section-glow)::before {
    left: 0;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-section-glow, .calhelp-section-glow)::after {
    right: 0;
    transform: scaleX(-1);
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-stats-strip, .calhelp-stats-strip) {
    display: grid;
    gap: 18px;
    position: relative;
    z-index: 1;
}

@media (min-width: 640px) {
    body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-stats-strip, .calhelp-stats-strip) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-stats-strip__item, .calhelp-stats-strip__item) {
    padding: 18px 20px;
    border-radius: 18px;
    background: var(--cs-highlight-card-bg);
    border: 1px solid var(--cs-highlight-card-border);
    box-shadow: var(--cs-highlight-card-shadow);
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 120px;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-stats-strip__header, .calhelp-stats-strip__header) {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-stats-strip__title-group, .calhelp-stats-strip__title-group) {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-stats-strip__value, .calhelp-stats-strip__value) {
    font-size: clamp(2rem, 2.2vw + 1.2rem, 3rem);
    font-weight: 700;
    color: var(--qr-landing-primary);
    letter-spacing: -0.01em;
    flex-shrink: 0;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme).dark-mode:not(.high-contrast) :is(.calserver-stats-strip__value, .calhelp-stats-strip__value),
body.marketing-page:is(.calserver-layout, .calhelp-theme)[data-theme="dark"]:not(.high-contrast) :is(.calserver-stats-strip__value, .calhelp-stats-strip__value) {
    color: var(--qr-text);
}

body.marketing-page:is(.calserver-layout, .calhelp-theme):not(.dark-mode):not(.high-contrast) :is(.calserver-stats-strip__value, .calhelp-stats-strip__value),
body.marketing-page:is(.calserver-layout, .calhelp-theme)[data-theme="light"]:not(.high-contrast) :is(.calserver-stats-strip__value, .calhelp-stats-strip__value) {
    color: color-mix(in oklab, var(--calserver-primary) 86%, var(--marketing-ink) 14%);
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-stats-strip__title, .calhelp-stats-strip__title) {
    color: var(--qr-text);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.3;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-stats-strip__label, .calhelp-stats-strip__label) {
    color: var(--qr-muted);
    font-size: 0.95rem;
    line-height: 1.35;
    display: block;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-stats-strip__benefit, .calhelp-stats-strip__benefit) {
    margin: 8px 0 0;
    color: var(--qr-text);
    font-size: 0.95rem;
    line-height: 1.45;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-stats-strip__tooltip, .calhelp-stats-strip__tooltip) {
    color: var(--qr-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    cursor: help;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-stats-strip__tooltip, .calhelp-stats-strip__tooltip):focus-visible {
    outline: 2px solid color-mix(in oklab, var(--calserver-primary) 65%, transparent);
    outline-offset: 2px;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-logo-marquee, .calhelp-logo-marquee) {
    margin-top: 34px;
    position: relative;
    overflow: hidden;
    padding: 6px 0;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-logo-marquee, .calhelp-logo-marquee)::before,
body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-logo-marquee, .calhelp-logo-marquee)::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(90deg, var(--qr-card), transparent);
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-logo-marquee, .calhelp-logo-marquee)::before {
    left: 0;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-logo-marquee, .calhelp-logo-marquee)::after {
    right: 0;
    transform: scaleX(-1);
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-logo-marquee__track, .calhelp-logo-marquee__track) {
    display: flex;
    align-items: center;
    gap: 48px;
    animation: calserver-marquee 26s linear infinite;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-logo-marquee__item, .calhelp-logo-marquee__item) {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 130px;
    padding: 10px 24px;
    border-radius: 999px;
    background: color-mix(in oklab, var(--calserver-primary) 16%, transparent);
    border: 1px solid color-mix(in oklab, var(--calserver-primary) 32%, transparent);
    color: color-mix(in oklab, var(--calserver-primary) 85%, var(--marketing-text-on-surface-dark) 15%);
    font-weight: 600;
    letter-spacing: 0.01em;
    text-align: center;
    opacity: 0.96;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-logo-marquee__item, .calhelp-logo-marquee__item) img {
    max-height: 40px;
    width: auto;
    filter: drop-shadow(0 4px 10px color-mix(in oklab, var(--marketing-ink) 25%, transparent));
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-pricing__header, .calhelp-pricing__header) {
    gap: 12px;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-pricing-card, .calhelp-pricing-card) {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
    padding: clamp(24px, 3vw, 32px);
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-pricing-card, .calhelp-pricing-card) .uk-list {
    margin-top: 4px;
    flex-grow: 1;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-pricing-card, .calhelp-pricing-card) .uk-button {
    margin-top: auto;
    align-self: center;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-pricing-card, .calhelp-pricing-card) .uk-text-bold {
    font-size: clamp(1.4rem, 1.1vw + 1.1rem, 2rem);
}

@keyframes calserver-marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-logo-marquee__track, .calhelp-logo-marquee__track) {
        animation: none;
    }
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) #trust {
    --trust-step-accent: color-mix(in oklab, var(--calserver-primary) 72%, var(--qr-text) 28%);
    --trust-axis-color: color-mix(in oklab, var(--trust-step-accent) 45%, var(--qr-bg) 55%);
    --trust-step-marker-bg: color-mix(in oklab, var(--qr-bg) 78%, var(--trust-step-accent) 22%);
    --trust-step-marker-icon: color-mix(in oklab, var(--trust-step-accent) 72%, var(--qr-text) 28%);
    --trust-step-surface: color-mix(in oklab, var(--qr-card) 18%, transparent 82%);
    --trust-step-surface-hover: color-mix(in oklab, var(--trust-step-marker-bg) 30%, var(--trust-step-surface) 70%);
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) #trust .trust-story {
    position: relative;
    list-style: none;
    margin: 44px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 36px;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) #trust .trust-story__lead {
    margin: 12px 0 0;
    font-size: 1.1rem;
    line-height: 1.7;
    color: color-mix(in oklab, var(--qr-text) 78%, var(--qr-bg) 22%);
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) #trust .trust-story__step {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 72px) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    padding: 8px 0;
    border-radius: 20px;
    outline: none;
    scroll-margin: 96px;
    transition: color 220ms ease;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) #trust .trust-story__marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    min-width: 64px;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) #trust .trust-story__connector {
    width: 2px;
    flex: 1 1 24px;
    min-height: 24px;
    background: var(--trust-axis-color);
    border-radius: 999px;
    transition: background 220ms ease;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) #trust .trust-story__step:first-child .trust-story__connector--before,
body.marketing-page:is(.calserver-layout, .calhelp-theme) #trust .trust-story__step:last-child .trust-story__connector--after {
    display: none;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) #trust .trust-story__badge {
    position: relative;
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border-radius: 999px;
    background: var(--trust-step-marker-bg);
    border: 2px solid color-mix(in oklab, var(--trust-step-accent) 80%, transparent);
    color: var(--trust-step-marker-icon);
    transition: transform 220ms ease, background 220ms ease, border-color 220ms ease, color 220ms ease;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) #trust .trust-story__badge::after {
    content: attr(data-step-index);
    position: absolute;
    inset-inline-end: -8px;
    inset-block-end: -8px;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: color-mix(in oklab, var(--trust-step-accent) 75%, var(--qr-bg) 25%);
    color: var(--marketing-white);
    font-weight: 600;
    font-size: 0.9rem;
    display: grid;
    place-items: center;
    box-shadow: 0 0 0 2px var(--qr-bg);
    transition: background 220ms ease, color 220ms ease, box-shadow 220ms ease;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) #trust .trust-story__badge-icon {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    color: inherit;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) #trust .trust-story__badge-icon svg {
    width: 24px;
    height: 24px;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) #trust .trust-story__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) #trust .trust-story__content {
    background: var(--trust-step-surface);
    border-radius: 18px;
    padding: 18px 22px;
    border: 1px solid color-mix(in oklab, var(--qr-text) 12%, transparent);
    transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) #trust .trust-story__title {
    margin: 0 0 12px;
    font-size: 1.35rem;
    line-height: 1.35;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) #trust .trust-story__text {
    margin: 0;
    color: color-mix(in oklab, var(--qr-text) 74%, var(--qr-bg) 26%);
    line-height: 1.65;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) #trust .trust-story__step:hover .trust-story__content,
body.marketing-page:is(.calserver-layout, .calhelp-theme) #trust .trust-story__step:focus-visible .trust-story__content,
body.marketing-page:is(.calserver-layout, .calhelp-theme) #trust .trust-story__step:focus-within .trust-story__content {
    background: var(--trust-step-surface-hover);
    border-color: color-mix(in oklab, var(--trust-step-accent) 65%, transparent);
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--trust-step-accent) 45%, transparent);
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) #trust .trust-story__step:hover .trust-story__badge,
body.marketing-page:is(.calserver-layout, .calhelp-theme) #trust .trust-story__step:focus-visible .trust-story__badge,
body.marketing-page:is(.calserver-layout, .calhelp-theme) #trust .trust-story__step:focus-within .trust-story__badge {
    background: color-mix(in oklab, var(--trust-step-marker-bg) 40%, var(--trust-step-accent) 60%);
    border-color: color-mix(in oklab, var(--trust-step-accent) 80%, var(--marketing-white) 20%);
    color: color-mix(in oklab, var(--marketing-white) 70%, var(--trust-step-marker-icon) 30%);
    transform: translateY(-2px);
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) #trust .trust-story__step:hover .trust-story__badge::after,
body.marketing-page:is(.calserver-layout, .calhelp-theme) #trust .trust-story__step:focus-visible .trust-story__badge::after,
body.marketing-page:is(.calserver-layout, .calhelp-theme) #trust .trust-story__step:focus-within .trust-story__badge::after {
    background: color-mix(in oklab, var(--trust-step-accent) 88%, var(--qr-bg) 12%);
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--qr-bg) 85%, transparent 15%);
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) #trust .trust-story__step:hover .trust-story__connector,
body.marketing-page:is(.calserver-layout, .calhelp-theme) #trust .trust-story__step:focus-visible .trust-story__connector,
body.marketing-page:is(.calserver-layout, .calhelp-theme) #trust .trust-story__step:focus-within .trust-story__connector {
    background: color-mix(in oklab, var(--trust-step-accent) 65%, transparent);
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) #trust .trust-story__step:focus-visible {
    outline: 3px solid color-mix(in oklab, var(--trust-step-accent) 68%, transparent);
    outline-offset: 10px;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) #trust .trust-story__closing {
    background: color-mix(in oklab, var(--qr-card) 88%, var(--calserver-primary) 12%);
    border-radius: 24px;
    padding: 36px 40px;
    margin-top: 52px;
    box-shadow: none;
    border: 1px solid color-mix(in oklab, var(--trust-step-accent) 35%, transparent);
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) #trust .trust-story__closing-title {
    margin: 0 0 12px;
    font-size: 1.6rem;
    line-height: 1.4;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) #trust .trust-story__closing-text {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.7;
    color: color-mix(in oklab, var(--qr-text) 78%, var(--qr-bg) 22%);
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) #trust .trust-story__cta-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-start;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) #trust .trust-story__cta-group .uk-button,
body.marketing-page:is(.calserver-layout, .calhelp-theme) #trust .trust-story__cta-group .btn {
    flex: 1 1 auto;
    min-width: 180px;
    text-align: center;
}

body.high-contrast #trust,
body[data-theme="dark"].high-contrast #trust {
    --trust-step-surface: transparent;
    --trust-step-surface-hover: rgb(var(--marketing-black-rgb) / 0.08);
    --trust-axis-color: currentColor;
    --trust-step-marker-bg: transparent;
    --trust-step-marker-icon: currentColor;
}

body[data-theme="dark"].high-contrast #trust {
    --trust-step-surface-hover: color-mix(in oklab, var(--marketing-white) 10%, transparent);
}

body.high-contrast #trust .trust-story__badge,
body[data-theme="dark"].high-contrast #trust .trust-story__badge {
    border-color: currentColor;
}

body.high-contrast #trust .trust-story__badge::after {
    background: var(--marketing-black);
    color: var(--marketing-white);
    box-shadow: none;
}

body[data-theme="dark"].high-contrast #trust .trust-story__badge::after {
    background: var(--marketing-white);
    color: var(--marketing-black);
}

body.high-contrast #trust .trust-story__connector,
body[data-theme="dark"].high-contrast #trust .trust-story__connector {
    background: currentColor;
}

body.high-contrast #trust .trust-story__step:focus-visible,
body[data-theme="dark"].high-contrast #trust .trust-story__step:focus-visible {
    outline-color: currentColor;
}

body.high-contrast #trust .trust-story__content,
body[data-theme="dark"].high-contrast #trust .trust-story__content {
    border-color: currentColor;
    box-shadow: none;
}

body.high-contrast #trust .trust-story__step:hover .trust-story__badge,
body.high-contrast #trust .trust-story__step:focus-visible .trust-story__badge,
body.high-contrast #trust .trust-story__step:focus-within .trust-story__badge,
body[data-theme="dark"].high-contrast #trust .trust-story__step:hover .trust-story__badge,
body[data-theme="dark"].high-contrast #trust .trust-story__step:focus-visible .trust-story__badge,
body[data-theme="dark"].high-contrast #trust .trust-story__step:focus-within .trust-story__badge {
    background: transparent;
    color: currentColor;
    transform: none;
}

body.high-contrast #trust .trust-story__step:hover .trust-story__badge::after,
body.high-contrast #trust .trust-story__step:focus-visible .trust-story__badge::after,
body.high-contrast #trust .trust-story__step:focus-within .trust-story__badge::after {
    background: var(--marketing-black);
    color: var(--marketing-white);
}

body[data-theme="dark"].high-contrast #trust .trust-story__step:hover .trust-story__badge::after,
body[data-theme="dark"].high-contrast #trust .trust-story__step:focus-visible .trust-story__badge::after,
body[data-theme="dark"].high-contrast #trust .trust-story__step:focus-within .trust-story__badge::after {
    background: var(--marketing-white);
    color: var(--marketing-black);
}

body.high-contrast #trust .trust-story__step:hover .trust-story__connector,
body.high-contrast #trust .trust-story__step:focus-visible .trust-story__connector,
body.high-contrast #trust .trust-story__step:focus-within .trust-story__connector,
body[data-theme="dark"].high-contrast #trust .trust-story__step:hover .trust-story__connector,
body[data-theme="dark"].high-contrast #trust .trust-story__step:focus-visible .trust-story__connector,
body[data-theme="dark"].high-contrast #trust .trust-story__step:focus-within .trust-story__connector {
    background: currentColor;
}

@media (min-width: 960px) {
    body.marketing-page:is(.calserver-layout, .calhelp-theme) #trust .trust-story {
        flex-direction: row;
        align-items: stretch;
        gap: 40px;
    }

    body.marketing-page:is(.calserver-layout, .calhelp-theme) #trust .trust-story__step {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        text-align: center;
        gap: 24px;
        padding: 16px 12px 24px;
    }

    body.marketing-page:is(.calserver-layout, .calhelp-theme) #trust .trust-story__marker {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width: 100%;
        gap: 18px;
    }

    body.marketing-page:is(.calserver-layout, .calhelp-theme) #trust .trust-story__connector {
        min-height: 2px;
        height: 2px;
        width: 100%;
    }

    body.marketing-page:is(.calserver-layout, .calhelp-theme) #trust .trust-story__content {
        max-width: 360px;
    }

    body.marketing-page:is(.calserver-layout, .calhelp-theme) #trust .trust-story__title {
        margin: 0 0 10px;
    }
}

@media (max-width: 1200px) {
    body.marketing-page:is(.calserver-layout, .calhelp-theme) #trust .trust-story__closing {
        padding: 32px;
    }
}

@media (max-width: 959px) {
    body.marketing-page:is(.calserver-layout, .calhelp-theme) #trust .trust-story {
        margin-top: 36px;
        gap: 32px;
    }

    body.marketing-page:is(.calserver-layout, .calhelp-theme) #trust .trust-story__step {
        grid-template-columns: minmax(0, 60px) minmax(0, 1fr);
        gap: 18px;
        padding: 4px 0;
    }

    body.marketing-page:is(.calserver-layout, .calhelp-theme) #trust .trust-story__badge {
        width: 54px;
        height: 54px;
    }

    body.marketing-page:is(.calserver-layout, .calhelp-theme) #trust .trust-story__badge::after {
        width: 24px;
        height: 24px;
        font-size: 0.8rem;
    }

    body.marketing-page:is(.calserver-layout, .calhelp-theme) #trust .trust-story__content {
        padding: 16px 18px;
    }

    body.marketing-page:is(.calserver-layout, .calhelp-theme) #trust .trust-story__closing {
        margin-top: 44px;
    }
}

@media (max-width: 640px) {
    body.marketing-page:is(.calserver-layout, .calhelp-theme) #trust .trust-story__lead {
        font-size: 1rem;
    }

    body.marketing-page:is(.calserver-layout, .calhelp-theme) #trust .trust-story__title {
        font-size: 1.2rem;
    }

    body.marketing-page:is(.calserver-layout, .calhelp-theme) #trust .trust-story__text {
        font-size: 1rem;
    }

    body.marketing-page:is(.calserver-layout, .calhelp-theme) #trust .trust-story__cta-group {
        flex-direction: column;
        align-items: stretch;
    }
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) .muted {
    color: color-mix(in oklab, var(--qr-text) 60%, var(--qr-bg) 40%);
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) .quick-cta {
    border-radius: 18px;
    background: color-mix(in oklab, var(--calserver-primary) 10%, transparent);
    padding: 24px 32px;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) .uk-card-hover {
    transition: transform 220ms ease, box-shadow 220ms ease;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) .uk-card-hover:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 48px -28px color-mix(in oklab, var(--marketing-ink) 45%, transparent);
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) .feature-nav {
    margin: 0 auto 12px;
    max-width: 1024px;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) .feature-nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) .feature-nav__pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    border-radius: 999px;
    background: color-mix(in oklab, var(--calserver-primary) 10%, transparent);
    color: var(--qr-landing-primary);
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    box-shadow: 0 1px 0 0 color-mix(in oklab, var(--marketing-white) 30%, transparent) inset,
        0 14px 28px -24px color-mix(in oklab, var(--marketing-primary) 90%, transparent);
    transition: background-color 180ms ease, color 180ms ease,
        transform 180ms ease, box-shadow 180ms ease;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) .feature-nav__pill.is-active {
    background: var(--qr-landing-primary);
    color: var(--marketing-white);
    box-shadow: 0 1px 0 0 color-mix(in oklab, var(--marketing-white) 40%, transparent) inset,
        0 20px 34px -24px color-mix(in oklab, var(--marketing-primary) 95%, transparent);
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) .feature-nav__pill:hover,
body.marketing-page:is(.calserver-layout, .calhelp-theme) .feature-nav__pill:focus {
    background: var(--qr-landing-primary);
    color: var(--marketing-white);
    transform: translateY(-2px);
    box-shadow: 0 18px 32px -22px color-mix(in oklab, var(--marketing-primary) 90%, transparent);
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) .feature-slider {
    margin-top: 40px;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) .feature-slider__list > li {
    display: flex;
    position: relative;
    padding: 12px;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) .feature-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--cs-card-dark);
    border: 1px solid var(--cs-card-dark-border);
    border-radius: 14px;
    padding: 24px;
    color: var(--cs-text-on-dark);
    box-shadow: 0 12px 24px -12px rgb(var(--marketing-black-rgb) / 0.35),
        0 6px 12px -8px rgb(var(--marketing-black-rgb) / 0.25);
    transition: background-color 250ms ease, border-color 250ms ease, box-shadow 250ms ease,
        transform 250ms ease, opacity 200ms ease;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) .feature-card__title,
body.marketing-page:is(.calserver-layout, .calhelp-theme) .feature-card p,
body.marketing-page:is(.calserver-layout, .calhelp-theme) .feature-card li {
    color: var(--cs-text-on-dark);
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) .feature-card .uk-list-bullet > li::before {
    border-color: var(--cs-text-on-dark);
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) .feature-card--focus {
    background: var(--cs-card-focus-bg);
    border-color: var(--cs-card-focus-border);
    box-shadow: var(--cs-card-focus-shadow);
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) .feature-slider__list > li.is-center .feature-card {
    transform: scale(1.04);
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) .feature-slider__list > li.is-center .feature-card.feature-card--focus {
    transform: scale(1.04) translateY(-2px);
    box-shadow: var(--cs-card-focus-shadow);
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) #modules :is(.calserver-modules-grid, .calhelp-modules-grid) {
    display: grid;
    gap: 32px;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    margin-top: 40px;
    align-items: start;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-modules-nav, .calhelp-modules-nav) {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
    border-bottom: none;
    position: relative;
    z-index: 2;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-modules-nav__link, .calhelp-modules-nav__link) {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 18px 20px;
    border-radius: 18px;
    background: color-mix(in oklab, var(--calserver-primary) 10%, transparent);
    border: 1px solid color-mix(in oklab, var(--calserver-primary) 15%, var(--qr-card-border) 85%);
    box-shadow: 0 18px 36px -28px color-mix(in oklab, var(--marketing-ink) 28%, transparent);
    color: var(--qr-text);
    text-decoration: none;
    transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease,
        transform 200ms ease;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-modules-nav__title, .calhelp-modules-nav__title) {
    font-weight: 600;
    letter-spacing: 0.01em;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-modules-nav__desc, .calhelp-modules-nav__desc) {
    color: color-mix(in oklab, var(--qr-text) 68%, var(--qr-bg) 32%);
    font-size: 0.92rem;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-modules-nav, .calhelp-modules-nav) li.uk-active :is(.calserver-modules-nav__link, .calhelp-modules-nav__link),
body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-modules-nav__link, .calhelp-modules-nav__link):hover {
    background: color-mix(in oklab, var(--calserver-primary) 18%, var(--qr-card) 82%);
    border-color: color-mix(in oklab, var(--calserver-primary) 45%, transparent);
    box-shadow: 0 24px 48px -30px color-mix(in oklab, var(--marketing-ink) 42%, transparent);
    transform: translateY(-2px);
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-modules-nav__link, .calhelp-modules-nav__link):focus-visible {
    outline: 3px solid color-mix(in oklab, var(--calserver-primary) 60%, var(--marketing-white) 40%);
    outline-offset: 3px;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-modules-nav, .calhelp-modules-nav) > li {
    margin: 0;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-modules-switcher, .calhelp-modules-switcher) {
    margin: 0;
    padding: 0;
    list-style: none;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-modules-switcher, .calhelp-modules-switcher) > li {
    list-style: none;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-module-figure, .calhelp-module-figure) {
    position: relative;
    isolation: isolate;
    margin: 0;
    border-radius: 22px;
    display: flex;
    flex-direction: column;
    height: 100%;
    z-index: 0;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-module-figure, .calhelp-module-figure)::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--qr-card);
    border: 1px solid var(--qr-card-border);
    box-shadow: 0 22px 48px -28px color-mix(in oklab, var(--marketing-ink) 35%, transparent);
    pointer-events: none;
    z-index: 0;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-module-figure, .calhelp-module-figure) img,
body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-module-figure, .calhelp-module-figure) video,
body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-module-figure, .calhelp-module-figure) :is(.calserver-module-figure__visual, .calhelp-module-figure__visual),
body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-module-figure, .calhelp-module-figure) figcaption {
    position: relative;
    z-index: 1;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-module-figure, .calhelp-module-figure) img,
body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-module-figure, .calhelp-module-figure) video,
body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-module-figure, .calhelp-module-figure) :is(.calserver-module-figure__visual, .calhelp-module-figure__visual) {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 0;
    box-shadow: 0 18px 32px -24px color-mix(in oklab, var(--marketing-ink) 45%, transparent);
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-module-figure, .calhelp-module-figure) video {
    background: var(--marketing-black);
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-module-figure__visual, .calhelp-module-figure__visual) {
    aspect-ratio: 16 / 9;
    background: radial-gradient(circle at 20% 20%, color-mix(in oklab, var(--marketing-primary) 60%, transparent), color-mix(in oklab, var(--marketing-ink) 92%, transparent));
    border-radius: 22px 22px 0 0;
    color: var(--marketing-white);
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 36px;
    overflow: hidden;
    position: relative;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-module-figure__visual, .calhelp-module-figure__visual)::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 18%, color-mix(in oklab, var(--marketing-white) 16%, transparent), transparent 55%),
        radial-gradient(circle at 12% 78%, color-mix(in oklab, var(--marketing-white) 12%, transparent), transparent 50%),
        linear-gradient(135deg, color-mix(in oklab, var(--marketing-white) 10%, transparent), transparent 60%);
    mix-blend-mode: screen;
    opacity: 0.85;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-module-figure__visual, .calhelp-module-figure__visual)[data-module="device-management"] {
    background: radial-gradient(circle at 12% 18%, color-mix(in oklab, var(--marketing-primary) 70%, transparent), color-mix(in oklab, var(--marketing-ink) 92%, transparent)),
        linear-gradient(145deg, color-mix(in oklab, var(--marketing-primary) 85%, transparent), color-mix(in oklab, var(--marketing-ink) 95%, transparent));
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-module-figure__visual, .calhelp-module-figure__visual)[data-module="calendar-resources"] {
    background: radial-gradient(circle at 82% 22%, color-mix(in oklab, var(--marketing-primary) 60%, transparent), color-mix(in oklab, var(--marketing-ink) 96%, transparent)),
        linear-gradient(135deg, color-mix(in oklab, var(--marketing-primary) 88%, transparent), color-mix(in oklab, var(--marketing-ink) 95%, transparent));
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-module-figure__visual, .calhelp-module-figure__visual)[data-module="order-ticketing"] {
    background: radial-gradient(circle at 18% 78%, color-mix(in oklab, var(--marketing-accent) 68%, transparent), color-mix(in oklab, var(--marketing-accent) 94%, transparent)),
        linear-gradient(140deg, color-mix(in oklab, var(--marketing-accent) 82%, transparent), color-mix(in oklab, var(--marketing-accent) 92%, transparent));
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-module-figure__visual, .calhelp-module-figure__visual)[data-module="self-service"] {
    background: radial-gradient(circle at 78% 24%, color-mix(in oklab, var(--marketing-primary) 65%, transparent), color-mix(in oklab, var(--marketing-ink) 93%, transparent)),
        linear-gradient(135deg, color-mix(in oklab, var(--marketing-primary) 84%, transparent), color-mix(in oklab, var(--marketing-ink) 92%, transparent));
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-module-figure__visual-label, .calhelp-module-figure__visual-label) {
    font-size: clamp(1.4rem, 2vw + 1rem, 2.35rem);
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.2;
    margin: 0;
    max-width: 20ch;
    position: relative;
    z-index: 1;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-module-figure__video--manual, .calhelp-module-figure__video--manual) {
    cursor: pointer;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-module-figure--manual, .calhelp-module-figure--manual) :is(.calserver-module-figure__fullscreen-button, .calhelp-module-figure__fullscreen-button) {
    top: 14px;
    right: 14px;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-module-figure__fullscreen-button, .calhelp-module-figure__fullscreen-button) {
    position: absolute;
    top: 18px;
    right: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 1px solid color-mix(in oklab, var(--calserver-primary) 58%, color-mix(in oklab, var(--marketing-white) 24%, transparent));
    background: color-mix(in oklab, var(--calserver-primary) 46%, color-mix(in oklab, var(--marketing-ink) 92%, transparent));
    color: var(--marketing-white);
    cursor: pointer;
    z-index: 2;
    box-shadow: 0 16px 32px -22px color-mix(in oklab, var(--marketing-ink) 55%, transparent);
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-module-figure__fullscreen-button, .calhelp-module-figure__fullscreen-button):hover,
body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-module-figure__fullscreen-button, .calhelp-module-figure__fullscreen-button):focus-visible {
    background: color-mix(in oklab, var(--calserver-primary) 60%, color-mix(in oklab, var(--marketing-ink) 90%, transparent));
    border-color: color-mix(in oklab, var(--calserver-primary) 68%, color-mix(in oklab, var(--marketing-white) 30%, transparent));
    box-shadow: 0 18px 36px -20px color-mix(in oklab, var(--marketing-ink) 62%, transparent);
    transform: translateY(-1px);
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-module-figure__fullscreen-button, .calhelp-module-figure__fullscreen-button):focus-visible {
    outline: 3px solid color-mix(in oklab, var(--calserver-primary) 68%, color-mix(in oklab, var(--marketing-white) 28%, transparent));
    outline-offset: 2px;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-module-figure__fullscreen-button, .calhelp-module-figure__fullscreen-button)[data-state="active"] {
    background: color-mix(in oklab, var(--calserver-primary) 72%, color-mix(in oklab, var(--marketing-ink) 94%, transparent));
    border-color: color-mix(in oklab, var(--calserver-primary) 78%, color-mix(in oklab, var(--marketing-white) 34%, transparent));
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-module-figure__fullscreen-icon, .calhelp-module-figure__fullscreen-icon) {
    font-size: 1.35rem;
    line-height: 1;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-module-figure, .calhelp-module-figure) figcaption {
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--qr-card);
    border: 1px solid color-mix(in oklab, var(--calserver-primary) 22%, var(--qr-card-border) 78%);
    border-top: 1px solid color-mix(in oklab, var(--calserver-primary) 28%, color-mix(in oklab, var(--marketing-ink) 32%, transparent));
    border-radius: 0 0 22px 22px;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-module-figure, .calhelp-module-figure) h3 {
    margin: 0;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-module-figure, .calhelp-module-figure) .uk-list {
    margin-bottom: 0;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-module-figure__download, .calhelp-module-figure__download) {
    margin: 0;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-module-figure__download-link, .calhelp-module-figure__download-link) {
    font-weight: 600;
    text-decoration: none;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-module-figure__download-link, .calhelp-module-figure__download-link):hover,
body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-module-figure__download-link, .calhelp-module-figure__download-link):focus {
    text-decoration: underline;
}

@media (max-width: 1024px) {
    body.marketing-page:is(.calserver-layout, .calhelp-theme) #modules :is(.calserver-modules-grid, .calhelp-modules-grid) {
        grid-template-columns: 1fr;
    }

    body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-modules-nav, .calhelp-modules-nav) {
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 8px;
        margin-bottom: 12px;
    }

    body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-modules-nav, .calhelp-modules-nav) > li {
        min-width: 240px;
        flex: 0 0 auto;
    }
}

@media (max-width: 640px) {
    body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-modules-nav, .calhelp-modules-nav) {
        flex-direction: column;
        align-items: center;
        overflow-x: visible;
        padding-bottom: 0;
        margin-bottom: 0;
        gap: 12px;
        width: 100%;
    }

    body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-modules-nav, .calhelp-modules-nav) > li {
        min-width: 0;
        width: min(100%, 360px);
        margin-inline: auto;
    }

    body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-modules-nav__link, .calhelp-modules-nav__link) {
        padding: 16px;
        padding-inline-start: 0;
    }

    body.marketing-page:is(.calserver-layout, .calhelp-theme) :is(.calserver-module-figure, .calhelp-module-figure) figcaption {
        padding: 22px;
    }
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) .feature-slider__list > li.is-center .feature-card:not(.feature-card--focus) {
    box-shadow: 0 22px 48px -32px color-mix(in oklab, var(--marketing-ink) 45%, transparent);
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) .feature-slider__list > li.is-center .feature-card:hover {
    transform: scale(1.04) translateY(-2px);
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) .feature-slider__list > li:not(.is-center) .feature-card {
    opacity: 0.92;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) .feature-slider__list > li:not(.is-center) .feature-card:hover {
    transform: translateY(-4px);
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) .testimonial-card {
    min-height: 240px;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) .usecase-card--visual {
    display: none;
    padding: 0;
    overflow: hidden;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) .usecase-card--visual .usecase-visual {
    margin: 0;
}

body.marketing-page:is(.calserver-layout, .calhelp-theme) .usecase-card--visual .usecase-visual__image {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 959px) {
    body.marketing-page:is(.calserver-layout, .calhelp-theme) .quick-cta {
        padding: 20px;
    }
}

.calhelp-anchor-target {
    position: relative;
    scroll-margin-top: clamp(5rem, 12vw, 7.5rem);
    min-height: 1px;
}

.calhelp-sticky-cta {
    right: clamp(1rem, 4vw, 1.75rem);
    bottom: clamp(4.5rem, 10vw, 6.75rem);
    width: auto;
    min-width: 3.25rem;
    padding: 0 1.5rem;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(0, 12px, 0);
    transition: opacity 0.24s ease, transform 0.24s ease;
}

.calhelp-sticky-cta .uk-icon {
    margin-right: 0.35rem;
}

.calhelp-sticky-cta.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
}

body.marketing-page.calhelp-theme .calhelp-proof-strip {
    gap: 24px;
}

body.marketing-page.calhelp-theme .calhelp-proof-card {
    padding: 24px 26px;
    gap: 12px;
}

body.marketing-page.calhelp-theme .calhelp-process {
    display: grid;
    gap: clamp(24px, 3vw, 36px);
}

body.marketing-page.calhelp-theme .calhelp-process-details {
    display: grid;
    gap: clamp(24px, 3vw, 36px);
    margin-top: clamp(24px, 4vw, 40px);
}

body.marketing-page.calhelp-theme .calhelp-process-details__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

body.marketing-page.calhelp-theme .calhelp-process-details__title {
    margin: 0;
    font-size: clamp(1.45rem, 0.7vw + 1.25rem, 1.9rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

body.marketing-page.calhelp-theme .calhelp-process__nav {
    display: flex;
    align-items: stretch;
    gap: clamp(12px, 1.6vw, 20px);
    padding: 0;
    margin: 0;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

body.marketing-page.calhelp-theme .calhelp-process__nav::-webkit-scrollbar {
    display: none;
}

body.marketing-page.calhelp-theme .calhelp-process__nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.4vw, 16px);
    flex: 1 1 0%;
    min-width: clamp(220px, 20vw, 260px);
    scroll-snap-align: center;
}

body.marketing-page.calhelp-theme .calhelp-process__nav-button {
    flex: 1;
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.2vw, 14px);
    justify-content: flex-start;
    width: 100%;
    min-height: clamp(64px, 6vw, 76px);
    padding: clamp(12px, 1.4vw, 16px) clamp(16px, 2.2vw, 20px);
    border-radius: 16px;
    border: 1px solid color-mix(in oklab, var(--calserver-primary) 24%, color-mix(in oklab, var(--marketing-ink) 14%, transparent));
    background: color-mix(in oklab, var(--calserver-primary) 8%, color-mix(in oklab, var(--marketing-white) 92%, transparent));
    color: var(--qr-text);
    font-weight: 600;
    font-size: clamp(0.95rem, 0.28vw + 0.9rem, 1.05rem);
    line-height: 1.4;
    text-align: left;
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}

body.marketing-page.calhelp-theme .calhelp-process__nav-button:hover {
    background: color-mix(in oklab, var(--calserver-primary) 14%, color-mix(in oklab, var(--marketing-white) 94%, transparent));
    border-color: color-mix(in oklab, var(--calserver-primary) 36%, color-mix(in oklab, var(--marketing-ink) 18%, transparent));
}

body.marketing-page.calhelp-theme .calhelp-process__nav-button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--calserver-primary) 46%, color-mix(in oklab, var(--marketing-white) 38%, transparent));
}

body.marketing-page.calhelp-theme .calhelp-process__nav-item.is-active .calhelp-process__nav-button {
    background: color-mix(in oklab, var(--calserver-primary) 80%, color-mix(in oklab, var(--marketing-ink) 18%, transparent));
    color: var(--cs-text-on-dark);
    border-color: color-mix(in oklab, var(--calserver-primary) 68%, color-mix(in oklab, var(--marketing-white) 24%, transparent));
    box-shadow: 0 20px 46px -30px color-mix(in oklab, var(--marketing-ink) 55%, transparent);
}

body.marketing-page.calhelp-theme .calhelp-process__nav-item.is-complete .calhelp-process__nav-button {
    border-color: color-mix(in oklab, var(--calserver-primary) 40%, color-mix(in oklab, var(--marketing-ink) 12%, transparent));
}

body.marketing-page.calhelp-theme .calhelp-process__nav-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(32px, 3.4vw, 42px);
    height: clamp(32px, 3.4vw, 42px);
    border-radius: 50%;
    background: color-mix(in oklab, var(--calserver-primary) 16%, color-mix(in oklab, var(--marketing-ink) 8%, transparent));
    color: var(--calserver-primary);
    font-weight: 700;
    font-size: clamp(0.95rem, 0.3vw + 0.9rem, 1.05rem);
    flex-shrink: 0;
}

body.marketing-page.calhelp-theme .calhelp-process__nav-item.is-active .calhelp-process__nav-index {
    background: color-mix(in oklab, var(--calserver-primary) 62%, color-mix(in oklab, var(--marketing-ink) 18%, transparent));
    color: var(--cs-text-on-dark);
}

body.marketing-page.calhelp-theme .calhelp-process__nav-label {
    flex: 1;
    min-width: 0;
    text-wrap: balance;
}

body.marketing-page.calhelp-theme .calhelp-process__nav-connector {
    flex: 0 0 clamp(36px, 5vw, 52px);
    max-width: clamp(36px, 5vw, 52px);
    height: 2px;
    border-radius: 999px;
    background: color-mix(in oklab, var(--calserver-primary) 22%, color-mix(in oklab, var(--marketing-ink) 12%, transparent));
    opacity: 0.6;
}

body.marketing-page.calhelp-theme .calhelp-process__nav-item.is-complete .calhelp-process__nav-connector {
    opacity: 1;
    background: color-mix(in oklab, var(--calserver-primary) 68%, color-mix(in oklab, var(--marketing-white) 28%, transparent));
}

body.marketing-page.calhelp-theme .calhelp-process__nav-item:last-child .calhelp-process__nav-connector {
    display: none;
}

body.marketing-page.calhelp-theme .calhelp-process__stages {
    position: relative;
    overflow: hidden;
    border-radius: 26px;
    background: color-mix(in oklab, var(--calserver-primary) 6%, color-mix(in oklab, var(--marketing-white) 88%, transparent));
    border: 1px solid color-mix(in oklab, var(--calserver-primary) 18%, color-mix(in oklab, var(--marketing-ink) 12%, transparent));
    padding: clamp(12px, 1.5vw, 18px);
}

body.marketing-page.calhelp-theme .calhelp-process__track {
    --calhelp-process-gap: clamp(20px, 3vw, 28px);
    display: flex;
    align-items: stretch;
    gap: var(--calhelp-process-gap);
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    transform: translateX(calc((100% + var(--calhelp-process-gap)) * (0 - var(--page-process-index, 0))));
}

@media (prefers-reduced-motion: reduce) {
    body.marketing-page.calhelp-theme .calhelp-process__track {
        transition: none;
        transform: none;
    }
}

body.marketing-page.calhelp-theme .calhelp-process__stage {
    position: relative;
    flex: 0 0 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: clamp(18px, 2.2vw, 26px);
    padding: clamp(22px, 2.6vw, 30px);
    border-radius: 24px;
    background: linear-gradient(
        150deg,
        color-mix(in oklab, var(--calserver-primary) 58%, color-mix(in oklab, var(--marketing-ink) 92%, transparent)) 0%,
        color-mix(in oklab, var(--calserver-primary) 28%, color-mix(in oklab, var(--marketing-ink) 88%, transparent)) 45%,
        color-mix(in oklab, var(--calserver-primary) 12%, color-mix(in oklab, var(--marketing-ink) 82%, transparent)) 100%
    );
    border: 1px solid color-mix(in oklab, var(--calserver-primary) 62%, color-mix(in oklab, var(--marketing-white) 20%, transparent));
    box-shadow: 0 30px 64px -42px color-mix(in oklab, var(--marketing-ink) 70%, transparent);
    min-height: 100%;
    scroll-snap-align: center;
    color: var(--cs-text-on-dark);
}

body.marketing-page.calhelp-theme .calhelp-process__stage:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--calserver-primary) 68%, color-mix(in oklab, var(--marketing-white) 40%, transparent));
}

body.marketing-page.calhelp-theme .calhelp-process__stage--active {
    border-color: color-mix(in oklab, var(--calserver-primary) 78%, color-mix(in oklab, var(--marketing-white) 30%, transparent));
    box-shadow: 0 36px 78px -44px color-mix(in oklab, var(--marketing-ink) 78%, transparent);
}

body.marketing-page.calhelp-theme .calhelp-process__stage-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    padding-left: clamp(18px, 2vw, 24px);
}

body.marketing-page.calhelp-theme .calhelp-process__stage-header::before {
    content: '';
    position: absolute;
    inset: 2px auto 2px 0;
    width: 4px;
    border-radius: 999px;
    background: linear-gradient(
        180deg,
        color-mix(in oklab, var(--calserver-primary) 92%, color-mix(in oklab, var(--marketing-white) 20%, transparent)) 0%,
        color-mix(in oklab, var(--calserver-primary) 60%, color-mix(in oklab, var(--marketing-white) 10%, transparent)) 100%
    );
}

body.marketing-page.calhelp-theme .calhelp-process__stage-header h3 {
    margin: 0;
    font-size: clamp(1.35rem, 0.6vw + 1.2rem, 1.8rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: color-mix(in oklab, var(--cs-text-on-dark) 96%, color-mix(in oklab, var(--marketing-white) 18%, transparent) 4%);
}

body.marketing-page.calhelp-theme .calhelp-process__stage-header p {
    margin: 0;
    color: color-mix(in oklab, var(--cs-text-on-dark) 86%, color-mix(in oklab, var(--marketing-white) 40%, transparent) 14%);
    font-size: clamp(1rem, 0.28vw + 0.94rem, 1.08rem);
    line-height: 1.5;
    text-wrap: pretty;
}

body.marketing-page.calhelp-theme .calhelp-process__toggle {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    align-self: flex-start;
    margin: 0;
    padding: clamp(10px, 1.3vw, 14px) clamp(16px, 2vw, 20px);
    border-radius: 12px;
    border: 1px solid color-mix(in oklab, var(--cs-text-on-dark) 28%, color-mix(in oklab, var(--marketing-white) 24%, transparent));
    background: color-mix(in oklab, color-mix(in oklab, var(--marketing-white) 12%, transparent), transparent);
    color: var(--cs-text-on-dark);
    font-weight: 600;
    font-size: clamp(0.95rem, 0.28vw + 0.9rem, 1.05rem);
    line-height: 1.4;
    cursor: pointer;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

body.marketing-page.calhelp-theme .calhelp-process__toggle:hover {
    background: color-mix(in oklab, color-mix(in oklab, var(--marketing-white) 20%, transparent), transparent);
    border-color: color-mix(in oklab, var(--cs-text-on-dark) 42%, color-mix(in oklab, var(--marketing-white) 30%, transparent));
}

body.marketing-page.calhelp-theme .calhelp-process__toggle:focus-visible {
    outline: none;
    border-color: color-mix(in oklab, var(--cs-text-on-dark) 52%, color-mix(in oklab, var(--marketing-white) 35%, transparent));
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--calserver-primary) 58%, color-mix(in oklab, var(--marketing-white) 38%, transparent));
}

body.marketing-page.calhelp-theme .calhelp-process__toggle-icon {
    position: relative;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

body.marketing-page.calhelp-theme .calhelp-process__toggle-icon::before,
body.marketing-page.calhelp-theme .calhelp-process__toggle-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease;
}

body.marketing-page.calhelp-theme .calhelp-process__toggle-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

body.marketing-page.calhelp-theme .calhelp-process__toggle[aria-expanded="true"] .calhelp-process__toggle-icon::after,
body.marketing-page.calhelp-theme .calhelp-process__stage--panel-open .calhelp-process__toggle-icon::after {
    transform: translate(-50%, -50%) rotate(90deg) scaleX(0);
}

body.marketing-page.calhelp-theme .calhelp-process__panel {
    display: grid;
    gap: clamp(14px, 1.8vw, 20px);
    padding: clamp(18px, 2.2vw, 26px);
    border-radius: 16px;
    background: linear-gradient(
        180deg,
        color-mix(in oklab, var(--marketing-white) 98%, transparent) 0%,
        color-mix(in oklab, var(--calserver-primary) 10%, color-mix(in oklab, var(--marketing-white) 96%, transparent)) 100%
    );
    border: 1px solid color-mix(in oklab, var(--calserver-primary) 26%, color-mix(in oklab, var(--marketing-ink) 16%, transparent));
    box-shadow: 0 26px 44px -34px color-mix(in oklab, var(--marketing-ink) 50%, transparent);
    color: var(--qr-text);
}

body.marketing-page.calhelp-theme .calhelp-process__panel h4 {
    margin: 0;
    font-size: clamp(1.05rem, 0.3vw + 1rem, 1.15rem);
    font-weight: 700;
    letter-spacing: -0.005em;
    color: var(--qr-text);
}

body.marketing-page.calhelp-theme .calhelp-process__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: clamp(10px, 1.6vw, 16px);
}

body.marketing-page.calhelp-theme .calhelp-process__list li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: clamp(12px, 1.4vw, 16px) clamp(14px, 1.8vw, 18px);
    border-radius: 14px;
    background: color-mix(in oklab, var(--calserver-primary) 8%, color-mix(in oklab, var(--marketing-white) 96%, transparent));
    border: 1px solid color-mix(in oklab, var(--calserver-primary) 22%, color-mix(in oklab, var(--marketing-ink) 12%, transparent));
    line-height: 1.55;
    text-wrap: pretty;
    color: color-mix(in oklab, var(--qr-text) 90%, var(--marketing-ink) 10%);
}

body.marketing-page.calhelp-theme .calhelp-process__list li::before {
    content: '';
    display: inline-flex;
    width: 12px;
    height: 12px;
    margin-top: 6px;
    border-radius: 50%;
    background: var(--calserver-primary);
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--calserver-primary) 18%, color-mix(in oklab, var(--marketing-primary) 20%, transparent));
    flex-shrink: 0;
}

body.marketing-page.calhelp-theme .calhelp-process__criteria {
    margin: 0;
    font-size: clamp(0.95rem, 0.26vw + 0.9rem, 1.05rem);
    line-height: 1.5;
    color: color-mix(in oklab, var(--qr-text) 78%, var(--qr-muted) 22%);
    text-wrap: pretty;
}

body.marketing-page.calhelp-theme .calhelp-process__criteria span {
    font-weight: 700;
    color: color-mix(in oklab, var(--calserver-primary) 86%, color-mix(in oklab, var(--marketing-ink) 18%, transparent));
}

@media (max-width: 960px) {
    body.marketing-page.calhelp-theme .calhelp-process__nav {
        padding-bottom: 6px;
    }

    body.marketing-page.calhelp-theme .calhelp-process__nav-item {
        flex: 0 0 clamp(240px, 78vw, 320px);
        min-width: clamp(240px, 78vw, 320px);
    }

    body.marketing-page.calhelp-theme .calhelp-process__nav-connector {
        display: none;
    }

    body.marketing-page.calhelp-theme .calhelp-process__stages {
        padding: 0;
        background: none;
        border: none;
    }

    body.marketing-page.calhelp-theme .calhelp-process__track {
        flex-direction: column;
        gap: clamp(18px, 4vw, 26px);
        transform: none;
        transition: none;
    }

    body.marketing-page.calhelp-theme .calhelp-process__stage {
        box-shadow: 0 22px 48px -36px color-mix(in oklab, var(--marketing-ink) 45%, transparent);
    }
}

@media (min-width: 1280px) {
    body.marketing-page.calhelp-theme .calhelp-process__nav {
        justify-content: center;
    }

    body.marketing-page.calhelp-theme .calhelp-process__nav-item {
        min-width: clamp(220px, 16vw, 260px);
    }
}

body.marketing-page.calhelp-theme .calhelp-proof-card__eyebrow {
    margin: 0;
    font-size: clamp(0.8rem, 0.3vw + 0.72rem, 0.95rem);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.3;
    color: color-mix(in oklab, var(--calserver-primary) 58%, var(--qr-text) 42%);
    text-wrap: balance;
}

body.marketing-page.calhelp-theme .calhelp-proof-card__headline {
    margin: 0;
    font-size: clamp(1.35rem, 0.6vw + 1.2rem, 1.8rem);
    font-weight: 700;
    line-height: 1.28;
    color: var(--qr-text);
    text-wrap: balance;
}

body.marketing-page.calhelp-theme .calhelp-proof-card__subhead {
    margin: 0;
    font-size: clamp(0.95rem, 0.3vw + 0.85rem, 1.05rem);
    font-weight: 500;
    color: color-mix(in oklab, var(--qr-text) 82%, var(--qr-muted) 18%);
    line-height: 1.45;
    text-wrap: balance;
}

body.marketing-page.calhelp-theme .calhelp-proof-card__body {
    margin: 0;
    font-size: clamp(0.95rem, 0.28vw + 0.88rem, 1.05rem);
    line-height: 1.6;
    color: var(--qr-text);
    text-wrap: pretty;
}

/* Card components (usecase, module, news) moved to marketing-cards.css */
body.marketing-page.calhelp-theme :is(.calhelp-card, .calhelp-kpi) {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

body.marketing-page.calhelp-theme :is(.calhelp-card, .calhelp-kpi) :is(.uk-card-title, h3, h4) {
    margin: 0;
    line-height: 1.3;
    text-wrap: balance;
}

body.marketing-page.calhelp-theme :is(.calhelp-card, .calhelp-kpi) p {
    margin: 0;
    line-height: 1.6;
    text-wrap: pretty;
}

/* Chat/Cookie styles are consolidated in marketing.css. */

body.marketing-page.calhelp-theme.high-contrast .calhelp-process__nav-button,
body.marketing-page.calhelp-theme[data-theme="high-contrast"] .calhelp-process__nav-button,
body.high-contrast .calhelp-process__nav-button {
    background: transparent;
    color: currentColor;
    border-color: currentColor;
    box-shadow: none;
}

body.marketing-page.calhelp-theme.high-contrast .calhelp-process__stage,
body.marketing-page.calhelp-theme[data-theme="high-contrast"] .calhelp-process__stage,
body.high-contrast .calhelp-process__stage {
    background: var(--marketing-black);
    color: var(--marketing-white);
    border: 2px solid currentColor;
    box-shadow: none;
}

body.marketing-page.calhelp-theme.high-contrast .calhelp-process__stage-header::before,
body.marketing-page.calhelp-theme[data-theme="high-contrast"] .calhelp-process__stage-header::before,
body.high-contrast .calhelp-process__stage-header::before {
    display: none;
}

body.marketing-page.calhelp-theme.high-contrast .calhelp-process__toggle,
body.marketing-page.calhelp-theme[data-theme="high-contrast"] .calhelp-process__toggle,
body.high-contrast .calhelp-process__toggle {
    background: transparent;
    border: 2px solid currentColor;
    color: currentColor;
}

body.marketing-page.calhelp-theme.high-contrast .calhelp-process__panel,
body.marketing-page.calhelp-theme[data-theme="high-contrast"] .calhelp-process__panel,
body.high-contrast .calhelp-process__panel {
    background: var(--marketing-white);
    color: var(--marketing-black);
    border: 2px solid currentColor;
    box-shadow: none;
}

body.marketing-page.calhelp-theme.high-contrast .calhelp-process__panel h4,
body.marketing-page.calhelp-theme[data-theme="high-contrast"] .calhelp-process__panel h4,
body.high-contrast .calhelp-process__panel h4 {
    color: currentColor;
}

body.marketing-page.calhelp-theme.high-contrast .calhelp-process__list li,
body.marketing-page.calhelp-theme[data-theme="high-contrast"] .calhelp-process__list li,
body.high-contrast .calhelp-process__list li {
    background: transparent;
    border: 2px solid currentColor;
    color: currentColor;
}

body.marketing-page.calhelp-theme.high-contrast .calhelp-process__list li::before,
body.marketing-page.calhelp-theme[data-theme="high-contrast"] .calhelp-process__list li::before,
body.high-contrast .calhelp-process__list li::before {
    background: currentColor;
    box-shadow: none;
}

body.marketing-page.calhelp-theme.high-contrast .calhelp-process__criteria,
body.marketing-page.calhelp-theme[data-theme="high-contrast"] .calhelp-process__criteria,
body.high-contrast .calhelp-process__criteria {
    color: currentColor;
}

body.marketing-page.calhelp-theme.high-contrast .calhelp-process__criteria span,
body.marketing-page.calhelp-theme[data-theme="high-contrast"] .calhelp-process__criteria span,
body.high-contrast .calhelp-process__criteria span {
    color: currentColor;
}