/* @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 9s.
   - 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, 9s loop) ----------
   0.4s  question types into the chat box (fast)
   1.7s  sent: box flashes, 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-st1, .wbc .b-st2, .wbc .b-chip, .wbc .b-row, .wbc .b-box i, .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-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: 0.18s; }
.wbc .b-row:nth-child(3) { animation-delay: 0.36s; }
.wbc .b-row:nth-child(4) { animation-delay: 0.54s; }
.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%, 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-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-row { 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-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); } }

@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 8.5s.
   - 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, 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-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: 8.5s; 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: .12s; }
.wlc2 .w-rows-item:nth-of-type(5) { animation-delay: .24s; }
.wlc2 .w-rows-item:nth-of-type(6) { animation-delay: .36s; }
.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%, 2.35% { opacity: 0; transform: translateY(10px); } 9.41%, 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-lost { 0%, 48.82% { transform: scaleX(0); opacity: 0; } 58.24%, 100% { transform: scaleX(1); opacity: 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); } }

/* 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 11s.
   - Fills its column at 4:3 (620x465 in the media column) and
     scales everything inside proportionally.
   ========================================================= */

.wca2.wca2--dark {
  --c-card: #11111f; --c-card-b: transparent; --c-text: #f4f3fa; --c-body: rgba(255,255,255,.82); --c-muted: rgba(255,255,255,.55);
  --c-field: #1b1b30; --c-field-b: rgba(255,255,255,.08); --c-chip-b: rgba(255,255,255,.18);
  --c-pill: #25255a; --c-pill-t: #b8bdff; --c-user: #10101f; --c-user-b: transparent; --c-spark: #f2702f; --c-caret: #f4f3fa;
}
.wca2.wca2--light {
  --c-card: #ffffff; --c-card-b: rgba(5,3,36,.10); --c-text: #050324; --c-body: #050324; --c-muted: #8a8ea0;
  --c-field: #ffffff; --c-field-b: rgba(5,3,36,.12); --c-chip-b: rgba(5,3,36,.3);
  --c-pill: #e8f1fd; --c-pill-t: #1f6fd6; --c-user: #ffffff; --c-user-b: rgba(5,3,36,.06); --c-spark: #1f6fd6; --c-caret: #050324;
}
.wca2 { 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; }
.wca2 *, .wca2 *::before, .wca2 *::after { box-sizing: border-box; --u: calc(100cqw / 800); }
.wca2 .a-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; }
.wca2 img { display: block; max-width: none; margin: 0; padding: 0; }
.wca2 svg { display: block; flex-shrink: 0; }

/* Form card */
.wca2 .a-card { position: absolute; left: calc(94 * var(--u)); top: calc(7 * var(--u)); width: calc(603 * var(--u)); height: calc(381 * var(--u)); border-radius: calc(6 * var(--u)); background: var(--c-card); border: calc(1 * var(--u)) solid var(--c-card-b); padding: calc(36 * var(--u)) calc(32 * var(--u)) 0 calc(25 * var(--u)); }
.wca2 .a-head { display: flex; align-items: center; justify-content: space-between; padding-left: calc(8 * var(--u)); }
.wca2 .a-title { display: flex; align-items: center; gap: calc(14 * var(--u)); font-size: calc(24 * var(--u)); font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
.wca2 .a-title svg { width: calc(31 * var(--u)); height: calc(31 * var(--u)); }
.wca2 .a-chip { font-size: calc(11.5 * var(--u)); color: var(--c-muted); border: calc(1 * var(--u)) solid var(--c-chip-b); padding: calc(3 * var(--u)) calc(9 * var(--u)); border-radius: calc(5 * var(--u)); }
.wca2 .a-label { display: block; margin: calc(22 * var(--u)) 0 calc(6 * var(--u)) calc(4 * var(--u)); font-size: calc(12 * var(--u)); color: var(--c-muted); }
.wca2 .a-label--2 { margin-top: calc(24 * var(--u)); }
.wca2 .a-label--3 { margin-top: calc(20 * var(--u)); }
.wca2 .a-field { position: relative; border-radius: calc(4 * var(--u)); background: var(--c-field); border: calc(1 * var(--u)) solid var(--c-field-b); padding: 0 calc(18 * var(--u)); font-size: calc(14.4 * var(--u)); color: var(--c-body); }
.wca2 .a-field--1 { height: calc(40 * var(--u)); display: flex; align-items: center; }
.wca2 .a-field--2 { height: calc(64 * var(--u)); padding-top: calc(9 * var(--u)); line-height: 1.4; }
.wca2 .a-line { display: block; width: max-content; white-space: nowrap; }
.wca2 .a-caret { position: absolute; left: calc(18 * var(--u)); top: calc(11 * var(--u)); width: calc(1.5 * var(--u)); height: calc(18 * var(--u)); background: var(--c-caret); }
.wca2 .a-pill { display: inline-flex; align-items: center; gap: calc(13 * var(--u)); height: calc(37 * var(--u)); margin-left: calc(3 * var(--u)); padding: 0 calc(17 * var(--u)) 0 calc(15 * var(--u)); border-radius: 999px; background: var(--c-pill); color: var(--c-pill-t); font-size: calc(15 * var(--u)); }
.wca2 .a-pill svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }

/* Connector lines (plain HTML boxes, no SVG, so site editors can't break them) */
.wca2 .a-ln { position: absolute; border: 0 solid #2a7be4; --lw: max(1.5px, calc(2 * var(--u))); }
.wca2 .a-trunk { left: calc(396.2 * var(--u)); top: calc(388 * var(--u)); width: 0; height: calc(41 * var(--u)); border-left-width: var(--lw); transform-origin: 50% 0; }
.wca2 .a-jl { left: calc(386 * var(--u)); top: calc(427 * var(--u)); width: calc(11.8 * var(--u)); height: calc(9 * var(--u)); border-right-width: var(--lw); border-bottom-width: var(--lw); border-bottom-right-radius: calc(8 * var(--u)); }
.wca2 .a-jr { left: calc(396.2 * var(--u)); top: calc(427 * var(--u)); width: calc(11.8 * var(--u)); height: calc(9 * var(--u)); border-left-width: var(--lw); border-bottom-width: var(--lw); border-bottom-left-radius: calc(8 * var(--u)); }
.wca2 .a-bl { left: calc(168.2 * var(--u)); top: calc(434.4 * var(--u)); width: calc(218.6 * var(--u)); height: calc(50 * var(--u)); border-top-width: var(--lw); border-left-width: var(--lw); border-top-left-radius: calc(10 * var(--u)); }
.wca2 .a-br { left: calc(407.2 * var(--u)); top: calc(434.4 * var(--u)); width: calc(225.6 * var(--u)); height: calc(50 * var(--u)); border-top-width: var(--lw); border-right-width: var(--lw); border-top-right-radius: calc(10 * var(--u)); }
.wca2 .a-bc { left: calc(396.2 * var(--u)); top: calc(429 * var(--u)); width: 0; height: calc(55 * var(--u)); border-left-width: var(--lw); transform-origin: 50% 0; }
/* travelling light */
.wca2 .a-glow { position: absolute; inset: 0; pointer-events: none; }
.wca2 .a-gl { position: absolute; border-radius: 99px; background: #9cc6ff; box-shadow: 0 0 calc(6 * var(--u)) calc(1 * var(--u)) rgba(120,175,255,.8); }
.wca2 .a-gl--t { left: calc(395.4 * var(--u)); top: calc(388 * var(--u)); width: calc(3.2 * var(--u)); height: calc(12 * var(--u)); }
.wca2 .a-gl--l { left: calc(370 * var(--u)); top: calc(433.6 * var(--u)); width: calc(16 * var(--u)); height: calc(3.2 * var(--u)); }
.wca2 .a-gl--r { left: calc(410 * var(--u)); top: calc(433.6 * var(--u)); width: calc(16 * var(--u)); height: calc(3.2 * var(--u)); }
.wca2 .a-gl--c { left: calc(395.4 * var(--u)); top: calc(436 * var(--u)); width: calc(3.2 * var(--u)); height: calc(12 * var(--u)); }

/* Users */
.wca2 .a-user { position: absolute; top: calc(484 * var(--u)); width: calc(149 * var(--u)); height: calc(109 * var(--u)); background: var(--c-user); border: calc(1 * var(--u)) solid var(--c-user-b); border-top: 0; display: flex; flex-direction: column; align-items: center; padding-top: calc(16 * var(--u)); }
.wca2 .a-user::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(3 * var(--u)); background: #1f6fd6; border-radius: calc(2 * var(--u)) calc(2 * var(--u)) 0 0; }
.wca2 .a-user--1 { left: calc(94 * var(--u)); }
.wca2 .a-user--2 { left: calc(322 * var(--u)); }
.wca2 .a-user--3 { left: calc(548 * var(--u)); }
.wca2 .a-photo { width: calc(44 * var(--u)); height: calc(44 * var(--u)); border-radius: 50%; object-fit: cover; border: calc(1 * var(--u)) solid rgba(255,255,255,.6); }
.wca2 .a-ulabel { margin-top: calc(8 * var(--u)); font-size: calc(10.5 * var(--u)); color: var(--c-muted); }
.wca2 .a-email { font-size: calc(12.5 * var(--u)); font-weight: 600; white-space: nowrap; }

/* ---------- Animation (CSS only, 11s loop) ----------
   The Create Assignment card 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 card 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 */
.wca2 .a-line, .wca2 .a-caret, .wca2 .a-ln, .wca2 .a-glow, .wca2 .a-user {
  animation-duration: 11s; animation-iteration-count: infinite; animation-fill-mode: both; animation-timing-function: cubic-bezier(.22,1,.36,1);
}
.wca2 .a-line--n { animation-name: a-type-n; animation-timing-function: steps(11, end); }
.wca2 .a-line--i1 { animation-name: a-type-i1; animation-timing-function: steps(55, end); }
.wca2 .a-line--i2 { animation-name: a-type-i2; animation-timing-function: steps(33, end); }
.wca2 .a-caret { animation-name: a-caret; animation-timing-function: steps(1, end); }
.wca2 .a-trunk { animation-name: a-trunk; animation-timing-function: cubic-bezier(.45,0,.55,1); }
.wca2 .a-jl, .wca2 .a-jr { animation-name: a-junction; animation-timing-function: linear; }
.wca2 .a-bl { animation-name: a-left; animation-timing-function: linear; }
.wca2 .a-br { animation-name: a-right; animation-timing-function: linear; }
.wca2 .a-bc { animation-name: a-center; animation-timing-function: cubic-bezier(.45,0,.55,1); }
.wca2 .a-glow { animation-name: a-glow-vis; animation-timing-function: ease; }
.wca2 .a-gl--t { animation: a-gl-t 1.6s cubic-bezier(.45,0,.55,1) infinite; }
.wca2 .a-gl--l { animation: a-gl-l 1.6s cubic-bezier(.45,0,.55,1) infinite; }
.wca2 .a-gl--r { animation: a-gl-r 1.6s cubic-bezier(.45,0,.55,1) infinite; }
.wca2 .a-gl--c { animation: a-gl-c 1.6s cubic-bezier(.45,0,.55,1) infinite; }
.wca2 .a-user--1 { animation-name: a-user-side; }
.wca2 .a-user--2 { animation-name: a-user-mid; }
.wca2 .a-user--3 { animation-name: a-user-side; }

@keyframes a-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 a-type-i1 { 0%, 12.73% { clip-path: inset(0 100% 0 0); } 21.36%, 93.64% { clip-path: inset(0 0 0 0); } 96.36%, 100% { clip-path: inset(0 100% 0 0); } }
@keyframes a-type-i2 { 0%, 21.82% { clip-path: inset(0 100% 0 0); } 26.36%, 93.64% { clip-path: inset(0 0 0 0); } 96.36%, 100% { clip-path: inset(0 100% 0 0); } }
@keyframes a-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.1-3.4s, junction 3.4-3.5s, branches out 3.5-3.85s then down 3.85-4.15s, centre down 3.45-3.85s; all fade together 10.2-10.7s */
@keyframes a-trunk { 0%, 28.18% { transform: scaleY(0); opacity: 1; } 30.91%, 92.73% { transform: scaleY(1); opacity: 1; } 97.27%, 100% { transform: scaleY(1); opacity: 0; } }
@keyframes a-junction { 0%, 30.73% { opacity: 0; } 31.82%, 92.73% { opacity: 1; } 97.27%, 100% { opacity: 0; } }
@keyframes a-left { 0%, 31.82% { clip-path: inset(0 0 calc(100% - 3px) 100%); opacity: 1; } 35.00% { clip-path: inset(0 0 calc(100% - 3px) 0); opacity: 1; } 37.73%, 92.73% { clip-path: inset(0 0 0 0); opacity: 1; } 97.27%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
@keyframes a-right { 0%, 31.82% { clip-path: inset(0 100% calc(100% - 3px) 0); opacity: 1; } 35.00% { clip-path: inset(0 0 calc(100% - 3px) 0); opacity: 1; } 37.73%, 92.73% { clip-path: inset(0 0 0 0); opacity: 1; } 97.27%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
@keyframes a-center { 0%, 31.36% { transform: scaleY(0); opacity: 1; } 35.00%, 92.73% { transform: scaleY(1); opacity: 1; } 97.27%, 100% { transform: scaleY(1); opacity: 0; } }
/* cards pop as their line arrives */
@keyframes a-user-mid { 0%, 34.55% { opacity: 0; transform: translateY(8px) scale(.97); } 38.64%, 92.73% { opacity: 1; transform: none; } 97.27%, 100% { opacity: 0; transform: none; } }
@keyframes a-user-side { 0%, 37.27% { opacity: 0; transform: translateY(8px) scale(.97); } 41.36%, 92.73% { opacity: 1; transform: none; } 97.27%, 100% { opacity: 0; transform: none; } }
/* travelling light while the scene holds */
@keyframes a-glow-vis { 0%, 40.00% { opacity: 0; } 44.55%, 90.00% { opacity: 1; } 93.64%, 100% { opacity: 0; } }
@keyframes a-gl-t { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } 45% { transform: translateY(calc(30 * var(--u))); opacity: 1; } 50%, 100% { transform: translateY(calc(30 * var(--u))); opacity: 0; } }
@keyframes a-gl-l { 0%, 45% { transform: translateX(0); opacity: 0; } 52% { opacity: 1; } 92% { transform: translateX(calc(-190 * var(--u))); opacity: 1; } 100% { transform: translateX(calc(-200 * var(--u))); opacity: 0; } }
@keyframes a-gl-r { 0%, 45% { transform: translateX(0); opacity: 0; } 52% { opacity: 1; } 92% { transform: translateX(calc(190 * var(--u))); opacity: 1; } 100% { transform: translateX(calc(200 * var(--u))); opacity: 0; } }
@keyframes a-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) {
  .wca2 .a-line, .wca2 .a-ln, .wca2 .a-user { animation: none; }
  .wca2 .a-caret, .wca2 .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: 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; }
}