@font-face { font-family: "Satoshi"; src: url("/assets/Satoshi-Light-a3f3c570df17.woff2") format("woff2"); font-style: normal; font-weight: 300; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("/assets/Satoshi-Regular-e8a4b9792f2c.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("/assets/Satoshi-Medium-42ef25237d38.woff2") format("woff2"); font-style: normal; font-weight: 500; font-display: swap; }
/*
 * Canonical design tokens.
 *
 * Generated by hand from the DESIGN.md front matter at the repository root.
 * DESIGN.md is the source of truth: every value here has a `{colors.*}`,
 * `{typography.*}`, `{rounded.*}` or `{spacing.*}` counterpart there. Change
 * DESIGN.md first, then mirror it here and in preview.html / preview-dark.html.
 *
 * This is layer 1 (primitive). Site-level semantic aliases live in
 * src/styles/_tokens.scss and point at these names — never the other way round.
 */

:root {
  color-scheme: light;

  /* ── Colors — brand & accent ──────────────────────────────────────── */
  --color-primary: #683dd4;
  --color-on-primary: #ffffff;
  --color-primary-hover: #5630b5;
  --color-primary-soft: #e5dbf9;
  --color-primary-tint: #f2edfc;

  /* ── Colors — signal (one conversion action per page) ─────────────── */
  --color-signal: #fc4d49;
  --color-on-signal: #ffffff;
  --color-signal-hover: #e03a36;
  --color-signal-soft: #ffe3e1;
  --color-signal-tint: #fff1f0;

  /* ── Colors — ink (navy, never pure black) ────────────────────────── */
  --color-ink: #00142d;
  --color-ink-2: #1b2a48;
  --color-ink-3: #2e3d5a;
  --color-ink-muted: #5c6b86;
  --color-ink-subtle: #93a0b6;
  --color-ink-faint: #bfc6d3;

  /* ── Colors — surface ladder ──────────────────────────────────────── */
  /* Literal white, theme-independent: stays white when the canvas inverts.
     Use for text and marks that sit on a coloured fill in BOTH themes. */
  --color-white: #ffffff;
  --color-canvas: #ffffff;
  --color-surface-1: #f1f3f9;
  --color-surface-2: #e6eaf2;
  --color-surface-inverse: #00142d;
  --color-on-inverse: #ffffff;
  /* The body step on an inverse surface — the counterpart to --color-ink-3. */
  --color-on-inverse-muted: rgba(255, 255, 255, 0.72);
  /* True black, and the ONLY sanctioned use of it: letterboxing behind video
     and image media, where the navy ink would read as a colour cast. Never
     for text, borders, or shadows. */
  --color-media-matte: #000000;
  --color-hairline: #e5e7ee;
  --color-hairline-strong: #d2d6df;

  /* ── Colors — semantic ────────────────────────────────────────────── */
  --color-success: #1b7a52;
  --color-success-soft: #d9f0e5;
  --color-warning: #b5701a;
  --color-warning-soft: #fcefd7;

  /* Star ratings. Outside the palette on purpose: a gold star is a borrowed
     convention readers already know, and recolouring it to brand violet would
     make it stop reading as a rating. One value, so the two hand-picked golds
     that used to exist cannot drift apart again. */
  --color-rating: #f0a500;

  /* ── Colors — signature pebble gradient ───────────────────────────── */
  --color-pebble-warm: #d49a8e;
  --color-pebble-lavender: #a48fd6;
  --color-pebble-deep: #4e2da8;

  /* Tone variants of the pebble. Each is a three-stop run through the same
     warm → lavender → deep structure. */
  --color-pebble-warm-light: #ffd3bf;
  --color-pebble-warm-mid: #ffa088;
  --color-pebble-warm-deep: #c93832;
  --color-pebble-cool-light: #d8c5f6;
  --color-pebble-cool-mid: #a58dde;
  --color-pebble-cool-deep: #4626a3;
  --color-pebble-deep-top: #6b58a8;
  --color-pebble-deep-mid: #1f1746;

  /* The pebble: a saturated diagonal run from deep blue-violet through the
     brand violet into signal red. The pink midtone is not a stop — it is what
     the interpolation between primary and signal produces on its own, which is
     why no fourth colour is needed and none is allowed.
     A linear run, not a conic swirl: the swirl put every hue on every edge and
     read as muddy at small sizes. */
  --gradient-pebble:
    radial-gradient(
      circle at 30% 24%,
      rgba(255, 255, 255, 0.3) 0%,
      transparent 54%
    ),
    linear-gradient(
      142deg,
      var(--color-pebble-cool-deep) 0%,
      var(--color-primary) 38%,
      var(--color-signal) 92%
    );
  --gradient-signature-line: linear-gradient(
    90deg,
    var(--color-signal),
    var(--color-primary),
    var(--color-ink)
  );

  /* ── The signature: the atmospheric mesh.
   *
   * A contained wash of light behind the hero — not an edge-to-edge bleed.
   * It sits inside the content container with a visible boundary, so the eye
   * can tell where it starts and where it ends; an unbounded wash reads as a
   * rendering artifact rather than as a deliberate element.
   *
   * The palette is COOL. The warm pebble stops (peach, coral) muddy on white
   * and quietly reintroduce the warm family this system removed — the mesh
   * runs lavender → violet → deep violet with a single soft indigo anchor. */
  --gradient-backdrop:
    radial-gradient(
      70% 90% at 12% 25%,
      var(--color-pebble-cool-light) 0%,
      transparent 64%
    ),
    radial-gradient(
      60% 80% at 38% 8%,
      var(--color-pebble-cool-mid) 0%,
      transparent 60%
    ),
    radial-gradient(
      65% 95% at 66% 35%,
      var(--color-primary) 0%,
      transparent 58%
    ),
    radial-gradient(
      55% 80% at 90% 12%,
      var(--color-pebble-cool-deep) 0%,
      transparent 62%
    ),
    radial-gradient(
      60% 85% at 100% 55%,
      var(--color-pebble-deep-mid) 0%,
      transparent 66%
    );

  /* ── Typography — families.
   * next/font owns these at runtime: layout.tsx puts its generated classes on
   * <body>, which sits below :root and therefore wins inside the document.
   * The stacks here are the fallback if that class ever fails to apply, and
   * the record of what the families are supposed to be. */
  --font-sans:
    "Satoshi", "DM Sans", "Work Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono:
    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ── Typography — roles.
   *
   * The editorial-density scale: display type is LIGHT (300), not bold, and
   * carries its weight through size and negative tracking instead. Body sits
   * at 300 too, with a tight 1.4 leading. Only controls and labels step up to
   * 400 — they need to read as tappable, not as prose.
   *
   * Satoshi ships 300/400/500/700/900. 600 and 650 are NOT loaded, so any
   * declaration at those values gets synthesised by the browser; the scale
   * below only uses weights that actually exist. */
  /* Die Untergrenze traegt das Handy: 2rem liess die Zeile dort neben dem
     Fliesstext zu wenig herausstechen. 2.375rem gibt ihr wieder Vorsprung,
     ohne die Obergrenze am Desktop anzutasten. */
  --type-display-xl-size: clamp(2.375rem, 4vw, 3.5rem);
  /* Heavier than the rest of the display tier on purpose: this is the one
     line that has to carry a page by itself. Every hero on the site reads
     from this token, so no page can end up bolder than another. */
  --type-display-xl-weight: 500;
  --type-display-xl-lh: 1.03;
  --type-display-xl-ls: -1.4px;

  --type-display-lg-size: clamp(1.75rem, 3.4vw, 3rem);
  --type-display-lg-weight: 300;
  --type-display-lg-lh: 1.08;
  --type-display-lg-ls: -0.96px;

  /* The section-heading role. Weight and tracking live here, not in each
     section's own stylesheet — that split is exactly why three different
     treatments were in circulation at the same size. */
  --type-display-md-size: clamp(1.5rem, 2.6vw, 2rem);
  --type-display-md-weight: 500;
  --type-display-md-lh: 1.08;
  --type-display-md-ls: -0.96px;

  --type-headline-size: clamp(1.375rem, 2vw, 1.625rem);
  --type-headline-weight: 300;
  --type-headline-lh: 1.12;
  --type-headline-ls: -0.26px;

  --type-card-title-size: 1.5rem;
  --type-card-title-weight: 400;
  --type-card-title-lh: 1.1;
  --type-card-title-ls: -0.22px;

  --type-subhead-size: 1.375rem;
  --type-subhead-weight: 400;
  --type-subhead-lh: 1.4;
  --type-subhead-ls: -0.2px;

  --type-body-lg-size: 1.25rem;
  --type-body-lg-weight: 400;
  --type-body-lg-lh: 1.55;
  --type-body-lg-ls: 0;

  --type-body-size: 1.0625rem;
  --type-body-weight: 400;
  --type-body-lh: 1.55;
  --type-body-ls: 0;

  --type-body-sm-size: 1rem;
  --type-body-sm-weight: 400;
  --type-body-sm-lh: 1.55;
  --type-body-sm-ls: 0;

  /* Tabular figures wherever numbers are compared down a column — prices,
     minutes, latencies. Without them the columns visibly ripple. */
  --type-tabular-size: 1rem;
  --type-tabular-weight: 400;
  --type-tabular-lh: 1.55;
  --type-tabular-ls: -0.42px;

  --type-caption-size: 0.875rem;
  --type-caption-weight: 400;
  --type-caption-lh: 1.4;
  --type-caption-ls: 0;

  /* Pflichttext: Einwilligungen, Haftungshinweise. Die einzige Rolle unter
     caption und ausschliesslich dafuer da - Fliesstext, Labels und Bildunter-
     schriften bleiben caption oder groesser. */
  --type-legal-size: 0.8125rem;
  --type-legal-weight: 400;
  --type-legal-lh: 1.45;
  --type-legal-ls: 0;

  --type-button-size: 1rem;
  --type-button-weight: 400;
  --type-button-lh: 1;
  --type-button-ls: 0;

  --type-eyebrow-size: 0.875rem;
  --type-eyebrow-weight: 400;
  --type-eyebrow-lh: 1.3;
  --type-eyebrow-ls: 0.8px;

  --type-mono-size: 1rem;
  --type-mono-weight: 400;
  --type-mono-lh: 1.4;
  --type-mono-ls: 0;

  /* Weight axis.
     Display is light (300) — that is the voice. Running text and UI sit at
     400-500, because 300 at 15px is not a readable body weight in German,
     where compounds run long. 700 stays available for genuine emphasis. */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 500;
  --weight-display: 300;
  --weight-bold: 700;

  /* ── Radius.
   * Tight. A 40px corner reads as consumer-app friendly; this system wants
   * infrastructure-grade, so containers top out at 24px and most sit at 12.
   * Only controls are fully round. */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-xxl: 24px;
  --radius-pill: 999px;
  --radius-full: 999px;

  /* ── Spacing.
   * One step tighter than a conventional 8pt scale: editorial density means
   * elements sit closer together, and the air goes into the section gaps
   * instead of into every gap. */
  --space-xxs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-xxl: 32px;
  --space-xxxl: 48px;
  --space-huge: 64px;
  --space-section: 96px;

  /* ── Alpha overlays.
   * Derived from the colours above, not independent hues. They exist because
   * a translucent wash cannot be expressed as a solid token. */
  --color-ink-a-10: rgba(0, 20, 45, 0.1);
  --color-primary-a-45: rgba(104, 61, 212, 0.45);
  --color-primary-a-50: rgba(104, 61, 212, 0.5);
  --color-primary-a-70: rgba(104, 61, 212, 0.7);
  --color-signal-a-45: rgba(252, 77, 73, 0.45);
  --color-nav-backdrop: color-mix(
    in oklab,
    var(--color-canvas) 90%,
    transparent
  );

  /* ── Elevation. Every shadow is navy-tinted, never neutral black. ─── */
  --shadow-1: 0 1px 2px rgba(0, 20, 45, 0.04), 0 0 0 1px rgba(0, 20, 45, 0.04);
  --shadow-2: 0 4px 14px rgba(0, 20, 45, 0.06), 0 1px 2px rgba(0, 20, 45, 0.03);
  --shadow-3: 0 16px 40px rgba(0, 20, 45, 0.1), 0 2px 4px rgba(0, 20, 45, 0.04);
  --shadow-primary: 0 6px 18px rgba(104, 61, 212, 0.18);
  --shadow-primary-hover: 0 6px 18px rgba(86, 48, 181, 0.24);
  --shadow-signal: 0 6px 18px rgba(252, 77, 73, 0.18);
  --shadow-signal-hover: 0 6px 18px rgba(224, 58, 54, 0.22);

  /* The one focus indicator in the system. */
  --ring: 0 0 0 4px rgba(104, 61, 212, 0.18);

  /* ── Motion — one curve for the whole system ──────────────────────── */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --duration-fast: 150ms;
  --duration-base: 220ms;
  --duration-slow: 280ms;
  --duration-drift: 4s;
  --duration-pulse: 1.8s;

  /* ── Layout ───────────────────────────────────────────────────────── */
  --container-max: 1280px;
  --container-narrow: 760px;
  --gutter: clamp(20px, 4vw, 64px);
  --header-height: 96px;
  --section-gap: clamp(52px, 7.2vw, 112px);
  --component-gap: clamp(20px, 3.2vw, 36px);
  --measure-readable: 72ch;
  --measure-compact: 58ch;

  /* Control heights. Tighter than before to match the editorial density, but
     the small size still clears the 44px tap target — density is a style
     choice, a too-small tap target is a defect. */
  --control-height-sm: 40px;
  --control-height-md: 44px;
}

/*
 * Dark = surface inversion, not a second palette. The navy that carries
 * inverse panels in light becomes the canvas; white becomes the flip. Violet,
 * signal red, and the semantic pair lift one step so they clear contrast on
 * navy, and shadows go black-based — a navy tint on navy is invisible.
 *
 * Opt-in via [data-theme="dark"]; the site currently ships light only.
 */
[data-theme="dark"] {
  color-scheme: dark;

  --color-primary: #8465e8;
  --color-primary-hover: #9b82ef;
  --color-primary-soft: #2a1f52;
  --color-primary-tint: #1b1638;

  --color-signal: #fc4d49;
  --color-signal-hover: #ff6a66;
  --color-signal-soft: #3a1a1f;
  --color-signal-tint: #2a1418;

  --color-ink: #ffffff;
  --color-ink-2: #e6eaf2;
  --color-ink-3: #c9d2e0;
  --color-ink-muted: #93a0b6;
  --color-ink-subtle: #6f7f9b;
  --color-ink-faint: #4a5a76;

  --color-canvas: #00142d;
  --color-surface-1: #0a1f3d;
  --color-surface-2: #14294a;
  --color-surface-inverse: #ffffff;
  --color-on-inverse: #00142d;
  --color-on-inverse-muted: #2e3d5a;
  --color-hairline: #1e3050;
  --color-hairline-strong: #2e4062;

  --color-success: #4fc08d;
  --color-success-soft: #10362a;
  --color-warning: #e0a44a;
  --color-warning-soft: #3a2a12;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --shadow-2: 0 4px 14px rgba(0, 0, 0, 0.36), 0 1px 2px rgba(0, 0, 0, 0.24);
  --shadow-3: 0 16px 40px rgba(0, 0, 0, 0.48), 0 2px 4px rgba(0, 0, 0, 0.28);
  --shadow-primary: 0 6px 18px rgba(132, 101, 232, 0.24);
  --shadow-primary-hover: 0 6px 18px rgba(155, 130, 239, 0.28);

  --ring: 0 0 0 4px rgba(132, 101, 232, 0.3);

  /* Alpha overlays invert with the ink they are derived from. */
  --color-ink-a-10: rgba(255, 255, 255, 0.1);
  --color-primary-a-45: rgba(132, 101, 232, 0.45);
  --color-primary-a-50: rgba(132, 101, 232, 0.5);
  --color-primary-a-70: rgba(132, 101, 232, 0.7);
}

/*
 * Motion is optional. Every animated component must render its END state
 * here — a frozen `opacity: 0` start state hides content and is a bug.
 */
/* ── Fliesstext auf dem Handy ─────────────────────────────────────────
   Die Regel "Body sizes do not scale" gilt weiter fuer body und body-sm: 17px
   sind 17px auf jeder Breite. body-lg ist die Ausnahme.

   Der Grund ist die Zeilenlaenge, nicht die Lesbarkeit: 20px auf 390px Breite
   ergeben rund 28 Zeichen je Zeile. Ein Absatz zerfaellt dort in sechs bis
   sieben kurze Zeilen und liest sich als Liste statt als Text. Eine Stufe
   tiefer bringt ihn auf ein normales Mass, ohne body-lg mit body
   zusammenfallen zu lassen - der Abstand zwischen den beiden Rollen bleibt.

   Im Token, nicht je Komponente: alle 20 Aufrufstellen folgen damit von
   selbst und koennen nicht auseinanderlaufen. */
@media (max-width: 768px) {
  :root {
    /* Eine weitere Stufe herunter. body-lg trifft sich hier mit body - auf
       einer 390px-Spalte ist der Unterschied zwischen 18 und 17px ohnehin
       keine Hierarchie mehr, sondern nur noch eine laengere Zeile. Auf dem
       Desktop bleiben die beiden Rollen getrennt. */
    --type-body-lg-size: 1.0625rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 1ms;
    --duration-base: 1ms;
    --duration-slow: 1ms;
    --duration-drift: 1ms;
    --duration-pulse: 1ms;
  }
}
*,*::before,*::after{box-sizing:border-box;}html{color-scheme:light;background:var(--color-canvas);scroll-behavior:smooth;}body{margin:0;color:var(--color-ink);background:var(--color-canvas);font-family:var(--font-sans);font-size:var(--type-body-size);font-weight:var(--type-body-weight);line-height:var(--type-body-lh);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;}button,a,input{font:inherit;}a{color:inherit;}[hidden]{display:none !important;}.page-shell{--page-guide-inset:max(var(--space-xl),calc(50% - 320px));--page-guide-line:color-mix(in srgb,var(--color-ink) 7%,transparent);position:relative;min-height:100vh;overflow-x:clip;isolation:isolate;background-image:linear-gradient(to bottom,var(--page-guide-line),var(--page-guide-line)),linear-gradient(to bottom,var(--page-guide-line),var(--page-guide-line));background-repeat:no-repeat;background-size:1px 100%;background-position:var(--page-guide-inset) 0,calc(100% - var(--page-guide-inset)) 0;}[data-site-component="section"]{position:relative;background-image:linear-gradient(to bottom,var(--page-guide-line),var(--page-guide-line)),linear-gradient(to bottom,var(--page-guide-line),var(--page-guide-line)),linear-gradient(to right,var(--page-guide-line),var(--page-guide-line));background-repeat:no-repeat;background-size:1px 100%,1px 100%,100% 1px;background-position:var(--page-guide-inset) 0,calc(100% - var(--page-guide-inset)) 0,0 100%;}[data-site-component="section"][data-site-last="true"]{background-image:linear-gradient(to bottom,var(--page-guide-line),var(--page-guide-line)),linear-gradient(to bottom,var(--page-guide-line),var(--page-guide-line));background-size:1px 100%;background-position:var(--page-guide-inset) 0,calc(100% - var(--page-guide-inset)) 0;}[data-site-rule="bottom"]{position:relative;background-image:linear-gradient(to right,var(--page-guide-line),var(--page-guide-line));background-repeat:no-repeat;background-size:100% 1px;background-position:0 100%;}[data-site-component="section"]::before,[data-site-component="section"]::after,[data-site-rule="bottom"]::before,[data-site-rule="bottom"]::after{content:"+";position:absolute;bottom:-7px;z-index:2;color:color-mix(in srgb,var(--color-ink) 22%,transparent);font-size:var(--type-body-sm-size);line-height:1;pointer-events:none;}[data-site-component="section"]::before,[data-site-rule="bottom"]::before{left:var(--page-guide-inset);transform:translateX(-50%);}[data-site-component="section"]::after,[data-site-rule="bottom"]::after{right:var(--page-guide-inset);transform:translateX(50%);}[data-site-component="section"][data-site-last="true"]::before,[data-site-component="section"][data-site-last="true"]::after{display:none;}.backdrop{position:absolute;inset:0 -12% auto;z-index:-1;height:520px;pointer-events:none;background:var(--gradient-backdrop);filter:blur(72px);opacity:0.26;mask-image:radial-gradient(120% 100% at 50% 12%,currentColor 0 38%,transparent 88%);}.container{width:100%;max-width:640px;margin-inline:auto;padding-inline:var(--space-xl);}.site-header{padding-block:var(--space-xxl) var(--space-lg);}.header-inner,.footer-inner,.qualifier-head,.qualifier-actions,.testimonial-author{display:flex;align-items:center;gap:var(--space-lg);}.header-inner{justify-content:center;}.brand-lockup{display:block;width:136px;height:auto;}.panel-kicker,.eyebrow{margin:0;color:var(--color-primary-hover);font-size:var(--type-eyebrow-size);font-weight:var(--type-eyebrow-weight);line-height:var(--type-eyebrow-lh);letter-spacing:var(--type-eyebrow-ls);text-transform:uppercase;}.eyebrow-pill{display:inline-flex;padding:var(--space-xs) var(--space-md);border-radius:var(--radius-pill);background:var(--color-primary-tint);}.proof-wrap{display:flex;justify-content:center;padding-block:var(--space-sm) var(--space-xl);}.proof-strip{display:grid;width:100%;max-width:520px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));margin:0;padding:var(--space-md);border:1px solid var(--color-hairline);border-radius:var(--radius-pill);background:var(--color-canvas);box-shadow:var(--shadow-1);list-style:none;}.proof-strip li{display:flex;min-width:0;align-items:center;justify-content:center;gap:var(--space-xs);padding-inline:var(--space-md);text-align:center;}.proof-strip li + li{border-left:1px solid var(--color-hairline);}.proof-strip li:only-child{grid-column:1 / -1;}.proof-value{font-weight:var(--weight-medium);font-variant-numeric:tabular-nums;}.proof-rating{display:inline-flex;align-items:center;gap:var(--space-xxs);white-space:nowrap;}.proof-stars{color:var(--color-rating);font-size:var(--type-caption-size);line-height:1;letter-spacing:0.02em;}.proof-label{color:var(--color-ink-muted);font-size:var(--type-caption-size);white-space:nowrap;}.hero{display:grid;gap:var(--space-xl);padding-block:var(--space-xl) var(--space-huge);}.flow-card{min-width:0;width:100%;padding:clamp(32px,6vw,48px);border:1px solid var(--color-hairline);border-radius:var(--radius-xxl);background:var(--color-canvas);box-shadow:var(--shadow-3);}.flow-card:focus{outline:none;box-shadow:var(--shadow-3),var(--ring);}.qualifier-step legend:focus,.contact-step h3:focus,.success-state:focus{outline:none;}h1,h2,h3,p{margin-block-start:0;}h1{max-width:22ch;margin-block:var(--space-lg);font-size:var(--type-display-lg-size);font-weight:var(--weight-medium);line-height:var(--type-display-lg-lh);letter-spacing:var(--type-display-lg-ls);}h2{margin-block-end:var(--space-lg);font-size:var(--type-display-md-size);font-weight:var(--type-display-md-weight);line-height:var(--type-display-md-lh);letter-spacing:var(--type-display-md-ls);}h3{margin-block-end:var(--space-sm);font-size:var(--type-card-title-size);font-weight:var(--weight-medium);line-height:1.15;letter-spacing:var(--type-card-title-ls);}.hero-body,.section-body{max-width:var(--measure-compact);color:var(--color-ink-3);}.hero-body{margin-block-end:var(--space-xxl);}.section-body{margin-block-end:0;}.qualifier-head{align-items:flex-start;justify-content:space-between;}.step-count{color:var(--color-ink-muted);font-size:var(--type-caption-size);white-space:nowrap;}progress{display:block;width:100%;height:var(--space-xs);margin-block:var(--space-xl) var(--space-lg);overflow:hidden;border:0;border-radius:var(--radius-pill);background:var(--color-surface-2);color:var(--color-primary);appearance:none;}progress::-webkit-progress-bar{background:var(--color-surface-2);}progress::-webkit-progress-value{background:var(--color-primary);transition:width var(--duration-base) var(--ease);}progress::-moz-progress-bar{background:var(--color-primary);}.qualifier-step{min-width:0;padding:0;border:0;}.qualifier-step + .qualifier-step{margin-block-start:var(--space-xxl);padding-block-start:var(--space-xxl);border-top:1px solid var(--color-hairline);}legend{max-width:28ch;margin-block-end:var(--space-lg);padding:0;color:var(--color-ink);font-size:var(--type-headline-size);font-weight:var(--weight-medium);line-height:var(--type-headline-lh);}legend:focus{outline:none;}.answers{display:grid;gap:var(--space-sm);}.answer{position:relative;display:block;cursor:pointer;}.answer input,.skip-button input{position:absolute;width:1px;height:1px;opacity:0;}.answer span,.back-button{display:flex;width:100%;min-height:var(--control-height-md);align-items:center;padding:var(--space-md) var(--space-lg);border:1px solid var(--color-hairline-strong);border-radius:var(--radius-lg);color:var(--color-ink-2);background:var(--color-canvas);cursor:pointer;text-align:left;transition:border-color var(--duration-fast) var(--ease),background var(--duration-fast) var(--ease);}.answer:hover span,.answer input:checked + span{border-color:var(--color-primary);background:var(--color-primary-tint);}.answer input:focus-visible + span,.skip-button input:focus-visible + span,.back-button:focus-visible,.button:focus-visible,.field input:focus-visible,.consent-row input:focus-visible,.site-footer a:focus-visible{outline:none;box-shadow:var(--ring);}.skip-button{position:relative;display:block;width:100%;margin-block-start:var(--space-sm);color:var(--color-ink-muted);cursor:pointer;}.skip-button span{display:flex;min-height:var(--control-height-md);align-items:center;justify-content:center;padding:var(--space-md) var(--space-lg);border:1px solid var(--color-hairline);border-radius:var(--radius-pill);background:var(--color-surface-1);transition:border-color var(--duration-fast) var(--ease),background var(--duration-fast) var(--ease);}.skip-button:hover span,.skip-button input:checked + span{border-color:var(--color-primary-soft);color:var(--color-primary-hover);background:var(--color-primary-tint);}.qualifier-actions{justify-content:space-between;margin-block-start:var(--space-xxl);padding-block-start:var(--space-xl);border-top:1px solid var(--color-hairline);}.back-button{min-width:44px;width:auto;padding-inline:var(--space-lg);border-color:transparent;border-radius:var(--radius-pill);background:transparent;text-align:center;}.back-button:disabled{visibility:hidden;}.button{display:inline-flex;min-width:9rem;min-height:var(--control-height-md);align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-xl);border:1px solid transparent;border-radius:var(--radius-pill);cursor:pointer;font-size:var(--type-button-size);font-weight:var(--weight-medium);line-height:var(--type-button-lh);letter-spacing:var(--type-button-ls);text-decoration:none;white-space:nowrap;transition:background var(--duration-fast) var(--ease),box-shadow var(--duration-fast) var(--ease);}.button-primary{color:var(--color-on-primary);background:var(--color-primary);box-shadow:var(--shadow-primary);}.button-primary:hover{background:var(--color-primary-hover);box-shadow:var(--shadow-primary-hover);}.button-signal{color:var(--color-on-signal);background:var(--color-signal);box-shadow:var(--shadow-signal);}.button-signal:hover{background:var(--color-signal-hover);box-shadow:var(--shadow-signal-hover);}.button:disabled{cursor:wait;opacity:0.7;}.contact-step{margin-block-start:var(--space-xxl);padding-block-start:var(--space-xxl);border-top:1px solid var(--color-hairline);}html[data-enhanced="true"] .contact-step{margin-block-start:0;padding-block-start:0;border-top:0;}.contact-step h3,.success-state h3{margin-block:var(--space-sm) var(--space-lg);}.contact-body{color:var(--color-ink-3);}.contact-fields{display:grid;gap:var(--space-lg);}.field{display:grid;gap:var(--space-sm);color:var(--color-ink-2);}.field>span{font-weight:var(--weight-medium);}.field small{display:block;margin-block-start:var(--space-xxs);color:var(--color-ink-muted);font-size:var(--type-caption-size);font-weight:var(--weight-regular);line-height:var(--type-caption-lh);}.field input{width:100%;min-height:var(--control-height-md);padding:10px var(--space-md);border:1px solid var(--color-hairline-strong);border-radius:var(--radius-md);color:var(--color-ink);background:var(--color-canvas);}.field input:focus-visible{border-color:var(--color-primary);}.consent-row{display:grid;min-height:var(--control-height-md);grid-template-columns:auto 1fr;gap:var(--space-md);align-items:start;margin-block:var(--space-xl);color:var(--color-ink-muted);font-size:var(--type-legal-size);line-height:var(--type-legal-lh);}.consent-row input{width:20px;height:20px;margin:0;accent-color:var(--color-primary);}.consent-row a{text-underline-offset:3px;}.submit-button{width:100%;align-self:stretch;}.form-error{margin:var(--space-lg) 0 0;padding:var(--space-md);border-radius:var(--radius-md);color:var(--color-signal-hover);background:var(--color-signal-tint);}.success-state{padding-block:var(--space-xl);text-align:center;}.success-state p{margin:0;color:var(--color-ink-3);}.status-badge{display:inline-flex;padding:var(--space-xs) var(--space-md);border-radius:var(--radius-pill);color:var(--color-success);background:var(--color-success-soft);font-size:var(--type-caption-size);}.honeypot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden;}.button-inverse{color:var(--color-ink);background:var(--color-white);}.button-inverse:hover{background:var(--color-surface-1);}.friction-list{display:flex;flex-wrap:wrap;gap:var(--space-sm) var(--space-lg);margin:var(--space-xl) 0 0;padding:var(--space-lg) 0 0;border-top:1px solid var(--color-hairline);color:var(--color-ink-muted);font-size:var(--type-caption-size);list-style:none;}.friction-list li::before{content:"✓";margin-inline-end:var(--space-xs);color:var(--color-success);font-weight:var(--weight-medium);}.page-section{padding-block:var(--space-huge);}.section-heading{max-width:var(--measure-compact);margin:0 auto var(--space-xxl);text-align:center;}.section-heading h2{max-width:22ch;margin:var(--space-lg) auto;}.benefits-section{background-color:var(--color-surface-1);}.feature-grid{display:grid;grid-template-columns:1fr;gap:var(--space-lg);}.feature-card{min-width:0;padding:var(--space-xl);border:1px solid var(--color-hairline);border-radius:var(--radius-lg);background:var(--color-canvas);box-shadow:var(--shadow-1);}.feature-grid>.feature-card{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:var(--space-lg);align-items:start;}.feature-grid>.feature-card .feature-icon-well{grid-row:1 / span 2;margin:0;}.feature-grid>.feature-card h3,.feature-grid>.feature-card p{grid-column:2;}.feature-card p{margin:0;color:var(--color-ink-muted);}.feature-icon-well{display:grid;width:48px;height:48px;margin-block-end:var(--space-xl);place-items:center;border-radius:var(--radius-sm);color:var(--color-primary);background:var(--color-primary-tint);}.feature-icon{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}.integration-panel,.cta-banner{padding:clamp(32px,6vw,40px);border:1px solid color-mix(in srgb,var(--color-white) 10%,transparent);border-radius:var(--radius-xxl);color:var(--color-on-inverse);background:var(--color-surface-inverse);text-align:center;}.integration-panel{display:grid;gap:var(--space-xl);}.inverse-eyebrow{color:var(--color-primary-soft);}.integration-copy h2,.cta-banner h2{max-width:22ch;margin:var(--space-lg) auto;color:var(--color-on-inverse);}.integration-copy>p:last-child,.cta-banner p:last-child{margin:0;color:var(--color-on-inverse-muted);}.integration-orbit{position:relative;width:min(100%,360px);aspect-ratio:1;margin-inline:auto;isolation:isolate;animation:integration-orbit-float 5.6s ease-in-out infinite;}.integration-orbit-ring{position:absolute;top:50%;left:50%;aspect-ratio:1;transform:translate(-50%,-50%);border:1px solid color-mix(in srgb,var(--color-white) 16%,transparent);border-radius:var(--radius-full);}.integration-orbit-ring-outer{width:86%;}.integration-orbit-ring-inner{width:48%;}.integration-orbit-core{position:absolute;z-index:2;top:50%;left:50%;display:grid;width:76px;height:76px;transform:translate(-50%,-50%);place-items:center;border-radius:var(--radius-full);background:var(--color-primary);box-shadow:var(--shadow-primary);}.integration-orbit-core img{width:44px;height:44px;object-fit:contain;}.integration-orbit-group{position:absolute;z-index:1;inset:0;transform-origin:center;}.integration-orbit-outer{animation:integration-orbit-spin 34s linear infinite;}.integration-orbit-inner{animation:integration-orbit-spin-reverse 26s linear infinite;}.integration-orbit-item{position:absolute;display:grid;width:48px;height:48px;transform:translate(-50%,-50%);place-items:center;}.integration-orbit-item-content{display:grid;width:100%;height:100%;place-items:center;border:1px solid color-mix(in srgb,var(--color-white) 18%,transparent);border-radius:var(--radius-lg);background:var(--color-canvas);box-shadow:var(--shadow-1);}.integration-orbit-item img{width:68%;height:68%;object-fit:contain;}.integration-orbit-outer .integration-orbit-item-content{animation:integration-orbit-spin-reverse 34s linear infinite;}.integration-orbit-inner .integration-orbit-item-content{animation:integration-orbit-spin 26s linear infinite;}.integration-orbit-outer .integration-orbit-item:nth-child(1){top:7%;left:50%;}.integration-orbit-outer .integration-orbit-item:nth-child(2){top:50%;left:93%;}.integration-orbit-outer .integration-orbit-item:nth-child(3){top:93%;left:50%;}.integration-orbit-outer .integration-orbit-item:nth-child(4){top:50%;left:7%;}.integration-orbit-inner .integration-orbit-item:nth-child(1){top:33%;left:33%;}.integration-orbit-inner .integration-orbit-item:nth-child(2){top:33%;left:67%;}.integration-orbit-inner .integration-orbit-item:nth-child(3){top:67%;left:67%;}.integration-orbit-inner .integration-orbit-item:nth-child(4){top:67%;left:33%;}@keyframes integration-orbit-spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}@keyframes integration-orbit-spin-reverse{from{transform:rotate(360deg);}to{transform:rotate(0deg);}}@keyframes integration-orbit-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}.testimonial-grid{display:grid;gap:var(--space-lg);}.testimonial-card{display:flex;min-height:100%;flex-direction:column;padding:var(--space-xl);border:1px solid var(--color-hairline);border-radius:var(--radius-xl);background:var(--color-surface-1);}.testimonial-stat{display:grid;gap:var(--space-xxs);margin-block-end:var(--space-xl);padding-block-end:var(--space-xl);border-bottom:1px solid var(--color-hairline-strong);color:var(--color-ink-muted);font-size:var(--type-caption-size);}.testimonial-stat-value{color:var(--color-primary);font-size:var(--type-display-md-size);font-weight:var(--type-display-md-weight);font-variant-numeric:tabular-nums;}blockquote{margin:0 0 var(--space-xxl);}blockquote p{margin:0;font-size:var(--type-body-lg-size);line-height:var(--type-body-lg-lh);}.testimonial-author{justify-content:flex-start;margin-block-start:auto;}.testimonial-initials{display:grid;width:48px;height:48px;flex:0 0 48px;place-items:center;border-radius:var(--radius-full);color:var(--color-on-inverse);background:var(--color-surface-inverse);}.testimonial-author strong,.testimonial-author div span{display:block;}.testimonial-author strong{font-weight:var(--weight-medium);}.testimonial-author div span{color:var(--color-ink-muted);font-size:var(--type-caption-size);}.cta-banner{display:flex;align-items:center;flex-direction:column;gap:var(--space-xxl);}.cta-banner>div{max-width:var(--measure-compact);}.details-section{background-color:var(--color-surface-1);}.details-grid{display:grid;gap:var(--space-xxl);}.details-grid>div:first-child{text-align:center;}.details-grid h2{max-width:18ch;margin:var(--space-lg) auto 0;}.faq-list{border-top:1px solid var(--color-hairline-strong);}.faq-list details{border-bottom:1px solid var(--color-hairline-strong);}.faq-list summary{padding-block:var(--space-xl);cursor:pointer;font-weight:var(--weight-medium);}.faq-list summary:focus-visible{outline:none;box-shadow:var(--ring);}.faq-list p{max-width:var(--measure-compact);padding-block-end:var(--space-xl);color:var(--color-ink-3);}.site-footer{padding-block:var(--space-xxl);color:var(--color-ink-muted);font-size:var(--type-caption-size);}.footer-inner{justify-content:center;flex-direction:column;text-align:center;}.site-footer nav{display:flex;gap:var(--space-lg);}.site-footer a{border-radius:var(--radius-xs);text-underline-offset:4px;}@media (max-width:768px){.backdrop{inset-inline:-20%;height:340px;filter:blur(48px);}.flow-card{padding:var(--space-xl);border-radius:var(--radius-xl);}.feature-card{padding:var(--space-lg);border-radius:var(--radius-md);}.testimonial-card{padding:var(--space-lg);border-radius:var(--radius-lg);}}@media (max-width:480px){.page-shell{--page-guide-inset:var(--space-sm);--mobile-content-gutter:clamp(20px,6.25vw,var(--space-xl));--mobile-surface-padding:clamp(20px,6.25vw,var(--space-xl));}.container{padding-inline:var(--mobile-content-gutter);}.site-header{padding-block:var(--space-lg) var(--space-sm);}.proof-wrap{padding-block:var(--space-xs) var(--space-md);}html[data-enhanced="true"] .page-shell:has(.qualifier:not([hidden])) .proof-wrap{display:none;}.hero{gap:var(--space-lg);padding-block:var(--space-sm) var(--space-xxxl);}.flow-card{padding:var(--mobile-surface-padding);}.page-section{padding-block:var(--space-xxxl);}h1{max-width:none;font-size:clamp(1.5rem,7.5vw,1.75rem);}.eyebrow-pill{max-width:100%;white-space:normal;}.proof-strip{padding:var(--space-md);border-radius:var(--radius-xl);grid-template-columns:repeat(2,minmax(0,1fr));}.proof-strip li{align-items:center;flex-direction:column;padding-inline:var(--space-sm);}.hero-body{margin-block-end:var(--space-xl);}progress{margin-block:var(--space-xl) var(--space-lg);}.button{min-width:0;max-width:100%;width:100%;padding-inline:var(--space-lg);text-align:center;white-space:normal;}.button>span{flex:0 0 auto;}.qualifier-actions{gap:var(--space-lg);margin-block-start:var(--space-xxl);padding-block-start:var(--space-xl);}.contact-step h3{font-size:var(--type-headline-size);line-height:var(--type-headline-lh);}.contact-body{font-size:var(--type-body-sm-size);line-height:1.5;}.field>span{font-size:var(--type-body-sm-size);line-height:1.5;}.field small{display:inline;margin-block-start:0;margin-inline-start:var(--space-xs);}.form-trust{margin-block-start:var(--space-md);padding-block-start:var(--space-md);line-height:var(--type-caption-lh);}.section-heading{margin-block-end:var(--space-xxl);}.feature-grid>.feature-card{grid-template-columns:40px minmax(0,1fr);column-gap:var(--space-md);row-gap:var(--space-sm);}.feature-grid>.feature-card .feature-icon-well{width:40px;height:40px;grid-row:1;}.feature-grid>.feature-card h3{align-self:center;margin:0;line-height:var(--type-card-title-lh);}.feature-grid>.feature-card p{grid-column:1 / -1;font-size:var(--type-body-sm-size);line-height:var(--type-body-sm-lh);}.integration-panel,.cta-banner{padding:var(--mobile-surface-padding);border-radius:var(--radius-xl);}.integration-panel{gap:var(--space-xl);}.integration-orbit{width:min(100%,280px);}.integration-orbit-item{width:42px;height:42px;}.integration-orbit-core{width:68px;height:68px;}.cta-banner{gap:var(--space-xl);}.details-grid{gap:var(--space-xl);}.faq-list summary{padding-block:var(--space-xl);}.faq-list p{padding-block-end:var(--space-xl);}}.resource-body{min-height:100vh;padding:var(--space-xl);background:var(--color-surface-1);}.resource-page{width:min(100%,900px);margin-inline:auto;padding:var(--space-xxl);border:1px solid var(--color-hairline);border-radius:var(--radius-xxl);background:var(--color-canvas);box-shadow:var(--shadow-3);}.resource-header,.resource-footer{display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg);}.resource-header{padding-block-end:var(--space-xl);border-block-end:1px solid var(--color-hairline);}.resource-badge{padding:var(--space-xs) var(--space-md);border-radius:var(--radius-pill);color:var(--color-primary);background:var(--color-primary-tint);font-size:var(--type-caption-size);font-weight:500;}.resource-hero{padding-block:var(--space-xxl);}.resource-hero h1{max-width:18ch;margin-block:var(--space-md);font-size:var(--type-display-xl-size);font-weight:var(--type-display-xl-weight);line-height:var(--type-display-xl-lh);letter-spacing:var(--type-display-xl-ls);}.resource-hero>p:last-child{max-width:64ch;color:var(--color-ink-muted);font-size:var(--type-body-lg-size);line-height:var(--type-body-lg-lh);}.resource-steps{display:grid;gap:var(--space-lg);margin:0;padding:0;list-style:none;}.resource-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-lg);padding:var(--space-xl);border:1px solid var(--color-hairline);border-radius:var(--radius-xl);background:var(--color-canvas);}.resource-number{color:var(--color-primary);font-size:var(--type-card-title-size);font-weight:500;}.resource-card h2,.resource-offer h2{margin:0;font-size:var(--type-card-title-size);font-weight:var(--type-card-title-weight);line-height:var(--type-card-title-lh);}.resource-checklist{display:grid;gap:var(--space-sm);margin-block:var(--space-md) 0;padding:0;list-style:none;}.resource-checklist li{position:relative;padding-inline-start:var(--space-xl);color:var(--color-ink-3);}.resource-checklist li::before{position:absolute;inset-inline-start:0;color:var(--color-success);content:"✓";}.resource-offer{margin-block-start:var(--space-xl);padding:var(--space-xl);border-radius:var(--radius-xl);color:var(--color-on-inverse);background:var(--color-surface-inverse);}.resource-offer h2{margin-block:var(--space-sm);}.resource-offer p:last-child{color:var(--color-on-inverse-muted);}.resource-footer{margin-block-start:var(--space-xxl);padding-block-start:var(--space-xl);border-block-start:1px solid var(--color-hairline);color:var(--color-ink-muted);font-size:var(--type-caption-size);}.resource-footer a{min-height:44px;display:inline-flex;align-items:center;color:var(--color-primary);font-weight:500;}@media (max-width:640px){.resource-body{padding:var(--space-sm);}.resource-page{padding:var(--space-xl);border-radius:var(--radius-xl);}.resource-header,.resource-footer{align-items:flex-start;flex-direction:column;}.resource-hero{padding-block:var(--space-xl);}.resource-card{grid-template-columns:1fr;padding:var(--space-lg);}}@media print{.resource-body{padding:0;background:var(--color-canvas);}.resource-page{width:100%;padding:0;border:0;box-shadow:none;}.resource-card,.resource-offer{break-inside:avoid;}.resource-footer a{display:none;}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}*,*::before,*::after{transition-duration:1ms !important;}.integration-orbit,.integration-orbit-group,.integration-orbit-item-content{animation:none !important;}}