/* ==========================================================================
   Werkborg theme layer  (build input — copied to assets/css/werkborg.css)
   Loaded after base.css (the vendored Webflow stylesheet). It owns:
     1. brand tokens + self-hosted OFL font faces
     2. states the capture never shipped (re-implemented tabs, FAQ, form status)
     3. motion for the authored SVG scenes, with reduced-motion honoured once
     4. accessibility affordances (focus rings, touch targets)
   It must not change layout geometry — only colour, type, state and motion.
   ========================================================================== */

/* ------------------------------------------------------------------ fonts */
@font-face {
  font-family: "Instrument Serif";
  src: url("/assets/fonts/instrument-serif-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  /* The extended range exists for the Turkish edition: dotted-I and the
     cedillas live here, not in the latin subset. */
  font-family: "Instrument Serif";
  src: url("/assets/fonts/instrument-serif-italic-ext.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("/assets/fonts/source-sans-3.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo Narrow";
  src: url("/assets/fonts/archivo-narrow.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------------ tokens */
:root {
  --wb-ink: #0a2040;
  --wb-deep: #071830;
  --wb-blue: #0066ff;
  --wb-cyan: #00d1ff;
  --wb-checkpoint: #bd3d13;
  --wb-checkpoint-on-ink: #ee7444;
  --wb-green: #14765e;
  --wb-mist: #e8eef7;
  --wb-paper: #ffffff;

  --wb-font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --wb-font-display: "Archivo Narrow", "Arial Narrow", Helvetica, Arial, sans-serif;
  --wb-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Motion. Timings were six unrelated numbers picked one component at a time
     (0.18s, 180ms, 0.3s, 0.35s, 0.4s, 0.45s); nothing on the page moved on the
     same clock. One scale, three speeds.

     Distances stay short on purpose. Every competitor in this category animates
     with the same long fade-up on everything, which is the tell that a page was
     assembled rather than designed. Eight pixels reads as the element settling
     into place; thirty reads as an effect. */
  --wb-dur-fast: 160ms;   /* press, hover — must feel instant */
  --wb-dur-base: 280ms;   /* state change */
  --wb-dur-slow: 420ms;   /* panel, reveal */
  --wb-ease-enter: cubic-bezier(0, 0, 0.2, 1);      /* decelerate: arrives and settles */
  --wb-ease-exit:  cubic-bezier(0.4, 0, 1, 1);      /* accelerate: leaves */
  --wb-ease-std:   cubic-bezier(0.4, 0, 0.2, 1);
  --wb-stagger: 45ms;
}

/* The display face carries the editorial role the capture's licensed condensed
   serif had; tighten it so the vw-locked headline sizes keep their line breaks. */
.c-display-120, .c-display-120-2, .c-display-120-3, .c-display-190, .c-display-190-2,
.c-display-90, .c-display-68, .c-display-45, .c-display-32, .c-home-banner-2-text,
.c-footer-newsletter-text-1, .c-footer-newsletter-text-2, .text-size-120, .text-size-150,
.text-size-68, .text-size-70, .text-size-45 {
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* ------------------------------------------------------------------- a11y */
:where(a, button, input, select, textarea, [tabindex], [role="button"], [role="tab"]):focus-visible {
  outline: 2px solid var(--wb-checkpoint);
  outline-offset: 3px;
  border-radius: 4px;
}
.wb-skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 10000;
  padding: 10px 16px;
  background: var(--wb-ink);
  color: var(--wb-paper);
  font-family: var(--wb-font-body);
  border-radius: 8px;
  transition: top 0.18s ease;
}
.wb-skip-link:focus { top: 12px; }

/* base.css zeroes outline on the Webflow widgets it styles
   (.w-input, .w-select, .w-dropdown-toggle, .w-nav-button, .w-tab-link,
   .w-dropdown-link), and those class-level rules beat the :where()
   focus-visible rule above. Re-arm the ring at class level so keyboard
   focus is visible again; the :focus:not(:focus-visible) guard keeps
   mouse clicks from painting a ring. */
.w-input:focus-visible,
.w-select:focus-visible,
.w-dropdown-toggle:focus-visible,
.w-nav-button:focus-visible,
.w-tab-link:focus-visible,
.w-dropdown-link:focus-visible {
  outline: 2px solid var(--wb-checkpoint);
  outline-offset: 2px;
}
.w-input:focus:not(:focus-visible),
.w-select:focus:not(:focus-visible),
.w-dropdown-toggle:focus:not(:focus-visible),
.w-nav-button:focus:not(:focus-visible),
.w-tab-link:focus:not(:focus-visible),
.w-dropdown-link:focus:not(:focus-visible) {
  outline: none;
}
/* The checkpoint orange sinks into the dark footer/hero surfaces;
   cyan holds contrast there. */
.c-footer .w-input:focus-visible,
.c-footer .w-select:focus-visible,
.c-footer .w-dropdown-toggle:focus-visible,
.c-footer .w-nav-button:focus-visible,
.c-footer .w-tab-link:focus-visible,
.c-footer .w-dropdown-link:focus-visible,
.c-home-hero-wrapper .w-input:focus-visible,
.c-home-hero-wrapper .w-select:focus-visible,
.c-home-hero-wrapper .w-dropdown-toggle:focus-visible,
.c-home-hero-wrapper .w-nav-button:focus-visible,
.c-home-hero-wrapper .w-tab-link:focus-visible,
.c-home-hero-wrapper .w-dropdown-link:focus-visible {
  outline-color: var(--wb-cyan);
}

/* ------------------------------------------------------------- brand logo */
/* The capture's brand slot (.navbar_brand-new) was sized 72x20 for the old
   wordmark's ~5.2:1 aspect ratio. The current lockup is wider (~6.6:1); size
   the box to the asset instead of letting the flex box squash it, and let
   the <img> itself scale proportionally within that box. */
.navbar_brand-new {
  width: 8.25rem !important;
}
.navbar_brand-new img,
.c-footer-brand-new img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.c-footer-logo-wrapper-3 img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}

/* ------------------------------------------------- authored svg scene sizing */
.wb-hero-bg-holder,
.wb-hero-bg-holder svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.wb-call-panel,
.wb-call-panel svg,
.wb-scenario-visual,
.wb-scenario-visual svg,
.wb-tab-scene,
.wb-tab-scene svg,
.wb-studio-scene,
.wb-studio-scene svg,
.wb-demo-wave,
.wb-demo-wave svg,
.wb-abstract-tile,
.wb-abstract-tile svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wb-tab-scene, .wb-studio-scene, .wb-scenario-visual, .wb-call-panel, .wb-demo-wave {
  border-radius: inherit;
  overflow: hidden;
}
.wb-abstract-tile {
  background: var(--wb-deep);
  border-radius: 12px;
  overflow: hidden;
}
.wb-pill-wave, .wb-pill-wave svg {
  display: block;
  width: 100%;
  height: 100%;
}
.wb-cta-icon svg, .wb-social-icon svg, .wb-privacy-icon svg, .wb-scenario-chip svg { display: block; }
/* Secondary-page hero: full-bleed photo with the title overlaid — a
   cinematic banner style, rather than a separate boxed photo stacked
   under the text. */
.wb-page-hero {
  position: relative;
}
.wb-page-hero.has-image {
  display: flex;
  align-items: flex-end;
  min-height: clamp(420px, 46vw, 640px);
  overflow: hidden;
  color: var(--wb-paper);
  padding-top: 0;
  padding-bottom: 0;
}
.wb-page-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.wb-page-hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wb-page-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(10, 32, 64, 0.94) 0%, rgba(10, 32, 64, 0.55) 42%, rgba(10, 32, 64, 0.1) 75%);
}
.wb-page-hero-content {
  position: relative;
  z-index: 1;
  padding: clamp(28px, 4vw, 56px) max(8px, 0.417vw) clamp(40px, 5.5vw, 72px);
}
.wb-page-hero-content .c-section-heading {
  color: var(--wb-cyan);
  justify-content: flex-start;
}
.wb-page-hero-content .new-heading_small-h2,
.wb-page-hero-content .paragraph-size-normal {
  color: var(--wb-paper);
}
.wb-page-hero-content .c-section-title-text {
  max-width: 640px;
}
.wb-icon, .wb-tile-icon { flex: none; }

/* ------------------------------------------------------- local video slots */
/* Existing visual slots receive the approved fictional dramatizations. The
   composition stays native to the capture: a media panel with a restrained
   control over the lower edge, rather than a new video-card pattern. */
.wb-video {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 24px 0 0;
  background: var(--wb-deep);
  border-radius: 14px;
  aspect-ratio: 16 / 9;
}
.wb-video--flagship {
  width: min(100%, 57rem);
  margin: 32px auto 0;
}
.wb-video--scenario {
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  border-radius: inherit;
  aspect-ratio: 330 / 444;
}
.wb-drama {
  padding-top: 32px;
  padding-bottom: 32px;
}
.wb-drama .wb-video {
  width: min(100%, 48rem);
  margin-inline: auto;
  aspect-ratio: 3 / 4;
}

/* The drama slot was authored 3:4 for portrait spots, but most of the films are
   16:9 masters — forcing them into 3:4 threw away roughly 62% of every frame.
   Landscape films carry this modifier and keep their own framing. */
.wb-drama .wb-video--wide {
  aspect-ratio: 16 / 9;
}
.wb-video__el {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--wb-deep);
}
.wb-video__toggle {
  position: absolute;
  z-index: 1;
  left: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 999px;
  background: rgba(7, 24, 48, 0.84);
  color: var(--wb-paper);
  font: 600 13px/1 var(--wb-font-body);
  letter-spacing: -0.01em;
  box-shadow: 0 8px 28px rgba(7, 24, 48, 0.26);
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.wb-video__toggle:hover {
  background: var(--wb-blue);
  border-color: var(--wb-blue);
  transform: translateY(-1px);
}
.wb-video__toggle-icon {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid currentColor;
}
.wb-video.is-playing .wb-video__toggle-icon {
  width: 9px;
  height: 12px;
  border: 0;
  background: linear-gradient(to right, currentColor 0 3px, transparent 3px 6px, currentColor 6px 9px);
}
.wb-video--scenario .wb-video__toggle {
  left: 12px;
  bottom: 12px;
  min-height: 36px;
  padding: 7px 10px;
}

/* The demo visual sits in a 300px circular mask (.is-cahnge in base.css):
   give the authored waveform the dark surface the reference video had. */
.wb-demo-wave {
  background: radial-gradient(circle at 50% 42%, rgba(0, 102, 255, 0.55) 0%, transparent 68%), var(--wb-deep);
  border-radius: inherit;
  display: grid;
  place-items: center;
}
.wb-demo-wave[data-mode="speaking"] .wb-wave__bar { animation-duration: 0.8s; }
.wb-demo-wave[data-mode="listening"] .wb-wave__bar { animation-play-state: paused; opacity: 0.55; }
[data-wb-voice-end] {
  background: transparent;
  border: 1px solid var(--wb-mist);
}

/* Agent Studio slides: the media box keeps its gradient backdrop and the
   authored UI panel floats inside it, as in the reference composition. */
.c-card-lottie-vertical-media .wb-studio-scene {
  padding: clamp(18px, 3.2vw, 46px);
  box-sizing: border-box;
}
.c-card-lottie-vertical-media .wb-studio-scene svg {
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 18px 40px rgba(7, 27, 36, 0.28));
  border-radius: 14px;
}

/* The scenario label replaces a 12x12 quote glyph slot; let it size to content. */
.c-card-testimonial-text-icon {
  width: auto !important;
  height: auto !important;
}

/* Industry / integration marquee tiles keep the 136x30 logo footprint.
   base.css stretches raw <svg> children, so pin the icon box explicitly. */
.wb-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 100%;
  color: var(--wb-ink);
  white-space: nowrap;
}
.wb-tile > svg {
  width: 18px !important;
  height: 18px !important;
  flex: none;
}
.c-marquee-list-item.image-text .wb-tile > svg {
  width: 26px !important;
  height: 26px !important;
}
.wb-tile__label,
.wb-tile .c-marquee-list-item-text {
  font-family: var(--wb-font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: currentColor;
}
.c-rail.logo .wb-tile { opacity: 0.72; }

/* Scenario cards: the label that replaces the decorative quote glyph. */
.wb-scenario-label {
  display: inline-block;
  font-family: var(--wb-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(189, 61, 19, 0.14);
  color: var(--wb-checkpoint);
}
/* Dark card (#0a2040): bright accent text keeps contrast.
   Blue card (#3d6aef): the dark-ink variant measures only ~3.8:1 there,
   so paper text is used instead (white on the blue = ~4.7:1).
   Grey (white) cards keep the default checkpoint label (>= 4.5:1). */
.c-card-testimonial-new.is-dark .wb-scenario-label {
  background: rgba(238, 116, 68, 0.2);
  color: var(--wb-checkpoint-on-ink);
}
.c-card-testimonial-new.is-light-blue .wb-scenario-label {
  /* A white tint lightened the blue card to #5c82f2 and dropped white text to
     3.54:1 — the earlier note assumed the untinted card. A dark tint keeps the
     chip shape and takes it to 5.6:1. */
  background: rgba(0, 0, 0, 0.10);
  color: var(--wb-paper);
}

/* ------------------------------------------------------- re-implemented tabs */
/* base.css ships no active/inactive state for the fs-tabs markup (the Finsweet
   runtime was never captured), so the whole state machine lives here. */
.wb-tabs .fs-c-tabs-tab-item-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.wb-tabs .fs-c-tabs-tab-item.is-active .fs-c-tabs-tab-item-content {
  grid-template-rows: 1fr;
}
.wb-tabs .fs-c-tabs-tab-item-content-wrapper {
  min-height: 0;
  overflow: hidden;
}
.wb-tabs .fs-c-tabs-tab-item-trigger {
  cursor: pointer;
  color: var(--wb-ink);
  opacity: 0.62;
  transition: opacity 0.3s ease;
}
.wb-tabs .fs-c-tabs-tab-item.is-active .fs-c-tabs-tab-item-trigger,
.wb-tabs .fs-c-tabs-tab-item-trigger:hover {
  opacity: 1;
}
.wb-tabs .fs-c-tabs-tab-item-trigger-icon-bar.vertical {
  transition: transform 0.35s ease, opacity 0.35s ease;
}
.wb-tabs .fs-c-tabs-tab-item.is-active .fs-c-tabs-tab-item-trigger-icon-bar.vertical {
  transform: rotate(0deg);
  opacity: 0;
}
.wb-tabs .fs-c-tabs-content-item {
  opacity: 0;
  transform: scale(0.985);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}
.wb-tabs .fs-c-tabs-content-item.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.wb-tabs .fs-c-tabs-content-item[hidden] {
  display: flex; /* keep the grid stack; visibility is driven by .is-active */
}

/* FAQ accordion (the capture had no closed/open CSS state — see wb.js).
   The 40px gap must live on a descendant, not on the grid item itself:
   padding/margin on the item is added to its box even at `0fr`, which would
   leave a 40px sliver in the closed state. */
.faq-a_block-wrapp > .faq-a_inner-wrapp {
  margin-top: 0;
  padding-top: 0;
  min-height: 0;
}
.faq-a_block-wrapp > .faq-a_inner-wrapp > *:first-child {
  margin-top: 40px;
}
.faq-qa_block .faq-q_arrow-wrapp {
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-qa_block.is-open .faq-q_arrow-wrapp {
  transform: rotate(180deg);
}

/* --------------------------------------------------------------- forms */
.wb-consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  width: 100%;
  max-width: 100%;
  margin: 14px 0 4px;
  font-family: var(--wb-font-body);
  font-size: 14px;
  line-height: 1.45;
  color: currentColor;
  cursor: pointer;
  text-align: left;
}
.wb-consent span {
  white-space: normal;
  overflow-wrap: anywhere;
}
.wb-consent input {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  accent-color: var(--wb-blue);
}
.wb-form-note {
  font-family: var(--wb-font-mono);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  opacity: 0.7;
  margin: 8px 0 12px;
}
.wb-form-status {
  font-family: var(--wb-font-body);
  font-size: 14px;
  line-height: 1.45;
  margin-top: 12px;
  min-height: 1.45em;
}
.wb-form-status[data-state="busy"] { color: var(--wb-blue); }
.wb-form-status[data-state="ok"] { color: var(--wb-green); }
.wb-form-status[data-state="error"] { color: var(--wb-checkpoint); }
/* Neutral states: first-run hint and post-call idle — quiet ink on mist,
   no alarm, same type scale as the rest of the status line. */
.wb-form-status[data-state="hint"] { color: var(--wb-ink); opacity: 0.72; }
.wb-form-status[data-state="idle"] { color: var(--wb-ink); opacity: 0.62; }
.wb-form-status a { color: inherit; font-weight: 600; text-decoration: underline; }
/* Native validation messages are enough; do not paint fields red before submit. */
.c-form-input:user-invalid {
  border-color: var(--wb-checkpoint);
}

/* Ghost buttons: base.css only styles .button-nav-new.is-ghost, so
   .c-button.is-ghost ("End conversation") fell back to the solid dark
   .c-button paint. Define the ghost state once: transparent ground, dark
   ink on light surfaces, paper text inside the dark sections. */
.c-button.is-ghost {
  background-color: transparent;
  color: var(--wb-deep);
}
.c-button.is-ghost:hover {
  background-color: rgba(7, 24, 48, 0.08);
}
.c-home-hero-wrapper .c-button.is-ghost,
.c-footer .c-button.is-ghost,
.c-card-testimonial-new.is-dark .c-button.is-ghost {
  color: var(--wb-paper);
}
.c-home-hero-wrapper .c-button.is-ghost:hover,
.c-footer .c-button.is-ghost:hover,
.c-card-testimonial-new.is-dark .c-button.is-ghost:hover {
  background-color: rgba(255, 255, 255, 0.12);
}

/* Simulated call progress shown by the demo adapter. */
.wb-demo-progress {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  font-family: var(--wb-font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.wb-demo-progress li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  opacity: 0.35;
  transition: opacity 0.3s ease;
}
.wb-demo-progress li::before {
  content: "";
  width: 8px;
  height: 8px;
  background: currentColor;
  flex: none;
}
.wb-demo-progress li.is-done { opacity: 1; color: var(--wb-green); }
.wb-demo-progress li.is-active { opacity: 1; color: var(--wb-blue); }

/* ------------------------------------------------------- cinematic hero */
/* Bottom-weighted over full-bleed film. The category ships a dark rounded card
   with one centred headline in the middle of the viewport; this puts the copy on
   the floor, floats the header on the footage, and holds the baseline with three
   facts. Black is absolute, not a dark navy, so the film is the only light. */
.wb-cine {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  align-content: end;
  padding: 0 clamp(20px, 4vw, 72px) clamp(28px, 3vw, 44px);
  background: #000;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.wb-cine__film { position: absolute; inset: 0; z-index: -2; background: #000; }
.wb-cine__film video { width: 100%; height: 100%; object-fit: cover; display: block; }
.wb-cine__film::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.26) 34%,
                                      rgba(0,0,0,.74) 78%, rgba(0,0,0,.94) 100%);
}

.wb-cine__inner {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; justify-content: flex-end;
  max-width: clamp(720px, 62vw, 1120px); margin: 0 auto;
  padding-bottom: clamp(30px, 4.4vw, 74px);
}
.wb-cine__badge {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 clamp(14px, 1.6vw, 26px); padding: 9px 15px; border-radius: 5px;
  background: linear-gradient(90deg, #7d7d7d 0%, #2a2a2a 52%, #0a0a0a 100%);
  color: #f2f2f2; font-size: clamp(12px, .95vw, 14.5px); letter-spacing: -.01em;
}
.wb-cine__title {
  margin: 0; display: flex; flex-direction: column; align-items: center;
  font-family: var(--wb-font-body);
  font-weight: 500; letter-spacing: -.045em; line-height: 1.12; color: #fff;
  font-size: clamp(34px, 5.3vw, 88px);
}
.wb-cine__line { display: block; overflow: hidden; padding: .06em .15em .14em; }
/* The one serif word. Grey, not white: it reads as an aside inside the sentence
   rather than a second shout, and it is the only italic on the site. */
.wb-cine__title em {
  font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
  font-style: italic; font-weight: 400; font-size: 1.08em;
  letter-spacing: -.03em; color: #9a9a9a;
}
/* Pre-production disclosure, carried directly under the hero promise.
   `reception.inbound` and `website.contact_booking` are both unverified in
   CLAIMS_REGISTRY.json, so the promise above may only stand with this boundary
   adjacent to it — the same pattern the Dutch Reception hero already uses
   (reception-content.ts -> hero.status). Mono and quiet on purpose: it is a
   status line, not a disclaimer to be skimmed past. */
.wb-cine__status {
  margin: clamp(10px, 1.1vw, 18px) 0 0;
  color: rgba(255, 255, 255, .58);
  font-family: var(--wb-font-mono);
  font-size: clamp(10.5px, .78vw, 12.5px);
  letter-spacing: .06em; text-transform: uppercase; line-height: 1.5;
}
.wb-cine__lede {
  max-width: 47ch; margin: clamp(12px, 1.3vw, 22px) 0 0;
  color: #9a9a9a; font-size: clamp(15px, 1.25vw, 20px);
  line-height: 1.55; letter-spacing: -.015em;
}
.wb-cine__actions {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px; margin-top: clamp(18px, 2vw, 30px);
}
.wb-cine__btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  height: clamp(40px, 3.2vw, 52px); padding: 0 clamp(16px, 1.5vw, 22px);
  border-radius: 6px; font-size: clamp(13.5px, 1.05vw, 16px); font-weight: 500;
  letter-spacing: -.02em; line-height: 1; white-space: nowrap;
  transition: background var(--wb-dur-base) var(--wb-ease-std),
              border-color var(--wb-dur-base) var(--wb-ease-std),
              box-shadow var(--wb-dur-base) var(--wb-ease-std);
}
.wb-cine__btn::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-130%);
  background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,.45) 48%, transparent 76%);
  transition: transform .65s ease;
}
.wb-cine__btn:hover::after { transform: translateX(130%); }
.wb-cine__btn--solid {
  background: linear-gradient(180deg, #fff 0%, #e7e7e7 48%, #cfcfcf 100%);
  color: #111; border: 1px solid #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.95);
}
.wb-cine__btn--solid:hover {
  background: linear-gradient(180deg, #fff 0%, #f3f6ff 42%, #d5def2 100%);
  border-color: #f2f6ff;
  box-shadow: inset 0 1px 0 #fff, 0 0 26px rgba(186,208,255,.4), 0 8px 18px rgba(255,255,255,.14);
}
.wb-cine__btn--ghost {
  background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(0,0,0,.5) 46%, rgba(150,170,200,.1));
  color: #fff; border: 1px solid rgba(198,198,198,.55);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.wb-cine__btn--ghost:hover {
  border-color: rgba(220,230,255,.8); box-shadow: 0 0 24px rgba(170,200,255,.28);
}

.wb-cine__disclosure {
  /* The content register requires every dramatization to say so. A muted
     background loop is atmosphere, not evidence, but the rule does not carve
     out atmosphere — so the label stays, quiet and out of the reading path. */
  position: absolute; right: clamp(20px, 4vw, 72px); bottom: clamp(76px, 8vw, 108px);
  margin: 0; font-family: var(--wb-font-mono); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase;
  /* Was rgba(255,255,255,.42) and failed contrast. A disclosure nobody can read
     is not a disclosure; this matches the lede's grey and clears AA on the
     scrim's darkest band, where the label sits. */
  color: #9a9a9a;
}
@media (max-width: 700px) {
  /* Static put it in document order, which on a grid whose first row is 1fr
     lands it at the very top, over the header. Keep it pinned; just move it
     above the facts instead of beside them. */
  .wb-cine__disclosure { right: auto; left: clamp(20px, 4vw, 72px);
                         top: auto; bottom: 62px; font-size: 9px; }
}

.wb-cine__facts {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; color: #d8d8d8;
}
.wb-cine__fact {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: clamp(12.5px, 1vw, 16px); letter-spacing: -.015em; white-space: nowrap;
}

/* base.css stretches a bare <svg> to its container. The badge star arrived
   113px wide inside a 20px slot, and the fact marks did the same on mobile once
   the row wrapped — fixing only the star left the same bug three more times.
   Every inline mark in this hero gets its box back. */
.wb-cine svg { flex: none; }
.wb-cine__star { width: 18px; height: 20px; }
.wb-cine__fact svg { width: 20px; height: 20px; }

/* The capture wraps <main> in a block that reserves the header's height. With
   the header lifted onto the film, that reservation is a white band above the
   hero, so it is released — on this page only. */
.wb-cine { --wb-header-h: 72px; }
.wb-cine-page main > .wb-cine:first-child { margin-top: calc(-1 * var(--wb-header-h)); }

/* The header floats on the footage until the reader leaves the hero; wb-scrolled
   is already set by wb-motion.js, so the solid bar costs no new listener. */
.wb-cine-page .navbar_component-new {
  position: absolute; top: 0; left: 0; right: 0; z-index: 50; background: transparent;
}
/* Naming individual link classes missed .navbar_link-new and
   .button_label-new, which left dark ink on the film — three contrast failures
   axe found and a reader would have found first. Invert the bar as a whole and
   let the one solid button opt back out. */
.wb-cine-page .navbar_component-new :is(a, div, span, p) { color: #f3f3f3; }
.wb-cine-page .navbar_component-new .button-nav-new.is-primary,
.wb-cine-page .navbar_component-new .button-nav-new.is-primary :is(span, div) { color: var(--wb-paper); }
.wb-cine-page .navbar_component-new .button-nav-new.is-secondary,
.wb-cine-page .navbar_component-new .button-nav-new.is-secondary :is(span, div) { color: var(--wb-ink); }
/* The open mega-menu is a white sheet; its contents keep the light-mode ink. */
.wb-cine-page .navbar_component-new .navbar_dropdown-list-new :is(a, div, span, p) { color: var(--wb-ink); }
/* Two wordmark files exist for the two grounds. The nav ships the light-ground
   one, which on the film is navy ink on a dark frame — the logo the user picked
   this design to keep, made unreadable by the design. Swap the artwork while the
   bar is transparent and swap it back the moment the bar goes solid. */
.wb-cine-page .navbar_component-new .navbar_logo-image {
  content: url("/assets/brand/wordmark-dark.webp");
}
html.wb-scrolled .wb-cine-page .navbar_component-new .navbar_logo-image {
  content: url("/assets/brand/wordmark-20260915.webp");
}

/* The white bar comes from the inner container, not the <nav>: clearing the
   element the class sits on left the bar exactly as it was. */
.wb-cine-page .navbar_component-new .navbar_container-new {
  background-color: transparent;
  transition: background-color var(--wb-dur-base) var(--wb-ease-std);
}
html.wb-scrolled .wb-cine-page .navbar_component-new {
  position: fixed; background-color: transparent;
}
html.wb-scrolled .wb-cine-page .navbar_component-new .navbar_container-new {
  background-color: rgba(255,255,255,.94);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
          backdrop-filter: saturate(1.4) blur(10px);
}
html.wb-scrolled .wb-cine-page .navbar_component-new :is(a, div, span, p) { color: var(--wb-ink); }
html.wb-scrolled .wb-cine-page .navbar_component-new .button-nav-new.is-primary,
html.wb-scrolled .wb-cine-page .navbar_component-new .button-nav-new.is-primary :is(span, div) { color: var(--wb-paper); }

@media (max-width: 700px) {
  /* Three facts stacked with room to breathe pushed the copy off the screen, so
     the row stays a row and the labels shorten instead. */
  .wb-cine__facts { gap: 10px; justify-content: space-between; }
  .wb-cine__fact { gap: 7px; font-size: 11px; white-space: normal; line-height: 1.25; }
  .wb-cine__fact svg { width: 16px; height: 16px; }
  .wb-cine__actions .wb-cine__btn { flex: 1 1 100%; }
  .wb-cine__inner { padding-bottom: 22px; }
}

/* ------------------------------------------------------- reveal grammar */
/* Three roles, not one effect. The uniformity is what makes a page read as
   templated: every competitor in this category fades everything up from the
   same distance at the same speed. Here what moves depends on what it is.

   `hold` is the important one. Numbers, labels and logos do not move at all —
   only their opacity changes. Something staying still while its neighbours
   settle is what makes the whole page look considered rather than animated.

   The gate is on <html>, set by wb-motion.js on its first line. No script, no
   gate, everything visible: content is never hidden by a stylesheet waiting for
   JavaScript that might not arrive. */
.wb-motion [data-wb-in] {
  opacity: 0;
  will-change: opacity, transform;
}
.wb-motion [data-wb-in="settle"] { transform: translate3d(0, 8px, 0); }
.wb-motion [data-wb-in="rise"]   { transform: translate3d(0, 12px, 0); }
.wb-motion [data-wb-in="hold"]   { transform: none; }

.wb-motion [data-wb-in].is-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}
.wb-motion [data-wb-in="settle"].is-in {
  transition: opacity var(--wb-dur-base) var(--wb-ease-enter),
              transform var(--wb-dur-base) var(--wb-ease-enter);
}
.wb-motion [data-wb-in="rise"].is-in {
  transition: opacity var(--wb-dur-slow) var(--wb-ease-enter),
              transform var(--wb-dur-slow) var(--wb-ease-enter);
  transition-delay: calc(var(--wb-i, 0) * var(--wb-stagger));
}
.wb-motion [data-wb-in="hold"].is-in {
  transition: opacity var(--wb-dur-base) linear;
  transition-delay: calc(var(--wb-i, 0) * var(--wb-stagger));
}

/* ------------------------------------------------------- the line answers */
/* The hero waveform used to start mid-loop, which said nothing. It now starts
   flat — the line nobody is picking up — and comes alive left to right once,
   then hands over to the ambient loop. It is the product's own event, drawn
   with the markup that was already there. */
@keyframes wb-answer {
  0%   { transform: scaleY(0.06); }
  55%  { transform: scaleY(1.15); }
  100% { transform: scaleY(0.42); }
}
.wb-motion .wb-hero-bg .wb-wave__bar {
  animation: wb-answer 620ms var(--wb-ease-enter) both,
             wb-bar 1.6s ease-in-out infinite;
  animation-delay: calc(360ms + var(--i, 0) * 26ms),
                   calc(980ms + var(--i, 0) * 26ms);
}

/* ------------------------------------------------------------ nav on scroll */
.navbar_component-new {
  transition: background-color var(--wb-dur-base) var(--wb-ease-std),
              box-shadow var(--wb-dur-base) var(--wb-ease-std);
}
html.wb-scrolled .navbar_component-new {
  background-color: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
          backdrop-filter: saturate(1.4) blur(10px);
  box-shadow: 0 1px 0 rgba(10, 32, 64, 0.08);
}

/* ------------------------------------------------------------ press states */
/* A control that does not acknowledge the press feels broken on touch, where
   there is no hover to fall back on. */
.c-button, .c-button-new-home, .c-button-rounded, .w-button {
  transition: transform var(--wb-dur-fast) var(--wb-ease-std),
              background-color var(--wb-dur-fast) var(--wb-ease-std),
              border-color var(--wb-dur-fast) var(--wb-ease-std),
              opacity var(--wb-dur-fast) var(--wb-ease-std);
}
.c-button:active, .c-button-new-home:active,
.c-button-rounded:active, .w-button:active {
  transform: scale(0.98);
}

/* --------------------------------------------------------- page transitions */
/* Native cross-document transitions where the browser has them; everywhere else
   this rule is ignored and navigation stays exactly as it is today. */
@view-transition { navigation: auto; }

/* ------------------------------------------------------------------ motion */
@keyframes wb-bar {
  0%, 100% { transform: scaleY(0.42); }
  50% { transform: scaleY(1); }
}
@keyframes wb-ring {
  0% { transform: scale(0.72); opacity: 0.9; }
  70%, 100% { transform: scale(1.18); opacity: 0; }
}
@keyframes wb-node-in {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: none; }
}
@keyframes wb-travel {
  0% { transform: translateX(0); }
  100% { transform: translateX(var(--wb-travel, 112px)); }
}
@keyframes wb-blink {
  0%, 45% { opacity: 1; }
  55%, 100% { opacity: 0.25; }
}
@keyframes wb-aurora-drift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-2%, 1.5%, 0) scale(1.06); }
}
@keyframes wb-grow {
  0% { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}
@keyframes wb-grow-y {
  0% { transform: scaleY(0.15); }
  100% { transform: scaleY(1); }
}

.wb-wave__bar {
  transform-box: fill-box;
  transform-origin: center;
  animation: wb-bar 1.6s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -0.12s);
}
.wb-ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: wb-ring 2.4s ease-out infinite;
  animation-delay: calc(var(--i, 0) * 0.5s);
}
.wb-anim__line, .wb-anim__turn, .wb-anim__cell, .wb-anim__node {
  animation: wb-node-in 0.6s ease both;
  animation-delay: calc(var(--i, 0) * 0.12s);
}
.wb-anim__travel {
  animation: wb-travel 2.6s cubic-bezier(0.55, 0, 0.45, 1) infinite alternate;
}
.wb-anim__blink, .wb-anim__pulse circle {
  animation: wb-blink 1.8s steps(1, end) infinite;
}
.wb-anim__grow {
  transform-box: fill-box;
  transform-origin: left center;
  animation: wb-grow 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--i, 0) * 0.14s);
}
.wb-anim__grow-y {
  transform-box: fill-box;
  transform-origin: bottom center;
  animation: wb-grow-y 1s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--i, 0) * 0.1s);
}
.wb-hero-bg__aurora {
  transform-box: fill-box;
  transform-origin: center;
  animation: wb-aurora-drift 26s ease-in-out infinite alternate;
}

/* Mobile hero: the live-call wave row sits at 62% of the 1440x740
   viewBox, where the stacked headline + footer copy lives on narrow
   viewports. CSS transform overrides the generated translate attribute
   and pins the wave just above the hero's bottom edge (art.py stays
   untouched). z-index is defensive only: the backdrop already stacks
   below the copy via .c-home-hero-bg { z-index: -1 }. */
@media (max-width: 600px) {
  .wb-hero-bg > g:not([class]) {
    transform: translate(460px, 604px);
    opacity: 0.55;
  }
  .c-home-hero-title,
  .c-home-hero-footer {
    position: relative;
    z-index: 1;
  }
}

/* Pause only the *looping* scene motion while a scene is off-screen (set by
   wb.js). One-shot intro animations must never be paused: they use fill both,
   so a paused intro would freeze the element at opacity 0. */
.wb-anim[data-idle="true"] .wb-wave__bar,
.wb-anim[data-idle="true"] .wb-ring,
.wb-anim[data-idle="true"] .wb-anim__travel,
.wb-anim[data-idle="true"] .wb-anim__blink,
.wb-anim[data-idle="true"] .wb-anim__pulse circle,
.wb-wave[data-idle="true"] .wb-wave__bar {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .c-rail-content .c-rail-list { animation: none !important; }
  .wb-tabs .fs-c-tabs-content-item { transition: none; }
  /* Reduced motion: no autoplay; the poster stays and the explicit play
     control remains available (click-to-play, wb.js). */
}

/* --------------------------------------------------------- touch targets */
@media (max-width: 991px) {
  .navbar_mobile-row-new,
  .wb-tabs .fs-c-tabs-tab-item-trigger,
  .faq-qa_box {
    min-height: 48px;
  }

  /* The reference's compact buttons are kept at their designed size; the
     *hit* area is expanded with a pseudo-element so nothing reflows. */
  .c-button,
  .c-button-new-home,
  .button-nav-new,
  .c-label-button,
  .navbar_brand-new,
  .navbar_mobile-button-new,
  .c-footer-nav-link-sm,
  .c-nav-sub-group-link {
    position: relative;
  }
  .c-button::after,
  .c-button-new-home::after,
  .button-nav-new::after,
  .c-label-button::after,
  .navbar_brand-new::after,
  .navbar_mobile-button-new::after,
  .c-footer-nav-link-sm::after,
  .c-nav-sub-group-link::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    min-width: 44px;
    height: 100%;
    min-height: 44px;
    border-radius: inherit;
  }
}

/* ------------------------------------------------------ secondary pages ---
   scripts/build_pages.py generates fresh markup for /industries/*,
   /solutions/*, /about, /contact, /privacy, /terms, /cookies. The capture's
   grid columns (.c-section-title-grid, .c-list-item-wrapper) place children
   by per-instance Webflow #w-node-… ids that only exist on the homepage's
   original nodes; freshly generated markup has no such id, so children fall
   back to a 1-column span and render as a narrow strip. This is a state the
   capture never shipped (there was no secondary page), not a layout change
   to any capture-derived section. */
.wb-full-grid > * {
  grid-column: 1 / -1;
}

/* The capture's bare `h1{color:#fff}` rule assumes every h1 sits inside the
   dark homepage hero. Secondary pages put their h1 on a light background
   (c-home-overview), so it needs an explicit dark colour here — otherwise
   white-on-white renders the page title invisible. */
.c-home-overview .new-heading_small-h2 {
  color: var(--wb-ink);
}

/* ================================================== POLISH LAYER v1 (2026-08-16)
   User feedback: "letters too small, too much whitespace". This layer never
   changes the identity of the live design; it fixes execution quality.
   1) Typography floors: interactive labels >= 14px; section eyes and menu
      labels >= 13px; 11px helper text -> 13px.
   2) Rhythm: ~200px dead space under the hero headline, 140px section
      paddings and the demo section's 8px bottom padding are corrected;
      the vertical scale moves to 64/96px steps.
   Note: base.css (Webflow capture) fluid values like max(12px,.625vw)
   bottom out at 12px by 1440px; the rules below only raise the floor. */

/* -- 1. Typography --------------------------------------------------------- */
.navbar_link-new { font-size: 0.875rem; }                       /* 12 -> 14 */
.button_label-new,
.c-button-label-text,
.c-button-label-text-2 { font-size: 14px; }                     /* 12 -> 14 */
.c-button.white.w-button { font-size: 14px; }                   /* 12 -> 14 */
.dropdown_footer-link-new { font-size: 14px; }                  /* 12 -> 14 */
.c-footer-nav-link-label-sm-2 { font-size: 13px; }              /* 12 -> 13 */
.c-footer-nav-text { font-size: 13px; }                         /* 12 -> 13 */
.c-section-heading,
.c-section-heading-2 { font-size: max(13px, 0.625vw); }         /* 12 -> 13 */
.c-text-label-12 { font-size: max(13px, 0.625vw); }             /* 12 -> 13 */
.dropdown_label-new { font-size: 13px; }                        /* 12 -> 13 */
.dropdown_card-description-new { font-size: 13px; }             /* 12 -> 13 */
.swiper-pagination-fraction { font-size: 13px; }                /* 12 -> 13 */
.wb-form-note { font-size: 13px; }                              /* 11 -> 13 */
.wb-scenario-label { font-size: 13px; }                         /* 11 -> 13 */

/* -- 2. Rhythm --------------------------------------------------------------- */
/* Hero: capture rule .c-container.c-home-hero-inner { min-height:80vh }
   stretches the headline block ~200px past its content. Same-property
   selector + theme layer loaded after = wins; desktop only. */
@media (min-width: 992px) {
  .c-container.c-home-hero-inner { min-height: 64vh; }
}
/* Section paddings: capture .c-section.<x> compounds set 140px; the same
   compounds return to the 96px scale, demo bottom padding 8px -> 72px. */
.c-section.c-home-testimonials { padding-top: 96px; padding-bottom: 96px; }
.c-section.c-home-overview { padding-bottom: 96px; }
.c-section.c-home-demo { padding-bottom: 72px; }

/* ================================================== POLISH LAYER v2 (2026-08-16)
   Rendered-audit follow-up (docs/werkborg-polish/audit-rendered.json):
   v1 targeted the wrong selectors in two places and left three sections
   at 140px. Same two concerns, second pass:
   1) Typography: the navbar DROPDOWN toggles ("Product", "Solutions"...)
      still sit at .75rem because base.css sizes .navbar_dropdown-toggle-new
      itself — v1 only raised .navbar_link-new, so the bar mixed 14px and
      12px items. The "Hear this in the demo" button inherits
      max(12px,.625vw) from .c-button-new-home; floor it with the other
      button labels at 14px.
   2) Rhythm: .c-home-banner-2, .c-home-highlights-accordion and
      .c-home-security still carry the capture's 140px paddings — the
      last outliers vs the 96px scale. Desktop only, mobile keeps its own
      scale. SVG diagram labels inside the wb-anim panels are raised at
      the generator (scripts/art.py), not here. */
.navbar_dropdown-toggle-new { font-size: 0.875rem; }            /* 12 -> 14 */
.c-button-new-home { font-size: max(14px, 0.625vw); }           /* 12 -> 14 */

@media (min-width: 992px) {
  .c-section.c-home-banner-2 { padding-top: 96px; padding-bottom: 96px; }
  .c-section.c-home-highlights-accordion { padding-top: 96px; padding-bottom: 96px; }
  .c-section.c-home-security { padding-top: 96px; padding-bottom: 96px; }
}

/* ================================================== POLISH LAYER v3 (2026-08-19)
   Rendered-audit follow-up, third pass:
   Ö5) Footer gradient fallback — the footer paints its depth from an
       aurora SVG (.c-footer-bg-visual); if that asset fails to load the
       section must stay dark enough for its white text, so give the
       wrapper itself the deep brand ground. */
.c-footer-bg {
  background-color: var(--wb-deep);
}

/* -- v3 typography scale -------------------------------------------------
   User direction: the condensed display face reads tight; grow the home
   page type. Clamps are anchored at 1440 (1vw = 14.4px) so the fluid
   value lands exactly on the requested 1440 marks, and the <=767px tier
   re-clamps toward the phone anchors. Scale (desktop/tablet/phone):
   hero h1 120/64/42 · display 68/44/32 · section h2 48/36/28 ·
   card h3 32/26/21 · card title 26/22/19 · body lead 20/18/17 ·
   body 18/17/16. Each step keeps a >= 1.25 ratio to the role above it
   at 1440, and no mobile floor exceeds the floor of the role above.
   Display leading stays 0.95-1.0 (base values kept), body 1.5-1.6. */

/* Hero h1 / 120 display tier: 42px floor engages below 504px, 64px at
   768px and 120px at 1440px fall out of the single vw anchor. */
.c-display-120,
.c-display-120-2,
.c-display-120-3:not([class*="c-footer-newsletter-text"]) {
  /* 96px ceiling, not 120px: the hero line "AI phone agents that never keep your
     customers waiting." breaks to four lines above 96px inside its 771px column,
     and the fourth line lands on top of the hero waveform. 96px holds three lines
     from 1100px up and is still 20% larger than the live 80px. */
  font-size: clamp(42px, 6.667vw, 96px);
}
/* The footer newsletter headings share .c-display-120-3 but live in a narrow grid
   cell. At 120px "always accountable." overflowed the footer by 58px on every
   page — masked by body{overflow-x:hidden} but it pushed the card off-screen.
   They keep the capture's own size. */
.c-display-120-3[class*="c-footer-newsletter-text"] {
  font-size: clamp(38px, 6.25vw, 90px);
}
/* Banner/display tier. The compound repeats the value because base.css
   re-declares .c-display-68.c-home-banner-text at the same specificity. */
.c-display-68,
.c-display-68.c-home-banner-text {
  font-size: clamp(44px, 4.722vw, 68px);
}
/* Section h2 — shared with secondary page heroes, which scale with it. */
.new-heading_small-h2 {
  font-size: clamp(36px, 3.333vw, 48px);
  line-height: 1;
}
/* Card h3: the main heading of the studio-slider and security cards was
   the "too small" outlier (heading-2 sat at 26px while h1 read 90px). */
.c-home-highlights-slider h3.heading-2,
.c-home-security h3.heading-2 {
  font-size: clamp(26px, 2.222vw, 32px);
  line-height: 1.15;
}
/* Card title tier: overview, channel and capability card headings that
   base.css leaves at ~19.5px. Compound variants (.is-24 etc.) keep
   their own sizes — they carry higher specificity. */
h3.heading-3,
h3.heading-31,
h3.heading-32,
.heading-3.is-title {
  font-size: clamp(22px, 1.875vw, 26px);
  line-height: 1.2;
}
/* Body lead and body copy. */
.paragraph-size-normal {
  font-size: clamp(18px, 1.389vw, 20px);
  line-height: 1.55;
}
.paragraph-13 {
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.55;
}
/* Tablet/phone tier: caps meet the desktop floors at 768px, so nothing
   jumps at the breakpoint; floors land on the 390px targets. */
@media (max-width: 767px) {
  .c-display-68,
  .c-display-68.c-home-banner-text {
    font-size: clamp(32px, 4.722vw, 44px);
  }
  .new-heading_small-h2 {
    font-size: clamp(28px, 3.333vw, 36px);
  }
  .c-home-highlights-slider h3.heading-2,
  .c-home-security h3.heading-2 {
    font-size: clamp(21px, 2.222vw, 26px);
  }
  h3.heading-3,
  h3.heading-31,
  h3.heading-32,
  .heading-3.is-title {
    font-size: clamp(19px, 1.875vw, 22px);
  }
  .paragraph-size-normal {
    font-size: clamp(17px, 1.389vw, 18px);
  }
  .paragraph-13 {
    font-size: clamp(16px, 1.25vw, 17px);
  }
}

/* v2 mobile follow-up: the tab-scene frame (.fs-c-tabs-content-list) carries
   padding:max(64px,3.33333vw) at every width. On a 390px viewport that is
   128px of horizontal inset, shrinking the 448px wb-anim panels to 242px
   (scale .54 → 5px effective text). Same frame, mobile-scaled inset: */
@media (max-width: 767px) {
  .fs-c-tabs-content-list { padding: max(24px, 6vw); }
  .wb-video--flagship { margin-top: 24px; }
  .wb-video__toggle { left: 12px; bottom: 12px; }
}

/* ================================================ POLISH LAYER v4 (2026-08-20)
   User direction, verified by measurement across five routes at 1440px:
   "yazilar kucuk kalmis, cok bosluk var".

   Measured before: the entire footer nav sat at 14px (255 elements), section
   eyebrow labels at 13px (50), button and tile labels at 14px, and the security
   section carried 140px of padding top and bottom against an 80px rhythm
   elsewhere.

   Floors below follow the same logic as the v3 scale: nothing interactive or
   read-in-sequence drops under 15px, secondary labels sit at 15px, primary UI
   labels at 16px. Diagram labels inside authored SVG keep their own sizes —
   their geometry is fixed at the generator, so raising them here would collide. */

/* -- type floors ---------------------------------------------------------- */
/* Footer navigation: the largest block of undersized text on the site. */
.c-footer .c-footer-nav-link-label-2,
.c-footer .c-footer-nav-link-label-sm-2,
.c-footer-nav-link-label-2,
.c-footer-nav-link-label-sm-2 {
  font-size: 15px;
  line-height: 1.55;
}
/* Section eyebrows ("Industry scenarios", "Company", ...) read as structure,
   not decoration — 13px is below the comfortable floor for that job. */
.c-section-heading,
.c-section-heading-2,
.c-section-heading.align-left {
  font-size: 15px;
  line-height: 1.4;
}
/* Anything the user clicks. */
.button_label-new,
.c-button-label-text,
.wb-video__toggle-label {
  font-size: 15px;
}
/* Marquee tiles and capability tiles. */
.c-marquee-list-item-text,
.wb-tile__label {
  font-size: 15px;
}
/* Small body paragraphs that the capture left at 14px. */
.paragraph-4 {
  font-size: 16px;
  line-height: 1.6;
}

/* -- vertical rhythm ------------------------------------------------------ */
/* One rhythm instead of three: 80px between major sections on desktop. The
   security block was the outlier at 140/140 and read as a hole in the page. */
@media (min-width: 992px) {
  .c-section.c-home-security,
  .c-home-security {
    padding-top: 88px;
    padding-bottom: 88px;
  }
  .c-section.c-home-testimonials,
  .c-section.c-home-banner-2,
  .c-section.c-home-highlights-accordion {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .c-section.c-home-overview { padding-bottom: 80px; }
  .c-marquee-2 { padding-top: 36px; padding-bottom: 36px; }
}
/* Phones carry the same rhythm at two-thirds. */
@media (max-width: 767px) {
  .c-section.c-home-security,
  .c-home-security,
  .c-section.c-home-testimonials,
  .c-section.c-home-banner-2,
  .c-section.c-home-highlights,
  .c-section.c-home-highlights-accordion,
  .c-section.c-home-highlights-accordion-2,
  .c-section.c-home-faq {
    padding-top: 56px;
    padding-bottom: 56px;
  }
  .c-marquee-2 { padding-top: 28px; padding-bottom: 28px; }
}

/* -- type floors, second pass --------------------------------------------
   The first pass caught the bulk (footer nav, eyebrows, tiles). These are the
   remainder, found by walking every leaf text node under 15px at 1440px:
   primary navigation, the whole dropdown panel, button labels, card labels and
   the comparison bullets. Nav rises only 14 -> 15px so the bar cannot wrap. */
.navbar_link-new,
.navbar_dropdown-toggle-new > div,
.dropdown_text-link-new,
.dropdown_footer-text-new,
.dropdown_footer-link-new,
.dropdown_partner-text-new,
.dropdown_card-title-new {
  font-size: 15px;
}
.dropdown_label-new,
.dropdown_label-new.is-inset,
.dropdown_card-description-new {
  font-size: 14px;
  line-height: 1.5;
}
/* Buttons everywhere. */
.c-button,
.c-button.white,
.c-button.w-button,
.c-button.white.w-button,
.c-button-label,
.c-button-label-text-2 {
  font-size: 15px;
}
/* Card labels and the scenario tag. */
.c-text-label-12,
.c-text-label-12.grey-23,
.c-text-14,
.wb-scenario-label,
.c-label-button span {
  font-size: 14px;
}
/* The IVR / voice-bot / phone-employee comparison bullets are body copy. */
.c-card-text-audio-feature-list-item > div,
.c-card-text-audio-feature-list-item {
  font-size: 15px;
  line-height: 1.5;
}
/* Demo form helper lines sit next to the control the user is about to press. */
.wb-form-note,
.wb-form-status {
  font-size: 14px;
  line-height: 1.5;
}
/* Marquee tiles: the first-pass selector lost to a base.css compound. */
.c-marquee-list-item .c-marquee-list-item-text,
.c-rail-list .c-marquee-list-item-text,
.c-marquee-list-item-text {
  font-size: 15px;
}

/* Last two below the 14px floor, found on the final sweep: the copyright line
   and the mobile drill-down rows ("Product", "Solutions", ...) which are the
   primary navigation on a phone. */
.c-footer-nav-text.copyright,
.c-footer-nav-text {
  font-size: 14px;
}
.navbar_mobile-row-new,
.navbar_mobile-row-new > div,
.navbar_mobile-back-new,
.navbar_mobile-back-new > div {
  font-size: 15px;
}

/* -- WCAG AA contrast fix (axe, 2026-08-20) ------------------------------
   .wb-scenario-label measured 4.44:1 — #bd3d13 on its own 14%-alpha tint
   over the card, against the 4.5:1 floor for text this size. The brand
   checkpoint stays the brand checkpoint everywhere else; only the label on
   the light card is darkened, to 5.4:1. */
.wb-scenario-label {
  color: #a83411;
}
/* The dark-card variant measured 4.29:1 with the on-ink checkpoint over its own
   tint (#ee7444 on #383141). Lifted to 5.1:1; still unmistakably the checkpoint
   orange, just bright enough for 14px text on that ground. */
.c-card-testimonial-new.is-dark .wb-scenario-label {
  color: #f4885c;
}

/* Footer navigation labels measured 4.42:1 (#6c798c on white) against the 4.5:1
   floor — only visible on phones, where the footer groups are expanded rather
   than tucked into a dropdown. Darkened one step to 4.74:1. */
/* base.css mutes these links with opacity:.6, which composites #687486 down to
   #a4acb6 — 2.3:1 on white. Opacity as a colour control is what produced the
   failure; set the muted tone directly and drop the opacity so the rendered
   colour is the colour that was measured. 4.74:1. */
.c-footer .c-nav-sub-group-link,
.c-nav-sub-group-link,
.c-footer .c-footer-nav-link-sm,
.c-footer-nav-link-sm,
.c-footer .c-footer-nav-text.copyright,
.c-footer-nav-text.copyright {
  opacity: 1;
}
/* The legal row and the copyright line were muted the same way. */
.c-footer .c-footer-nav-link-sm,
.c-footer-nav-link-sm,
.c-footer .c-footer-nav-text.copyright,
.c-footer-nav-text.copyright {
  color: #687486;
}
.c-footer .c-footer-nav-link-label-2,
.c-footer .c-footer-nav-link-label-sm-2,
.c-footer-nav-link-label-2,
.c-footer-nav-link-label-sm-2 {
  color: #687486;
}

/* -- sub-heading hierarchy ------------------------------------------------
   Measured on the industry, solution and about pages: every section
   sub-heading (h2.heading-32 — "Example call", "The disclosure rule", "What we
   do not claim") rendered at 19.5px / weight 400 / #333 directly above its own
   body paragraph at 20px / weight 400 / #0e121b. Smaller, no heavier and
   lighter in colour than the text it introduces, so nothing marked it as a
   heading. Raised one clear step above body and given the ink the body uses. */
h2.heading-32,
.c-list-title h2,
.c-list-title .heading-32 {
  font-size: clamp(22px, 1.806vw, 26px);
  line-height: 1.25;
  font-weight: 600;
  color: var(--wb-ink);
}
@media (max-width: 767px) {
  h2.heading-32,
  .c-list-title h2,
  .c-list-title .heading-32 {
    font-size: clamp(20px, 1.806vw, 22px);
  }
}

/* ------------------------------------------------------------ language switch
   Three letters, not flags: a flag names a country, and Dutch, English and
   Turkish are spoken well outside the three countries whose flags these would
   be. The current language is marked with aria-current and carries the
   checkpoint accent, which is the one saturated colour on the bar. */
.wb-lang {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 12px;
  padding: 2px;
  border: 1px solid var(--wb-mist);
  border-radius: 999px;
}
.wb-lang__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  font: 600 12px/1 var(--wb-font-mono);
  letter-spacing: 0.06em;
  color: var(--wb-ink);
  text-decoration: none;
  transition: background 160ms ease, color 160ms ease;
}
.wb-lang__item:hover { background: var(--wb-mist); }
.wb-lang__item[aria-current="true"] {
  background: var(--wb-checkpoint);
  color: var(--wb-paper);
}
.wb-cine-page .wb-lang { border-color: rgba(255, 255, 255, 0.28); }
.wb-cine-page .wb-lang__item { color: rgba(255, 255, 255, 0.82); }
.wb-cine-page .wb-lang__item:hover { background: rgba(255, 255, 255, 0.14); }
.wb-cine-page .wb-lang__item[aria-current="true"] {
  background: var(--wb-checkpoint-on-ink);
  color: var(--wb-deep);
}
@media (max-width: 991px) { .wb-lang { margin-left: 0; } }

/* ==========================================================================
   LOWER PAGE — 2026-09 rebuild
   ==========================================================================
   Everything below the hero was the capture's arrangement with Werkborg copy
   poured into it. These blocks replace those arrangements outright; they do not
   override capture classes, because the markup they style is authored (see
   build_html.py: build_industry_rail / build_banner / build_overview /
   build_scenarios / build_banner_two / build_cta).

   One device runs through all of them: the route a call travels, drawn as a
   hairline carrying a single rust checkpoint where a person decides. It is the
   brand mark at section scale, and it is the only thing on the page a
   competitor selling maximum autonomy cannot copy.

   Rhythm, one scale, used everywhere below:
     --wb-sec-y   section vertical padding
     --wb-gap     the gap between a heading block and the thing it introduces
   The capture's homepage ran 140-200px of dead vertical space between a heading
   and its content in five places. One variable, so it cannot drift again. */

:root {
  --wb-sec-y: clamp(64px, 7vw, 116px);
  --wb-gap: clamp(30px, 3.4vw, 56px);
  --wb-edge: clamp(20px, 4vw, 72px);
  --wb-maxw: 1160px;
  --wb-rule: color-mix(in srgb, var(--wb-ink) 14%, transparent);
  --wb-rule-strong: color-mix(in srgb, var(--wb-ink) 26%, transparent);
  --wb-quiet: color-mix(in srgb, var(--wb-ink) 66%, var(--wb-paper));
}

/* Browser surfaces. The parts nobody draws still carry the design: selection,
   the caret and the scrollbar all shipped as Chrome defaults on a page whose
   palette is four colours wide. */
::selection { background: color-mix(in srgb, var(--wb-checkpoint) 22%, transparent);
              color: var(--wb-ink); }
:root { accent-color: var(--wb-blue); caret-color: var(--wb-checkpoint); }
.wb-compare__scroll { scrollbar-color: var(--wb-rule-strong) transparent;
                      scrollbar-width: thin; }

.wb-sectors__inner, .wb-route__inner, .wb-compare__inner, .wb-scen__inner, .wb-say__inner {
  max-width: var(--wb-maxw);
  margin-inline: auto;
  padding-inline: var(--wb-edge);
}

/* Shared heading block: title, one lede, one optional action. No eyebrow — the
   capture put a 13px label above every heading on the page ("Overview",
   "Capabilities", "Industry scenarios"), which is four words of chrome asking
   to be read before the sentence that matters. */
.wb-sectors__title, .wb-route__title, .wb-compare__title, .wb-scen__heading {
  margin: 0;
  font-family: var(--wb-font-display);
  font-weight: 600;
  font-size: clamp(30px, 3.5vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.032em;
  text-wrap: balance;
}
.wb-sectors__lede, .wb-route__lede, .wb-compare__lede, .wb-scen__lede {
  margin: 18px 0 0;
  max-width: 62ch;
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.55;
  letter-spacing: -0.012em;
  color: var(--wb-quiet);
}

/* --------------------------------------------------------- sector directory */
/* Ruled index, not a logo wall and not a card grid. Each row is a real link to
   a sector page that already existed and had nothing pointing at it from the
   homepage; the flow beside the name is the honest substitute for a customer
   logo — this is the worked example we wrote for that sector. */
.wb-sectors { padding: var(--wb-sec-y) 0; background: var(--wb-paper); }
.wb-sectors__head { display: grid; gap: 0; }
.wb-sectors__cta {
  justify-self: start;
  margin-top: 26px;
  display: inline-flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 20px;
  border: 1px solid var(--wb-rule-strong); border-radius: 6px;
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--wb-ink); text-decoration: none;
  transition: background var(--wb-dur-base) var(--wb-ease-std),
              border-color var(--wb-dur-base) var(--wb-ease-std);
}
.wb-sectors__cta::after { content: "→"; font-size: 15px; transition: transform var(--wb-dur-base) var(--wb-ease-std); }
.wb-sectors__cta:hover { background: var(--wb-ink); border-color: var(--wb-ink); color: var(--wb-paper); }
.wb-sectors__cta:hover::after { transform: translateX(3px); }

.wb-sectors__list {
  list-style: none; margin: var(--wb-gap) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(28px, 4vw, 72px);
  border-top: 1px solid var(--wb-rule);
}
.wb-sectors__row { border-bottom: 1px solid var(--wb-rule); }
.wb-sectors__link {
  position: relative;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 14px;
  padding: 19px 4px 19px 0;
  text-decoration: none;
  color: var(--wb-ink);
}
/* The hover mark is the checkpoint, sliding in from the rule — the same square
   the route section plants on step five. It means one thing on this site. */
.wb-sectors__link::before {
  content: ""; position: absolute; left: -12px; top: 50%;
  width: 4px; height: 0; margin-top: 0;
  background: var(--wb-checkpoint);
  transform: translateY(-50%);
  transition: height var(--wb-dur-base) var(--wb-ease-enter);
}
.wb-sectors__link:hover::before,
.wb-sectors__link:focus-visible::before { height: 26px; }
.wb-sectors__mark { display: grid; place-items: center; color: var(--wb-ink); opacity: 0.55;
                    transition: opacity var(--wb-dur-base) var(--wb-ease-std); }
.wb-sectors__link:hover .wb-sectors__mark { opacity: 1; }
.wb-sectors__name { font-size: clamp(16px, 1.35vw, 19px); font-weight: 600; letter-spacing: -0.018em; }
.wb-sectors__flow {
  font: 400 12px/1 var(--wb-font-mono);
  letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--wb-quiet); white-space: nowrap;
}
.wb-sectors__go { color: var(--wb-quiet); font-size: 15px; opacity: 0;
                  transition: opacity var(--wb-dur-base) var(--wb-ease-std),
                              transform var(--wb-dur-base) var(--wb-ease-std); }
.wb-sectors__link:hover .wb-sectors__go { opacity: 1; transform: translateX(3px); }
@media (max-width: 767px) {
  .wb-sectors__list { grid-template-columns: 1fr; }
  .wb-sectors__flow { font-size: 11px; }
}

/* ------------------------------------------------------------------- route */
/* The section that replaces "Always answering." — a full screen of white
   carrying two words, a floating brandmark and, in `CLAIMS_REGISTRY.json`
   terms, an availability promise with no SLA behind it. */
.wb-route {
  padding: var(--wb-sec-y) 0;
  background:
    radial-gradient(120% 90% at 78% 0%, #0E2B4E 0%, transparent 62%),
    linear-gradient(180deg, var(--wb-deep) 0%, #04101F 100%);
  color: var(--wb-paper);
  overflow: hidden;
}
.wb-route__title { color: var(--wb-paper); max-width: 24ch; }
.wb-route__lede { color: rgba(255, 255, 255, 0.68); }
.wb-route__status {
  margin: 16px 0 0;
  font: 400 11px/1.5 var(--wb-font-mono);
  letter-spacing: 0.09em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.wb-route__list {
  list-style: none; margin: var(--wb-gap) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
}
/* The rail: one hairline drawn across the row of stops, with each stop's node
   sitting on it. Drawn per stop rather than as one absolute line so the
   vertical mobile layout gets the same treatment for free. */
.wb-route__stop {
  position: relative;
  padding: 34px clamp(12px, 1.4vw, 22px) 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.wb-route__node {
  position: absolute; top: -5px; left: 0;
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
}
.wb-route__stop.is-checkpoint { border-top-color: var(--wb-checkpoint-on-ink); }
.wb-route__stop.is-checkpoint .wb-route__node {
  width: 12px; height: 12px; top: -6px; border-radius: 0;
  background: var(--wb-checkpoint-on-ink);
}
.wb-route__no {
  display: block;
  font: 500 11px/1 var(--wb-font-mono);
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.42);
}
.wb-route__stop.is-checkpoint .wb-route__no { color: var(--wb-checkpoint-on-ink); }
.wb-route__mark { display: block; margin: 16px 0 12px; color: rgba(255, 255, 255, 0.8); }
.wb-route__stop.is-checkpoint .wb-route__mark { color: var(--wb-checkpoint-on-ink); }
.wb-route__name {
  margin: 0; font-family: var(--wb-font-body);
  font-size: clamp(15px, 1.2vw, 17.5px); font-weight: 600;
  letter-spacing: -0.016em; line-height: 1.28; color: var(--wb-paper);
}
.wb-route__body {
  margin: 10px 0 0; font-size: 14px; line-height: 1.55;
  color: rgba(255, 255, 255, 0.62);
}
@media (max-width: 1100px) {
  .wb-route__list { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 40px; }
}
@media (max-width: 700px) {
  .wb-route__list { grid-template-columns: 1fr; row-gap: 0; }
  .wb-route__stop {
    padding: 22px 0 24px 26px;
    border-top: 0; border-left: 1px solid rgba(255, 255, 255, 0.16);
  }
  .wb-route__node { top: 26px; left: -5px; }
  .wb-route__stop.is-checkpoint .wb-route__node { top: 25px; left: -6px; }
  .wb-route__stop.is-checkpoint { border-left-color: var(--wb-checkpoint-on-ink); }
  .wb-route__mark { margin: 12px 0 10px; }
}

/* --------------------------------------------------------------- comparison */
.wb-compare { padding: var(--wb-sec-y) 0; background: var(--wb-paper); }
.wb-compare__scroll { margin-top: var(--wb-gap); overflow-x: auto; }
.wb-compare__table {
  width: 100%; min-width: 760px;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.wb-compare__spacer { width: 22%; border: 0; }
.wb-compare__col {
  width: 26%;
  padding: 0 22px 18px;
  text-align: left; vertical-align: bottom;
  border-bottom: 1px solid var(--wb-rule-strong);
}
.wb-compare__kind {
  display: block;
  font: 400 11px/1 var(--wb-font-mono);
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--wb-quiet);
}
.wb-compare__what {
  display: block; margin-top: 10px;
  font-family: var(--wb-font-display); font-weight: 600;
  font-size: clamp(18px, 1.7vw, 24px); letter-spacing: -0.022em;
  color: var(--wb-ink);
}
/* The Werkborg column is the answer, so it is the only one with a ground.
   A tint plus one checkpoint rule on top, not a dark panel floating out of the
   table — the capture's version broke the shared baseline it needed. */
.wb-compare__col.is-ours { position: relative; }
.wb-compare__col.is-ours::before {
  content: ""; position: absolute; inset: -14px 0 0;
  background: color-mix(in srgb, var(--wb-mist) 62%, transparent);
  border-top: 2px solid var(--wb-checkpoint);
  z-index: -1;
}
.wb-compare__col.is-ours .wb-compare__kind { color: var(--wb-checkpoint); }
.wb-compare__q {
  padding: 22px 22px 22px 0;
  text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--wb-rule);
  font-size: 15px; font-weight: 600; letter-spacing: -0.012em;
  color: var(--wb-ink);
}
.wb-compare__cell {
  padding: 22px;
  vertical-align: top;
  border-bottom: 1px solid var(--wb-rule);
  font-size: 15px; line-height: 1.5; letter-spacing: -0.008em;
  color: var(--wb-quiet);
}
.wb-compare__cell.is-ours {
  position: relative;
  color: var(--wb-ink); font-weight: 500;
  background: color-mix(in srgb, var(--wb-mist) 62%, transparent);
}
.wb-compare__table tbody tr:last-child .wb-compare__cell,
.wb-compare__table tbody tr:last-child .wb-compare__q { border-bottom: 0; }
@media (max-width: 767px) {
  .wb-compare__table { min-width: 620px; }
  .wb-compare__cell, .wb-compare__q { padding: 16px 14px; font-size: 14px; }
  .wb-compare__col { padding: 0 14px 14px; }
}

/* ---------------------------------------------------------- scenario panels */
.wb-scen { padding: var(--wb-sec-y) 0; background: var(--wb-paper); }
.wb-scen__discuss {
  display: inline-flex; align-items: center; height: 44px; margin-top: 24px;
  padding: 0 20px; border-radius: 6px;
  background: var(--wb-ink); color: var(--wb-paper);
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em; text-decoration: none;
  transition: background var(--wb-dur-base) var(--wb-ease-std);
}
.wb-scen__discuss:hover { background: var(--wb-deep); }
.wb-scen__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  margin-top: var(--wb-gap);
  padding-top: clamp(28px, 3vw, 44px);
  border-top: 1px solid var(--wb-rule);
}
.wb-scen__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 16px; }
.wb-scen__sector {
  font: 500 11px/1 var(--wb-font-mono); letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--wb-ink);
}
.wb-scen__flow {
  padding: 5px 9px; border-radius: 3px;
  background: color-mix(in srgb, var(--wb-checkpoint) 12%, transparent);
  font: 500 11px/1 var(--wb-font-mono); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--wb-checkpoint);
}
.wb-scen__title {
  margin: 0; font-family: var(--wb-font-display); font-weight: 600;
  font-size: clamp(22px, 2.2vw, 32px); line-height: 1.1; letter-spacing: -0.026em;
  color: var(--wb-ink); text-wrap: balance;
}
.wb-scen__body {
  margin: 14px 0 0; max-width: 54ch;
  font-size: 16px; line-height: 1.55; color: var(--wb-quiet);
}
.wb-scen__beats { margin: 26px 0 0; }
.wb-scen__beats svg { display: block; width: 100%; height: auto; max-width: 360px; }
.wb-scen__cta {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 24px;
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--wb-ink); text-decoration: none;
  border-bottom: 1px solid var(--wb-rule-strong); padding-bottom: 3px;
  transition: border-color var(--wb-dur-base) var(--wb-ease-std);
}
.wb-scen__cta::after { content: "→"; transition: transform var(--wb-dur-base) var(--wb-ease-std); }
.wb-scen__cta:hover { border-color: var(--wb-checkpoint); }
.wb-scen__cta:hover::after { transform: translateX(3px); }
.wb-scen__media { position: relative; }
.wb-scen__media .wb-video--scenario {
  aspect-ratio: 4 / 5; width: 100%; max-width: none; border-radius: 10px;
}
@media (max-width: 900px) {
  .wb-scen__panel { grid-template-columns: 1fr; }
  .wb-scen__media { order: -1; }
  .wb-scen__media .wb-video--scenario { aspect-ratio: 16 / 10; }
}

/* --------------------------------------------------------- statement band */
/* Replaces "Sounds like a person." and its 422px tile. The waveform is set at
   the height of the type it sits in, which is the difference between a mark
   inside a sentence and a box interrupting one. */
.wb-say {
  padding: clamp(44px, 5vw, 76px) 0;
  background: var(--wb-paper);
  border-top: 1px solid var(--wb-rule);
  border-bottom: 1px solid var(--wb-rule);
}
.wb-say__line {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0 clamp(10px, 1.2vw, 20px);
  margin: 0; text-align: center;
  font-family: var(--wb-font-display); font-weight: 600;
  font-size: clamp(30px, 4.4vw, 62px); line-height: 1.02; letter-spacing: -0.036em;
  color: var(--wb-ink);
}
.wb-say__wave { display: inline-flex; align-items: center; }
.wb-say__wave svg {
  display: block;
  width: clamp(96px, 13vw, 196px);
  height: clamp(24px, 3.1vw, 46px);
}
.wb-say__note {
  margin: 20px auto 0; max-width: 56ch; text-align: center;
  font-size: clamp(15px, 1.2vw, 17px); line-height: 1.55; color: var(--wb-quiet);
}

/* ------------------------------------------------------------ closing card */
.wb-close .c-banner-bg-cta-box {
  display: block;
  min-height: 0; height: auto;
  padding: clamp(30px, 3.4vw, 48px);
  max-width: 640px;
}
.wb-close__rule { display: block; }
.wb-close__rule svg { display: block; width: 100%; height: 12px; color: var(--wb-ink); }
.wb-close__title {
  margin: 26px 0 0;
  font-family: var(--wb-font-display); font-weight: 600;
  font-size: clamp(26px, 2.9vw, 40px); line-height: 1.06; letter-spacing: -0.03em;
  color: var(--wb-ink); text-wrap: balance;
}
.wb-close__body {
  margin: 16px 0 0; max-width: 52ch;
  font-size: 16px; line-height: 1.55; color: var(--wb-quiet);
}
.wb-close__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.wb-close__btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 46px; padding: 0 20px; border-radius: 6px;
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em; text-decoration: none;
  transition: background var(--wb-dur-base) var(--wb-ease-std),
              border-color var(--wb-dur-base) var(--wb-ease-std);
}
.wb-close__btn--solid { background: var(--wb-ink); color: var(--wb-paper); border: 1px solid var(--wb-ink); }
.wb-close__btn--solid:hover { background: var(--wb-checkpoint); border-color: var(--wb-checkpoint); }
.wb-close__btn--ghost { border: 1px solid var(--wb-rule-strong); color: var(--wb-ink); }
.wb-close__btn--ghost:hover { border-color: var(--wb-ink); background: var(--wb-mist); }
.wb-routeline__check { animation: wb-check-breathe 3.6s var(--wb-ease-std) infinite; }
@keyframes wb-check-breathe {
  0%, 62%, 100% { opacity: 1; }
  76% { opacity: 0.35; }
}

/* ------------------------------------------------------------ nav dropdown */
/* The Product panel was a white slab: no dividers, no glyphs, no hover target,
   a ragged 4/3/2 column and a footer whose call to action read as a caption. */
.wb-nav-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}
.wb-nav-col { padding: 4px clamp(14px, 1.6vw, 26px); }
.wb-nav-col + .wb-nav-col { border-left: 1px solid var(--wb-rule); }
.wb-nav-col .dropdown_label-new {
  font: 500 10.5px/1 var(--wb-font-mono);
  letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--wb-quiet);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--wb-rule);
  margin-bottom: 6px;
}
.wb-nav-card {
  display: grid !important;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px; align-items: start;
  padding: 11px 10px; margin: 0 -10px;
  border-radius: 6px;
  transition: background var(--wb-dur-fast) var(--wb-ease-std);
}
.wb-nav-card:hover { background: var(--wb-mist); }
.wb-nav-card__mark { color: var(--wb-ink); opacity: 0.5; margin-top: 1px;
                     transition: opacity var(--wb-dur-fast) var(--wb-ease-std); }
.wb-nav-card:hover .wb-nav-card__mark { opacity: 1; color: var(--wb-checkpoint); }
.wb-nav-card__text { display: block; min-width: 0; }
.wb-nav-card .dropdown_card-title-new {
  display: block; font-size: 14.5px; font-weight: 600; letter-spacing: -0.014em;
  color: var(--wb-ink);
}
.wb-nav-card .dropdown_card-description-new {
  display: block; margin-top: 3px; font-size: 13px; line-height: 1.4;
  color: var(--wb-quiet);
}
.wb-nav-foot {
  display: flex !important; align-items: center; justify-content: space-between;
  gap: 20px;
  margin-top: 10px; padding: 16px clamp(18px, 2vw, 30px);
  background: var(--wb-mist);
  border-top: 1px solid var(--wb-rule);
  border-radius: 0 0 10px 10px;
}
.wb-nav-foot .dropdown_footer-content-new {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; width: 100%;
}
.wb-nav-foot .dropdown_footer-text-new {
  font-size: 13.5px; line-height: 1.45; color: var(--wb-quiet); max-width: 48ch;
}
.wb-nav-foot .dropdown_footer-link-new {
  flex: none;
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 16px; border-radius: 6px;
  background: var(--wb-ink); color: var(--wb-paper);
  font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em;
  transition: background var(--wb-dur-fast) var(--wb-ease-std);
}
.wb-nav-foot .dropdown_footer-link-new::after { content: "→"; }
.wb-nav-foot:hover .dropdown_footer-link-new { background: var(--wb-checkpoint); }
@media (max-width: 991px) {
  .wb-nav-grid { grid-template-columns: 1fr; }
  .wb-nav-col + .wb-nav-col { border-left: 0; border-top: 1px solid var(--wb-rule); margin-top: 10px; }
  .wb-nav-foot { flex-direction: column; align-items: stretch; }
  .wb-nav-foot .dropdown_footer-content-new { flex-direction: column; align-items: stretch; }
}

/* --------------------------------------------------------- listening ring */
/* The demo visualiser. Three states, one keyframe set, driven by the
   data-mode wb-voice.js already writes. */
.wb-demo-wave .wb-listen { width: 100%; height: auto; display: block; }
.wb-listen__bar { transform-origin: center; }
.wb-listen__sweep { opacity: 0; }
.wb-listen__check { opacity: 0.55; }
.wb-demo-wave[data-mode="idle"] .wb-listen__bar {
  animation: wb-listen-idle 4.2s var(--wb-ease-std) infinite;
  animation-delay: calc(var(--i) * 40ms);
}
.wb-demo-wave[data-mode="listening"] .wb-listen__sweep {
  opacity: 1; animation: wb-listen-sweep 2.8s linear infinite;
}
.wb-demo-wave[data-mode="listening"] .wb-listen__bar {
  animation: wb-listen-active 1.5s var(--wb-ease-std) infinite;
  animation-delay: calc(var(--i) * 26ms);
}
.wb-demo-wave[data-mode="speaking"] .wb-listen__bar {
  animation: wb-listen-speak 0.72s var(--wb-ease-std) infinite;
  animation-delay: calc(var(--i) * 18ms);
}
.wb-demo-wave[data-mode="speaking"] .wb-listen__check,
.wb-demo-wave[data-mode="listening"] .wb-listen__check { opacity: 1; }
@keyframes wb-listen-idle {
  0%, 100% { transform: scaleY(0.9); }
  50% { transform: scaleY(1.06); }
}
@keyframes wb-listen-active {
  0%, 100% { transform: scaleY(0.55); }
  50% { transform: scaleY(1.12); }
}
@keyframes wb-listen-speak {
  0%, 100% { transform: scaleY(0.4); }
  50% { transform: scaleY(1.35); }
}
@keyframes wb-listen-sweep {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ------------------------------------------------------------- demo layout */
/* The section heading was clipped by the sticky header on arrival — the anchor
   landed the h2 under the bar — and 90px of dead space sat between it and the
   card it introduced. */
.wb-demo { scroll-margin-top: 96px; }
.wb-demo .c-display-120 { line-height: 1.02; }
/* The capture's own <style> block in this section paints a checked pill
   #3E6AEF, a blue that belongs to no Werkborg token. It loads before this file,
   so this wins on order. */
.c-home-demo .c-label-button-input:checked ~ .c-label-button {
  background: var(--wb-ink) !important;
  color: var(--wb-paper) !important;
  border-radius: 5px;
}
.wb-pill {
  border: 1px solid var(--wb-rule);
  border-radius: 5px;
  font-size: 13.5px; font-weight: 500; letter-spacing: -0.01em;
  transition: border-color var(--wb-dur-fast) var(--wb-ease-std),
              background var(--wb-dur-fast) var(--wb-ease-std);
}
.wb-pill:hover { border-color: var(--wb-ink); background: var(--wb-mist); }
/* Helper text was set in IBM Plex Mono, which on this site marks machine output
   and measurement. A paragraph of instructions to a person is neither. */
.wb-form-note { font-family: var(--wb-font-body); font-size: 14px; line-height: 1.55; color: var(--wb-ink); opacity: 1; }
.wb-form-note a { color: var(--wb-ink); font-weight: 650; text-decoration: underline; text-underline-offset: 0.16em; }

/* --------------------------------------------------- scene reveal / motion */
/* Every scene panel on the page animated on a timer or not at all: the studio
   slides, the two tab sections and the live-call panel each shipped their own
   arrangement, and the three capability rows shipped none. One gate now — JS
   adds `is-in` when the panel arrives — so the whole page moves on one clock. */
html.wb-motion [data-wb-scene] { opacity: 0; transform: translateY(8px); }
html.wb-motion [data-wb-scene].is-in {
  opacity: 1; transform: none;
  transition: opacity var(--wb-dur-slow) var(--wb-ease-enter),
              transform var(--wb-dur-slow) var(--wb-ease-enter);
}
html.wb-motion [data-wb-scene="cap"] { opacity: 0; transform: translateY(10px); }
html.wb-motion [data-wb-scene="cap"].is-in {
  transition-delay: calc(var(--wb-i, 0) * var(--wb-stagger));
}
/* Inside a scene that has arrived, the drawn parts draw. `wb-anim__*` classes
   already exist on the authored SVG; they were running unconditionally, which
   meant a diagram finished its animation two screens before anyone saw it. */
[data-wb-scene] .wb-anim__blink,
[data-wb-scene] .wb-wave__bar { animation-play-state: paused; }
[data-wb-scene].is-in .wb-anim__blink,
[data-wb-scene].is-in .wb-wave__bar { animation-play-state: running; }
[data-wb-scene].is-in .wb-beats rect,
[data-wb-scene].is-in .wb-beats circle { animation: wb-beat-in var(--wb-dur-base) var(--wb-ease-enter) backwards; }
@keyframes wb-beat-in { from { opacity: 0; transform: translateX(-4px); } }

@media (prefers-reduced-motion: reduce) {
  .wb-demo-wave .wb-listen__bar,
  .wb-demo-wave .wb-listen__sweep,
  .wb-routeline__check { animation: none !important; }
  html.wb-motion [data-wb-scene] { opacity: 1; transform: none; }
}

/* base.css declares `svg { width: 100% }` for the capture's icon slots, so an
   authored 26px glyph rendered at 154px inside these grids — the stroke weight
   was authored for the small size and looked like line art at the large one.
   Size them explicitly wherever they are placed. */
.wb-route__mark svg { width: 28px; height: 28px; }
.wb-sectors__mark svg { width: 20px; height: 20px; }
.wb-nav-card__mark svg { width: 22px; height: 22px; }
.wb-scen__beats svg { width: 100%; height: auto; }

/* Six columns across 1160px leaves 170px a stop, and every body line broke
   after three words. Three across, two rows: the rail still reads left to
   right and each stop gets a comfortable measure. */
.wb-route__list { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 44px; }
@media (min-width: 1500px) {
  .wb-route__list { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 0; }
}
@media (max-width: 1100px) and (min-width: 701px) {
  .wb-route__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------- shared heading composition */
/* Every rebuilt section's heading block ran full width with the title on the
   left and nothing on the right — 540px of empty paper beside a 620px headline,
   four times down the page. Title left, the lede and its action right, sharing
   one baseline. Below 900px it stacks and the measure is unchanged. */
.wb-sectors__head, .wb-route__head, .wb-compare__head, .wb-scen__head {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  column-gap: clamp(32px, 5vw, 96px);
  align-items: end;
}
.wb-sectors__title, .wb-route__title, .wb-compare__title, .wb-scen__heading { grid-column: 1; }
.wb-sectors__lede, .wb-route__lede, .wb-compare__lede, .wb-scen__lede {
  grid-column: 2; grid-row: 1; margin-top: 0; align-self: end;
}
.wb-sectors__cta, .wb-scen__discuss { grid-column: 2; justify-self: start; margin-top: 22px; }
.wb-route__status { grid-column: 2; margin-top: 14px; }
@media (max-width: 900px) {
  .wb-sectors__head, .wb-route__head, .wb-compare__head, .wb-scen__head {
    grid-template-columns: 1fr;
  }
  .wb-sectors__lede, .wb-route__lede, .wb-compare__lede, .wb-scen__lede {
    grid-column: 1; grid-row: auto; margin-top: 16px;
  }
  .wb-sectors__cta, .wb-scen__discuss, .wb-route__status { grid-column: 1; }
}

/* ------------------------------------------------ the rail, drawn on arrival */
/* The hairline above each stop was a static border, which reads as a rule
   separating things rather than a route connecting them. It is drawn now — one
   segment per stop, left to right, and the checkpoint square lands last on its
   own segment. This is the section's one authored moment; nothing else here
   moves. */
.wb-route__stop { border-top-color: transparent; }
.wb-route__stop::after {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
  background: rgba(255, 255, 255, 0.16);
  transform: scaleX(0); transform-origin: left center;
}
.wb-route__stop.is-checkpoint::after { background: var(--wb-checkpoint-on-ink); }
.wb-route__node { opacity: 0; }
html:not(.wb-motion) .wb-route__stop::after { transform: none; }
html:not(.wb-motion) .wb-route__node { opacity: 1; }
.wb-route__stop.is-in::after {
  transform: none;
  transition: transform 620ms var(--wb-ease-std) calc(var(--wb-i) * 110ms);
}
.wb-route__stop.is-in .wb-route__node {
  opacity: 1;
  transition: opacity 220ms var(--wb-ease-enter) calc(var(--wb-i) * 110ms + 380ms);
}

/* Route type: 14px bodies read as footnotes under an 18px title in a 340px
   column. One step up each, which is also the fix for "the text is too small". */
.wb-route__name { font-size: clamp(16px, 1.3vw, 19px); }
.wb-route__body { font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.66); }

/* Sector glyphs sat at 0.55 opacity on white and disappeared at 20px. */
.wb-sectors__mark { opacity: 0.72; }

@media (prefers-reduced-motion: reduce) {
  .wb-route__stop::after { transform: none !important; }
  .wb-route__node { opacity: 1 !important; }
}

/* -------------------------------------------------- scenario beat list */
/* Was authored SVG with the labels at fixed x inside a 340 viewBox; a long
   label escaped the box, and every Dutch and Turkish label is longer than its
   English original. Plain markup wraps, translates and needs no scaling. */
.wb-scen__beatlist {
  list-style: none;
  margin: 26px 0 0;
  padding: 0 0 0 16px;
  border-left: 1px solid var(--wb-rule);
  display: grid;
  gap: 11px;
}
.wb-scen__beat {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--wb-quiet);
}
.wb-scen__beat::before {
  content: "";
  position: absolute; left: -19px; top: 0.42em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--wb-rule-strong);
}
.wb-scen__clock {
  font: 400 12px/1.55 var(--wb-font-mono);
  letter-spacing: 0.02em;
  color: var(--wb-quiet);
  font-variant-numeric: tabular-nums;
}
/* The last beat of every scenario is the handover. It is the argument of the
   whole page, so it is the one line in the list that carries the accent. */
.wb-scen__beat.is-checkpoint { color: var(--wb-ink); font-weight: 600; }
.wb-scen__beat.is-checkpoint::before {
  left: -20px; top: 0.36em;
  width: 9px; height: 9px; border-radius: 0;
  background: var(--wb-checkpoint);
}
.wb-scen__beat.is-checkpoint .wb-scen__clock { color: var(--wb-checkpoint); }
html.wb-motion .wb-scen__panel .wb-scen__beat { opacity: 0; transform: translateX(-5px); }
html.wb-motion .wb-scen__panel.is-in .wb-scen__beat {
  opacity: 1; transform: none;
  transition: opacity var(--wb-dur-base) var(--wb-ease-enter) calc(var(--wb-i) * 70ms + 120ms),
              transform var(--wb-dur-base) var(--wb-ease-enter) calc(var(--wb-i) * 70ms + 120ms);
}

/* The flagship film sat 910px wide inside a 1160px container, so it was inset
   from the table above it by 67px on the left and 65px on the right — close
   enough to alignment to look like a mistake rather than a choice. */
.wb-compare .wb-video--flagship {
  width: 100%; max-width: none;
  margin: clamp(40px, 5vw, 76px) 0 0;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
}

/* ------------------------------------------------------------ demo section */
/* The section opened with 8px of top padding under a 96px headline, so the
   sticky header cut the words in half on arrival and again on every scroll
   past; then 82px of nothing separated that headline from the card it
   introduces. Padding above, less below. */
.wb-demo { padding-top: clamp(72px, 8vw, 132px) !important; }
.wb-demo .c-home-demo-grid { margin-top: clamp(24px, 2.6vw, 40px); }
/* base.css gives every `.c-button` `display: inline-flex`, which beats the
   `hidden` attribute — so "End conversation" was on screen before there was a
   conversation to end. The attribute is the state; honour it. */
.c-button[hidden], .wb-close__btn[hidden] { display: none !important; }

/* The visualiser slot is a 300px circle with `overflow: hidden`, which clipped
   20px off each side of the ring — the outer stroke and the checkpoint tick at
   the top of it were both cut away. It is an authored instrument now, so it
   sets its own box. */
.c-home-demo .c-home-demo-grid-item-select-video-wrapper {
  width: min(420px, 100%);
  height: auto;
  aspect-ratio: 1;
  max-width: none; max-height: none;
  overflow: visible;
  border-radius: 0;
  background: transparent;
  -webkit-mask-image: none; mask-image: none;
  margin-inline: auto;
}
.wb-demo-wave { width: 100%; }

/* The statement band's waveform was static while the rest of the page moved. */
.wb-say__wave .wb-wave__bar {
  transform-origin: center;
  animation: wb-say-bar 2.6s var(--wb-ease-std) infinite;
  animation-delay: calc(var(--i) * 55ms);
  animation-play-state: paused;
}
.wb-say.is-in .wb-say__wave .wb-wave__bar { animation-play-state: running; }
@keyframes wb-say-bar {
  0%, 100% { transform: scaleY(0.72); }
  46% { transform: scaleY(1.1); }
}
@media (prefers-reduced-motion: reduce) {
  .wb-say__wave .wb-wave__bar { animation: none !important; }
  html.wb-motion .wb-scen__panel .wb-scen__beat { opacity: 1; transform: none; }
}

/* The dark square behind the ring. `.wb-demo-wave` carried a blue radial glow
   over `--wb-deep` with `border-radius: inherit` — written when the slot was a
   300px circle in base.css and the artwork inside it was a bare bar row. The
   ring draws its own field, so the square painted a hard-edged box around a
   circular instrument, and the glow was the category's orb again. */
.wb-demo-wave {
  background: none;
  border-radius: 0;
  overflow: visible;
}
/* The three frame rings were authored at 5–16% white and disappeared against
   the field at render size. */
.wb-listen circle[stroke] { stroke-opacity: 0.22; }
.wb-listen circle[stroke]:nth-of-type(2) { stroke-opacity: 0.12; }
.wb-listen circle[stroke]:nth-of-type(3) { stroke-opacity: 0.08; }

/* Left card of the demo: the visualiser and the six use-case pills share the
   column, so the ring may not claim the whole height of it. */
.c-home-demo .c-home-demo-grid-item-select-video {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: clamp(20px, 2.4vw, 36px);
  padding: clamp(20px, 2.4vw, 36px);
}
.c-home-demo .c-home-demo-grid-item-select-video-wrapper {
  width: min(360px, 100%);
  flex: none;
}
.c-home-demo .c-home-demo-type-list {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px;
  margin: 0;
}

/* The capture put a 70px top margin on the demo's button row, which in its
   original layout sat under a phone-number field and a consent checkbox. Both
   are gone — there is no phone leg in this demo — so it opened a hole between
   the helper text and the only button that matters. */
.wb-demo .c-home-demo-form .c-button-container { margin-top: 26px !important; }
/* The two field labels were painted --wb-blue at 13px by `.c-section-heading`,
   which is the eyebrow style; a form label is not an eyebrow. */
.wb-demo .c-home-demo-form label.c-section-heading {
  font: 500 11px/1 var(--wb-font-mono);
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--wb-quiet) !important;
  margin-bottom: 8px;
}
.wb-demo .form-max_width .heading-3 {
  font-family: var(--wb-font-display); font-weight: 600;
  font-size: clamp(22px, 2.1vw, 30px); line-height: 1.12; letter-spacing: -0.026em;
  max-width: 24ch;
}
.wb-demo .c-home-demo-grid-item-form { justify-content: center; }

/* ------------------------------------------- diagram intros, on arrival */
/* The authored panels animate their rows in with `wb-node-in` / `wb-grow`,
   both declared `fill: both` and started at page load — so every diagram on the
   page had finished its intro long before anyone scrolled to it, and the
   sections read as static screenshots. They are held until the scene arrives.
   Held by removing the animation name, not by pausing it: a paused `fill: both`
   intro freezes at opacity 0, which is exactly the failure the note above the
   `data-idle` block warns about. With no name the row simply renders as
   authored, so a JS failure costs the motion and nothing else. */
html.wb-motion [data-wb-scene]:not(.is-in) .wb-anim__node,
html.wb-motion [data-wb-scene]:not(.is-in) .wb-anim__line,
html.wb-motion [data-wb-scene]:not(.is-in) .wb-anim__turn,
html.wb-motion [data-wb-scene]:not(.is-in) .wb-anim__cell,
html.wb-motion [data-wb-scene]:not(.is-in) .wb-anim__bar-row,
html.wb-motion [data-wb-scene]:not(.is-in) .wb-anim__grow,
html.wb-motion [data-wb-scene]:not(.is-in) .wb-anim__grow-y {
  animation-name: none;
}

/* ------------------------------------------------------ homepage eyebrows */
/* Thirteen sections opened with a 13px blue label above the heading —
   "Overview", "Capabilities", "Capabilities", "Capabilities", "Connect your
   systems", "Connect your systems" — four of them repeated, none of them read
   before the sentence underneath. The heading carries its own weight.
   Homepage only: the secondary routes use the same class for a breadcrumb-ish
   label that does sit in a different composition, and `label.c-section-heading`
   is a real form label in the demo. */
.wb-cine-page main div.c-section-heading,
.wb-cine-page main .c-section-heading:not(label) { display: none; }

/* Section rhythm on the untouched capture sections. Measured gaps between a
   heading block and the content it introduces ran 96–140px on the homepage
   while the rebuilt sections sit at --wb-gap (30–56px); the page changed pace
   every second screen. */
.wb-cine-page .c-home-highlights-list,
.wb-cine-page .c-home-integrations-list,
.wb-cine-page .c-swiper-wrapper,
.wb-cine-page .c-security-list,
.wb-cine-page .fs-c-tabs-instance { margin-top: var(--wb-gap); }
.wb-cine-page main .c-section-title { margin-bottom: 0; }

/* The three capability rows measured 195px each for two lines of text and a
   120px mark, because the capture's row was sized for a taller composition. */
.wb-cine-page #capabilities .c-list-item { padding-block: clamp(22px, 2.4vw, 34px); }
.wb-cine-page #capabilities .c-list-media-wrapper svg { width: 96px; height: 96px; }

/* ------------------------------------------------------------------ channels */
.wb-chan { padding: var(--wb-sec-y) 0; background: var(--wb-paper); }
.wb-chan__inner { max-width: var(--wb-maxw); margin-inline: auto; padding-inline: var(--wb-edge); }
.wb-chan__heading {
  margin: 0; max-width: 22ch;
  font-family: var(--wb-font-display); font-weight: 600;
  font-size: clamp(30px, 3.5vw, 52px); line-height: 1.06; letter-spacing: -0.032em;
  color: var(--wb-ink);
}
.wb-chan__list {
  list-style: none; margin: var(--wb-gap) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: clamp(24px, 3vw, 48px);
  border-top: 1px solid var(--wb-rule);
}
.wb-chan__item { padding: 26px 0 0; }
.wb-chan__mark { display: block; color: var(--wb-ink); opacity: 0.62; }
.wb-chan__mark svg { width: 26px; height: 26px; }
.wb-chan__title {
  margin: 16px 0 0;
  font-family: var(--wb-font-body); font-weight: 600;
  font-size: clamp(16px, 1.3vw, 19px); letter-spacing: -0.018em; line-height: 1.24;
  color: var(--wb-ink);
}
.wb-chan__body { margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: var(--wb-quiet); }
@media (max-width: 900px) {
  .wb-chan__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 30px; }
}
@media (max-width: 560px) { .wb-chan__list { grid-template-columns: 1fr; } }

/* The two tab sections opened their panel 130–140px below the heading; the
   capture's `.fs-c-tabs-instance` margin never took because base.css sets the
   space on the wrapper above it. */
.wb-cine-page #intelligence .c-section-title,
.wb-cine-page #telephony .c-section-title,
.wb-cine-page #agent-studio .c-section-title { padding-bottom: 0; margin-bottom: 0; }
.wb-cine-page #intelligence .fs-c-tabs-wrapper,
.wb-cine-page #telephony .fs-c-tabs-wrapper { margin-top: var(--wb-gap); }
.wb-cine-page #intelligence .c-container,
.wb-cine-page #telephony .c-container { row-gap: var(--wb-gap); }
.wb-cine-page #intelligence .fs-c-tabs-instance,
.wb-cine-page #telephony .fs-c-tabs-instance { margin-top: 0; }
/* 64px of padding above and below the tab panel on top of the section's own
   rhythm; the panel is 448px of artwork inside a 576px frame. */
.wb-cine-page #intelligence .fs-c-tabs-content-list,
.wb-cine-page #telephony .fs-c-tabs-content-list { padding-block: 28px; }

/* base.css paints `.dropdown_footer-link-new` in ink and wins on specificity,
   so the panel's only call to action was ink text on an ink pill — a solid dark
   rectangle with nothing in it. */
.wb-nav-foot .dropdown_footer-link-new {
  color: var(--wb-paper) !important;
  -webkit-text-fill-color: var(--wb-paper);
}
.wb-nav-foot .dropdown_footer-content-new {
  flex-direction: row !important;
  align-items: center !important;
  text-align: left;
}

/* ------------------------------------------------------- responsive, last */
/* These live at the end of the file on purpose. The route's column count was
   set three times while this section was being built, and because every rule
   has the same specificity the last one in source order won — a bare
   `repeat(3, …)` appended after the mobile query put three 130px columns on a
   390px phone, and the vertical rail never applied. Anything that a narrow
   viewport must override belongs below every base rule for it. */
@media (max-width: 1100px) and (min-width: 761px) {
  .wb-route__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
}
@media (max-width: 760px) {
  .wb-route__list { grid-template-columns: 1fr; row-gap: 0; }
  .wb-route__stop {
    padding: 22px 0 26px 26px;
    border-top: 0;
  }
  .wb-route__stop::after {
    top: 0; bottom: 0; left: 0; right: auto;
    width: 1px; height: auto;
    transform: scaleY(0); transform-origin: center top;
  }
  .wb-route__stop.is-in::after { transform: none; }
  .wb-route__node { top: 26px; left: -5px; }
  .wb-route__stop.is-checkpoint .wb-route__node { top: 25px; left: -6px; }
  .wb-route__mark { margin: 12px 0 10px; }
  .wb-route__body { font-size: 15px; }
}
@media (min-width: 1500px) {
  .wb-route__list { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 0; }
}

/* The comparison, stacked. Below 760px the table becomes one block per
   question with the three answers under it, each labelled by its column — the
   standard responsive-table pattern, and the only arrangement in which a phone
   reader can actually compare three answers. */
@media (max-width: 760px) {
  .wb-compare__scroll { overflow: visible; }
  .wb-compare__table { min-width: 0; display: block; }
  .wb-compare__table thead { display: none; }
  .wb-compare__table tbody, .wb-compare__table tr { display: block; }
  .wb-compare__table tbody tr { padding: 22px 0; border-bottom: 1px solid var(--wb-rule); }
  .wb-compare__table tbody tr:last-child { border-bottom: 0; }
  .wb-compare__q {
    display: block; padding: 0 0 14px; border-bottom: 0;
    font-size: 17px; letter-spacing: -0.016em;
  }
  .wb-compare__cell {
    display: block;
    padding: 10px 0 10px 14px;
    border-bottom: 0; border-left: 1px solid var(--wb-rule);
    background: none;
  }
  .wb-compare__cell + .wb-compare__cell { margin-top: 8px; }
  .wb-compare__cell::before {
    content: attr(data-col);
    display: block; margin-bottom: 4px;
    font: 500 10.5px/1 var(--wb-font-mono);
    letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--wb-quiet);
  }
  .wb-compare__cell.is-ours {
    border-left-color: var(--wb-checkpoint);
    background: color-mix(in srgb, var(--wb-mist) 62%, transparent);
    padding: 12px 12px 12px 14px;
  }
  .wb-compare__cell.is-ours::before { color: var(--wb-checkpoint); }
}

/* Footer statement band: the two display lines were sized for four short words
   on 120px type and left a 130px hole under the first line, with the newsletter
   helper text floating in it. */
.wb-cine-page .c-footer-newsletter { padding-block: clamp(48px, 5vw, 84px); row-gap: clamp(24px, 3vw, 44px); }
.wb-cine-page .c-footer-newsletter-text-1,
.wb-cine-page .c-footer-newsletter-text-2 { line-height: 1.0; }

/* --------------------------------------------------------- systems directory */
.wb-systems { padding: var(--wb-sec-y) 0; background: var(--wb-paper); }
.wb-systems__inner { max-width: var(--wb-maxw); margin-inline: auto; padding-inline: var(--wb-edge); }
.wb-systems__head {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  column-gap: clamp(32px, 5vw, 96px);
  align-items: end;
}
.wb-systems__title {
  grid-column: 1; margin: 0; max-width: 20ch;
  font-family: var(--wb-font-display); font-weight: 600;
  font-size: clamp(30px, 3.5vw, 52px); line-height: 1.06; letter-spacing: -0.032em;
  color: var(--wb-ink);
}
.wb-systems__lede {
  grid-column: 2; grid-row: 1; margin: 0; align-self: end;
  font-size: clamp(16px, 1.25vw, 19px); line-height: 1.55; color: var(--wb-quiet);
}
.wb-systems__status {
  grid-column: 2; margin: 14px 0 0;
  padding-left: 12px; border-left: 2px solid var(--wb-checkpoint);
  font-size: 14px; line-height: 1.5; color: var(--wb-quiet);
}
.wb-systems__cta {
  grid-column: 2; justify-self: start; margin-top: 20px;
  display: inline-flex; align-items: center; height: 44px; padding: 0 20px;
  border-radius: 6px; background: var(--wb-ink); color: var(--wb-paper);
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em; text-decoration: none;
  transition: background var(--wb-dur-base) var(--wb-ease-std);
}
.wb-systems__cta:hover { background: var(--wb-checkpoint); }
.wb-systems__list {
  list-style: none; margin: var(--wb-gap) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(28px, 4vw, 72px);
  border-top: 1px solid var(--wb-rule);
}
.wb-systems__row {
  display: grid; grid-template-columns: 24px minmax(0, 1fr);
  column-gap: 14px; align-items: baseline;
  padding: 18px 0; border-bottom: 1px solid var(--wb-rule);
}
.wb-systems__mark { color: var(--wb-ink); opacity: 0.68; align-self: center; }
.wb-systems__mark svg { width: 22px; height: 22px; }
.wb-systems__name {
  font-size: clamp(15px, 1.25vw, 17.5px); font-weight: 600; letter-spacing: -0.016em;
  color: var(--wb-ink);
}
.wb-systems__what { grid-column: 2; font-size: 14px; line-height: 1.5; color: var(--wb-quiet); margin-top: 3px; }
@media (max-width: 900px) {
  .wb-systems__head { grid-template-columns: 1fr; }
  .wb-systems__title, .wb-systems__lede, .wb-systems__status, .wb-systems__cta { grid-column: 1; }
  .wb-systems__lede { grid-row: auto; margin-top: 16px; }
  .wb-systems__list { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------- privacy commitments */
.wb-rules { padding: var(--wb-sec-y) 0; background: var(--wb-paper); }
.wb-rules__inner { max-width: var(--wb-maxw); margin-inline: auto; padding-inline: var(--wb-edge); }
.wb-rules__head {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  column-gap: clamp(32px, 5vw, 96px);
  align-items: end;
}
.wb-rules__title {
  grid-column: 1; margin: 0; max-width: 22ch;
  font-family: var(--wb-font-display); font-weight: 600;
  font-size: clamp(30px, 3.5vw, 52px); line-height: 1.06; letter-spacing: -0.032em;
  color: var(--wb-ink);
}
.wb-rules__lede {
  grid-column: 2; grid-row: 1; margin: 0; align-self: end;
  font-size: clamp(16px, 1.25vw, 19px); line-height: 1.55; color: var(--wb-quiet);
}
.wb-rules__list {
  list-style: none; margin: var(--wb-gap) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(24px, 3vw, 56px); row-gap: 0;
  border-top: 1px solid var(--wb-rule);
}
.wb-rules__row { padding: 24px 0 26px; border-bottom: 1px solid var(--wb-rule); }
.wb-rules__mark { display: block; color: var(--wb-ink); opacity: 0.6; }
.wb-rules__mark svg { width: 26px; height: 26px; }
.wb-rules__name {
  margin: 14px 0 0; font-family: var(--wb-font-body); font-weight: 600;
  font-size: clamp(15px, 1.25vw, 17.5px); letter-spacing: -0.016em; line-height: 1.24;
  color: var(--wb-ink);
}
.wb-rules__body { margin: 8px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--wb-quiet); }
@media (max-width: 900px) {
  .wb-rules__head { grid-template-columns: 1fr; }
  .wb-rules__title, .wb-rules__lede { grid-column: 1; }
  .wb-rules__lede { grid-row: auto; margin-top: 16px; }
  .wb-rules__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) { .wb-rules__list { grid-template-columns: 1fr; } }
/* The demo heading was 96px and centred while every other heading on the page
   is 52px and left-aligned — the one typographic outlier left after the
   rebuild. Still the largest on the page, no longer a different system. */
.wb-demo .c-display-120 { font-size: clamp(34px, 4.6vw, 68px) !important; }
/* "before the call," at 120px wraps to two lines on its own, so the left block
   ran four lines deep against the right block's two. */
.wb-cine-page .c-footer-newsletter-text-1,
.wb-cine-page .c-footer-newsletter-text-2 {
  font-size: clamp(30px, 4.4vw, 68px);
  letter-spacing: -0.034em;
}

/* 2026-09-15: keep the brand visible when translated navigation grows. */
.navbar_brand-new { flex: 0 0 152px !important; min-width: 152px; width: 152px !important; height: auto; padding: 8px 10px; background: #fff; border-radius: 6px; }
.navbar_brand-new img { width: 100%; height: auto; display: block; }
.wb-cine-page .navbar_component-new .navbar_logo-image { content: url("/assets/brand/wordmark-20260915.webp"); }
.wb-cine__film img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wb-scan-figure { max-width: 1100px; margin: 0 auto 64px; padding: 0 24px; }
.wb-scan-figure img { width: 100%; height: auto; border-radius: 16px; }
.wb-scan-figure figcaption { color: #41546a; font-size: 12px; margin-top: 10px; }
@media (min-width: 992px) and (max-width: 1350px) { .navbar_menu-new { gap: 12px; } .navbar_brand-new { flex-basis: 132px !important; min-width: 132px; width: 132px !important; } }

.navbar_actions-new .is-ghost { display: none; }
.wb-cine-page .wb-lang { background: #0a2040; border-color: #526980; border-radius: 5px; }
.wb-cine-page .wb-lang__item { color: #fff; }
@media (max-width: 1199px) { .navbar_actions-new .button-nav-new:not(.is-secondary) { display: none; } }
@media (max-width: 991px) { .navbar_actions-new .button-nav-new { display: none; } .navbar_actions-new { margin-left: auto; } .wb-lang { flex-shrink: 0; } }

.wb-cine-page .navbar_mobile-line-new { background-color: #fff; }
html.wb-scrolled .wb-cine-page .navbar_mobile-line-new { background-color: #0a2040; }

/* Editorial photography and fully contained Studio panels — 2026-09-15. */
.wb-studio-section { padding-block: clamp(64px, 8vw, 120px); background: #f3f6fa; }
.wb-studio-section h2 { max-width: 24ch; margin-bottom: 36px; }
.wb-studio-shell { min-width: 0; border: 1px solid #d7e1ed; border-radius: 22px; background: #fff; box-shadow: 0 20px 70px #0a20400a; overflow: hidden; }
.wb-studio-tabs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-bottom: 1px solid #d7e1ed; }
.wb-studio-tabs button { appearance: none; border: 0; border-bottom: 3px solid transparent; background: #f8fafc; padding: 22px; color: #41546a; font: inherit; font-weight: 600; text-align: left; cursor: pointer; transition: color 180ms, background-color 180ms; }
.wb-studio-tabs button span { display: block; font-size: 12px; letter-spacing: .08em; margin-bottom: 8px; }
.wb-studio-tabs button[aria-selected="true"] { color: #0756c7; background: #fff; border-bottom-color: #0066ff; }
.wb-studio-tabs button:focus-visible, .wb-studio-panel:focus-visible { outline: 3px solid #0066ff; outline-offset: -5px; }
.wb-studio-panel { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); align-items: center; gap: clamp(24px,4vw,64px); padding: clamp(24px,4vw,56px); }
.wb-studio-panel[hidden] { display: none !important; }
.wb-studio-copy { min-width: 0; }
.wb-studio-copy h3 { font-size: clamp(25px,2.6vw,38px); line-height: 1.15; letter-spacing: -.03em; margin: 16px 0; }
.wb-studio-copy p { color: #41546a; font-size: 17px; line-height: 1.65; }
.wb-studio-step { color: #0756c7; font: 12px var(--wb-font-mono); letter-spacing: .12em; }
.wb-studio-copy .wb-studio-note { margin-top: 24px; font-size: 13px; line-height: 1.5; padding-top: 18px; border-top: 1px solid #d7e1ed; }
.wb-studio-panel .wb-studio-scene { width: 100%; min-width: 0; height: auto; aspect-ratio: 722 / 540; overflow: visible; }
.wb-studio-panel .wb-studio-scene svg { width: 100%; height: auto; display: block; overflow: visible; }
.wb-studio-shell.is-ready .wb-studio-panel:not([hidden]) { animation: wb-studio-arrive 420ms cubic-bezier(.2,.7,.2,1) both; }
@keyframes wb-studio-arrive { from { opacity: .35; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.wb-sectors__list { border-top: 0; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px; }
.wb-sectors__row { min-width: 0; border: 1px solid #d7e1ed; border-radius: 14px; overflow: hidden; background: #fff; }
.wb-sectors__link { display: grid; grid-template-columns: minmax(0,1fr) 20px; gap: 7px; padding: 0 0 20px; height: 100%; align-content: start; }
.wb-sectors__photo { grid-column: 1 / -1; width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; margin-bottom: 12px; transition: filter 240ms; }
.wb-sectors__name { grid-column: 1; padding-left: 18px; font-size: 18px; }
.wb-sectors__flow { grid-column: 1; padding-left: 18px; white-space: normal; font-size: 11px; }
.wb-sectors__mark, .wb-sectors__link::before { display: none; }
.wb-sectors__go { grid-column: 2; grid-row: 2; opacity: 1; margin-right: 12px; }
.wb-sectors__link:hover .wb-sectors__photo { filter: brightness(1.045); }
.wb-editorial-disclosure, .wb-editorial-figure figcaption { color: #41546a; font-size: 12px; line-height: 1.5; margin-top: 14px; }
.wb-editorial-figure { width: min(1100px,calc(100% - 48px)); margin: 0 auto clamp(32px,5vw,72px); }
.wb-editorial-figure img { display: block; width: 100%; height: auto; max-height: 640px; object-fit: cover; border-radius: 18px; }
@media(max-width: 991px) { .wb-sectors__list { grid-template-columns: repeat(2,minmax(0,1fr)); } .wb-studio-panel { grid-template-columns: 1fr; gap: 24px; } .wb-studio-copy h3 { max-width: 24ch; } .wb-studio-panel .wb-studio-scene { max-width: 640px; margin-inline: auto; } }
@media(max-width: 520px) { .wb-studio-tabs button { padding: 14px 10px; font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; } .wb-studio-panel { padding: 20px 14px; } .wb-sectors__list { gap: 12px; } .wb-sectors__name { padding-left: 12px; font-size: 16px; } .wb-sectors__flow { padding-left: 12px; font-size: 10px; } }
@media(prefers-reduced-motion: reduce) { .wb-studio-shell.is-ready .wb-studio-panel:not([hidden]) { animation: none; } .wb-studio-tabs button,.wb-sectors__photo { transition: none; } }

/* HTML diagrams retain readable labels at phone widths; no shrinking SVG text. */
.wb-studio-copy h3 { color: #0a2040; }
.wb-studio-panel .wb-studio-scene { aspect-ratio: auto; }
.wb-studio-diagram { background: #f7f9fd; border: 1px solid #d7e1ed; border-radius: 16px; padding: clamp(16px,2.3vw,32px); }
.wb-studio-diagram-head { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: #0a2040; padding-bottom: 24px; }
.wb-studio-signal { width: 8px; height: 8px; border-radius: 50%; background: #0066ff; box-shadow: 0 0 0 5px #e2ecff; }
.wb-studio-diagram ol { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.wb-studio-diagram li { position: relative; display: grid; grid-template-columns: 30px minmax(0,1fr) 8px; align-items: center; gap: 12px; padding: 16px 12px; background: white; border: 1px solid #d7e1ed; border-radius: 9px; color: #0a2040; font-size: 15px; line-height: 1.45; }
.wb-studio-diagram li:not(:last-child)::after { content: ''; position: absolute; width: 2px; height: 16px; background: #8caedd; top: 100%; left: 28px; }
.wb-studio-node { color: #0756c7; font-size: 12px; font-variant-numeric: tabular-nums; }
.wb-studio-dot { width: 7px; height: 7px; border-radius: 50%; background: #6684ab; }
.wb-studio-diagram-foot { margin-top: 24px; padding: 12px; background: #e4edfc; border-radius: 8px; color: #194e98; font-size: 12px; }
.wb-studio-diagram--1 li:last-child { border-left: 3px solid #bd3d13; }
.wb-studio-diagram--2 li::after { display: none; }
.is-ready .wb-studio-scene.is-in .wb-studio-diagram li { animation: wb-studio-node-arrive 460ms cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--step) * 90ms); }
@keyframes wb-studio-node-arrive { from { transform: translateY(8px); border-color: #75a6ee; } to { transform: none; border-color: #d7e1ed; } }
@keyframes wb-studio-arrive { from { transform: translateY(8px); } to { transform: none; } }
@media(max-width: 520px) { .wb-studio-diagram li { font-size: 13px; padding: 14px 10px; gap: 8px; } }
@media(prefers-reduced-motion: reduce) { .is-ready .wb-studio-scene.is-in .wb-studio-diagram li { animation: none; } }

html.wb-scrolled .wb-cine-page .navbar_component-new .button-nav-new:not(.is-secondary):not(.is-ghost),
html.wb-scrolled .wb-cine-page .navbar_component-new .button-nav-new:not(.is-secondary):not(.is-ghost) :is(span,div),
html.wb-scrolled .wb-cine-page .navbar_component-new .wb-lang__item { color: #fff; }
html.wb-scrolled .wb-cine-page .navbar_component-new .wb-lang__item[aria-current="true"] { color: #0a2040; }