/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/

/*=== Body ===*/

html {
    scroll-padding-top: 7.25rem; /* This creates space for your sticky nav */
}

/*.description {
  text-wrap: balance
}*/

ol, ul {
  font-weight: 400 !important;
  font-size: clamp(0.875rem, 0.616935rem + 0.537634vw, 1rem) !important;
}

p.heading.badge.p {
    text-transform: uppercase !important;
    font-size: 0.9rem;
    color: #CECFD2;
    letter-spacing: 1.2px;
  font-weight: 600;
}

b, strong {
    font-weight: 600;
}

/*=== Header ===*/
.header__container {
  z-index: 1000 !important;
}
.header__menu-announcement p {
  font-size: 14px;
}
/*=== Hero Sections ===*/
.hero-home {
 background: radial-gradient(91.6% 50% at 50% 50%, #0B1155 0%, #050324 66.98%);
}
/*=== Buttons ===*/

/* The parent theme forces .btn-none to font-weight:700!important, which is the
   only thing on the site still pulling the 49KB Poppins 700 file — for a handful
   of text links. 600 is already loaded and preloaded. Same selector as the theme
   rule, and child.css loads after base-overrides, so this wins on order.
   Only font-weight is overridden; border/padding/position stay as the theme set them. */
.btn-none,
.btn-wrapper.btn-none-wrapper :is(.cta-button, .cta_button, [data-hubspot-cta-id]) {
  font-weight: 600 !important;
}
/* -----------------------------------------------------------
   Button hover effects (theme-safe)
   - Outline variants: left→right fill using currentColor
   - Solid variants: subtle "shine" sweep + gentle lift
   - Works with HubSpot CTAs, anchors, buttons, and inputs
   ----------------------------------------------------------- */

#hs_cos_wrapper_widget_1760068901125 .btn-custom-3256523 .cta-button {
  font-weight: 600 !important;
  font-size: 14px !important;
}

/* Shared timing + shape (adjust per wrapper if needed) */
.btn-wrapper {
  --btn-speed: 620ms;
  --btn-ease: cubic-bezier(.22,.61,.36,1);
  --btn-radius: 3px;
  /* Optional: text color after an outline fills; remove if theme handles it */
  --btn-on-fill: #fff;
}

/* Base prep for all buttons inside wrappers */
.btn-wrapper :is(.cta_button,.cta-button,[data-hubspot-cta-id],a,button,input[type=submit],input[type=button]) {
  position: relative;
  border-radius: var(--btn-radius);
  transition:
    color var(--btn-speed) var(--btn-ease),
    border-color var(--btn-speed) var(--btn-ease),
    background-color var(--btn-speed) var(--btn-ease),
    background-size var(--btn-speed) var(--btn-ease),
    filter var(--btn-speed) var(--btn-ease);
}

/* ===========================================================
   OUTLINE VARIANTS  (primary + secondary)
   - Uses currentColor for the sliding fill
   - Keeps your theme's initial border/text colors
   =========================================================== */
.btn-wrapper.btn-outline-primary-wrapper :is(.cta_button,.cta-button,[data-hubspot-cta-id],a,button,input[type=submit],input[type=button]),
.btn-wrapper.btn-outline-secondary-wrapper :is(.cta_button,.cta-button,[data-hubspot-cta-id],a,button,input[type=submit],input[type=button]) {
  /* The gradient is the sweep layer; we don't touch base bg/border */
  background-image: linear-gradient(90deg, currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-position: 0 0;
}

/* Hover/focus: slide fill in (leave border-color to theme) */
.btn-wrapper.btn-outline-primary-wrapper :is(.cta_button,.cta-button,[data-hubspot-cta-id],a,button,input[type=submit],input[type=button]):hover,
.btn-wrapper.btn-outline-primary-wrapper :is(.cta_button,.cta-button,[data-hubspot-cta-id],a,button,input[type=submit],input[type=button]):focus-visible,
.btn-wrapper.btn-outline-secondary-wrapper :is(.cta_button,.cta-button,[data-hubspot-cta-id],a,button,input[type=submit],input[type=button]):hover,
.btn-wrapper.btn-outline-secondary-wrapper :is(.cta_button,.cta-button,[data-hubspot-cta-id],a,button,input[type=submit],input[type=button]):focus-visible {
  background-size: 100% 100%;
  /* If your theme already switches text to a contrasting color, remove this: */
  color: var(--btn-on-fill);
}


.btn-wrapper.btn-outline-white-wrapper :is(.cta_button, .cta-button, [data-hubspot-cta-id], input[type="submit"], input[type="button"], button[type='submit']):hover {
  color: #050324;
}
/* ===========================================================
   SOLID VARIANTS  (primary + secondary)
   - Keep theme bg/border/text exactly as-is
   - Add a shine overlay (for elements supporting ::after)
   - Inputs get a simple brightness lift fallback
   =========================================================== */
.btn-wrapper.btn-primary-wrapper :is(.cta_button,.cta-button,[data-hubspot-cta-id],a,button),
.btn-wrapper.btn-secondary-wrapper :is(.cta_button,.cta-button,[data-hubspot-cta-id],a,button) {
  overflow: hidden;
  isolation: isolate; /* contains the shine layer */
}

/* Shine layer (not rendered on inputs) */
.btn-wrapper.btn-primary-wrapper :is(.cta_button,.cta-button,[data-hubspot-cta-id],a,button)::after,
.btn-wrapper.btn-secondary-wrapper :is(.cta_button,.cta-button,[data-hubspot-cta-id],a,button)::after {
  content: "";
  position: absolute;
  inset: -1px;                 /* cover edges under border radius */
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.18) 50%,
    rgba(255,255,255,0) 100%
  );
  transform: translateX(-120%);
  transition: transform var(--btn-speed) var(--btn-ease);
  pointer-events: none;
}

/* Hover/focus: sweep + gentle lift (no color overrides) */
.btn-wrapper.btn-primary-wrapper :is(.cta_button,.cta-button,[data-hubspot-cta-id],a,button):hover,
.btn-wrapper.btn-primary-wrapper :is(.cta_button,.cta-button,[data-hubspot-cta-id],a,button):focus-visible,
.btn-wrapper.btn-secondary-wrapper :is(.cta_button,.cta-button,[data-hubspot-cta-id],a,button):hover,
.btn-wrapper.btn-secondary-wrapper :is(.cta_button,.cta-button,[data-hubspot-cta-id],a,button):focus-visible {
  filter: brightness(1.05);
}
.btn-wrapper.btn-primary-wrapper :is(.cta_button,.cta-button,[data-hubspot-cta-id],a,button):hover::after,
.btn-wrapper.btn-primary-wrapper :is(.cta_button,.cta-button,[data-hubspot-cta-id],a,button):focus-visible::after,
.btn-wrapper.btn-secondary-wrapper :is(.cta_button,.cta-button,[data-hubspot-cta-id],a,button):hover::after,
.btn-wrapper.btn-secondary-wrapper :is(.cta_button,.cta-button,[data-hubspot-cta-id],a,button):focus-visible::after {
  transform: translateX(120%);
}

/* Inputs (solid variants): simple lift only; ::after not supported */
.btn-wrapper.btn-primary-wrapper :is(input[type=submit],input[type=button]),
.btn-wrapper.btn-secondary-wrapper :is(input[type=submit],input[type=button]) {
  /* keep theme’s bg/border/text */
}
.btn-wrapper.btn-primary-wrapper :is(input[type=submit],input[type=button]):hover,
.btn-wrapper.btn-primary-wrapper :is(input[type=submit],input[type=button]):focus-visible,
.btn-wrapper.btn-secondary-wrapper :is(input[type=submit],input[type=button]):hover,
.btn-wrapper.btn-secondary-wrapper :is(input[type=submit],input[type=button]):focus-visible {
  filter: brightness(1.05);
}

/* ===========================================================
   Accessibility niceties
   =========================================================== */
.btn-wrapper :is(.cta_button,.cta-button,[data-hubspot-cta-id],a,button,input[type=submit],input[type=button]):focus-visible {
  outline: 2px solid currentColor;  /* uses the variant’s color */
  outline-offset: 2px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .btn-wrapper :is(.cta_button,.cta-button,[data-hubspot-cta-id],a,button,input[type=submit],input[type=button]) {
    transition: none;
  }
}

/* ===========================================================
   INFO VARIANT — Button + Icon + Underline
   =========================================================== */

/* Base button (target the actual anchor in your wrapper) */
.btn-wrapper.btn-info-wrapper > a {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;            /* space between text and icon */
  padding: 0;
  border: 0;
  background: none;
  font-size: 1rem !important;
  line-height: 1;
  text-decoration: none;
  position: relative;
  overflow: visible;
  border-radius: 0px;
}

/* Icon wrapper (HubSpot uses underscore class) */
.btn-wrapper.btn-info-wrapper .button_icon {
  display: inline-flex;
  line-height: 0;         /* kills stray baseline gaps */
}

/* SVG sizing + color inheritance */
.btn-wrapper.btn-info-wrapper .button_icon svg {
  width: 1.15em;           /* adjust size as needed */
  height: 1.15em;
  display: block;
  fill: currentColor;     /* match text color */
  transition: transform .28s ease; /* for the slide */
}

/* Slide icon slightly right on hover/focus */
.btn-wrapper.btn-info-wrapper > a:is(:hover, :focus-visible) .button_icon svg {
  transform: translateX(3px);    /* tweak to 2–4px to taste */
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .btn-wrapper.btn-info-wrapper > a,
  .btn-wrapper.btn-info-wrapper .button_icon svg {
    transition: none;
  }
}

/*=== Sliders ===*/
.qd-slider .splide__track {
    position: relative; /* Make sure the pseudo-element is positioned relative to this element */
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

/*=== Bacgrounds ===
.sr-multicol-media.sr-three-col-02 {
  background: radial-gradient(65.6% 43.07% at 50% 50%, rgba(26, 18, 138, 0.36) 0%, rgba(5, 3, 36, 0.14) 89.46%);
  background-position: left center;
  background-size: 50% 100%; Adjust as needed 
  background-repeat: no-repeat;
}*/

/*=== Sr Two Col 02 ===*/
.sr-multicol-media.sr-bg-image .sr-col {
  border-right: none !important;
}

/*=== Margins & Padding ===*/
.qd-slider.margin-bottom .heading {
  margin-bottom: 5.375rem;
}
@media (max-width: 767px) {
  .sr-padding-full {
    padding: 3.25rem 0;
  }
  .title-section .sr-spacer-bottom-50 {
    padding-bottom: 1.25rem;
  }
  .sr-one-col-02-item.sr-card {
    padding-right: 2rem !important;
    padding-left: 2rem !important;
  }
}
}

/*=== Forms ===*/
.legal-consent-container p {
    font-size: 0.8rem;
    text-align: left;
}
.legal-consent-container a:after {
    background: none !important;
}
.legal-consent-container .hs-form-booleancheckbox-display>span {
  margin-left: 0px !important;
  font-size: 0.8rem;
}
input:is([type="radio"], [type="checkbox"]):checked+span:before {
    background-color: transparent !important;
}
/* Robust shine sweep for HubSpot form submit (no width changes) */
.hs_submit .actions {
  position: relative;          /* anchor overlay */
  overflow: hidden;            /* clip the shine */
  /* no display/width here → HubSpot controls sizing */
}

/* Keep theme styles; no radius override */
.hs_submit .actions .hs-button[type="submit"] {
  position: relative;
  z-index: 1;
  transition: filter var(--btn-speed, .4s) var(--btn-ease, cubic-bezier(.22,.61,.36,1));
}

/* Shine layer lives on the wrapper */
.hs_submit .actions::after {
  content: "";
  position: absolute;
  inset: -1px;                 /* cover edges, play nice with button radius */
  /* if your wrapper lacks a radius, this still looks clean due to the fade */
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.18) 50%,
    rgba(255,255,255,0) 100%
  );
  transform: translateX(-120%);
  transition: transform var(--btn-speed, .4s) var(--btn-ease, cubic-bezier(.22,.61,.36,1));
  pointer-events: none;
  z-index: 2;
}

/* Trigger the sweep when the INPUT is hovered/focused */
.hs_submit .actions:has(.hs-button[type="submit"]:hover)::after,
.hs_submit .actions:has(.hs-button[type="submit"]:focus-visible)::after {
  transform: translateX(120%);
}

.hs_submit .actions:has(.hs-button[type="submit"]:hover) .hs-button[type="submit"],
.hs_submit .actions:has(.hs-button[type="submit"]:focus-visible) .hs-button[type="submit"] {
  filter: brightness(1.05);
}

/* =========================
   HubSpot SELECT styling
   (closed state only)
   ========================= */

.hs-form select.hs-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background-color: #0b0f2a; /* your dark background */
  color: #ffffff;

  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px;

  padding: 14px 44px 14px 16px;
  line-height: 1.2;

  width: 100%;
}

/* Focus */
.hs-form select.hs-input:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.6);
}

/* Placeholder option color */
.hs-form select.hs-input.is-placeholder {
  color: rgba(255, 255, 255, 0.6);
}

/* Hint dark UI for browsers that support it */
.hs-form select.hs-input {
  color-scheme: dark;
}
/* Tell the browser the page supports dark UI for native controls */
:root {
  color-scheme: light dark;
}

/* Ensure HubSpot selects prefer dark native UI where supported */
.hs-form select.hs-input {
  color-scheme: dark;
}

textarea, select, .form-control, input:not([type="radio"]):not([type="checkbox"]):not([type="file"]):not([type="submit"]), input[readonly]:not([type="radio"]):not([type="checkbox"]):not([type="file"]):not([type="submit"]) {
  font-size: 0.875rem !important;
}
.hsfc-DataPrivacyField {
    font-size: 14px;
    opacity: 0.7;
}
.hsfc-DataPrivacyField a::after{
    background: none !important;
}

.hsfc-DataPrivacyField a {
  text-decoration: underline;
}
.hsfc-Button {
font-size: .875rem !important;
font-weight: 600 !important;
}

@media (forced-colors: active) {
  .hs-form select.hs-input {
    forced-color-adjust: auto;
  }
}


/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hs_submit .actions::after {
    transition: none;
    transform: translateX(0);
    opacity: .12;
  }
}

/*=== Badge ===*/
.sr-badge {
    display: inline-block;
    padding: .2rem 1.2rem;
    font-size: .9rem;
    font-weight: 400;
    letter-spacing: .05em;
    border-radius: 999px;
    margin-bottom: .8rem;
    color: inherit;
    background: 
 color-mix(in srgb, currentColor 12%, transparent);
    border: 1px none
 color-mix(in srgb, currentColor 22%, transparent);
    align-self: flex-start;
    white-space: nowrap;
  text-transform: uppercase;
}

/*=== Two Column Media ===*/
.sr-two-col-gallery-01 .columns .image-inner img {
  border-radius: 10px !important;
}

/*=== Blog ===*/
.blog-steps {
  padding-left: 1.25em;
  margin: 2rem 0;
}

.blog-steps li {
  font-size: clamp(1.25rem, 1.075268817204301vw + 0.7338709677419355rem, 1.5rem); /* h5 size */
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 1.25rem;
}

.blog-steps li::marker {
  font-size: clamp(1.25rem, 1.075268817204301vw + 0.7338709677419355rem, 1.5rem); /* same as headline */
  font-weight: 600;
  color: #fff;
}

.blog-steps li strong {
  display: inline;
  font-weight: 600;
}

.blog-steps li p {
  margin: 0.25rem 0 1.25rem 0;
  font-size: clamp(0.875rem, 0.5376344086021505vw + 0.6169354838709677rem, 1.0rem);
  font-weight: normal;
  line-height: 1.6;
}

ol.blog-steps ul li {
    font-size: clamp(0.875rem, 0.5376344086021505vw + 0.6169354838709677rem, 1.0rem);
    font-weight: 400;
}

/*=== Animations ===*/
/* =========================================================
   Bios chat graphic (QPilot) — light — child theme CSS
   Pairs with bios-chat-light.html (HTML module).
   - Pure CSS animation, loops every 9s.
   - Waits until the graphic scrolls into view (a tiny script in the
     HTML adds/removes .is-waiting). Without the script it just plays.
   - Fills its column at 4:3 (620x465 in the media column) and
     scales everything inside proportionally.
   ========================================================= */

.wbc {
  --c-text: #050324; --c-body: #5d6172; --c-muted: #5d6172; --c-line: #efeff2; --c-input-b: #e3e3e8; --c-focus: rgba(0,120,215,.45);
  --c-chip: #f5f5f7; --c-green: #4cb782; --c-blue: #0078d7; --c-pill: #ebf5ff; --c-pill-b: #c4dcf5; --c-pill-t: #6f7386; --c-btn: #050324;
  container-type: inline-size; position: relative; display: block; width: 100%; max-width: 100%; aspect-ratio: 4 / 3; overflow: hidden;
  margin: 0; padding: 0; font-family: 'Poppins', system-ui, sans-serif; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-align: left;
}
.wbc *, .wbc *::before, .wbc *::after { box-sizing: border-box; --u: calc(100cqw / 800); }
/* Panel + bottom fade are drawn with pseudo-elements so editors can't strip them */
.wbc .b-stage { position: absolute; inset: 0; color: var(--c-text); font-size: calc(14 * var(--u)); line-height: 1; letter-spacing: normal; text-transform: none; }
.wbc .b-stage::before { content: ""; position: absolute; left: calc(11 * var(--u)); top: 0; width: calc(750 * var(--u)); height: 100%; border-radius: calc(10 * var(--u)); background: linear-gradient(180deg, #ffffff 0%, #ffffff 62%, #f3f4f9 82%, #e9ebf6 100%); }
.wbc .b-stage::after { content: ""; position: absolute; left: calc(11 * var(--u)); top: calc(430 * var(--u)); width: calc(750 * var(--u)); bottom: 0; border-radius: 0 0 calc(10 * var(--u)) calc(10 * var(--u)); background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(246,247,251,.72) 42%, rgba(236,238,247,.88) 100%); z-index: 1; pointer-events: none; }
.wbc .b-abs { position: absolute; display: flex; align-items: center; white-space: nowrap; }
.wbc img { display: block; max-width: none; margin: 0; padding: 0; }
.wbc svg { display: block; flex-shrink: 0; }
/* decorative boxes carry a hidden   so site editors don't strip them as empty */
.wbc .b-caret, .wbc .b-spin, .wbc .b-box, .wbc .b-line { font-size: 0; line-height: 0; color: transparent; overflow: hidden; }

/* Header */
.wbc .b-title { left: calc(40.4 * var(--u)); top: calc(26 * var(--u)); height: calc(31 * var(--u)); font-size: calc(22.3 * var(--u)); font-weight: 600; letter-spacing: -0.01em; }
.wbc .b-status { position: absolute; right: calc(72.6 * var(--u)); top: calc(30 * var(--u)); width: calc(220 * var(--u)); height: calc(20 * var(--u)); font-size: calc(12.9 * var(--u)); color: var(--c-muted); }
.wbc .b-status > span { position: absolute; right: 0; top: 0; height: 100%; display: flex; align-items: center; gap: calc(9 * var(--u)); white-space: nowrap; }
.wbc .b-spin { width: calc(12 * var(--u)); height: calc(12 * var(--u)); border-radius: 50%; border: calc(2 * var(--u)) solid #dfe0e6; border-top-color: #f2702f; animation: b-spin .8s linear infinite; }
.wbc .b-check { width: calc(12.5 * var(--u)); height: calc(12.5 * var(--u)); }

/* Ask bar */
.wbc .b-input { position: absolute; left: calc(40.4 * var(--u)); top: calc(94.2 * var(--u)); width: calc(553.8 * var(--u)); height: calc(49.8 * var(--u)); border-radius: calc(3 * var(--u)); border: calc(1 * var(--u)) solid var(--c-input-b); background: #ffffff; display: flex; align-items: center; padding-left: calc(18 * var(--u)); font-size: calc(14 * var(--u)); white-space: nowrap; }
.wbc .b-q { display: inline-block; }
.wbc .b-caret { position: absolute; left: calc(18 * var(--u)); top: calc(15.5 * var(--u)); width: calc(1.5 * var(--u)); height: calc(18 * var(--u)); background: var(--c-text); }
.wbc .b-ask { position: absolute; left: calc(603.2 * var(--u)); top: calc(94.2 * var(--u)); width: calc(124.2 * var(--u)); height: calc(50.4 * var(--u)); border-radius: calc(4 * var(--u)); background: var(--c-btn); color: #ffffff; font-size: calc(14.6 * var(--u)); display: flex; align-items: center; justify-content: center; }
.wbc .b-chip { left: calc(39.8 * var(--u)); top: calc(165.6 * var(--u)); width: calc(334.8 * var(--u)); height: calc(31.2 * var(--u)); background: var(--c-chip); border-left: calc(2.4 * var(--u)) solid var(--c-green); border-radius: 0 calc(3 * var(--u)) calc(3 * var(--u)) 0; padding-left: calc(10 * var(--u)); gap: calc(8 * var(--u)); font-size: calc(9.8 * var(--u)); }
.wbc .b-chip b { color: var(--c-green); font-weight: 600; font-size: calc(12 * var(--u)); }
.wbc .b-chip svg { position: absolute; right: calc(11 * var(--u)); top: calc(9.6 * var(--u)); width: calc(12 * var(--u)); height: calc(12 * var(--u)); }

/* Bios */
.wbc .b-row { position: absolute; left: 0; width: 100%; height: calc(88 * var(--u)); }
.wbc .b-row--1 { top: calc(219 * var(--u)); }
.wbc .b-row--2 { top: calc(307 * var(--u)); }
.wbc .b-row--3 { top: calc(395 * var(--u)); }
.wbc .b-row--4 { top: calc(483 * var(--u)); }
.wbc .b-line { position: absolute; left: calc(12.8 * var(--u)); top: 0; width: calc(743.4 * var(--u)); height: calc(1 * var(--u)); background: var(--c-line); }
.wbc .b-box { position: absolute; left: calc(40.4 * var(--u)); top: calc(29.4 * var(--u)); width: calc(19.2 * var(--u)); height: calc(19.2 * var(--u)); border-radius: calc(3 * var(--u)); border: calc(1.2 * var(--u)) solid #d9dae1; background: #ffffff; }
.wbc .b-tick { position: absolute; left: calc(40.4 * var(--u)); top: calc(29.4 * var(--u)); width: calc(19.2 * var(--u)); height: calc(19.2 * var(--u)); border-radius: calc(3 * var(--u)); background: var(--c-blue); border: calc(1 * var(--u)) solid #4a63d3; display: flex; align-items: center; justify-content: center; }
.wbc .b-tick svg { width: calc(11 * var(--u)); height: calc(11 * var(--u)); }
.wbc .b-photo { position: absolute; left: calc(75.8 * var(--u)); top: calc(15.9 * var(--u)); width: calc(46.2 * var(--u)); height: calc(46.2 * var(--u)); border-radius: 50%; object-fit: cover; }
.wbc .b-name-row { left: calc(138.2 * var(--u)); top: calc(18.3 * var(--u)); height: calc(21 * var(--u)); gap: calc(9 * var(--u)); }
.wbc .b-name { font-size: calc(15.8 * var(--u)); font-weight: 600; letter-spacing: -0.005em; }
.wbc .b-pill { height: calc(20.4 * var(--u)); display: flex; align-items: center; padding: 0 calc(10.4 * var(--u)); border-radius: 999px; background: var(--c-pill); border: calc(1 * var(--u)) solid var(--c-pill-b); color: var(--c-pill-t); font-size: calc(7.2 * var(--u)); }
.wbc .b-desc { left: calc(138.2 * var(--u)); top: calc(46.2 * var(--u)); height: calc(18 * var(--u)); font-size: calc(13 * var(--u)); color: var(--c-body); }

/* Pop-up */
.wbc .b-card { position: absolute; left: calc(261.2 * var(--u)); top: calc(451.2 * var(--u)); width: calc(480 * var(--u)); height: calc(76.8 * var(--u)); z-index: 2; border-radius: calc(4 * var(--u)); background: #ffffff; border: calc(1 * var(--u)) solid #ececf0; box-shadow: 0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(5,3,36,.10); }
.wbc .b-card-t { left: calc(19.8 * var(--u)); top: 0; height: 100%; gap: calc(13 * var(--u)); font-size: calc(15.1 * var(--u)); font-weight: 600; }
.wbc .b-card-t svg { width: calc(25 * var(--u)); height: calc(25 * var(--u)); }
.wbc .b-save { position: absolute; left: calc(298.2 * var(--u)); top: calc(15.6 * var(--u)); width: calc(161.4 * var(--u)); height: calc(45.6 * var(--u)); border-radius: calc(4 * var(--u)); background: var(--c-btn); color: #ffffff; font-size: calc(15 * var(--u)); display: flex; align-items: center; justify-content: center; white-space: nowrap; }

/* ---------- Animation (CSS only, 9s loop) ----------
   0.4s  question types into the ask bar (fast)
   1.7s  sent: bar flashes, Ask presses, header shows "Searching 116 bios"
   2.0s  filter chip appears · 2.8s header shows "Top 20 matches"
   2.6s  bios load in one by one
   3.7s  first three bios get ticked in turn
   4.5s  "3 Bios matched on experience" pop-up rises in
   8.0s  everything fades out, repeat */
.wbc .b-q, .wbc .b-caret, .wbc .b-input, .wbc .b-ask, .wbc .b-st1, .wbc .b-st2, .wbc .b-chip, .wbc .b-row, .wbc .b-tick, .wbc .b-card {
  animation-duration: 9s; animation-iteration-count: infinite; animation-fill-mode: both; animation-timing-function: cubic-bezier(.22,1,.36,1);
}
.wbc .b-q { animation-name: b-type; animation-timing-function: steps(40, end); }
.wbc .b-caret { animation-name: b-caret; animation-timing-function: steps(1, end); }
.wbc .b-input { animation-name: b-send; animation-timing-function: ease-in-out; }
.wbc .b-ask { animation-name: b-press; animation-timing-function: ease-in-out; }
.wbc .b-st1 { animation-name: b-st1; animation-timing-function: ease; }
.wbc .b-st2 { animation-name: b-st2; animation-timing-function: ease; }
.wbc .b-chip { animation-name: b-chip; }
.wbc .b-row--1 { animation-name: b-row1; }
.wbc .b-row--2 { animation-name: b-row2; }
.wbc .b-row--3 { animation-name: b-row3; }
.wbc .b-row--4 { animation-name: b-row4; }
.wbc .b-row--1 .b-tick { animation-name: b-tick1; }
.wbc .b-row--2 .b-tick { animation-name: b-tick2; }
.wbc .b-row--3 .b-tick { animation-name: b-tick3; }
.wbc .b-card { animation-name: b-card; }

@keyframes b-type { 0%, 4.44% { clip-path: inset(0 100% 0 0); } 17.78%, 92.22% { clip-path: inset(0 0 0 0); } 95.56%, 100% { clip-path: inset(0 100% 0 0); } }
@keyframes b-caret { 0% { opacity: 1; } 1.67% { opacity: 0; } 3.33% { opacity: 1; } 4.44%, 100% { opacity: 0; } }
@keyframes b-send { 0%, 18.33% { border-color: var(--c-input-b); } 20.00% { border-color: var(--c-focus); } 25.56%, 100% { border-color: var(--c-input-b); } }
@keyframes b-press { 0%, 18.00% { transform: none; } 19.11% { transform: scale(.96); } 20.67%, 100% { transform: none; } }
@keyframes b-st1 { 0%, 19.44% { opacity: 0; } 21.11%, 30.00% { opacity: 1; } 31.67%, 100% { opacity: 0; } }
@keyframes b-st2 { 0%, 30.56% { opacity: 0; } 33.33%, 88.89% { opacity: 1; } 94.44%, 100% { opacity: 0; } }
@keyframes b-chip { 0%, 22.22% { opacity: 0; transform: translateY(6px); } 27.22%, 88.89% { opacity: 1; transform: none; } 94.44%, 100% { opacity: 0; transform: none; } }
@keyframes b-row1 { 0%, 28.89% { opacity: 0; transform: translateY(10px); } 35.00%, 88.89% { opacity: 1; transform: none; } 94.44%, 100% { opacity: 0; transform: none; } }
@keyframes b-row2 { 0%, 30.89% { opacity: 0; transform: translateY(10px); } 37.00%, 88.89% { opacity: 1; transform: none; } 94.44%, 100% { opacity: 0; transform: none; } }
@keyframes b-row3 { 0%, 32.89% { opacity: 0; transform: translateY(10px); } 39.00%, 88.89% { opacity: 1; transform: none; } 94.44%, 100% { opacity: 0; transform: none; } }
@keyframes b-row4 { 0%, 34.89% { opacity: 0; transform: translateY(10px); } 41.00%, 88.89% { opacity: 1; transform: none; } 94.44%, 100% { opacity: 0; transform: none; } }
@keyframes b-tick1 { 0%, 41.11% { opacity: 0; transform: scale(.5); } 43.11% { opacity: 1; transform: scale(1.12); } 44.67%, 100% { opacity: 1; transform: none; } }
@keyframes b-tick2 { 0%, 43.89% { opacity: 0; transform: scale(.5); } 45.89% { opacity: 1; transform: scale(1.12); } 47.44%, 100% { opacity: 1; transform: none; } }
@keyframes b-tick3 { 0%, 46.67% { opacity: 0; transform: scale(.5); } 48.67% { opacity: 1; transform: scale(1.12); } 50.22%, 100% { opacity: 1; transform: none; } }
@keyframes b-card { 0%, 50.00% { opacity: 0; transform: translateY(14px); } 56.67%, 87.78% { opacity: 1; transform: none; } 93.33%, 100% { opacity: 0; transform: none; } }
@keyframes b-spin { to { transform: rotate(360deg); } }

/* Hold everything on the first frame until the graphic is in view */
.wbc.is-waiting, .wbc.is-waiting *, .wbc.is-waiting *::before, .wbc.is-waiting *::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .wbc .b-q, .wbc .b-input, .wbc .b-ask, .wbc .b-st2, .wbc .b-chip, .wbc .b-row, .wbc .b-tick, .wbc .b-card { animation: none; }
  .wbc .b-st1, .wbc .b-caret { animation: none; display: none !important; }
}

/* =========================================================
   Win/loss chat graphic (QPilot) — light — child theme CSS
   Pairs with winloss-chat-light.html (HTML module).
   - Pure CSS animation, loops every 8.5s.
   - Waits until the graphic scrolls into view (a tiny script in the
     HTML adds/removes .is-waiting). Without the script it just plays.
   - Fills its column at 4:3 (620x465 in the media column) and
     scales everything inside proportionally.
   ========================================================= */

.wlc2 {
  --c-text: #050324; --c-body: #050324; --c-muted: #5d6172; --c-faint: #9a9cab; --c-line: #ececf0; --c-input-b: #e3e3e8;
  --c-link: #0078d7; --c-green: #4cb782; --c-icon: #ebf5ff; --c-icon-2: #eef0fb; --c-btn: #050324; --c-focus: rgba(0,120,215,.45);
  container-type: inline-size; position: relative; display: block; width: 100%; max-width: 100%; aspect-ratio: 4 / 3; overflow: hidden;
  margin: 0; padding: 0; font-family: 'Poppins', system-ui, sans-serif; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-align: left;
}
.wlc2 *, .wlc2 *::before, .wlc2 *::after { box-sizing: border-box; --u: calc(100cqw / 800); }
/* Document panel background is drawn with ::before so editors can't strip it */
.wlc2 .w-stage { position: absolute; inset: 0; color: var(--c-text); font-size: calc(14 * var(--u)); line-height: 1; letter-spacing: normal; text-transform: none; }
.wlc2 .w-stage::before { content: ""; position: absolute; left: calc(45.00 * var(--u)); top: calc(7.00 * var(--u)); width: calc(634.72 * var(--u)); height: calc(469.17 * var(--u)); border-radius: 0 0 0 calc(8.19 * var(--u)); background: linear-gradient(180deg, #ffffff 0%, #ffffff 55%, #f4f5f9 75%, #e8ebf6 100%); }
.wlc2 .w-abs { position: absolute; display: flex; align-items: center; white-space: nowrap; }
.wlc2 img { display: block; max-width: none; margin: 0; padding: 0; }
.wlc2 svg { display: block; flex-shrink: 0; }
/* decorative boxes carry a hidden   so site editors don't strip them as empty */
.wlc2 .w-hr, .wlc2 .w-caret, .wlc2 .w-bar, .wlc2 .w-dots i { font-size: 0; line-height: 0; color: transparent; overflow: hidden; }

/* Document */
.wlc2 .w-hr { position: absolute; left: calc(45.00 * var(--u)); width: calc(634.72 * var(--u)); height: calc(1 * var(--u)); background: var(--c-line); }
.wlc2 .w-crumbs { left: calc(71.33 * var(--u)); top: calc(26.89 * var(--u)); height: calc(16.38 * var(--u)); gap: calc(7.60 * var(--u)); font-size: calc(13.75 * var(--u)); color: var(--c-muted); }
.wlc2 .w-sep { color: #b9bbc6; }
.wlc2 .w-current { color: var(--c-text); }
.wlc2 .w-title { left: calc(71.33 * var(--u)); top: calc(88.90 * var(--u)); height: calc(24.57 * var(--u)); font-size: calc(21.64 * var(--u)); font-weight: 600; letter-spacing: -0.01em; }
.wlc2 .w-avatars { position: absolute; left: calc(73.08 * var(--u)); top: calc(127.51 * var(--u)); display: flex; }
.wlc2 .w-avatar { width: calc(26.91 * var(--u)); height: calc(26.91 * var(--u)); border-radius: 50%; object-fit: cover; border: calc(1.17 * var(--u)) solid #ffffff; }
.wlc2 .w-avatar + .w-avatar { margin-left: calc(-4.68 * var(--u)); }
.wlc2 .w-meta { left: calc(136.84 * var(--u)); top: calc(132.19 * var(--u)); height: calc(18.72 * var(--u)); gap: calc(4.09 * var(--u)); font-size: calc(14.33 * var(--u)); color: var(--c-muted); }
.wlc2 .w-meta b { font-weight: 400; color: var(--c-link); }
.wlc2 .w-stat { position: absolute; top: calc(200.05 * var(--u)); height: calc(38.61 * var(--u)); }
.wlc2 .w-stat--1 { left: calc(70.74 * var(--u)); }
.wlc2 .w-stat--2 { left: calc(204.70 * var(--u)); }
.wlc2 .w-stat--3 { left: calc(367.33 * var(--u)); }
.wlc2 .w-stat-icon { position: absolute; left: 0; top: 0; width: calc(38.61 * var(--u)); height: calc(38.61 * var(--u)); border-radius: 50%; background: var(--c-icon); display: flex; align-items: center; justify-content: center; }
.wlc2 .w-stat--3 .w-stat-icon { background: var(--c-icon-2); }
.wlc2 .w-stat-icon svg { width: calc(17.55 * var(--u)); height: calc(17.55 * var(--u)); stroke: var(--c-link); }
.wlc2 .w-stat-v { left: calc(50.89 * var(--u)); top: calc(0.00 * var(--u)); height: calc(17.55 * var(--u)); font-size: calc(16.96 * var(--u)); font-weight: 600; }
.wlc2 .w-stat-l { left: calc(50.89 * var(--u)); top: calc(23.98 * var(--u)); height: calc(16.38 * var(--u)); font-size: calc(13.75 * var(--u)); color: var(--c-muted); }
.wlc2 .w-head { left: calc(71.33 * var(--u)); top: calc(277.27 * var(--u)); height: calc(15.21 * var(--u)); font-size: calc(12.58 * var(--u)); color: var(--c-faint); }
.wlc2 .w-urow { position: absolute; left: calc(45.00 * var(--u)); top: 0; width: calc(634.72 * var(--u)); height: calc(59.08 * var(--u)); }
.wlc2 .w-urow--1 { top: calc(305.94 * var(--u)); background: linear-gradient(180deg, rgba(246,247,251,.0), rgba(246,247,251,.9)); }
.wlc2 .w-urow--2 { top: calc(365.02 * var(--u)); }
.wlc2 .w-urow--2 .w-viewer { opacity: .38; }
.wlc2 .w-photo { width: calc(32.76 * var(--u)); height: calc(32.76 * var(--u)); border-radius: 50%; object-fit: cover; }
.wlc2 .w-viewer { left: calc(25.74 * var(--u)); top: calc(13.45 * var(--u)); height: calc(32.76 * var(--u)); gap: calc(12.29 * var(--u)); font-size: calc(14.92 * var(--u)); color: #3b3a55; }

/* Chat card */
.wlc2 .w-card { position: absolute; left: calc(324.63 * var(--u)); top: calc(251.53 * var(--u)); width: calc(429.39 * var(--u)); height: calc(339.30 * var(--u)); z-index: 2; border-radius: calc(4.68 * var(--u)); background: #ffffff; border: calc(1 * var(--u)) solid #ebebef; box-shadow: 0 calc(10.53 * var(--u)) calc(29.25 * var(--u)) rgba(5,3,36,.10); }
.wlc2 .w-card-title { left: calc(24.57 * var(--u)); top: calc(26.91 * var(--u)); height: calc(25.74 * var(--u)); gap: calc(10.53 * var(--u)); font-size: calc(19.89 * var(--u)); font-weight: 600; letter-spacing: -0.01em; }
.wlc2 .w-card-title svg { width: calc(23.40 * var(--u)); height: calc(23.40 * var(--u)); }
.wlc2 .w-chip { position: absolute; left: calc(296.59 * var(--u)); top: calc(26.32 * var(--u)); height: calc(24.57 * var(--u)); padding: 0 calc(8.77 * var(--u)); display: flex; align-items: center; border-radius: calc(4.09 * var(--u)); border: calc(1 * var(--u)) solid var(--c-input-b); font-size: calc(11.99 * var(--u)); color: var(--c-muted); white-space: nowrap; }
.wlc2 .w-input { position: absolute; left: calc(22.81 * var(--u)); top: calc(84.82 * var(--u)); width: calc(384.93 * var(--u)); height: calc(71.95 * var(--u)); border-radius: calc(4.09 * var(--u)); border: calc(1 * var(--u)) solid var(--c-input-b); padding: calc(13.45 * var(--u)) 0 0 calc(18.72 * var(--u)); font-size: calc(13.45 * var(--u)); color: var(--c-text); }
.wlc2 .w-line { display: block; width: max-content; white-space: nowrap; line-height: calc(20.47 * var(--u)); }
.wlc2 .w-caret { position: absolute; left: calc(18.72 * var(--u)); top: calc(14.62 * var(--u)); width: calc(1.5 * var(--u)); height: calc(17.55 * var(--u)); background: var(--c-text); }
.wlc2 .w-answer { position: absolute; left: calc(25.74 * var(--u)); top: calc(173.16 * var(--u)); margin: 0; font-size: calc(14.62 * var(--u)); line-height: calc(22.23 * var(--u)); color: var(--c-body); white-space: nowrap; }
.wlc2 .w-answer b { color: var(--c-green); font-weight: 600; }
.wlc2 .w-thinking { left: calc(25.74 * var(--u)); top: calc(176.67 * var(--u)); height: calc(15.21 * var(--u)); gap: calc(8.19 * var(--u)); font-size: calc(13.45 * var(--u)); color: var(--c-muted); }
.wlc2 .w-dots { display: flex; gap: calc(3.51 * var(--u)); }
.wlc2 .w-dots i { display: block; width: calc(5.26 * var(--u)); height: calc(5.26 * var(--u)); border-radius: 50%; background: #f2702f; }
.wlc2 .w-bar { position: absolute; left: calc(24.57 * var(--u)); top: calc(236.92 * var(--u)); width: calc(282.56 * var(--u)); height: calc(7.60 * var(--u)); border-radius: 99px; background: var(--c-green); transform-origin: 0 50%; }
.wlc2 .w-actions { position: absolute; left: calc(91.84 * var(--u)); top: calc(264.42 * var(--u)); display: flex; gap: calc(13.45 * var(--u)); }
.wlc2 .w-btn { height: calc(44.46 * var(--u)); display: inline-flex; align-items: center; justify-content: center; border-radius: calc(4.09 * var(--u)); font-size: calc(14.92 * var(--u)); white-space: nowrap; }
.wlc2 .w-btn--primary { width: calc(156.78 * var(--u)); color: #ffffff; background: var(--c-btn); }
.wlc2 .w-btn--ghost { width: calc(142.16 * var(--u)); color: var(--c-text); background: #ffffff; border: calc(1 * var(--u)) solid var(--c-input-b); }

/* ---------- Animation (CSS only, 8.5s loop) ----------
   0.2s  stats, table header and viewer rows fade up one by one
   0.8s  chat card rises in, caret blinks
   1.3s  question types into the chat box (fast), line by line
   2.6s  sent: chat box border flashes
   2.8s  "Checking past pursuits" dots
   3.9s  answer, bar fills, buttons
   7.6s  card and rows fade out, repeat */
.wlc2 .w-ri, .wlc2 .w-card, .wlc2 .w-line, .wlc2 .w-caret, .wlc2 .w-input, .wlc2 .w-thinking, .wlc2 .w-answer, .wlc2 .w-bar, .wlc2 .w-actions {
  animation-duration: 8.5s; animation-iteration-count: infinite; animation-fill-mode: both; animation-timing-function: cubic-bezier(.22,1,.36,1);
}
.wlc2 .w-ri--1 { animation-name: w-row1; }
.wlc2 .w-ri--2 { animation-name: w-row2; }
.wlc2 .w-ri--3 { animation-name: w-row3; }
.wlc2 .w-ri--4 { animation-name: w-row4; }
.wlc2 .w-card { animation-name: w-card; }
.wlc2 .w-line--1 { animation-name: w-type1; animation-timing-function: steps(53, end); }
.wlc2 .w-line--2 { animation-name: w-type2; animation-timing-function: steps(42, end); }
.wlc2 .w-caret { animation-name: w-caret; animation-timing-function: steps(1, end); }
.wlc2 .w-input { animation-name: w-send; animation-timing-function: ease-in-out; }
.wlc2 .w-thinking { animation-name: w-think; animation-timing-function: linear; }
.wlc2 .w-answer { animation-name: w-answer; }
.wlc2 .w-bar { animation-name: w-won; }
.wlc2 .w-actions { animation-name: w-actions; }
.wlc2 .w-dots i { animation: w-dot 1.1s ease-in-out infinite; }
.wlc2 .w-dots i:nth-child(2) { animation-delay: .15s; }
.wlc2 .w-dots i:nth-child(3) { animation-delay: .3s; }

@keyframes w-row1 { 0%, 2.35% { opacity: 0; transform: translateY(10px); } 9.41%, 91.76% { opacity: 1; transform: none; } 98.82%, 100% { opacity: 0; transform: none; } }
@keyframes w-row2 { 0%, 3.76% { opacity: 0; transform: translateY(10px); } 10.82%, 91.76% { opacity: 1; transform: none; } 98.82%, 100% { opacity: 0; transform: none; } }
@keyframes w-row3 { 0%, 5.18% { opacity: 0; transform: translateY(10px); } 12.24%, 91.76% { opacity: 1; transform: none; } 98.82%, 100% { opacity: 0; transform: none; } }
@keyframes w-row4 { 0%, 6.59% { opacity: 0; transform: translateY(10px); } 13.65%, 91.76% { opacity: 1; transform: none; } 98.82%, 100% { opacity: 0; transform: none; } }
@keyframes w-card { 0%, 9.41% { opacity: 0; transform: translateY(14px); } 16.47%, 89.41% { opacity: 1; transform: none; } 95.29%, 100% { opacity: 0; transform: none; } }
@keyframes w-type1 { 0%, 15.29% { clip-path: inset(0 100% 0 0); } 23.53%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes w-type2 { 0%, 24.12% { clip-path: inset(0 100% 0 0); } 30.00%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes w-caret { 0%, 11.76% { opacity: 0; } 12.71% { opacity: 1; } 13.88% { opacity: 0; } 14.71% { opacity: 1; } 15.29%, 100% { opacity: 0; } }
@keyframes w-send { 0%, 30.59% { border-color: var(--c-input-b); } 32.35% { border-color: var(--c-focus); } 37.65%, 100% { border-color: var(--c-input-b); } }
@keyframes w-think { 0%, 32.35% { opacity: 0; } 33.53%, 44.12% { opacity: 1; } 45.29%, 100% { opacity: 0; } }
@keyframes w-answer { 0%, 45.29% { opacity: 0; transform: translateY(6px); } 51.76%, 100% { opacity: 1; transform: none; } }
@keyframes w-won { 0%, 47.06% { transform: scaleX(0); } 56.47%, 100% { transform: scaleX(1); } }
@keyframes w-actions { 0%, 50.59% { opacity: 0; transform: translateY(4px); } 57.06%, 100% { opacity: 1; transform: none; } }
@keyframes w-dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }

/* Hold everything on the first frame until the graphic is in view */
.wlc2.is-waiting, .wlc2.is-waiting *, .wlc2.is-waiting *::before, .wlc2.is-waiting *::after { animation-play-state: paused !important; }

/* Reduced motion: show the finished frame */
@media (prefers-reduced-motion: reduce) {
  .wlc2 .w-ri, .wlc2 .w-card, .wlc2 .w-line, .wlc2 .w-input, .wlc2 .w-answer, .wlc2 .w-bar, .wlc2 .w-actions, .wlc2 .w-dots i { animation: none; }
  .wlc2 .w-thinking, .wlc2 .w-caret { animation: none; display: none; }
}

/* =========================================================
   Create Assignment graphic (QPilot) — light — child theme CSS
   Pairs with assignment-light.html (HTML module).
   - Pure CSS animation (no JavaScript), loops every 11s.
   - Fills its column at 4:3 (620x465 in the media column) and
     scales everything inside proportionally.
   ========================================================= */

.wca3 {
  --c-blue: #347dd5; --c-blue-fade: #d6e7f7; --c-form-b: #3f90e5; --c-text: #14284a; --c-muted: #9192aa; --c-logo-t: #7f8292;
  --c-field-b: #d6d6d9; --c-pill: #ebf5ff; --c-card-b: #dfeef9; --c-caret: #14284a;
  container-type: inline-size; position: relative; display: block; width: 100%; max-width: 100%; aspect-ratio: 4 / 3; overflow: hidden;
  margin: 0; padding: 0; background: transparent; font-family: 'Poppins', system-ui, sans-serif; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-align: left;
}
.wca3 *, .wca3 *::before, .wca3 *::after { box-sizing: border-box; --u: calc(100cqw / 800); }
/* No section background: the graphic sits on whatever the page/column is. */
.wca3 .a-stage { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: translate(calc(15 * var(--u)), calc(21.6 * var(--u))) scale(.964); transform-origin: 0 0; color: var(--c-text); font-size: calc(16 * var(--u)); line-height: 1; letter-spacing: normal; text-transform: none; }
.wca3 img { display: block; max-width: none; margin: 0; padding: 0; }
.wca3 svg { display: block; flex-shrink: 0; }
.wca3 .a-abs { position: absolute; display: flex; align-items: center; white-space: nowrap; }

/* Header */
/* Form card: white panel, no border. Drawn with ::before so site editors
   that strip empty divs can't remove it. */
.wca3 .a-stage::before { content: ""; position: absolute; left: calc(85.9 * var(--u)); top: calc(-15.4 * var(--u)); width: calc(626.9 * var(--u)); height: calc(396 * var(--u)); background: #ffffff !important; border: 0; border-radius: calc(6 * var(--u)); }
.wca3 .a-spark { position: absolute; left: calc(118.6 * var(--u)); top: calc(22 * var(--u)); width: calc(33 * var(--u)); height: calc(33 * var(--u)); }
.wca3 .a-title { left: calc(167.5 * var(--u)); top: calc(25.3 * var(--u)); height: calc(30 * var(--u)); font-size: calc(23.4 * var(--u)); font-weight: 600; letter-spacing: -0.005em; }
.wca3 .a-logo { left: calc(552.5 * var(--u)); top: calc(24.5 * var(--u)); height: calc(25 * var(--u)); gap: calc(8 * var(--u)); font-size: calc(17.4 * var(--u)); color: var(--c-logo-t); }
.wca3 .a-logo svg { width: calc(25 * var(--u)); height: calc(25 * var(--u)); }

/* Form */
.wca3 .a-label { left: calc(117 * var(--u)); height: calc(16 * var(--u)); font-size: calc(12 * var(--u)); color: var(--c-muted); }
.wca3 .a-label--1 { top: calc(85.2 * var(--u)); }
.wca3 .a-label--2 { top: calc(172.4 * var(--u)); }
.wca3 .a-label--3 { top: calc(276.2 * var(--u)); }
.wca3 .a-field { position: absolute; left: calc(113.2 * var(--u)); width: calc(566 * var(--u)); border: calc(1 * var(--u)) solid var(--c-field-b); border-radius: calc(3.5 * var(--u)); background: #ffffff; padding-left: calc(19.3 * var(--u)); font-size: calc(14.9 * var(--u)); color: var(--c-text); }
.wca3 .a-field--1 { top: calc(107.7 * var(--u)); height: calc(41.7 * var(--u)); display: flex; align-items: center; }
.wca3 .a-field--2 { top: calc(194.9 * var(--u)); height: calc(66.3 * var(--u)); padding-top: calc(9 * var(--u)); }
.wca3 .a-line { display: block; width: max-content; white-space: nowrap; line-height: calc(22.5 * var(--u)); }
.wca3 .a-caret { position: absolute; left: calc(19.3 * var(--u)); top: calc(11.5 * var(--u)); width: calc(1.5 * var(--u)); height: calc(18 * var(--u)); background: var(--c-caret); }
.wca3 .a-pill { position: absolute; left: calc(116.4 * var(--u)); top: calc(304 * var(--u)); height: calc(38.5 * var(--u)); width: calc(159.4 * var(--u)); justify-content: flex-start; border-radius: 999px; background: var(--c-pill); color: var(--c-blue); font-size: calc(14.6 * var(--u)); display: flex; align-items: center; padding-left: calc(15.5 * var(--u)); gap: calc(13 * var(--u)); white-space: nowrap; }
.wca3 .a-pill svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }

/* Connector lines (plain HTML boxes, no SVG, so site editors can't break them) */
.wca3 .a-ln { position: absolute; border: 0 solid var(--c-blue); --lw: max(1.5px, calc(2 * var(--u))); }
.wca3 .a-trunk { left: calc(400.8 * var(--u)); top: calc(380.5 * var(--u)); width: 0; height: calc(42.5 * var(--u)); border-left-width: var(--lw); transform-origin: 50% 0; }
.wca3 .a-jl { left: calc(393.8 * var(--u)); top: calc(421.5 * var(--u)); width: calc(8.6 * var(--u)); height: calc(7.5 * var(--u)); border-right-width: var(--lw); border-bottom-width: var(--lw); border-bottom-right-radius: calc(7 * var(--u)); }
.wca3 .a-jr { left: calc(400.8 * var(--u)); top: calc(421.5 * var(--u)); width: calc(8.6 * var(--u)); height: calc(7.5 * var(--u)); border-left-width: var(--lw); border-bottom-width: var(--lw); border-bottom-left-radius: calc(7 * var(--u)); }
.wca3 .a-bl { left: calc(163.8 * var(--u)); top: calc(427.4 * var(--u)); width: calc(230.6 * var(--u)); height: calc(12 * var(--u)); border-top-width: var(--lw); border-left-width: var(--lw); border-top-left-radius: calc(10.5 * var(--u)); }
.wca3 .a-br { left: calc(408.8 * var(--u)); top: calc(427.4 * var(--u)); width: calc(227.6 * var(--u)); height: calc(12 * var(--u)); border-top-width: var(--lw); border-right-width: var(--lw); border-top-right-radius: calc(10.5 * var(--u)); }
.wca3 .a-v { position: absolute; width: var(--lw); --lw: max(1.5px, calc(2 * var(--u))); background: linear-gradient(to bottom, var(--c-blue), var(--c-blue-fade)); transform-origin: 50% 0; }
.wca3 .a-vl { left: calc(163.8 * var(--u)); top: calc(439 * var(--u)); height: calc(42 * var(--u)); }
.wca3 .a-vr { left: calc(636.4 * var(--u) - var(--lw)); top: calc(439 * var(--u)); height: calc(42 * var(--u)); }
.wca3 .a-vc { left: calc(400.8 * var(--u)); top: calc(428.5 * var(--u)); height: calc(52.5 * var(--u)); }
/* travelling light */
.wca3 .a-glow { position: absolute; inset: 0; pointer-events: none; }
.wca3 .a-gl { position: absolute; border-radius: 99px; background: #9cc8ff; box-shadow: 0 0 calc(6 * var(--u)) calc(1 * var(--u)) rgba(110,170,255,.85); }
.wca3 .a-gl--t { left: calc(400 * var(--u)); top: calc(381 * var(--u)); width: calc(3.2 * var(--u)); height: calc(12 * var(--u)); }
.wca3 .a-gl--l { left: calc(375 * var(--u)); top: calc(427 * var(--u)); width: calc(16 * var(--u)); height: calc(3.2 * var(--u)); }
.wca3 .a-gl--r { left: calc(411 * var(--u)); top: calc(427 * var(--u)); width: calc(16 * var(--u)); height: calc(3.2 * var(--u)); }
.wca3 .a-gl--c { left: calc(400 * var(--u)); top: calc(432 * var(--u)); width: calc(3.2 * var(--u)); height: calc(12 * var(--u)); }

/* Users */
.wca3 .a-user { position: absolute; top: calc(480.6 * var(--u)); width: calc(154.6 * var(--u)); height: calc(112.4 * var(--u)); background: #ffffff; border-radius: calc(3.3 * var(--u)) calc(3.3 * var(--u)) calc(2.5 * var(--u)) calc(2.5 * var(--u)); overflow: hidden; display: flex; flex-direction: column; align-items: center; padding-top: calc(12.8 * var(--u)); }
.wca3 .a-user::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(3.3 * var(--u)); background: var(--c-blue); }
.wca3 .a-user--1 { left: calc(87 * var(--u)); }
.wca3 .a-user--2 { left: calc(324.5 * var(--u)); }
.wca3 .a-user--3 { left: calc(558.3 * var(--u)); }
.wca3 .a-photo { width: calc(46 * var(--u)); height: calc(46 * var(--u)); border-radius: 50%; object-fit: cover; border: calc(1.1 * var(--u)) solid rgba(0,0,0,.06); }
.wca3 .a-ulabel { margin-top: calc(10 * var(--u)); height: calc(14 * var(--u)); display: flex; align-items: center; font-size: calc(10.2 * var(--u)); color: var(--c-muted); }
.wca3 .a-email { margin-top: calc(3 * var(--u)); height: calc(16 * var(--u)); display: flex; align-items: center; font-size: calc(11.7 * var(--u)); font-weight: 600; white-space: nowrap; }

/* ---------- Animation (CSS only, 11s loop) ----------
   The form stays put the whole time.
   0.7s  "RFP Summary" types (fast)
   1.4s  instructions type, line by line (fast)
   3.1s  line flows down from the form and branches out (about 1s);
         each user card pops up as its line reaches it
   4.9s  a soft light travels the lines while the scene holds
  10.2s  lines and users fade out together, typed text clears, repeat */
.wca3 .a-line, .wca3 .a-caret, .wca3 .a-ln, .wca3 .a-v, .wca3 .a-glow, .wca3 .a-user {
  animation-duration: 11s; animation-iteration-count: infinite; animation-fill-mode: both; animation-timing-function: cubic-bezier(.22,1,.36,1);
}
.wca3 .a-line--n { animation-name: a3-type-n; animation-timing-function: steps(11, end); }
.wca3 .a-line--i1 { animation-name: a3-type-i1; animation-timing-function: steps(52, end); }
.wca3 .a-line--i2 { animation-name: a3-type-i2; animation-timing-function: steps(22, end); }
.wca3 .a-caret { animation-name: a3-caret; animation-timing-function: steps(1, end); }
.wca3 .a-trunk { animation-name: a3-trunk; animation-timing-function: cubic-bezier(.45,0,.55,1); }
.wca3 .a-jl, .wca3 .a-jr { animation-name: a3-junction; animation-timing-function: linear; }
.wca3 .a-bl { animation-name: a3-left; animation-timing-function: linear; }
.wca3 .a-br { animation-name: a3-right; animation-timing-function: linear; }
.wca3 .a-vl, .wca3 .a-vr { animation-name: a3-down; animation-timing-function: cubic-bezier(.3,0,.5,1); }
.wca3 .a-vc { animation-name: a3-center; animation-timing-function: cubic-bezier(.45,0,.55,1); }
.wca3 .a-glow { animation-name: a3-glow-vis; animation-timing-function: ease; }
.wca3 .a-gl--t { animation: a3-gl-t 1.6s cubic-bezier(.45,0,.55,1) infinite; }
.wca3 .a-gl--l { animation: a3-gl-l 1.6s cubic-bezier(.45,0,.55,1) infinite; }
.wca3 .a-gl--r { animation: a3-gl-r 1.6s cubic-bezier(.45,0,.55,1) infinite; }
.wca3 .a-gl--c { animation: a3-gl-c 1.6s cubic-bezier(.45,0,.55,1) infinite; }
.wca3 .a-user--1 { animation-name: a3-user-side; }
.wca3 .a-user--2 { animation-name: a3-user-mid; }
.wca3 .a-user--3 { animation-name: a3-user-side; }

@keyframes a3-type-n { 0%, 6.36% { clip-path: inset(0 100% 0 0); } 11.36%, 93.64% { clip-path: inset(0 0 0 0); } 96.36%, 100% { clip-path: inset(0 100% 0 0); } }
@keyframes a3-type-i1 { 0%, 12.73% { clip-path: inset(0 100% 0 0); } 20.91%, 93.64% { clip-path: inset(0 0 0 0); } 96.36%, 100% { clip-path: inset(0 100% 0 0); } }
@keyframes a3-type-i2 { 0%, 21.36% { clip-path: inset(0 100% 0 0); } 25.00%, 93.64% { clip-path: inset(0 0 0 0); } 96.36%, 100% { clip-path: inset(0 100% 0 0); } }
@keyframes a3-caret { 0%, 1.36% { opacity: 0; } 2.73% { opacity: 1; } 4.09% { opacity: 0; } 5.27% { opacity: 1; } 6.36%, 100% { opacity: 0; } }
/* lines: trunk 3.0-3.3s, junction 3.28-3.4s, branches out 3.4-3.75s then down 3.75-4.05s, centre down 3.35-3.75s; all fade together 10.2-10.7s */
@keyframes a3-trunk { 0%, 27.27% { transform: scaleY(0); opacity: 1; } 30.00%, 92.73% { transform: scaleY(1); opacity: 1; } 97.27%, 100% { transform: scaleY(1); opacity: 0; } }
@keyframes a3-junction { 0%, 29.82% { opacity: 0; } 30.91%, 92.73% { opacity: 1; } 97.27%, 100% { opacity: 0; } }
@keyframes a3-left { 0%, 30.91% { clip-path: inset(0 0 0 100%); opacity: 1; } 34.09%, 92.73% { clip-path: inset(0 0 0 0); opacity: 1; } 97.27%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
@keyframes a3-right { 0%, 30.91% { clip-path: inset(0 100% 0 0); opacity: 1; } 34.09%, 92.73% { clip-path: inset(0 0 0 0); opacity: 1; } 97.27%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
@keyframes a3-down { 0%, 34.00% { transform: scaleY(0); opacity: 1; } 36.82%, 92.73% { transform: scaleY(1); opacity: 1; } 97.27%, 100% { transform: scaleY(1); opacity: 0; } }
@keyframes a3-center { 0%, 30.45% { transform: scaleY(0); opacity: 1; } 34.09%, 92.73% { transform: scaleY(1); opacity: 1; } 97.27%, 100% { transform: scaleY(1); opacity: 0; } }
/* cards pop as their line arrives */
@keyframes a3-user-mid { 0%, 33.64% { opacity: 0; transform: translateY(8px) scale(.97); } 37.73%, 92.73% { opacity: 1; transform: none; } 97.27%, 100% { opacity: 0; transform: none; } }
@keyframes a3-user-side { 0%, 36.36% { opacity: 0; transform: translateY(8px) scale(.97); } 40.45%, 92.73% { opacity: 1; transform: none; } 97.27%, 100% { opacity: 0; transform: none; } }
/* travelling light while the scene holds */
@keyframes a3-glow-vis { 0%, 40.00% { opacity: 0; } 44.55%, 90.00% { opacity: 1; } 93.64%, 100% { opacity: 0; } }
@keyframes a3-gl-t { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } 45% { transform: translateY(calc(32 * var(--u))); opacity: 1; } 50%, 100% { transform: translateY(calc(32 * var(--u))); opacity: 0; } }
@keyframes a3-gl-l { 0%, 45% { transform: translateX(0); opacity: 0; } 52% { opacity: 1; } 92% { transform: translateX(calc(-196 * var(--u))); opacity: 1; } 100% { transform: translateX(calc(-206 * var(--u))); opacity: 0; } }
@keyframes a3-gl-r { 0%, 45% { transform: translateX(0); opacity: 0; } 52% { opacity: 1; } 92% { transform: translateX(calc(196 * var(--u))); opacity: 1; } 100% { transform: translateX(calc(206 * var(--u))); opacity: 0; } }
@keyframes a3-gl-c { 0%, 45% { transform: translateY(0); opacity: 0; } 52% { opacity: 1; } 92% { transform: translateY(calc(30 * var(--u))); opacity: 1; } 100% { transform: translateY(calc(34 * var(--u))); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .wca3 .a-line, .wca3 .a-ln, .wca3 .a-v, .wca3 .a-user { animation: none; }
  .wca3 .a-caret, .wca3 .a-glow { animation: none; display: none; }
}

/* =========================================================
   Smart Search graphic (QPilot) — child theme CSS
   Pairs with smart-search-dark.html / smart-search-light.html
   - Pure CSS animation (no JavaScript), loops every 10s.
   - Fills its column at 4:3 (620x465 in the media column) and
     scales everything inside proportionally.
   ========================================================= */

.wss.wss--dark {
  --wss-win: #10101f; --wss-text: #f4f3fa; --wss-body: rgba(255,255,255,.78); --wss-muted: rgba(255,255,255,.6);
  --wss-frame: rgba(255,255,255,.10); --wss-line: rgba(255,255,255,.08); --wss-field: rgba(255,255,255,.04);
  --wss-chip-b: rgba(255,255,255,.10); --wss-btn: #ffffff; --wss-btn-t: #0a0a1c; --wss-halo: rgba(255,255,255,.05);
  --wss-ring: rgba(255,255,255,.55); --wss-track: rgba(255,255,255,.85); --wss-glow: rgba(94,106,210,.30);
}
.wss.wss--light {
  --wss-win: #ffffff; --wss-text: #050324; --wss-body: #3b3a55; --wss-muted: #5d6172;
  --wss-frame: rgba(5,3,36,.10); --wss-line: rgba(5,3,36,.08); --wss-field: #f7f7fa;
  --wss-chip-b: rgba(5,3,36,.10); --wss-btn: #050324; --wss-btn-t: #ffffff; --wss-halo: rgba(5,3,36,.04);
  --wss-ring: rgba(5,3,36,.35); --wss-track: rgba(5,3,36,.12); --wss-glow: rgba(94,106,210,.14);
}
.wss { container-type: inline-size; position: relative; display: block; width: 100%; max-width: 100%; aspect-ratio: 4 / 3; overflow: hidden; margin: 0; padding: 0; font-family: 'Poppins', system-ui, sans-serif; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-align: left; }
.wss *, .wss *::before, .wss *::after { box-sizing: border-box; --u: calc(100cqw / 800); }
.wss .wss-stage { position: absolute; inset: 0; color: var(--wss-text); font-size: calc(16 * var(--u)); line-height: 1.5; letter-spacing: normal; text-transform: none; }
.wss svg { display: block; flex-shrink: 0; }

.wss .wss-glow { position: absolute; left: calc(220 * var(--u)); top: calc(160 * var(--u)); width: calc(360 * var(--u)); height: calc(260 * var(--u)); background: radial-gradient(ellipse at center, var(--wss-glow), transparent 60%); filter: blur(calc(30 * var(--u))); pointer-events: none; }
.wss .wss-window { position: absolute; left: calc(160 * var(--u)); top: calc(26 * var(--u)); width: calc(480 * var(--u)); border-radius: calc(12 * var(--u)); background: var(--wss-win); border: calc(1 * var(--u)) solid var(--wss-frame); padding: calc(22 * var(--u)) calc(20 * var(--u)) calc(8 * var(--u)); display: flex; flex-direction: column; }
.wss .wss-head { display: flex; align-items: center; gap: calc(12 * var(--u)); font-size: calc(19 * var(--u)); font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.wss .wss-head svg { width: calc(26 * var(--u)); height: calc(26 * var(--u)); }
.wss .wss-search { display: flex; gap: calc(8 * var(--u)); margin-top: calc(18 * var(--u)); }
.wss .wss-input { flex: 1; height: calc(40 * var(--u)); display: flex; align-items: center; padding: 0 calc(14 * var(--u)); border-radius: calc(6 * var(--u)); border: calc(1 * var(--u)) solid var(--wss-chip-b); background: var(--wss-field); font-size: calc(11.5 * var(--u)); color: var(--wss-body); white-space: nowrap; overflow: hidden; }
.wss .wss-btn { width: calc(94 * var(--u)); height: calc(40 * var(--u)); display: flex; align-items: center; justify-content: center; border-radius: calc(6 * var(--u)); background: var(--wss-btn); color: var(--wss-btn-t); font-size: calc(14 * var(--u)); font-weight: 600; }
.wss .wss-gen { display: flex; align-items: center; gap: calc(14 * var(--u)); margin-top: calc(16 * var(--u)); }
.wss .wss-halo { width: calc(54 * var(--u)); height: calc(54 * var(--u)); border-radius: 50%; background: var(--wss-halo); display: flex; align-items: center; justify-content: center; }
.wss .wss-ring { width: calc(34 * var(--u)); height: calc(34 * var(--u)); border-radius: 50%; border: calc(1 * var(--u)) solid var(--wss-ring); display: flex; align-items: center; justify-content: center; }
.wss .wss-ring svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.wss .wss-gen-text { font-size: calc(12.5 * var(--u)); color: var(--wss-body); }
.wss .wss-result { display: flex; gap: calc(14 * var(--u)); padding: calc(14 * var(--u)) calc(8 * var(--u)) calc(18 * var(--u)) calc(18 * var(--u)); border-bottom: calc(1 * var(--u)) solid var(--wss-line); }
.wss .wss-file { width: calc(28 * var(--u)); height: calc(28 * var(--u)); border-radius: calc(7 * var(--u)); flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: calc(12 * var(--u)); font-weight: 600; margin-top: calc(2 * var(--u)); }
.wss .wss-file--ppt { background: linear-gradient(135deg, #ff8f4a, #d9314b); }
.wss .wss-file--doc { background: linear-gradient(135deg, #4fb4ff, #1f5fd6); }
.wss .wss-r-body { display: flex; flex-direction: column; gap: calc(4 * var(--u)); min-width: 0; }
.wss .wss-r-title { font-size: calc(15.5 * var(--u)); font-weight: 600; line-height: 1.35; }
.wss .wss-r-meta { font-size: calc(12 * var(--u)); color: var(--wss-muted); }
.wss .wss-r-meta b { color: var(--wss-text); font-weight: 600; }
.wss .wss-r-desc { font-size: calc(12 * var(--u)); line-height: 1.5; color: var(--wss-body); }

.wss .wss-ai { position: absolute; left: calc(289 * var(--u)); top: calc(522 * var(--u)); display: flex; align-items: center; gap: calc(12 * var(--u)); }
.wss .wss-ai svg { width: calc(40 * var(--u)); height: calc(40 * var(--u)); }
.wss .wss-ai-text { display: flex; flex-direction: column; gap: calc(8 * var(--u)); font-size: calc(13 * var(--u)); font-weight: 600; }
.wss .wss-bar { width: calc(170 * var(--u)); height: calc(3 * var(--u)); border-radius: calc(2 * var(--u)); background: var(--wss-track); overflow: hidden; }
.wss .wss-bar i { display: block; height: 100%; background: #1f6fd6; transform-origin: 0 50%; }

/* ---------- Animation (10s loop, CSS only) ----------
   0.0s window fades up · 0.6s question types in · 2.0s Search pressed
   2.2s "Generating Response…" · 3.4s / 4.0s results fade up in turn
   bottom progress bar fills 2.2s → 8.0s · 9.2s results fade, repeat */
.wss .wss-window, .wss .wss-glow, .wss .wss-q, .wss .wss-btn, .wss .wss-gen, .wss .wss-result, .wss .wss-bar i, .wss .wss-ai {
  animation-duration: 10s; animation-iteration-count: infinite; animation-fill-mode: both; animation-timing-function: cubic-bezier(.22,1,.36,1);
}
.wss .wss-window { animation-name: wss-window; }
.wss .wss-glow { animation-name: wss-glow; }
.wss .wss-q { display: inline-block; animation-name: wss-type; animation-timing-function: steps(28, end); }
.wss .wss-btn { animation-name: wss-press; animation-timing-function: ease-in-out; }
.wss .wss-gen { animation-name: wss-gen; }
.wss .wss-result--1 { animation-name: wss-r1; }
.wss .wss-result--2 { animation-name: wss-r2; }
.wss .wss-ai { animation-name: wss-ai; }
.wss .wss-bar i { animation-name: wss-bar; animation-timing-function: cubic-bezier(.45,.05,.35,1); }
.wss .wss-ring { animation: wss-pulse 2.4s ease-in-out infinite; }
.wss .wss-ai svg { animation: wss-twinkle 3s ease-in-out infinite; }

@keyframes wss-window { 0% { opacity: 0; transform: translateY(12px); } 6%, 100% { opacity: 1; transform: none; } }
@keyframes wss-glow { 0% { opacity: 0; } 10%, 100% { opacity: 1; } }
@keyframes wss-type { 0%, 6% { clip-path: inset(0 100% 0 0); } 18%, 94% { clip-path: inset(0 0 0 0); } 98%, 100% { clip-path: inset(0 100% 0 0); } }
@keyframes wss-press { 0%, 19% { transform: none; } 20.5% { transform: scale(.94); } 22%, 100% { transform: none; } }
@keyframes wss-gen { 0%, 22% { opacity: 0; transform: translateY(6px); } 28%, 90% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: none; } }
@keyframes wss-r1 { 0%, 34% { opacity: 0; transform: translateY(10px); } 42%, 90% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: none; } }
@keyframes wss-r2 { 0%, 40% { opacity: 0; transform: translateY(10px); } 48%, 90% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: none; } }
@keyframes wss-ai { 0%, 20% { opacity: 0; transform: translateY(6px); } 26%, 90% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: none; } }
@keyframes wss-bar { 0%, 22% { transform: scaleX(0); } 80%, 100% { transform: scaleX(1); } }
@keyframes wss-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.08); opacity: .75; } }
@keyframes wss-twinkle { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.06) rotate(6deg); } }

@media (prefers-reduced-motion: reduce) {
  .wss .wss-window, .wss .wss-glow, .wss .wss-q, .wss .wss-btn, .wss .wss-gen, .wss .wss-result, .wss .wss-bar i, .wss .wss-ai, .wss .wss-ring, .wss .wss-ai svg { animation: none; }
}

/* =========================================================
   Sector comparison chat graphic (QPilot) — light — child theme CSS
   Pairs with sector-comparison-light.html (HTML module).
   - Pure CSS animation, loops every 10.5s.
   - Waits until the graphic scrolls into view (a tiny script in the
     HTML adds/removes .is-waiting). Without the script it just plays.
   - Fills its column at 4:3 (620x465 in the media column) and
     scales everything inside proportionally.
   ========================================================= */

.wsc {
  --c-text: #050324; --c-body: #2b2a45; --c-muted: #55536e; --c-ph: #9a9aa8; --c-line: #e6e7ee;
  --c-green: #4cb782; --c-green-t: #23955a; --c-grey: #d4d4d6; --c-grey-t: #c9c9cf; --c-bubble: #050324;
  container-type: inline-size; position: relative; display: block; width: 100%; max-width: 100%; aspect-ratio: 4 / 3; overflow: hidden;
  margin: 0; padding: 0; font-family: 'Poppins', system-ui, sans-serif; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-align: left;
}
.wsc *, .wsc *::before, .wsc *::after { box-sizing: border-box; --u: calc(100cqw / 800); }
/* The panel background is drawn with ::before so editors can't strip it */
.wsc .s-stage { position: absolute; inset: 0; color: var(--c-text); font-size: calc(12.6 * var(--u)); line-height: 1; letter-spacing: normal; text-transform: none; }
.wsc .s-stage::before { content: ""; position: absolute; inset: 0; border-radius: calc(10 * var(--u)); background: linear-gradient(160deg, #ffffff 0%, #f6f7fb 40%, #e9ebf6 100%); }
.wsc .s-abs { position: absolute; display: flex; align-items: center; white-space: nowrap; }
.wsc svg { display: block; flex-shrink: 0; }

/* User message + thinking */
.wsc .s-bubble { position: absolute; right: calc(34 * var(--u)); top: calc(6 * var(--u)); height: calc(26 * var(--u)); padding: 0 calc(13 * var(--u)); border-radius: calc(9 * var(--u)) calc(9 * var(--u)) calc(2 * var(--u)) calc(9 * var(--u)); background: var(--c-bubble); color: #ffffff; font-size: calc(11.4 * var(--u)); display: flex; align-items: center; white-space: nowrap; }
.wsc .s-think { left: calc(51 * var(--u)); top: calc(66 * var(--u)); height: calc(16 * var(--u)); gap: calc(9 * var(--u)); font-size: calc(12 * var(--u)); color: var(--c-muted); }
.wsc .s-dots { display: flex; gap: calc(4 * var(--u)); }
.wsc .s-dots i { display: block; width: calc(5 * var(--u)); height: calc(5 * var(--u)); border-radius: 50%; background: #5e6ad2; animation: s-dot 1s ease-in-out infinite; }
.wsc .s-dots i:nth-child(2) { animation-delay: .15s; }
.wsc .s-dots i:nth-child(3) { animation-delay: .3s; }
.wsc .s-shim { background: linear-gradient(90deg, var(--c-muted) 0%, var(--c-muted) 35%, #c4c6d4 50%, var(--c-muted) 65%, var(--c-muted) 100%); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: s-shim 1.4s linear infinite; }

/* Answer wrapper: revealed with a soft wipe, top to bottom */
.wsc .s-answer { position: absolute; inset: 0; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 40%, transparent 60%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 40%, transparent 60%, transparent 100%); -webkit-mask-size: 100% 250%; mask-size: 100% 250%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 0 0; mask-position: 0 0; }
/* decorative boxes carry a hidden   so site editors don't strip them as empty */
.wsc .s-bar, .wsc .s-card, .wsc .s-caret, .wsc .s-dots i { font-size: 0; line-height: 0; color: transparent; overflow: hidden; }

/* Answer */
.wsc .s-p { left: calc(31.2 * var(--u)); height: calc(20.4 * var(--u)); font-size: calc(12.6 * var(--u)); color: var(--c-text); }

/* Chart card */
.wsc .s-card { position: absolute; left: calc(25.8 * var(--u)); top: calc(37.8 * var(--u)); width: calc(740 * var(--u)); height: calc(502 * var(--u)); border: calc(1 * var(--u)) solid var(--c-line); border-bottom: 0; border-radius: calc(7 * var(--u)) calc(7 * var(--u)) 0 0; background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0)); -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%); }
.wsc .s-h { left: calc(51 * var(--u)); top: calc(59.8 * var(--u)); height: calc(28 * var(--u)); font-size: calc(24.5 * var(--u)); font-weight: 600; letter-spacing: -0.005em; }
.wsc .s-sub { left: calc(51 * var(--u)); top: calc(97.8 * var(--u)); height: calc(18 * var(--u)); font-size: calc(15 * var(--u)); color: var(--c-text); }
.wsc .s-h2 { left: calc(51 * var(--u)); top: calc(157.1 * var(--u)); height: calc(23 * var(--u)); font-size: calc(18 * var(--u)); font-weight: 600; }
.wsc .s-row { position: absolute; left: 0; width: 100%; height: calc(34.8 * var(--u)); }
.wsc .s-row--1 { top: calc(208.2 * var(--u)); }
.wsc .s-row--2 { top: calc(286.8 * var(--u)); }
.wsc .s-row--3 { top: calc(364.8 * var(--u)); }
.wsc .s-lab { position: absolute; right: calc(100% - 132.6 * var(--u)); top: 0; height: 100%; display: flex; align-items: center; font-size: calc(13.7 * var(--u)); color: var(--c-muted); white-space: nowrap; }
.wsc .s-bar { position: absolute; left: calc(156.6 * var(--u)); top: 0; height: 100%; border-radius: calc(3.5 * var(--u)); background: var(--c-green); transform-origin: 0 50%; }
.wsc .s-row--3 .s-bar { background: var(--c-grey); }
.wsc .s-row--1 .s-bar { width: calc(466.2 * var(--u)); }
.wsc .s-row--2 .s-bar { width: calc(224.4 * var(--u)); }
.wsc .s-row--3 .s-bar { width: calc(99 * var(--u)); }
.wsc .s-val { position: absolute; top: 0; height: 100%; display: flex; align-items: center; font-size: calc(19 * var(--u)); color: var(--c-green-t); white-space: nowrap; }
.wsc .s-row--3 .s-val { color: var(--c-grey-t); }
.wsc .s-row--1 .s-val { left: calc(632.4 * var(--u)); }
.wsc .s-row--2 .s-val { left: calc(390.6 * var(--u)); }
.wsc .s-row--3 .s-val { left: calc(265.8 * var(--u)); }

/* Composer */
.wsc .s-input { position: absolute; left: calc(45.8 * var(--u)); top: calc(514.2 * var(--u)); width: calc(700 * var(--u)); height: calc(46.8 * var(--u)); border-radius: calc(6 * var(--u)); background: #ffffff; border: calc(1 * var(--u)) solid #ececec; box-shadow: 0 calc(4 * var(--u)) calc(14 * var(--u)) rgba(5,3,36,.04); }
.wsc .s-plus { position: absolute; left: calc(11 * var(--u)); top: calc(15.4 * var(--u)); width: calc(16 * var(--u)); height: calc(16 * var(--u)); color: #8a8a96; }
.wsc .s-ph, .wsc .s-type { position: absolute; left: calc(37.2 * var(--u)); top: 0; height: 100%; display: flex; align-items: center; font-size: calc(12.6 * var(--u)); white-space: nowrap; }
.wsc .s-ph { color: var(--c-ph); }
.wsc .s-type { color: var(--c-text); width: max-content; }
.wsc .s-caret { position: absolute; left: calc(37.2 * var(--u)); top: calc(15 * var(--u)); width: calc(1.4 * var(--u)); height: calc(17 * var(--u)); background: var(--c-text); }
.wsc .s-tools { position: absolute; right: calc(14 * var(--u)); top: 0; height: 100%; display: flex; align-items: center; gap: calc(14 * var(--u)); color: #8a8a96; }
.wsc .s-tools svg { width: calc(17 * var(--u)); height: calc(17 * var(--u)); }
.wsc .s-tools svg.s-chev { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }

/* ---------- Animation (CSS only, 10.5s loop) ----------
   0.6s  question types into the message box
   2.0s  message is sent: it appears as a bubble, box clears
   2.2s  QPilot shows a short "checking" state
   3.3s  the answer reveals strictly top to bottom: text, then the
         chart card, title, subtitle, "Value won" and row labels
         (a soft wipe on the whole answer guarantees the order)
   4.65s bars grow one after another (each finishes before the next),
         each value fades in as its bar lands
   9.6s  everything fades out together, repeat */
.wsc .s-answer, .wsc .s-bubble, .wsc .s-think, .wsc .s-p, .wsc .s-card, .wsc .s-h, .wsc .s-sub, .wsc .s-h2, .wsc .s-lab, .wsc .s-bar, .wsc .s-val, .wsc .s-ph, .wsc .s-type, .wsc .s-caret {
  animation-duration: 10.5s; animation-iteration-count: infinite; animation-fill-mode: both; animation-timing-function: cubic-bezier(.22,1,.36,1);
}
.wsc .s-ph { animation-name: s-ph; animation-timing-function: linear; }
.wsc .s-caret { animation-name: s-caret; animation-timing-function: steps(1, end); }
.wsc .s-type { animation-name: s-type; animation-timing-function: steps(44, end); }
.wsc .s-bubble { animation-name: s-bubble; }
.wsc .s-think { animation-name: s-think; animation-timing-function: ease; }
.wsc .s-answer { animation-name: s-wipe; animation-timing-function: cubic-bezier(.25,.6,.3,1); }
.wsc .s-card { animation-name: s-in-card; }
.wsc .s-h { animation-name: s-in-h; }
.wsc .s-sub { animation-name: s-in-sub; }
.wsc .s-h2 { animation-name: s-in-h2; }
.wsc .s-row--1 .s-lab { animation-name: s-in-r1; }
.wsc .s-row--2 .s-lab { animation-name: s-in-r2; }
.wsc .s-row--3 .s-lab { animation-name: s-in-r3; }
.wsc .s-row--1 .s-bar { animation-name: s-bar-1; }
.wsc .s-row--2 .s-bar { animation-name: s-bar-2; }
.wsc .s-row--3 .s-bar { animation-name: s-bar-3; }
.wsc .s-row--1 .s-val { animation-name: s-val-1; }
.wsc .s-row--2 .s-val { animation-name: s-val-2; }
.wsc .s-row--3 .s-val { animation-name: s-val-3; }

@keyframes s-ph { 0%, 5.24% { opacity: 1; } 5.71%, 19.52% { opacity: 0; } 20.48%, 100% { opacity: 1; } }
@keyframes s-caret { 0%, 0.95% { opacity: 0; } 2.38% { opacity: 1; } 3.81% { opacity: 0; } 4.76% { opacity: 1; } 5.71%, 100% { opacity: 0; } }
@keyframes s-type { 0%, 5.71% { clip-path: inset(0 100% 0 0); opacity: 1; } 17.62%, 19.05% { clip-path: inset(0 0 0 0); opacity: 1; } 19.81%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
@keyframes s-bubble { 0%, 19.05% { opacity: 0; transform: translateY(10px); } 22.86%, 91.43% { opacity: 1; transform: none; } 96.19%, 100% { opacity: 0; transform: none; } }
@keyframes s-think { 0%, 21.43% { opacity: 0; } 23.33%, 30.00% { opacity: 1; } 31.43%, 100% { opacity: 0; } }
/* soft top-to-bottom wipe over the whole answer */
@keyframes s-wipe { 0%, 30.00% { -webkit-mask-position: 0 100%; mask-position: 0 100%; } 41.90%, 100% { -webkit-mask-position: 0 0; mask-position: 0 0; } }
@keyframes s-in-card { 0%, 31.43% { opacity: 0; transform: translateY(10px); } 35.71%, 91.43% { opacity: 1; transform: none; } 96.19%, 100% { opacity: 0; transform: none; } }
@keyframes s-in-h { 0%, 32.76% { opacity: 0; transform: translateY(6px); } 37.05%, 91.43% { opacity: 1; transform: none; } 96.19%, 100% { opacity: 0; transform: none; } }
@keyframes s-in-sub { 0%, 33.90% { opacity: 0; transform: translateY(6px); } 38.19%, 91.43% { opacity: 1; transform: none; } 96.19%, 100% { opacity: 0; transform: none; } }
@keyframes s-in-h2 { 0%, 35.24% { opacity: 0; transform: translateY(6px); } 39.52%, 91.43% { opacity: 1; transform: none; } 96.19%, 100% { opacity: 0; transform: none; } }
@keyframes s-in-r1 { 0%, 36.57% { opacity: 0; transform: translateY(6px); } 40.86%, 91.43% { opacity: 1; transform: none; } 96.19%, 100% { opacity: 0; transform: none; } }
@keyframes s-in-r2 { 0%, 37.71% { opacity: 0; transform: translateY(6px); } 42.00%, 91.43% { opacity: 1; transform: none; } 96.19%, 100% { opacity: 0; transform: none; } }
@keyframes s-in-r3 { 0%, 38.86% { opacity: 0; transform: translateY(6px); } 43.14%, 91.43% { opacity: 1; transform: none; } 96.19%, 100% { opacity: 0; transform: none; } }
@keyframes s-bar-1 { 0%, 40.95% { transform: scaleX(0); opacity: 1; } 47.14%, 91.43% { transform: scaleX(1); opacity: 1; } 96.19%, 100% { transform: scaleX(1); opacity: 0; } }
@keyframes s-val-1 { 0%, 45.71% { opacity: 0; transform: translateX(-6px); } 49.52%, 91.43% { opacity: 1; transform: none; } 96.19%, 100% { opacity: 0; transform: none; } }
@keyframes s-bar-2 { 0%, 43.05% { transform: scaleX(0); opacity: 1; } 49.24%, 91.43% { transform: scaleX(1); opacity: 1; } 96.19%, 100% { transform: scaleX(1); opacity: 0; } }
@keyframes s-val-2 { 0%, 47.81% { opacity: 0; transform: translateX(-6px); } 51.62%, 91.43% { opacity: 1; transform: none; } 96.19%, 100% { opacity: 0; transform: none; } }
@keyframes s-bar-3 { 0%, 45.14% { transform: scaleX(0); opacity: 1; } 51.33%, 91.43% { transform: scaleX(1); opacity: 1; } 96.19%, 100% { transform: scaleX(1); opacity: 0; } }
@keyframes s-val-3 { 0%, 49.90% { opacity: 0; transform: translateX(-6px); } 53.71%, 91.43% { opacity: 1; transform: none; } 96.19%, 100% { opacity: 0; transform: none; } }
@keyframes s-dot { 0%, 100% { opacity: .35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }
@keyframes s-shim { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* Hold everything on the first frame until the graphic is in view */
.wsc.is-waiting, .wsc.is-waiting *, .wsc.is-waiting *::before, .wsc.is-waiting *::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .wsc .s-answer, .wsc .s-bubble, .wsc .s-p, .wsc .s-card, .wsc .s-h, .wsc .s-sub, .wsc .s-h2, .wsc .s-lab, .wsc .s-bar, .wsc .s-val, .wsc .s-ph { animation: none; }
  .wsc .s-answer { -webkit-mask-image: none; mask-image: none; }
  .wsc .s-think, .wsc .s-type, .wsc .s-caret { animation: none; display: none; }
}

/* =========================================================
   Create Survey graphic (QPilot) — light — child theme CSS
   Pairs with survey-light.html (HTML module).
   - Pure CSS animation, loops every 11s.
   - Waits until the graphic scrolls into view (a tiny script in the
     HTML adds/removes .is-waiting). Without the script it just plays.
   - Fills its column at 4:3 (620x465 in the media column) and
     scales everything inside proportionally.
   ========================================================= */

.wsv {
  --c-blue: #347dd5; --c-blue-fade: #d6e7f7; --c-form-b: #3f90e5; --c-text: #14284a; --c-muted: #9192aa; --c-logo-t: #7f8292;
  --c-field-b: #d6d6d9; --c-pill: #ebf5ff; --c-card-b: #dfeef9; --c-caret: #14284a;
  container-type: inline-size; position: relative; display: block; width: 100%; max-width: 100%; aspect-ratio: 625.8 / 582.7; overflow: hidden;
  margin: 0; padding: 0; background: transparent; font-family: 'Poppins', system-ui, sans-serif; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-align: left;
}
.wsv *, .wsv *::before, .wsv *::after { box-sizing: border-box; --u: calc(100cqw / 625.8); }
/* No section background: the graphic sits on whatever the page/column is. */
.wsv .sv-stage { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: translate(calc(-87 * var(--u)), calc(-10.3 * var(--u))); transform-origin: 0 0; color: var(--c-text); font-size: calc(16 * var(--u)); line-height: 1; letter-spacing: normal; text-transform: none; }
.wsv img { display: block; max-width: none; margin: 0; padding: 0; }
.wsv svg { display: block; flex-shrink: 0; }
.wsv .sv-abs { position: absolute; display: flex; align-items: center; white-space: nowrap; }

/* Form panel: white, no border. Drawn with ::before so site editors
   that strip empty divs can't remove it. */
.wsv .sv-stage::before { content: ""; position: absolute; left: calc(92 * var(--u)); top: calc(10.3 * var(--u)); width: calc(616 * var(--u)); height: calc(337.7 * var(--u)); background: #ffffff !important; border: 0; border-radius: calc(6 * var(--u)); }
/* decorative boxes carry a hidden   so site editors don't strip them as empty */
.wsv .sv-ln, .wsv .sv-v, .wsv .sv-caret, .wsv .sv-gl { font-size: 0; line-height: 0; color: transparent; overflow: hidden; }
.wsv .sv-spark { position: absolute; left: calc(118.7 * var(--u)); top: calc(30.7 * var(--u)); width: calc(33.2 * var(--u)); height: calc(33.2 * var(--u)); }
.wsv .sv-title { left: calc(166.9 * var(--u)); top: calc(33.5 * var(--u)); height: calc(32 * var(--u)); font-size: calc(23.4 * var(--u)); font-weight: 600; letter-spacing: -0.005em; }

/* Form */
.wsv .sv-label { left: calc(116.6 * var(--u)); height: calc(16 * var(--u)); font-size: calc(12.3 * var(--u)); color: var(--c-muted); }
.wsv .sv-label--1 { top: calc(94.5 * var(--u)); }
.wsv .sv-label--2 { top: calc(181.9 * var(--u)); }
.wsv .sv-field { position: absolute; left: calc(112.8 * var(--u)); width: calc(566.6 * var(--u)); height: calc(41.3 * var(--u)); border: calc(1 * var(--u)) solid var(--c-field-b); border-radius: calc(3.5 * var(--u)); background: #ffffff; padding-left: calc(19.3 * var(--u)); font-size: calc(15.1 * var(--u)); color: var(--c-text); display: flex; align-items: center; }
.wsv .sv-field--1 { top: calc(117.0 * var(--u)); }
.wsv .sv-field--2 { top: calc(204.4 * var(--u)); }
.wsv .sv-line { display: block; width: max-content; white-space: nowrap; }
.wsv .sv-caret { position: absolute; left: calc(19.3 * var(--u)); top: calc(11.5 * var(--u)); width: calc(1.5 * var(--u)); height: calc(18 * var(--u)); background: var(--c-caret); }
.wsv .sv-btn { position: absolute; top: calc(260.6 * var(--u)); height: calc(38.1 * var(--u)); border-radius: calc(3.5 * var(--u)); display: flex; align-items: center; justify-content: center; font-size: calc(11.8 * var(--u)); white-space: nowrap; }
.wsv .sv-btn--ghost { left: calc(113.3 * var(--u)); width: calc(107.2 * var(--u)); background: #ffffff; border: calc(1 * var(--u)) solid #e6e6ea; color: var(--c-text); }
.wsv .sv-btn--primary { left: calc(226.4 * var(--u)); width: calc(151.7 * var(--u)); background: #050324; color: #ffffff; }

/* Layer that holds the lines, light and users */
.wsv .sv-flow { position: absolute; inset: 0; }
/* Connector lines (plain HTML boxes, no SVG, so site editors can't break them) */
.wsv .sv-ln { position: absolute; border: 0 solid var(--c-blue); --lw: max(1.5px, calc(2 * var(--u))); }
.wsv .sv-trunk { left: calc(400.8 * var(--u)); top: calc(348 * var(--u)); width: 0; height: calc(75 * var(--u)); border-left-width: var(--lw); transform-origin: 50% 0; }
.wsv .sv-jl { left: calc(393.8 * var(--u)); top: calc(421.5 * var(--u)); width: calc(8.6 * var(--u)); height: calc(7.5 * var(--u)); border-right-width: var(--lw); border-bottom-width: var(--lw); border-bottom-right-radius: calc(7 * var(--u)); }
.wsv .sv-jr { left: calc(400.8 * var(--u)); top: calc(421.5 * var(--u)); width: calc(8.6 * var(--u)); height: calc(7.5 * var(--u)); border-left-width: var(--lw); border-bottom-width: var(--lw); border-bottom-left-radius: calc(7 * var(--u)); }
.wsv .sv-bl { left: calc(163.8 * var(--u)); top: calc(427.4 * var(--u)); width: calc(230.6 * var(--u)); height: calc(12 * var(--u)); border-top-width: var(--lw); border-left-width: var(--lw); border-top-left-radius: calc(10.5 * var(--u)); }
.wsv .sv-br { left: calc(408.8 * var(--u)); top: calc(427.4 * var(--u)); width: calc(227.6 * var(--u)); height: calc(12 * var(--u)); border-top-width: var(--lw); border-right-width: var(--lw); border-top-right-radius: calc(10.5 * var(--u)); }
.wsv .sv-v { position: absolute; width: var(--lw); --lw: max(1.5px, calc(2 * var(--u))); background: linear-gradient(to bottom, var(--c-blue), var(--c-blue-fade)); transform-origin: 50% 0; }
.wsv .sv-vl { left: calc(163.8 * var(--u)); top: calc(439 * var(--u)); height: calc(42 * var(--u)); }
.wsv .sv-vr { left: calc(636.4 * var(--u) - var(--lw)); top: calc(439 * var(--u)); height: calc(42 * var(--u)); }
.wsv .sv-vc { left: calc(400.8 * var(--u)); top: calc(428.5 * var(--u)); height: calc(52.5 * var(--u)); }
/* travelling light */
.wsv .sv-glow { position: absolute; inset: 0; pointer-events: none; }
.wsv .sv-gl { position: absolute; border-radius: 99px; background: #9cc8ff; box-shadow: 0 0 calc(6 * var(--u)) calc(1 * var(--u)) rgba(110,170,255,.85); }
.wsv .sv-gl--t { left: calc(400 * var(--u)); top: calc(349 * var(--u)); width: calc(3.2 * var(--u)); height: calc(12 * var(--u)); }
.wsv .sv-gl--l { left: calc(375 * var(--u)); top: calc(427 * var(--u)); width: calc(16 * var(--u)); height: calc(3.2 * var(--u)); }
.wsv .sv-gl--r { left: calc(411 * var(--u)); top: calc(427 * var(--u)); width: calc(16 * var(--u)); height: calc(3.2 * var(--u)); }
.wsv .sv-gl--c { left: calc(400 * var(--u)); top: calc(432 * var(--u)); width: calc(3.2 * var(--u)); height: calc(12 * var(--u)); }

/* Users */
.wsv .sv-user { position: absolute; top: calc(480.6 * var(--u)); width: calc(154.6 * var(--u)); height: calc(112.4 * var(--u)); background: #ffffff; border: calc(1 * var(--u)) solid #e6eef8; border-top: 0; border-bottom: 0; border-radius: calc(3.3 * var(--u)) calc(3.3 * var(--u)) 0 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; padding-top: calc(12.8 * var(--u)); }
.wsv .sv-user::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(3.3 * var(--u)); background: var(--c-blue); }
.wsv .sv-user--1 { left: calc(87 * var(--u)); }
.wsv .sv-user--2 { left: calc(324.5 * var(--u)); }
.wsv .sv-user--3 { left: calc(558.3 * var(--u)); }
.wsv .sv-photo { width: calc(46 * var(--u)); height: calc(46 * var(--u)); border-radius: 50%; object-fit: cover; border: calc(1.1 * var(--u)) solid rgba(0,0,0,.06); }
.wsv .sv-ulabel { margin-top: calc(10 * var(--u)); height: calc(14 * var(--u)); display: flex; align-items: center; font-size: calc(10.2 * var(--u)); color: var(--c-muted); }
.wsv .sv-email { margin-top: calc(3 * var(--u)); height: calc(16 * var(--u)); display: flex; align-items: center; font-size: calc(11.7 * var(--u)); font-weight: 600; white-space: nowrap; }

/* ---------- Animation (CSS only, 11s loop) ----------
   The form stays put the whole time.
   0.7s  "Business Case Survey" types (fast)
   1.4s  the email types into Add & Invite People (fast)
   2.4s  "Add & Send Invitation" presses
   3.1s  line flows down from the form and branches out (about 1s);
         each user card pops up as its line reaches it
   4.9s  a soft light travels the lines while the scene holds
  10.2s  lines and users fade out together, typed text clears, repeat */
.wsv .sv-flow, .wsv .sv-line, .wsv .sv-caret, .wsv .sv-btn--primary, .wsv .sv-ln, .wsv .sv-v, .wsv .sv-glow, .wsv .sv-user {
  animation-duration: 11s; animation-iteration-count: infinite; animation-fill-mode: both; animation-timing-function: cubic-bezier(.22,1,.36,1);
}
.wsv .sv-line--n { animation-name: svy-type-n; animation-timing-function: steps(20, end); }
.wsv .sv-line--e { animation-name: svy-type-e; animation-timing-function: steps(16, end); }
.wsv .sv-btn--primary { animation-name: svy-press; animation-timing-function: ease-in-out; }
.wsv .sv-caret { animation-name: svy-caret; animation-timing-function: steps(1, end); }
.wsv .sv-flow { animation-name: svy-flow; animation-timing-function: ease-in-out; }
.wsv .sv-trunk { animation-name: svy-trunk; animation-timing-function: cubic-bezier(.45,0,.55,1); }
.wsv .sv-jl, .wsv .sv-jr { animation-name: svy-junction; animation-timing-function: linear; }
.wsv .sv-bl { animation-name: svy-left; animation-timing-function: linear; }
.wsv .sv-br { animation-name: svy-right; animation-timing-function: linear; }
.wsv .sv-vl, .wsv .sv-vr { animation-name: svy-down; animation-timing-function: cubic-bezier(.3,0,.5,1); }
.wsv .sv-vc { animation-name: svy-center; animation-timing-function: cubic-bezier(.45,0,.55,1); }
.wsv .sv-glow { animation-name: svy-glow-vis; animation-timing-function: ease; }
.wsv .sv-gl--t { animation: svy-gl-t 1.6s cubic-bezier(.45,0,.55,1) infinite; }
.wsv .sv-gl--l { animation: svy-gl-l 1.6s cubic-bezier(.45,0,.55,1) infinite; }
.wsv .sv-gl--r { animation: svy-gl-r 1.6s cubic-bezier(.45,0,.55,1) infinite; }
.wsv .sv-gl--c { animation: svy-gl-c 1.6s cubic-bezier(.45,0,.55,1) infinite; }
.wsv .sv-user--1 { animation-name: svy-user-side; }
.wsv .sv-user--2 { animation-name: svy-user-mid; }
.wsv .sv-user--3 { animation-name: svy-user-side; }

@keyframes svy-type-n { 0%, 6.36% { clip-path: inset(0 100% 0 0); } 11.36%, 93.64% { clip-path: inset(0 0 0 0); } 96.36%, 100% { clip-path: inset(0 100% 0 0); } }
@keyframes svy-type-e { 0%, 12.73% { clip-path: inset(0 100% 0 0); } 19.55%, 93.64% { clip-path: inset(0 0 0 0); } 96.36%, 100% { clip-path: inset(0 100% 0 0); } }
@keyframes svy-press { 0%, 21.82% { transform: none; filter: none; } 22.91% { transform: scale(.95); filter: brightness(1.6); } 24.73%, 100% { transform: none; filter: none; } }
@keyframes svy-caret { 0%, 1.36% { opacity: 0; } 2.73% { opacity: 1; } 4.09% { opacity: 0; } 5.27% { opacity: 1; } 6.36%, 100% { opacity: 0; } }
/* lines: trunk 3.0-3.3s, junction 3.28-3.4s, branches out 3.4-3.75s then down 3.75-4.05s, centre down 3.35-3.75s; all fade together 10.2-10.7s */
/* lines, light and users fade out as one layer, so nothing lingers */
@keyframes svy-flow { 0%, 92.27% { opacity: 1; } 97.73%, 100% { opacity: 0; } }
@keyframes svy-trunk { 0%, 27.27% { transform: scaleY(0); opacity: 1; } 30.00%, 92.73% { transform: scaleY(1); opacity: 1; } 97.27%, 100% { transform: scaleY(1); opacity: 1; } }
@keyframes svy-junction { 0%, 29.82% { opacity: 0; } 30.91%, 92.73% { opacity: 1; } 97.27%, 100% { opacity: 1; } }
@keyframes svy-left { 0%, 30.91% { clip-path: inset(0 0 0 100%); opacity: 1; } 34.09%, 92.73% { clip-path: inset(0 0 0 0); opacity: 1; } 97.27%, 100% { clip-path: inset(0 0 0 0); opacity: 1; } }
@keyframes svy-right { 0%, 30.91% { clip-path: inset(0 100% 0 0); opacity: 1; } 34.09%, 92.73% { clip-path: inset(0 0 0 0); opacity: 1; } 97.27%, 100% { clip-path: inset(0 0 0 0); opacity: 1; } }
@keyframes svy-down { 0%, 34.00% { transform: scaleY(0); opacity: 1; } 36.82%, 92.73% { transform: scaleY(1); opacity: 1; } 97.27%, 100% { transform: scaleY(1); opacity: 1; } }
@keyframes svy-center { 0%, 30.45% { transform: scaleY(0); opacity: 1; } 34.09%, 92.73% { transform: scaleY(1); opacity: 1; } 97.27%, 100% { transform: scaleY(1); opacity: 1; } }
/* cards pop as their line arrives */
@keyframes svy-user-mid { 0%, 33.64% { opacity: 0; transform: translateY(8px) scale(.97); } 37.73%, 92.73% { opacity: 1; transform: none; } 97.27%, 100% { opacity: 1; transform: none; } }
@keyframes svy-user-side { 0%, 36.36% { opacity: 0; transform: translateY(8px) scale(.97); } 40.45%, 92.73% { opacity: 1; transform: none; } 97.27%, 100% { opacity: 1; transform: none; } }
/* travelling light while the scene holds */
@keyframes svy-glow-vis { 0%, 40.00% { opacity: 0; } 44.55%, 90.00% { opacity: 1; } 93.64%, 100% { opacity: 0; } }
@keyframes svy-gl-t { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } 45% { transform: translateY(calc(62 * var(--u))); opacity: 1; } 50%, 100% { transform: translateY(calc(62 * var(--u))); opacity: 0; } }
@keyframes svy-gl-l { 0%, 45% { transform: translateX(0); opacity: 0; } 52% { opacity: 1; } 92% { transform: translateX(calc(-196 * var(--u))); opacity: 1; } 100% { transform: translateX(calc(-206 * var(--u))); opacity: 0; } }
@keyframes svy-gl-r { 0%, 45% { transform: translateX(0); opacity: 0; } 52% { opacity: 1; } 92% { transform: translateX(calc(196 * var(--u))); opacity: 1; } 100% { transform: translateX(calc(206 * var(--u))); opacity: 0; } }
@keyframes svy-gl-c { 0%, 45% { transform: translateY(0); opacity: 0; } 52% { opacity: 1; } 92% { transform: translateY(calc(30 * var(--u))); opacity: 1; } 100% { transform: translateY(calc(34 * var(--u))); opacity: 0; } }

/* Hold everything on the first frame until the graphic is in view */
.wsv.is-waiting, .wsv.is-waiting *, .wsv.is-waiting *::before, .wsv.is-waiting *::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .wsv .sv-flow { animation: none; }
  .wsv .sv-line, .wsv .sv-btn--primary, .wsv .sv-ln, .wsv .sv-v, .wsv .sv-user { animation: none; }
  .wsv .sv-caret, .wsv .sv-glow { animation: none; display: none; }
}