/* @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;
}

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

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 ===*/
/* -----------------------------------------------------------
   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: .95rem 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;
}

/*=== 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) — child theme CSS
   Pairs with bios-chat-dark.html / bios-chat-light.html
   - Pure CSS animation (no JavaScript), loops every 12s.
   - Fills its column at 4:3 (620x465 in the media column) and
     scales everything inside proportionally.
   ========================================================= */

.wbc.wbc--dark {
  --c-win: #10101f; --c-text: #f4f3fa; --c-body: rgba(255,255,255,.62); --c-muted: rgba(255,255,255,.6);
  --c-line: rgba(255,255,255,.07); --c-frame: rgba(255,255,255,.10); --c-input-b: rgba(255,255,255,.16); --c-chip-b: rgba(255,255,255,.16);
  --c-active: rgba(255,255,255,.05); --c-box: rgba(255,255,255,.18); --c-card: #12122a; --c-card-b: rgba(255,255,255,.10);
  --c-btn: #f4f3fa; --c-btn-t: #0a0a1c; --c-shadow: rgba(0,0,0,.5); --c-focus: rgba(148,156,255,.6); --c-track: rgba(255,255,255,.14);
}
.wbc.wbc--light {
  --c-win: #ffffff; --c-text: #050324; --c-body: #5d6172; --c-muted: #5d6172;
  --c-line: rgba(5,3,36,.07); --c-frame: rgba(5,3,36,.10); --c-input-b: rgba(5,3,36,.12); --c-chip-b: rgba(5,3,36,.14);
  --c-active: rgba(5,3,36,.04); --c-box: rgba(5,3,36,.18); --c-card: #ffffff; --c-card-b: rgba(5,3,36,.08);
  --c-btn: #050324; --c-btn-t: #ffffff; --c-shadow: rgba(5,3,36,.14); --c-focus: rgba(31,111,214,.45); --c-track: rgba(5,3,36,.12);
}
.wbc { 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); }
.wbc .b-stage { position: absolute; inset: 0; color: var(--c-text); font-size: calc(16 * var(--u)); line-height: 1.5; letter-spacing: normal; text-transform: none; }
.wbc img { display: block; max-width: none; margin: 0; padding: 0; }
.wbc svg { display: block; flex-shrink: 0; }

/* Window */
.wbc .b-window { position: absolute; left: calc(28 * var(--u)); top: calc(36 * var(--u)); width: calc(746 * var(--u)); height: calc(530 * var(--u)); border-radius: calc(14 * var(--u)); background: var(--c-win); border: calc(1 * var(--u)) solid var(--c-frame); overflow: hidden; }
.wbc .b-head { height: calc(64 * var(--u)); display: flex; align-items: center; justify-content: space-between; padding: 0 calc(28 * var(--u)); border-bottom: calc(1 * var(--u)) solid var(--c-line); }
.wbc .b-title { font-size: calc(19.5 * var(--u)); font-weight: 700; letter-spacing: -0.01em; }
.wbc .b-status { position: relative; width: calc(200 * var(--u)); height: calc(24 * var(--u)); font-size: calc(13.5 * 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(8 * var(--u)); white-space: nowrap; }
.wbc .b-spin { width: calc(13 * var(--u)); height: calc(13 * var(--u)); border-radius: 50%; border: calc(2 * var(--u)) solid var(--c-track); border-top-color: #f2702f; animation: b-spin .8s linear infinite; }
.wbc .b-check { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.wbc .b-input { position: relative; margin: calc(18 * var(--u)) calc(28 * var(--u)) 0 calc(30 * var(--u)); height: calc(52 * var(--u)); border-radius: calc(4 * var(--u)); border: calc(1 * var(--u)) solid var(--c-input-b); display: flex; align-items: center; padding: 0 calc(17 * var(--u)); font-size: calc(14.5 * var(--u)); white-space: nowrap; }
.wbc .b-q { display: inline-block; }
.wbc .b-caret { position: absolute; left: calc(17 * var(--u)); top: calc(16 * var(--u)); width: calc(1.5 * var(--u)); height: calc(19 * var(--u)); background: var(--c-text); }
.wbc .b-chip { margin: calc(16 * var(--u)) 0 0 calc(30 * var(--u)); width: calc(316 * var(--u)); height: calc(34 * var(--u)); display: flex; align-items: center; gap: calc(14 * var(--u)); padding-left: calc(14 * var(--u)); background: var(--c-active); border-left: calc(2.5 * var(--u)) solid #4cb782; font-size: calc(12.5 * var(--u)); }
.wbc .b-chip b { color: #4cb782; font-weight: 600; }
.wbc .b-rows { margin-top: calc(18 * var(--u)); border-top: calc(1 * var(--u)) solid var(--c-line); }
.wbc .b-row { height: calc(78 * var(--u)); display: flex; align-items: center; gap: calc(16 * var(--u)); padding: 0 calc(28 * var(--u)) 0 calc(29 * var(--u)); border-bottom: calc(1 * var(--u)) solid var(--c-line); }
.wbc .b-box { position: relative; width: calc(20 * var(--u)); height: calc(20 * var(--u)); flex-shrink: 0; border-radius: calc(3 * var(--u)); border: calc(1.2 * var(--u)) solid var(--c-box); }
.wbc .b-box i { position: absolute; inset: calc(-1.2 * var(--u)); border-radius: calc(3 * var(--u)); background: #1f6fd6; display: flex; align-items: center; justify-content: center; }
.wbc .b-box svg { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
.wbc .b-photo { width: calc(46 * var(--u)); height: calc(46 * var(--u)); border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.wbc .b-info { min-width: 0; }
.wbc .b-name-row { display: flex; align-items: center; gap: calc(10 * var(--u)); white-space: nowrap; }
.wbc .b-name { font-size: calc(16.5 * var(--u)); font-weight: 700; letter-spacing: -0.005em; }
.wbc .b-pill { font-size: calc(10.5 * var(--u)); border: calc(1 * var(--u)) solid var(--c-chip-b); padding: calc(4 * var(--u)) calc(23 * var(--u)); border-radius: 999px; }
.wbc .b-desc { margin-top: calc(4 * var(--u)); font-size: calc(13.5 * var(--u)); color: var(--c-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Pop-up */
.wbc .b-card { position: absolute; left: calc(323 * var(--u)); top: calc(464 * var(--u)); width: calc(439 * var(--u)); height: calc(68 * var(--u)); z-index: 2; border-radius: calc(4 * var(--u)); background: var(--c-card); border: calc(1 * var(--u)) solid var(--c-card-b); box-shadow: calc(-8 * var(--u)) calc(18 * var(--u)) calc(36 * var(--u)) 0 var(--c-shadow); display: flex; align-items: center; justify-content: space-between; padding: 0 calc(17 * var(--u)) 0 calc(14 * var(--u)); }
.wbc .b-card-t { display: flex; align-items: center; gap: calc(10 * var(--u)); font-size: calc(14.5 * var(--u)); font-weight: 600; white-space: nowrap; }
.wbc .b-card-t svg { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
.wbc .b-save { height: calc(38 * var(--u)); display: inline-flex; align-items: center; padding: 0 calc(15 * var(--u)); border-radius: calc(4 * var(--u)); background: var(--c-btn); color: var(--c-btn-t); font-size: calc(14 * var(--u)); font-weight: 600; white-space: nowrap; }

/* ---------- Animation (CSS only, 12s loop) ----------
   0.6s  question types into the chat box
   3.5s  sent: box flashes, header shows "Searching 116 bios"
   4.6s  filter chip appears · 5.0s header shows "Top 20 matches"
   5.0s  bios load in one by one
   6.6s  first three bios get ticked in turn
   7.8s  "3 Bios matched on experience" pop-up rises in
  11.0s  everything fades out, repeat */
.wbc .b-q, .wbc .b-caret, .wbc .b-input, .wbc .b-st1, .wbc .b-st2, .wbc .b-chip, .wbc .b-row, .wbc .b-box i, .wbc .b-card {
  animation-duration: 12s; 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(66, 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-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 { animation-name: b-row; }
.wbc .b-row:nth-child(2) { animation-delay: .35s; }
.wbc .b-row:nth-child(3) { animation-delay: .7s; }
.wbc .b-row:nth-child(4) { animation-delay: 1.05s; }
.wbc .b-row:nth-child(1) .b-box i { animation-name: b-tick1; }
.wbc .b-row:nth-child(2) .b-box i { animation-name: b-tick2; }
.wbc .b-row:nth-child(3) .b-box i { animation-name: b-tick3; }
.wbc .b-row:nth-child(4) .b-box i { display: none; }
.wbc .b-card { animation-name: b-card; }

@keyframes b-type { 0%, 5.00% { clip-path: inset(0 100% 0 0); } 27.50%, 95.00% { clip-path: inset(0 0 0 0); } 98.33%, 100% { clip-path: inset(0 100% 0 0); } }
@keyframes b-caret { 0% { opacity: 1; } 2.08% { opacity: 0; } 3.75% { opacity: 1; } 5.00%, 100% { opacity: 0; } }
@keyframes b-send { 0%, 28.33% { border-color: var(--c-input-b); } 30.00% { border-color: var(--c-focus); } 35.83%, 100% { border-color: var(--c-input-b); } }
@keyframes b-st1 { 0%, 29.17% { opacity: 0; } 30.83%, 40.83% { opacity: 1; } 42.50%, 100% { opacity: 0; } }
@keyframes b-st2 { 0%, 41.67% { opacity: 0; } 44.17%, 91.67% { opacity: 1; } 96.67%, 100% { opacity: 0; } }
@keyframes b-chip { 0%, 36.67% { opacity: 0; transform: translateY(6px); } 41.67%, 91.67% { opacity: 1; transform: none; } 96.67%, 100% { opacity: 0; transform: none; } }
@keyframes b-row { 0%, 41.67% { opacity: 0; transform: translateY(10px); } 48.33%, 90.83% { opacity: 1; transform: none; } 95.83%, 100% { opacity: 0; transform: none; } }
@keyframes b-tick1 { 0%, 55.00% { opacity: 0; transform: scale(.5); } 57.08% { opacity: 1; transform: scale(1.12); } 58.75%, 100% { opacity: 1; transform: none; } }
@keyframes b-tick2 { 0%, 58.33% { opacity: 0; transform: scale(.5); } 60.42% { opacity: 1; transform: scale(1.12); } 62.08%, 100% { opacity: 1; transform: none; } }
@keyframes b-tick3 { 0%, 61.67% { opacity: 0; transform: scale(.5); } 63.75% { opacity: 1; transform: scale(1.12); } 65.42%, 100% { opacity: 1; transform: none; } }
@keyframes b-card { 0%, 65.00% { opacity: 0; transform: translateY(14px); } 71.67%, 90.00% { opacity: 1; transform: none; } 95.00%, 100% { opacity: 0; transform: none; } }
@keyframes b-spin { to { transform: rotate(360deg); } }

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

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

/* ---------- Colour tokens ---------- */
.wlc2.wlc2--dark {
  --c-win: #10101f; --c-card: #10101f; --c-text: #f4f3fa; --c-body: rgba(255,255,255,.72); --c-muted: rgba(255,255,255,.55);
  --c-faint: rgba(255,255,255,.38); --c-line: rgba(255,255,255,.07); --c-frame: rgba(255,255,255,.10); --c-chip-b: rgba(255,255,255,.14);
  --c-input-b: rgba(255,255,255,.16); --c-btn: #f4f3fa; --c-btn-t: #0a0a1c; --c-ghost: rgba(255,255,255,.65); --c-ghost-b: rgba(255,255,255,.16);
  --c-green-t: #6fd3a0; --c-link: #b8bdff; --c-icon: rgba(94,106,210,.25); --c-icon-t: #b8bdff; --c-lost: rgba(255,255,255,.22);
  --c-shadow: rgba(0,0,0,.55); --c-focus: rgba(148,156,255,.6);
}
.wlc2.wlc2--light {
  --c-win: #ffffff; --c-card: #ffffff; --c-text: #050324; --c-body: #3b3a55; --c-muted: #5d6172;
  --c-faint: #a3a5b3; --c-line: rgba(5,3,36,.07); --c-frame: rgba(5,3,36,.10); --c-chip-b: rgba(5,3,36,.12);
  --c-input-b: rgba(5,3,36,.12); --c-btn: #050324; --c-btn-t: #ffffff; --c-ghost: #3b3a55; --c-ghost-b: rgba(5,3,36,.12);
  --c-green-t: #23895a; --c-link: #1f6fd6; --c-icon: #e8f1fd; --c-icon-t: #1f6fd6; --c-lost: rgba(5,3,36,.06);
  --c-shadow: rgba(5,3,36,.14); --c-focus: rgba(31,111,214,.45);
}

/* ---------- Frame: 800x600 grid, --u = one grid unit ---------- */
.wlc2 { 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); }
.wlc2 .w-stage { position: absolute; inset: 0; color: var(--c-text); font-size: calc(16 * var(--u)); line-height: 1.5; letter-spacing: normal; text-transform: none; }
.wlc2 img { display: block; max-width: none; margin: 0; padding: 0; }
.wlc2 svg { display: block; flex-shrink: 0; }

/* App window */
.wlc2 .w-window { position: absolute; left: calc(45 * var(--u)); top: calc(41 * var(--u)); width: calc(618 * var(--u)); height: calc(455 * var(--u)); border-radius: calc(14 * var(--u)); background: var(--c-win); border: calc(1 * var(--u)) solid var(--c-frame); overflow: hidden; display: flex; flex-direction: column; }
.wlc2 .w-crumbs { height: calc(52 * var(--u)); flex-shrink: 0; display: flex; align-items: center; gap: calc(12 * var(--u)); padding: 0 calc(24 * var(--u)); border-bottom: calc(1 * var(--u)) solid var(--c-line); font-size: calc(16 * var(--u)); color: var(--c-muted); white-space: nowrap; }
.wlc2 .w-sep { opacity: .5; }
.wlc2 .w-current { color: var(--c-text); }
.wlc2 .w-doc { display: flex; flex-direction: column; gap: calc(12 * var(--u)); padding: calc(26 * var(--u)) calc(24 * var(--u)) calc(22 * var(--u)); }
.wlc2 .w-title { font-size: calc(22 * var(--u)); font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; white-space: nowrap; }
.wlc2 .w-meta { display: flex; align-items: center; gap: calc(14 * var(--u)); font-size: calc(14 * var(--u)); color: var(--c-muted); }
.wlc2 .w-meta b { font-weight: 400; color: var(--c-link); }
.wlc2 .w-avatars { display: flex; }
.wlc2 .w-avatar { width: calc(28 * var(--u)); height: calc(28 * var(--u)); border-radius: 50%; object-fit: cover; }
.wlc2 .w-avatar + .w-avatar { margin-left: calc(-6 * var(--u)); }
.wlc2 .w-stats { display: flex; gap: calc(36 * var(--u)); padding: calc(18 * var(--u)) calc(24 * var(--u)); border-top: calc(1 * var(--u)) solid var(--c-line); }
.wlc2 .w-stat { display: flex; align-items: center; gap: calc(12 * var(--u)); }
.wlc2 .w-stat-icon { width: calc(38 * var(--u)); height: calc(38 * var(--u)); border-radius: 50%; background: var(--c-icon); display: flex; align-items: center; justify-content: center; }
.wlc2 .w-stat-icon svg { width: calc(17 * var(--u)); height: calc(17 * var(--u)); stroke: var(--c-icon-t); }
.wlc2 .w-stat-v { display: block; font-size: calc(17 * var(--u)); font-weight: 600; line-height: 1.25; }
.wlc2 .w-stat-l { display: block; font-size: calc(13 * var(--u)); color: var(--c-muted); }
.wlc2 .w-row { display: grid; grid-template-columns: calc(245 * var(--u)) 1fr; gap: calc(16 * var(--u)); align-items: center; padding: 0 calc(24 * var(--u)); border-top: calc(1 * var(--u)) solid var(--c-line); white-space: nowrap; }
.wlc2 .w-row--head { height: calc(42 * var(--u)); font-size: calc(12.5 * var(--u)); color: var(--c-faint); }
.wlc2 .w-row--body { height: calc(58 * var(--u)); font-size: calc(15 * var(--u)); }
.wlc2 .w-viewer { display: flex; align-items: center; gap: calc(12 * var(--u)); }
.wlc2 .w-photo { width: calc(32 * var(--u)); height: calc(32 * var(--u)); border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.wlc2 .w-cell { color: var(--c-muted); }

/* Chat card */
.wlc2 .w-card { position: absolute; left: calc(328 * var(--u)); top: calc(218 * var(--u)); width: calc(441 * var(--u)); height: calc(349 * var(--u)); z-index: 2; border-radius: calc(6 * var(--u)); background: var(--c-card); border: calc(1 * var(--u)) solid var(--c-frame); box-shadow: calc(-10 * var(--u)) calc(22 * var(--u)) calc(44 * var(--u)) 0 var(--c-shadow); padding: calc(26 * var(--u)) calc(22 * var(--u)) calc(24 * var(--u)) calc(24 * var(--u)); display: flex; flex-direction: column; }
.wlc2 .w-card-head { display: flex; align-items: center; justify-content: space-between; }
.wlc2 .w-card-title { display: flex; align-items: center; gap: calc(12 * var(--u)); font-size: calc(20 * var(--u)); font-weight: 600; letter-spacing: -0.01em; }
.wlc2 .w-card-title svg { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
.wlc2 .w-chip { font-size: calc(11.5 * var(--u)); color: var(--c-muted); border: calc(1 * var(--u)) solid var(--c-chip-b); padding: calc(4 * var(--u)) calc(9 * var(--u)); border-radius: calc(5 * var(--u)); }
.wlc2 .w-input { position: relative; margin-top: calc(26 * var(--u)); height: calc(74 * var(--u)); border-radius: calc(6 * var(--u)); border: calc(1 * var(--u)) solid var(--c-input-b); padding: calc(12 * var(--u)) calc(19 * var(--u)); font-size: calc(13.5 * var(--u)); line-height: 1.55; color: var(--c-text); }
.wlc2 .w-line { display: block; width: max-content; white-space: nowrap; }
.wlc2 .w-caret { position: absolute; left: calc(19 * var(--u)); top: calc(14 * var(--u)); width: calc(1.5 * var(--u)); height: calc(18 * var(--u)); background: var(--c-text); }
.wlc2 .w-answer-wrap { position: relative; margin-top: calc(22 * var(--u)); min-height: calc(50 * var(--u)); }
.wlc2 .w-answer { margin: 0; font-size: calc(15 * var(--u)); line-height: 1.55; color: var(--c-body); }
.wlc2 .w-answer b { color: var(--c-green-t); font-weight: 600; }
.wlc2 .w-thinking { position: absolute; left: 0; top: calc(2 * var(--u)); display: flex; align-items: center; gap: calc(10 * var(--u)); font-size: calc(14 * var(--u)); color: var(--c-muted); }
.wlc2 .w-dots { display: flex; gap: calc(4 * var(--u)); }
.wlc2 .w-dots i { display: block; width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; background: #f2702f; }
.wlc2 .w-bar { display: flex; gap: calc(4 * var(--u)); height: calc(7 * var(--u)); margin-top: calc(24 * var(--u)); }
.wlc2 .w-bar i { display: block; border-radius: calc(4 * var(--u)); transform-origin: 0 50%; }
.wlc2 .w-won { flex: 75; background: #4cb782; }
.wlc2 .w-lost { flex: 25; background: var(--c-lost); }
.wlc2 .w-actions { display: flex; justify-content: flex-end; gap: calc(12 * var(--u)); margin-top: auto; }
.wlc2 .w-btn { height: calc(45 * var(--u)); display: inline-flex; align-items: center; padding: 0 calc(19 * var(--u)); border-radius: calc(5 * var(--u)); font-size: calc(16.5 * var(--u)); white-space: nowrap; }
.wlc2 .w-btn--primary { font-weight: 600; color: var(--c-btn-t); background: var(--c-btn); }
.wlc2 .w-btn--ghost { color: var(--c-ghost); border: calc(1 * var(--u)) solid var(--c-ghost-b); }

/* ---------- Animation (CSS only, 11s loop) ----------
   0.4s  stats, table header and viewer rows fade up one by one
   1.6s  chat card rises in, caret blinks in the empty chat box
   2.2s  question types into the chat box, line by line
   5.1s  sent: chat box border flashes
   5.4s  "Checking past pursuits" dots
   7.0s  answer, bar fills, buttons
  10.2s  card and rows fade out, repeat */
.wlc2 .w-rows-item, .wlc2 .w-card, .wlc2 .w-line, .wlc2 .w-caret, .wlc2 .w-input, .wlc2 .w-thinking, .wlc2 .w-answer, .wlc2 .w-bar i, .wlc2 .w-actions {
  animation-duration: 11s; animation-iteration-count: infinite; animation-fill-mode: both; animation-timing-function: cubic-bezier(.22,1,.36,1);
}
.wlc2 .w-rows-item { animation-name: w-row; }
.wlc2 .w-rows-item:nth-of-type(4) { animation-delay: .18s; }
.wlc2 .w-rows-item:nth-of-type(5) { animation-delay: .36s; }
.wlc2 .w-rows-item:nth-of-type(6) { animation-delay: .54s; }
.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-won { animation-name: w-won; }
.wlc2 .w-lost { animation-name: w-lost; }
.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-row { 0%, 3.64% { opacity: 0; transform: translateY(10px); } 10.91%, 92.73% { opacity: 1; transform: none; } 99.09%, 100% { opacity: 0; transform: none; } }
@keyframes w-card { 0%, 14.55% { opacity: 0; transform: translateY(14px); } 21.82%, 90.91% { opacity: 1; transform: none; } 97.27%, 100% { opacity: 0; transform: none; } }
@keyframes w-type1 { 0%, 20.00% { clip-path: inset(0 100% 0 0); } 34.55%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes w-type2 { 0%, 35.00% { clip-path: inset(0 100% 0 0); } 45.45%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes w-caret { 0% { opacity: 0; } 17.27% { opacity: 1; } 18.64% { opacity: 0; } 20.00%, 100% { opacity: 0; } }
@keyframes w-send { 0%, 45.45% { border-color: var(--c-input-b); } 47.27% { border-color: var(--c-focus); } 52.73%, 100% { border-color: var(--c-input-b); } }
@keyframes w-think { 0%, 48.64% { opacity: 0; } 49.55%, 62.27% { opacity: 1; } 63.18%, 100% { opacity: 0; } }
@keyframes w-answer { 0%, 63.64% { opacity: 0; transform: translateY(6px); } 70.91%, 100% { opacity: 1; transform: none; } }
@keyframes w-won { 0%, 65.45% { transform: scaleX(0); } 75.45%, 100% { transform: scaleX(1); } }
@keyframes w-lost { 0%, 67.27% { transform: scaleX(0); opacity: 0; } 77.27%, 100% { transform: scaleX(1); opacity: 1; } }
@keyframes w-actions { 0%, 69.09% { opacity: 0; transform: translateY(4px); } 76.36%, 100% { opacity: 1; transform: none; } }
@keyframes w-dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }

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

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

/* ---------- Colour tokens: dark ---------- */
.wca.wca--dark {
  --wca-win: #10101f;
  --wca-card: #121226;
  --wca-text: #f4f3fa;
  --wca-body: rgba(255,255,255,.80);
  --wca-muted: rgba(255,255,255,.55);
  --wca-frame: rgba(255,255,255,.10);
  --wca-chip-b: rgba(255,255,255,.12);
  --wca-field: rgba(255,255,255,.04);
  --wca-glow: rgba(94,106,210,.35);
  --wca-flow: rgba(148,156,255,.5);
  --wca-pill: rgba(94,106,210,.22);
  --wca-pill-t: #b8bdff;
  --wca-shadow-c: rgba(0,0,0,.6);
}

/* ---------- Colour tokens: light ---------- */
.wca.wca--light {
  --wca-win: #ffffff;
  --wca-card: #ffffff;
  --wca-text: #050324;
  --wca-body: #2c2a45;
  --wca-muted: #5d6172;
  --wca-frame: rgba(5,3,36,.10);
  --wca-chip-b: rgba(5,3,36,.12);
  --wca-field: #f7f7fa;
  --wca-glow: rgba(94,106,210,.16);
  --wca-flow: rgba(59,70,184,.4);
  --wca-pill: #eef0fb;
  --wca-pill-t: #3b46b8;
  --wca-shadow-c: rgba(5,3,36,.18);
}

/* ---------- Frame: drawn on an 800x600 grid, --u = one grid unit ---------- */
.wca {
  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;
}
.wca *, .wca *::before, .wca *::after { box-sizing: border-box; --u: calc(100cqw / 800); }
.wca .wca-stage {
  position: absolute;
  inset: 0;
  color: var(--wca-text);
  font-size: calc(16 * var(--u));
  line-height: 1.5;
  letter-spacing: normal;
  text-transform: none;
}
.wca img { display: block; max-width: none; margin: 0; padding: 0; }
.wca svg { display: block; flex-shrink: 0; }

/* ---------- Glow ---------- */
.wca .wca-glow {
  position: absolute;
  left: calc(220 * var(--u));
  top: calc(120 * var(--u));
  width: calc(360 * var(--u));
  height: calc(220 * var(--u));
  background: radial-gradient(ellipse at center, var(--wca-glow), transparent 60%);
  filter: blur(calc(30 * var(--u)));
  pointer-events: none;
}

/* ---------- Form card ---------- */
.wca .wca-card {
  position: absolute;
  left: calc(140 * var(--u));
  top: calc(36 * var(--u));
  width: calc(520 * var(--u));
  z-index: 2;
  border-radius: calc(14 * var(--u));
  padding: calc(1 * var(--u));
  background: linear-gradient(135deg, rgba(242,112,47,.7), rgba(94,106,210,.5) 55%, rgba(255,255,255,.08));
  box-shadow: calc(-11 * var(--u)) calc(24 * var(--u)) calc(40 * var(--u)) 0 var(--wca-shadow-c);
}
.wca .wca-card-inner {
  display: flex;
  flex-direction: column;
  gap: calc(14 * var(--u));
  padding: calc(22 * var(--u)) calc(24 * var(--u)) calc(24 * var(--u));
  border-radius: calc(13 * var(--u));
  background: var(--wca-card);
}
.wca .wca-head { display: flex; align-items: center; justify-content: space-between; }
.wca .wca-title { display: flex; align-items: center; gap: calc(12 * var(--u)); font-size: calc(21 * var(--u)); font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.wca .wca-title svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
.wca .wca-chip { font-size: calc(12 * var(--u)); color: var(--wca-muted); border: calc(1 * var(--u)) solid var(--wca-chip-b); padding: calc(3 * var(--u)) calc(9 * var(--u)); border-radius: calc(6 * var(--u)); }
.wca .wca-field { display: flex; flex-direction: column; gap: calc(6 * var(--u)); }
.wca .wca-label { font-size: calc(12.5 * var(--u)); color: var(--wca-muted); }
.wca .wca-input {
  display: flex;
  align-items: center;
  min-height: calc(40 * var(--u));
  padding: calc(10 * var(--u)) calc(14 * var(--u));
  border-radius: calc(8 * var(--u));
  border: calc(1 * var(--u)) solid var(--wca-chip-b);
  background: var(--wca-field);
  font-size: calc(14.5 * var(--u));
  line-height: 1.55;
  color: var(--wca-body);
}
.wca .wca-input--area { font-size: calc(14 * var(--u)); }
.wca .wca-pill {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: calc(10 * var(--u));
  height: calc(34 * var(--u));
  padding: 0 calc(14 * var(--u));
  border-radius: 999px;
  background: var(--wca-pill);
  color: var(--wca-pill-t);
  font-size: calc(14 * var(--u));
  font-weight: 500;
}
.wca .wca-pill svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }

/* ---------- Flow lines ---------- */
.wca .wca-flow { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.wca .wca-flow path { fill: none; stroke: var(--wca-flow); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.wca .wca-flow circle { fill: #5e6ad2; }

/* ---------- Assigned users ---------- */
.wca .wca-user {
  position: absolute;
  top: calc(418 * var(--u));
  width: calc(200 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(4 * var(--u));
  padding: calc(18 * var(--u)) calc(12 * var(--u)) calc(16 * var(--u));
  border-radius: calc(12 * var(--u));
  background: var(--wca-win);
  border: calc(1 * var(--u)) solid var(--wca-frame);
  overflow: hidden;
}
.wca .wca-user::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(3 * var(--u)); background: #5e6ad2; }
.wca .wca-user--1 { left: calc(60 * var(--u)); }
.wca .wca-user--2 { left: calc(300 * var(--u)); }
.wca .wca-user--3 { left: calc(540 * var(--u)); }
.wca .wca-photo { width: calc(46 * var(--u)); height: calc(46 * var(--u)); border-radius: 50%; object-fit: cover; margin-bottom: calc(6 * var(--u)); }
.wca .wca-user-label { font-size: calc(11.5 * var(--u)); color: var(--wca-muted); }
.wca .wca-email { font-size: calc(14 * var(--u)); font-weight: 600; white-space: nowrap; }

/* ---------- Animation (CSS only, 9s loop) ----------
   0.0s  form card rises in
   0.9s  name, instructions and due date fill in one by one
   2.7s  connector lines fade in as one SVG layer
   3.6s  the three assigned users fade up in turn
   8.1s  hold ends, everything fades out, repeat */
.wca .wca-card, .wca .wca-glow, .wca .wca-in, .wca .wca-pill,
.wca .wca-flow, .wca .wca-user {
  animation-duration: 9s;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(.22,1,.36,1);
}
.wca .wca-card { animation-name: wca-card; }
.wca .wca-glow { animation-name: wca-glow; }
.wca .wca-in--1 { animation-name: wca-in-1; }
.wca .wca-in--2 { animation-name: wca-in-2; }
.wca .wca-pill { animation-name: wca-pill; }
/* Animate the SVG container rather than repainting individual SVG strokes. */
.wca .wca-flow { animation-name: wca-flow-fade; animation-timing-function: ease-in-out; }
.wca .wca-user--1 { animation-name: wca-user-1; }
.wca .wca-user--2 { animation-name: wca-user-2; }
.wca .wca-user--3 { animation-name: wca-user-3; }

@keyframes wca-card {
  0%       { opacity: 0; transform: translateY(12px); }
  8%, 90%  { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: none; }
}
@keyframes wca-glow {
  0%       { opacity: 0; }
  10%, 90% { opacity: 1; }
  96%, 100% { opacity: 0; }
}
@keyframes wca-in-1 {
  0%, 10%   { opacity: 0; transform: translateY(4px); }
  16%, 100% { opacity: 1; transform: none; }
}
@keyframes wca-in-2 {
  0%, 16%   { opacity: 0; transform: translateY(4px); }
  22%, 100% { opacity: 1; transform: none; }
}
@keyframes wca-pill {
  0%, 22%   { opacity: 0; transform: scale(.92); }
  28%, 100% { opacity: 1; transform: none; }
}
@keyframes wca-flow-fade {
  0%, 30%   { opacity: 0; }
  42%, 90%  { opacity: 1; }
  96%, 100% { opacity: 0; }
}
@keyframes wca-user-1 {
  0%, 40%   { opacity: 0; transform: translateY(10px); }
  48%, 90%  { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: none; }
}
@keyframes wca-user-2 {
  0%, 43%   { opacity: 0; transform: translateY(10px); }
  51%, 90%  { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: none; }
}
@keyframes wca-user-3 {
  0%, 46%   { opacity: 0; transform: translateY(10px); }
  54%, 90%  { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: none; }
}

/* Reduced motion: show the finished frame */
@media (prefers-reduced-motion: reduce) {
  .wca .wca-card, .wca .wca-glow, .wca .wca-in, .wca .wca-pill,
  .wca .wca-flow, .wca .wca-user { animation: 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: 700; 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; }
}