/* SupportLift website - tokens and components from /DESIGN.md.
   One stylesheet for all pages; no build step, no framework.
   Discipline borrowed from Linear: surface ladder, hairlines, negative
   display tracking, mono for evidence, ONE accent spent on CTAs only.

   Palette (2026 redesign, direction from the AIDesigner MCP, accent
   revised twice after review). The foundation is a cool slate: the product
   sells verifiability, and slate reads as instrument panel rather than
   consumer urgency. That much has not changed.

   What changed is the accent. The blue #2156b1 was chosen as the amber
   mark's complement, which is correct colour theory and still left the
   brand silent on its own page - the logo spoke amber, the interface spoke
   blue, and nothing tied them together. So the ACTION colour is now the
   logo amber itself (#ffb400, the dominant fill of the paper plane), and
   the blue stays on for READING: links, focus, inline accent words.

   That split is not decoration, it is forced by contrast. Amber carrying
   dark ink is a 9.9:1 button; amber as words on this canvas is 1.7:1 and
   unusable. Blue is the opposite. Rather than compromise both into a
   mid-tone that serves neither, each colour does the job it is good at:
   amber means "do this", blue means "read this". The full exploration and
   the numbers behind it are in docs/brandkit/. */

:root {
  color-scheme: light;
  --canvas: #f6f8fb;
  --surface-1: #ffffff;
  --surface-2: #ffffff;
  --inset: #edf2f9;
  --hairline: #dde3ec;
  --hairline-strong: #b3bfd1;
  --ink: #0e192a;
  --ink-muted: #515f73;
  --ink-faint: #586373;
  /* The action colour is the logo amber. It is a FILL, never words: #ffb400
     as text is 1.7:1 on this canvas, while the same amber carrying dark ink
     is 9.9:1 as a button. Reading colours stay cool (see --accent-text), so
     the page gets a warm call to action without turning yellow. */
  --accent: #ffb400;
  --accent-hover: #e69900;
  --on-accent: #0d1a26;
  /* A light fill needs a drawn edge. WCAG 1.4.11 asks for 3:1 between a
     control and its background, and amber on this canvas is only 1.67:1 - the
     button would dissolve into the page for anyone with low vision, even
     though its LABEL is a comfortable 9.9:1. Darkening the amber until the
     fill itself cleared 3:1 would land on a muddy #ba8300 that is no longer
     the brand. So the fill stays true and the edge does the work: #b77000 is
     3.7:1 on canvas and 3.9:1 on white. */
  --accent-edge: #b77000;
  --success: #1d7a49;
  --warn: #a5701c;
  /* Always-dark panel: the "system speaking" surface (terminal proof,
     closing CTA). Fixed in both themes so the contrast reads the same. */
  --panel-dark: #0e192a;
  --panel-dark-2: #152439;
  --panel-dark-ink: #f1f6fd;
  --panel-dark-muted: #94a2b6;
  --panel-dark-hairline: #253650;
  /* --accent is a SURFACE colour (buttons, fills, borders). --accent-text is
     the same signal used as INK (links, ticks, mono labels). They differ when
     the accent is light: amber on white is 1.6:1 as text but perfectly legible
     as a filled button. Never paint text with --accent directly. */
  /* Links, focus and inline accent words keep the quiet blue. Two signals,
     cleanly split: amber means "do this", blue means "read this". */
  --accent-text: #2156b1;
  /* --mark is the identity colour: the tone the logo already speaks. It marks
     brand moments and evidence (hero badge, gate ring, draft frame, promise
     rule), never actions. It equals the amber accent here because identity and
     action now share one warm tone; --mark-text is its ink form, dark enough
     to be read as words. */
  --mark: var(--accent);
  --mark-text: #8a5a00;
  /* Ambient layer: the three drifting blobs and the hero/section washes.
     Tokenised so a palette change moves the atmosphere with it instead of
     leaving a stale tint behind a new accent.

     The mix is deliberate: two blue blobs carry the surface family and one
     warm blob carries the amber, the same ratio the page itself uses. An
     ambient layer derived purely from the accent turned the background into
     brown fog, which is a different thing from a navy ground with a warm
     glow in it. Hues are set in OKLCH so the layer stays in one family. */
  --blob-1: #e7dccd;
  --blob-2: #d4e5ff;
  --blob-3: #dde5f2;
  --blob-opacity: .55;
  --wash-tint: color-mix(in srgb, var(--inset) 70%, transparent);
  --hero-wash-bottom: color-mix(in srgb, var(--inset) 55%, transparent);
  --r-sm: 4px; --r-md: 6px; --r-lg: 10px; --r-xl: 14px;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.logo-dark { display: none !important; }
.logo-light { display: inline-block !important; }
/* ---- dark scheme ----
   Two entry points into the SAME values: the media query follows the OS
   (guarded so an explicit light choice wins), the [data-theme="dark"]
   attribute is the toggle's explicit choice (set in <head> by theme.js).
   The payloads below are duplicated by necessity (no build step) - when
   editing dark values, change BOTH copies. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --canvas: #091321; --surface-1: #111d2f; --surface-2: #152439;
    --inset: #0d1726; --hairline: #1f2f46; --hairline-strong: #364965;
    --ink: #edf3fc; --ink-muted: #9ca9be; --ink-faint: #8c9cb3;
    --accent: #ffc23a; --accent-hover: #ffd166;
    --on-accent: #08141d;
    /* On a dark ground the amber is 11.6:1 against the canvas on its own, so
       the edge is only there to keep the shape identical between schemes. */
    --accent-edge: var(--accent);
    --success: #46b27a; --warn: #d3a44a;
    --accent-text: #4e92e9;
    --mark: var(--accent);
    --mark-text: var(--accent);
    --blob-1: #594933;
    --blob-2: #213d68;
    --blob-3: #1f2a3a;
    /* Footer ground for THIS palette. It is darker and shallower than the
       relaunch one below because this scheme's link colour is #4e92e9, not
       the yellow: the same sweep that reads well under yellow links puts
       blue ones at 3.2:1. website/tools/test_footer_ground.py measures each
       block against the ink declared beside it, which is how that came out. */
    --foot-ground-1:#091321;
    --foot-ground-2:#0b1423;
    --foot-ground-3:#0e1626;
    --foot-ground-4:#0b1a33;
    --foot-ground-5:#0a1f3d;
    --foot-ground-6:#0b2449;
    --foot-glow-warm:#ffb4000a;
    --foot-glow-cool:#2455d610;
    --blob-opacity: .3;
    --wash-tint: color-mix(in srgb, var(--accent) 9%, transparent);
    --hero-wash-bottom: transparent;
  }
  :root:not([data-theme="light"]) .logo-light { display: none !important; }
  :root:not([data-theme="light"]) .logo-dark { display: inline-block !important; }
  :root:not([data-theme="light"]) img.shot { filter: brightness(.92); }
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --canvas: #091321; --surface-1: #111d2f; --surface-2: #152439;
    --inset: #0d1726; --hairline: #1f2f46; --hairline-strong: #364965;
    --ink: #edf3fc; --ink-muted: #9ca9be; --ink-faint: #8c9cb3;
    --accent: #ffc23a; --accent-hover: #ffd166;
    --on-accent: #08141d;
    /* On a dark ground the amber is 11.6:1 against the canvas on its own, so
       the edge is only there to keep the shape identical between schemes. */
    --accent-edge: var(--accent);
    --success: #46b27a; --warn: #d3a44a;
    --accent-text: #4e92e9;
    --mark: var(--accent);
    --mark-text: var(--accent);
    --blob-1: #594933;
    --blob-2: #213d68;
    --blob-3: #1f2a3a;
    --blob-opacity: .3;
    --wash-tint: color-mix(in srgb, var(--accent) 9%, transparent);
    --hero-wash-bottom: transparent;
}
:root[data-theme="dark"] .logo-light { display: none !important; }
:root[data-theme="dark"] .logo-dark { display: inline-block !important; }
:root[data-theme="dark"] img.shot { filter: brightness(.92); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--canvas); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ---- type scale (DESIGN.md) ---- */
h1 { font-size: clamp(38px, 6vw, 64px); font-weight: 650; line-height: 1.05;
     letter-spacing: -0.034em; margin: 0 0 20px; }
h2 { font-size: clamp(28px, 4vw, 44px); font-weight: 650; line-height: 1.1;
     letter-spacing: -0.027em; margin: 0 0 12px; }
h3 { font-size: 24px; font-weight: 600; line-height: 1.2;
     letter-spacing: -0.017em; margin: 0 0 8px; }
h4 { font-size: 18px; font-weight: 600; line-height: 1.3;
     letter-spacing: -0.011em; margin: 0 0 6px; }
p  { margin: 0 0 14px; }
.lead { font-size: 18px; line-height: 1.55; color: var(--ink-muted); max-width: 68ch; }
.muted { color: var(--ink-muted); }
.faint { color: var(--ink-faint); }
.mono { font-family: var(--mono); font-size: .92em; }
.small { font-size: 14px; }
a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent-text); text-underline-offset: 3px; }
a:hover { color: var(--accent-text); }

.eyebrow {
  font-family: var(--mono); font-size: 12.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 1.2px; color: var(--ink-faint);
  margin: 0 0 14px;
}

/* ---- layout ---- */
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
/* Every section shares ONE container width (.wrap, 1120px). .narrow no
   longer shrinks and re-centres the container - that made hero and FAQ
   sections jump between a centred 780px column and the 1120px grid from
   page to page. It now caps the CONTENT at reading width, left-aligned
   on the same edge as every other section. */
.narrow > * { max-width: 780px; }
section { padding: 104px 0 0; }
section:last-of-type { padding-bottom: 104px; }
.section-pad { padding-bottom: 104px; }
@media (max-width: 720px) { section { padding-top: 64px; } }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .grid3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .grid2, .grid3 { grid-template-columns: 1fr; } }

/* ---- nav ---- */
header.site {
  position: sticky; top: 0; z-index: 50; height: 60px;
  display: flex; align-items: center;
  background: color-mix(in srgb, var(--canvas) 85%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hairline);
}
header.site .wrap { display: flex; align-items: center; justify-content: space-between; width: 100%; }
/* Skip link: first Tab stop on every page, invisible until it has focus,
   then a pill at the bar's left edge (above the sticky bar, z 60 > 50). */
header.site .skip {
  position: absolute; left: 12px; top: 12px; z-index: 60;
  padding: 8px 14px; border-radius: var(--r-md);
  background: var(--accent); color: var(--on-accent);
  font-size: 14px; font-weight: 550; text-decoration: none;
  transform: translateY(-200%); opacity: 0;
}
header.site .skip:focus { transform: none; opacity: 1; }
header.site .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
/* The lockup's box now includes the taller wordmark (ascenders and
   descenders overshoot the Bildmarke), so the box is ~1.36x the mark's
   height. These heights are chosen so the Bildmarke still renders at its
   previous 26px / 30px - only the Wortmarke grew. */
header.site .brand img { height: 35px; }
header.site nav { display: flex; align-items: center; gap: 22px; }
header.site nav a {
  font-size: 14px; font-weight: 500; text-decoration: none; color: var(--ink-muted);
}
header.site nav a:hover, header.site nav a.active { color: var(--ink); }
header.site nav a.cta {
  background: var(--accent); color: var(--on-accent); padding: 8px 16px;
  border-radius: var(--r-md); font-weight: 550;
}
header.site nav a.cta:hover { background: var(--accent-hover); }
/* The primary links live in .links so the SAME markup can be a flex row on
   wide screens (display: contents keeps the nav's gap rhythm) and a panel
   under the bar on narrow ones. The menu button is created by nav.js, so
   without JS the narrow header shows brand + language + CTA and the footer
   still lists every page: no dead control, no unreachable page. */
header.site nav .links { display: contents; }
.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; flex: none;
  background: transparent; color: var(--ink-muted);
  border: 1px solid var(--hairline-strong); border-radius: 999px;
  cursor: pointer;
  transition: color .15s ease-out, border-color .15s ease-out;
}
.nav-toggle:hover, .nav-toggle[aria-expanded="true"] { color: var(--ink); border-color: var(--ink-muted); }
.nav-toggle svg { width: 15px; height: 15px; display: block; }
/* Menu breakpoint. The same number sits in nav.js (`width > 860px`); range
   syntax on both sides leaves no gap at fractional widths. */
@media (width <= 860px) {
  header.site nav { gap: 14px; }
  /* DOM order is button, panel, CTA (disclosure: Tab walks from the button
     into the open panel); order paints the button last, right of the CTA. */
  .nav-toggle { display: inline-flex; order: 1; }
  header.site nav .links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; padding: 8px 0 14px;
    background: var(--canvas); border-bottom: 1px solid var(--hairline);
  }
  header.site nav.open .links { display: flex; }
  header.site nav .links a {
    display: block; padding: 12px 22px; font-size: 16px;
    border-left: 2px solid transparent;
  }
  header.site nav .links a.active { border-left-color: var(--accent); }
  header.site nav .links .tools {
    display: flex; align-items: center; gap: 12px;
    margin: 8px 24px 0; padding-top: 12px; border-top: 1px solid var(--hairline);
  }
  header.site nav .links .tools a {
    display: inline-flex; align-items: center; height: 30px; padding: 0 12px;
    font-size: 13px; border: 1px solid var(--hairline-strong); border-radius: 999px;
  }
}

/* ---- buttons ---- */
.btn {
  display: inline-block; font-weight: 550; font-size: 14.5px; line-height: 1.2;
  padding: 11px 20px; border-radius: var(--r-md); text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  transition: background .15s ease-out, border-color .15s ease-out, color .15s ease-out;
}
.btn.primary {
  background: var(--accent); color: var(--on-accent);
  border-color: var(--accent-edge);
}
.btn.primary:hover { background: var(--accent-hover); color: var(--on-accent); }
.btn.secondary { background: var(--surface-1); color: var(--ink); border-color: var(--hairline-strong); }
.btn.secondary:hover { border-color: var(--ink-muted); color: var(--ink); }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.cta-note { font-family: var(--mono); font-size: 12px; color: var(--ink-faint); margin-top: 14px; }

/* ---- panels / cards ---- */
.panel {
  background: var(--surface-1); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); padding: 24px;
}
.panel h4 { margin-top: 2px; }
.inset {
  background: var(--inset); border: 1px solid var(--hairline);
  border-radius: var(--r-md); padding: 16px;
}
.proof {
  background: var(--inset); border: 1px solid var(--hairline);
  border-radius: var(--r-md); padding: 14px 16px;
  font-family: var(--mono); font-size: 13px; line-height: 1.6;
  color: var(--ink-muted); overflow-x: auto; white-space: pre;
}
.proof .ok { color: var(--success); }
.proof .hl { color: var(--ink); }

img.shot {
  width: 100%; display: block;
  border: 1px solid var(--hairline-strong); border-radius: var(--r-md);
}
figure { margin: 0; }
figure.framed {
  background: var(--surface-1); border: 1px solid var(--hairline);
  border-radius: var(--r-xl); padding: 20px;
}
figcaption { font-family: var(--mono); font-size: 12px; color: var(--ink-faint); margin-top: 10px; }

/* ---- badges / steps / tables ---- */
.badge {
  display: inline-block; font-family: var(--mono); font-size: 11.5px;
  letter-spacing: .6px; padding: 3px 10px; border-radius: 999px;
  background: var(--inset); color: var(--ink-muted); border: 1px solid var(--hairline);
}
.badge.good { color: var(--success); }

.step { display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--hairline); }
.step:last-child { border-bottom: 0; }
.step .num { font-family: var(--mono); font-size: 14px; color: var(--accent-text); min-width: 28px; padding-top: 2px; }

table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 18px 0 0; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
th { font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: 1px; color: var(--ink-faint); font-weight: 600; }
td.num, th.num { font-family: var(--mono); }

/* ---- pricing ---- */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
@media (max-width: 900px) { .tiers { grid-template-columns: 1fr; } }
.tier {
  background: var(--surface-1); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); padding: 28px;
}
.tier.featured { background: var(--surface-2); border-color: var(--accent); }
.tier .price { font-family: var(--mono); font-size: 34px; font-weight: 600; margin: 10px 0 2px; }
.tier .per { font-family: var(--mono); font-size: 12.5px; color: var(--ink-faint); }
.tier ul { list-style: none; padding: 0; margin: 18px 0 0; }
.tier li { padding: 7px 0; border-bottom: 1px solid var(--hairline); font-size: 14.5px; }
.tier li:last-child { border-bottom: 0; }
.tier .btn { margin-top: 18px; width: 100%; text-align: center; }

/* ---- FAQ ---- */
details {
  border-bottom: 1px solid var(--hairline); padding: 4px 0;
}
details summary {
  cursor: pointer; font-weight: 600; font-size: 16px; padding: 14px 0;
  list-style: none; display: flex; justify-content: space-between; align-items: center;
}
details summary::-webkit-details-marker { display: none; }
details summary::after { content: "+"; font-family: var(--mono); color: var(--ink-faint); }
details[open] summary::after { content: "–"; }
details .a { padding: 0 0 16px; color: var(--ink-muted); max-width: 68ch; }

/* ---- footer: one block, further down with the relaunch chrome ---- */

/* ---- scroll reveal ----
   Progressive enhancement: hidden-until-revealed applies ONLY under html.js.
   No JS, blocked JS, a crawler, reader mode: full content.

   CAREFUL: html.js is now set by boot.js, which EVERY page loads, and
   reveal.js - the script that adds .in and un-hides these - is loaded by no
   page at all. So a `.reveal` class added today would hide its element for
   good. Load assets/reveal.js on the page first, or do not use the class. */
html.js .reveal { opacity: 0; transform: translateY(8px);
  transition: opacity .45s cubic-bezier(.16,1,.3,1), transform .45s cubic-bezier(.16,1,.3,1); }
html.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---- page ambient: ONE background layer for the whole page ----
   A single fixed layer behind all content (mitbeziehung technique, taken
   further): the blobs live once per page and travel subtly WITH the
   scroll, so the atmosphere flows across section boundaries instead of
   restarting per section. Apple-motion discipline: the scroll offset is
   direct manipulation (no easing lag), the idle drift is a slow
   ease-in-out breathe, reduced-motion shows a static glow.

   Rhythm: sections marked .wash carry an opaque standing gradient that
   COVERS the fixed layer - resting points that counteract the parallax
   (the reader gets calm ground between moving passages). */
.page-ambient {
  position: fixed; inset: 0; overflow: hidden;
  pointer-events: none; z-index: 0;
}
body > main, body > header, body > footer { position: relative; z-index: 1; }
.blob {
  position: absolute; border-radius: 50%;
  filter: blur(70px); opacity: var(--blob-opacity);
  will-change: transform;
}
.blob .core {
  position: absolute; inset: 0; border-radius: 50%;
  animation: blob-breathe var(--dur, 30s) ease-in-out var(--delay, 0s) infinite alternate;
}
.blob.b1, .blob.b1 .core { background: var(--blob-1); }
.blob.b2, .blob.b2 .core { background: var(--blob-2); }
.blob.b3, .blob.b3 .core { background: var(--blob-3); }
.blob.b1 { width: 460px; height: 460px; }
.blob.b2 { width: 400px; height: 400px; }
.blob.b3 { width: 520px; height: 520px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .blob { filter: blur(80px); }
}
:root[data-theme="dark"] .blob { filter: blur(80px); }
@keyframes blob-breathe {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(40px, -30px) scale(1.08); }
  100% { transform: translate(-30px, 25px) scale(0.95); }
}
@media (max-width: 767px) {
  .blob .core { animation: none; }
  .blob { filter: blur(44px); }
}
@media (prefers-reduced-motion: reduce) {
  .blob .core { animation: none; }
}

/* Standing gradient sections: opaque ground that hides the fixed layer -
   resting points between moving passages. Top/bottom edges fade from
   transparent so the moving glow hands over softly instead of being cut
   by a hard horizontal line (caught in visual review). */
section.wash {
  position: relative;
  background:
    linear-gradient(to bottom,
      transparent 0%,
      var(--canvas) 120px,
      var(--canvas) calc(100% - 120px),
      transparent 100%),
    radial-gradient(ellipse 80% 60% at 50% 10%,
      var(--wash-tint) 0%, transparent 60%);
}

section.hero, .cta-panel-wrap { position: relative; }

/* ---- forms (trial request) ---- */
form label { display: block; font-size: 13px; color: var(--ink-muted); margin: 0 0 5px; }
form input, form select, form textarea {
  width: 100%; box-sizing: border-box;
  background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--hairline-strong); border-radius: var(--r-md);
  padding: 10px 12px; font-size: 15px; font-family: inherit;
}
form input:focus, form select:focus, form textarea:focus {
  outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent);
}
form textarea { resize: vertical; }
form .btn { border: none; cursor: pointer; font-size: 14.5px; }

/* ---- hero gradient wash (mitbeziehung splash technique, brand tones) ----
   A radial ellipse + vertical linear gradient UNDER the blobs: the hero
   gets depth without a single image byte. Light mode: warm paper glow;
   dark mode: the deep ink wash from the reference. */
section.hero .ambient::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 40%,
      color-mix(in srgb, var(--accent) 7%, transparent) 0%, transparent 70%),
    linear-gradient(to bottom,
      transparent 0%,
      var(--hero-wash-bottom) 100%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) section.hero .ambient::before {
    background:
      radial-gradient(ellipse 70% 55% at 50% 40%,
        color-mix(in srgb, var(--accent) 9%, transparent) 0%, transparent 70%),
      linear-gradient(to bottom,
        var(--canvas) 0%,
        color-mix(in srgb, var(--canvas) 82%, var(--surface-1)) 50%,
        var(--surface-1) 100%);
  }
}
:root[data-theme="dark"] section.hero .ambient::before {
  background:
    radial-gradient(ellipse 70% 55% at 50% 40%,
      color-mix(in srgb, var(--accent) 9%, transparent) 0%, transparent 70%),
    linear-gradient(to bottom,
      var(--canvas) 0%,
      color-mix(in srgb, var(--canvas) 82%, var(--surface-1)) 50%,
      var(--surface-1) 100%);
}

/* ---- horizontal group (submit button + reassurance line) ----
   Used by both forms since they were written; it was never defined, so the
   button and its note stacked instead of sitting side by side. */
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* ---- alerts (form errors, status messages) ----
   Was missing entirely: the trial form rendered its error into an unstyled
   div, so a failed submit looked like stray text. */
.alert-box {
  border: 1px solid var(--warn); border-left-width: 3px;
  background: color-mix(in srgb, var(--warn) 7%, var(--surface-1));
  border-radius: var(--r-md); padding: 12px 14px; font-size: 14.5px;
}
.alert-box.good { border-color: var(--success);
  background: color-mix(in srgb, var(--success) 7%, var(--surface-1)); }
.ok-text { color: var(--success); }
.err-text { color: var(--warn); }
.hairline { height: 1px; background: var(--hairline); }

/* ---- signup: form first, reassurance beside it ----
   DesignMD "split signup with benefits": the form is the primary task and
   comes first in the DOM, so on a phone nobody scrolls past marketing to
   reach the fields. */
.signup-split {
  display: grid; grid-template-columns: 1.35fr 1fr; gap: 28px; align-items: start;
}
@media (max-width: 900px) { .signup-split { grid-template-columns: 1fr; } }
.signup-aside {
  background: var(--inset); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); padding: 24px;
}
.signup-steps {
  list-style: none; display: flex; gap: 18px; flex-wrap: wrap;
  margin: 0 0 22px; padding: 0 0 16px; border-bottom: 1px solid var(--hairline);
  font-size: 13.5px; color: var(--ink-faint);
}
.signup-steps li { display: flex; align-items: center; gap: 7px; }
.signup-steps li span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 999px; font-family: var(--mono);
  font-size: 11px; border: 1px solid var(--hairline-strong);
}
.signup-steps li.on { color: var(--ink); }
.signup-steps li.on span {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
}
.slug-row { display: flex; align-items: stretch; }
.slug-row input {
  border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0;
}
.slug-suffix {
  display: flex; align-items: center; padding: 0 12px;
  background: var(--inset); color: var(--ink-muted);
  border: 1px solid var(--hairline-strong); border-left: 0;
  border-radius: 0 var(--r-md) var(--r-md) 0; font-size: 13.5px; white-space: nowrap;
}
@media (max-width: 520px) {
  .slug-row { flex-direction: column; }
  .slug-row input { border-radius: var(--r-md); border-right: 1px solid var(--hairline-strong); }
  .slug-suffix { border-left: 1px solid var(--hairline-strong); border-radius: var(--r-md); margin-top: 6px; }
}
.consent { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.consent input { width: auto; margin-top: 3px; accent-color: var(--accent); }
.check-list { list-style: none; margin: 14px 0 0; padding: 0; font-size: 14.5px; }
.check-list li {
  position: relative; padding-left: 26px; margin-bottom: 12px;
  color: var(--ink-muted); line-height: 1.5;
}
.check-list li b { color: var(--ink); font-weight: 600; }
.check-list li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--accent-text); font-family: var(--mono); font-size: 13px;
}

/* ---- provisioning status ---- */
.status-steps { list-style: none; margin: 26px 0 0; padding: 0; font-size: 15px; }
.status-steps li {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0; color: var(--ink-faint);
  border-bottom: 1px solid var(--hairline);
}
.status-steps li:last-child { border-bottom: 0; }
.status-steps li .tick { font-family: var(--mono); width: 16px; }
.status-steps li.done { color: var(--ink-muted); }
.status-steps li.done .tick { color: var(--success); }
.status-steps li.current { color: var(--ink); }
.status-steps li.current .tick { color: var(--accent-text); animation: pulse-tick 1.6s ease-in-out infinite; }
@keyframes pulse-tick { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) {
  .status-steps li.current .tick { animation: none; }
}

/* ---- legal pages (imprint, privacy, terms) ----
   These used .todo and .dim, which never existed in this stylesheet: the
   pages rendered as unstyled black text on the canvas. They are read by
   people deciding whether to trust us with a mailbox password, so they get
   the same typographic care as the rest. */
.legal h2 { font-size: 20px; margin: 34px 0 8px; letter-spacing: -0.012em; }
.legal h2.legal-part {
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-faint);
  margin: 48px 0 6px; padding-top: 18px; border-top: 1px solid var(--hairline);
}
.legal p.dim { color: var(--ink-muted); font-size: 15px; max-width: 74ch; }
.legal .lead { margin-bottom: 28px; }
.todo {
  border: 1px dashed var(--warn); border-radius: var(--r-md);
  background: color-mix(in srgb, var(--warn) 6%, var(--surface-1));
  color: var(--ink-muted); font-family: var(--mono); font-size: 12.5px;
  line-height: 1.7; padding: 14px 16px; margin: 24px 0;
}

/* ============================================================
   2026 redesign additions
   ------------------------------------------------------------
   Direction generated with the AIDesigner MCP and then ported by
   hand into these tokens, so the site keeps its no-build,
   one-stylesheet constraint (no Tailwind CDN, no icon font).
   ============================================================ */

/* ---- dark panel: the surface where the SYSTEM speaks ----
   Used for the terminal proof block and the closing CTA. Fixed in both
   themes: the point of these blocks is that they look like machine
   output, and machine output should not change costume with the OS. */
.panel-dark {
  background: var(--panel-dark);
  color: var(--panel-dark-ink);
  border: 1px solid var(--panel-dark-hairline);
  border-radius: var(--r-xl);
}
.panel-dark h2, .panel-dark h3, .panel-dark h4 { color: var(--panel-dark-ink); }
.panel-dark .muted, .panel-dark .small.muted { color: var(--panel-dark-muted); }
.panel-dark a { color: var(--panel-dark-ink); text-decoration-color: var(--accent-text); }
.panel-dark .btn.secondary {
  background: transparent; color: var(--panel-dark-ink);
  border-color: var(--panel-dark-hairline);
}
.panel-dark .btn.secondary:hover { border-color: var(--panel-dark-muted); color: var(--panel-dark-ink); }

/* Closing CTA: one accent glow from the top, nothing else. */
.cta-final {
  position: relative; overflow: hidden;
  padding: 56px 40px; text-align: center;
}
.cta-final::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 70% at 50% 0%,
    color-mix(in srgb, var(--accent) 26%, transparent) 0%, transparent 70%);
}
.cta-final > * { position: relative; }
@media (max-width: 680px) { .cta-final { padding: 36px 22px; } }

/* ---- pipeline: mail -> draft+evidence -> human -> sent ----
   The one structural idea on the page: the promise "AI drafts, human
   decides" is a sequence, so it is drawn as a sequence. The human gate
   is the only accent-ringed node, because it is the only step the
   customer is being asked to trust. */
.pipeline {
  display: grid; grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch; gap: 0; margin-top: 36px;
}
.pipe-card {
  background: var(--surface-1); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); padding: 16px;
  display: flex; flex-direction: column; gap: 8px; min-width: 0;
}
.pipe-card .pipe-label {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.1px;
  text-transform: uppercase; color: var(--ink-faint);
}
.pipe-card .pipe-head {
  font-family: var(--mono); font-size: 11.5px; color: var(--ink-muted);
  border-bottom: 1px solid var(--hairline); padding-bottom: 8px;
}
.pipe-card .pipe-body { font-size: 13px; line-height: 1.5; color: var(--ink); }
.pipe-card.is-draft { border-color: color-mix(in srgb, var(--mark) 55%, var(--hairline)); }

/* The gate node: accent ring + the two mono verbs under it. */
.pipe-gate {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px; padding: 0 18px; text-align: center;
}
.pipe-gate .ring {
  width: 44px; height: 44px; border-radius: 999px;
  border: 2px solid var(--mark); background: var(--surface-1);
  display: flex; align-items: center; justify-content: center;
  color: var(--mark-text); font-family: var(--mono); font-size: 12px; font-weight: 600;
}
.pipe-gate .gate-label {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--ink-muted); line-height: 1.7;
}
.pipe-arrow {
  align-self: center; display: flex; align-items: center;
  min-width: 40px; padding: 0 10px;
}
.pipe-arrow i {
  display: block; flex: 1; height: 1px;
  background-image: linear-gradient(to right, var(--hairline-strong) 50%, transparent 50%);
  background-size: 7px 1px; background-repeat: repeat-x;
}
.pipe-arrow::after {
  content: ""; width: 6px; height: 6px; margin-left: -3px;
  border-top: 1px solid var(--hairline-strong);
  border-right: 1px solid var(--hairline-strong);
  transform: rotate(45deg);
}
@media (max-width: 900px) {
  .pipeline { grid-template-columns: 1fr; gap: 12px; }
  .pipe-arrow { min-height: 24px; justify-content: center; padding: 0; }
  .pipe-arrow i {
    flex: none; width: 1px; height: 22px;
    background-image: linear-gradient(to bottom, var(--hairline-strong) 50%, transparent 50%);
    background-size: 1px 7px; background-repeat: repeat-y;
  }
  .pipe-arrow::after { margin: -3px 0 0 -3px; transform: rotate(135deg); }
  .pipe-gate { padding: 4px 0; }
}

/* ---- evidence strip: what the draft is standing on ----
   Every claim in a draft is traceable to a row in the customer's own
   system. This makes that legible without a screenshot. */
.evidence { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.evidence-item {
  display: flex; align-items: center; gap: 8px;
  background: var(--inset); border: 1px solid var(--hairline);
  border-radius: var(--r-sm); padding: 7px 10px;
  font-family: var(--mono); font-size: 11.5px; color: var(--ink-muted);
}
.evidence-item .tick { color: var(--success); }

/* Confidence chip: mono, success-tinted, never decorative. */
.confidence {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .6px;
  text-transform: uppercase; padding: 3px 9px; border-radius: 999px;
  color: color-mix(in srgb, var(--success) 70%, var(--ink));
  background: color-mix(in srgb, var(--success) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--success) 30%, transparent);
}

/* ---- stat band: three numbers, hairline separated ---- */
.statband {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--hairline); border-radius: var(--r-lg);
  background: var(--surface-1); overflow: hidden;
}
.statband > div { padding: 22px 24px; border-left: 1px solid var(--hairline); }
.statband > div:first-child { border-left: 0; }
.statband .n {
  font-family: var(--mono); font-size: 28px; font-weight: 600;
  letter-spacing: -0.02em; color: var(--ink); display: block; margin-bottom: 4px;
}
.statband .k { font-size: 13.5px; color: var(--ink-muted); line-height: 1.45; }
@media (max-width: 760px) {
  .statband { grid-template-columns: 1fr; }
  .statband > div { border-left: 0; border-top: 1px solid var(--hairline); }
  .statband > div:first-child { border-top: 0; }
}

/* ---- numbered step cards (Der Ablauf) ----
   The step number is a large quiet mono figure, not a coloured circle:
   it orders the reading without spending accent on decoration. */
.stepcard { display: flex; gap: 18px; align-items: flex-start; }
.stepcard .idx {
  font-family: var(--mono); font-size: 30px; font-weight: 500; line-height: 1;
  color: color-mix(in srgb, var(--mark-text) 85%, transparent);
  flex: none; padding-top: 2px;
}

/* Accent-topped card: used to mark the one card that carries the promise. */
.panel.is-accent { border-top: 2px solid var(--mark); }

/* Card footer strip: a small mono status line closing a trust card. */
.panel-foot {
  margin: 18px -24px -24px; padding: 10px 24px;
  border-top: 1px solid var(--hairline); background: var(--inset);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--success);
}
.panel { display: flex; flex-direction: column; }
.panel > .panel-foot { margin-top: auto; }

/* ---- terminal proof, dark variant ---- */
.proof.dark {
  background: var(--panel-dark); border-color: var(--panel-dark-hairline);
  color: var(--panel-dark-muted); border-radius: var(--r-lg); padding: 20px 22px;
}
.proof.dark .hl { color: var(--panel-dark-ink); }
.proof-head {
  display: flex; justify-content: space-between; gap: 16px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.1px;
  text-transform: uppercase; color: var(--panel-dark-muted);
  border-bottom: 1px solid var(--panel-dark-hairline);
  padding-bottom: 10px; margin-bottom: 14px;
}

/* ---- hero refinements ---- */
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--mark-text); padding: 4px 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--mark) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--mark) 30%, transparent);
  margin: 0 0 18px;
}
.hero-badge::before {
  content: ""; width: 5px; height: 5px; border-radius: 999px; background: var(--mark);
}

/* Focus visibility: the old sheet only styled form focus. */
a:focus-visible, .btn:focus-visible, summary:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm);
}
/* Any muted/lead prose inside the always-dark panel, regardless of which
   page authored it, resolves against the panel rather than the canvas. */
.panel-dark .cta-note, .panel-dark .lead, .panel-dark .muted,
.panel-dark .small, .panel-dark .faint { color: var(--panel-dark-muted); }

/* In dark mode the canvas is already near-black, so the dark panel would
   disappear. Lift it one step and keep the accent glow doing the work. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .panel-dark { background: var(--panel-dark-2); border-color: var(--hairline-strong); }
  :root:not([data-theme="light"]) .proof.dark { background: var(--panel-dark-2); border-color: var(--hairline-strong); }
}
:root[data-theme="dark"] .panel-dark { background: var(--panel-dark-2); border-color: var(--hairline-strong); }
:root[data-theme="dark"] .proof.dark { background: var(--panel-dark-2); border-color: var(--hairline-strong); }

/* Narrow phones: the brand lockup plus "EN" plus the CTA collided at 390px.
   Below 520px the bar hides the language switch and the CTA gets a shorter
   target. The child selector matters: once nav.js has moved the link into
   .links .tools it must stay visible.

   `html.js` matters just as much, and it is the newer half. The hide used to
   be unconditional, and the footer carried a language link so a no-JS visitor
   on a phone still had a way across - the bar hid the switch, nav.js was not
   there to move it into the menu, and the footer was the only one left. When
   that footer line went (22.09.2026) the fallback would have gone with it and
   the other language would have been unreachable below 520px without JS. So
   the hide now applies only where nav.js is actually running to catch the
   link. Without JS the bar wraps - it already does, because .links is
   `display: contents` and every page link is in that row - and "EN" wraps
   with it, which is the ugly-but-reachable state a no-JS fallback is for. */
@media (max-width: 520px) {
  html.js header.site nav > a[data-setlang] { display: none; }
  header.site nav { gap: 10px; }
  header.site .brand img { height: 25px; }
  header.site nav a.cta { padding: 7px 11px; font-size: 13.5px; white-space: nowrap; }
}

/* The proof strip is pre-formatted machine output and must not reflow, so
   on narrow screens it scrolls horizontally inside its own rounded box
   instead of pushing the page wide. */
.proof.dark { overflow: hidden; }
.proof.dark > div[style*="pre"] { overflow-x: auto; padding-bottom: 4px; }
@media (max-width: 560px) {
  .proof, .proof.dark { font-size: 11.5px; padding: 14px 14px; }
  .proof-head { flex-wrap: wrap; gap: 4px 12px; }
}

/* The dark panel is fixed in both themes, so the light-theme --success and
   --ink-faint (tuned for a near-white canvas) fail contrast on it. Give
   the panel its own semantic pair. */
.panel-dark .ok, .proof.dark .ok { color: #4cc98a; }
.panel-dark .faint, .proof.dark .faint { color: var(--panel-dark-muted); }

/* ============================================================
   2026 motion layer
   ------------------------------------------------------------
   Inspired by an aurora/glass reference hero, translated into this
   system's own vocabulary: no aurora, no glass, no new colours - the
   existing tokens simply learn to move. Every effect is a whisper,
   every effect dies under prefers-reduced-motion, and pointer effects
   exist only for fine pointers.
   ============================================================ */

/* Shimmer word inside a display headline: a blue glint travels through
   ONE word per hero - the reading colour doing its job with a pulse.
   Fallback (no animation support, reduced motion): solid accent text. */
.shine {
  color: var(--accent-text);
  background: linear-gradient(105deg,
    var(--ink) 0%, var(--ink) 32%,
    var(--accent-text) 50%,
    var(--ink) 68%, var(--ink) 100%);
  background-size: 260% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine-slide 7s ease-in-out infinite;
}
@keyframes shine-slide {
  0%, 20%   { background-position: 100% 0; }
  60%, 100% { background-position: 0% 0; }
}

/* Hero badge: the dot becomes a quiet LED - a soft ping every few
   seconds, like a status light that says "live", not an alarm. */
.hero-badge::before { animation: led-ping 3.2s cubic-bezier(.16,1,.3,1) infinite; }
@keyframes led-ping {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mark) 45%, transparent); }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* Primary CTA: lifts 2px and gains a warm glow on hover - the one
   place the page is allowed to glow, because it is the one action. */
.btn { transition: background .15s ease-out, border-color .15s ease-out,
       color .15s ease-out, transform .15s ease-out, box-shadow .2s ease-out; }
.btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--accent) 65%, transparent);
}
.btn.primary:active { transform: translateY(0); box-shadow: none; }

/* Ghost/secondary CTA with .arrow: the arrow slides right on hover. */
.btn.arrow::after {
  content: "→"; display: inline-block; margin-left: 8px;
  transition: transform .18s cubic-bezier(.16,1,.3,1);
}
.btn.arrow:hover::after { transform: translateX(3px); }

/* Cursor-following spotlight on cards: a faint warm radial that trails
   the pointer (JS sets --mx/--my). Fine pointers only; the gradient is
   6% accent, closer to a sheet of light than a torch. */
@media (hover: hover) and (pointer: fine) {
  .panel, .tier { position: relative; }
  .panel::after, .tier::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    pointer-events: none; opacity: 0; transition: opacity .35s ease-out;
    background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
      color-mix(in srgb, var(--accent) 6%, transparent) 0%, transparent 70%);
  }
  .panel:hover::after, .tier:hover::after { opacity: 1; }
}

/* Pipeline: the dashed connectors march slowly from mail to sent -
   the promise drawn as motion. Only while JS is alive. */
html.js .pipe-arrow i { animation: pipe-flow 1.6s linear infinite; }
@keyframes pipe-flow { to { background-position: 7px 0; } }
@media (max-width: 900px) {
  html.js .pipe-arrow i { animation-name: pipe-flow-v; }
}
@keyframes pipe-flow-v { to { background-position: 0 7px; } }

/* The human gate breathes: a slow ring expanding from the one node the
   reader is asked to trust. Same rhythm family as the LED ping. */
html.js .pipe-gate .ring { animation: gate-breathe 3.2s cubic-bezier(.16,1,.3,1) infinite; }
@keyframes gate-breathe {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mark) 35%, transparent); }
  70%  { box-shadow: 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* Pointer-depth parallax (hero pipeline): each [data-depth] child eases
   toward a pointer offset proportional to its depth (lerp in JS). The
   transform lives on the element; max travel is single-digit px. */
[data-depth] { will-change: transform; }

/* Reduced motion: every member of the motion layer stops. */
@media (prefers-reduced-motion: reduce) {
  .shine { animation: none; background: none;
    -webkit-text-fill-color: currentColor; color: var(--accent-text); }
  .hero-badge::before, html.js .pipe-arrow i, html.js .pipe-gate .ring { animation: none; }
  .btn.primary:hover { transform: none; box-shadow: none; }
  .btn.arrow:hover::after { transform: none; }
  .panel::after, .tier::after { display: none; }
  [data-depth] { transform: none !important; }
}

/* ---- comparison table (Ihre Alternativen / Your alternatives) ----
   Three columns of prose do not survive a phone. Below 720px the table
   restacks into labelled blocks: the header row disappears and each cell
   carries its column name from data-label, so the reading order stays
   "option -> what it costs -> with SupportLift" instead of degrading
   into a horizontal scroll the reader will not perform. */
.cmp { width: 100%; border-collapse: collapse; font-size: 15px; margin: 18px 0 0; }
.cmp th, .cmp td {
  text-align: left; padding: 12px 14px;
  border-bottom: 1px solid var(--hairline); vertical-align: top;
}
.cmp th {
  font-family: var(--mono); font-size: 11.5px; text-transform: uppercase;
  letter-spacing: 1px; color: var(--ink-faint); font-weight: 600;
}
@media (max-width: 720px) {
  .cmp, .cmp tbody, .cmp tr, .cmp td { display: block; width: 100%; }
  .cmp thead, .cmp tr:first-child th { display: none; }
  .cmp tr {
    border-bottom: 1px solid var(--hairline);
    padding: 6px 0 14px;
  }
  .cmp tr:last-child { border-bottom: 0; }
  .cmp td { border-bottom: 0; padding: 4px 0; }
  .cmp td[data-label]::before {
    content: attr(data-label);
    display: block; margin-bottom: 3px;
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 1px;
    text-transform: uppercase; color: var(--ink-faint);
  }
  .cmp td:first-child { padding-top: 10px; }
  .cmp td:first-child b { font-size: 16px; }
}

/* ============================================================
   chart cards (lieflat-charts grammar, brand palette)
   ------------------------------------------------------------
   Hand-written SVG only - no chart library, no external request.
   Card anatomy follows the skill: conclusion-title (h4), one-line
   sub with the legend, the figure, a mono source line. Colours are
   the site's own CUSTOM roles: blue = data (reading colour), amber
   = the one hero element, greys = furniture. Numbers on charts are
   the product's real defaults or clearly-labelled examples - the
   no-invented-numbers rule applies to charts doubly.
   ============================================================ */
.chart svg { width: 100%; height: auto; display: block; margin-top: 14px; }
.chart-sub {
  font-size: 13.5px; color: var(--ink-muted); margin: 2px 0 0;
}
.chart-src {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--ink-faint); margin: 12px 0 0;
}
/* Text inside the SVG scales with the figure: a 640-unit viewBox renders
   at ~1070px on desktop (x1.67). Sizes below are USER UNITS chosen so the
   rendered result lands on the site's caption/mono sizes (11-13.5px), and
   the type rule of the site holds inside the chart: words in the sans
   (labels, notes), numbers and values in the mono. */
.chart text { font-family: var(--sans); fill: var(--ink-muted); }
.chart .lbl { font-size: 8px; fill: var(--ink); }
.chart .lbl-sm { font-size: 7px; fill: var(--ink-muted); }
.chart .val { font-family: var(--mono); font-size: 7.5px; font-weight: 600; fill: var(--ink); }
.chart .tick-lbl { font-family: var(--mono); font-size: 6.5px; fill: var(--ink-faint); }
.chart .note { font-size: 7px; fill: var(--ink-faint); }
/* Narrow figures (sidebar) render near 1:1 and keep natural sizes. */
.chart.compact .lbl { font-size: 12.5px; }
.chart.compact .lbl-sm { font-size: 11px; }
.chart.compact .val { font-size: 11.5px; }
.chart.compact .tick-lbl { font-size: 10px; }
.chart.compact .note { font-size: 10.5px; }
/* Below 640px the figure shrinks under x1; grow the units so labels keep
   roughly the same rendered size as on desktop. */
@media (max-width: 640px) {
  .chart .lbl { font-size: 11px; }
  .chart .lbl-sm { font-size: 10px; }
  .chart .val { font-size: 10.5px; }
  .chart .tick-lbl { font-size: 9px; }
  .chart .note { font-size: 9.5px; }
}
.chart .grid { stroke: var(--hairline); stroke-width: 1; }
.chart .axis { stroke: var(--hairline-strong); stroke-width: 1; }
.chart .bar-data { fill: var(--accent-text); }
.chart .bar-hero { fill: var(--accent); stroke: var(--accent-edge); stroke-width: 1; }
.chart .bar-mut { fill: var(--hairline-strong); }
.chart .line-data { stroke: var(--accent-text); stroke-width: 2; fill: none; }
.chart .line-hero { stroke: var(--accent-edge); stroke-width: 2; fill: none; }
.chart .area-data { fill: color-mix(in srgb, var(--accent-text) 10%, transparent); }
.chart .cap-line { stroke: var(--accent-edge); stroke-width: 1.5; stroke-dasharray: 5 4; }
.chart .dot-data { fill: var(--accent-text); }
.chart .dot-hero { fill: var(--accent); stroke: var(--accent-edge); stroke-width: 1; }
.chart .danger { fill: var(--danger, #c0392b); }
/* Unit grammar (lieflat Basics/Lupi): rungs are canvas-coloured hairlines
   drawn OVER a bar so every unit stays countable; soft fills carry the
   upper end of a range; the tally board counts dots and ticks. */
.chart .rung { stroke: var(--surface-1); stroke-width: 1.5; }
.chart .bar-soft { fill: color-mix(in srgb, var(--accent-text) 28%, transparent); }
.chart .bar-hero-soft { fill: color-mix(in srgb, var(--accent) 38%, transparent); stroke: var(--accent-edge); stroke-width: 1; stroke-dasharray: 3 3; }
.chart .dot-off { fill: none; stroke: var(--hairline-strong); stroke-width: 1; }
.chart .dot-fail { fill: var(--danger, #c0392b); }
.chart .tick-data { stroke: var(--accent-text); stroke-width: 2; stroke-linecap: round; }
.chart .lbl-sm { font-size: 11px; fill: var(--ink-muted); }

/* Entrance: bars grow, lines draw - driven by the same .reveal.in the
   rest of the page uses, so charts animate exactly once, on scroll-in. */
.chart .grow { transform-box: fill-box; transform-origin: left center; }
.chart .grow-v { transform-box: fill-box; transform-origin: center bottom; }
html.js .reveal .chart .grow { transform: scaleX(0); }
html.js .reveal .chart .grow-v { transform: scaleY(0); }
html.js .reveal.in .chart .grow { transform: scaleX(1);
  transition: transform .8s cubic-bezier(.16,1,.3,1); }
html.js .reveal.in .chart .grow-v { transform: scaleY(1);
  transition: transform .8s cubic-bezier(.16,1,.3,1); }
html.js .reveal .chart .draw { stroke-dasharray: 1000; stroke-dashoffset: 1000; }
html.js .reveal.in .chart .draw { stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.6s cubic-bezier(.16,1,.3,1) .2s; }
html.js .reveal .chart .fade { opacity: 0; }
html.js .reveal.in .chart .fade { opacity: 1; transition: opacity .6s ease-out .9s; }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal .chart .grow { transform: none; }
  html.js .reveal .chart .grow-v { transform: none; }
  html.js .reveal .chart .draw { stroke-dasharray: none; stroke-dashoffset: 0; }
  html.js .reveal .chart .fade { opacity: 1; }
}

/* ---- hero spot illustration ----
   One small flat brand illustration floating beside a subpage hero.
   Decorative only (empty alt, aria-hidden), hidden below 960px where it
   would compete with the text column, and slightly translucent so the
   ambient layer still reads through. */
section.hero .wrap { position: relative; }
.hero-spot {
  position: absolute; right: 24px; top: 8px;
  width: clamp(160px, 18vw, 250px); opacity: .92;
  pointer-events: none;
}
@media (max-width: 960px) { .hero-spot { display: none; } }
/* Same illustration role beside a narrow section (e.g. the FAQ): the
   .narrow content cap leaves the right third of the container free. */
.wrap.has-spot { position: relative; }
.section-spot {
  position: absolute; right: 24px; top: 40px;
  width: clamp(140px, 16vw, 210px); opacity: .9;
  pointer-events: none;
}
@media (max-width: 960px) { .section-spot { display: none; } }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero-spot, :root:not([data-theme="light"]) .section-spot { opacity: .8; }
}
:root[data-theme="dark"] .hero-spot, :root[data-theme="dark"] .section-spot { opacity: .8; }

/* ---- light/dark toggle (injected by theme.js) ----
   Icon-only pill in the nav; shows the scheme a click switches TO. The
   existing button:focus-visible rule covers focus. No JS, no button. */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; flex: none;
  background: transparent; color: var(--ink-muted);
  border: 1px solid var(--hairline-strong); border-radius: 999px;
  cursor: pointer;
  transition: color .15s ease-out, border-color .15s ease-out;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--ink-muted); }
.theme-toggle svg { width: 15px; height: 15px; display: block; }

/* ---- trial capacity (Testplätze) ----
   The number is real (GET <signupApi>/capacity) or absent; never a placeholder
   that looks like data. Slots are drawn as instrument marks, amber = free,
   because a free slot is the thing the reader can act on. Elements carrying
   data-cap-when="open|full|unknown" are toggled by capacity.js; without JS
   or without the API the "unknown" copy stays, which is honest by default. */
[hidden] { display: none !important; }
.capacity { display: flex; flex-direction: column; gap: 12px; }
.capacity .n {
  font-family: var(--mono); font-size: 36px; font-weight: 600; line-height: 1;
  letter-spacing: -0.02em; color: var(--ink);
}
.capacity .n small {
  font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--ink-faint); margin-left: 8px;
}
.capacity[data-state="full"] .n { color: var(--warn); }
.slots { display: flex; flex-wrap: wrap; gap: 5px; }
.slot {
  width: 20px; height: 10px; border-radius: 3px;
  background: var(--inset); border: 1px solid var(--hairline-strong);
}
.slot.free { background: var(--accent); border-color: var(--accent-edge); }
.cap-rule { font-family: var(--mono); font-size: 12px; color: var(--ink-faint); line-height: 1.6; }
.stage-label {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .6px; text-transform: uppercase;
  color: var(--ink-faint); margin: 12px 0 0;
}
.panel > .btn.stage-cta { margin-top: 16px; align-self: flex-start; }
.choice { display: grid; gap: 10px; margin-top: 12px; }
.choice label {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px;
  border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--surface-1);
  cursor: pointer; font-size: 14.5px;
}
.choice label:has(input:checked) { border-color: var(--accent-edge); background: var(--inset); }
.choice input { width: auto; flex: none; margin: 3px 0 0; accent-color: var(--accent); }

.narrow-col { max-width: 760px; }

@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(relaunch/instrument-serif-400-italic.woff2) format('woff2');
}

@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(relaunch/instrument-serif-400-normal.woff2) format('woff2');
}

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(relaunch/outfit-300-normal.woff2) format('woff2');
}

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(relaunch/outfit-400-normal.woff2) format('woff2');
}

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(relaunch/outfit-500-normal.woff2) format('woff2');
}

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(relaunch/outfit-600-normal.woff2) format('woff2');
}

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(relaunch/outfit-700-normal.woff2) format('woff2');
}

/* SupportLift / September 2026. Blue and yellow, expressive type, clear controls.
   Shared across the complete marketing surface. Console tokens stay independent. */
:root, :root[data-theme="light"] {
 --canvas:#f6f8fc; --surface-1:#ffffff; --surface-2:#e8eef8; --inset:#e8eef8;
 --ink:#10264d; --ink-muted:#52627b; --ink-faint:#52627b; --hairline:#d6deec; --hairline-strong:#a4b3cb;
 --accent:#2455d6; --accent-hover:#204bc0; --on-accent:#fff; --accent-edge:#204bc0; --accent-text:#204bc0; --mark:#2455d6; --mark-text:#204bc0;
 --sans:'Outfit',sans-serif; --display:'Instrument Serif',Georgia,serif; --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
 --panel-dark:#10264d; --panel-dark-2:#2A2928; --panel-dark-ink:#f6f8fc; --panel-dark-muted:#b9c9e5;
 --panel-dark-hairline:#38517d; --success:#326549; color-scheme:light;

}
:root[data-theme="dark"] {--canvas:#10264d;--surface-1:#1c212b;--surface-2:#262b38;--inset:#262b38;--ink:#f6f8fc;--ink-muted:#afb7c9;--ink-faint:#96a1b9;--hairline:#38517d;--hairline-strong:#606e8f;--accent:#ffb400;--accent-hover:#ffc331;--on-accent:#10264d;--accent-text:#ffb400;--accent-edge:#ffb400;--mark-text:#ffb400;color-scheme:dark}
* {box-sizing:border-box}
html {scroll-behavior:smooth;scroll-padding-top:150px}
body {background:var(--canvas);color:var(--ink);font-family:var(--sans);font-weight:400;line-height:1.6}
body.sp-relaunch {margin:0}
body.sp-relaunch::before,body.sp-relaunch::after{display:none}
[hidden] {display:none!important}
::selection {background:#2455d6;color:#fff}
:focus-visible {outline:3px solid var(--accent-text);outline-offset:5px}
button,input,select,textarea{font:inherit}
a {color:inherit}
.sp-relaunch main {overflow:clip}
.wrap {width:calc(100% - 96px);max-width:1344px;margin-inline:auto}
header.site {position:sticky;top:0;z-index:50;border-bottom:1px solid var(--hairline);background:var(--canvas);backdrop-filter:none}
header.site > .wrap {height:88px;display:flex;align-items:center;justify-content:space-between;gap:32px}
header.site .brand img {width:205px;height:auto;max-height:none}
header.site nav {display:flex;align-items:center;gap:24px;font-size:14px;font-weight:400}
header.site nav .links {display:flex;gap:27px;align-items:center}
header.site nav a {text-decoration:none;color:var(--ink);white-space:nowrap}
header.site nav a:hover,header.site nav a[aria-current="page"]{color:var(--accent-text)}
header.site nav a.cta {padding:12px 20px;background:var(--ink);color:var(--canvas);border:1px solid var(--ink);border-radius:5px;font-size:14px;font-weight:500;box-shadow:none}
header.site nav .cta:hover{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.theme-toggle,.nav-toggle{background:transparent;border:1px solid var(--hairline);border-radius:50%;width:36px;height:36px;padding:8px;color:var(--ink);display:grid;place-items:center;cursor:pointer}
.theme-toggle svg,.nav-toggle svg {width:18px;height:18px}
.nav-toggle{display:none}
.sp-relaunch h1,.sp-relaunch h2,.sp-relaunch h3 {font-family:var(--sans);font-weight:400;margin:0;letter-spacing:-.045em;color:inherit;text-wrap:balance}
.sp-relaunch h1 {font-size:clamp(56px,5.8vw,88px);line-height:1.01}
.sp-relaunch h1 em{font-family:var(--display);font-weight:400;font-style:italic;color:var(--accent-text);letter-spacing:-.025em}
.sp-relaunch h2 {font-size:clamp(38px,4.1vw,62px);line-height:1.07}
.sp-relaunch h2 span {color:var(--ink-muted)}
.sp-relaunch h3 {font-size:29px;line-height:1.15;letter-spacing:-.03em}
.sp-relaunch p {max-width:620px;color:var(--ink-muted);font-size:17px;line-height:1.6;margin:20px 0}
.sp-eyebrow{display:flex;gap:22px;align-items:center;letter-spacing:.09em;font-family:var(--mono);font-size:10px;line-height:1.5;font-weight:500;text-transform:uppercase;margin-bottom:30px;color:var(--ink-muted)}
.sp-eyebrow>span:first-child{color:var(--accent-text)}
.sp-eyebrow>span+span{padding-left:20px;border-left:1px solid var(--hairline-strong)}
.sp-relaunch .sp-lead{font-size:19px;line-height:1.55;max-width:525px;margin-top:28px}
.sp-relaunch .sp-caption{font-size:12px;line-height:1.6;color:var(--ink-muted);font-weight:400}
.sp-actions{display:flex;gap:12px;flex-wrap:wrap;margin:30px 0 16px}
.sp-button {display:inline-flex;align-items:center;justify-content:center;gap:27px;min-height:50px;padding:14px 22px;border-radius:5px;background:var(--accent);border:1px solid var(--accent-edge);color:var(--on-accent);font-family:var(--sans);font-size:14px;font-weight:500;text-decoration:none;cursor:pointer;transition:background .2s,transform .2s;line-height:1.4}
.sp-button:hover{background:var(--accent-hover);color:var(--on-accent);transform:translateY(-2px)}
.sp-button:active{transform:translateY(0)}
.sp-button:disabled{opacity:.5;cursor:wait;transform:none}
.sp-secondary {color:var(--ink);border-color:var(--hairline-strong);background:transparent}
.sp-secondary:hover {background:var(--inset);color:var(--ink)}
.sp-link {display:inline-flex;align-items:center;gap:34px;border-bottom:1px solid var(--ink);padding:10px 0;color:var(--ink);text-decoration:none;font-size:15px;margin-top:12px}
.sp-link:hover{color:var(--accent-text);border-color:var(--accent-text)}
.sp-hero {display:grid;grid-template-columns:1.04fr 1fr;gap:44px;padding-block:64px 52px;align-items:center}
.sp-hero-copy{padding-block:16px 26px;position:relative;z-index:1}
.sp-hero .sp-eyebrow{margin-bottom:40px}
.sp-hero-visual{position:relative;min-width:0;height:595px;border-radius:8px;background:#bcc9e5}
.sp-hero-art{width:100%;height:100%;object-fit:cover;border-radius:8px}
.sp-art-label{position:absolute;top:22px;left:24px;right:24px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:#1b2230;display:flex;justify-content:space-between}
.sp-floating-note{position:absolute;left:-28px;bottom:35px;right:30px;display:flex;gap:15px;align-items:center;background:#ffffffeF;color:#10264d;padding:20px 24px;border:1px solid #d1d8e8;border-radius:7px;box-shadow:0 20px 40px -15px #10264d25;backdrop-filter:blur(10px)}
.sp-floating-note strong{font-size:17px;font-weight:500}.sp-floating-note small{display:block;color:#52627b;font-size:12px;margin-top:3px}
.sp-note-icon{width:36px;height:36px;background:#e6ecdf;color:#385c3d;display:grid;place-items:center;border-radius:50%}
.sp-proof{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;padding:23px 0 40px;border-bottom:1px solid var(--hairline);color:var(--ink-muted);font-size:13px}
.sp-proof span{display:flex;align-items:center;justify-content:center;gap:12px}
.sp-proof b{font-size:21px;color:var(--accent-text);font-weight:400}
.sp-rail{position:sticky;top:88px;z-index:20;display:flex;justify-content:space-between;gap:20px;background:var(--canvas);border-bottom:1px solid var(--hairline);padding-block:20px;font-family:var(--mono);font-size:11px}
.sp-rail a{text-decoration:none;color:var(--ink-muted);white-space:nowrap}
.sp-rail a:hover,.sp-rail a[aria-current]{color:var(--accent-text)}
.sp-section {padding-block:112px}
.sp-section-heading{margin-bottom:56px}
.sp-section-heading>p{max-width:610px;margin-left:auto;margin-top:28px;font-size:18px}
.sp-duo{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.sp-feature-copy{padding:12px 0}
.sp-feature-copy p {max-width:490px}
.sp-feature-copy h3{font-size:38px;line-height:1.13}
.sp-checks{padding:0;margin:26px 0;list-style:none;font-size:15px}
.sp-checks li{padding:10px 0 10px 28px;position:relative;border-bottom:1px solid var(--hairline)}
.sp-checks li::before{content:'✓';position:absolute;left:0;color:var(--accent-text)}
.sp-visual-panel {padding:55px 45px;border-radius:7px;min-width:0}
.sp-peach {background:#d5dcea;background-image:radial-gradient(ellipse at 10% 0%,#e4eaf8,transparent 70%)}
.sp-conversation{background:#ffffff;border:1px solid #cdd2de;border-radius:10px;color:#10264d;box-shadow:0 20px 40px -15px #10264d15;padding:26px;max-width:470px;margin:auto;transform:rotate(-1.2deg)}
.sp-conversation-top{display:flex;align-items:center;gap:12px;border-bottom:1px solid #e8eef8;padding-bottom:20px}
.sp-conversation-top strong{font-size:16px;font-weight:500}.sp-conversation-top small{display:block;font-size:11px;color:#52627b}
.sp-avatar{background:#2455d6;color:white;border-radius:10px;width:39px;height:39px;display:grid;place-items:center;font-size:22px}
.sp-pill{display:inline-flex;align-items:center;border-radius:30px;padding:5px 10px;font-family:var(--mono);font-size:10px;border:1px solid var(--hairline-strong);color:var(--ink);line-height:1.5}
.sp-conversation-top .sp-pill{margin-left:auto;color:#52627b;border-color:#d6deec}
.sp-message{font-size:14px;line-height:1.6;padding:17px 20px;margin-block:23px;border-radius:6px}
.sp-incoming{background:#e1e4ec;margin-left:30px}
.sp-outgoing{background:#f1f3f7;border:1px solid #e8eef8;margin-right:10px}
.sp-thinking{display:flex;justify-content:space-between;font-size:11px;color:#4a5670;padding:0 8px}
.sp-confidence{display:flex;justify-content:space-between;gap:10px;align-items:center;font-family:var(--mono);font-size:10px;color:#4e5a74}
.sp-confidence strong{color:#366343;font-size:15px}
.sp-meter{height:4px;border-radius:4px;background:#dbdfe8;margin-top:12px;overflow:hidden}.sp-meter i{display:block;width:94%;height:100%;background:#58805b;transition:width .4s}
.sp-conversation .sp-caption{display:block;font-size:9px;color:#54617f;margin-top:14px}
.sp-dark{background:#10264d;color:#f6f8fc;--ink:#f6f8fc;--ink-muted:#b9c9e5;--accent-text:#ffb400;--hairline:#38517d;--hairline-strong:#525f7c;--canvas:#10264d;--inset:#2a2928}
.sp-dark .sp-eyebrow>span:first-child{color:#ffb400}
.sp-three{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.sp-two{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.sp-dark-features{border-top:1px solid var(--hairline);margin-top:74px;padding-top:36px;gap:55px}
.sp-dark-features article>span{font:10px var(--mono);letter-spacing:.1em;color:var(--ink-muted)}
.sp-dark-features h3{font-size:24px;margin-top:20px}.sp-dark-features p{font-size:15px}
.sp-map{padding:36px 10px;min-width:0}.sp-map-sources{display:flex;justify-content:space-between;gap:30px}.sp-map-sources>span{display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid #454f67;width:112px;height:100px;border-radius:14px;font-size:30px;background:#1f242e;color:#ffb400}
.sp-map-sources small{font:11px var(--mono);margin-top:8px;color:#bfc5d4}
.sp-map-lines{height:65px;border:1px solid #53607d;border-top:0;border-radius:0 0 25px 25px;margin-inline:56px;position:relative}.sp-map-lines::before{content:'';position:absolute;top:0;left:50%;height:110px;border-left:1px solid #7094ec}
.sp-map-core{display:flex;flex-direction:column;align-items:center;gap:10px;position:relative;margin:45px auto 0;background:#1f2738;border:1px solid #47619c;width:165px;border-radius:18px;padding:24px;color:#f6f8fc;box-shadow:0 10px 50px -15px #2455d660}
.sp-map-core b{font-size:47px;line-height:1;font-weight:400;color:#ffb400}.sp-map-core span{font-size:16px}
.sp-map-line{height:40px;border-left:1px solid #7094ec;margin-left:50%}.sp-map-result{text-align:center;border:1px solid #525f7c;border-radius:6px;font-size:13px;padding:16px;color:#c8cedb}
.sp-procedure{border:1px solid var(--hairline);border-radius:7px;background:var(--surface-1);overflow:hidden}
.sp-window{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:16px 22px;background:var(--inset);border-bottom:1px solid var(--hairline);font:10px var(--mono);color:var(--ink-muted)}
.sp-procedure-row{display:grid;grid-template-columns:24px 105px 1fr;gap:14px;align-items:center;padding:20px 24px;border-bottom:1px solid var(--hairline)}
.sp-procedure-row>span{font:10px var(--mono);color:var(--ink-muted)}.sp-procedure-row>b{font:10px var(--mono);color:var(--accent-text)}.sp-procedure-row>p{font-size:13px;margin:0;color:var(--ink)}
.sp-procedure-end{padding:20px 24px;font:11px var(--mono);color:var(--ink-muted)}
.sp-product-stage{margin-top:70px;background:#d2d8e4;padding:48px;border-radius:7px}
.sp-screenshot{margin:0;border:1px solid var(--hairline);border-radius:7px;overflow:hidden;background:var(--surface-1)}
.sp-screenshot img{display:block;width:100%;height:auto;object-fit:contain}.sp-screenshot figcaption{padding:12px 20px;font-size:10px;color:var(--ink-muted)}
.sp-tint{background:var(--surface-2)}
.sp-art{width:100%;height:auto;display:block;aspect-ratio:1.24;object-fit:cover;border-radius:7px}
.sp-security-art{position:relative;min-width:0}.sp-security-art .sp-art{aspect-ratio:1}
.sp-image-tag{position:absolute;bottom:24px;left:24px;padding:8px 14px;background:#ffffffd9;border:1px solid #cdd2de;border-radius:3px;color:#343d51;font:10px var(--mono);letter-spacing:.1em}
.sp-start-cards{margin-bottom:30px}.sp-start-cards article{min-width:0}.sp-start-cards .sp-eyebrow{margin-top:30px;margin-bottom:18px}.sp-start-cards h3{font-size:26px}.sp-start-cards p{font-size:15px;max-width:360px}
.sp-mini-art{height:200px;border-radius:7px;display:flex;align-items:center;justify-content:center;gap:15px;background:var(--inset);overflow:hidden;color:#10264d}
.sp-mini-connect{background:#d0d8e9}.sp-mini-connect>span{background:#ffffff;border:1px solid #a6b0c5;border-radius:12px;font-size:38px;width:74px;height:78px;display:grid;place-items:center;transform:rotate(-8deg);color:#204bc0}.sp-mini-connect>span:nth-child(2){transform:rotate(8deg);margin-top:30px}.sp-mini-connect>span:nth-child(3){transform:rotate(-5deg)}
.sp-mini-review{background:#e3e6dc;flex-direction:column;gap:10px}.sp-mini-review>div{width:70%;padding:15px 20px;background:#ffffff;border:1px solid #bfc7b5;border-radius:5px;font-size:13px;color:#365a3b;transform:rotate(-3deg)}.sp-mini-review>div+div{transform:rotate(3deg);color:#343d51}
.sp-mini-autonomy{background:#1d222c;flex-direction:column;color:#a7bcea}.sp-mini-autonomy>span{font-size:80px;line-height:1}.sp-mini-autonomy>div{font:11px var(--mono);letter-spacing:.04em}
.sp-faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px;border-top:1px solid var(--hairline)}
.sp-faq h2{font-size:44px}.sp-faq details{border-bottom:1px solid var(--hairline);background:transparent;padding:0;border-radius:0;box-shadow:none}.sp-faq details:first-child{border-top:1px solid var(--hairline)}
.sp-faq summary{font-size:17px;padding:23px 0;cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;font-weight:400}.sp-faq summary::-webkit-details-marker{display:none}.sp-faq summary::after{display:none}.sp-faq summary span{font-size:23px;font-weight:300}.sp-faq details[open] summary span{transform:rotate(45deg)}.sp-faq details p{margin:0 30px 25px 0;font-size:15px;max-width:none}
/* ---- the chrome steps aside ----
   Set by nav.js when the closing banner comes into view (and only there -
   no JS, no observer, or a reduced-motion preference all leave the chrome
   exactly where it is). The bar and the proof rail are sticky, so without
   this they hang over the two surfaces that are meant to END the page.

   :focus-within is not a nicety. A faded bar still contains real links, and
   a keyboard user tabbing up out of the footer would otherwise land on
   something invisible; bringing it back on focus costs one selector and is
   the difference between an effect and a trap. `visibility` is deliberately
   NOT used: it would have to be timed against the transition, and
   pointer-events alone already takes the bar out of the way of the cursor. */
html.sp-chrome-away header.site,
html.sp-chrome-away .sp-rail{opacity:0;pointer-events:none;transition:opacity .45s ease}
header.site,.sp-rail{transition:opacity .45s ease}
html.sp-chrome-away header.site:focus-within{opacity:1;pointer-events:auto}

/* ---- the closing banner ----
   The last thing before the ground, and the pitch deck's closing slide: a
   cobalt panel, the lockup, one headline with a serif-italic accent word in
   sun yellow, one line, two ways in, and the paper plane resting upper right
   with a tapered contrail. It used to be a navy panel over a photograph; the
   deck's cobalt is a colour, so the ground is now gradients and costs no
   request.

   The one image left (`earned-autonomy`, the site's chrome artwork, see
   close() in tools/build-relaunch.py) is blended with `multiply`: white
   multiplies to nothing and the arches to a deeper blue, so it can only
   DARKEN the ground under the words, never lighten it. It stays an <img>
   (loading="lazy" at the foot of every page) and the text stays its
   sibling, which is what lets tools/test-footer-ground.mjs hide the ink and
   photograph the ground underneath it exactly as it does for the footer.

   The cobalt is not taste alone: white and #eef3ff ink over it must clear
   4.5:1 at every sampled pixel in both schemes (`npm run
   test:footer-ground:browser`). The bright spot of the slide sits where the
   plane is, upper right, clear of every line; where the words are the ground
   is a shade deeper than the slide. The yellow is only ever large (the
   accent word) or a fill (the button) - small yellow text on cobalt would
   miss the floor, which is why the banner has no eyebrow.

   The flight: finale.js arms the banner (.is-armed) only when motion is
   allowed and flies it once (.is-flying) when it comes into view. Without
   script, with reduced motion, or after the flight, this is the static
   slide. */
.sp-close{padding-top:75px}
.sp-close-banner{position:relative;isolation:isolate;overflow:hidden;border-radius:22px;
 display:grid;place-items:center;text-align:center;
 padding:clamp(72px,9vw,128px) clamp(24px,5vw,80px) clamp(64px,8vw,112px)}
.sp-close-banner.sp-dark{--close-a:#2c5ade;--close-b:#2451d3;--close-c:#1c42bb;--close-glow:#5680f0;--close-deep:#0e2a8a66;
 background:
  linear-gradient(180deg,#0000 58%,var(--close-deep) 100%),
  radial-gradient(52% 64% at 84% 6%,var(--close-glow) 0%,#0000 72%),
  linear-gradient(160deg,var(--close-a) 0%,var(--close-b) 48%,var(--close-c) 100%);
 border-radius:22px}
[data-theme="dark"] .sp-close-banner.sp-dark{--close-a:#2149c2;--close-b:#1b3dab;--close-c:#132f86;--close-glow:#3d68dc;--close-deep:#08195266;
 box-shadow:inset 0 0 0 1px #ffffff14}
/* the slide's faint drafting grid, fading out toward the edges */
.sp-close-banner::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
 background:linear-gradient(#ffffff0c 1px,#0000 1px) 0 0/100% 56px,linear-gradient(90deg,#ffffff0c 1px,#0000 1px) 0 0/56px 100%;
 -webkit-mask:radial-gradient(75% 80% at 50% 45%,#000 30%,#0000 100%);mask:radial-gradient(75% 80% at 50% 45%,#000 30%,#0000 100%)}
.sp-close-art{position:absolute;left:-5%;bottom:-22%;width:min(40%,460px);height:auto;aspect-ratio:1;object-fit:cover;z-index:-2;
 mix-blend-mode:multiply;opacity:.34;pointer-events:none}

/* the plane and its contrail: decoration behind the words, never under them */
.sp-close-flight{--trail:clamp(120px,18vw,280px);--plane:clamp(60px,6.6vw,100px);
 position:absolute;inset:0;z-index:-1;pointer-events:none}
.sp-close-flight::before{content:"";position:absolute;top:calc(13% - var(--plane) * .55);right:calc(7% - var(--plane) * .4);
 width:calc(var(--plane) * 1.8);height:calc(var(--plane) * 1.8);border-radius:50%;background:radial-gradient(closest-side,#ffd34e4d,#ffd34e00)}
.sp-close-plane{position:absolute;top:13%;right:7%;width:var(--plane);height:auto;transform:rotate(30deg);
 filter:drop-shadow(0 12px 16px #0a1d6b59)}
/* tapered, not faded: sunshine at low alpha over cobalt reads grey, so the
   far end is thinner and bluer instead of paler */
.sp-close-trail{position:absolute;top:calc(13% + var(--plane) * .5);right:calc(7% + var(--plane) * .72);width:var(--trail);height:6px;
 background:linear-gradient(90deg,#5d86f0 0%,#a9bff7 45%,#ffe38c 85%,#ffd34e 100%);
 clip-path:polygon(0 46%,100% 0,100% 100%,0 54%);transform:rotate(-3deg);transform-origin:100% 50%}

.sp-close-copy{max-width:820px}
.sp-close-logo{display:block;width:220px;height:auto;margin:0 auto 36px}
.sp-close-banner .sp-close-copy h2{margin:0;font:600 clamp(44px,5.4vw,80px)/1.02 var(--sans);letter-spacing:-.05em;color:#fff}
.sp-close-banner .sp-close-copy h2 em{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;font-size:1.12em;
 line-height:.9;letter-spacing:-.01em;color:#ffd34e}
.sp-close-banner .sp-close-copy p{margin:26px auto 0;max-width:34em;font-size:clamp(17px,1.5vw,20px);line-height:1.5;color:#eef3ff;text-wrap:balance}
.sp-close-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:40px}
/* Three classes, not one: `.sp-dark .sp-button` further down paints every
   button on a dark panel, at two classes and later in the file. */
.sp-close-banner.sp-dark .sp-button{border-radius:999px;padding:15px 26px;font-weight:600;font-size:15px;
 background:linear-gradient(180deg,#ffd34e,#ffb400);border-color:#ffc21a;color:#10264d;box-shadow:0 16px 30px -14px #06154dcc}
.sp-close-banner.sp-dark .sp-button:hover{background:linear-gradient(180deg,#ffdc6e,#ffc331);color:#10264d}
/* the second way in has no canvas to sit on, so it carries its own: a
   DARKER translucent fill (it only ever raises the contrast of its label)
   and a light edge */
.sp-close-banner.sp-dark .sp-button.sp-secondary{background:#0a1d5c4d;border-color:#ffffff73;color:#fff;box-shadow:none}
.sp-close-banner.sp-dark .sp-button.sp-secondary:hover{background:#0a1d5c80;color:#fff}

/* the flight (finale.js): armed = waiting off to the left, flying = once */
.sp-close-banner.is-armed:not(.is-flying) .sp-close-plane{opacity:0}
.sp-close-banner.is-armed .sp-close-trail{-webkit-mask:linear-gradient(#000,#000) 0 0/0% 100% no-repeat;mask:linear-gradient(#000,#000) 0 0/0% 100% no-repeat}
.sp-close-banner.is-flying .sp-close-plane{animation:sp-close-glide 1.7s cubic-bezier(.3,.7,.25,1) both}
.sp-close-banner.is-flying .sp-close-trail{animation:sp-close-trail 1.7s cubic-bezier(.3,.7,.25,1) both}
.sp-close-banner.is-flying .sp-close-flight::before{animation:sp-close-halo 1.7s ease-out both}
@keyframes sp-close-glide{
 0%{opacity:0;transform:translate(calc(-1 * var(--trail) - var(--plane) * .3),calc(var(--trail) * .06)) rotate(24deg)}
 12%{opacity:1}
 82%{transform:translate(0,0) rotate(24deg)}
 100%{opacity:1;transform:rotate(30deg)}}
@keyframes sp-close-trail{0%{-webkit-mask-size:0% 100%;mask-size:0% 100%}82%,100%{-webkit-mask-size:100% 100%;mask-size:100% 100%}}
@keyframes sp-close-halo{0%,55%{opacity:0}100%{opacity:1}}
@media(prefers-reduced-motion:reduce){
 .sp-close-banner.is-armed .sp-close-plane{opacity:1;animation:none}
 .sp-close-banner.is-armed .sp-close-trail{-webkit-mask:none;mask:none;animation:none}}

@media(max-width:600px){
 .sp-close{padding-top:45px}
 .sp-close-banner{border-radius:16px;padding:84px 20px 56px}
 .sp-close-banner.sp-dark{border-radius:16px}
 .sp-close-flight{--trail:26vw;--plane:48px}
 .sp-close-plane,.sp-close-flight::before{top:26px}
 .sp-close-flight::before{top:0}
 .sp-close-trail{top:calc(26px + var(--plane) * .5)}
 .sp-close-art{width:80%;bottom:-24%;left:-20%}
 .sp-close-logo{width:176px;margin-bottom:28px}
 .sp-close-banner .sp-close-copy h2{font-size:40px}
 .sp-close-banner .sp-close-copy p{font-size:16px}
 .sp-close-actions{margin-top:28px;gap:10px}
 .sp-close-actions .sp-button{width:100%;justify-content:center;gap:14px}
}

/* ---- footer: the page's ground ----
   The last screen is not a leftover strip, it is where the page lands. Two
   things carry that: SPACE (the footer is a screen of its own, not a 55px
   band) and a soft sweep through the house colours - the page's white-blue
   canvas warms into the yellow the logo speaks and cools into the blue the
   links speak, so the visitor leaves through both halves of the identity
   instead of falling off a hairline.

   The sweep is FIVE stops plus two wide radial glows, all of them tokens
   (--foot-ground-*, --foot-glow-*), never literals in here. That is not
   tidiness: website/tools/test_footer_ground.py reads those tokens out of
   this file, composites BOTH glows over EVERY stop, and fails if --ink-muted
   drops under WCAG AA anywhere in that worst case. A gradient is exactly the
   kind of change whose screenshot looks right in one viewport of one scheme
   while the bottom of another one carries 4.1:1 body text.

   The glows sit in a ::before at z-index -1. footer.site is already a
   stacking context (`body > footer{position:relative;z-index:1}` further up),
   so the layer paints over the footer's own background and under its text,
   and `overflow:hidden` keeps it from bleeding onto the section above. */
footer.site{
 margin-top:0;position:relative;overflow:hidden;
 /* The reference this was drawn from ends on ~1030px of footer at a 1510px
    viewport, and the air is most of it: ~200px above the lockup, ~200px
    between lockup and columns, ~230px between the last link and the
    closing line. That is the whole effect - the page does not stop, it
    lands. Measured on the rendered page by tools/test-footer-ground.mjs,
    which also holds every line's contrast over the pixels behind it. */
 padding:clamp(150px,23vw,370px) 0 clamp(64px,6vw,104px);
 background:linear-gradient(180deg,
   var(--foot-ground-1) 0%, var(--foot-ground-2) 24%, var(--foot-ground-3) 42%,
   var(--foot-ground-4) 60%, var(--foot-ground-5) 80%, var(--foot-ground-6) 100%);
}
footer.site::before{
 content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
 background:
   radial-gradient(85% 46% at 50% 34%, var(--foot-glow-warm), transparent 70%),
   radial-gradient(90% 60% at 50% 104%, var(--foot-glow-cool), transparent 72%);
}
footer.site>.wrap{--foot-gap:clamp(40px,5.5vw,84px);display:grid;justify-items:center;text-align:center;gap:var(--foot-gap)}
footer.site a{font-size:14px;color:var(--ink-muted);text-decoration:none}
footer.site a:hover{color:var(--accent-text)}
.sp-foot-mark{display:block;line-height:0}
.sp-foot-mark img{width:min(300px,72vw);height:auto}
/* The mark and the tagline are one unit, so they keep a tighter rhythm than
   the grid's gap: the grid spaces BLOCKS, this spaces a line under a mark. */
.sp-foot-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 24px;width:100%;max-width:960px}
.sp-foot-col{display:flex;flex-direction:column;align-items:center;gap:14px}
/* Scoped to the footer on purpose: `.sp-relaunch h2` is a 44px display
   heading and outranks a bare class, which is how these four labels
   first shipped the size of a section title. */
footer.site .sp-foot-head{margin:0;font-size:17px;font-weight:500;letter-spacing:-.01em;line-height:1.3;color:var(--ink)}
.sp-foot-col a.active{color:var(--ink)}
.sp-foot-base{display:flex;flex-direction:column;align-items:center;gap:18px;
 width:100%;padding-top:clamp(28px,3.5vw,48px)}
.sp-foot-base small{font-size:14px;color:var(--ink-muted)}
/* The channels are declared before they exist: an entry without a href
   renders as a <span aria-hidden>, so it is a mark and not a link nobody
   can follow. Both forms style the same, because the row must not change
   shape on the day the first URL is filled in. */
.sp-foot-social{display:flex;align-items:center;gap:22px;color:var(--ink-muted)}
.sp-foot-social>*{display:inline-flex;line-height:0;color:inherit}
.sp-foot-social a{transition:color .2s}
.sp-foot-social a:hover{color:var(--ink)}
.sp-foot-social svg{display:block}
@media(max-width:760px){.sp-foot-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 20px}}
.sp-page-hero{padding-top:85px;padding-bottom:30px}.sp-page-hero h1{font-size:clamp(58px,6.3vw,94px);max-width:1080px}.sp-page-hero>.sp-lead{max-width:620px}.sp-page-hero>.sp-screenshot{margin-top:65px}
.sp-filterbar{display:flex;justify-content:space-between;gap:30px;align-items:center;margin-bottom:24px}.sp-filters{display:flex;flex-wrap:wrap;gap:8px}.sp-filters button,.sp-demo-tabs button{background:transparent;color:var(--ink);border:1px solid var(--hairline-strong);border-radius:30px;padding:10px 18px;font-size:13px;cursor:pointer}.sp-filters button[aria-pressed="true"],.sp-demo-tabs button[aria-pressed="true"]{background:var(--ink);color:var(--canvas);border-color:var(--ink)}
.sp-search{display:flex;align-items:center;border-bottom:1px solid var(--hairline-strong);gap:15px}.sp-search input{background:none;border:0;padding:10px 0;color:var(--ink);width:190px;font-size:14px}.sp-search span[aria-hidden]{font-size:24px}
.sp-connector-card{border:1px solid var(--hairline);border-radius:7px;padding:34px;background:var(--surface-1);display:flex;flex-direction:column;min-height:300px;transition:transform .2s,border-color .2s}.sp-connector-card:hover{transform:translateY(-4px);border-color:var(--hairline-strong)}.sp-connector-icon{display:grid;place-items:center;width:56px;height:56px;background:var(--inset);border-radius:12px;color:var(--accent-text);font-size:29px;margin-bottom:30px}.sp-connector-card h3{font-size:25px}.sp-connector-card p{font-size:15px}.sp-connector-card a{font-size:13px;margin-top:auto;text-underline-offset:5px;color:var(--accent-text)}
.sp-dataflow{display:flex;align-items:center;gap:24px;margin-bottom:60px}.sp-dataflow>div{flex:1;min-width:0;border:1px solid var(--hairline);padding:24px;border-radius:7px;font:10px var(--mono);color:var(--accent-text);background:var(--surface-1)}.sp-dataflow strong{display:block;font:22px var(--sans);margin-block:16px 10px;color:var(--ink)}.sp-dataflow small{font:11px var(--sans);color:var(--ink-muted)}.sp-dataflow>span{color:var(--accent-text)}
.sp-evidence{padding:30px 0;border-top:1px solid var(--hairline)}.sp-evidence>span{font:10px var(--mono);color:var(--ink-muted)}.sp-evidence h3{margin-top:20px;font-size:28px}.sp-evidence p{font-size:16px}
.sp-trust-doc{border:1px solid #465169;background:#1c212b;padding:38px;border-radius:7px;transform:rotate(2deg)}.sp-trust-doc>span{font:10px var(--mono);color:#829edb}.sp-trust-doc h3{font-size:30px;margin-top:30px}.sp-trust-doc p{padding-bottom:16px;border-bottom:1px solid #38517d;font-size:14px}.sp-trust-doc small{font-size:11px;color:#b9c9e5}
.sp-pricing{padding-top:45px}.sp-plan{border:1px solid var(--hairline);border-radius:8px;padding:32px;display:flex;flex-direction:column;background:var(--surface-1)}.sp-plan-featured{border:2px solid var(--accent);padding:31px;background:var(--inset)}.sp-plan-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:35px}.sp-plan-top>span{font-size:22px}.sp-plan-top small{font:8px var(--mono);color:var(--accent-text)}.sp-plan h2{font-size:75px;letter-spacing:-.06em;line-height:1}.sp-plan h2 span{font-size:35px;color:var(--ink);vertical-align:top;display:inline-block;margin-top:6px;margin-left:5px}.sp-plan .sp-caption{margin-top:6px}.sp-plan h3{font-size:21px;margin-top:14px}.sp-plan .sp-checks{font-size:14px;margin-bottom:35px;flex:1}.sp-plan .sp-button{width:100%}.sp-stripe{font-size:27px;font-weight:700;letter-spacing:-1.5px;color:var(--ink)}
.sp-onboarding-preview{display:grid;grid-template-columns:220px 1fr;border:1px solid var(--hairline);border-radius:8px;overflow:hidden;background:var(--surface-1)}.sp-onboarding-side{background:#10264d;color:#f6f8fc;padding:30px 22px;display:flex;flex-direction:column;gap:25px;font-size:13px}.sp-wordmark{font-size:20px;letter-spacing:-.04em}.sp-onboarding-side p{font:9px var(--mono);color:#9ba5bc;margin-top:35px}.sp-onboarding-content{padding:60px}.sp-onboarding-content h2{font-size:43px}.sp-checklist{margin-top:35px}.sp-checklist a{display:flex;align-items:center;gap:20px;border:1px solid var(--hairline);padding:24px;margin-bottom:12px;border-radius:5px;text-decoration:none}.sp-checklist a>span{font:12px var(--mono);color:var(--accent-text)}.sp-checklist strong{font-size:16px;font-weight:400}.sp-checklist small{display:block;font-size:12px;color:var(--ink-muted);margin-top:4px}.sp-checklist b{margin-left:auto;color:var(--accent-text);font-weight:400}.sp-checklist a:hover{background:var(--inset)}
.sp-demo-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:30px}.sp-demo-stage{display:grid;grid-template-columns:1fr 1fr;gap:70px;background:var(--inset);padding:65px;border-radius:7px;align-items:center}.sp-demo-context h2{font-size:48px}.sp-demo-context p{font-size:16px}.sp-demo-stage .sp-conversation{transform:rotate(1.5deg)}.sp-section>.sp-screenshot+.sp-screenshot{margin-top:35px}
.sp-signup{display:grid;grid-template-columns:.85fr 1.15fr;gap:85px;padding-block:65px 90px}.sp-signup-aside h1{font-size:70px}.sp-signup-aside>p{font-size:16px;max-width:360px}.sp-signup-aside .sp-art{height:330px;aspect-ratio:auto;object-fit:cover;margin-top:30px}.sp-signup-assurance{font-size:11px;margin-top:20px;color:var(--ink-muted)}.sp-wizard{background:var(--surface-1);border:1px solid var(--hairline);border-radius:8px;padding:36px 40px;align-self:start;min-width:0}.sp-wizard-progress{display:flex;list-style:none;padding:0;margin:0 0 45px;gap:14px}.sp-wizard-progress li{font:11px var(--mono);color:var(--ink-muted);flex:1;border-top:2px solid var(--hairline);padding-top:10px}.sp-wizard-progress li span{display:block;font:10px var(--sans);margin-top:5px}.sp-wizard-progress .current,.sp-wizard-progress .done{border-color:var(--accent);color:var(--accent-text)}
.sp-wizard fieldset{padding:0;margin:0;border:0;min-width:0}.sp-wizard legend{font-size:30px;letter-spacing:-.04em;line-height:1.15;margin-bottom:10px;width:100%}.sp-wizard fieldset>p{font-size:14px;margin:12px 0 25px}.sp-wizard label:not(.sp-consent),.sp-field-label{display:block;font-size:12px;font-weight:500;margin-block:22px 7px;color:var(--ink)}.sp-wizard input:not([type="checkbox"]):not([type="radio"]),.sp-wizard select,.sp-wizard textarea{background:var(--canvas);color:var(--ink);border:1px solid var(--hairline-strong);border-radius:5px;padding:12px 14px;min-height:47px;width:100%;font-size:14px}.sp-wizard input::placeholder,.sp-wizard textarea::placeholder{color:var(--ink-muted)}.sp-wizard textarea{resize:vertical}.sp-wizard input:invalid:not(:placeholder-shown){border-color:var(--accent-text)}
.sp-input-suffix{display:flex;align-items:center;border:1px solid var(--hairline-strong);border-radius:5px;background:var(--canvas);padding-right:12px}.sp-input-suffix input{border:0!important;width:45%!important;min-width:70px}.sp-input-suffix>span{font-size:11px;white-space:nowrap;color:var(--ink-muted)}.sp-wizard small{font-size:10px;color:var(--ink-muted)}.sp-wizard-actions{display:flex;justify-content:space-between;gap:16px;margin-top:32px}.sp-wizard-actions #setup-next{margin-left:auto}.sp-form-note{padding:18px;background:var(--inset);border-radius:5px;font-size:12px;margin-top:25px;color:var(--ink-muted)}.sp-choices{display:grid;grid-template-columns:1fr 1fr;gap:12px}.sp-wizard .sp-choices label{display:flex;align-items:center;gap:10px;border:1px solid var(--hairline-strong);border-radius:5px;padding:16px 12px;font-size:12px;margin:0;cursor:pointer}.sp-choices label:has(input:checked){border-color:var(--accent);background:var(--inset)}.sp-wizard input[type="checkbox"],.sp-wizard input[type="radio"]{accent-color:var(--accent-text);width:16px;height:16px;flex-shrink:0}.sp-consent{display:flex;align-items:flex-start;gap:10px;font-size:11px;color:var(--ink-muted);margin-top:25px}.sp-consent input{margin-top:2px}.sp-consent a{color:var(--accent-text);text-underline-offset:3px}.sp-payment-note{display:flex;gap:25px;align-items:center;border-top:1px solid var(--hairline);margin-top:25px;padding-top:15px}.sp-payment-note p{font-size:11px!important;margin:0!important}.sp-summary{padding:20px;background:var(--inset);border-radius:5px;font-size:13px}.sp-summary p{font-size:12px;margin:8px 0}.sp-summary dl{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:10px;font-size:12px}.sp-summary dt{color:var(--ink-muted)}.sp-summary dd{margin:0;overflow-wrap:anywhere}.sp-error{padding:14px;background:#294fa215;border:1px solid #294fa2;border-radius:5px;color:var(--ink)!important;font-size:13px!important}.sp-result{padding-block:30px}.sp-result h2{font-size:38px}.sp-result p{font-size:15px}.sp-result-icon{font-size:50px;color:var(--accent-text);display:block;margin-bottom:25px}.sp-result .sp-button{margin-block:10px}.sp-wizard #setup-local-note{font-size:10px;margin:22px 0 0}.sp-wizard noscript p{font-size:13px}.sp-wizard .sp-capacity{padding:18px;background:var(--inset);border-radius:5px;margin-top:20px}.sp-wizard .sp-capacity label{font-size:12px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Standards (ATR-379): the matrix section "standards", one card per standard,
 * heading = the standard, text = the evidenced scope with its limit. */
.sp-standards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.sp-standard{border:1px solid var(--hairline);border-radius:7px;padding:26px 24px}
.sp-relaunch .sp-standard h3{font-size:22px;margin:0 0 12px}
.sp-relaunch .sp-standard p{font-size:15px;margin:0}
@media(max-width:1100px){.sp-standards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.sp-standards{grid-template-columns:1fr;gap:16px}.sp-standard{padding:22px 20px}}
@media(min-width:1600px){.sp-hero{gap:65px}.sp-hero h1{font-size:90px}}
@media(max-width:1100px){.wrap{width:calc(100% - 56px)}header.site nav{gap:15px}header.site nav .links{gap:18px}header.site .brand img{width:177px}.sp-hero{gap:30px}.sp-hero-visual{height:560px}.sp-hero h1{font-size:66px}.sp-duo{gap:45px}.sp-signup{gap:40px}.sp-signup-aside h1{font-size:60px}.sp-wizard{padding:28px}.sp-plan{padding:25px}.sp-plan-featured{padding:24px}.sp-onboarding-content{padding:40px}.sp-demo-stage{padding:40px;gap:35px}.sp-dataflow{gap:13px}.sp-dataflow>div{padding:18px}.sp-visual-panel{padding:40px 25px}}
@media(max-width:860px){
 html{scroll-padding-top:105px}.wrap{width:calc(100% - 40px)}header.site > .wrap{height:72px;gap:16px}header.site .brand img{width:170px}header.site nav{gap:12px}header.site nav a.cta{font-size:12px;padding:10px 15px}.nav-toggle{display:grid;order:5}header.site nav .links{display:none;position:absolute;top:72px;left:0;right:0;background:var(--canvas);border-bottom:1px solid var(--hairline);padding:25px;flex-direction:column;align-items:flex-start;gap:24px;box-shadow:0 15px 30px #0000000a}header.site nav.open .links{display:flex}html.js header.site nav>.theme-toggle,html.js header.site nav>a[data-setlang]{display:none}header.site .tools{display:flex;align-items:center;gap:20px;width:100%;border-top:1px solid var(--hairline);padding-top:20px}
 .sp-hero{grid-template-columns:1fr;padding-top:45px;gap:15px}.sp-hero-copy{max-width:700px;padding-bottom:30px}.sp-hero h1{font-size:clamp(58px,8.5vw,80px)}.sp-hero .sp-lead{max-width:570px}.sp-hero-visual{height:480px}.sp-floating-note{left:25px;right:25px;max-width:440px}.sp-proof{grid-template-columns:1fr 1fr;padding-top:10px;gap:18px;padding-bottom:30px}.sp-proof span{justify-content:flex-start}.sp-rail{top:72px;gap:25px;overflow:auto;justify-content:flex-start;font-size:10px;width:100%;padding-inline:20px}.sp-section{padding-block:75px}.sp-duo{gap:35px}.sp-relaunch h2{font-size:43px}.sp-feature-copy h3{font-size:31px}.sp-section-heading>p{margin-left:0}.sp-visual-panel{padding:25px 15px}.sp-conversation{padding:18px}.sp-conversation-top{gap:8px}.sp-conversation-top .sp-pill{font-size:8px}.sp-message{font-size:12px;padding:13px}.sp-incoming{margin-left:10px}.sp-confidence{font-size:8px}.sp-map-sources{gap:10px}.sp-map-sources>span{width:80px;height:90px}.sp-procedure-row{grid-template-columns:20px 85px 1fr;gap:8px;padding:18px 14px}.sp-procedure-row>b{font-size:8px}.sp-procedure-row>p{font-size:11px}.sp-three{gap:16px}.sp-dark-features{gap:25px}.sp-dark-features h3{font-size:23px}.sp-product-stage{padding:25px}.sp-start-cards h3{font-size:23px}.sp-mini-art{height:160px}.sp-mini-connect{gap:8px}.sp-mini-connect>span{width:47px;height:56px;font-size:27px}.sp-mini-review>div{font-size:10px;padding:12px}.sp-faq{gap:40px;grid-template-columns:.8fr 1.2fr}.sp-faq h2{font-size:35px}.sp-page-hero{padding-top:60px}.sp-page-hero h1{font-size:70px}.sp-connector-card{padding:24px}.sp-connector-card h3{font-size:22px}.sp-filterbar{flex-wrap:wrap}.sp-plan{padding:20px}.sp-plan-featured{padding:19px}.sp-plan h2{font-size:65px}.sp-plan h3{font-size:19px}.sp-plan-top small{display:none}.sp-plan .sp-checks{font-size:12px}.sp-plan .sp-button{font-size:12px;padding-inline:12px}.sp-payment{gap:20px;flex-wrap:wrap}.sp-payment p{flex:1;min-width:240px}.sp-payment>span:last-child{margin:0}.sp-onboarding-preview{grid-template-columns:170px 1fr}.sp-onboarding-side{padding:25px 15px}.sp-onboarding-content{padding:30px}.sp-onboarding-content h2{font-size:34px}.sp-checklist a{padding:17px;gap:12px}.sp-checklist strong{font-size:14px}.sp-checklist small{font-size:11px}.sp-demo-stage{padding:30px;gap:25px}.sp-demo-context h2{font-size:38px}.sp-signup{grid-template-columns:1fr;gap:35px;max-width:660px}.sp-signup-aside .sp-art{display:none}.sp-signup-aside h1{font-size:57px}.sp-signup-aside h1 br{display:none}.sp-signup-aside>p{max-width:480px}.sp-signup-assurance{margin-top:15px}.sp-wizard{padding:35px}.sp-dataflow{flex-wrap:wrap}.sp-dataflow>div{flex-basis:40%}.sp-dataflow>span:nth-of-type(2){display:none}
}
@media(max-width:600px){
 .wrap{width:calc(100% - 36px)}header.site .brand img{width:145px}header.site nav{gap:9px}header.site > .wrap{gap:10px}header.site nav a.cta{padding:9px 12px;font-size:11px}.nav-toggle{width:33px;height:33px;padding:7px}.sp-hero{padding-top:32px;padding-bottom:35px}.sp-eyebrow{font-size:8px;gap:12px;margin-bottom:24px}.sp-eyebrow>span+span{padding-left:12px}.sp-hero .sp-eyebrow{margin-bottom:30px}.sp-hero h1{font-size:57px}.sp-hero-copy{padding-top:6px;padding-bottom:15px}.sp-relaunch .sp-lead{font-size:16px;margin-top:23px}.sp-actions{gap:10px;margin-top:25px}.sp-button{padding:13px 17px;gap:18px;font-size:12px;min-height:47px}.sp-hero-visual{height:370px}.sp-floating-note{left:14px;right:14px;bottom:20px;padding:15px;gap:12px}.sp-floating-note strong{font-size:15px}.sp-floating-note small{font-size:10px}.sp-art-label{font-size:8px;top:18px;left:18px;right:18px}.sp-proof{font-size:10px;gap:15px}.sp-proof span{gap:7px}.sp-proof b{font-size:18px}.sp-rail{width:100%;padding:17px 18px;font-size:9px}.sp-section{padding-block:60px}.sp-section-heading{margin-bottom:35px}.sp-relaunch h2{font-size:39px}.sp-relaunch h3{font-size:25px}.sp-relaunch p{font-size:15px}.sp-section-heading>p{font-size:15px}.sp-duo{grid-template-columns:1fr;gap:30px}.sp-feature-copy{padding:0}.sp-feature-copy h3{font-size:31px}.sp-checks{font-size:13px}.sp-visual-panel{padding:33px 27px}.sp-conversation{padding:23px}.sp-message{font-size:13px}.sp-thinking{font-size:10px}.sp-confidence{font-size:9px}.sp-conversation .sp-caption{font-size:8px}.sp-conversation-top .sp-pill{font-size:9px}.sp-conversation-top strong{font-size:15px}.sp-conversation-top small{font-size:10px}.sp-link{font-size:13px;margin-top:5px}.sp-dark .sp-duo{gap:20px}.sp-map{max-width:420px;width:100%;margin:auto;padding-top:20px}.sp-map-sources>span{width:90px}.sp-three,.sp-two{grid-template-columns:1fr;gap:24px}.sp-dark-features{gap:15px;margin-top:35px;padding-top:20px}.sp-dark-features article{border-bottom:1px solid var(--hairline);padding-bottom:15px}.sp-dark-features h3{margin-top:12px}.sp-dark-features p{margin-block:12px}.sp-procedure-row{grid-template-columns:20px 88px 1fr;gap:10px;padding:19px 16px}.sp-procedure-row>b{font-size:8px}.sp-procedure-row>p{font-size:12px}.sp-product-stage{margin-top:35px;padding:15px;margin-inline:-3px}.sp-window{font-size:8px;padding:12px 14px}.sp-screenshot figcaption{font-size:9px;padding:10px 13px}.sp-security-art .sp-art{aspect-ratio:1.25}.sp-tint .sp-duo>.sp-security-art{order:2}.sp-art{aspect-ratio:1.25}.sp-start-cards{gap:32px}.sp-mini-art{height:190px}.sp-mini-connect>span{width:65px;height:72px;font-size:35px}.sp-mini-review>div{font-size:12px}.sp-start-cards .sp-eyebrow{margin-top:20px;margin-bottom:12px}.sp-start-cards p{max-width:none;margin-top:12px}.sp-faq{grid-template-columns:1fr;gap:30px}.sp-faq summary{font-size:15px;padding-block:20px}.sp-faq details p{font-size:14px;margin-right:0}footer.site{padding:60px 0 36px}.sp-foot-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 20px}.sp-foot-mark img{width:min(240px,74vw)}footer.site .sp-foot-head{font-size:16px}footer.site a{font-size:13px}.sp-page-hero{padding-top:45px}.sp-page-hero h1{font-size:57px}.sp-page-hero>.sp-screenshot{margin-top:35px}.sp-filters{gap:7px}.sp-filters button{font-size:12px;padding:8px 14px}.sp-search{width:100%}.sp-search input{width:100%}.sp-connector-card{padding:28px;min-height:270px}.sp-connector-card h3{font-size:26px}.sp-connector-icon{margin-bottom:23px}.sp-dataflow{gap:10px}.sp-dataflow>div{padding:16px}.sp-dataflow strong{font-size:20px}.sp-dataflow small{font-size:10px}.sp-trust-doc{padding:25px;transform:rotate(1deg)}.sp-trust-doc h3{font-size:27px}.sp-pricing{padding-top:20px}.sp-plan{padding:30px}.sp-plan-featured{padding:29px}.sp-plan h2{font-size:72px}.sp-plan h3{font-size:24px}.sp-plan .sp-checks{font-size:14px}.sp-plan-top small{display:block;font-size:9px}.sp-plan .sp-button{font-size:14px}.sp-payment p{min-width:220px}.sp-onboarding-preview{grid-template-columns:1fr}.sp-onboarding-side{display:none}.sp-onboarding-content{padding:25px 20px}.sp-onboarding-content h2{font-size:33px}.sp-checklist a{padding:17px 12px}.sp-demo-stage{grid-template-columns:1fr;padding:30px 20px;gap:25px}.sp-demo-context h2{font-size:36px}.sp-demo-tabs button{font-size:12px;padding:9px 14px}.sp-signup{padding-top:35px}.sp-signup-aside h1{font-size:49px}.sp-wizard{padding:26px 20px}.sp-wizard-progress{gap:8px;margin-bottom:35px}.sp-wizard-progress li span{font-size:9px}.sp-wizard legend{font-size:29px}.sp-wizard .sp-choices label{font-size:11px;padding:14px 10px}.sp-input-suffix>span{font-size:10px}.sp-consent{font-size:10px}.sp-payment-note{gap:20px}.sp-payment-note p{font-size:10px!important}.sp-wizard-actions{gap:10px}.sp-wizard-actions .sp-button{font-size:12px;padding:13px 15px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.sp-button:hover,.sp-connector-card:hover{transform:none}}

.sp-summary dl {display:block}.sp-summary dl>div{display:grid;grid-template-columns:110px 1fr;gap:15px;padding:7px 0;border-bottom:1px solid var(--hairline)}.sp-summary dl>div:last-child{border-bottom:0}

/* Override legacy horizontal padding: the relaunch grid owns its gutters. */
.sp-relaunch .wrap, header.site>.wrap, footer.site>.wrap{padding-inline:0}
@media(max-width:860px){.sp-relaunch .sp-rail{padding-inline:20px}}
/* Product photography composition: desktop screen in crop, lifted details. */
.sp-screenshot{border:0;background:transparent;overflow:visible;border-radius:0}
.sp-desktop-scene{position:relative;height:610px;overflow:hidden;border-radius:7px;background:#a2b5e0}
/* The decorative backdrop is heavy and far below the fold: relaunch.js adds
   .sp-bg-ready when the scene approaches the viewport, so the bytes never
   compete with the first paint. Without JS the flat tint stays. */
.sp-desktop-scene.sp-bg-ready{background:#a2b5e0 url('relaunch/connected-forms.webp') center/cover}
.sp-desktop-scene::before{content:'';position:absolute;inset:0;background:#8ca5dc33}
.sp-scene-label{position:absolute;left:26px;top:24px;font:9px var(--mono);letter-spacing:.1em;color:#25314d;z-index:1}
.sp-desktop{position:absolute;left:6%;top:90px;width:85%;border:9px solid #1c2029;border-radius:15px;background:#1c2029;box-shadow:0 30px 65px #1c212b33}
.sp-desktop-bezel{height:10px;display:grid;place-items:center;background:#1c2029;padding-bottom:8px}
.sp-desktop-bezel>span{width:4px;height:4px;background:#47526a;border-radius:50%}
.sp-desktop-toolbar{display:flex;justify-content:space-between;gap:15px;padding:12px 18px;color:#566380;background:#f6f8fc;font:9px var(--mono);border-radius:4px 4px 0 0}
.sp-desktop-screen{height:410px;overflow:hidden;background:#f6f8fc}
.sp-desktop-screen img{display:block;width:112%;max-width:none;height:auto;object-fit:initial;object-position:top left}
.sp-desktop-chin{height:25px;background:#1c2029;color:#8c98b3;font-size:8px;display:grid;place-items:center;letter-spacing:.04em}
.sp-desktop-stand{position:absolute;top:100%;left:40%;width:20%;height:80px;background:#46516a;clip-path:polygon(25% 0,75% 0,85% 88%,100% 95%,100% 100%,0 100%,0 95%,15% 88%)}
.sp-screen-detail{position:absolute;z-index:3;top:55px;right:3%;width:345px;padding:26px;background:#ffffff;border:1px solid #ced4e2;border-radius:8px;box-shadow:0 25px 55px #222b4026;color:#10264d;transform:rotate(1deg)}
.sp-screen-detail>div:first-child{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:500}
.sp-screen-detail>div:first-child>span:last-child{margin-left:auto;font-size:18px;font-weight:400;color:#204bc0}
.sp-screen-detail small{display:block;font-size:9px;color:#525f7c;font-weight:400;margin-top:2px}
.sp-screen-detail .sp-avatar{width:33px;height:33px;font-size:19px;border-radius:8px}
.sp-screen-detail h3{font-size:26px;margin-top:24px;line-height:1.2;letter-spacing:-.035em}
.sp-screen-detail p{font:11px var(--mono);margin:22px 0 16px;color:#48546d}
.sp-detail-source{border-top:1px solid #cad0de;padding-top:15px;color:#54617e;font-size:11px}
.sp-screen-status{position:absolute;z-index:4;top:350px;right:6%;display:flex;align-items:center;gap:14px;background:#ffffff;border:1px solid #cad0de;border-radius:7px;padding:22px 25px;box-shadow:0 20px 45px #222b4020;min-width:310px;transform:rotate(-1deg);color:#10264d}
.sp-screen-status>span{width:31px;height:31px;display:grid;place-items:center;background:#e4ebdf;border-radius:50%;color:#386348}
.sp-screen-status strong{font-size:14px;font-weight:500}.sp-screen-status small{display:block;color:#525f7c;font-size:10px;margin-top:3px}
.sp-scene-corner{position:absolute;left:24px;bottom:24px;width:9px;height:9px;background:#ffffffa0}
.sp-screenshot figcaption{padding:13px 0;font-size:10px}
.sp-product-stage{background:none;padding:0;margin-top:65px}
@media(max-width:1100px){.sp-desktop-scene{height:550px}.sp-screen-detail{width:290px;padding:22px}.sp-screen-detail h3{font-size:24px}.sp-screen-status{min-width:270px;right:4%}.sp-desktop{left:5%;width:87%}}
@media(max-width:860px){.sp-desktop-scene{height:510px}.sp-screen-detail{width:255px;padding:20px;top:70px}.sp-screen-detail h3{font-size:23px}.sp-screen-status{top:340px;padding:18px;min-width:260px}.sp-desktop-screen{height:360px}}
@media(max-width:600px){.sp-desktop-scene{height:410px;border-radius:6px}.sp-scene-label{font-size:7px;left:17px;top:18px}.sp-desktop{left:5%;top:80px;width:143%;border-width:6px;border-radius:11px}.sp-desktop-screen{height:250px}.sp-desktop-screen img{width:110%}.sp-desktop-toolbar{font-size:7px;padding:8px 12px}.sp-desktop-bezel{height:7px;padding-bottom:5px}.sp-desktop-chin{height:20px}.sp-screen-detail{width:200px;top:42px;right:13px;padding:15px}.sp-screen-detail>div:first-child{font-size:11px;gap:7px}.sp-screen-detail small{font-size:8px}.sp-screen-detail .sp-avatar{width:25px;height:25px;font-size:16px;border-radius:6px}.sp-screen-detail h3{font-size:22px;margin-top:16px}.sp-screen-detail p{font-size:8px;margin:16px 0 12px}.sp-detail-source{font-size:9px;padding-top:10px}.sp-screen-status{top:285px;right:15px;min-width:0;width:230px;padding:16px 13px;gap:10px}.sp-screen-status strong{font-size:11px}.sp-screen-status small{font-size:8px}.sp-screen-status>span{width:25px;height:25px;font-size:12px}.sp-screenshot figcaption{font-size:8px}.sp-product-stage{padding:0;margin-top:35px}.sp-scene-corner{left:17px;bottom:18px;width:7px;height:7px}}
.sp-map-center{position:relative;margin-top:45px}.sp-map-center .sp-map-core{margin-top:0}
.sp-map-request{position:absolute;left:0;top:50%;transform:translateY(-50%);width:130px;border:1px solid #6578a3;background:#d6dff4;border-radius:8px;padding:15px 10px;display:flex;flex-direction:column;gap:7px;align-items:center;text-align:center;color:#212a3e}
.sp-map-request>span{font-size:23px;line-height:1}.sp-map-request>strong{font:10px var(--mono);font-weight:500}.sp-map-request>b{position:absolute;left:100%;top:50%;transform:translateY(-50%);width:26px;color:#ffb400;font-size:22px;font-weight:400}
@media(max-width:1100px){.sp-map-request{width:102px;padding:13px 7px}.sp-map-request>strong{font-size:8px}.sp-map-core{width:140px}}
@media(min-width:601px) and (max-width:860px){.sp-map-request{width:82px;left:-12px}.sp-map-request>strong{font-size:7px}.sp-map-core{width:116px;padding:21px 12px}.sp-map-core span{font-size:13px}.sp-map-core b{font-size:39px}.sp-map-request>b{width:17px;font-size:17px}}
@media(max-width:600px){.sp-map-request{width:88px;left:-5px}.sp-map-request>strong{font-size:8px}.sp-map-core{width:125px}.sp-map-request>b{width:20px;font-size:20px}}
/* Match the actual generated header, including its outer sticky height. */
header.site{height:88px}header.site>.wrap{width:calc(100% - 96px)}
@media(max-width:1100px){header.site>.wrap{width:calc(100% - 56px)}}
@media(max-width:860px){header.site{height:72px}header.site>.wrap{width:calc(100% - 40px)}}
@media(max-width:600px){header.site>.wrap{width:calc(100% - 36px)}}
/* The request is a real incoming edge, also on narrow displays. */
.sp-map-center{--node-size:165px;--request-size:130px}
.sp-map-center .sp-map-core{width:var(--node-size)}
.sp-map-center .sp-map-request{left:0;width:var(--request-size)}
.sp-map-request>b{display:none}
.sp-map-center::before{content:'';position:absolute;left:var(--request-size);right:calc(50% + var(--node-size)/2);top:50%;border-top:1px solid #ffb400}
.sp-map-center::after{content:'';position:absolute;left:calc(50% - var(--node-size)/2 - 6px);top:calc(50% - 3px);width:6px;height:6px;border-right:1px solid #ffb400;border-top:1px solid #ffb400;transform:rotate(45deg)}
@media(max-width:1100px){.sp-map-center{--node-size:140px;--request-size:102px}}
@media(min-width:601px) and (max-width:860px){.sp-map-center{--node-size:110px;--request-size:70px}}
@media(max-width:600px){.sp-map-center{--node-size:125px;--request-size:88px}}
@media(max-width:360px){.sp-map-center{--node-size:110px;--request-size:64px}.sp-map-request>strong{font-size:7px}.sp-map-core span{font-size:12px}.sp-map-core b{font-size:39px}header.site .brand img{width:130px}header.site nav a.cta{font-size:10px;padding:9px 10px}.sp-hero h1{font-size:49px}.sp-wizard{padding-inline:15px}.sp-input-suffix{padding-right:7px}.sp-input-suffix>span{font-size:9px}}

/* Revision 02 — a framed blue-and-yellow world. */
:root,:root[data-theme="light"]{--canvas:#fff;--surface-1:#fff;--surface-2:#edf2fc;--inset:#edf2fc;--ink:#10264d;--ink-muted:#52627b;--ink-faint:#52627b;--accent:#2455d6;--accent-hover:#1c43ae;--accent-edge:#2455d6;--accent-text:#2455d6;--yellow:#ffb400;--yellow-edge:#b77000;--yellow-hover:#e69900;--hairline:#d6deec;--foot-ground-1:#ffffff;--foot-ground-2:#f9fbff;--foot-ground-3:#f4f7fd;--foot-ground-4:#eff4fc;--foot-ground-5:#edf2fc;--foot-ground-6:#e8effb;--foot-glow-warm:#ffb40000;--foot-glow-cool:#2455d600;--display:'Outfit',sans-serif}
:root[data-theme="dark"]{--canvas:#0c1b35;--surface-1:#142848;--surface-2:#1b3358;--inset:#1b3358;--ink:#f6f8fc;--ink-muted:#b9c9e5;--ink-faint:#b9c9e5;--accent:#ffb400;--accent-hover:#ffc331;--accent-text:#a7c0ff;--accent-edge:#ffb400;--on-accent:#10264d;--yellow-edge:var(--yellow);--yellow-hover:#ffc331;--hairline:#38517d;--hairline-strong:#6680aa;--foot-ground-1:#0c1b35;--foot-ground-2:#0e1e39;--foot-ground-3:#12213a;--foot-ground-4:#112544;--foot-ground-5:#123057;--foot-ground-6:#153c70;--foot-glow-warm:#ffb4000f;--foot-glow-cool:#2455d61a;--display:'Outfit',sans-serif}
body.sp-relaunch{background:var(--canvas)}
.sp-relaunch main{max-width:1280px;width:calc(100% - 64px);margin-inline:auto;background:var(--canvas)}
.wrap{max-width:1120px;width:calc(100% - 96px)}
header.site{border:0;background:var(--canvas)}
header.site>.wrap{max-width:1120px;width:calc(100% - 160px);gap:24px;border-bottom:1px solid var(--hairline)}
header.site .brand img{width:188px}
header.site nav{gap:17px;font-size:13px}
header.site nav .links{gap:21px}
/* The yellow is the Wortmarke's own #ffb400, so the button and the logo
   speak one colour. A light fill needs a DRAWN edge: WCAG 1.4.11 asks 3:1
   between a control and its background, and this yellow on the white
   canvas is 1.78:1 - the label is a comfortable 8.4:1, but the button's
   SHAPE would dissolve for anyone with low vision. --yellow-edge is
   #b77000, 3.94:1 on white, and it is one of the traced logo's own
   shadow tones rather than a colour invented next to it. On navy the
   fill is already 9.6:1, so there the edge is the fill. */
header.site nav a.cta{background:var(--yellow);border:1px solid var(--yellow-edge);color:#10264d;border-radius:6px;font-weight:500}
header.site nav a.cta:hover{background:var(--yellow-hover);border-color:var(--yellow-hover)}
header.site nav .cta:hover{background:#ffc331;border-color:#ffc331;color:#10264d}
.sp-relaunch h1,.sp-relaunch h2{font-weight:500;letter-spacing:-.052em}
.sp-relaunch h1 em{font-family:var(--sans);font-style:normal;font-weight:500;letter-spacing:inherit;color:var(--accent-text)}
.sp-relaunch h2 span{color:var(--accent-text)}
.sp-relaunch h3{font-weight:500}
.sp-button{border-radius:6px;font-weight:500;gap:24px}
.sp-home-hero{text-align:center;padding-top:70px}
.sp-home-hero>.sp-eyebrow{justify-content:center;margin-bottom:25px}
.sp-home-hero h1{font-size:clamp(50px,5.2vw,76px);line-height:1.08;letter-spacing:-.055em;margin-inline:-15px}
.sp-home-hero>.sp-lead{max-width:610px;margin:25px auto 0;font-size:18px}
.sp-home-hero>.sp-actions{justify-content:center;margin-top:27px;margin-bottom:42px}
.sp-hero-scene{height:510px;position:relative;isolation:isolate;border-radius:10px;overflow:hidden;background:#e8eef8;text-align:left}
.sp-hero-scene>img{width:100%;height:100%;object-fit:cover;object-position:center 48%;display:block}
.sp-hero-scene-label{position:absolute;left:26px;top:23px;font:10px var(--mono);letter-spacing:.11em;color:#17345e;display:flex;gap:24px}
.sp-hero-conversation{position:absolute;width:385px;right:35px;top:45px}
.sp-hero-conversation .sp-conversation{padding:23px;transform:rotate(2deg);box-shadow:0 25px 60px #10264d24}
.sp-hero-conversation .sp-message{font-size:12px;padding:13px 16px;margin-block:18px}
.sp-hero-operator{position:absolute;bottom:30px;left:28px;display:flex;align-items:center;gap:13px;background:#fff;padding:17px 21px;border-radius:8px;border:1px solid #d6deec;box-shadow:0 15px 40px #10264d18;color:#10264d;transform:rotate(-2deg)}
.sp-hero-operator strong{font-size:14px;font-weight:500}.sp-hero-operator small{display:block;font-size:11px;color:#52627b;margin-top:3px}.sp-hero-operator>span:last-child{margin-left:12px;color:#326549}
.sp-operator-symbol{display:grid;place-items:center;flex:none;background:#ffb400;color:#17345e;border-radius:10px;width:39px;height:39px;font-size:28px;line-height:1}
.sp-proof{padding:27px 0;margin-top:5px;border-bottom:0;font-size:12px}
.sp-rail{top:88px;background:var(--canvas);border-top:1px solid var(--hairline);font-size:10px;gap:12px}
.sp-section{padding-block:94px}
.sp-section-heading{margin-bottom:44px}
.sp-duo{gap:64px}
.sp-relaunch h2{font-size:clamp(35px,3.7vw,53px);line-height:1.1}
.sp-relaunch p{font-size:16px;line-height:1.65}
.sp-feature-copy p{max-width:430px}
.sp-feature-section+.sp-feature-section{border-top:1px solid var(--hairline)}
.sp-feature-section:nth-of-type(even) .sp-feature-copy{order:2}
.sp-feature-section:nth-of-type(even) .sp-feature-visual{order:1}
.sp-feature-visual{min-width:0}
.sp-visual-panel{padding:35px 28px;min-height:410px;display:flex;align-items:center}
.sp-peach{background:#e8eefb;background-image:none}
.sp-conversation{transform:none;box-shadow:0 16px 45px #16376c12}
.sp-avatar{background:#2455d6;color:#fff}
.sp-operator-band{background:#edf2fc;border-radius:10px}
.sp-operator-console{background:#fff;color:#10264d;border:1px solid #cfdaee;border-radius:12px;box-shadow:0 25px 60px #15316d12;transform:rotate(-1.5deg);padding:28px;position:relative}
.sp-console-top{display:flex;gap:12px;align-items:center;padding-bottom:20px;border-bottom:1px solid #e2e9f4}
.sp-console-top strong{font-size:18px;font-weight:500}.sp-console-status{margin-left:auto;font:9px var(--mono);color:#41634d}
.sp-operator-request{background:#edf2fc;margin:22px 0;padding:18px;font-size:15px;line-height:1.5;border-radius:7px}
.sp-operator-tasks>div{display:flex;align-items:center;gap:11px;padding:10px 0;font-size:13px;color:#52627b}.sp-operator-tasks span{color:#2455d6}
.sp-operator-ready{background:#fff5d0;border:1px solid #ebd687;margin-top:20px;border-radius:7px;padding:16px;display:flex;align-items:center;gap:14px}.sp-operator-ready>span{font-size:28px}.sp-operator-ready strong{font-weight:500;font-size:15px}.sp-operator-ready small{display:block;color:#52627b;font-size:11px;margin-top:3px}
.sp-operator-console .sp-caption{margin:15px 0 0;color:#52627b;font-size:9px}
.sp-dark{background:#142e63;border-radius:10px;--ink:#f6f8fc;--ink-muted:#b9c9e5;--accent-text:#ffb400;--hairline:#38517d;--canvas:#142e63;--inset:#24437b}
.sp-dark .sp-eyebrow>span:first-child{color:#ffb400}
.sp-dark .sp-button{background:#ffb400;border-color:#ffb400;color:#10264d}
.sp-dark .sp-button:hover{background:#ffc331}
.sp-tint{background:var(--surface-2);border-radius:10px}
.sp-map-sources>span{background:#24437b;border-color:#4b69a1;color:#ffb400}
.sp-map-sources small{color:#cedcf6}.sp-map-lines{border-color:#6987be}.sp-map-lines::before,.sp-map-line{border-color:#6987be}
.sp-map-core{background:#2455d6;border-color:#779aff;box-shadow:0 12px 45px #0002}.sp-map-core b{color:#ffb400}.sp-map-core span{color:#fff}
.sp-map-request{background:#ffb400;border-color:#ffb400;color:#10264d}.sp-map-result{border-color:#6987be;color:#f0f5ff}
.sp-map-center{--node-size:135px;--request-size:94px}
.sp-mini-workflow{min-height:370px;padding:38px 32px;border-radius:10px;background:#e8eefb;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden;color:#10264d}
.sp-mini-workflow::before{content:'';position:absolute;width:180px;height:180px;right:-70px;top:-80px;border:34px solid #d4e1ff;border-radius:50%;pointer-events:none}
.sp-mini-workflow-title{display:flex;align-items:center;gap:13px;font-size:14px;font-weight:500;margin-bottom:25px;z-index:1}
.sp-mini-workflow-row{padding:15px 18px;display:flex;gap:15px;align-items:center;margin-bottom:8px;background:#fff;border:1px solid #d5dff0;border-radius:7px;font-size:13px;z-index:1;box-shadow:0 6px 20px #19386405}
.sp-mini-workflow-row>b{color:#2455d6;font-size:23px;line-height:1.3;min-width:25px;font-weight:500}.sp-mini-workflow-row:nth-of-type(3){margin-left:12px}.sp-mini-workflow>small{font-size:9px;color:#52627b;margin-top:17px}
.sp-mini-score .sp-mini-workflow-row:nth-child(2)>b{font-size:43px}.sp-mini-updates .sp-mini-workflow-row:nth-child(2){color:#6b7587;text-decoration:line-through}.sp-mini-updates .sp-mini-workflow-row:nth-child(3){background:#eaf4e9}
.sp-mini-connect{background:#e8eefb}.sp-mini-connect>span{color:#2455d6;border-color:#cbd9f2}.sp-mini-review{background:#fff3c5}.sp-mini-autonomy{background:#2455d6;color:#ffb400}
.sp-operator-intro{padding-top:20px;padding-bottom:65px}.sp-operator-intro .sp-art{aspect-ratio:1.15}.sp-operator-intro .sp-duo{gap:45px}
.sp-operator-index{display:flex;flex-wrap:wrap;gap:12px 25px;padding-block:27px;border-block:1px solid var(--hairline)}.sp-operator-index a{font:10px var(--mono);text-decoration:none;color:var(--ink-muted);line-height:1.6}.sp-operator-index a:hover{color:var(--accent-text)}
.sp-workspace-section{padding-top:10px}
.sp-page-hero{padding-top:70px}.sp-page-hero h1{font-size:clamp(53px,6.2vw,85px)}
.sp-onboarding-side{background:#142e63}.sp-onboarding-side p{color:#b9c9e5}
.sp-plan-featured{background:var(--surface-2);position:relative;border-color:#2455d6}.sp-plan-featured .sp-plan-top small{background:#ffb400;color:#10264d;padding:6px 8px;border-radius:3px}
.sp-plan{padding:26px}.sp-plan-featured{padding:25px}.sp-plan-top{gap:5px}.sp-plan-top small{font-size:7px}
.sp-trust-doc{background:#1e3c73;border-color:#5877ad}.sp-trust-doc>span{color:#ffb400}
footer.site>.wrap{max-width:1120px;width:calc(100% - 160px)}
:root[data-theme="dark"] .sp-operator-band{background:#1b3358}
@media(max-width:1100px){
 header.site>.wrap,footer.site>.wrap{width:calc(100% - 80px)}
 header.site nav .links{gap:13px}header.site nav{gap:13px;font-size:12px}header.site .brand img{width:160px}
 .wrap{width:calc(100% - 64px)}.sp-duo{gap:38px}.sp-map-center{--node-size:125px;--request-size:80px}.sp-map-core{padding:22px 14px}.sp-map-core span{font-size:13px}
 .sp-hero-conversation{right:24px;width:350px}.sp-hero-operator{max-width:360px;left:22px;font-size:12px}.sp-hero-operator strong{font-size:12px}
 .sp-relaunch h2{font-size:42px}.sp-mini-workflow{padding:30px 23px}.sp-operator-console{padding:23px}
}
@media(max-width:900px){header.site nav .links{gap:10px}header.site nav{gap:10px}header.site>.wrap{gap:18px}.sp-map-center{--node-size:110px;--request-size:68px}.sp-map-request>strong{font-size:7px}}
@media(max-width:860px){
 header.site>.wrap,footer.site>.wrap{width:calc(100% - 56px)}header.site .brand img{width:176px}header.site nav{font-size:14px}
 .sp-relaunch main{width:calc(100% - 32px)}.wrap{width:calc(100% - 48px)}
 .sp-home-hero{padding-top:52px}.sp-home-hero h1{font-size:clamp(44px,6.8vw,58px);margin-inline:0}.sp-home-hero>.sp-lead{font-size:17px}
 .sp-hero-scene{height:535px}.sp-hero-conversation{right:20px;top:45px;width:330px}.sp-hero-operator{bottom:24px}
 .sp-section{padding-block:72px}.sp-duo{gap:30px}.sp-relaunch h2{font-size:35px}.sp-relaunch p{font-size:15px}
 .sp-feature-section>.sp-duo,.sp-operator-band>.sp-duo,.sp-operator-intro>.sp-duo{grid-template-columns:1fr}.sp-feature-section .sp-feature-copy,.sp-feature-section .sp-feature-visual{order:initial!important}.sp-feature-copy p{max-width:520px}
 .sp-feature-visual{width:100%}.sp-mini-workflow{min-height:340px;padding:35px 50px}.sp-visual-panel{padding:35px}.sp-operator-console{max-width:560px;width:100%;margin:auto}
 .sp-operator-intro .sp-art{max-height:350px;aspect-ratio:1.7}.sp-rail{top:72px;font-size:9px}
 .sp-plan{padding:20px}.sp-plan-featured{padding:19px}.sp-plan-top{flex-wrap:wrap}
}
@media(max-width:600px){
 .sp-relaunch main{width:calc(100% - 20px)}.wrap{width:calc(100% - 32px)}
 header.site>.wrap,footer.site>.wrap{width:calc(100% - 40px)}header.site .brand img{width:153px}header.site nav a.cta{font-size:11px;padding:10px 12px}
 .sp-home-hero{padding-top:38px}.sp-home-hero h1{font-size:43px;line-height:1.08;letter-spacing:-.053em}.sp-home-hero h1 br{display:none}.sp-home-hero>.sp-eyebrow{font-size:8px;gap:12px}.sp-home-hero>.sp-eyebrow>span+span{padding-left:12px}.sp-home-hero>.sp-lead{font-size:15px;line-height:1.6;margin-top:23px}.sp-home-hero>.sp-actions{margin-top:23px;margin-bottom:28px;gap:8px}.sp-home-hero .sp-button{font-size:12px;padding:12px 14px;gap:15px;min-height:46px}
 .sp-hero-scene{height:590px}.sp-hero-scene>img{height:290px;object-fit:cover;object-position:50% 45%}.sp-hero-scene-label{font-size:8px;top:18px;left:18px}.sp-hero-conversation{top:198px;right:17px;left:17px;width:auto}.sp-hero-conversation .sp-conversation{padding:19px;transform:rotate(1deg)}.sp-hero-conversation .sp-message{font-size:11px;margin-block:15px;padding:12px 14px}.sp-hero-conversation .sp-conversation-top{padding-bottom:15px}.sp-hero-conversation .sp-conversation-top strong{font-size:14px}.sp-hero-conversation .sp-thinking{font-size:9px}.sp-hero-conversation .sp-confidence{font-size:8px}.sp-hero-conversation .sp-caption{font-size:8px}
 .sp-hero-operator{bottom:17px;left:17px;right:17px;padding:13px 12px;gap:9px;transform:none}.sp-hero-operator strong{font-size:11px}.sp-hero-operator small{font-size:9px}.sp-hero-operator .sp-operator-symbol{width:29px;height:29px;font-size:22px}.sp-hero-operator>span:last-child{margin-left:auto}
 .sp-proof{grid-template-columns:1fr 1fr;gap:17px 10px;padding-block:26px;font-size:10px}.sp-proof span{justify-content:flex-start;gap:7px}.sp-proof b{font-size:17px}
 .sp-section{padding-block:58px}.sp-rail{width:calc(100% - 32px);overflow:auto;justify-content:flex-start;gap:23px;padding-block:16px;scrollbar-width:none;font-size:9px}
 .sp-duo{grid-template-columns:1fr;gap:30px}.sp-relaunch h2{font-size:35px}.sp-relaunch h3{font-size:25px}.sp-feature-copy h3{font-size:31px}.sp-eyebrow{font-size:8px;gap:14px;margin-bottom:21px}
 .sp-mini-workflow{padding:28px 22px;min-height:320px}.sp-mini-workflow-title{font-size:12px;gap:10px}.sp-mini-workflow-row{padding:13px 12px;font-size:11px;gap:10px}.sp-mini-workflow-row>b{font-size:20px}.sp-visual-panel{padding:28px 17px;min-height:0}
 .sp-map-center{--node-size:115px;--request-size:80px}.sp-map-request>strong{font-size:7px}.sp-map-sources{gap:18px}.sp-map-sources>span{width:88px;font-size:26px}.sp-map-sources small{font-size:9px}
 .sp-operator-console{padding:20px;transform:none}.sp-console-status{font-size:8px}.sp-operator-request{font-size:13px}.sp-operator-tasks>div{font-size:12px}.sp-operator-index{gap:12px 18px}.sp-operator-index a{font-size:8px}
 .sp-page-hero{padding-top:42px}.sp-page-hero h1{font-size:49px}.sp-page-hero>.sp-lead{font-size:16px}.sp-operator-intro{padding-top:15px}.sp-operator-intro .sp-art{aspect-ratio:1.4}
 .sp-workspace-section{padding-top:10px}
 .sp-plan{padding:27px}.sp-plan-featured{padding:26px}.sp-plan-top small{font-size:8px}.sp-section-heading{margin-bottom:30px}
}
@media(max-width:360px){header.site .brand img{width:132px}header.site nav a.cta{font-size:10px;padding:9px}.sp-home-hero h1{font-size:37px}.sp-home-hero>.sp-eyebrow{font-size:7px;gap:9px}.sp-map-center{--node-size:100px;--request-size:63px}.sp-map-core span{font-size:11px}.sp-hero-scene{height:610px}.sp-hero-operator strong{font-size:10px}.sp-page-hero h1{font-size:43px}.sp-home-hero .sp-button{font-size:11px;gap:10px}.sp-mini-workflow{padding:25px 16px}}
/* Motion is a progressive enhancement; no hidden-by-default content. */
.sp-relaunch h2 [data-line],.sp-relaunch h2 [data-mask]{color:inherit}
.sp-button>span,.sp-link>span{transition:transform .3s cubic-bezier(.22,1,.36,1)}
.sp-button:hover>span,.sp-link:hover>span{transform:translate(3px,-3px)}
.sp-start-cards .sp-mini-connect>span{transition:transform .65s cubic-bezier(.22,1,.36,1)}
.sp-start-cards article:hover .sp-mini-connect>span:first-child{transform:translate(4px,-8px) rotate(0)}
.sp-start-cards article:hover .sp-mini-connect>span:last-child{transform:translate(-4px,5px) rotate(0)}
.sp-operator-index a{transition:color .2s}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
 .sp-button:hover,.sp-connector-card:hover{transform:none}
}
@media print{.sp-relaunch main{width:100%;max-width:none}header.site,.sp-rail{position:static}.sp-relaunch [data-line],.sp-relaunch [data-mask]{transform:none!important;opacity:1!important;clip-path:none!important}}
.sp-autopilot-visual{position:relative;background:#10264d;border-radius:10px;overflow:hidden;min-height:400px}
.sp-autopilot-visual>.sp-art{height:400px;aspect-ratio:auto;object-fit:cover;border-radius:0}
.sp-autopilot-label{position:absolute;bottom:20px;left:20px;right:20px;border:1px solid #456097;border-radius:7px;padding:17px 18px;display:flex;align-items:center;gap:13px;background:#10264d;color:#ffb400}
.sp-autopilot-label>span{font-size:28px;line-height:1}.sp-autopilot-label strong{font:10px var(--mono);letter-spacing:.13em}.sp-autopilot-label small{display:block;font-size:11px;color:#e0e9fa;margin-top:4px}
@media(max-width:600px){.sp-autopilot-visual{min-height:330px}.sp-autopilot-visual>.sp-art{height:330px}.sp-autopilot-label{left:15px;right:15px;bottom:15px;padding:13px}.sp-autopilot-label small{font-size:9px}}
/* A distinct layered hero composition for every product chapter. */
.sp-page-hero{position:relative;padding-top:65px;padding-bottom:35px}
.sp-page-hero-layout{display:grid;grid-template-columns:1.15fr 1fr;gap:48px;align-items:center;min-height:510px}
.sp-page-hero-copy{position:relative;z-index:2;min-width:0;padding-block:20px}
.sp-page-hero-copy h1{font-size:clamp(49px,5vw,69px);line-height:1.06;max-width:660px}
.sp-page-hero-copy>.sp-lead{font-size:17px;max-width:510px;line-height:1.6}
.sp-page-hero-copy .sp-eyebrow{font-size:8px;gap:12px}.sp-page-hero-copy .sp-eyebrow>span+span{padding-left:12px}
.sp-page-hero>.sp-screenshot{margin-top:55px}
.sp-hero-depth{height:460px;position:relative;isolation:isolate;perspective:1000px;min-width:0}
.sp-depth-layer{transform:translate3d(calc(var(--pointer-x,0)*var(--depth,12px)),calc(var(--pointer-y,0)*var(--depth,12px) + var(--scroll-depth,0)*var(--depth,12px)),0) rotate(var(--tilt,0deg));transform-origin:50% 50%}
.sp-depth-orbit{--depth:-13px;position:absolute;inset:5% -5% 7%;border:1px solid #d6e0f4;border-radius:50%;z-index:-2}
.sp-depth-orbit-two{--depth:-23px;inset:13% -14% 15%;--tilt:-28deg;border-radius:45%;border-style:dashed;opacity:.7}
.sp-depth-plinth{--depth:8px;--tilt:8deg;position:absolute;inset:17% 4% 8%;border-radius:14px;background:#e1eaff;border:1px solid #cddafa;z-index:-1}
.sp-depth-image{--depth:17px;--tilt:-5deg;position:absolute;inset:12% 3% 18%;border-radius:12px;box-shadow:0 28px 45px -20px #153b7c30;overflow:hidden;border:1px solid #d5e0f0;background:#e8eefb}
.sp-depth-image .sp-art{height:100%;width:100%;aspect-ratio:auto;object-fit:cover;border-radius:0}
.sp-depth-caption{--depth:10px;--tilt:-5deg;position:absolute;left:10%;top:17%;font:8px var(--mono);letter-spacing:.09em;color:#10264d;z-index:1}
.sp-depth-token{--depth:29px;--tilt:7deg;position:absolute;right:-1%;top:5%;width:91px;height:91px;border-radius:18px;border:1px solid #e4bd46;background:#ffb400;box-shadow:0 18px 30px -12px #15376b30;display:grid;place-items:center;font-size:38px;font-weight:500;letter-spacing:-.05em;color:#17345e}
.sp-depth-note{--depth:36px;--tilt:3deg;position:absolute;left:-4%;right:6%;bottom:10%;display:flex;gap:13px;align-items:center;padding:21px 19px;background:#fff;color:#10264d;border:1px solid #cfdaee;border-radius:8px;box-shadow:0 18px 35px -16px #15376b30}
.sp-depth-note>span{display:grid;place-items:center;border-radius:50%;background:#edf2fc;width:27px;height:27px;flex:none;font-size:12px;color:#2455d6}.sp-depth-note strong{display:block;font-size:13px;font-weight:500;line-height:1.4}.sp-depth-note small{display:block;font-size:10px;line-height:1.4;color:#52627b;margin-top:5px}
.sp-depth-footnote{position:absolute;bottom:0;right:2%;font:8px var(--mono);color:var(--ink-muted)}
.sp-depth-product .sp-depth-caption,.sp-depth-demo .sp-depth-caption{color:#e6edff}
.sp-depth-product .sp-depth-image{inset:9% 5% 14%;--tilt:4deg}.sp-depth-product .sp-depth-plinth{--tilt:-7deg;background:#fff2bb}.sp-depth-product .sp-depth-token{right:auto;left:-3%;top:9%;font-size:29px}
.sp-depth-operator .sp-depth-image{inset:11% 0% 11%;--tilt:0deg;border-radius:50%}.sp-depth-operator .sp-depth-plinth{border-radius:50%;inset:19% -1% 6%;--tilt:0deg;background:#fff3c5}.sp-depth-operator .sp-depth-token{right:-4%;top:14%;--tilt:-9deg}.sp-depth-operator .sp-depth-note{bottom:8%;--tilt:-3deg}.sp-depth-operator .sp-depth-caption{left:17%;top:20%;--tilt:0deg}
.sp-depth-integrations .sp-depth-image{--tilt:-9deg;inset:18% 2% 15%}.sp-depth-integrations .sp-depth-plinth{--tilt:11deg;background:#2455d6;inset:10% 8% 20%}.sp-depth-integrations .sp-depth-token{--tilt:10deg;top:9%;right:-3%}.sp-depth-integrations .sp-depth-note{--tilt:2deg;bottom:6%;left:-6%;right:2%}
.sp-depth-security .sp-depth-image{--tilt:0deg;inset:8% 6% 15%;border-radius:90px 90px 12px 12px}.sp-depth-security .sp-depth-plinth{--tilt:0deg;inset:3% 14% 21%;background:#ffb400;border-radius:100px 100px 12px 12px}.sp-depth-security .sp-depth-note{--tilt:0deg;bottom:9%;left:0;right:0}.sp-depth-security .sp-depth-caption{--tilt:0deg;left:18%;top:17%}.sp-depth-security .sp-depth-token{border-radius:50%;top:20%;right:-4%}
.sp-depth-pricing .sp-depth-image{--tilt:-7deg;inset:14% 3% 17%;border-radius:8px 80px 8px 8px}.sp-depth-pricing .sp-depth-plinth{--tilt:4deg;background:#fff0b5}.sp-depth-pricing .sp-depth-token{--tilt:4deg;border-radius:50%;top:7%;right:1%}
.sp-depth-onboarding .sp-depth-image{--tilt:5deg;inset:14% 6% 16%}.sp-depth-onboarding .sp-depth-plinth{--tilt:-8deg;background:#2455d6}.sp-depth-onboarding .sp-depth-token{--tilt:-8deg;left:-5%;right:auto;top:7%;font:28px var(--mono)}.sp-depth-onboarding .sp-depth-caption{--tilt:5deg;left:13%;top:19%}
.sp-depth-demo .sp-depth-image{--tilt:0deg;inset:9% 2% 16%;border-radius:50% 50% 10px 10px}.sp-depth-demo .sp-depth-plinth{--tilt:9deg;background:#fff0b5;inset:14% 8% 18%}.sp-depth-demo .sp-depth-note{--tilt:-4deg;left:-1%;right:5%}.sp-depth-demo .sp-depth-caption{--tilt:0deg;top:20%;left:19%}
.sp-depth-start .sp-depth-image{--tilt:-3deg;inset:12% 2% 15%}.sp-depth-start .sp-depth-token{right:-5%;top:13%;--tilt:5deg}.sp-depth-start .sp-depth-plinth{--tilt:6deg;background:#fff0b5}
.sp-signup-aside .sp-hero-depth{height:360px;margin-top:25px}.sp-depth-signup .sp-depth-image{--tilt:-4deg;inset:8% 5% 20%}.sp-depth-signup .sp-depth-token{width:65px;height:65px;font-size:30px}.sp-depth-signup .sp-depth-note{padding:16px;bottom:11%}
.sp-home-hero{position:relative;isolation:isolate}
.sp-home-orbit{position:absolute;width:440px;height:440px;border:1px solid #ffffff80;left:-170px;top:90px;border-radius:50%;z-index:1;pointer-events:none;transform:translate3d(calc(var(--pointer-x,0)*-9px),calc(var(--pointer-y,0)*-9px),0)}
.sp-hero-scene>img{transform:translate3d(calc(var(--pointer-x,0)*9px),calc(var(--pointer-y,0)*9px + var(--scroll-depth,0)*10px),0) scale(1.05)}
.sp-hero-conversation{transform:translate3d(calc(var(--pointer-x,0)*-16px),calc(var(--pointer-y,0)*-12px + var(--scroll-depth,0)*-16px),0)}
.sp-hero-operator{translate:calc(var(--pointer-x,0)*22px) calc(var(--pointer-y,0)*18px)}
@media(max-width:1100px){.sp-page-hero-layout{gap:35px;grid-template-columns:1.15fr 1fr}.sp-page-hero-copy h1{font-size:55px}.sp-hero-depth{height:410px}.sp-depth-note{padding:17px 14px;gap:10px}.sp-depth-note strong{font-size:12px}.sp-depth-note small{font-size:9px}.sp-depth-token{width:75px;height:75px;font-size:32px}.sp-page-hero-copy .sp-button{padding:13px 16px;gap:13px;font-size:12px}.sp-page-hero-copy .sp-eyebrow{font-size:7px;gap:8px}}
@media(max-width:860px){.sp-page-hero-layout{grid-template-columns:1fr;gap:0;min-height:0}.sp-page-hero-copy{max-width:650px}.sp-page-hero-copy h1{font-size:62px}.sp-hero-depth{width:70%;max-width:500px;margin:10px auto 0;height:430px}.sp-page-hero-copy .sp-eyebrow{font-size:9px;gap:14px}.sp-page-hero-copy .sp-button{font-size:14px;padding:14px 20px;gap:24px}.sp-page-hero>.sp-screenshot{margin-top:35px}.sp-signup-aside .sp-hero-depth{width:85%}}
@media(max-width:600px){.sp-page-hero{padding-top:28px;padding-bottom:20px}.sp-page-hero-copy h1{font-size:47px}.sp-page-hero-copy .sp-lead{font-size:15px}.sp-page-hero-copy .sp-eyebrow{font-size:7px;gap:9px}.sp-page-hero-copy .sp-eyebrow>span+span{padding-left:9px}.sp-page-hero-copy .sp-button{font-size:12px;padding:12px 14px;gap:15px}.sp-hero-depth{width:90%;height:355px;margin-top:5px}.sp-depth-token{width:64px;height:64px;border-radius:13px;font-size:29px}.sp-depth-note{padding:16px 13px}.sp-depth-note strong{font-size:11px}.sp-depth-note small{font-size:9px}.sp-depth-caption{font-size:7px}.sp-depth-product .sp-depth-token{font-size:22px}.sp-depth-footnote{font-size:7px}.sp-signup-aside .sp-hero-depth{height:315px;width:90%}.sp-home-orbit{display:none}}
@media(max-width:360px){.sp-page-hero-copy h1{font-size:42px}.sp-page-hero-copy .sp-button{font-size:11px;gap:10px}.sp-hero-depth{height:320px}.sp-depth-note strong{font-size:10px}.sp-depth-note small{font-size:8px}.sp-depth-caption{font-size:6px}}
@media(prefers-reduced-motion:reduce),(pointer:coarse){.sp-depth-layer{transform:rotate(var(--tilt,0deg))}.sp-hero-scene>img{transform:none}.sp-hero-conversation{transform:none}.sp-hero-operator{translate:none}}
/* Native light/dark product captures follow the explicit website theme. */
.sp-desktop-screen .sp-shot-dark{display:none}
.sp-desktop-screen .sp-shot-light{display:block}
:root[data-theme="dark"] .sp-desktop-screen .sp-shot-light{display:none}
:root[data-theme="dark"] .sp-desktop-screen .sp-shot-dark{display:block}
:root:not([data-theme="dark"]) .sp-desktop{background:#e5eaf2;border-color:#c7d1e0}
:root:not([data-theme="dark"]) .sp-desktop-bezel,:root:not([data-theme="dark"]) .sp-desktop-chin{background:#e5eaf2;color:#52627b}
:root:not([data-theme="dark"]) .sp-desktop-bezel>span{background:#5d6d86}
:root:not([data-theme="dark"]) .sp-desktop-stand{background:#bdc8d9}
:root[data-theme="dark"] .sp-desktop{background:#111a2c;border-color:#273753}
:root[data-theme="dark"] .sp-desktop-bezel,:root[data-theme="dark"] .sp-desktop-chin{background:#111a2c;color:#a7b8d6}
:root[data-theme="dark"] .sp-desktop-toolbar{background:#1a2b48;color:#b9c9e5}
:root[data-theme="dark"] .sp-desktop-screen{background:#0e1624}
:root[data-theme="dark"] .sp-desktop-stand{background:#283c5d}
:root[data-theme="dark"] .sp-screen-detail,:root[data-theme="dark"] .sp-screen-status{background:#142848;border-color:#38517d;color:#f6f8fc;box-shadow:0 22px 45px #0003}
:root[data-theme="dark"] .sp-screen-detail small,:root[data-theme="dark"] .sp-screen-detail p,:root[data-theme="dark"] .sp-screen-status small{color:#b9c9e5}
:root[data-theme="dark"] .sp-screen-detail>div:first-child>span:last-child{color:#ffb400}
:root[data-theme="dark"] .sp-detail-source{border-color:#38517d;color:#b9c9e5}
:root[data-theme="dark"] .sp-screen-status>span{background:#253f55;color:#bddcbf}
@media(min-width:601px) and (max-width:860px){
 .sp-dark .sp-duo{grid-template-columns:1fr}
 .sp-dark .sp-map{width:100%;max-width:550px;margin-inline:auto}
 .sp-dark .sp-map-center{--node-size:145px;--request-size:115px}
 .sp-dark .sp-map-request>strong{font-size:10px}
 .sp-dark .sp-map-core span{font-size:15px}
}
.sp-security-layers{display:grid;gap:9px;position:relative;padding:17px 0}
.sp-security-layers::before{content:'';position:absolute;top:0;bottom:0;left:30px;border-left:1px dashed #9eb6e5}
.sp-security-layer{position:relative;display:flex;align-items:center;gap:16px;background:var(--surface-1);border:1px solid var(--hairline);border-radius:8px;padding:18px 20px}
.sp-security-layer:nth-child(2n){margin-left:15px}.sp-security-layer>span{font:10px var(--mono);color:var(--accent-text)}.sp-security-layer strong{font-size:15px;font-weight:500}.sp-security-layer p{font-size:12px;line-height:1.5;margin:4px 0 0}.sp-security-layer>b{margin-left:auto;align-self:flex-start;color:var(--accent-text);font-size:19px;font-weight:400}
.sp-identity-demo{background:var(--surface-1);border:1px solid var(--hairline);border-radius:12px;padding:25px;color:var(--ink);min-width:0}
.sp-identity-top{display:flex;align-items:center;gap:11px}.sp-identity-top strong{font-size:15px;font-weight:500}.sp-identity-top>span:last-child{font:8px var(--mono);color:var(--ink-muted);margin-left:auto}
.sp-identity-options{display:none;flex-wrap:wrap;gap:7px;margin-top:23px}.sp-identity-demo[data-enhanced] .sp-identity-options{display:flex}
.sp-identity-options button{background:var(--surface-1);border:1px solid var(--hairline-strong);border-radius:5px;color:var(--ink);padding:9px 11px;font-size:11px;cursor:pointer}.sp-identity-options button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.sp-identity-demo .sp-identity-question{background:var(--inset);font-size:15px;line-height:1.5;padding:20px;border-radius:6px;margin-block:24px}
.sp-identity-demo dl{margin:0}.sp-identity-demo dl>div{padding:13px 0;border-bottom:1px solid var(--hairline)}.sp-identity-demo dt{font:9px var(--mono);color:var(--ink-muted);text-transform:uppercase;letter-spacing:.06em}.sp-identity-demo dd{font-size:13px;margin:5px 0 0;color:var(--ink)}
.sp-identity-result{font-size:13px;line-height:1.6;background:#fff3c5;color:#10264d;padding:16px;border-radius:6px;margin-top:22px}.sp-identity-demo .sp-caption{font-size:9px;line-height:1.6;margin-bottom:0}
.sp-no-training{background:#142e63;color:#f6f8fc;min-height:330px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:10px;padding:35px 20px}
.sp-no-training>div{display:flex;gap:24px;align-items:center;margin:30px 0;font-size:14px}.sp-no-training>div>span{color:#ffb400}.sp-no-training>strong{font-size:27px;line-height:1.2;letter-spacing:-.035em;font-weight:500;color:#ffb400}.sp-no-training>p{font-size:12px;color:#b9c9e5;text-align:center}
@media(max-width:860px){body[data-page="security"] .sp-duo{grid-template-columns:1fr}.sp-security-layers{width:100%;max-width:580px;margin:auto}.sp-identity-demo{order:2}}
@media(max-width:600px){.sp-security-layer{padding:16px 14px;gap:12px}.sp-security-layer p{font-size:11px}.sp-security-layer strong{font-size:14px}.sp-identity-demo{padding:20px}.sp-identity-options button{font-size:10px;padding:9px}.sp-identity-top strong{font-size:14px}.sp-no-training>div{gap:15px;font-size:13px}}
.sp-mcp-ports{padding:27px;background:var(--surface-2);border:1px solid var(--hairline);border-radius:12px;min-width:0;color:var(--ink)}
.sp-mcp-topline{display:flex;justify-content:space-between;gap:15px;font:8px var(--mono);color:var(--ink-muted);letter-spacing:.06em;margin-bottom:24px}
.sp-mcp-assistant{display:flex;gap:10px;justify-content:center;align-items:center;font-size:14px;font-weight:500}.sp-mcp-assistant .sp-avatar{width:30px;height:30px;font-size:17px;border-radius:8px}
.sp-mcp-inbound{height:24px;border-left:1px solid var(--accent-text);width:0;margin:auto}
.sp-mcp-hub{display:flex;align-items:center;gap:16px;width:225px;max-width:100%;margin:auto;padding:21px 19px;background:#2455d6;color:#fff;border:1px solid #1c43ae;border-radius:12px;box-shadow:0 12px 28px #1d459c20}
.sp-mcp-socket{width:38px;height:42px;border:1px solid #9bb4f1;border-radius:9px;display:grid;place-items:center;font-size:26px;background:#1a42a8;flex:none}.sp-mcp-hub strong{font-size:22px;font-weight:500;letter-spacing:-.03em}.sp-mcp-hub small{display:block;font-size:9px;color:#d8e4ff}.sp-mcp-dot{width:6px;height:6px;flex:none;border-radius:50%;background:#ffb400;margin-left:auto}
.sp-mcp-cables{height:54px;width:100%;margin:auto}.sp-mcp-cables svg{display:block;width:100%;height:100%;overflow:visible}.sp-mcp-cables path{fill:none;stroke:var(--accent-text);stroke-width:1.1;vector-effect:non-scaling-stroke}
.sp-mcp-tools{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.sp-mcp-tools button{padding:14px 6px;background:var(--surface-1);color:var(--ink);border:1px solid var(--hairline-strong);border-radius:8px;cursor:pointer;font:inherit;text-align:center;transition:background .3s,border-color .3s,translate .4s cubic-bezier(.22,1,.36,1)}.sp-mcp-tools button:hover{translate:0 -3px}.sp-mcp-tools button[aria-pressed="true"]{background:#fff3c5;border-color:#c5a338;color:#10264d}.sp-mcp-tools button>span{display:block;font-size:25px;line-height:1;margin-bottom:14px;color:var(--accent-text)}.sp-mcp-tools button[aria-pressed="true"]>span{color:#10264d}.sp-mcp-tools strong{font-size:11px;line-height:1.3;display:block;font-weight:500}.sp-mcp-tools small{display:block;font-size:8px;color:var(--ink-muted);margin-top:6px}.sp-mcp-tools button[aria-pressed="true"] small{color:#52627b}
.sp-mcp-ports .sp-mcp-result{font-size:13px;line-height:1.6;margin:22px 0 13px;min-height:4.8em}.sp-mcp-ports .sp-caption{font-size:8px;line-height:1.5;display:block}
@media(max-width:600px){.sp-mcp-ports{padding:22px 17px}.sp-mcp-topline{font-size:7px}.sp-mcp-tools{gap:7px}.sp-mcp-tools strong{font-size:10px}.sp-mcp-tools small{font-size:7px}.sp-mcp-ports .sp-mcp-result{font-size:12px}.sp-mcp-hub{padding:18px 15px}.sp-mcp-tools button{padding:15px 5px}}
@media(prefers-reduced-motion:reduce){.sp-mcp-tools button:hover{translate:none}}

/* Shared material: soft directional light and restrained elevation. */
.sp-relaunch :is(.sp-plan,.sp-connector-card,.sp-chart,.sp-operator-console,.sp-mini-workflow,.sp-identity-demo,.sp-mcp-ports,.sp-wizard,.sp-no-training,.sp-conversation){
 background-image:linear-gradient(135deg,#ffffff70 0%,#ffffff08 44%,#2455d607 100%);
 box-shadow:inset 1px 1px 0 #ffffffb3,inset -1px -1px 0 #17345e05,0 4px 10px -7px #10264d25,0 22px 48px -33px #10264d35;
 transition:box-shadow .7s cubic-bezier(.22,1,.36,1),border-color .5s,translate .7s cubic-bezier(.22,1,.36,1);
}
.sp-depth-note,.sp-hero-operator{background-image:linear-gradient(135deg,#fff,#f2f6ff);box-shadow:inset 1px 1px 0 #fff,0 6px 14px -8px #10264d25,0 28px 45px -22px #10264d40}
.sp-depth-token{background-image:linear-gradient(135deg,#fff0aa65,transparent 55%,#dcb32024);box-shadow:inset 1px 1px 0 #fff3cfa8,0 9px 18px -12px #10264d40,0 24px 42px -22px #10264d45}
.sp-depth-image{box-shadow:inset 1px 1px 0 #ffffffa0,0 10px 24px -15px #10264d25,0 35px 55px -28px #10264d45}
.sp-relaunch :is(a,button,summary){transition:color .28s,background-color .35s,border-color .35s,box-shadow .45s,translate .5s cubic-bezier(.22,1,.36,1)}
.sp-relaunch :is(input,select,textarea){transition:border-color .3s,box-shadow .35s,background-color .3s}
.sp-relaunch :is(input,select,textarea):hover{border-color:var(--accent-text)}
.sp-relaunch :is(input,select,textarea):focus-visible{box-shadow:0 0 0 4px #2455d614}
.sp-relaunch :is(a,button,summary):focus-visible{outline:2px solid var(--accent-text);outline-offset:5px}
.sp-procedure{overflow:visible;padding:14px;background:linear-gradient(135deg,var(--surface-2),var(--surface-1));border-radius:16px;box-shadow:inset 1px 1px 0 #ffffff70,0 28px 55px -40px #10264d40}
.sp-procedure .sp-window{border:0;background:none;padding:10px 9px 22px;gap:12px}
.sp-procedure-chain{position:relative;display:grid;gap:22px;padding:0 10px 0 0}
.sp-procedure-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.sp-procedure-wires path{fill:none;stroke:var(--accent-text);stroke-width:1;opacity:.3}
.sp-procedure-row{position:relative;z-index:1;display:grid;grid-template-columns:22px 1fr;gap:12px;margin-left:3px;padding:14px 17px;border:1px solid var(--hairline-strong);border-radius:9px;background:linear-gradient(135deg,#fff,#f0f4fe);color:#10264d;box-shadow:inset 1px 1px 0 #fff,0 9px 20px -16px #10264d60;animation:sp-calm-float 9s ease-in-out var(--float-phase,0s) infinite;animation-play-state:paused;transition:box-shadow .6s,scale .6s}
.sp-procedure-row:nth-of-type(even){margin-left:14px;margin-right:-10px}
.sp-procedure-row>span{display:grid;place-items:center;width:20px;height:20px;background:#edf2fc;color:#2455d6;border-radius:50%;font-size:11px}
.sp-procedure-row b{display:block;font:9px var(--mono);letter-spacing:.06em;color:#52627b}.sp-procedure-row p{margin:5px 0 0;font-size:12px;line-height:1.4;color:inherit}
.sp-procedure-end{font:10px/1.6 var(--mono);padding:23px 10px 6px;color:var(--ink-muted)}
.sp-procedure[data-ambient-active] .sp-procedure-row{animation-play-state:running}
@keyframes sp-calm-float{0%,100%{translate:0 0}50%{translate:0 calc(-1 * var(--float-distance,4px))}}
@media(hover:hover) and (pointer:fine){
 .sp-relaunch :is(.sp-plan,.sp-connector-card,.sp-chart):hover{translate:0 -3px;border-color:#95afe2;box-shadow:inset 1px 1px 0 #ffffffb3,0 8px 15px -12px #10264d30,0 30px 50px -28px #10264d35}
 .sp-relaunch :is(.sp-operator-console,.sp-mini-workflow,.sp-identity-demo,.sp-mcp-ports,.sp-no-training,.sp-conversation):hover{box-shadow:inset 1px 1px 0 #ffffffb3,0 12px 25px -20px #10264d25,0 35px 55px -32px #10264d40}
 .sp-relaunch :is(.sp-button,button:not(:disabled)):hover{translate:0 -1px;box-shadow:0 7px 16px -11px #10264d70}
 .sp-relaunch :is(.sp-link,header.site a,footer.site a):hover{color:var(--accent-text)}
 .sp-relaunch :is(.sp-checklist a,.sp-faq summary):hover{background-color:#2455d607}
 .sp-procedure-row:hover{scale:1.008;box-shadow:inset 1px 1px 0 #fff,0 15px 28px -18px #10264d60}
 .sp-depth-image .sp-art,.sp-feature-visual .sp-art{transition:scale 1.5s cubic-bezier(.22,1,.36,1)}
 .sp-depth-image:hover .sp-art,.sp-feature-visual:hover .sp-art{scale:1.018}
 [data-ambient-active] .sp-depth-token{animation:sp-calm-float 11s ease-in-out -3s infinite;--float-distance:4px}
 [data-ambient-active] .sp-depth-note{animation:sp-calm-float 13s ease-in-out -7s infinite;--float-distance:3px}
}
[data-theme=dark] .sp-relaunch :is(.sp-plan,.sp-connector-card,.sp-chart,.sp-operator-console,.sp-mini-workflow,.sp-identity-demo,.sp-mcp-ports,.sp-wizard,.sp-no-training,.sp-conversation),.sp-dark :is(.sp-plan,.sp-connector-card,.sp-chart,.sp-mini-workflow,.sp-conversation){background-image:linear-gradient(135deg,#ffffff09,#ffffff01 48%,#2455d60a);box-shadow:inset 1px 1px 0 #ffffff14,inset -1px -1px 0 #00000012,0 24px 45px -30px #00000070}
[data-theme=dark] .sp-procedure-row{background:linear-gradient(135deg,#253858,#172b49);color:#edf2fc;border-color:#536787;box-shadow:inset 1px 1px 0 #ffffff15,0 12px 25px -18px #0008}
[data-theme=dark] .sp-procedure-row b{color:#b4c4e1}
.sp-depth-product .sp-depth-caption,.sp-depth-demo .sp-depth-caption{color:#10264d}
@media(prefers-reduced-motion:reduce){.sp-relaunch *, .sp-relaunch *::before,.sp-relaunch *::after{animation:none!important;transition:none!important}.sp-relaunch :is(.sp-plan,.sp-connector-card,.sp-chart,.sp-button,button):hover{translate:none}.sp-procedure-row:hover,.sp-depth-image:hover .sp-art,.sp-feature-visual:hover .sp-art{scale:1}}
/* Connected steps retain their structure even with JavaScript unavailable. */
.sp-procedure-row:not(:first-of-type)::before{content:"";position:absolute;left:26px;top:-24px;height:23px;border-left:1px solid var(--accent-text);opacity:.3}
.sp-procedure[data-wires-ready] .sp-procedure-row::before{display:none}
.sp-security-layer{background-image:linear-gradient(135deg,#ffffff75,transparent 60%,#2455d606);box-shadow:inset 1px 1px 0 #ffffffb0,0 15px 28px -24px #10264d30;transition:box-shadow .6s,border-color .5s}
@media(hover:hover) and (pointer:fine){.sp-security-layer:hover{border-color:#93aad5;box-shadow:inset 1px 1px 0 #ffffffb0,0 20px 32px -23px #10264d40}}
[data-theme=dark] .sp-security-layer{background-image:linear-gradient(135deg,#ffffff09,transparent 60%,#2455d608);box-shadow:inset 1px 1px 0 #ffffff14,0 15px 28px -24px #0008}

/* Featured provider cards stay visible; filtering enhances the complete HTML list. */
.sp-home-catalog{margin-top:48px}
.sp-connector-catalog{border:1px solid var(--hairline-strong);border-radius:12px;background:var(--canvas);overflow:hidden}
.sp-catalog-content{padding:20px 24px 24px}
.sp-catalog-content .sp-filterbar{gap:16px;align-items:center;flex-wrap:wrap;margin:0 0 12px}
.sp-catalog-content .sp-filters{flex:1;flex-wrap:wrap;gap:6px}
.sp-catalog-content .sp-filters button{display:flex;align-items:center;gap:7px;font-size:11px;padding:7px 10px}
.sp-filters [data-filter-count]{font-variant-numeric:tabular-nums;opacity:.7;font-size:10px}
.sp-catalog-content .sp-search{width:220px;max-width:100%}
.sp-catalog-content .sp-search input{width:100%;font-size:12px}
.sp-catalog-content .sp-caption{font-size:12px}
.sp-catalog-note{margin:20px 0 0;max-width:760px}
.sp-catalog-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:16px}
.sp-catalog-card{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:16px;border:1px solid var(--hairline);border-radius:8px;background:var(--surface-1);color:var(--ink)}
.sp-catalog-card[hidden],.sp-catalog-expand[hidden],[data-catalog-controls][hidden]{display:none}
.sp-provider-card{min-width:0}
.sp-provider-heading{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;margin-bottom:13px}
.sp-provider-logo{display:grid;place-items:center;flex:none;width:48px;height:48px;padding:4px;box-sizing:border-box;border:1px solid #e2e5eb;border-radius:8px;background:#fff}
.sp-provider-logo img{display:block;width:40px;height:40px;object-fit:contain}
.sp-relaunch .sp-catalog-card h3{font-size:15px;line-height:1.3;margin:0 0 10px;letter-spacing:-.015em;overflow-wrap:anywhere}
.sp-relaunch .sp-provider-heading h3{margin:0}
.sp-relaunch .sp-catalog-card p{font-size:11px;line-height:1.65;margin:0 0 16px;color:var(--ink-muted)}
.sp-catalog-status{display:inline-block;margin-top:auto;padding:3px 6px;border:1px solid var(--hairline);border-radius:4px;font-size:9px;line-height:1.4;color:var(--accent-text)}
.sp-relaunch .sp-catalog-card .sp-catalog-scope{font-size:10px;line-height:1.5;margin:-8px 0 16px}
.sp-catalog-expand{display:block;margin:22px auto 0;padding:11px 24px;border:1px solid var(--hairline-strong);border-radius:6px;background:var(--surface-1);color:var(--ink);font:inherit;font-size:12px;cursor:pointer}
.sp-catalog-expand:focus-visible{outline:3px solid var(--accent-text);outline-offset:3px}
.sp-connection-options{margin-top:20px;padding:18px 0;border-block:1px solid var(--hairline)}
.sp-connection-options>summary{font-size:14px;color:var(--ink);cursor:pointer}
.sp-dark .sp-connector-catalog{--hairline-strong:#50658b;--surface-1:#1b376c;--inset:#27467b}
.sp-dark .sp-catalog-content .sp-filters button[aria-pressed=true]{color:#10264d;background:#ffb400;border-color:#ffb400}
.sp-dark .sp-catalog-content .sp-search input{background:var(--canvas);color:var(--ink)}
.sp-dark .sp-catalog-content .sp-search input::placeholder{color:var(--ink-muted)}
@media(max-width:1200px){.sp-catalog-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Local origin, review placeholder and privacy marks belong to the hero. */
.sp-hero-badges{display:flex;align-items:center;justify-content:center;gap:clamp(24px,5vw,72px);margin:0 auto 36px;padding:0 12px}
.sp-hero-badge{display:flex;align-items:center;flex:none;gap:10px}
.sp-hero-badge strong{font-size:16px;line-height:1.15;font-weight:650;letter-spacing:-.025em;white-space:nowrap}
.sp-origin-badge{background:#fff;color:#080808;border:1px solid #080808;border-radius:40px;padding:3px 18px 3px 3px;gap:8px}
[data-theme=dark] .sp-origin-badge{background:#080808;color:#fff;border-color:#dce4ef}
.sp-origin-badge strong{font-size:14px;letter-spacing:.005em;font-stretch:condensed}
.sp-origin-flag{width:42px;height:42px;flex:none}
.sp-google-badge{position:relative;flex-direction:column;gap:5px}
.sp-google-graphic{display:flex;align-items:center;gap:12px}
.sp-google-mark{width:39px;height:39px;flex:none}
.sp-google-stars{width:152px;height:auto}
.sp-badge-caption{position:absolute;top:calc(100% + 5px);font-size:11px;color:var(--ink-muted);white-space:nowrap}
.sp-privacy-mark{width:42px;height:42px;flex:none}
@media(max-width:1000px){
 .sp-catalog-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .sp-hero-badges{gap:26px}
 .sp-hero-badge strong{font-size:13px}
 .sp-google-stars{width:125px}
}
@media(max-width:760px){
 .sp-catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .sp-hero-badges{flex-wrap:wrap;gap:28px 24px;margin-bottom:30px}
 .sp-hero-badge strong{font-size:12px}
 .sp-origin-flag,.sp-privacy-mark{width:34px;height:34px}
 .sp-google-mark{width:31px;height:31px}
 .sp-google-graphic{gap:8px}
 .sp-google-stars{width:110px}
 .sp-catalog-content{padding:18px}
 .sp-home-catalog{margin-top:30px}
}
@media(max-width:440px){
 .sp-catalog-grid{grid-template-columns:1fr}
 .sp-catalog-card{padding:16px}
 .sp-catalog-content .sp-search{width:100%}
 .sp-hero-badges{column-gap:15px;padding:0}
 .sp-hero-badge strong{font-size:11px}
 .sp-origin-badge{padding-right:12px;gap:5px}
 .sp-google-stars{width:98px}
 .sp-hero-badge.sp-privacy-badge{flex-basis:100%;justify-content:center}
}

/* Pricing: six tiers, the calculator and the AI price sheet.
   The ladder grew from three cards to six, so the row splits instead of
   shrinking: six columns would put a 75px price and a five-line feature
   list into 180px. Colours are the existing tokens only - the accent
   stays the action colour and the ground stays colourless, so the accent
   and depth gates keep holding. */
.sp-six{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.sp-plan-note{font-size:13px;color:var(--ink-muted);margin-top:8px}
.sp-plan-custom{font-size:38px;letter-spacing:-.03em;line-height:1.15;display:inline-block;padding-top:14px}
.sp-plan .sp-checks{margin-top:22px}

.sp-calc{display:grid;grid-template-columns:1.35fr 1fr;gap:28px;align-items:stretch}
.sp-calc-inputs{display:flex;flex-direction:column;gap:22px;border:1px solid var(--hairline);border-radius:8px;padding:30px;background:var(--surface-1)}
.sp-calc-field{display:grid;grid-template-columns:1fr auto;gap:8px 14px;align-items:center}
.sp-calc-field>span{grid-column:1/-1;font:10px var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-muted)}
.sp-calc-field input[type=range]{width:100%;accent-color:var(--accent)}
.sp-calc-field select{grid-column:1/-1;font:inherit;font-size:14px;padding:11px 13px;border:1px solid var(--hairline);border-radius:5px;background:var(--surface-2);color:var(--ink)}
.sp-calc-field output{font:20px var(--mono);color:var(--ink);text-align:right;min-width:74px}
.sp-calc-result{border:1px solid var(--hairline);border-radius:8px;padding:30px;background:var(--inset);display:flex;flex-direction:column;justify-content:center;gap:6px}
.sp-calc-result strong{font-size:40px;letter-spacing:-.04em;line-height:1.05}
.sp-calc-result p{font-size:14px;margin:0}
.sp-calc-result p[data-calc-detail]{color:var(--ink-muted);margin-top:6px}

.sp-sheet{width:100%;border-collapse:collapse;font-size:15px}
.sp-sheet th{text-align:left;font:10px var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-muted);padding:0 16px 14px 0;border-bottom:1px solid var(--hairline)}
.sp-sheet td{padding:18px 16px 18px 0;border-bottom:1px solid var(--hairline);vertical-align:top}
.sp-sheet td small{color:var(--ink-muted);font-size:12px}
.sp-sheet .sp-num{font-family:var(--mono);text-align:right;white-space:nowrap}
.sp-sheet tbody tr:last-child td{border-bottom:none}

@media(max-width:1100px){.sp-six{grid-template-columns:repeat(2,1fr);gap:18px}
 .sp-calc{grid-template-columns:1fr;gap:20px}.sp-calc-result strong{font-size:34px}}
@media(max-width:760px){.sp-six{grid-template-columns:1fr}
 .sp-sheet{font-size:13px}.sp-sheet td{padding:14px 10px 14px 0}
 .sp-calc-inputs,.sp-calc-result{padding:22px}}
/* The calculator's recommendation, marked on the card it points at. A
   word, not a ring: --accent is the same blue the featured card already
   outlines itself with, and two identically ringed cards in one row tell
   a reader nothing about which one answered their question. */
.sp-plan-match{display:block;font:10px var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--accent-text);border-top:1px solid var(--accent);padding-top:10px;margin-bottom:14px}
.sp-plan-match[hidden]{display:none}
/* The price sheet is the arithmetic behind the pricing page, so its hero
   is the same staircase held flatter and squarer: a reference page should
   read as calmer than the page that sells. */
.sp-depth-pricesheet .sp-depth-image{--tilt:-4deg;inset:16% 4% 18%;border-radius:8px}
.sp-depth-pricesheet .sp-depth-plinth{--tilt:2deg;background:#fff0b5}
.sp-depth-pricesheet .sp-depth-token{--tilt:2deg;border-radius:4px;top:8%;right:2%}

/* Monthly / yearly switch. A segmented control, not two links: the two are
   one choice, and the pressed half has to read as the current state without
   relying on colour alone (aria-pressed carries it for a screen reader, the
   fill and the weight for everyone else). */
/* The billing switch sits centred above the ladder and wears the house
   colours: the chosen period is filled with --accent (blue in light, amber
   in dark) on --on-accent, so the switch reads as an action and not as a
   piece of chrome. width:max-content + margin auto rather than a
   text-align on the section, which would centre the cards' innards too.
   The discount badge keeps its own chip in BOTH states. Muting it while
   the reader is on "monthly" hides the one number that would make them
   look at "yearly", and on the filled pill a plain accent-coloured word
   would be accent on accent - so the chip is mixed from the ink that is
   already legible on whatever ground it lands on. */
.sp-billing-toggle{display:flex;width:max-content;margin:0 auto 28px;gap:4px;padding:4px;border:1px solid var(--hairline);border-radius:999px;background:var(--surface-1)}
.sp-billing-toggle button{display:inline-flex;align-items:center;gap:9px;padding:10px 20px;border:0;border-radius:999px;background:none;color:var(--ink-muted);font:inherit;font-size:14px;cursor:pointer}
.sp-billing-toggle button:hover{color:var(--ink)}
.sp-billing-toggle button[aria-pressed=true]{background:var(--accent);color:var(--on-accent);font-weight:600}
.sp-billing-save{font:9px var(--mono);letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;border-radius:999px;padding:3px 7px;color:var(--accent-text);background:color-mix(in srgb,var(--accent) 13%,transparent)}
.sp-billing-toggle button[aria-pressed=true] .sp-billing-save{color:var(--on-accent);background:color-mix(in srgb,var(--on-accent) 9%,transparent)}
/* The reassurance block under the ladder. It was two runs of grey text on
   bare white - the payment terms, then the connector note - with nothing
   holding either, so they read as leftovers below the offer instead of
   part of it. One panel carries both now, split by a hairline: what you
   pay through and on what period above, what is NOT in the monthly fee
   below. The two notes sit side by side under their own labels because
   they answer two different questions, and someone looking for one
   should not have to read through the other to find it.
   The period badge keeps the data-price pair the switch toggles, so it
   must not get a display of its own here - that would outrank [hidden]
   and show both periods at once. */
.sp-payment{margin-top:42px;border:1px solid var(--hairline);border-radius:8px;background:var(--surface-1);overflow:hidden}
.sp-payment-row{display:flex;align-items:center;gap:30px;padding:24px 30px}
.sp-payment-row p{font-size:12px;max-width:620px;margin:0}
.sp-payment-term{margin-left:auto;font-size:12px;white-space:nowrap;color:var(--ink);background:var(--inset);border:1px solid var(--hairline);border-radius:999px;padding:7px 15px}
.sp-payment-notes{display:grid;grid-template-columns:1fr 1fr;gap:34px;padding:22px 30px;border-top:1px solid var(--hairline);background:var(--inset)}
.sp-payment-notes p{font-size:12px;margin:0;color:var(--ink-muted);max-width:none}
.sp-payment-notes b{display:block;font:9px var(--mono);font-weight:400;letter-spacing:.09em;color:var(--accent-text);margin-bottom:7px}
@media(max-width:760px){.sp-payment{margin-top:32px}.sp-payment-row{flex-wrap:wrap;gap:15px;padding:20px}.sp-payment-term{margin-left:0}
 .sp-payment-notes{grid-template-columns:1fr;gap:18px;padding:18px 20px}}
@media(max-width:760px){.sp-billing-toggle{width:100%}.sp-billing-toggle button{flex:1;justify-content:center;padding:10px 12px;font-size:13px}
 .sp-billing-save{display:block;font-size:8px;padding:2px 5px}}
/* The guarantee: the loudest promise on the page, so it gets a ground of
   its own. Dark navy with a gradient, the illustration dissolving into it
   on the right.
   The image is DECORATIVE (alt="", aria-hidden): the text carries the
   promise in full, and a screen reader repeating "a blue balance scale"
   adds nothing. It is masked so it fades into the panel instead of ending
   on a hard edge, and it never sits under the text - the grid keeps the
   copy in its own column, because contrast over a photograph is not
   something you can promise, only hope for. */
.sp-guarantee{position:relative;overflow:hidden;border-radius:10px;padding:52px 56px;
  background:linear-gradient(115deg,#10264d 0%,#142e63 52%,#1b3a78 100%);
  --ink:#f6f8fc;--ink-muted:#b9c9e5;--accent-text:#ffb400;--hairline:#38517d;
  color:var(--ink);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);gap:40px;align-items:center}
/* `luminosity`, not `screen`: the render sits on a near-white ground, and
   on a dark panel `screen` turns that ground into a lit blob. Luminosity
   keeps the form and takes the colour from the panel, so the scale reads
   as a relief pressed into the navy. The amber balls go tonal with it -
   that is the trade, and the accent stays where it belongs, on the "30"
   and the second line of the heading.
   The art bleeds past the right edge so the mask never ends on a straight
   cut; -18% right and a generous soft stop do that together. */
.sp-guarantee-art{grid-column:2;grid-row:1;justify-self:end;margin-right:-14%;
  width:118%;max-width:none;height:auto;pointer-events:none;
  mix-blend-mode:luminosity;opacity:.3;
  -webkit-mask-image:radial-gradient(62% 62% at 52% 50%,#000 30%,transparent 82%);
          mask-image:radial-gradient(62% 62% at 52% 50%,#000 30%,transparent 82%)}
.sp-guarantee-body{grid-column:1;grid-row:1}
.sp-guarantee-mark{display:flex;align-items:baseline;gap:10px;margin:0 0 14px}
.sp-guarantee-mark b{font-size:76px;line-height:.85;letter-spacing:-.05em;color:var(--accent-text);font-weight:600}
.sp-guarantee-mark span{font:19px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted)}
.sp-guarantee h2{font-size:40px;margin-bottom:18px}
.sp-guarantee h2 span{color:var(--accent-text)}
.sp-guarantee p{max-width:60ch}
.sp-guarantee .sp-caption{margin-top:18px;color:var(--ink-muted)}
@media(max-width:1100px){.sp-guarantee{padding:40px}.sp-guarantee-art{width:130%;margin-right:-20%}}
@media(max-width:760px){.sp-guarantee{grid-template-columns:1fr;padding:28px;gap:18px}
 .sp-guarantee-art{grid-column:1;grid-row:2;justify-self:center;width:70%;margin-right:0;opacity:.32}
 .sp-guarantee-mark b{font-size:58px}.sp-guarantee-mark span{font-size:16px}.sp-guarantee h2{font-size:31px}}


/* Five listed tiers in ONE row, the quoted one as a banner below.
   Six equal cards forced a 3x3 grid and set Enterprise Custom beside a
   69-euro plan as though a visitor chose between them. Five are a price
   list; the sixth is the start of a conversation. */
.sp-five{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;align-items:start}
.sp-five .sp-plan{padding:26px 22px}
.sp-five .sp-plan h2{font-size:52px}
.sp-five .sp-plan h2 span:last-child{font-size:24px;margin-top:4px}
.sp-five .sp-plan h3{font-size:18px}
.sp-five .sp-plan .sp-checks{font-size:13px;margin-bottom:26px}
.sp-five .sp-plan-note{font-size:12px}

/* The featured tier stands UP out of the row and carries the dark surface
   the design system already uses for emphasis (--ink and friends are
   re-pointed, so the ink stays legible instead of inheriting light-mode
   values onto a dark ground). The badge sits ON the top edge, which is why
   the card needs the extra top padding and the row needs align-items:start
   rather than stretch. */
.sp-five .sp-plan-featured{position:relative;margin-top:-18px;padding:40px 24px 26px;
  background:#142e63;border-color:#142e63;border-radius:10px;
  --ink:#f6f8fc;--ink-muted:#b9c9e5;--accent-text:#ffb400;--hairline:#38517d;--inset:#24437b;
  /* Re-pointing the tokens is not enough: the heading and the list carry no
     colour of their own, they INHERIT, and what they inherited was the
     light-mode ink of the section around them - #10264d on #142e63, a
     contrast of 1.2:1. Setting colour on the card is what actually reaches
     them. Found by looking at the rendered page; no token test sees it. */
  color:var(--ink)}
/* The price reads, it does not act: white like the rest of the copy. Amber
   stays the action and label colour (button, badge, the check marks). */
.sp-five .sp-plan-featured h2,
.sp-five .sp-plan-featured h2 span{color:var(--ink)}
.sp-five .sp-plan-featured .sp-plan-top{margin-bottom:24px}
.sp-five .sp-plan-featured .sp-plan-top small{position:absolute;top:-13px;left:50%;translate:-50% 0;
  background:var(--accent-text);color:#10264d;padding:6px 13px;border-radius:999px;font-size:9px;white-space:nowrap}
/* Fixed values, not tokens: this card carries its own navy ground in BOTH
   colour schemes, so a token that flips with the scheme flips the button
   out of sight. --surface-2 is #ffffff in light mode and #152439 in dark -
   the second one put dark ink on a dark button on a dark card. */
.sp-five .sp-plan-featured .sp-button{background:#f6f8fc;color:#10264d;border-color:#f6f8fc}
.sp-five .sp-plan-featured .sp-button:hover{background:#ffffff;border-color:#ffffff}

/* The banner: one row on a wide screen, the price and the call to action
   held to the right so the eye still lands where it lands on the cards. */
.sp-plan-banner{display:grid;grid-template-columns:1.1fr 1fr auto;gap:36px;align-items:center;margin-top:20px;padding:30px 32px}
.sp-plan-banner .sp-plan-top{margin-bottom:10px}
.sp-plan-banner h3{font-size:22px;margin:0 0 8px}
.sp-plan-banner .sp-checks{font-size:13px;margin:0;columns:2;column-gap:28px}
/* Without this a two-line entry splits across the columns and reads as two
   half-sentences ("Automatic sending per" | "category"). */
.sp-plan-banner .sp-checks li{break-inside:avoid}
.sp-plan-banner-act{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:230px}
.sp-plan-banner-act h2{font-size:34px;margin:0}
.sp-plan-banner-act .sp-button{width:100%;margin-top:12px}

@media(max-width:1250px){.sp-five{grid-template-columns:repeat(3,1fr);gap:18px}
 .sp-five .sp-plan-featured{margin-top:0}
 .sp-plan-banner{grid-template-columns:1fr;gap:20px}.sp-plan-banner .sp-checks{columns:2}}
@media(max-width:760px){.sp-five{grid-template-columns:1fr}
 .sp-five .sp-plan h2{font-size:64px}.sp-plan-banner .sp-checks{columns:1}
 .sp-plan-banner-act{min-width:0;width:100%}}

/* A shared row grid makes the upgrade readable across the whole ladder.
   Subgrid sizes each row from its longest translation, including annual
   billing and browser zoom; no guessed heights or clipped copy. */
.sp-five{align-items:stretch;column-gap:14px;row-gap:0}
.sp-five .sp-plan{display:grid;grid-template-rows:subgrid;grid-row:span 13;gap:0;min-width:0;padding:24px 18px}
.sp-five .sp-plan-featured{margin-top:0;padding:24px 18px;--surface-2:#142e63}
.sp-five .sp-plan-top,.sp-five .sp-plan-featured .sp-plan-top{margin:0 0 22px;font-size:22px}
.sp-five .sp-plan h2{margin:0 0 8px;line-height:1.1;font-variant-numeric:tabular-nums}
.sp-five .sp-plan>.sp-caption{margin:0 0 24px;font-size:12px}
.sp-five .sp-plan h3{margin:0 0 10px;font-size:19px;line-height:1.25}
.sp-five .sp-plan-note{margin:0 0 22px;font-size:13px;line-height:1.5}
.sp-plan-features{list-style:none;padding:0;margin:0;font-size:13px}
.sp-five .sp-plan-features{display:grid;grid-template-rows:subgrid;grid-row:span 7;gap:0}
.sp-feature{display:flex;align-items:flex-start;gap:10px;padding:15px 0;border-top:1px solid var(--hairline);line-height:1.3}
.sp-feature>div{min-width:0}
.sp-feature-included{color:var(--ink)}
.sp-feature strong{font-size:14px;font-weight:600;display:block;color:var(--ink)}
.sp-feature-label{display:block;margin-top:4px;font-size:12px;color:var(--ink-muted);line-height:1.4}
.sp-feature-icon{flex:none;width:22px;height:22px;color:var(--accent-text)}
.sp-feature-brand{object-fit:contain;width:25px;background:#142e63;border-radius:5px;padding:3px}
.sp-feature[data-feature=volume] strong,.sp-feature[data-feature=seats] strong{font-size:27px;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.sp-feature[data-feature=volume] .sp-feature-icon,.sp-feature[data-feature=seats] .sp-feature-icon{margin-top:3px}
.sp-feature-unavailable strong,.sp-feature-unavailable .sp-feature-icon{color:var(--ink-muted);font-weight:400}
.sp-feature-new{display:inline-block;margin-top:7px;padding:3px 6px;border-radius:4px;background:#e8eefc;color:#214dc0;font:9px var(--mono);letter-spacing:.07em}
.sp-plan-featured .sp-feature-new{background:#ffb400;color:#10264d}
.sp-plan-action{display:flex;flex-direction:column;justify-content:flex-end;padding-top:20px;border-top:1px solid var(--hairline)}
.sp-five .sp-plan-action .sp-button{margin:0;width:100%;padding:14px 8px;font-size:14px}
.sp-five .sp-plan-match{font-size:9px;letter-spacing:.04em;border:0;padding:0;margin:0 0 12px;min-height:24px}
.sp-five .sp-plan-match[hidden]{display:block;visibility:hidden}
.sp-plan-banner .sp-plan-features{display:grid;grid-template-columns:1fr 1fr;column-gap:22px}
.sp-plan-banner .sp-feature{padding:12px 0}
.sp-pricing-assurance{display:flex;align-items:center;gap:14px;padding:22px 26px;margin-top:20px;border:1px solid var(--hairline);border-radius:9px;background:var(--surface-2)}
.sp-pricing-assurance>.sp-feature-icon{width:30px;height:30px}
.sp-pricing-assurance strong{font-size:16px;font-weight:600}
.sp-pricing-assurance p{font-size:13px;margin:3px 0 0;color:var(--ink-muted)}
.sp-pricing-assurance a{margin-left:auto;flex-shrink:0;font-size:13px;color:var(--accent-text);text-underline-offset:4px}
.sp-relaunch .sp-five .sp-plan:hover{translate:none}
#garantie{scroll-margin-top:110px}
@media(max-width:1250px){.sp-five{row-gap:28px}}
@media(max-width:760px){
 .sp-five .sp-plan{padding:26px;grid-template-rows:none;grid-row:auto}
 .sp-five .sp-plan-features{grid-template-rows:none;grid-row:auto}
 .sp-five .sp-plan h2{font-size:52px}
 .sp-five .sp-plan-match[hidden]{display:none}
 .sp-pricing-assurance{flex-wrap:wrap;padding:20px;align-items:flex-start}
 .sp-pricing-assurance>div{flex:1;min-width:190px}
 .sp-pricing-assurance a{margin-left:44px}
 .sp-plan-banner .sp-plan-features{grid-template-columns:1fr}
}


/* Header CTA: Arrow Fill Button, adapted from obsidianui.dev/docs/arrow-fill-button.
   Shared padding keeps the clipped label aligned with the accessible label. */
header.site nav a.cta {
  --cta-height: 48px;
  --cta-inset: 6px;
  --cta-left: 20px;
  --cta-right: 52px;
  --cta-ease: cubic-bezier(.785, .135, .15, .86);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--cta-height);
  padding: 0 var(--cta-right) 0 var(--cta-left);
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: var(--yellow);
  color: #10264d;
  white-space: nowrap;
}
header.site nav a.cta:hover { background: var(--yellow); color: #10264d; }
.cta-label { position: relative; }
.cta-fill {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 0 var(--cta-right) 0 var(--cta-left);
  border-radius: inherit;
  background: #10264d;
  color: #ffda54;
  clip-path: inset(var(--cta-inset) var(--cta-inset) var(--cta-inset) calc(100% - var(--cta-height) + var(--cta-inset)) round 999px);
  transition: clip-path .45s var(--cta-ease);
}
.cta-arrow {
  position: absolute;
  right: calc((var(--cta-height) - 12px) / 2);
  width: 12px;
  height: 12px;
  overflow: hidden;
  fill: currentColor;
}
.cta-arrow path { transform-origin: center; transition: transform .45s var(--cta-ease); }
.cta-arrow path:first-child { transform: translateX(-120%) scale(0); }
header.site nav a.cta:is(:hover, :focus-visible) .cta-fill { clip-path: inset(0 round 999px); }
header.site nav a.cta:is(:hover, :focus-visible) .cta-arrow path:first-child { transform: translateX(0) scale(1); }
header.site nav a.cta:is(:hover, :focus-visible) .cta-arrow path:last-child { transform: translateX(120%) scale(0); }
header.site nav a.cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
@media (max-width: 680px) {
  header.site nav a.cta { --cta-height: 40px; --cta-inset: 5px; --cta-left: 12px; --cta-right: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .cta-fill, .cta-arrow path { transition: none; }
}
@media (max-width: 360px) {
  header.site .brand img { width: 108px; }
}

/* Home: a calm promise, followed by one explained illustration. */
.sp-home-hero-calm{padding-bottom:0}
.sp-home-hero-calm>.sp-lead{max-width:530px}
.sp-home-hero-calm>.sp-proof{border-top:1px solid var(--hairline);margin-top:36px;padding-block:25px}
.sp-home-hero-calm .sp-hero-badge{animation:none}
.sp-home-intro{display:grid;grid-template-columns:.92fr 1.08fr;align-items:center;gap:56px;padding-block:60px 72px}
.sp-home-intro-copy .sp-eyebrow{margin-bottom:22px}
.sp-home-intro-copy h2{font-size:clamp(30px,3.1vw,43px);line-height:1.12;letter-spacing:-.045em}
.sp-home-intro-copy p{font-size:16px;line-height:1.7;max-width:470px;margin:22px 0 0}
.sp-home-intro-copy .sp-link{margin-top:26px}
.sp-home-intro-visual{margin:0;min-width:0;overflow:hidden;border:1px solid var(--hairline);border-radius:14px;background:var(--surface-1)}
.sp-home-intro-visual img{display:block;width:100%;height:auto}
.sp-home-intro-visual figcaption{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:10px;padding:20px 18px;color:var(--ink-muted);font-size:12px;text-align:center}
.sp-home-intro-visual figcaption span+span{border-left:1px solid var(--hairline)}
@media(max-width:1000px){
 .sp-home-intro{gap:30px}
 .sp-home-intro-visual figcaption{font-size:10px;padding:17px 10px;gap:7px}
}
@media(max-width:760px){
 .sp-home-intro{grid-template-columns:1fr;gap:30px;padding-block:35px 48px}
 .sp-home-intro-copy p{max-width:580px;font-size:15px}
 .sp-home-intro-copy h2{font-size:35px}
 .sp-home-intro-copy .sp-eyebrow{margin-bottom:18px}
 .sp-home-intro-visual{max-width:580px;width:100%;justify-self:center}
 .sp-home-hero-calm>.sp-proof{margin-top:26px}
}

/* Background exploration after the hero-clarity-v1 review checkpoint. */
.sp-home-hero-calm{padding-top:24px}
.sp-home-promise{
 margin:0 -64px 32px;padding:58px 64px 48px;border:1px solid #dce6f4;
 border-radius:22px;background:#edf2fc url("relaunch/hero-paper-backdrop.webp") center/100% 100% no-repeat;
}
.sp-home-promise>.sp-eyebrow{justify-content:center;margin-bottom:25px}
.sp-home-promise>.sp-lead{max-width:530px;margin:25px auto 0;font-size:18px}
.sp-home-promise>.sp-actions{justify-content:center;margin:27px 0 0}
[data-theme="dark"] .sp-home-promise{
 border-color:#2b4164;background-image:linear-gradient(#0d1b32c9,#0d1b32c9),url("relaunch/hero-paper-backdrop.webp");
}
@media(max-width:1280px){
 .sp-home-promise{margin-inline:-20px;padding-inline:20px}
}
@media(max-width:760px){
 .sp-home-hero-calm{padding-top:18px}
 .sp-home-promise{margin-inline:-10px;padding:52px 18px 34px;border-radius:16px;background-size:auto 100%;background-position:right center}
 .sp-home-promise>.sp-eyebrow{font-size:8px;gap:12px;margin-bottom:25px}
 .sp-home-promise>.sp-eyebrow>span+span{padding-left:12px}
 .sp-home-promise>.sp-lead{font-size:15px;line-height:1.6;margin-top:23px}
 .sp-home-promise>.sp-actions{margin-top:23px;gap:8px}
 .sp-home-promise h1{margin-inline:0}
 .sp-home-promise h1 em{display:block}
}
@media(max-width:360px){
 .sp-home-promise{padding-inline:12px}
 .sp-home-promise h1{font-size:33px}
 .sp-home-promise>.sp-eyebrow{font-size:7px;gap:9px}
}

/* SupportLift footer: pale blue ground and navy directory, joining the page seamlessly. */
footer.site{padding:80px 0 32px;border-top:0}
footer.site::before{content:none}
footer.site>.wrap{grid-template-columns:1fr 2fr;justify-items:stretch;text-align:left;gap:64px 70px;align-items:start}
.sp-foot-mark{padding-top:2px;justify-self:start}
.sp-foot-mark img{width:min(245px,100%);height:auto}
.sp-foot-cols{gap:32px 24px;max-width:none}
.sp-foot-col{align-items:flex-start;gap:14px}
footer.site .sp-foot-head{font-size:15px;font-weight:600;margin-bottom:6px}
footer.site a{font-size:14px;line-height:1.5}
.sp-foot-mark{line-height:0}
.sp-foot-base{grid-column:1/-1;flex-direction:row;justify-content:space-between;gap:24px;border-top:1px solid var(--hairline);padding-top:24px}
.sp-foot-base small{font-size:12px}
.sp-foot-social{gap:18px}
.sp-foot-social>*{min-width:32px;min-height:32px;align-items:center;justify-content:center}
@media(max-width:1050px){footer.site>.wrap{grid-template-columns:1fr;gap:38px}.sp-foot-mark img{width:220px}.sp-foot-cols{max-width:760px}}
@media(max-width:600px){footer.site{padding:48px 0 24px}.sp-foot-cols{grid-template-columns:1fr 1fr;gap:32px 24px}.sp-foot-base{flex-wrap:wrap;gap:16px}.sp-foot-mark img{width:205px}}