/* @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 ===*/
/* ==========================================================================
   QD Bios chat graphic (animated) -- qd-bios-chat.css
   Markup: qd-bios-chat.html   |   Preview: qd-bios-chat-preview.html

   Usage
   - Wrap the markup in any column; it fills 100% of the parent width and keeps a 4:3 ratio.
   - Theme: add ONE modifier on the root -> .qd-bios--dark  or  .qd-bios--light
   - Needs the Poppins font (400 / 600) already loaded by the theme.
   - Pure CSS animation (no JS). Loop is 8.95s. prefers-reduced-motion shows the finished state.
   - All sizes are in --u (1/800 of the graphic width), so it scales with its container.
   ========================================================================== */

.qd-bios {
  --u: .775px; /* fallback for browsers without container units */
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  container-type: inline-size;
  font-family: 'Poppins', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: var(--qd-text);
  --qd-accent: #5e6ad2;
  --qd-orange: #f2702f;
}
@supports (width: 1cqw) {
  .qd-bios { --u: calc(100cqw / 800); }
}
.qd-bios *, .qd-bios *::before, .qd-bios *::after { box-sizing: border-box; margin: 0; }

/* ---- themes ---- */
.qd-bios--dark {
  --qd-win: #10101f; --qd-card: #121226; --qd-text: #f4f3fa; --qd-muted: rgba(255,255,255,.62);
  --qd-line: rgba(255,255,255,.07); --qd-frame: rgba(255,255,255,.10); --qd-chip-b: rgba(255,255,255,.12);
  --qd-track: rgba(255,255,255,.10); --qd-active: rgba(255,255,255,.04);
  --qd-btn: #f4f3fa; --qd-btn-t: #0a0a1c;
  --qd-bubble: #1f2455; --qd-bubble-t: #f4f3fa; --qd-green: #4cb782;
  --qd-card-shadow: 0 calc(24 * var(--u)) calc(60 * var(--u)) rgba(0,0,0,.6), 0 0 calc(60 * var(--u)) rgba(94,106,210,.25);
}
.qd-bios--light {
  --qd-win: #ffffff; --qd-card: #ffffff; --qd-text: #050324; --qd-muted: #5d6172;
  --qd-line: rgba(5,3,36,.07); --qd-frame: rgba(5,3,36,.10); --qd-chip-b: rgba(5,3,36,.12);
  --qd-track: rgba(5,3,36,.10); --qd-active: rgba(5,3,36,.03);
  --qd-btn: #050324; --qd-btn-t: #ffffff;
  --qd-bubble: #050324; --qd-bubble-t: #ffffff; --qd-green: #23895a;
  --qd-card-shadow: 0 calc(24 * var(--u)) calc(60 * var(--u)) rgba(5,3,36,.14), 0 0 calc(60 * var(--u)) rgba(94,106,210,.12);
}

/* ---- layout ---- */
.qd-bios__stage { position: absolute; inset: 0; }
.qd-bios__window {
  position: absolute; left: calc(28 * var(--u)); top: calc(36 * var(--u)); width: calc(744 * var(--u)); height: calc(528 * var(--u));
  background: var(--qd-win); border: calc(1 * var(--u)) solid var(--qd-frame); border-radius: calc(14 * var(--u)); overflow: hidden;
}
.qd-bios__head {
  display: flex; align-items: center; justify-content: space-between;
  height: calc(62 * var(--u)); padding: 0 calc(28 * var(--u)); border-bottom: calc(1 * var(--u)) solid var(--qd-line);
}
.qd-bios__title { font-size: calc(20 * var(--u)); font-weight: 600; }

/* header status: three layers stacked, one visible at a time */
.qd-bios__status { display: grid; justify-items: end; align-items: center; font-size: calc(13 * var(--u)); color: var(--qd-muted); }
.qd-bios__status-item { grid-area: 1 / 1; display: flex; align-items: center; gap: calc(8 * var(--u)); white-space: nowrap; }
.qd-bios__status-item--idle { opacity: 0; }
.qd-bios__status-item--search { opacity: 0; }
.qd-bios__status-item--done { opacity: 1; }
.qd-bios__spinner {
  width: calc(13 * var(--u)); height: calc(13 * var(--u)); border-radius: 50%;
  border: calc(2 * var(--u)) solid var(--qd-track); border-top-color: var(--qd-orange);
}
.qd-bios__tick { width: calc(14 * var(--u)); height: calc(14 * var(--u)); display: block; }

.qd-bios__body { display: flex; flex-direction: column; gap: calc(12 * var(--u)); padding: calc(24 * var(--u)) calc(28 * var(--u)) 0; }
.qd-bios__prompt {
  align-self: flex-start; max-width: calc(590 * var(--u)); padding: calc(14 * var(--u)) calc(18 * var(--u));
  background: var(--qd-bubble); color: var(--qd-bubble-t); border-radius: calc(4 * var(--u));
  font-size: calc(15 * var(--u)); line-height: 1.5;
}
.qd-bios__reason {
  align-self: flex-start; display: flex; align-items: center; gap: calc(10 * var(--u));
  height: calc(34 * var(--u)); padding: 0 calc(14 * var(--u)); font-size: calc(13 * var(--u));
  background: var(--qd-active); border-left: calc(3 * var(--u)) solid var(--qd-green); border-radius: 0 calc(4 * var(--u)) calc(4 * var(--u)) 0;
}
.qd-bios__reason-plus { color: var(--qd-green); font-weight: 600; }

.qd-bios__list { margin-top: calc(18 * var(--u)); border-top: calc(1 * var(--u)) solid var(--qd-line); }
.qd-bios__row {
  display: flex; align-items: center; gap: calc(16 * var(--u));
  padding: calc(14 * var(--u)) calc(28 * var(--u)); border-bottom: calc(1 * var(--u)) solid var(--qd-line);
}
.qd-bios__check {
  position: relative;
  flex: none; width: calc(20 * var(--u)); height: calc(20 * var(--u)); border-radius: calc(4 * var(--u));
  border: calc(1.5 * var(--u)) solid var(--qd-chip-b); background: transparent;
  display: flex; align-items: center; justify-content: center;
}
/* Paint the selected color once; animate only this overlay's opacity.
   Negative inset covers the existing border without changing box dimensions. */
.qd-bios__check--on::before {
  content: "";
  position: absolute;
  inset: calc(-1.5 * var(--u));
  border-radius: inherit;
  background: var(--qd-accent);
  opacity: 1;
}
.qd-bios__check--on .qd-bios__mark { position: relative; z-index: 1; }
.qd-bios__mark { width: calc(12 * var(--u)); height: calc(12 * var(--u)); display: block; opacity: 0; }
.qd-bios__check--on .qd-bios__mark { opacity: 1; }
.qd-bios__avatar { flex: none; width: calc(46 * var(--u)); height: calc(46 * var(--u)); border-radius: 50%; object-fit: cover; display: block; }
.qd-bios__main { flex: 1; min-width: 0; }
.qd-bios__name-line { display: flex; align-items: center; gap: calc(10 * var(--u)); white-space: nowrap; }
.qd-bios__name { font-size: calc(16 * var(--u)); font-weight: 600; }
.qd-bios__pill { font-size: calc(12 * var(--u)); padding: calc(1 * var(--u)) calc(9 * var(--u)); border: calc(1 * var(--u)) solid var(--qd-chip-b); border-radius: 999px; }
.qd-bios__sum { margin-top: calc(4 * var(--u)); font-size: calc(13 * var(--u)); color: var(--qd-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* floating result card (gradient border) */
.qd-bios__card {
  position: absolute; right: calc(36 * var(--u)); bottom: calc(64 * var(--u)); z-index: 2; padding: calc(1 * var(--u));
  border-radius: calc(14 * var(--u));
  background: linear-gradient(135deg, rgba(242,112,47,.7), rgba(94,106,210,.5) 55%, rgba(255,255,255,.08));
  box-shadow: var(--qd-card-shadow);
}
.qd-bios__card-inner {
  display: flex; align-items: center; gap: calc(20 * var(--u));
  padding: calc(16 * var(--u)) calc(18 * var(--u)); background: var(--qd-card); border-radius: calc(13 * var(--u));
}
.qd-bios__card-title { display: flex; align-items: center; gap: calc(10 * var(--u)); font-size: calc(15 * var(--u)); font-weight: 600; white-space: nowrap; }
.qd-bios__spark { width: calc(17 * var(--u)); height: calc(17 * var(--u)); flex: none; fill: var(--qd-orange); }
.qd-bios__count { display: grid; }
.qd-bios__count > span { grid-area: 1 / 1; opacity: 0; }
.qd-bios__count > .qd-bios__n3 { opacity: 1; }
.qd-bios__card-btn {
  font-size: calc(13 * var(--u)); font-weight: 600; white-space: nowrap;
  color: var(--qd-btn-t); background: var(--qd-btn); padding: calc(9 * var(--u)) calc(16 * var(--u)); border-radius: calc(6 * var(--u));
}

/* ---- animation (8.95s loop) ---- */
@media (prefers-reduced-motion: no-preference) {
  .qd-bios__prompt   { animation: qd-bios-prompt 8.95s infinite; }
  .qd-bios__reason   { animation: qd-bios-reason 8.95s infinite; }
  .qd-bios__row:nth-child(1) { animation: qd-bios-row1 8.95s infinite; }
  .qd-bios__row:nth-child(2) { animation: qd-bios-row2 8.95s infinite; }
  .qd-bios__row:nth-child(3) { animation: qd-bios-row3 8.95s infinite; }
  .qd-bios__row:nth-child(4) { animation: qd-bios-row4 8.95s infinite; }
  .qd-bios__row:nth-child(1) .qd-bios__check--on::before { animation: qd-bios-ck1 8.95s infinite; }
  .qd-bios__row:nth-child(2) .qd-bios__check--on::before { animation: qd-bios-ck2 8.95s infinite; }
  .qd-bios__row:nth-child(3) .qd-bios__check--on::before { animation: qd-bios-ck3 8.95s infinite; }
  .qd-bios__row:nth-child(1) .qd-bios__mark { animation: qd-bios-mk1 8.95s infinite; }
  .qd-bios__row:nth-child(2) .qd-bios__mark { animation: qd-bios-mk2 8.95s infinite; }
  .qd-bios__row:nth-child(3) .qd-bios__mark { animation: qd-bios-mk3 8.95s infinite; }
  .qd-bios__card     { animation: qd-bios-card 8.95s infinite; }
  .qd-bios__n1 { animation: qd-bios-n1 8.95s infinite; }
  .qd-bios__n2 { animation: qd-bios-n2 8.95s infinite; }
  .qd-bios__count > .qd-bios__n3 { animation: qd-bios-n3 8.95s infinite; }
  .qd-bios__status-item--idle   { animation: qd-bios-st-idle 8.95s infinite; }
  .qd-bios__status-item--search { animation: qd-bios-st-search 8.95s infinite; }
  .qd-bios__status-item--done   { animation: qd-bios-st-done 8.95s infinite; }
  .qd-bios__spinner  { animation: qd-bios-spin .75s linear infinite; }
}
@keyframes qd-bios-spin { to { transform: rotate(360deg); } }

@keyframes qd-bios-prompt {
  0% { opacity:0;transform:translateY(calc(10 * var(--u)));  }
  4.469% { opacity:0;transform:translateY(calc(10 * var(--u))); animation-timing-function:cubic-bezier(.16,1,.3,1); }
  8.939% { opacity:1;transform:none;  }
  93.296% { opacity:1;transform:none; animation-timing-function:cubic-bezier(.16,1,.3,1); }
  98.883% { opacity:0;transform:translateY(calc(10 * var(--u)));  }
  100% { opacity:0;transform:translateY(calc(10 * var(--u)));  }
}
@keyframes qd-bios-reason {
  0% { opacity:0;transform:translateY(calc(8 * var(--u)));  }
  21.229% { opacity:0;transform:translateY(calc(8 * var(--u))); animation-timing-function:cubic-bezier(.16,1,.3,1); }
  25.698% { opacity:1;transform:none;  }
  93.296% { opacity:1;transform:none; animation-timing-function:cubic-bezier(.16,1,.3,1); }
  98.883% { opacity:0;transform:translateY(calc(8 * var(--u)));  }
  100% { opacity:0;transform:translateY(calc(8 * var(--u)));  }
}
@keyframes qd-bios-row1 {
  0% { opacity:0;transform:translateY(calc(10 * var(--u)));  }
  27.374% { opacity:0;transform:translateY(calc(10 * var(--u))); animation-timing-function:cubic-bezier(.16,1,.3,1); }
  31.844% { opacity:1;transform:none;  }
  93.296% { opacity:1;transform:none; animation-timing-function:cubic-bezier(.16,1,.3,1); }
  98.883% { opacity:0;transform:translateY(calc(10 * var(--u)));  }
  100% { opacity:0;transform:translateY(calc(10 * var(--u)));  }
}
@keyframes qd-bios-row2 {
  0% { opacity:0;transform:translateY(calc(10 * var(--u)));  }
  32.402% { opacity:0;transform:translateY(calc(10 * var(--u))); animation-timing-function:cubic-bezier(.16,1,.3,1); }
  36.872% { opacity:1;transform:none;  }
  93.296% { opacity:1;transform:none; animation-timing-function:cubic-bezier(.16,1,.3,1); }
  98.883% { opacity:0;transform:translateY(calc(10 * var(--u)));  }
  100% { opacity:0;transform:translateY(calc(10 * var(--u)));  }
}
@keyframes qd-bios-row3 {
  0% { opacity:0;transform:translateY(calc(10 * var(--u)));  }
  37.43% { opacity:0;transform:translateY(calc(10 * var(--u))); animation-timing-function:cubic-bezier(.16,1,.3,1); }
  41.899% { opacity:1;transform:none;  }
  93.296% { opacity:1;transform:none; animation-timing-function:cubic-bezier(.16,1,.3,1); }
  98.883% { opacity:0;transform:translateY(calc(10 * var(--u)));  }
  100% { opacity:0;transform:translateY(calc(10 * var(--u)));  }
}
@keyframes qd-bios-row4 {
  0% { opacity:0;transform:translateY(calc(10 * var(--u)));  }
  42.458% { opacity:0;transform:translateY(calc(10 * var(--u))); animation-timing-function:cubic-bezier(.16,1,.3,1); }
  46.927% { opacity:1;transform:none;  }
  93.296% { opacity:1;transform:none; animation-timing-function:cubic-bezier(.16,1,.3,1); }
  98.883% { opacity:0;transform:translateY(calc(10 * var(--u)));  }
  100% { opacity:0;transform:translateY(calc(10 * var(--u)));  }
}
@keyframes qd-bios-card {
  0% { opacity:0;transform:translateY(calc(14 * var(--u)));  }
  49.721% { opacity:0;transform:translateY(calc(14 * var(--u))); animation-timing-function:cubic-bezier(.16,1,.3,1); }
  54.19% { opacity:1;transform:none;  }
  93.296% { opacity:1;transform:none; animation-timing-function:cubic-bezier(.16,1,.3,1); }
  98.883% { opacity:0;transform:translateY(calc(14 * var(--u)));  }
  100% { opacity:0;transform:translateY(calc(14 * var(--u)));  }
}
@keyframes qd-bios-st-idle {
  0% { opacity:.6;  }
  12.291% { opacity:.6;  }
  14.525% { opacity:0;  }
  93.296% { opacity:0;  }
  96.648% { opacity:.6;  }
  100% { opacity:.6;  }
}
@keyframes qd-bios-st-search {
  0% { opacity:0;  }
  12.279% { opacity:0;  }
  14.525% { opacity:1;  }
  21.229% { opacity:1;  }
  23.464% { opacity:0;  }
  100% { opacity:0;  }
}
@keyframes qd-bios-st-done {
  0% { opacity:0;  }
  21.229% { opacity:0;  }
  23.464% { opacity:1;  }
  93.296% { opacity:1;  }
  95.531% { opacity:0;  }
  100% { opacity:0;  }
}
@keyframes qd-bios-ck1 {
  0% { opacity:0;  }
  49.721% { opacity:0;  }
  52.514% { opacity:1;  }
  93.296% { opacity:1;  }
  96.648% { opacity:0;  }
  100% { opacity:0;  }
}
@keyframes qd-bios-mk1 {
  0% { opacity:0;transform:scale(.6);  }
  49.721% { opacity:0;transform:scale(.6);  }
  50.838% { opacity:1;transform:scale(.6);  }
  52.067% { transform:scale(1.12);  }
  53.631% { opacity:1;transform:scale(1);  }
  93.296% { opacity:1;transform:scale(1);  }
  95.531% { opacity:0;transform:scale(1);  }
  100% { opacity:0;transform:scale(.6);  }
}
@keyframes qd-bios-ck2 {
  0% { opacity:0;  }
  56.983% { opacity:0;  }
  59.777% { opacity:1;  }
  93.296% { opacity:1;  }
  96.648% { opacity:0;  }
  100% { opacity:0;  }
}
@keyframes qd-bios-mk2 {
  0% { opacity:0;transform:scale(.6);  }
  56.983% { opacity:0;transform:scale(.6);  }
  58.101% { opacity:1;transform:scale(.6);  }
  59.33% { transform:scale(1.12);  }
  60.894% { opacity:1;transform:scale(1);  }
  93.296% { opacity:1;transform:scale(1);  }
  95.531% { opacity:0;transform:scale(1);  }
  100% { opacity:0;transform:scale(.6);  }
}
@keyframes qd-bios-ck3 {
  0% { opacity:0;  }
  64.246% { opacity:0;  }
  67.039% { opacity:1;  }
  93.296% { opacity:1;  }
  96.648% { opacity:0;  }
  100% { opacity:0;  }
}
@keyframes qd-bios-mk3 {
  0% { opacity:0;transform:scale(.6);  }
  64.246% { opacity:0;transform:scale(.6);  }
  65.363% { opacity:1;transform:scale(.6);  }
  66.592% { transform:scale(1.12);  }
  68.156% { opacity:1;transform:scale(1);  }
  93.296% { opacity:1;transform:scale(1);  }
  95.531% { opacity:0;transform:scale(1);  }
  100% { opacity:0;transform:scale(.6);  }
}
@keyframes qd-bios-n1 {
  0% { opacity:0;  }
  49.721% { opacity:0;  }
  51.955% { opacity:1;  }
  56.983% { opacity:1;  }
  58.659% { opacity:0;  }
  100% { opacity:0;  }
}
@keyframes qd-bios-n2 {
  0% { opacity:0;  }
  56.983% { opacity:0;  }
  59.218% { opacity:1;  }
  64.246% { opacity:1;  }
  65.922% { opacity:0;  }
  100% { opacity:0;  }
}
@keyframes qd-bios-n3 {
  0% { opacity:0;  }
  64.246% { opacity:0;  }
  66.48% { opacity:1;  }
  93.296% { opacity:1;  }
  95.531% { opacity:0;  }
  100% { opacity:0;  }
}

/* =========================================================
   Win/loss chat graphic (QPilot) — child theme CSS
   Pairs with winloss-chat-dark.html / winloss-chat-light.html
   - Pure CSS (no JavaScript).
   - Always fills its column at a 4:3 ratio (620x465 in the
     media column) and scales everything inside proportionally,
     like an image, so nothing spills out of the box.
   ========================================================= */

/* ---------- Colour tokens: dark ---------- */
.wlc.wlc--dark {
  --wlc-win: #10101f;
  --wlc-card: #121226;
  --wlc-text: #f4f3fa;
  --wlc-body: rgba(255,255,255,.72);
  --wlc-muted: rgba(255,255,255,.55);
  --wlc-faint: rgba(255,255,255,.34);
  --wlc-line: rgba(255,255,255,.07);
  --wlc-frame: rgba(255,255,255,.10);
  --wlc-chip-b: rgba(255,255,255,.12);
  --wlc-btn: #f4f3fa;
  --wlc-btn-t: #0a0a1c;
  --wlc-ghost: rgba(255,255,255,.6);
  --wlc-ghost-b: rgba(255,255,255,.14);
  --wlc-green-t: #6fd3a0;
  --wlc-blue-t: #b8bdff;
  --wlc-icon: rgba(94,106,210,.20);
  --wlc-glow: rgba(94,106,210,.35);
  --wlc-bubble: #1f2455;
  --wlc-bubble-t: #f4f3fa;
  --wlc-lost: rgba(255,255,255,.22);
  --wlc-shadow-c: rgba(0,0,0,.6);
}

/* ---------- Colour tokens: light ---------- */
.wlc.wlc--light {
  --wlc-win: #ffffff;
  --wlc-card: #ffffff;
  --wlc-text: #050324;
  --wlc-body: #55536e;
  --wlc-muted: #5d6172;
  --wlc-faint: #a3a5b3;
  --wlc-line: rgba(5,3,36,.07);
  --wlc-frame: rgba(5,3,36,.10);
  --wlc-chip-b: rgba(5,3,36,.12);
  --wlc-btn: #050324;
  --wlc-btn-t: #ffffff;
  --wlc-ghost: #55536e;
  --wlc-ghost-b: rgba(5,3,36,.14);
  --wlc-green-t: #23895a;
  --wlc-blue-t: #3b46b8;
  --wlc-icon: #eef0fb;
  --wlc-glow: rgba(94,106,210,.14);
  --wlc-bubble: #050324;
  --wlc-bubble-t: #ffffff;
  --wlc-lost: rgba(5,3,36,.16);
  --wlc-shadow-c: rgba(5,3,36,.18);
}

/* ---------- Frame ----------
   The artwork is drawn on an 800x600 grid. --u is one grid unit,
   worked out from the box width, so the whole thing scales. */
.wlc {
  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;
}
.wlc *, .wlc *::before, .wlc *::after {
  box-sizing: border-box;
  --u: calc(100cqw / 800);
}
.wlc .wlc-stage {
  position: absolute;
  inset: 0;
  color: var(--wlc-text);
  font-size: calc(16 * var(--u));
  line-height: 1.5;
  letter-spacing: normal;
  text-transform: none;
}
/* neutralise common theme styles */
.wlc h3, .wlc p { margin: 0; padding: 0; font-family: inherit; letter-spacing: normal; text-transform: none; }
.wlc img { display: block; max-width: none; margin: 0; padding: 0; }
.wlc svg { display: block; flex-shrink: 0; }
.wlc a { text-decoration: none; text-transform: none; letter-spacing: normal; }

/* ---------- App window ---------- */
.wlc .wlc-window {
  position: absolute;
  left: calc(44 * var(--u));
  top: calc(40 * var(--u));
  width: calc(620 * var(--u));
  height: calc(456 * var(--u));
  border-radius: calc(14 * var(--u));
  background: var(--wlc-win);
  border: calc(1 * var(--u)) solid var(--wlc-frame);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.wlc .wlc-crumbs {
  height: calc(52 * var(--u));
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  padding: 0 calc(24 * var(--u));
  border-bottom: calc(1 * var(--u)) solid var(--wlc-line);
  font-size: calc(16 * var(--u));
  color: var(--wlc-muted);
  white-space: nowrap;
}
.wlc .wlc-sep { opacity: .5; }
.wlc .wlc-current { color: var(--wlc-text); }

.wlc .wlc-doc { display: flex; flex-direction: column; gap: calc(12 * var(--u)); padding: calc(24 * var(--u)) calc(24 * var(--u)) calc(20 * var(--u)); }
.wlc .wlc-doc-title {
  font-size: calc(21 * var(--u));
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--wlc-text);
  white-space: nowrap;
}
.wlc .wlc-meta { display: flex; align-items: center; gap: calc(12 * var(--u)); font-size: calc(14 * var(--u)); color: var(--wlc-muted); }
.wlc .wlc-author { color: var(--wlc-blue-t); }
.wlc .wlc-avatars { display: flex; }
.wlc .wlc-avatar {
  width: calc(30 * var(--u));
  height: calc(30 * var(--u));
  border-radius: 50%;
  object-fit: cover;
  border: calc(2 * var(--u)) solid var(--wlc-win);
}
.wlc .wlc-avatar + .wlc-avatar { margin-left: calc(-8 * var(--u)); }

.wlc .wlc-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(--wlc-line); }
.wlc .wlc-stat { display: flex; align-items: center; gap: calc(12 * var(--u)); }
.wlc .wlc-stat-icon {
  width: calc(38 * var(--u));
  height: calc(38 * var(--u));
  border-radius: 50%;
  background: var(--wlc-icon);
  display: flex;
  align-items: center;
  justify-content: center;
}
.wlc .wlc-stat-icon svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); stroke: var(--wlc-blue-t); }
.wlc .wlc-stat-value { display: block; font-size: calc(17 * var(--u)); font-weight: 600; line-height: 1.2; }
.wlc .wlc-stat-label { display: block; font-size: calc(13 * var(--u)); color: var(--wlc-muted); }

.wlc .wlc-row {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1.3fr;
  gap: calc(16 * var(--u));
  align-items: center;
  padding: 0 calc(24 * var(--u));
  border-top: calc(1 * var(--u)) solid var(--wlc-line);
  white-space: nowrap;
}
.wlc .wlc-row--head { padding-top: calc(12 * var(--u)); padding-bottom: calc(12 * var(--u)); font-size: calc(12.5 * var(--u)); color: var(--wlc-faint); }
.wlc .wlc-row--body { height: calc(58 * var(--u)); font-size: calc(14.5 * var(--u)); }
.wlc .wlc-cell { color: var(--wlc-body); }
.wlc .wlc-viewer { display: flex; align-items: center; gap: calc(12 * var(--u)); }
.wlc .wlc-viewer-photo { width: calc(32 * var(--u)); height: calc(32 * var(--u)); border-radius: 50%; object-fit: cover; flex-shrink: 0; }

/* ---------- Floating chat card ---------- */
.wlc .wlc-glow {
  position: absolute;
  right: calc(100 * var(--u));
  bottom: calc(110 * var(--u));
  width: calc(280 * var(--u));
  height: calc(180 * var(--u));
  background: radial-gradient(ellipse at center, var(--wlc-glow), transparent 55%);
  filter: blur(calc(28 * var(--u)));
  pointer-events: none;
}
.wlc .wlc-card {
  position: absolute;
  right: calc(28 * var(--u));
  bottom: calc(64 * var(--u));
  width: calc(384 * var(--u));
  z-index: 2;
}
.wlc .wlc-card-border {
  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(--wlc-shadow-c);
}
.wlc .wlc-card-inner {
  display: flex;
  flex-direction: column;
  gap: calc(14 * var(--u));
  padding: calc(20 * var(--u));
  border-radius: calc(13 * var(--u));
  background: var(--wlc-card);
}
.wlc .wlc-card-head { display: flex; align-items: center; justify-content: space-between; }
.wlc .wlc-card-title { display: flex; align-items: center; gap: calc(10 * var(--u)); font-size: calc(16 * var(--u)); font-weight: 600; }
.wlc .wlc-card-title svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.wlc .wlc-chip { font-size: calc(12 * var(--u)); color: var(--wlc-muted); border: calc(1 * var(--u)) solid var(--wlc-chip-b); padding: calc(3 * var(--u)) calc(9 * var(--u)); border-radius: calc(6 * var(--u)); }
.wlc .wlc-bubble {
  padding: calc(12 * var(--u)) calc(15 * var(--u));
  border-radius: calc(4 * var(--u));
  background: var(--wlc-bubble);
  color: var(--wlc-bubble-t);
  font-size: calc(14 * var(--u));
  line-height: 1.5;
}
.wlc .wlc-answer-wrap { position: relative; }
.wlc .wlc-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(--wlc-muted);
  opacity: 0;
}
.wlc .wlc-dots { display: flex; gap: calc(4 * var(--u)); }
.wlc .wlc-dots i { display: block; width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; background: #f2702f; }
.wlc .wlc-answer { font-size: calc(15 * var(--u)); line-height: 1.55; color: var(--wlc-body); }
.wlc .wlc-answer b { color: var(--wlc-green-t); font-weight: 600; }
.wlc .wlc-bar { display: flex; gap: calc(3 * var(--u)); height: calc(8 * var(--u)); }
.wlc .wlc-bar i { display: block; border-radius: calc(4 * var(--u)); transform-origin: 0 50%; }
.wlc .wlc-won { flex: 6; background: #4cb782; }
.wlc .wlc-lost { flex: 2; background: var(--wlc-lost); }
.wlc .wlc-actions { display: flex; gap: calc(10 * var(--u)); }
.wlc .wlc-btn {
  display: inline-block;
  padding: calc(8 * var(--u)) calc(14 * var(--u));
  border-radius: calc(6 * var(--u));
  font-size: calc(14 * var(--u));
  line-height: 1.5;
  white-space: nowrap;
}
.wlc .wlc-btn--primary { font-weight: 600; color: var(--wlc-btn-t); background: var(--wlc-btn); border: calc(1 * var(--u)) solid var(--wlc-btn); }
.wlc .wlc-btn--ghost { font-weight: 400; color: var(--wlc-ghost); background: transparent; border: calc(1 * var(--u)) solid var(--wlc-ghost-b); }
.wlc .wlc-btn:hover { opacity: .88; }

/* ---------- Animation (CSS only, loops every 10s) ----------
   0.6s  stats + rows fade up one by one
   2.2s  chat card rises in
   3.0s  question appears
   4.0s  "Checking past pursuits" dots
   5.4s  answer, bar fills, buttons
   8.8s  card fades out, rows fade out, repeat */
.wlc .wlc-rows-item,
.wlc .wlc-card,
.wlc .wlc-glow,
.wlc .wlc-bubble,
.wlc .wlc-thinking,
.wlc .wlc-answer,
.wlc .wlc-bar i,
.wlc .wlc-actions {
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(.22,1,.36,1);
}
.wlc .wlc-rows-item { animation-name: wlc-row; }
.wlc .wlc-rows-item:nth-of-type(4) { animation-delay: .18s; }
.wlc .wlc-rows-item:nth-of-type(5) { animation-delay: .36s; }
.wlc .wlc-rows-item:nth-of-type(6) { animation-delay: .54s; }
.wlc .wlc-card { animation-name: wlc-card; }
.wlc .wlc-glow { animation-name: wlc-fade-card; }
.wlc .wlc-bubble { animation-name: wlc-bubble; }
.wlc .wlc-thinking { animation-name: wlc-thinking; animation-timing-function: linear; }
.wlc .wlc-answer { animation-name: wlc-answer; }
.wlc .wlc-won { animation-name: wlc-won; }
.wlc .wlc-lost { animation-name: wlc-lost; }
.wlc .wlc-actions { animation-name: wlc-actions; }
.wlc .wlc-dots i { animation: wlc-dot 1.1s ease-in-out infinite; }
.wlc .wlc-dots i:nth-child(2) { animation-delay: .15s; }
.wlc .wlc-dots i:nth-child(3) { animation-delay: .3s; }

@keyframes wlc-row {
  0%, 6%   { opacity: 0; transform: translateY(10px); }
  14%, 93% { opacity: 1; transform: none; }
  100%     { opacity: 0; transform: none; }
}
@keyframes wlc-card {
  0%, 22%  { opacity: 0; transform: translateY(14px); }
  30%, 88% { opacity: 1; transform: none; }
  95%, 100% { opacity: 0; transform: none; }
}
@keyframes wlc-fade-card {
  0%, 22%  { opacity: 0; }
  30%, 88% { opacity: 1; }
  95%, 100% { opacity: 0; }
}
@keyframes wlc-bubble {
  0%, 30%   { opacity: 0; transform: translateY(8px); }
  38%, 100% { opacity: 1; transform: none; }
}
@keyframes wlc-thinking {
  0%, 40%   { opacity: 0; }
  41%, 53%  { opacity: 1; }
  54%, 100% { opacity: 0; }
}
@keyframes wlc-answer {
  0%, 54%   { opacity: 0; transform: translateY(6px); }
  62%, 100% { opacity: 1; transform: none; }
}
@keyframes wlc-won {
  0%, 56%   { transform: scaleX(0); }
  67%, 100% { transform: scaleX(1); }
}
@keyframes wlc-lost {
  0%, 57.5% { transform: scaleX(0); }
  68.5%, 100% { transform: scaleX(1); }
}
@keyframes wlc-actions {
  0%, 59%   { opacity: 0; }
  67%, 100% { opacity: 1; }
}
@keyframes wlc-dot {
  0%, 80%, 100% { opacity: .25; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-2px); }
}

/* Reduced motion: show the finished frame, no movement */
@media (prefers-reduced-motion: reduce) {
  .wlc .wlc-rows-item, .wlc .wlc-card, .wlc .wlc-glow, .wlc .wlc-bubble,
  .wlc .wlc-answer, .wlc .wlc-bar i, .wlc .wlc-actions, .wlc .wlc-dots i { animation: none; }
  .wlc .wlc-thinking { 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; }
}