/* Signy AI — generated from tokens.json */
:root, [data-theme="light"] {
  --surface: #ffffff; /* Page background. The Signy AI homepage and all standard site pages run on white in the light theme — this is the client's stated default. Pairs with `ink` (17.8:1) and `ink-muted` (6.1:1). */
  --surface-alt: #f1f0ec; /* Banded alternate sections and cards that need separation from `surface` without a border. Light value is brand Off-White #F1F0EC. Dark value is derived. Pairs with `ink` (16.0:1 light, 16.2:1 dark). */
  --surface-inverse: #111516; /* Full-width dark blocks inside a light page — the diagnostic block, the operating-model diagram, the footer. It stays a DARK block in both themes (a raised charcoal in the dark theme) so the accents on it never have to flip. Text on it is `ink-inverse` (16.1:1 light, 11.2:1 dark). */
  --surface-brand: #261ac0; /* Cobalt/Indigo Blue #261AC0. Solid brand fields: primary buttons, the campaign landing ground, accent panels. Text on it is `on-brand` (10.5:1) or `surface-accent` (6.7:1). Same value in both themes — it is a fill, never a text colour on dark. */
  --surface-accent: #3cdd90; /* Mint Green #3CDD90. Solid accent fields: highlight panels, the nav CTA, marker blocks. Text on it must be `on-accent` (11.9:1). Never use as a text colour on `surface` in the light theme — mint on white is 1.6:1. */
  --ink: #111516; /* Black (Deep Charcoal Grey) #111516. Headlines and body copy on `surface` (17.8:1) and `surface-alt` (16.0:1). */
  --ink-muted: #5c6365; /* Derived. Subheads, captions, eyebrow labels, form help text on `surface` (6.1:1 light / 7.3:1 dark) and `surface-alt` (5.4:1 light). */
  --ink-inverse: #f1f0ec; /* Body and headline text on `surface-inverse` (16.1:1 light, 11.2:1 dark) and on `surface-brand` (10.4:1). Off-White #F1F0EC, not pure white — matches the guidelines' reversed logo lockup. Fixed in both themes, because `surface-inverse` is dark in both. */
  --ink-inverse-muted: #9ba3a5; /* Derived. Secondary copy, captions and card body text on `surface-inverse` (7.2:1 light, 5.0:1 dark). Do not use it below 15px. */
  --highlight: #261ac0; /* The guidelines' Highlights rule: a word or phrase set brighter than the sentence around it. Cobalt on light grounds (10.5:1 on `surface`), Mint on dark grounds (11.9:1 on `surface-inverse`). Never the reverse — mint fails on white, cobalt fails on charcoal. */
  --on-brand: #ffffff; /* Text and icons on `surface-brand` (10.5:1). White, per the guidelines' reversed logo on cobalt. */
  --on-accent: #111516; /* Text and icons on `surface-accent` (11.9:1). The guidelines show only the black logo and black type on Mint Green. */
  --border-subtle: #dfddd6; /* Derived. Decorative hairlines: section rules, card edges, table dividers. Carries no meaning, so it is exempt from the 3:1 floor. */
  --border-control: #868a8b; /* Derived. Meaning-carrying edges: input, select and textarea outlines, secondary button borders. 3.5:1 on `surface` and 3.1:1 on `surface-alt` in the light theme, 4.0:1 on `surface` in dark — clears the WCAG non-text floor on both grounds, which matters because the contact form sits in a `surface-alt` card. */
  --focus: #261ac0; /* Derived. The keyboard focus ring, drawn as a 3px outline with a 2px `surface`-coloured offset so it stays visible on brand-filled controls. 10.5:1 on light grounds, 11.9:1 on dark. */
  --aquamarine: #88f6c1; /* Secondary #88F6C1. Background tints and gradient stops only — sparingly, never as a main flood and never as text (1.4:1 on white). Text on an aquamarine panel is `on-accent` (14.0:1), never `ink`, because `ink` flips light in the dark theme. */
  --sky-aqua: #21cbff; /* Secondary #21CBFF. Data-visualisation series, gradient stops, small accent fields. Background only — never as text on `surface`. Text on a sky-aqua panel is `on-accent` (9.4:1). */
  --pink-orchid: #debce6; /* Secondary #DEBCE6. Light gradient stops and rare tint panels. Background only. Text on an orchid panel is `on-accent` (10.9:1), never `ink`. */
  --purple: #741c89; /* Secondary #741C89. The only secondary dark enough to set text on, and only on LIGHT grounds — 9.3:1 on `surface`, 1.9:1 on the dark theme's `surface`. Otherwise a gradient stop or an occasional accent field; the guidelines call for secondaries used sparingly. */
  --shadow-none: none; /* Derived. The default for cards, buttons and panels — separate them with `border-subtle` or `surface-alt` instead. */
  --shadow-overlay: 0 12px 32px rgba(17,21,22,0.14); /* Derived. Dropdowns, the mobile nav sheet, and the sticky header once the page has scrolled. */
  --shadow-lift: 0 4px 16px rgba(17,21,22,0.10); /* Derived. Optional hover state for a linked card, with a 200ms transition. The default card hover is a border and colour change. */

  /* ---------------------------------------------------------------------
   * Depth, atmosphere and motion.
   *
   * These were missing from the design system's own token export while
   * bundle.css referenced all of them, which is the quietest failure CSS
   * has: a declaration containing an undefined var() is invalid, so the
   * browser drops the WHOLE declaration. Every transition, every shadow and
   * every ambient bloom silently disappeared — the site rendered, it just
   * looked flat, and nothing warned anyone.
   *
   * They were generated into a separate tokens-extra.css for a while. They
   * live here now because this file is the theme's own, not a copy of
   * somebody else's, and one stylesheet is easier to reason about than two.
   * StylesheetIntegrityTest fails if bundle.css ever references a property
   * that is not declared here.
   * ------------------------------------------------------------------- */
  --glass-fill: rgba(255,255,255,0.58);
  --glass-fill-strong: rgba(255,255,255,0.78);
  --glass-stroke: rgba(255,255,255,0.85);
  --glass-shade: rgba(17,21,22,0.07);
  --glow-brand: rgba(38,26,192,0.5);
  --glow-accent: rgba(60,221,144,0.45);
  --glow-aqua: rgba(33,203,255,0.38);
  --radius-xs: 8px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-2xl: 44px;
  --shadow-xs: 0 1px 2px rgba(17,21,22,0.05), 0 2px 8px rgba(17,21,22,0.04);
  --shadow-sm: 0 2px 6px rgba(17,21,22,0.06), 0 8px 20px rgba(17,21,22,0.06);
  --shadow-md: 0 4px 12px rgba(17,21,22,0.08), 0 16px 36px rgba(17,21,22,0.09);
  --shadow-lg: 0 8px 24px rgba(17,21,22,0.10), 0 32px 64px rgba(17,21,22,0.12);
  --shadow-glow-brand: 0 10px 24px rgba(38,26,192,0.28), 0 2px 6px rgba(38,26,192,0.2);
  --shadow-glow-accent: 0 10px 24px rgba(60,221,144,0.3), 0 2px 6px rgba(60,221,144,0.22);
  --stroke-focus: 1.5px;
  --blur-sm: 8px;
  --blur-glass: 18px;
  --blur-strong: 32px;
  --blur-bloom: 110px;
  --duration-instant: 120ms;
  --duration-fast: 220ms;
  --duration-base: 380ms;
  --duration-slow: 680ms;
  --duration-expand: 420ms;
  --ease-out-soft: cubic-bezier(0.22,1,0.36,1);
  --ease-in-out-soft: cubic-bezier(0.65,0,0.35,1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --layout-sticky-top: 76px;
}
[data-theme="dark"] {
  --surface: #111516;
  --surface-alt: #1a1f21;
  --surface-inverse: #2e3334;
  --ink: #f1f0ec;
  --ink-muted: #9ba3a5;
  --highlight: #3cdd90;
  --border-subtle: #2b3133;
  --border-control: #6e7679;
  --focus: #3cdd90;
  --shadow-overlay: 0 12px 32px rgba(0,0,0,0.55);
  --shadow-lift: 0 4px 16px rgba(0,0,0,0.45);
}
:root {
  --space-1: 4px; /* Derived. Icon-to-label gap, tight inline separation. */
  --space-2: 8px; /* Derived. Label-to-input gap, chip padding, list-item spacing. */
  --space-3: 12px; /* Derived. Button vertical padding, compact card padding. */
  --space-4: 16px; /* Derived. Paragraph rhythm, grid gap on mobile, input padding. */
  --space-5: 24px; /* Derived. Page gutter, card padding, gap between grid cards. */
  --space-6: 32px; /* Derived. Card padding on desktop, gap between stacked blocks. */
  --space-7: 40px; /* Derived. Headline-to-body gap inside a section head. */
  --space-8: 48px; /* Derived. Inner padding of dark feature blocks; sub-section separation. */
  --space-9: 64px; /* Derived. Section padding on tablet; gap between a section head and its grid. */
  --space-10: 80px; /* Derived. Section padding on mobile-to-tablet; hero bottom spacing. */
  --space-11: 96px; /* Derived. Standard desktop section padding, top and bottom. */
  --space-12: 128px; /* Derived. Hero and campaign-landing vertical padding on desktop. */
  --radius-none: 0; /* Derived. The default for buttons, cards, inputs, panels and image frames — every rectangular surface on the site. */
  --radius-sm: 4px; /* Derived. Chips, tags and sector labels only, where a hard corner reads as clipped. */
  --radius-md: 8px; /* Derived. Overlay surfaces that float above the page: dropdowns, the mobile nav sheet, toasts. */
  --radius-full: 999px; /* Derived. Only for true circles and half-discs — the avatar frame and the logo-derived arc motif. Never on a button. */
  --gradient-dark-1: linear-gradient(128deg,#88f6c1 0%,#261ac0 46%,#111516 100%); /* Mint into cobalt into black. The campaign landing hero ground. Set copy in `ink-inverse` over the cobalt-to-black end. */
  --gradient-dark-2: linear-gradient(196deg,#261ac0 0%,#261ac0 44%,#21cbff 100%); /* Cobalt into sky aqua. Full-bleed CTA bands on dark pages. Copy in `ink-inverse` over the top half. */
  --gradient-dark-3: linear-gradient(152deg,#741c89 0%,#261ac0 54%,#21cbff 100%); /* Purple into cobalt into aqua. Alternate campaign ground and social/OG card backgrounds. */
  --gradient-light-1: linear-gradient(134deg,#debce6 0%,#f1f0ec 48%,#88f6c1 100%); /* Orchid into off-white into aquamarine. Light decorative panels; set copy in `ink` and keep it off the tinted corners. */
  --gradient-light-2: linear-gradient(134deg,#c4efff 0%,#ffffff 46%,#88f6c1 100%); /* Aqua into white into aquamarine. The lightest option — diagram backdrops and quote panels. */
  --stroke-hairline: 1px; /* Derived. Section rules, card edges, input outlines, table dividers. */
  --stroke-medium: 2px; /* Derived. Secondary button outlines and the active accordion edge. */
  --stroke-marker: 3px; /* Derived. The left marker bar on signal and result cards, and the focus-ring width. */
  --layout-container: 1200px; /* Derived. Max width of the standard content container, centred, with `layout-gutter` either side. */
  --layout-container-wide: 1440px; /* Derived. Full-bleed feature blocks and the header bar. */
  --layout-measure: 68ch; /* Derived. Max line length for `body` copy — the cap that keeps prose readable. */
  --layout-gutter: 24px; /* Derived. Page side padding at every breakpoint. */
  --layout-grid-gap: 24px; /* Derived. Gap between cards in a grid; 16px under 768px. */
  --layout-header-h: 76px; /* Derived. Header bar height on desktop; 64px under 768px. */
  --font-sans: "Zalando Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --text-display-xl: 600 72px/68px var(--font-sans); /* Campaign landing and homepage hero only. One per page. Drops to 44px under 768px. */
  --text-display-lg: 600 56px/56px var(--font-sans); /* Inner page H1 — About, Services, Results, Contact. Drops to 36px under 768px. */
  --text-h1: 600 44px/48px var(--font-sans); /* Section headline in a full-bleed block. Semibold, per the guidelines' type hierarchy. */
  --text-h2: 600 34px/40px var(--font-sans); /* Standard section headline. */
  --text-h3: 600 25px/32px var(--font-sans); /* Card titles, accordion pillar titles, sub-section heads. */
  --text-h4: 600 20px/28px var(--font-sans); /* Signal-area titles, FAQ questions, result-card headers. */
  --text-h5: 600 17px/24px var(--font-sans); /* Inline list headers and the lead-in of a principle paragraph. */
  --text-body-lg: 400 20px/32px var(--font-sans); /* Hero subheadline and section intros. Regular weight, per the guidelines. */
  --text-body: 400 17px/28px var(--font-sans); /* Default page copy. Measure capped by `layout-measure`. */
  --text-body-sm: 400 15px/24px var(--font-sans); /* Form help text, footnotes, card meta, footer copy. The smallest text on the site. */
  --text-eyebrow: 600 13px/16px var(--font-sans); /* Uppercase label above a headline, and the numbered marker on signal and service cards. Set in `ink-muted` or `highlight`. */
  --text-label: 600 15px/20px var(--font-sans); /* Form field labels. Always visible above the input — never a placeholder standing in for a label. */
  --text-button: 400 16px/20px var(--font-sans); /* All button and nav-CTA text. Regular weight is the guidelines' explicit call for buttons — do not bold it. */
  --text-nav: 500 16px/20px var(--font-sans); /* Header navigation links and footer column links. */
  --text-quote: italic 600 28px/38px var(--font-sans); /* Pull quotes. Italic semibold matches the guidelines' tagline treatment. */
  --text-stat: 600 48px/52px var(--font-sans); /* Outcome metrics on result cards and engagement durations. */
}
.display-xl {
  font-family: var(--font-sans);
  font-size: 72px;
  line-height: 68px;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.display-lg {
  font-family: var(--font-sans);
  font-size: 56px;
  line-height: 56px;
  font-weight: 600;
  letter-spacing: -0.022em;
}
.h1 {
  font-family: var(--font-sans);
  font-size: 44px;
  line-height: 48px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.h2 {
  font-family: var(--font-sans);
  font-size: 34px;
  line-height: 40px;
  font-weight: 600;
  letter-spacing: -0.016em;
}
.h3 {
  font-family: var(--font-sans);
  font-size: 25px;
  line-height: 32px;
  font-weight: 600;
  letter-spacing: -0.011em;
}
.h4 {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  letter-spacing: -0.006em;
}
.h5 {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: 0;
}
.body-lg {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 32px;
  font-weight: 400;
  letter-spacing: 0;
}
.body {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 28px;
  font-weight: 400;
  letter-spacing: 0;
}
.body-sm {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0;
}
.eyebrow {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.09em;
}
.label {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0;
}
.button {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0;
}
.nav {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 0;
}
.quote {
  font-family: var(--font-sans);
  font-size: 28px;
  line-height: 38px;
  font-weight: 600;
  letter-spacing: -0.013em;
  font-style: italic;
}
.stat {
  font-family: var(--font-sans);
  font-size: 48px;
  line-height: 52px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
@font-face {
  font-family: "Zalando Sans";
  src: url("fonts/ZalandoSans-Variable.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Zalando Sans";
  src: url("fonts/ZalandoSans-Italic-Variable.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}