/*
  Discover Digital design tokens, copied from the approved Hybrid design
  (design-concepts/homepage/hybrid.html). Change a value there and here together.
  Modules use these custom properties only; no hard-coded colours, fonts or radii.
  Brand pattern images (--pat, --feat-*) arrive with the modules that use them.
*/
:root {
  --orange: #FA6122;
  --orange-hi: #FF7A3F;
  --indigo: #1A4362;
  --deep: #0E2436;
  --deep-2: #10293D;
  --deep-3: #0A1B29;
  --paper: #F3F6F9;
  --wa: #25D366;
  /* Partner brand colours, for their glyphs only (the platform icons and partner tiles show them on hover; Microsoft, Google and DAN in parts: the Google G is drawn from Google's partner badge, DAN's six from the edges of its ring) */
  --brand-hubspot: #FF5C35;
  --brand-meta: #0081FB;
  --brand-gads: #4285F4;
  --brand-ms-1: #F25022;
  --brand-ms-2: #7FBA00;
  --brand-ms-3: #00A4EF;
  --brand-ms-4: #FFB900;
  --brand-google-blue: #0081C6;
  --brand-google-green: #00AE57;
  --brand-google-yellow: #FBAB18;
  --brand-google-red: #F04931;
  --brand-dan-1: #F0361C;
  --brand-dan-2: #6CB751;
  --brand-dan-3: #606CA8;
  --brand-dan-4: #439EE0;
  --brand-dan-5: #F2198D;
  --brand-dan-6: #FEC73E;
  --on-orange: #10293D;

  --page: #F3F6F9;
  --band: #E8EEF3;
  --surface: #FBFCFD;
  --surface-2: #E1E9F0;
  --ink: #10293D;
  --ink-2: #2B4760;
  --muted: #4D6377;
  --line: rgba(16, 41, 61, 0.12);
  --line-strong: rgba(16, 41, 61, 0.26);
  --accent-ink: #B93D0B;
  --focus: #10293D;
  --shadow: 0 1px 2px rgba(16, 41, 61, 0.06), 0 26px 52px -30px rgba(16, 41, 61, 0.34);
  /* Lit buttons: light from above. A highlight on the top edge, a shade on the bottom edge, a tight contact shadow and a
     soft glow in the button's own colour, over a gentle top-to-bottom sheen; pressing flips the sheen and the highlight goes */
  --lit-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 58%);
  --lit-sheen-pressed: linear-gradient(0deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 58%);
  --lit-hi: rgba(255, 255, 255, 0.45);
  --lit-hi-ink: rgba(255, 255, 255, 0.16);
  --lit-hi-paper: #FFFFFF;
  --lit-lo-orange: rgba(140, 42, 4, 0.32);
  --lit-lo-ink: rgba(0, 0, 0, 0.42);
  --lit-lo-paper: rgba(16, 41, 61, 0.16);
  --lit-touch: rgba(16, 41, 61, 0.3);
  --lit-glow-orange: rgba(250, 97, 34, 0.6);
  --lit-glow-ink: rgba(16, 41, 61, 0.5);
  --lit-glow-paper: rgba(243, 246, 249, 0.3);
  /* Motion: a spring that overshoots about 8% and settles (rolling digits, gliding pills) */
  --spring: linear(0, 0.05, 0.16, 0.31, 0.47, 0.63, 0.76, 0.87, 0.96, 1.02, 1.06, 1.08, 1.08, 1.08, 1.07, 1.06, 1.05, 1.03, 1.02, 1.01, 1, 1, 1, 0.99, 0.99, 0.99, 0.99, 0.99, 1);
  --nav-page: rgba(243, 246, 249, 0.88);
  --field-bg: #FBFCFD;
  --field-border: #7C8D9C;
  --error: #B42318;
  --chip-bg: rgba(251, 252, 253, 0.92);
  --bubble-user: #10293D;
  --bubble-user-ink: #F3F6F9;
  --foot-bg: #0E2436;
  --show-light: block;
  --show-dark: none;
  --dg-line: #1A4362;
  --dg-box: #FBFCFD;
  --dg-band: rgba(26, 67, 98, 0.05);
  --dg-text: #10293D;
  --dg-mid: #4D6377;
  --dg-stroke: rgba(16, 41, 61, 0.5);
  /* Page heroes (inner pages, articles, system pages): light in the light theme, the navy band in the dark theme.
     A hero showing a client's white logo, and the landing page hero, stay navy in both (.pg-hero.is-dark, inner.css) */
  --hero-bg: #E8EEF3;
  --hero-ink: #10293D;
  --hero-ink-2: #2B4760;
  --hero-muted: #4D6377;
  --hero-line: rgba(16, 41, 61, 0.12);
  --hero-line-strong: rgba(16, 41, 61, 0.26);
  --hero-accent: #B93D0B;
  --hero-hl: #B93D0B;
  --hero-focus: #10293D;
  --hero-pattern: var(--img-dd-pattern-light);
  --hero-pattern-op: 1;
  --hero-media-shadow: 0 30px 60px -36px rgba(16, 41, 61, 0.45);
  --hero-phone-shadow: 0 40px 80px -44px rgba(16, 41, 61, 0.55);
  --hero-glass-bg: #FBFCFD;
  --hero-glass-ink: #10293D;
  --hero-glass-hi: rgba(255, 255, 255, 0.6);
  --hero-glass-ring: rgba(16, 41, 61, 0.26);
  --hero-glass-ring-hover: #10293D;
  --hero-strip-h: calc(env(safe-area-inset-top, 0px) * 1.25);

  --font-display: "Bricolage Grotesque", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Figtree", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --ds: 1;
  --gutter: max(clamp(16px, 3.4vw, 48px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --maxw: 1440px;
  --r: 24px;
  --r-in: 16px;
  --nav-h: calc(72px + env(safe-area-inset-top, 0px));
  --indent: 0px;
  --edge: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light;
}
/* Greek: Bricolage Grotesque and Figtree have no Greek glyphs */
:root:lang(el) {
  --font-display: "Commissioner", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Manrope", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ds: 0.86;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #0E2436;
    --band: #10293D;
    --surface: #132F46;
    --surface-2: #183A55;
    --ink: #F3F6F9;
    --ink-2: #CAD7E2;
    --muted: #A3B6C7;
    --line: rgba(243, 246, 249, 0.12);
    --line-strong: rgba(243, 246, 249, 0.26);
    --accent-ink: #FF8350;
    --focus: #FA6122;
    --shadow: 0 1px 2px rgba(3, 10, 16, 0.3), 0 26px 52px -30px rgba(3, 10, 16, 0.85);
    --lit-touch: rgba(3, 10, 16, 0.6);
    --lit-glow-orange: rgba(250, 97, 34, 0.5);
    --lit-glow-ink: rgba(3, 10, 16, 0.8);
    --nav-page: rgba(14, 36, 54, 0.88);
    --field-bg: #0E2436;
    --field-border: #6E8AA2;
    --error: #FF9B8F;
    --chip-bg: rgba(19, 47, 70, 0.92);
    --bubble-user: #F3F6F9;
    --bubble-user-ink: #10293D;
    --foot-bg: #0A1B29;
    --show-light: none;
    --show-dark: block;
    --dg-line: #FA6122;
    --dg-box: #132F46;
    --dg-band: rgba(243, 246, 249, 0.035);
    --dg-text: #F3F6F9;
    --dg-mid: #A3B6C7;
    --dg-stroke: rgba(243, 246, 249, 0.45);
    --hero-bg: #0E2436;
    --hero-ink: #F3F6F9;
    --hero-ink-2: #CAD7E2;
    --hero-muted: #B4C4D3;
    --hero-line: rgba(243, 246, 249, 0.16);
    --hero-line-strong: rgba(243, 246, 249, 0.34);
    --hero-accent: #FF8350;
    --hero-hl: #FA6122;
    --hero-focus: #FA6122;
    --hero-pattern: var(--img-dd-pattern-indigo);
    --hero-pattern-op: 0.55;
    --hero-media-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.8);
    --hero-phone-shadow: 0 40px 90px -40px rgba(3, 10, 16, 0.8);
    --hero-glass-bg: rgba(11, 29, 44, 0.42);
    --hero-glass-ink: #F3F6F9;
    --hero-glass-hi: rgba(243, 246, 249, 0.2);
    --hero-glass-ring: rgba(243, 246, 249, 0.38);
    --hero-glass-ring-hover: rgba(243, 246, 249, 0.85);
    --hero-strip-h: calc(env(safe-area-inset-top, 0px) + 72px);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --page: #0E2436;
  --band: #10293D;
  --surface: #132F46;
  --surface-2: #183A55;
  --ink: #F3F6F9;
  --ink-2: #CAD7E2;
  --muted: #A3B6C7;
  --line: rgba(243, 246, 249, 0.12);
  --line-strong: rgba(243, 246, 249, 0.26);
  --accent-ink: #FF8350;
  --focus: #FA6122;
  --shadow: 0 1px 2px rgba(3, 10, 16, 0.3), 0 26px 52px -30px rgba(3, 10, 16, 0.85);
  --lit-touch: rgba(3, 10, 16, 0.6);
  --lit-glow-orange: rgba(250, 97, 34, 0.5);
  --lit-glow-ink: rgba(3, 10, 16, 0.8);
  --nav-page: rgba(14, 36, 54, 0.88);
  --field-bg: #0E2436;
  --field-border: #6E8AA2;
  --error: #FF9B8F;
  --chip-bg: rgba(19, 47, 70, 0.92);
  --bubble-user: #F3F6F9;
  --bubble-user-ink: #10293D;
  --foot-bg: #0A1B29;
  --show-light: none;
  --show-dark: block;
  --dg-line: #FA6122;
  --dg-box: #132F46;
  --dg-band: rgba(243, 246, 249, 0.035);
  --dg-text: #F3F6F9;
  --dg-mid: #A3B6C7;
  --dg-stroke: rgba(243, 246, 249, 0.45);
  --hero-bg: #0E2436;
  --hero-ink: #F3F6F9;
  --hero-ink-2: #CAD7E2;
  --hero-muted: #B4C4D3;
  --hero-line: rgba(243, 246, 249, 0.16);
  --hero-line-strong: rgba(243, 246, 249, 0.34);
  --hero-accent: #FF8350;
  --hero-hl: #FA6122;
  --hero-focus: #FA6122;
  --hero-pattern: var(--img-dd-pattern-indigo);
  --hero-pattern-op: 0.55;
  --hero-media-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.8);
  --hero-phone-shadow: 0 40px 90px -40px rgba(3, 10, 16, 0.8);
  --hero-glass-bg: rgba(11, 29, 44, 0.42);
  --hero-glass-ink: #F3F6F9;
  --hero-glass-hi: rgba(243, 246, 249, 0.2);
  --hero-glass-ring: rgba(243, 246, 249, 0.38);
  --hero-glass-ring-hover: rgba(243, 246, 249, 0.85);
  --hero-strip-h: calc(env(safe-area-inset-top, 0px) + 72px);
  color-scheme: dark;
}
@media (min-width: 1024px) { :root { --indent: 7.5rem; } }
@media (max-width: 899px) { :root { --nav-h: calc(64px + env(safe-area-inset-top, 0px)); } }